Use CJS files as package.json#main for @xstate/fsm (#2899)

* Use similar rollup.config as in core * Update examples * Revert version bump * Revert "Update examples" This reverts commit 5204fd0. * Remove redundant Babel config from 's rollup.config.js * Add changeset Co-authored-by: Anna Bansaghi <[email protected]>
statelyai · Dec 28, 2021 · 4999395 · 4999395
1 parent df5ffce
commit 4999395
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 5 deletions.
diff --git a/.changeset/green-carpets-report.md b/.changeset/green-carpets-report.md
@@ -0,0 +1,8 @@
+---
+'@xstate/fsm': patch
+---
+
+author: @annaghi
+pr: #2474
+
+Use CommonJS files as `package.json#main` (instead of UMD files) as this plays better with native ESM loader in node (and by extension fixes compatibility issues with projects like [SvelteKit](https://kit.svelte.dev/)).
diff --git a/packages/xstate-fsm/package.json b/packages/xstate-fsm/package.json
@@ -17,13 +17,12 @@
   "author": "David Khourshid <[email protected]>",
   "homepage": "https://github.com/davidkpiano/xstate/tree/main/packages/xstate-fsm#readme",
   "license": "MIT",
-  "main": "dist/xstate.fsm.js",
+  "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "module": "es/index.js",
   "sideEffects": false,
   "files": [
-    "dist/**/*.js",
-    "dist/**/*.d.ts",
+    "dist",
     "lib/**/*.js",
     "lib/**/*.d.ts",
     "es/**/*.js",
@@ -34,7 +33,7 @@
     "url": "git+ssh://[email protected]/davidkpiano/xstate.git"
   },
   "scripts": {
-    "clean": "rm -rf dist lib tsconfig.tsbuildinfo",
+    "clean": "rm -rf lib es dist tsconfig.tsbuildinfo",
     "build": "rollup -c",
     "test": "jest",
     "prepublish": "npm run build"

diff --git a/packages/xstate-fsm/rollup.config.js b/packages/xstate-fsm/rollup.config.js
@@ -3,6 +3,39 @@ import { terser } from 'rollup-plugin-terser';
 import rollupReplace from 'rollup-plugin-replace';
 import fileSize from 'rollup-plugin-filesize';
 
+const createTsPlugin = ({ declaration = true, target } = {}) =>
+  typescript({
+    clean: true,
+    tsconfigOverride: {
+      compilerOptions: {
+        declaration,
+        ...(target && { target })
+      }
+    }
+  });
+
+const createNpmConfig = ({ input, output }) => ({
+  input,
+  output,
+  preserveModules: true,
+  plugins: [createTsPlugin()]
+});
+
+const createUmdConfig = ({ input, output, target = undefined }) => ({
+  input,
+  output,
+  plugins: [
+    rollupReplace({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
+    createTsPlugin({ declaration: false, target }),
+    terser({
+      toplevel: true
+    }),
+    fileSize()
+  ]
+});
+
 const createConfig = ({ input, output, tsconfig = undefined }) => ({
   input,
   output,
@@ -22,7 +55,25 @@ const createConfig = ({ input, output, tsconfig = undefined }) => ({
 });
 
 export default [
-  createConfig({
+  createNpmConfig({
+    input: 'src/index.ts',
+    output: [
+      {
+        dir: 'lib',
+        format: 'cjs'
+      }
+    ]
+  }),
+  createNpmConfig({
+    input: 'src/index.ts',
+    output: [
+      {
+        dir: 'es',
+        format: 'esm'
+      }
+    ]
+  }),
+  createUmdConfig({
     input: 'src/index.ts',
     output: {
       file: 'dist/xstate.fsm.js',