Improved ESM support for all public packages

- Updated the building of ESM modules to run `tsc-alias` to append the `.js` extensions onto the imports for ESM builds
- For those builds that use `lodash` also added a replacer for the `tsc-alias` that switches things to use `lodash-es`

Author: heath-freenome

.gitignore

@@ -140,3 +140,5 @@ out/
 
 # typescript tsbuildinfo
 *.tsbuildinfo
+lodashReplacer.js
+

CHANGELOG.md

@@ -19,9 +19,14 @@ should change the heading of the (upcoming) version to include a major version b
 
 ## @rjsf/utils
 
-- fixed issue with customValidate errors are not cleared when the form is valid [4365](https://github.com/rjsf-team/react-jsonschema-form/pull/4365) due to regression
+- Fixed issue with customValidate errors are not cleared when the form is valid [4365](https://github.com/rjsf-team/react-jsonschema-form/pull/4365) due to regression
 - Add missing `experimental_customMergeAllOf` argument to `ensureFormDataMatchingSchema` introduced by [4388](https://github.com/rjsf-team/react-jsonschema-form/pull/4388)
 
+## Dev / docs / playground
+
+- Improved the ESM support for all public packages by adding explicit `exports` to each public `package.json`
+- Updated the ESM builds to use `tsc-alias` to add `.js` onto all ESM imports
+
 # 5.24.3
 
 ## @rjsf/utils

package-lock.json

@@ -60,6 +60,7 @@
     "prettier": "^2.8.8",
     "rimraf": "^5.0.5",
     "ts-jest": "^29.1.2",
+    "tsc-alias": "^1.8.11",
     "tslib": "^2.6.2",
     "typescript": "^4.9.5"
   },
@@ -79,6 +80,5 @@
     "packages/validator-ajv6",
     "packages/validator-ajv8",
     "packages/snapshot-tests"
-  ],
-  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  ]
 }

package.json

@@ -5,8 +5,15 @@
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "exports": {
+    "require": "./dist/index.js",
+    "node": "./dist/index.js",
+    "import": "./lib/index.js",
+    "types": "./lib/index.d.ts"
+  },
   "scripts": {
-    "build:ts": "tsc -b",
+    "compileReplacer": "tsc -p tsconfig.replacer.json",
+    "build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.js --sourcemap --packages=external --format=cjs",
     "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/antd.esm.js --sourcemap --packages=external --format=esm",
     "build:umd": "rollup dist/antd.esm.js --format=umd --file=dist/antd.umd.js --name=@rjsf/antd",

packages/antd/package.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./lib"
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./src"
+    }
+  ],
+  "tsc-alias": {
+    "resolveFullPaths": true,
+    "verbose": true,
+    "replacers": {
+      "lodash": {
+        "enabled": true,
+        "file": "lodashReplacer.js"
+      }
+    }
+  }
+}

packages/antd/tsconfig.build.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es2017",
+    "outDir": "./",
+    "skipLibCheck": true,
+  },
+  "files": [
+    "../../tsc-alias-replacer/lodashReplacer.ts"
+  ],
+  "exclude": [
+    "./src",
+    "./test"
+  ]
+}

packages/antd/tsconfig.replacer.json

@@ -4,6 +4,12 @@
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "exports": {
+    "require": "./dist/index.js",
+    "node": "./dist/index.js",
+    "import": "./lib/index.js",
+    "types": "./lib/index.d.ts"
+  },
   "description": "Bootstrap 4 theme, fields and widgets for react-jsonschema-form",
   "files": [
     "dist",
@@ -15,7 +21,7 @@
     "url": "git+https://github.com/rjsf-team/react-jsonschema-form.git"
   },
   "scripts": {
-    "build:ts": "tsc -b",
+    "build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.js --sourcemap --packages=external --format=cjs",
     "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/bootstrap-4.esm.js --sourcemap --packages=external --format=esm",
     "build:umd": "rollup dist/bootstrap-4.esm.js --format=umd --file=dist/bootstrap-4.umd.js --name=@rjsf/bootstrap-4",

packages/bootstrap-4/package.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./lib"
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./src"
+    }
+  ]
+}

packages/bootstrap-4/tsconfig.build.json

@@ -5,13 +5,19 @@
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "exports": {
+    "require": "./dist/index.js",
+    "node": "./dist/index.js",
+    "import": "./lib/index.js",
+    "types": "./lib/index.d.ts"
+  },
   "files": [
     "dist",
     "lib",
     "src"
   ],
   "scripts": {
-    "build:ts": "tsc -b",
+    "build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.js --sourcemap --packages=external --format=cjs",
     "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/chakra-ui.esm.js --sourcemap --packages=external --format=esm",
     "build:umd": "rollup dist/chakra-ui.esm.js --format=umd --file=dist/chakra-ui.umd.js --name=@rjsf/chakra-ui",