From c160c9421427c50745d2072e3d63e538a4284510 Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Tue, 13 Jun 2023 19:28:23 +1000 Subject: [PATCH] feat: Add legacy rollup builds (#5570) --- docs/react/guides/migrating-to-v5.md | 4 - .../package.json | 4 +- .../package.json | 4 +- packages/query-core/package.json | 4 +- .../query-persist-client-core/package.json | 4 +- .../query-sync-storage-persister/package.json | 4 +- packages/react-query-devtools/package.json | 4 +- .../react-query-devtools/rollup.config.js | 4 +- .../react-query-persist-client/package.json | 4 +- packages/react-query/package.json | 4 +- packages/vue-query/package.json | 4 +- scripts/getRollupConfig.js | 111 ++++++++++++++++-- 12 files changed, 123 insertions(+), 32 deletions(-) diff --git a/docs/react/guides/migrating-to-v5.md b/docs/react/guides/migrating-to-v5.md index 9b3cfae6fb..d418a15dc5 100644 --- a/docs/react/guides/migrating-to-v5.md +++ b/docs/react/guides/migrating-to-v5.md @@ -177,10 +177,6 @@ Custom loggers were already deprecated in 4 and have been removed in this versio We have updated our browserslist to produce a more modern, performant and smaller bundle. You can read about the requirements [here](../installation#requirements). -### Supported Bundlers - -We have removed the legacy `.esm.js` output, which was used by bundlers which didn't recognise the modern `.mjs` extension such as Webpack v4. If you are still using Webpack v4, you can continue to use TanStack Query v4, or upgrade to Webpack v5 or another bundler. - ### Private class fields and methods TanStack Query has always had private fields and methods on classes, but they weren't really private - they were just private in `TypeScript`. We now use [ECMAScript Private class features](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields), which means those fields are now truly private and can't be accessed from the outside at runtime. diff --git a/packages/query-async-storage-persister/package.json b/packages/query-async-storage-persister/package.json index 98e8be36dc..c8216f9024 100644 --- a/packages/query-async-storage-persister/package.json +++ b/packages/query-async-storage-persister/package.json @@ -12,8 +12,8 @@ }, "type": "module", "types": "build/lib/index.d.ts", - "main": "build/lib/index.cjs", - "module": "build/lib/index.js", + "main": "build/lib/index.legacy.cjs", + "module": "build/lib/index.legacy.js", "exports": { ".": { "types": "./build/lib/index.d.ts", diff --git a/packages/query-broadcast-client-experimental/package.json b/packages/query-broadcast-client-experimental/package.json index 9c1b157b87..0bec09463c 100644 --- a/packages/query-broadcast-client-experimental/package.json +++ b/packages/query-broadcast-client-experimental/package.json @@ -12,8 +12,8 @@ }, "type": "module", "types": "build/lib/index.d.ts", - "main": "build/lib/index.cjs", - "module": "build/lib/index.js", + "main": "build/lib/index.legacy.cjs", + "module": "build/lib/index.legacy.js", "exports": { ".": { "types": "./build/lib/index.d.ts", diff --git a/packages/query-core/package.json b/packages/query-core/package.json index 594687b365..b3039e64f9 100644 --- a/packages/query-core/package.json +++ b/packages/query-core/package.json @@ -12,8 +12,8 @@ }, "type": "module", "types": "build/lib/index.d.ts", - "main": "build/lib/index.cjs", - "module": "build/lib/index.js", + "main": "build/lib/index.legacy.cjs", + "module": "build/lib/index.legacy.js", "exports": { ".": { "types": "./build/lib/index.d.ts", diff --git a/packages/query-persist-client-core/package.json b/packages/query-persist-client-core/package.json index 053c2c67a9..99bae3a9c5 100644 --- a/packages/query-persist-client-core/package.json +++ b/packages/query-persist-client-core/package.json @@ -12,8 +12,8 @@ }, "type": "module", "types": "build/lib/index.d.ts", - "main": "build/lib/index.cjs", - "module": "build/lib/index.js", + "main": "build/lib/index.legacy.cjs", + "module": "build/lib/index.legacy.js", "exports": { ".": { "types": "./build/lib/index.d.ts", diff --git a/packages/query-sync-storage-persister/package.json b/packages/query-sync-storage-persister/package.json index 16647d19e9..1c82187920 100644 --- a/packages/query-sync-storage-persister/package.json +++ b/packages/query-sync-storage-persister/package.json @@ -12,8 +12,8 @@ }, "type": "module", "types": "build/lib/index.d.ts", - "main": "build/lib/index.cjs", - "module": "build/lib/index.js", + "main": "build/lib/index.legacy.cjs", + "module": "build/lib/index.legacy.js", "exports": { ".": { "types": "./build/lib/index.d.ts", diff --git a/packages/react-query-devtools/package.json b/packages/react-query-devtools/package.json index 0b8488d211..f414c8add0 100644 --- a/packages/react-query-devtools/package.json +++ b/packages/react-query-devtools/package.json @@ -12,8 +12,8 @@ }, "type": "module", "types": "build/lib/index.d.ts", - "main": "build/lib/index.cjs", - "module": "build/lib/index.js", + "main": "build/lib/index.legacy.cjs", + "module": "build/lib/index.legacy.js", "exports": { ".": { "types": "./build/lib/index.d.ts", diff --git a/packages/react-query-devtools/rollup.config.js b/packages/react-query-devtools/rollup.config.js index 094aa3d0f9..00b1ac221f 100644 --- a/packages/react-query-devtools/rollup.config.js +++ b/packages/react-query-devtools/rollup.config.js @@ -4,12 +4,12 @@ import { defineConfig } from 'rollup' import { buildConfigs } from '../../scripts/getRollupConfig.js' export default defineConfig([ - buildConfigs({ + ...buildConfigs({ name: 'react-query-devtools', outputFile: 'index', entryFile: './src/index.ts', }), - buildConfigs({ + ...buildConfigs({ name: 'react-query-devtools-prod', outputFile: 'index.prod', entryFile: './src/index.ts', diff --git a/packages/react-query-persist-client/package.json b/packages/react-query-persist-client/package.json index fc7c85f776..95869c1d0d 100644 --- a/packages/react-query-persist-client/package.json +++ b/packages/react-query-persist-client/package.json @@ -12,8 +12,8 @@ }, "type": "module", "types": "build/lib/index.d.ts", - "main": "build/lib/index.cjs", - "module": "build/lib/index.js", + "main": "build/lib/index.legacy.cjs", + "module": "build/lib/index.legacy.js", "exports": { ".": { "types": "./build/lib/index.d.ts", diff --git a/packages/react-query/package.json b/packages/react-query/package.json index 2c8ec57e29..d719cbf33e 100644 --- a/packages/react-query/package.json +++ b/packages/react-query/package.json @@ -12,8 +12,8 @@ }, "type": "module", "types": "build/lib/index.d.ts", - "main": "build/lib/index.cjs", - "module": "build/lib/index.js", + "main": "build/lib/index.legacy.cjs", + "module": "build/lib/index.legacy.js", "exports": { ".": { "types": "./build/lib/index.d.ts", diff --git a/packages/vue-query/package.json b/packages/vue-query/package.json index 5b66beefe5..034d8aa362 100644 --- a/packages/vue-query/package.json +++ b/packages/vue-query/package.json @@ -16,8 +16,8 @@ }, "type": "module", "types": "build/lib/index.d.ts", - "main": "build/lib/index.cjs", - "module": "build/lib/index.js", + "main": "build/lib/index.legacy.cjs", + "module": "build/lib/index.legacy.js", "exports": { ".": { "types": "./build/lib/index.d.ts", diff --git a/scripts/getRollupConfig.js b/scripts/getRollupConfig.js index d47b42c0e3..88385ea036 100644 --- a/scripts/getRollupConfig.js +++ b/scripts/getRollupConfig.js @@ -18,13 +18,25 @@ const forceEnvPlugin = (type) => preventAssignment: true, }) -const babelPlugin = () => +/** @param {'legacy' | 'modern'} type */ +const babelPlugin = (type) => babel({ configFile: resolve(rootDir, 'babel.config.cjs'), - browserslistConfigFile: true, + browserslistConfigFile: type === 'modern' ? true : false, + targets: + type === 'modern' + ? '' + : { + chrome: '73', + firefox: '78', + edge: '79', + safari: '12', + ios: '12', + opera: '53', + }, babelHelpers: 'bundled', exclude: /node_modules/, - extensions: ['.ts', '.tsx', '.native.ts'], + extensions: ['.ts', '.tsx'], }) /** @@ -35,10 +47,23 @@ const babelPlugin = () => * @param {boolean} [opts.bundleDeps] - Flag indicating whether to make all deps external. * @param {boolean} [opts.forceDevEnv] - Flag indicating whether to force development environment. * @param {boolean} [opts.forceBundle] - Flag indicating whether to force bundling. - * @returns {import('rollup').RollupOptions} + * @returns {import('rollup').RollupOptions[]} */ export function buildConfigs(opts) { - const input = [opts.entryFile] + return [modernConfig(opts), legacyConfig(opts)] +} + +/** + * @param {Object} opts - Options for building configurations. + * @param {string} opts.name - The name. + * @param {string} opts.outputFile - The output file. + * @param {string} opts.entryFile - The entry file. + * @param {boolean} [opts.bundleDeps] - Flag indicating whether to make all deps external. + * @param {boolean} [opts.forceDevEnv] - Flag indicating whether to force development environment. + * @param {boolean} [opts.forceBundle] - Flag indicating whether to force bundling. + * @returns {import('rollup').RollupOptions} + */ +function modernConfig(opts) { const forceDevEnv = opts.forceDevEnv || false const forceBundle = opts.forceBundle || false const bundleDeps = opts.bundleDeps || false @@ -78,12 +103,12 @@ export function buildConfigs(opts) { ] return { - input, + input: [opts.entryFile], output: forceBundle ? bundleOutput : normalOutput, plugins: [ commonJS(), - babelPlugin(), - nodeResolve({ extensions: ['.ts', '.tsx', '.native.ts'] }), + babelPlugin('modern'), + nodeResolve({ extensions: ['.ts', '.tsx'] }), forceDevEnv ? forceEnvPlugin('development') : undefined, bundleDeps ? undefined @@ -102,3 +127,73 @@ export function buildConfigs(opts) { ], } } + +/** + * @param {Object} opts - Options for building configurations. + * @param {string} opts.name - The name. + * @param {string} opts.outputFile - The output file. + * @param {string} opts.entryFile - The entry file. + * @param {boolean} [opts.bundleDeps] - Flag indicating whether to make all deps external. + * @param {boolean} [opts.forceDevEnv] - Flag indicating whether to force development environment. + * @param {boolean} [opts.forceBundle] - Flag indicating whether to force bundling. + * @returns {import('rollup').RollupOptions} + */ +function legacyConfig(opts) { + const forceDevEnv = opts.forceDevEnv || false + const forceBundle = opts.forceBundle || false + const bundleDeps = opts.bundleDeps || false + + /** @type {import('rollup').OutputOptions[]} */ + const bundleOutput = [ + { + format: 'esm', + file: `./build/lib/${opts.outputFile}.legacy.js`, + sourcemap: true, + }, + { + format: 'cjs', + file: `./build/lib/${opts.outputFile}.legacy.cjs`, + sourcemap: true, + exports: 'named', + }, + ] + + /** @type {import('rollup').OutputOptions[]} */ + const normalOutput = [ + { + format: 'esm', + dir: `./build/lib`, + sourcemap: true, + preserveModules: true, + entryFileNames: '[name].legacy.js', + }, + { + format: 'cjs', + dir: `./build/lib`, + sourcemap: true, + exports: 'named', + preserveModules: true, + entryFileNames: '[name].legacy.cjs', + }, + ] + + return { + input: [opts.entryFile], + output: forceBundle ? bundleOutput : normalOutput, + plugins: [ + commonJS(), + babelPlugin('legacy'), + nodeResolve({ extensions: ['.ts', '.tsx'] }), + forceDevEnv ? forceEnvPlugin('development') : undefined, + bundleDeps + ? undefined + : externals({ + packagePath: './package.json', + deps: true, + devDeps: true, + peerDeps: true, + }), + preserveDirectives(), + ], + } +}