chore: Rework rollup externals (#5519)

Author: lachlancollins

package.json

@@ -81,6 +81,7 @@
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.1",
     "rollup": "^3.23.0",
+    "rollup-plugin-node-externals": "^6.1.0",
     "rollup-plugin-preserve-directives": "^0.2.0",
     "rollup-plugin-visualizer": "^5.9.0",
     "rollup-preset-solid": "^2.0.1",

packages/query-async-storage-persister/rollup.config.mjs

@@ -9,8 +9,5 @@ export default defineConfig(
     jsName: 'QueryAsyncStoragePersister',
     outputFile: 'index',
     entryFile: './src/index.ts',
-    globals: {
-      '@tanstack/query-persist-client-core': 'QueryPersistClientCore',
-    },
   }),
 )

packages/query-broadcast-client-experimental/rollup.config.mjs

@@ -9,9 +9,5 @@ export default defineConfig(
     jsName: 'QueryBroadcastClient',
     outputFile: 'index',
     entryFile: './src/index.ts',
-    globals: {
-      '@tanstack/query-core': 'QueryCore',
-      'broadcast-channel': 'BroadcastChannel',
-    },
   }),
 )

packages/query-core/rollup.config.mjs

@@ -9,6 +9,5 @@ export default defineConfig(
     jsName: 'QueryCore',
     outputFile: 'index',
     entryFile: './src/index.ts',
-    globals: {},
   }),
 )

packages/query-persist-client-core/rollup.config.mjs

@@ -9,8 +9,5 @@ export default defineConfig(
     jsName: 'QueryPersistClientCore',
     outputFile: 'index',
     entryFile: './src/index.ts',
-    globals: {
-      '@tanstack/query-core': 'QueryCore',
-    },
   }),
 )

packages/query-sync-storage-persister/rollup.config.mjs

@@ -9,8 +9,5 @@ export default defineConfig(
     jsName: 'QuerySyncStoragePersister',
     outputFile: 'index',
     entryFile: './src/index.ts',
-    globals: {
-      '@tanstack/query-persist-client-core': 'QueryPersistClientCore',
-    },
   }),
 )

packages/react-query-devtools/rollup.config.mjs

@@ -9,25 +9,12 @@ export default defineConfig([
     jsName: 'ReactQueryDevtools',
     outputFile: 'index',
     entryFile: './src/index.ts',
-    globals: {
-      react: 'React',
-      'react-dom': 'ReactDOM',
-      '@tanstack/react-query': 'ReactQuery',
-      '@tanstack/query-devtools': 'TanstackQueryDevtools',
-    },
   }),
   buildConfigs({
     name: 'react-query-devtools-prod',
     jsName: 'ReactQueryDevtools',
     outputFile: 'index.prod',
     entryFile: './src/index.ts',
-    globals: {
-      react: 'React',
-      'react-dom': 'ReactDOM',
-      '@tanstack/react-query': 'ReactQuery',
-      '@tanstack/match-sorter-utils': 'MatchSorterUtils',
-      superjson: 'SuperJson',
-    },
     forceDevEnv: true,
     forceBundle: true,
   }),

packages/react-query-persist-client/rollup.config.mjs

@@ -9,10 +9,5 @@ export default defineConfig(
     jsName: 'ReactQueryPersistClient',
     outputFile: 'index',
     entryFile: './src/index.ts',
-    globals: {
-      react: 'React',
-      '@tanstack/query-persist-client-core': 'QueryPersistClientCore',
-      '@tanstack/react-query': 'ReactQuery',
-    },
   }),
 )

packages/react-query/rollup.config.mjs

@@ -9,11 +9,5 @@ export default defineConfig(
     jsName: 'ReactQuery',
     outputFile: 'index',
     entryFile: './src/index.ts',
-    globals: {
-      react: 'React',
-      'react-dom': 'ReactDOM',
-      '@tanstack/query-core': 'QueryCore',
-      'react-native': 'ReactNative',
-    },
   }),
 )

packages/vue-query/rollup.config.mjs

@@ -9,12 +9,5 @@ export default defineConfig(
     jsName: 'VueQuery',
     outputFile: 'index',
     entryFile: './src/index.ts',
-    globals: {
-      '@tanstack/query-core': 'QueryCore',
-      vue: 'Vue',
-      'vue-demi': 'Vue',
-      '@tanstack/match-sorter-utils': 'MatchSorter',
-      '@vue/devtools-api': 'DevtoolsApi',
-    },
   }),
 )

pnpm-lock.yaml

@@ -6,6 +6,7 @@ import { visualizer } from 'rollup-plugin-visualizer'
 import replace from '@rollup/plugin-replace'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
 import commonJS from '@rollup/plugin-commonjs'
+import externals from 'rollup-plugin-node-externals'
 import withSolid from 'rollup-preset-solid'
 import preserveDirectives from 'rollup-plugin-preserve-directives'
 import { rootDir } from './config.mjs'
@@ -33,14 +34,12 @@ const babelPlugin = () =>
  * @param {string} opts.jsName - The JavaScript name.
  * @param {string} opts.outputFile - The output file.
  * @param {string} opts.entryFile - The entry file.
- * @param {Record<string, string>} opts.globals - The globals record.
  * @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}
  */
 export function buildConfigs(opts) {
   const input = [opts.entryFile]
-  const externalDeps = Object.keys(opts.globals)
   const forceDevEnv = opts.forceDevEnv || false
   const forceBundle = opts.forceBundle || false
 
@@ -81,12 +80,17 @@ export function buildConfigs(opts) {
   return {
     input,
     output: forceBundle ? bundleOutput : normalOutput,
-    external: (moduleName) => externalDeps.includes(moduleName),
     plugins: [
       commonJS(),
       babelPlugin(),
       nodeResolve({ extensions: ['.ts', '.tsx', '.native.ts'] }),
       forceDevEnv ? forceEnvPlugin('development') : undefined,
+      externals({
+        packagePath: './package.json',
+        deps: true,
+        devDeps: true,
+        peerDeps: true,
+      }),
       preserveDirectives(),
       visualizer({
         filename: `./build/stats-html.html`,