diff --git a/docs/react/installation.md b/docs/react/installation.md index 5b89f4be6b..7a99eba2cc 100644 --- a/docs/react/installation.md +++ b/docs/react/installation.md @@ -3,9 +3,9 @@ id: installation title: Installation --- -You can install React Query via [NPM](https://npmjs.com), +You can install React Query via [NPM](https://npmjs.com/), or a good ol' ` + ``` -Once you've added this you will have access to the `window.ReactQuery` object and its exports. - -> This installation/usage requires the [React CDN script bundles](https://reactjs.org/docs/cdn-links.html) to be on the page as well. +> You can find instructions on how to use React without JSX [here](https://react.dev/reference/react/createElement#creating-an-element-without-jsx). ### Requirements diff --git a/package.json b/package.json index 99591b8da8..b59665a783 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,6 @@ "@rollup/plugin-commonjs": "^25.0.0", "@rollup/plugin-node-resolve": "^15.0.2", "@rollup/plugin-replace": "^5.0.2", - "@rollup/plugin-terser": "^0.4.3", "@solidjs/testing-library": "^0.5.1", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", @@ -83,7 +82,6 @@ "rimraf": "^5.0.1", "rollup": "^3.23.0", "rollup-plugin-preserve-directives": "^0.2.0", - "rollup-plugin-size": "^0.3.1", "rollup-plugin-visualizer": "^5.9.0", "rollup-preset-solid": "^2.0.1", "semver": "^7.5.1", @@ -97,7 +95,7 @@ "bundlewatch": { "files": [ { - "path": "packages/*/build/umd/*.production.js" + "path": "packages/*/build/lib/*.js" } ] }, diff --git a/packages/query-async-storage-persister/package.json b/packages/query-async-storage-persister/package.json index 375744cc77..dd65952456 100644 --- a/packages/query-async-storage-persister/package.json +++ b/packages/query-async-storage-persister/package.json @@ -25,7 +25,6 @@ "sideEffects": false, "files": [ "build/lib/*", - "build/umd/*", "src" ], "scripts": { diff --git a/packages/query-broadcast-client-experimental/package.json b/packages/query-broadcast-client-experimental/package.json index 3e44b55a41..65d2429239 100644 --- a/packages/query-broadcast-client-experimental/package.json +++ b/packages/query-broadcast-client-experimental/package.json @@ -25,7 +25,6 @@ "sideEffects": false, "files": [ "build/lib/*", - "build/umd/*", "src" ], "scripts": { diff --git a/packages/query-core/package.json b/packages/query-core/package.json index 729ee5a435..282fb17f12 100644 --- a/packages/query-core/package.json +++ b/packages/query-core/package.json @@ -25,7 +25,6 @@ "sideEffects": false, "files": [ "build/lib/*", - "build/umd/*", "src" ], "scripts": { diff --git a/packages/query-devtools/package.json b/packages/query-devtools/package.json index ca180679ab..bfde335e39 100644 --- a/packages/query-devtools/package.json +++ b/packages/query-devtools/package.json @@ -12,14 +12,14 @@ }, "type": "commonjs", "types": "build/types/index.d.ts", - "main": "build/umd/index.js", + "main": "build/cjs/index.js", "module": "build/esm/index.mjs", "exports": { ".": { "types": "./build/types/index.d.ts", "import": "./build/esm/index.mjs", - "require": "./build/umd/index.js", - "default": "./build/umd/index.js" + "require": "./build/cjs/index.js", + "default": "./build/cjs/index.js" }, "./package.json": "./package.json" }, diff --git a/packages/query-persist-client-core/package.json b/packages/query-persist-client-core/package.json index 4af897e36d..d82f25705a 100644 --- a/packages/query-persist-client-core/package.json +++ b/packages/query-persist-client-core/package.json @@ -25,7 +25,6 @@ "sideEffects": false, "files": [ "build/lib/*", - "build/umd/*", "src" ], "scripts": { diff --git a/packages/query-sync-storage-persister/package.json b/packages/query-sync-storage-persister/package.json index 52f43dfb42..169bc9014b 100644 --- a/packages/query-sync-storage-persister/package.json +++ b/packages/query-sync-storage-persister/package.json @@ -25,7 +25,6 @@ "sideEffects": false, "files": [ "build/lib/*", - "build/umd/*", "src" ], "scripts": { diff --git a/packages/react-query-devtools/package.json b/packages/react-query-devtools/package.json index 0ab57b6042..8d6eedc75a 100644 --- a/packages/react-query-devtools/package.json +++ b/packages/react-query-devtools/package.json @@ -35,7 +35,6 @@ "sideEffects": false, "files": [ "build/lib/*", - "build/umd/*", "src" ], "scripts": { diff --git a/packages/react-query-devtools/rollup.config.mjs b/packages/react-query-devtools/rollup.config.mjs index 73e04b9593..b1d5088fb3 100644 --- a/packages/react-query-devtools/rollup.config.mjs +++ b/packages/react-query-devtools/rollup.config.mjs @@ -4,7 +4,7 @@ import { defineConfig } from 'rollup' import { buildConfigs } from '../../scripts/getRollupConfig.mjs' export default defineConfig([ - ...buildConfigs({ + buildConfigs({ name: 'react-query-devtools', jsName: 'ReactQueryDevtools', outputFile: 'index', @@ -15,9 +15,8 @@ export default defineConfig([ '@tanstack/react-query': 'ReactQuery', '@tanstack/query-devtools': 'TanstackQueryDevtools', }, - bundleUMDGlobals: ['@tanstack/query-devtools'], }), - ...buildConfigs({ + buildConfigs({ name: 'react-query-devtools-prod', jsName: 'ReactQueryDevtools', outputFile: 'index.prod', @@ -31,6 +30,5 @@ export default defineConfig([ }, forceDevEnv: true, forceBundle: true, - skipUmdBuild: true, }), ]) diff --git a/packages/react-query-persist-client/package.json b/packages/react-query-persist-client/package.json index d15955a204..761ddae24b 100644 --- a/packages/react-query-persist-client/package.json +++ b/packages/react-query-persist-client/package.json @@ -25,7 +25,6 @@ "sideEffects": false, "files": [ "build/lib/*", - "build/umd/*", "src" ], "scripts": { diff --git a/packages/react-query-persist-client/rollup.config.mjs b/packages/react-query-persist-client/rollup.config.mjs index e1d236a144..5f9ea8ba96 100644 --- a/packages/react-query-persist-client/rollup.config.mjs +++ b/packages/react-query-persist-client/rollup.config.mjs @@ -14,6 +14,5 @@ export default defineConfig( '@tanstack/query-persist-client-core': 'QueryPersistClientCore', '@tanstack/react-query': 'ReactQuery', }, - bundleUMDGlobals: ['@tanstack/query-persist-client-core'], }), ) diff --git a/packages/react-query/package.json b/packages/react-query/package.json index 2981fc752d..489a13fbd6 100644 --- a/packages/react-query/package.json +++ b/packages/react-query/package.json @@ -36,7 +36,6 @@ }, "files": [ "build/lib/*", - "build/umd/*", "src", "build/codemods", "!build/codemods/jest.config.js", diff --git a/packages/react-query/rollup.config.mjs b/packages/react-query/rollup.config.mjs index 03a9f53e83..a940a7d60d 100644 --- a/packages/react-query/rollup.config.mjs +++ b/packages/react-query/rollup.config.mjs @@ -15,6 +15,5 @@ export default defineConfig( '@tanstack/query-core': 'QueryCore', 'react-native': 'ReactNative', }, - bundleUMDGlobals: ['@tanstack/query-core'], }), ) diff --git a/packages/solid-query/package.json b/packages/solid-query/package.json index caa177cdfc..1ce95d99b7 100644 --- a/packages/solid-query/package.json +++ b/packages/solid-query/package.json @@ -45,7 +45,6 @@ "files": [ "build/esm/*", "build/cjs/*", - "build/umd/*", "build/source/*", "build/types/*", "src" diff --git a/packages/vue-query/package.json b/packages/vue-query/package.json index 4ef8c89719..d35d1caf6f 100644 --- a/packages/vue-query/package.json +++ b/packages/vue-query/package.json @@ -42,7 +42,7 @@ }, "files": [ "build/lib/*", - "build/umd/*" + "src" ], "dependencies": { "@tanstack/query-core": "^5.0.0-alpha.43", diff --git a/packages/vue-query/rollup.config.mjs b/packages/vue-query/rollup.config.mjs index 4a308526eb..c56e4bdac4 100644 --- a/packages/vue-query/rollup.config.mjs +++ b/packages/vue-query/rollup.config.mjs @@ -16,10 +16,5 @@ export default defineConfig( '@tanstack/match-sorter-utils': 'MatchSorter', '@vue/devtools-api': 'DevtoolsApi', }, - bundleUMDGlobals: [ - '@tanstack/query-core', - '@tanstack/match-sorter-utils', - '@vue/devtools-api', - ], }), ) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8afbaaa50d..6dfa8ff1f6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -36,9 +36,6 @@ importers: '@rollup/plugin-replace': specifier: ^5.0.2 version: 5.0.2(rollup@3.23.0) - '@rollup/plugin-terser': - specifier: ^0.4.3 - version: 0.4.3(rollup@3.23.0) '@solidjs/testing-library': specifier: ^0.5.1 version: 0.5.1(solid-js@1.6.16) @@ -165,9 +162,6 @@ importers: rollup-plugin-preserve-directives: specifier: ^0.2.0 version: 0.2.0(rollup@3.23.0) - rollup-plugin-size: - specifier: ^0.3.1 - version: 0.3.1 rollup-plugin-visualizer: specifier: ^5.9.0 version: 5.9.0(rollup@3.23.0) @@ -5029,21 +5023,6 @@ packages: terser: 5.17.6 dev: true - /@rollup/plugin-terser@0.4.3(rollup@3.23.0): - resolution: {integrity: sha512-EF0oejTMtkyhrkwCdg0HJ0IpkcaVg1MMSf2olHb2Jp+1mnLM04OhjpJWGma4HobiDTF0WCyViWuvadyE9ch2XA==} - engines: {node: '>=14.0.0'} - peerDependencies: - rollup: ^2.x || ^3.x - peerDependenciesMeta: - rollup: - optional: true - dependencies: - rollup: 3.23.0 - serialize-javascript: 6.0.1 - smob: 1.1.1 - terser: 5.17.6 - dev: true - /@rollup/pluginutils@3.1.0(rollup@2.79.1): resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==} engines: {node: '>= 8.0.0'} @@ -13428,11 +13407,6 @@ packages: engines: {node: '>=6'} dev: false - /pretty-bytes@6.1.0: - resolution: {integrity: sha512-Rk753HI8f4uivXi4ZCIYdhmG1V+WKzvRMg/X+M42a6t7D07RcmopXJMDNk6N++7Bl75URRGsb40ruvg7Hcp2wQ==} - engines: {node: ^14.13.1 || >=16.0.0} - dev: true - /pretty-format@25.5.0: resolution: {integrity: sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==} engines: {node: '>= 8.3'} @@ -13597,12 +13571,6 @@ packages: performance-now: 2.1.0 dev: false - /randombytes@2.1.0: - resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==} - dependencies: - safe-buffer: 5.2.1 - dev: true - /range-parser@1.2.1: resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==} engines: {node: '>= 0.6'} @@ -14328,21 +14296,6 @@ packages: rollup: 3.23.0 dev: true - /rollup-plugin-size@0.3.1: - resolution: {integrity: sha512-SAtpTAAJ0nFkISxLxYjDZX9Zqt34tAIil98R305ZM0GhTnnO6VYG0P5M+2IXKo/iNDdbpBcIfg1W06CLtk/vXA==} - dependencies: - axios: 1.4.0 - chalk: 5.2.0 - ci-env: 1.17.0 - fs-extra: 11.1.1 - glob: 8.1.0 - minimatch: 5.1.6 - pretty-bytes: 6.1.0 - zlib: 1.0.5 - transitivePeerDependencies: - - debug - dev: true - /rollup-plugin-visualizer@5.9.0(rollup@3.23.0): resolution: {integrity: sha512-bbDOv47+Bw4C/cgs0czZqfm8L82xOZssk4ayZjG40y9zbXclNk7YikrZTDao6p7+HDiGxrN0b65SgZiVm9k1Cg==} engines: {node: '>=14'} @@ -14605,12 +14558,6 @@ packages: type-fest: 0.12.0 dev: false - /serialize-javascript@6.0.1: - resolution: {integrity: sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==} - dependencies: - randombytes: 2.1.0 - dev: true - /serve-static@1.15.0: resolution: {integrity: sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==} engines: {node: '>= 0.8.0'} @@ -14770,10 +14717,6 @@ packages: resolution: {integrity: sha512-8mo9bslnBO3tr5PEVFzMPIWwWnipGS0xVbYf65zxDqfNwmzYn1LpiKNrR6DlClusuvo+hDHd1zKpmfAe83NQSQ==} engines: {node: '>=8.0.0'} - /smob@1.1.1: - resolution: {integrity: sha512-i5aqEBPnDv9d77+NDxfjROtywxzNdAVNyaOr+RsLhM28Ts+Ar7luIp/Q+SBYa6wv/7BBcOpEkrhtDxsl2WA9Jg==} - dev: true - /snapdragon-node@2.1.1: resolution: {integrity: sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==} engines: {node: '>=0.10.0'} @@ -16847,11 +16790,6 @@ packages: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} - /zlib@1.0.5: - resolution: {integrity: sha512-40fpE2II+Cd3k8HWTWONfeKE2jL+P42iWJ1zzps5W51qcTsOUKM5Q5m2PFb0CLxlmFAaUuUdJGc3OfZy947v0w==} - engines: {node: '>=0.2.0'} - dev: true - /zod@3.21.4: resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==} dev: false diff --git a/scripts/getRollupConfig.mjs b/scripts/getRollupConfig.mjs index 8461b7d507..81318897b0 100644 --- a/scripts/getRollupConfig.mjs +++ b/scripts/getRollupConfig.mjs @@ -2,8 +2,6 @@ import { resolve } from 'node:path' import { babel } from '@rollup/plugin-babel' -import terser from '@rollup/plugin-terser' -import size from 'rollup-plugin-size' import { visualizer } from 'rollup-plugin-visualizer' import replace from '@rollup/plugin-replace' import { nodeResolve } from '@rollup/plugin-node-resolve' @@ -20,22 +18,10 @@ const forceEnvPlugin = (type) => preventAssignment: true, }) -/** @param {'legacy' | 'modern'} type */ -const babelPlugin = (type) => +const babelPlugin = () => babel({ configFile: resolve(rootDir, 'babel.config.cjs'), - browserslistConfigFile: type === 'modern' ? true : false, - targets: - type === 'modern' - ? '' - : { - chrome: '73', - firefox: '78', - edge: '79', - safari: '12', - ios: '12', - opera: '53', - }, + browserslistConfigFile: true, babelHelpers: 'bundled', exclude: /node_modules/, extensions: ['.ts', '.tsx', '.native.ts'], @@ -48,170 +34,60 @@ const babelPlugin = (type) => * @param {string} opts.outputFile - The output file. * @param {string} opts.entryFile - The entry file. * @param {Record} opts.globals - The globals record. - * @param {string[]} [opts.bundleUMDGlobals] - List of dependencies to bundle for UMD build. * @param {boolean} [opts.forceDevEnv] - Flag indicating whether to force development environment. * @param {boolean} [opts.forceBundle] - Flag indicating whether to force bundling. - * @param {boolean} [opts.skipUmdBuild] - Flag indicating whether to skip UMD build. - * @returns {import('rollup').RollupOptions[]} + * @returns {import('rollup').RollupOptions} */ export function buildConfigs(opts) { - const firstEntry = opts.entryFile const input = [opts.entryFile] const externalDeps = Object.keys(opts.globals) + const forceDevEnv = opts.forceDevEnv || false + const forceBundle = opts.forceBundle || false + + /** @type {import('rollup').OutputOptions[]} */ + const bundleOutput = [ + { + format: 'esm', + file: `./build/lib/${opts.outputFile}.mjs`, + sourcemap: true, + }, + { + format: 'cjs', + file: `./build/lib/${opts.outputFile}.js`, + sourcemap: true, + exports: 'named', + }, + ] - const bundleUMDGlobals = opts.bundleUMDGlobals || [] - const umdExternal = externalDeps.filter( - (external) => !bundleUMDGlobals.includes(external), - ) - - /** @type {import('./types').Options} */ - const options = { - input, - jsName: opts.jsName, - outputFile: opts.outputFile, - external: (moduleName) => externalDeps.includes(moduleName), - globals: opts.globals, - forceDevEnv: opts.forceDevEnv || false, - forceBundle: opts.forceBundle || false, - } - - let builds = [mjs(options), cjs(options)] - - if (!opts.skipUmdBuild) { - builds = builds.concat([ - umdDev({ ...options, external: umdExternal, input: firstEntry }), - umdProd({ ...options, external: umdExternal, input: firstEntry }), - ]) - } - - return builds -} - -/** - * @param {import('./types').Options} options - Options for building configurations. - * @returns {import('rollup').RollupOptions} - */ -function mjs({ input, external, outputFile, forceDevEnv, forceBundle }) { - /** @type {import('rollup').OutputOptions} */ - const bundleOutput = { - format: 'esm', - file: `./build/lib/${outputFile}.mjs`, - sourcemap: true, - } - - /** @type {import('rollup').OutputOptions} */ - const normalOutput = { - format: 'esm', - dir: `./build/lib`, - sourcemap: true, - preserveModules: true, - entryFileNames: '[name].mjs', - } - - return { - // MJS - external, - input, - output: forceBundle ? bundleOutput : normalOutput, - plugins: [ - babelPlugin('modern'), - commonJS(), - nodeResolve({ extensions: ['.ts', '.tsx', '.native.ts'] }), - forceDevEnv ? forceEnvPlugin('development') : undefined, - preserveDirectives(), - ], - } -} - -/** - * @param {import('./types').Options} options - Options for building configurations. - * @returns {import('rollup').RollupOptions} - */ -function cjs({ input, external, outputFile, forceDevEnv, forceBundle }) { - /** @type {import('rollup').OutputOptions} */ - const bundleOutput = { - format: 'cjs', - file: `./build/lib/${outputFile}.js`, - sourcemap: true, - exports: 'named', - } - - /** @type {import('rollup').OutputOptions} */ - const normalOutput = { - format: 'cjs', - dir: `./build/lib`, - sourcemap: true, - exports: 'named', - preserveModules: true, - entryFileNames: '[name].js', - } + /** @type {import('rollup').OutputOptions[]} */ + const normalOutput = [ + { + format: 'esm', + dir: `./build/lib`, + sourcemap: true, + preserveModules: true, + entryFileNames: '[name].mjs', + }, + { + format: 'cjs', + dir: `./build/lib`, + sourcemap: true, + exports: 'named', + preserveModules: true, + entryFileNames: '[name].js', + }, + ] return { - // CJS - external, input, output: forceBundle ? bundleOutput : normalOutput, + external: (moduleName) => externalDeps.includes(moduleName), plugins: [ - babelPlugin('legacy'), commonJS(), + babelPlugin(), nodeResolve({ extensions: ['.ts', '.tsx', '.native.ts'] }), forceDevEnv ? forceEnvPlugin('development') : undefined, preserveDirectives(), - ], - } -} - -/** - * @param {import('./types').Options} options - Options for building configurations. - * @returns {import('rollup').RollupOptions} - */ -function umdDev({ input, external, outputFile, globals, jsName }) { - return { - // UMD (Dev) - external, - input, - output: { - format: 'umd', - sourcemap: true, - file: `./build/umd/${outputFile}.development.js`, - name: jsName, - globals, - }, - plugins: [ - commonJS(), - babelPlugin('modern'), - nodeResolve({ extensions: ['.ts', '.tsx', '.native.ts'] }), - forceEnvPlugin('development'), - ], - } -} - -/** - * @param {import('./types').Options} options - Options for building configurations. - * @returns {import('rollup').RollupOptions} - */ -function umdProd({ input, external, outputFile, globals, jsName }) { - return { - // UMD (Prod) - external, - input, - output: { - format: 'umd', - sourcemap: true, - file: `./build/umd/${outputFile}.production.js`, - name: jsName, - globals, - }, - plugins: [ - commonJS(), - babelPlugin('modern'), - nodeResolve({ extensions: ['.ts', '.tsx', '.native.ts'] }), - forceEnvPlugin('production'), - terser({ - mangle: true, - compress: true, - }), - size({}), visualizer({ filename: `./build/stats-html.html`, template: 'treemap', @@ -230,7 +106,7 @@ export function createSolidQueryConfig() { const solidRollupOptions = /** @type {import('rollup').RollupOptions} */ ( withSolid({ input: `./src/index.ts`, - targets: ['esm', 'cjs', 'umd'], + targets: ['esm', 'cjs'], external: ['@tanstack/query-core'], }) ) @@ -243,14 +119,6 @@ export function createSolidQueryConfig() { outputs.forEach((output) => { const format = output.format - if (format === 'umd') { - output.globals = { - 'solid-js/store': 'SolidStore', - 'solid-js/web': 'SolidWeb', - 'solid-js': 'Solid', - '@tanstack/query-core': 'QueryCore', - } - } output.dir = `./build/${format}` }) @@ -270,7 +138,7 @@ export function createTanstackQueryDevtoolsConfig() { const solidRollupOptions = /** @type {import('rollup').RollupOptions} */ ( withSolid({ input: `./src/index.tsx`, - targets: ['esm', 'cjs', 'umd'], + targets: ['esm', 'cjs'], }) ) diff --git a/scripts/types.d.ts b/scripts/types.d.ts index 46e51dc10a..185a5fce99 100644 --- a/scripts/types.d.ts +++ b/scripts/types.d.ts @@ -46,13 +46,3 @@ export type BranchConfig = { prerelease: boolean ghRelease: boolean } - -export type Options = { - input: string | string[] - external: RollupOptions['external'] - jsName: string - outputFile: string - globals: Record - forceDevEnv: boolean - forceBundle: boolean -}