feat: Add legacy rollup builds

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.

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",

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",

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",

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",

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",

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",

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',

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",

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",

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",

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(),
+    ],
+  }
+}