Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: umd build size, force prod devtools #4074

Merged
merged 2 commits into from
Aug 24, 2022
Merged

fix: umd build size, force prod devtools #4074

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
37a786b
fix: umd build size
DamianOsipiuk Aug 23, 2022
ed141c9
fix: devtools force production
DamianOsipiuk Aug 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is needed due to a bug in typescript which supposed to support exports, but actually does not map to a proper file.

"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",
Expand Down
1 change: 1 addition & 0 deletions packages/query-async-storage-persister/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
},
"./package.json": "./package.json"
},
"sideEffects": false,
"files": [
"build/lib/*",
"build/umd/*",
Expand Down
1 change: 1 addition & 0 deletions packages/query-broadcast-client-experimental/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
},
"./package.json": "./package.json"
},
"sideEffects": false,
"files": [
"build/lib/*",
"build/umd/*",
Expand Down
1 change: 1 addition & 0 deletions packages/query-core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
},
"./package.json": "./package.json"
},
"sideEffects": false,
"files": [
"build/lib/*",
"build/umd/*",
Expand Down
1 change: 1 addition & 0 deletions packages/query-sync-storage-persister/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
},
"./package.json": "./package.json"
},
"sideEffects": false,
"files": [
"build/lib/*",
"build/umd/*",
Expand Down
13 changes: 0 additions & 13 deletions packages/react-query-devtools/cjs.fallback.js
View file
Open in desktop

This file was deleted.

23 changes: 9 additions & 14 deletions packages/react-query-devtools/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,37 +14,32 @@
"main": "build/lib/index.js",
"exports": {
".": {
"development": {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

generated files index.js/index.mjs still contain NODE_ENV conditions which will be used by the bundler to treeshake it from production

"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": {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This export is needed for modern bundlers to force prod devtools.
index.prod.js is build replacing NODE_ENV with development in result dropping if conditions from source code.

"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": {
Expand Down
1 change: 1 addition & 0 deletions packages/react-query-persist-client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
},
"./package.json": "./package.json"
},
"sideEffects": false,
"files": [
"build/lib/*",
"build/umd/*",
Expand Down
2 changes: 1 addition & 1 deletion packages/react-query/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
71 changes: 58 additions & 13 deletions rollup.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: ['', ''],
Expand Down Expand Up @@ -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',
Expand All @@ -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',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This config was changed to contain non-treeshakable devtools build accessible via @tanstack/react-query-devtools/build/lib/index.prod.js

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,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This forces the build to thinks it's bundling for dev env

skipUmdBuild: true,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we do not want to generate extra set for umd, since those are already generated

}),
...buildConfigs({
name: 'react-query-persist-client',
Expand All @@ -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)
Expand All @@ -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,
},
Expand All @@ -195,6 +239,7 @@ function cjs({ input, external, packageDir, banner }: Options): RollupOptions {
babelPlugin,
commonJS(),
nodeResolve({ extensions: ['.ts', '.tsx'] }),
forceDevEnv ? forceEnvPlugin('development') : undefined,
],
}
}
Expand Down Expand Up @@ -225,7 +270,7 @@ function umdDev({
babelPlugin,
nodeResolve({ extensions: ['.ts', '.tsx'] }),
commonJS(),
umdDevPlugin('development'),
forceEnvPlugin('development'),
],
}
}
Expand Down Expand Up @@ -256,7 +301,7 @@ function umdProd({
babelPlugin,
commonJS(),
nodeResolve({ extensions: ['.ts', '.tsx'] }),
umdDevPlugin('production'),
forceEnvPlugin('production'),
terser({
mangle: true,
compress: true,
Expand Down