Merge pull request #4511 from reduxjs/feature/build-esm-fixes

.codesandbox/ci.json

@@ -1,7 +1,4 @@
 {
-  "sandboxes": [
-    "vanilla",
-    "vanilla-ts"
-  ],
-  "node": "14"
+  "sandboxes": ["vanilla", "vanilla-ts"],
+  "node": "16"
 }

.github/workflows/test.yaml

@@ -127,3 +127,74 @@ jobs:
           yarn tsc --version
           yarn check-types
           yarn test:types
+
+  test-published-artifact:
+    name: Test Published Artifact ${{ matrix.example }}
+
+    needs: [build]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node: ['16.x']
+        example:
+          [
+            'cra4',
+            'cra5',
+            'next',
+            'vite',
+            'node-standard',
+            'node-esm',
+            'are-the-types-wrong'
+          ]
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use node ${{ matrix.node }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node }}
+          cache: 'yarn'
+
+      - name: Clone RTK repo
+        run: git clone https://github.com/reduxjs/redux-toolkit.git ./redux-toolkit
+
+      - name: Check folder contents
+        run: ls -l .
+
+      - name: Install deps
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        run: yarn install
+
+      - uses: actions/download-artifact@v2
+        with:
+          name: package
+          path: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+
+      - name: Check folder contents
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        run: ls -l .
+
+      - name: Install build artifact
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        run: yarn add ./package.tgz
+
+      - name: Show installed package versions
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        run: yarn info redux && yarn why redux
+
+      - name: Build example
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        run: yarn build
+
+      - name: Run test step
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        run: yarn test
+        if: matrix.example != 'are-the-types-wrong'
+
+      - name: Run test step
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        # Ignore "FalseCJS" errors in the `attw` job
+        run: yarn test -n FalseCJS
+        if: matrix.example == 'are-the-types-wrong'

package.json

@@ -23,27 +23,23 @@
     "Dan Abramov <[email protected]> (https://github.com/gaearon)",
     "Andrew Clark <[email protected]> (https://github.com/acdlite)"
   ],
-  "type": "module",
-  "module": "dist/es/index.js",
-  "main": "dist/cjs/index.cjs",
-  "types": "types/index.d.ts",
+  "main": "dist/cjs/redux.cjs",
+  "module": "dist/redux.mjs",
+  "types": "dist/redux.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "types": "./types/index.d.ts",
-      "import": "./dist/es/index.js",
-      "default": "./dist/cjs/index.cjs"
+      "types": "./dist/redux.d.ts",
+      "import": "./dist/redux.mjs",
+      "default": "./dist/cjs/redux.cjs"
     }
   },
   "files": [
     "dist",
-    "lib",
-    "es",
-    "src",
-    "types"
+    "src"
   ],
   "scripts": {
-    "clean": "rimraf lib dist es coverage types",
+    "clean": "rimraf dist",
     "format": "prettier --write \"{src,test}/**/*.{js,ts}\" \"**/*.md\"",
     "format:check": "prettier --list-different \"{src,test}/**/*.{js,ts}\" \"**/*.md\"",
     "lint": "eslint --ext js,ts src test",
@@ -52,7 +48,7 @@
     "test:types": "tsc -p test/typescript && echo \"Typetests passed\"",
     "test:watch": "vitest",
     "test:cov": "vitest --coverage",
-    "build": "rollup -c",
+    "build": "tsup",
     "prepublishOnly": "yarn clean && yarn check-types && yarn format:check && yarn lint && yarn test",
     "prepack": "yarn build",
     "examples:lint": "eslint --ext js,ts examples",
@@ -79,6 +75,7 @@
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
     "cross-env": "^7.0.3",
+    "esbuild-extra": "^0.1.3",
     "eslint": "^8.23.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-import-resolver-typescript": "^3.5.1",
@@ -94,6 +91,7 @@
     "rollup": "^3.12.0",
     "rollup-plugin-typescript2": "^0.34.1",
     "rxjs": "^7.5.6",
+    "tsup": "^6.7.0",
     "typescript": "^4.8.3",
     "vitest": "^0.27.2"
   },

scripts/mangleErrors.cjs

@@ -103,12 +103,12 @@ module.exports = babel => {
           }
 
           // Import the error message function
-          const formatProdErrorMessageIdentifier =
-            helperModuleImports.addDefault(
-              path,
-              'src/utils/formatProdErrorMessage',
-              { nameHint: 'formatProdErrorMessage' }
-            )
+          const formatProdErrorMessageIdentifier = helperModuleImports.addNamed(
+            path,
+            'formatProdErrorMessage',
+            'src/utils/formatProdErrorMessage',
+            { nameHint: 'formatProdErrorMessage' }
+          )
 
           // Creates a function call to output the message to the error code page on the website
           const prodMessage = t.callExpression(

src/types/store.ts

@@ -1,6 +1,7 @@
 import { Action, AnyAction } from './actions'
 import { Reducer } from './reducers'
-import '../utils/symbol-observable'
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import _$$observable from '../utils/symbol-observable'
 
 /**
  * Internal "virtual" symbol used to make the `CombinedState` type unique.

src/utils/formatProdErrorMessage.ts

@@ -5,11 +5,9 @@
  * during build.
  * @param {number} code
  */
-function formatProdErrorMessage(code: number) {
+export function formatProdErrorMessage(code: number) {
   return (
     `Minified Redux error #${code}; visit https://redux.js.org/Errors?code=${code} for the full message or ` +
     'use the non-minified dev environment for full errors. '
   )
 }
-
-export default formatProdErrorMessage

test/utils/formatProdErrorMessage.spec.ts

@@ -1,4 +1,4 @@
-import formatProdErrorMessage from '@internal/utils/formatProdErrorMessage'
+import { formatProdErrorMessage } from '@internal/utils/formatProdErrorMessage'
 
 describe('formatProdErrorMessage', () => {
   it('returns message with expected code references', () => {

tsconfig.json

@@ -15,7 +15,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "baseUrl": "./",
-    "types": ["vitest/globals"],
+    "types": ["vitest/globals", "esbuild-extra/global"],
     "paths": {
       "redux": ["src/index.ts"], // @remap-prod-remove-line
       "@internal/*": ["src/*"]

tsup.config.ts

@@ -0,0 +1,67 @@
+import { defineConfig, Options } from 'tsup'
+
+import * as babel from '@babel/core'
+import { Plugin } from 'esbuild'
+import { getBuildExtensions } from 'esbuild-extra'
+
+// Extract error strings, replace them with error codes, and write messages to a file
+const mangleErrorsTransform: Plugin = {
+  name: 'mangle-errors-plugin',
+  setup(build) {
+    const { onTransform } = getBuildExtensions(build, 'mangle-errors-plugin')
+
+    onTransform({ loaders: ['ts', 'tsx'] }, async args => {
+      const res = babel.transformSync(args.code, {
+        parserOpts: {
+          plugins: ['typescript']
+        },
+        plugins: [['./scripts/mangleErrors.cjs', { minify: false }]]
+      })!
+      return {
+        code: res.code!,
+        map: res.map!
+      }
+    })
+  }
+}
+
+export default defineConfig(options => {
+  const commonOptions: Partial<Options> = {
+    entry: {
+      redux: 'src/index.ts'
+    },
+    esbuildPlugins: [mangleErrorsTransform],
+    sourcemap: true,
+    ...options
+  }
+
+  return [
+    // Standard ESM, embedded `process.env.NODE_ENV` checks
+    {
+      ...commonOptions,
+      format: ['esm'],
+      outExtension: () => ({ js: '.mjs' }),
+      dts: true,
+      clean: true
+    },
+    // Browser-ready ESM, production + minified
+    {
+      ...commonOptions,
+      entry: {
+        'redux.browser': 'src/index.ts'
+      },
+      define: {
+        'process.env.NODE_ENV': JSON.stringify('production')
+      },
+      format: ['esm'],
+      outExtension: () => ({ js: '.mjs' }),
+      minify: true
+    },
+    {
+      ...commonOptions,
+      format: 'cjs',
+      outDir: './dist/cjs/',
+      outExtension: () => ({ js: '.cjs' })
+    }
+  ]
+})