Feat: Microbundle compat bundler and React based jotai utils core (#27)

* feat: add microbundle compat with rollup

* ci: move to 18

* ci: update csb base version

* chore: disable eslint import rules for config

.codesandbox/ci.json

@@ -1,5 +1,5 @@
 {
   "buildCommand": "compile",
   "sandboxes": ["new", "react-typescript-react-ts"],
-  "node": "16"
+  "node": "18"
 }

.github/workflows/cd.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Get yarn cache

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: '16.x'
+          node-version: '18.x'
 
       - name: Get yarn cache
         id: yarn-cache

package.json

@@ -21,6 +21,12 @@
       "module": "./dist/index.modern.js",
       "import": "./dist/index.modern.mjs",
       "default": "./dist/index.umd.js"
+    },
+    "./react": {
+      "types": "./dist/react/src/react/index.d.ts",
+      "module": "./dist/react/index.modern.js",
+      "import": "./dist/react/index.modern.mjs",
+      "default": "./dist/react/index.umd.js"
     }
   },
   "sideEffects": false,
@@ -29,8 +35,7 @@
     "dist"
   ],
   "scripts": {
-    "compile": "microbundle build -f modern,umd --globals react=React",
-    "postcompile": "cp dist/index.modern.mjs dist/index.modern.js && cp dist/index.modern.mjs.map dist/index.modern.js.map",
+    "compile": "NODE_ENV=production rollup -c",
     "test": "run-s eslint tsc-test jest",
     "eslint": "eslint --ext .js,.ts,.tsx .",
     "jest": "jest",
@@ -65,6 +70,7 @@
     "@typescript-eslint/parser": "^6.13.1",
     "bumpp": "^8.2.1",
     "css-loader": "^6.8.1",
+    "esbuild": "^0.20.2",
     "eslint": "^8.55.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.10.0",
@@ -77,7 +83,6 @@
     "jest-environment-jsdom": "^29.7.0",
     "joi": "^17.11.0",
     "jotai": "^2.6.0",
-    "microbundle": "^0.14.2",
     "normalize.css": "^8.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
@@ -86,11 +91,15 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "regenerator-runtime": "^0.13.11",
+    "rollup": "^4.14.2",
+    "rollup-plugin-esbuild": "^6.1.1",
+    "rollup-plugin-typescript2": "^0.36.0",
     "style-loader": "^3.3.3",
     "styled-components": "^5.3.11",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.2.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.5",
     "valibot": "^0.21.0",
     "webpack": "^5.89.0",
     "webpack-cli": "^4.10.0",

rollup.config.js

@@ -0,0 +1,111 @@
+/* eslint
+  @typescript-eslint/no-var-requires: 0,
+  import/no-extraneous-dependencies: 0,
+  global-require: 0,
+*/
+
+const typescript = require('rollup-plugin-typescript2');
+const { minify } = require('rollup-plugin-esbuild');
+const { dirname, resolve, join } = require('path');
+
+/** @returns {import("rollup").RollupOptions[]} */
+module.exports = function config() {
+  const builder = configBuilder();
+
+  const pkg = require('./package.json');
+
+  return builder.merge(
+    // core
+    builder.buildUMD('./src/index.ts', pkg.name, 'dist'),
+    builder.buildESM('./src/index.ts', 'dist'),
+
+    // react
+    builder.buildUMD('./src/react/index.ts', 'jotai-form-react', 'dist/react'),
+    builder.buildESM('./src/react/index.ts', 'dist/react'),
+  );
+};
+
+function configBuilder({ env } = {}) {
+  /** @type {Partial<import("rollup").RollupOptions>} */
+
+  const isDev = env || process.env.NODE_ENV !== 'production';
+
+  const getCommonPlugins = (input, output) =>
+    [
+      !isDev ? minify() : false,
+      typescript({
+        cwd: process.cwd(),
+        useTsconfigDeclarationDir: true,
+        tsconfig: './tsconfig.json',
+        tsconfigOverride: {
+          compilerOptions: {
+            module: 'ESNext',
+            target: 'esnext',
+          },
+        },
+        tsconfigDefaults: {
+          compilerOptions: {
+            declarationDir: join(resolve(output), dirname(input)),
+            declaration: true,
+          },
+          files: [input],
+        },
+      }),
+    ].filter(Boolean);
+
+  return {
+    merge(...configs) {
+      return [].concat(configs).flat(1);
+    },
+    /** @returns {import("rollup").RollupOptions[]} */
+    buildESM(input, output) {
+      const plugins = getCommonPlugins(input, output);
+
+      return [
+        {
+          input,
+          output: {
+            globals: {
+              react: 'React',
+            },
+            dir: output,
+            format: 'es',
+            entryFileNames: '[name].modern.js',
+          },
+          plugins: [...plugins],
+        },
+        {
+          input,
+          output: {
+            globals: {
+              react: 'React',
+            },
+            dir: output,
+            format: 'es',
+            entryFileNames: '[name].modern.mjs',
+          },
+          plugins: [...plugins],
+        },
+      ];
+    },
+    /** @returns {import("rollup").RollupOptions[]} */
+    buildUMD(input, name, output) {
+      const plugins = getCommonPlugins(input, output);
+      return [
+        {
+          input,
+          output: {
+            globals: {
+              react: 'React',
+            },
+            format: 'umd',
+            dir: output,
+            name,
+            entryFileNames: '[name].umd.js',
+          },
+          plugins: [...plugins],
+        },
+      ];
+    },
+  };
+}

src/react/index.ts

@@ -0,0 +1 @@
+export { noop } from './utils/noop';

src/react/utils/noop.ts

@@ -0,0 +1 @@
+export const noop = () => {};