ESM compliant bundling

.babelrc.js

@@ -1,5 +1,5 @@
-const { NODE_ENV, BABEL_ENV } = process.env
-const cjs = NODE_ENV === 'test' || BABEL_ENV === 'commonjs'
+const { NODE_ENV } = process.env
+const cjs = NODE_ENV === 'test'
 const loose = true
 
 module.exports = {

.github/workflows/test-and-publish.yml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [12, 14, 16]
+        node: [14, 16]
         react: [17, 18]
     steps:
       - uses: actions/checkout@v2

broadcastQueryClient-experimental/index.d.ts

@@ -0,0 +1 @@
+export * from '../lib/broadcastQueryClient-experimental'

broadcastQueryClient-experimental/index.js

@@ -0,0 +1 @@
+module.exports = require('../lib/broadcastQueryClient-experimental/index')

core/index.d.ts

@@ -0,0 +1 @@
+export * from '../lib/core'

core/index.js

@@ -0,0 +1 @@
+module.exports = require('../lib/core/index')

createAsyncStoragePersister/index.d.ts

@@ -0,0 +1 @@
+export * from '../lib/createAsyncStoragePersister'

createAsyncStoragePersister/index.js

@@ -0,0 +1 @@
+module.exports = require('../lib/createAsyncStoragePersister/index')

createWebStoragePersister/index.d.ts

@@ -0,0 +1 @@
+export * from '../lib/createWebStoragePersister'

createWebStoragePersister/index.js

@@ -0,0 +1 @@
+module.exports = require('../lib/createWebStoragePersister/index')

devtools/index.d.ts

@@ -0,0 +1 @@
+export * from '../lib/devtools'

devtools/index.js

@@ -1,12 +1,5 @@
 if (process.env.NODE_ENV !== 'development') {
-  module.exports = {
-    ReactQueryDevtools: function () {
-      return null
-    },
-    ReactQueryDevtoolsPanel: function () {
-      return null
-    },
-  }
+  module.exports = require('../lib/devtools/noop')
 } else {
-  module.exports = require('./development')
+  module.exports = require('../lib/devtools/index')
 }

package.json

@@ -11,17 +11,61 @@
     "url": "https://github.com/sponsors/tannerlinsley"
   },
   "main": "lib/index.js",
+  "module": "lib/index.mjs",
+  "types": "lib/index.d.ts",
   "unpkg": "dist/react-query.development.js",
-  "types": "types/index.d.ts",
-  "module": "es/index.js",
   "sideEffects": [
-    "es/index.js",
-    "es/reactjs/index.js",
-    "es/reactjs/setBatchUpdatesFn.js",
     "lib/index.js",
+    "lib/index.mjs",
     "lib/reactjs/index.js",
-    "lib/reactjs/setBatchUpdatesFn.js"
+    "lib/reactjs/index.mjs",
+    "lib/reactjs/setBatchUpdatesFn.js",
+    "lib/reactjs/setBatchUpdatesFn.mjs",
+    "src/reactjs/setBatchUpdatesFn.ts"
   ],
+  "exports": {
+    ".": {
+      "import": "./lib/index.mjs",
+      "default": "./lib/index.mjs"
+    },
+    "./package.json": "./package.json",
+    "./core": {
+      "import": "./lib/core/index.mjs",
+      "default": "./lib/core/index.js"
+    },
+    "./reactjs": {
+      "import": "./lib/reactjs/index.mjs",
+      "default": "./lib/reactjs/index.mjs"
+    },
+    "./devtools": {
+      "development": {
+        "import": "./lib/devtools/index.mjs",
+        "default": "./lib/devtools/index.js"
+      },
+      "production": {
+        "import": "./lib/devtools/noop.mjs",
+        "default": "./lib/devtools/noop.js"
+      },
+      "import": "./lib/devtools/noop.mjs",
+      "default": "./lib/devtools/noop.js"
+    },
+    "./persistQueryClient": {
+      "import": "./lib/persistQueryClient/index.mjs",
+      "default": "./lib/persistQueryClient/index.js"
+    },
+    "./createWebStoragePersister": {
+      "import": "./lib/createWebStoragePersister/index.mjs",
+      "default": "./lib/createWebStoragePersister/index.js"
+    },
+    "./createAsyncStoragePersister": {
+      "import": "./lib/createAsyncStoragePersister/index.mjs",
+      "default": "./lib/createAsyncStoragePersister/index.js"
+    },
+    "./broadcastQueryClient-experimental": {
+      "import": "./lib/broadcastQueryClient-experimental/index.mjs",
+      "default": "./lib/broadcastQueryClient-experimental/index.js"
+    }
+  },
   "scripts": {
     "test": "is-ci \"test:ci\" \"test:dev\"",
     "test:dev": "npm run test:types && npm run test:format && npm run test:eslint && npm run test:codemod && jest --watch",
@@ -33,36 +77,31 @@
     "test:eslint": "eslint --ext .ts,.tsx ./src",
     "test:size": "yarn build:umd && bundlewatch",
     "test:codemod": "jest --config codemods/jest.config.js",
-    "build": "yarn build:commonjs && yarn build:es && yarn build:umd && yarn build:types",
-    "build:commonjs": "rimraf ./lib && cross-env BABEL_ENV=commonjs babel --extensions .ts,.tsx --ignore ./src/**/tests/**/* ./src --out-dir lib",
-    "build:es": "rimraf ./es && babel --extensions .ts,.tsx --ignore ./src/**/tests/**/* ./src --out-dir es",
-    "build:umd": "rimraf ./dist && cross-env NODE_ENV=production rollup -c && rollup-plugin-visualizer stats-react.json",
-    "build:types": "rimraf ./types && tsc --project ./tsconfig.types.json && replace 'import type' 'import' ./types -r --silent && replace 'export type' 'export' ./types -r --silent",
-    "watch": "yarn watch:commonjs & yarn watch:es & yarn watch:umd & yarn watch:types",
-    "watch:commonjs": "rimraf ./lib && cross-env BABEL_ENV=commonjs babel --watch --extensions .ts,.tsx --ignore ./src/**/tests/**/* ./src --out-dir lib",
-    "watch:es": "rimraf ./es && babel --watch --extensions .ts,.tsx --ignore ./src/**/tests/**/* ./src --out-dir es",
-    "watch:umd": "rimraf ./dist && cross-env NODE_ENV=production rollup -w -c && rollup-plugin-visualizer stats-react.json",
-    "watch:types": "rimraf ./types && tsc --watch --project ./tsconfig.types.json && replace 'import type' 'import' ./types -r --silent && replace 'export type' 'export' ./types -r --silent",
+    "build": "yarn build:lib && yarn build:umd && yarn build:types",
+    "build:lib": "rimraf ./lib && rollup -c scripts/rollup/lib-config.js",
+    "build:umd": "rimraf ./dist && cross-env NODE_ENV=production rollup -c scripts/rollup/umd-config.js && rollup-plugin-visualizer stats-react.json",
+    "build:types": "rimraf './lib/**/*.d.ts' && tsc --project ./tsconfig.types.json",
+    "watch": "yarn watch:lib & yarn watch:umd & yarn watch:types",
+    "watch:lib": "rimraf ./lib && rollup -w -c scripts/rollup/lib-config.js",
+    "watch:umd": "rimraf ./dist && cross-env NODE_ENV=production rollup -w -c scripts/rollup/umd-config.js && rollup-plugin-visualizer stats-react.json",
+    "watch:types": "rimraf './lib/**/*.d.ts' && tsc --watch --project ./tsconfig.types.json",
     "now-build": "yarn && cd www && yarn && yarn build",
     "prettier": "prettier \"{.,src,src/**,example/src,example/src/**,types}/*.{md,js,jsx,ts,tsx,json}\"",
     "start": "yarn watch",
     "format": "yarn prettier --write",
     "stats": "open ./stats.html"
   },
   "files": [
-    "core",
     "dist",
-    "es",
+    "lib",
+    "core",
     "hydration",
     "devtools",
     "persistQueryClient",
     "createWebStoragePersister",
     "createAsyncStoragePersister",
     "broadcastQueryClient-experimental",
-    "lib",
     "reactjs",
-    "scripts",
-    "types",
     "codemods",
     "!codemods/jest.config.js",
     "!codemods/**/__testfixtures__",
@@ -93,11 +132,14 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
+    "@rollup/plugin-alias": "^3.1.9",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^21.1.0",
+    "@rollup/plugin-node-resolve": "^13.2.1",
     "@rollup/plugin-replace": "^3.0.0",
-    "@svgr/rollup": "^6.1.1",
+    "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/react-17": "npm:@testing-library/react@^12.1.4",
-    "@testing-library/jest-dom": "^5.14.1",
     "@types/jest": "^26.0.4",
     "@types/jscodeshift": "^0.11.3",
     "@types/node": "^16.11.10",
@@ -134,13 +176,8 @@
     "react-error-boundary": "^3.1.4",
     "replace": "^1.2.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.68.0",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-jscc": "^2.0.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-prettier": "^2.2.2",
+    "rollup": "^2.70.2",
+    "rollup-plugin-node-externals": "^4.0.0",
     "rollup-plugin-size": "^0.2.2",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^5.6.0",

persistQueryClient/index.d.ts

@@ -0,0 +1 @@
+export * from '../lib/persistQueryClient'

persistQueryClient/index.js

@@ -0,0 +1 @@
+module.exports = require('../lib/persistQueryClient/index')

reactjs/index.d.ts

@@ -0,0 +1 @@
+export * from '../lib/reactjs'

reactjs/index.js

@@ -0,0 +1 @@
+module.exports = require('../lib/reactjs/index')

scripts/rollup/common.js

@@ -0,0 +1 @@
+export const extensions = ['.js', '.jsx', '.es6', '.es', '.mjs', '.ts', '.tsx']

scripts/rollup/lib-config.js

@@ -0,0 +1,49 @@
+import babel from '@rollup/plugin-babel'
+import { defineConfig } from 'rollup'
+import resolve from '@rollup/plugin-node-resolve'
+import externals from 'rollup-plugin-node-externals'
+import { extensions } from './common'
+import alias from '@rollup/plugin-alias'
+
+export default defineConfig({
+  input: [
+    'src/index.ts',
+    'src/core/index.ts',
+    'src/reactjs/index.ts',
+    'src/reactjs/reactBatchedUpdates.native.ts',
+    'src/devtools/index.ts',
+    'src/devtools/noop.ts',
+    'src/persistQueryClient/index.ts',
+    'src/createWebStoragePersister/index.ts',
+    'src/createAsyncStoragePersister/index.ts',
+    'src/broadcastQueryClient-experimental/index.ts',
+  ],
+  output: [
+    {
+      dir: 'lib',
+      format: 'cjs',
+      entryFileNames: '[name].js',
+      chunkFileNames: '[name]-[hash].js',
+      preserveModules: true,
+    },
+    {
+      dir: 'lib',
+      format: 'esm',
+      entryFileNames: '[name].mjs',
+      chunkFileNames: '[name]-[hash].mjs',
+      preserveModules: true,
+    },
+  ],
+  plugins: [
+    alias({
+      entries: [{ find: 'react-query', replacement: './src/index.ts' }],
+    }),
+    externals({
+      deps: true,
+      devDeps: true,
+      peerDeps: true,
+    }),
+    resolve({ extensions }),
+    babel({ extensions, babelHelpers: 'runtime' }),
+  ],
+})

rollup.config.js → scripts/rollup/umd-config.js

@@ -1,11 +1,13 @@
-import babel from 'rollup-plugin-babel'
+import babel from '@rollup/plugin-babel'
 import { terser } from 'rollup-plugin-terser'
 import size from 'rollup-plugin-size'
-import externalDeps from 'rollup-plugin-peer-deps-external'
-import resolve from 'rollup-plugin-node-resolve'
-import commonJS from 'rollup-plugin-commonjs'
+import externals from 'rollup-plugin-node-externals'
+import resolve from '@rollup/plugin-node-resolve'
+import commonJS from '@rollup/plugin-commonjs'
 import visualizer from 'rollup-plugin-visualizer'
 import replace from '@rollup/plugin-replace'
+import { extensions } from './common'
+import { defineConfig } from 'rollup'
 
 const external = ['react', 'react-dom', 'react-query']
 
@@ -41,20 +43,19 @@ const inputSrcs = [
   ],
 ]
 
-const extensions = ['.js', '.jsx', '.es6', '.es', '.mjs', '.ts', '.tsx']
-const babelConfig = { extensions, runtimeHelpers: true }
-const resolveConfig = { extensions }
-const commonJsConfig = {
-  namedExports: {
-    'node_modules/use-sync-external-store/shim/index.js': [
-      'useSyncExternalStore',
-    ],
-  },
+const babelConfig = {
+  extensions,
+  babelHelpers: 'runtime',
+  exclude: 'node_modules/**',
 }
+const resolveConfig = { extensions }
+
+const externalPeerDeps = () =>
+  externals({ deps: false, devDeps: false, peerDeps: true })
 
 export default inputSrcs
   .map(([input, name, file]) => {
-    return [
+    return defineConfig([
       {
         input: input,
         output: {
@@ -66,10 +67,10 @@ export default inputSrcs
         },
         external,
         plugins: [
+          externalPeerDeps(),
           resolve(resolveConfig),
           babel(babelConfig),
-          commonJS(commonJsConfig),
-          externalDeps(),
+          commonJS(),
         ],
       },
       {
@@ -88,10 +89,10 @@ export default inputSrcs
             delimiters: ['', ''],
             preventAssignment: true,
           }),
+          externalPeerDeps(),
           resolve(resolveConfig),
           babel(babelConfig),
-          commonJS(commonJsConfig),
-          externalDeps(),
+          commonJS(),
           terser(),
           size(),
           visualizer({
@@ -100,6 +101,6 @@ export default inputSrcs
           }),
         ],
       },
-    ]
+    ])
   })
   .flat()

src/devtools/noop.ts

@@ -0,0 +1,7 @@
+export function ReactQueryDevtools() {
+  return null
+}
+
+export function ReactQueryDevtoolsPanel() {
+  return null
+}