Switch to esbuild

packages/form/build.js

@@ -0,0 +1,17 @@
+const esbuild = require('esbuild');
+const pkg = require('./package.json');
+
+const options = {
+  entryPoints: ['src/index.ts'],
+  bundle: true,
+  minify: true,
+  sourcemap: true,
+  external: ['react'],
+  target: 'es2015',
+};
+
+(async () => {
+  await esbuild.build({...options, outfile: pkg.main, format: 'cjs'});
+
+  await esbuild.build({...options, outfile: pkg.module, format: 'esm'});
+})();

packages/form/build.tsconfig.json

@@ -1,9 +1,12 @@
 {
+  "$schema": "https://json.schemastore.org/tsconfig",
   "extends": "../../base.tsconfig.json",
   "compilerOptions": {
     "rootDir": "src",
+    "emitDeclarationOnly": true,
+    "declaration": true,
     "declarationDir": "types"
   },
   "include": ["src"],
-  "exclude": ["**/*.test.ts?(x)"]
+  "exclude": ["**/*.test.ts", "**/*.test.tsx"]
 }

packages/form/package.json

@@ -19,16 +19,16 @@
   "files": [
     "lib",
     "module",
-    "types",
-    "umd"
+    "types"
   ],
   "scripts": {
+    "build:types": "tsc -p build.tsconfig.json",
     "test": "npm run test:types && npm run test:unit --silent",
     "test:unit": "jest",
     "test:types": "tsc --noEmit",
-    "build:clean": "rimraf lib module types umd",
-    "build": "npm run build:clean && rollup -c rollup.config.js",
-    "build:website": "cd website && yarn install && yarn build",
+    "build:clean": "rimraf lib module types",
+    "build": "yarn build:clean && node build.js",
+    "build:website": "cd website && yarn install && yarn build:types && yarn build",
     "serve:website": "cd website && yarn serve",
     "prepublishOnly": "npm run test && npm run build",
     "prepack": "node -e \"require('./package.json').files.map((file) => require('fs').statSync(require('path').join(process.cwd(), file)))\""
@@ -43,15 +43,11 @@
     "@types/node": "15.12.5",
     "@types/react": "17.0.11",
     "@types/react-dom": "17.0.8",
+    "esbuild": "0.12.12",
     "jest": "27.0.6",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "rimraf": "3.0.2",
-    "rollup": "2.52.3",
-    "rollup-plugin-commonjs": "10.1.0",
-    "rollup-plugin-node-resolve": "5.2.0",
-    "rollup-plugin-terser": "7.0.2",
-    "rollup-plugin-typescript2": "0.30.0",
     "ts-jest": "27.0.3",
     "typescript": "4.3.4"
   },

packages/form/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://json.schemastore.org/tsconfig",
   "extends": "../../base.tsconfig.json",
   "compilerOptions": {
     "module": "commonjs"

tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://json.schemastore.org/tsconfig",
   "extends": "./base.tsconfig.json",
   "compilerOptions": {
     "module": "commonjs"

website/docs/installation.md

@@ -69,7 +69,7 @@ render(Basic);
 
 ## Field Mapping
 
-A core concept of `@10xjs/form` is a clean separation of form state and any inputs that interact with it. Each input is mapped to a slice of the form value state through the `path` prop. Field state is not directly accessible from your outer form component and should be accessed using [`useField`](/docs/api/functions/usefield) (or the utility [`fields.*`](/docs/api/variables/fields.input) components). This pattern ensures that changes to the state of one field do not propagate as render updates to the entire form. A mapped field only re-renders when state under its `path` changes.
+A core concept of `@10xjs/form` is a clean separation of form state and any inputs that interact with it. Each input is mapped to a slice of the form value state through the `path` prop. Field state is not directly accessible from your outer form component and should be accessed using [`useField`](/docs/api/functions/usefield) (or the utility [`fields.*`](/docs/api/modules/fields) components). This pattern ensures that changes to the state of one field do not propagate as render updates to the entire form. A mapped field only re-renders when state under its `path` changes.
 
 #### Custom mapped input example
 

website/src/pages/index.js

@@ -3,15 +3,12 @@ import clsx from 'clsx';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import CodeBlock from '@theme/CodeBlock';
-import ReactLiveScope from '@theme/ReactLiveScope';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
 
 const features = [];
 
-console.log(ReactLiveScope);
-
 function Feature({imageUrl, title, description}) {
   const imgUrl = useBaseUrl(imageUrl);
   return (

website/src/theme/ReactLiveScope/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import * as form from '@10xjs/form/lib';
+import * as form from '@10xjs/form';
 
 const ReactLiveScope = {
   ...form,