From 37a786baadb6fd9b0fbadd0f41b8541cd5bc7982 Mon Sep 17 00:00:00 2001 From: Damian Osipiuk Date: Tue, 23 Aug 2022 16:28:55 +0200 Subject: [PATCH 1/2] fix: umd build size --- packages/react-query-devtools/package.json | 4 +++- packages/react-query/package.json | 2 +- rollup.config.ts | 20 ++++++++++++++++++-- 3 files changed, 22 insertions(+), 4 deletions(-) diff --git a/packages/react-query-devtools/package.json b/packages/react-query-devtools/package.json index 9c164fbbb4..30f257fe62 100644 --- a/packages/react-query-devtools/package.json +++ b/packages/react-query-devtools/package.json @@ -42,9 +42,11 @@ "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": { diff --git a/packages/react-query/package.json b/packages/react-query/package.json index 051d8c6fec..4e754f3f88 100644 --- a/packages/react-query/package.json +++ b/packages/react-query/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": { diff --git a/rollup.config.ts b/rollup.config.ts index 33de5b501d..6ee9259dc1 100644 --- a/rollup.config.ts +++ b/rollup.config.ts @@ -83,8 +83,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,8 +98,15 @@ 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', @@ -154,7 +165,12 @@ function buildConfigs(opts: { globals: opts.globals, } - return [esm(options), cjs(options), umdDev({...options, external: umdExternal}), umdProd({...options, external: umdExternal})] + return [ + esm(options), + cjs(options), + umdDev({ ...options, external: umdExternal }), + umdProd({ ...options, external: umdExternal }), + ] } function esm({ input, packageDir, external, banner }: Options): RollupOptions { From ed141c97ec597c818c236ed4f1c6b5d7ae5650ee Mon Sep 17 00:00:00 2001 From: Damian Osipiuk Date: Tue, 23 Aug 2022 22:35:53 +0200 Subject: [PATCH 2/2] fix: devtools force production --- package.json | 3 +- .../package.json | 1 + .../package.json | 1 + packages/query-core/package.json | 1 + .../query-sync-storage-persister/package.json | 1 + packages/react-query-devtools/cjs.fallback.js | 13 ---- packages/react-query-devtools/package.json | 19 ++---- .../react-query-persist-client/package.json | 1 + rollup.config.ts | 63 ++++++++++++++----- 9 files changed, 59 insertions(+), 44 deletions(-) delete mode 100644 packages/react-query-devtools/cjs.fallback.js diff --git a/package.json b/package.json index 6ccef8537e..0fcbb3ef4d 100644 --- a/package.json +++ b/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", diff --git a/packages/query-async-storage-persister/package.json b/packages/query-async-storage-persister/package.json index fd40c1604c..f547292778 100644 --- a/packages/query-async-storage-persister/package.json +++ b/packages/query-async-storage-persister/package.json @@ -20,6 +20,7 @@ }, "./package.json": "./package.json" }, + "sideEffects": false, "files": [ "build/lib/*", "build/umd/*", diff --git a/packages/query-broadcast-client-experimental/package.json b/packages/query-broadcast-client-experimental/package.json index 36174670f5..dda9824b4c 100644 --- a/packages/query-broadcast-client-experimental/package.json +++ b/packages/query-broadcast-client-experimental/package.json @@ -20,6 +20,7 @@ }, "./package.json": "./package.json" }, + "sideEffects": false, "files": [ "build/lib/*", "build/umd/*", diff --git a/packages/query-core/package.json b/packages/query-core/package.json index fca3fc417a..c4d4e20efe 100644 --- a/packages/query-core/package.json +++ b/packages/query-core/package.json @@ -20,6 +20,7 @@ }, "./package.json": "./package.json" }, + "sideEffects": false, "files": [ "build/lib/*", "build/umd/*", diff --git a/packages/query-sync-storage-persister/package.json b/packages/query-sync-storage-persister/package.json index 8cdcba3f69..cb4d7f5755 100644 --- a/packages/query-sync-storage-persister/package.json +++ b/packages/query-sync-storage-persister/package.json @@ -20,6 +20,7 @@ }, "./package.json": "./package.json" }, + "sideEffects": false, "files": [ "build/lib/*", "build/umd/*", diff --git a/packages/react-query-devtools/cjs.fallback.js b/packages/react-query-devtools/cjs.fallback.js deleted file mode 100644 index 5df8d8f1f1..0000000000 --- a/packages/react-query-devtools/cjs.fallback.js +++ /dev/null @@ -1,13 +0,0 @@ -// This is the cjs fallback for bundlers that do not support exports.development conditional -if (process.env.NODE_ENV !== 'development') { - module.exports = { - ReactQueryDevtools: function () { - return null - }, - ReactQueryDevtoolsPanel: function () { - return null - }, - } -} else { - module.exports = require('./build/lib/index.js') -} diff --git a/packages/react-query-devtools/package.json b/packages/react-query-devtools/package.json index 30f257fe62..de38ac8277 100644 --- a/packages/react-query-devtools/package.json +++ b/packages/react-query-devtools/package.json @@ -14,28 +14,21 @@ "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": { diff --git a/packages/react-query-persist-client/package.json b/packages/react-query-persist-client/package.json index 2fe4052eb1..d93ce76305 100644 --- a/packages/react-query-persist-client/package.json +++ b/packages/react-query-persist-client/package.json @@ -20,6 +20,7 @@ }, "./package.json": "./package.json" }, + "sideEffects": false, "files": [ "build/lib/*", "build/umd/*", diff --git a/rollup.config.ts b/rollup.config.ts index 6ee9259dc1..0ad96cf62e 100644 --- a/rollup.config.ts +++ b/rollup.config.ts @@ -17,9 +17,10 @@ type Options = { jsName: string outputFile: string globals: Record + forceDevEnv: boolean } -const umdDevPlugin = (type: 'development' | 'production') => +const forceEnvPlugin = (type: 'development' | 'production') => replace({ 'process.env.NODE_ENV': `"${type}"`, delimiters: ['', ''], @@ -109,15 +110,20 @@ export default function rollup(options: RollupOptions): RollupOptions[] { ], }), ...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', @@ -143,6 +149,9 @@ function buildConfigs(opts: { globals: Record // 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) @@ -163,26 +172,37 @@ 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: [ @@ -190,19 +210,27 @@ function esm({ input, packageDir, external, banner }: Options): RollupOptions { 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, }, @@ -211,6 +239,7 @@ function cjs({ input, external, packageDir, banner }: Options): RollupOptions { babelPlugin, commonJS(), nodeResolve({ extensions: ['.ts', '.tsx'] }), + forceDevEnv ? forceEnvPlugin('development') : undefined, ], } } @@ -241,7 +270,7 @@ function umdDev({ babelPlugin, nodeResolve({ extensions: ['.ts', '.tsx'] }), commonJS(), - umdDevPlugin('development'), + forceEnvPlugin('development'), ], } } @@ -272,7 +301,7 @@ function umdProd({ babelPlugin, commonJS(), nodeResolve({ extensions: ['.ts', '.tsx'] }), - umdDevPlugin('production'), + forceEnvPlugin('production'), terser({ mangle: true, compress: true,