fix: umd build size, force prod devtools (#4074)

* fix: umd build size

* fix: devtools force production

Author: DamianOsipiuk

package.json

@@ -14,7 +14,8 @@
     "test:jest": "lerna run test:codemods --stream --no-bail && jest --config ./jest.config.ts",
     "test:jest:dev": "jest --config ./jest.config.ts --watch",
     "test:size": "npm run build && bundlewatch",
-    "build": "rollup --config rollup.config.js && npm run typecheck",
+    "build": "rollup --config rollup.config.js && npm run typecheck && npm run build:copyTypes",
+    "build:copyTypes": "cp packages/react-query-devtools/build/lib/index.d.ts packages/react-query-devtools/build/lib/index.prod.d.ts",
     "typecheck": "tsc -b",
     "watch": "concurrently --kill-others \"rollup --config rollup.config.js -w\" \"npm run typecheck -- --watch\" \"npm run test\"",
     "linkAll": "lerna exec 'npm run link' --parallel",

packages/query-async-storage-persister/package.json

@@ -20,6 +20,7 @@
     },
     "./package.json": "./package.json"
   },
+  "sideEffects": false,
   "files": [
     "build/lib/*",
     "build/umd/*",

packages/query-broadcast-client-experimental/package.json

@@ -20,6 +20,7 @@
     },
     "./package.json": "./package.json"
   },
+  "sideEffects": false,
   "files": [
     "build/lib/*",
     "build/umd/*",

packages/query-core/package.json

@@ -20,6 +20,7 @@
     },
     "./package.json": "./package.json"
   },
+  "sideEffects": false,
   "files": [
     "build/lib/*",
     "build/umd/*",

packages/query-sync-storage-persister/package.json

@@ -20,6 +20,7 @@
     },
     "./package.json": "./package.json"
   },
+  "sideEffects": false,
   "files": [
     "build/lib/*",
     "build/umd/*",

packages/react-query-devtools/cjs.fallback.js

@@ -14,37 +14,32 @@
   "main": "build/lib/index.js",
   "exports": {
     ".": {
-      "development": {
-        "types": "./build/lib/index.d.ts",
-        "import": "./build/lib/index.mjs",
-        "default": "./build/lib/index.js"
-      },
-      "default": {
-        "types": "./build/lib/index.d.ts",
-        "import": "./build/lib/noop.mjs",
-        "default": "./cjs.fallback.js"
-      }
-    },
-    "./production": {
       "types": "./build/lib/index.d.ts",
       "import": "./build/lib/index.mjs",
       "default": "./build/lib/index.js"
     },
+    "./build/lib/index.prod.js": {
+      "types": "./build/lib/index.d.ts",
+      "import": "./build/lib/index.prod.mjs",
+      "default": "./build/lib/index.prod.js"
+    },
     "./package.json": "./package.json"
   },
+  "sideEffects": false,
   "files": [
     "build/lib/*",
     "build/umd/*",
-    "cjs.fallback.js",
     "src"
   ],
   "scripts": {
     "clean": "rm -rf ./build",
     "test:eslint": "../../node_modules/.bin/eslint --ext .ts,.tsx ./src"
   },
+  "devDependencies": {
+    "@types/use-sync-external-store": "^0.0.3"
+  },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.1.1",
-    "@types/use-sync-external-store": "^0.0.3",
     "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {

packages/react-query-devtools/package.json

@@ -20,6 +20,7 @@
     },
     "./package.json": "./package.json"
   },
+  "sideEffects": false,
   "files": [
     "build/lib/*",
     "build/umd/*",

packages/react-query-persist-client/package.json

@@ -41,12 +41,12 @@
   ],
   "devDependencies": {
     "@types/jscodeshift": "^0.11.3",
+    "@types/use-sync-external-store": "^0.0.3",
     "jscodeshift": "^0.13.1",
     "react-error-boundary": "^3.1.4"
   },
   "dependencies": {
     "@tanstack/query-core": "4.3.0-beta.3",
-    "@types/use-sync-external-store": "^0.0.3",
     "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {

packages/react-query/package.json

@@ -17,9 +17,10 @@ type Options = {
   jsName: string
   outputFile: string
   globals: Record<string, string>
+  forceDevEnv: boolean
 }
 
-const umdDevPlugin = (type: 'development' | 'production') =>
+const forceEnvPlugin = (type: 'development' | 'production') =>
   replace({
     'process.env.NODE_ENV': `"${type}"`,
     delimiters: ['', ''],
@@ -83,8 +84,12 @@ export default function rollup(options: RollupOptions): RollupOptions[] {
         react: 'React',
         'react-dom': 'ReactDOM',
         '@tanstack/query-core': 'QueryCore',
+        'use-sync-external-store/shim/index.js': 'UseSyncExternalStore',
       },
-      bundleUMDGlobals: ['@tanstack/query-core'],
+      bundleUMDGlobals: [
+        '@tanstack/query-core',
+        'use-sync-external-store/shim/index.js',
+      ],
     }),
     ...buildConfigs({
       name: 'react-query-devtools',
@@ -94,19 +99,31 @@ export default function rollup(options: RollupOptions): RollupOptions[] {
       entryFile: 'src/index.ts',
       globals: {
         react: 'React',
+        'react-dom': 'ReactDOM',
         '@tanstack/react-query': 'ReactQuery',
+        '@tanstack/match-sorter-utils': 'MatchSorterUtils',
+        'use-sync-external-store/shim/index.js': 'UseSyncExternalStore',
       },
+      bundleUMDGlobals: [
+        '@tanstack/match-sorter-utils',
+        'use-sync-external-store/shim/index.js',
+      ],
     }),
     ...buildConfigs({
-      name: 'react-query-devtools-noop',
+      name: 'react-query-devtools-prod',
       packageDir: 'packages/react-query-devtools',
       jsName: 'ReactQueryDevtools',
-      outputFile: 'noop',
-      entryFile: 'src/noop.ts',
+      outputFile: 'index.prod',
+      entryFile: 'src/index.ts',
       globals: {
         react: 'React',
+        'react-dom': 'ReactDOM',
         '@tanstack/react-query': 'ReactQuery',
+        '@tanstack/match-sorter-utils': 'MatchSorterUtils',
+        'use-sync-external-store/shim/index.js': 'UseSyncExternalStore',
       },
+      forceDevEnv: true,
+      skipUmdBuild: true,
     }),
     ...buildConfigs({
       name: 'react-query-persist-client',
@@ -132,6 +149,9 @@ function buildConfigs(opts: {
   globals: Record<string, string>
   // This option allows to bundle specified dependencies for umd build
   bundleUMDGlobals?: string[]
+  // Force prod env build
+  forceDevEnv?: boolean
+  skipUmdBuild?: boolean
 }): RollupOptions[] {
   const input = path.resolve(opts.packageDir, opts.entryFile)
   const externalDeps = Object.keys(opts.globals)
@@ -152,41 +172,65 @@ function buildConfigs(opts: {
     external,
     banner,
     globals: opts.globals,
+    forceDevEnv: opts.forceDevEnv || false,
   }
 
-  return [esm(options), cjs(options), umdDev({...options, external: umdExternal}), umdProd({...options, external: umdExternal})]
+  let builds = [esm(options), cjs(options)]
+
+  if (!opts.skipUmdBuild) {
+    builds = builds.concat([
+      umdDev({ ...options, external: umdExternal }),
+      umdProd({ ...options, external: umdExternal }),
+    ])
+  }
+
+  return builds
 }
 
-function esm({ input, packageDir, external, banner }: Options): RollupOptions {
+function esm({
+  input,
+  packageDir,
+  external,
+  banner,
+  outputFile,
+  forceDevEnv,
+}: Options): RollupOptions {
   return {
     // ESM
     external,
     input,
     output: {
       format: 'esm',
-      entryFileNames: '[name].mjs',
+      file: `${packageDir}/build/lib/${outputFile}.mjs`,
       sourcemap: true,
-      dir: `${packageDir}/build/lib`,
       banner,
     },
     plugins: [
       svelte(),
       babelPlugin,
       commonJS(),
       nodeResolve({ extensions: ['.ts', '.tsx'] }),
+      forceDevEnv ? forceEnvPlugin('development') : undefined,
     ],
   }
 }
 
-function cjs({ input, external, packageDir, banner }: Options): RollupOptions {
+function cjs({
+  input,
+  external,
+  packageDir,
+  banner,
+  outputFile,
+  forceDevEnv,
+}: Options): RollupOptions {
   return {
     // CJS
     external,
     input,
     output: {
       format: 'cjs',
+      file: `${packageDir}/build/lib/${outputFile}.js`,
       sourcemap: true,
-      dir: `${packageDir}/build/lib`,
       exports: 'named',
       banner,
     },
@@ -195,6 +239,7 @@ function cjs({ input, external, packageDir, banner }: Options): RollupOptions {
       babelPlugin,
       commonJS(),
       nodeResolve({ extensions: ['.ts', '.tsx'] }),
+      forceDevEnv ? forceEnvPlugin('development') : undefined,
     ],
   }
 }
@@ -225,7 +270,7 @@ function umdDev({
       babelPlugin,
       nodeResolve({ extensions: ['.ts', '.tsx'] }),
       commonJS(),
-      umdDevPlugin('development'),
+      forceEnvPlugin('development'),
     ],
   }
 }
@@ -256,7 +301,7 @@ function umdProd({
       babelPlugin,
       commonJS(),
       nodeResolve({ extensions: ['.ts', '.tsx'] }),
-      umdDevPlugin('production'),
+      forceEnvPlugin('production'),
       terser({
         mangle: true,
         compress: true,