material-code esm/cjs: add exports, back to separate esm folder;

elbakerino · elbakerino · commit 2ca9ddaa8a61 · 2025-06-29T21:42:53.000+02:00
but not "strict esm", so no `type: module` in material-code package.json, as long as it needs to support dependencies which do not have this, it can break bundlers and a lot more. which MUI5/6/7 still lacks;
diff --git a/babel.config.json b/babel.config.json
@@ -43,6 +43,41 @@
                 ]
             ]
         },
+        "cjs2": {
+            "presets": [
+                "@babel/preset-env",
+                [
+                    "@babel/preset-react",
+                    {
+                        "runtime": "automatic"
+                    }
+                ],
+                "@babel/preset-typescript"
+            ],
+            "plugins": [
+            ]
+        },
+        "mjs": {
+            "presets": [
+                [
+                    "@babel/preset-react",
+                    {
+                        "runtime": "automatic"
+                    }
+                ],
+                "@babel/preset-typescript"
+            ],
+            "plugins": [
+                [
+                    "babel-plugin-replace-import-extension",
+                    {
+                        "extMapping": {
+                            ".js": ".mjs"
+                        }
+                    }
+                ]
+            ]
+        },
         "test": {
             "presets": [
                 "@babel/preset-env",
@@ -61,7 +96,7 @@
                     "@babel/preset-env",
                     {
                         "targets": {
-                            "node": "18"
+                            "node": "20"
                         },
                         "modules": false
                     }
@@ -70,7 +105,7 @@
                     "@babel/preset-typescript",
                     {
                         "targets": {
-                            "node": "18"
+                            "node": "20"
                         },
                         "modules": false
                     }
diff --git a/eslint.config.js b/eslint.config.js
@@ -235,7 +235,7 @@ export default defineConfig([
     {
         files: [
             '**/demo-server/*.{ts,tsx,mjs,js}',
-            'packerConfig.js',
+            'packerConfig.{mjs,js}',
             'jest.config.ts',
         ],
         languageOptions: {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,12 +20,12 @@
         "page-index": "lerna run page-index",
         "dtsgen": "lerna run dtsgen",
         "tscheck": "lerna run tscheck",
-        "profile": "cross-env NODE_OPTIONS='--max-old-space-size=4096' NODE_ENV=production node packerConfig.mjs --build --profile",
+        "profile": "cross-env NODE_OPTIONS='$NODE_OPTIONS --max-old-space-size=4096' NODE_ENV=production node packerConfig.mjs --build --profile",
         "clean": "npm run clean-dist && lerna clean -y",
         "clean-dist": "node packerConfig.mjs --clean",
         "clean-lock": "rimraf --glob packages/*/package-lock.json",
         "check": "npm run lint && npm run tscheck && npm run test",
-        "lint": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max-old-space-size=8192\" eslint -c=eslint.config.js --ext=.tsx,.ts --max-warnings=0 'packages'",
+        "lint": "cross-env NODE_ENV=test NODE_OPTIONS=\"$NODE_OPTIONS --max-old-space-size=8192\" eslint -c=eslint.config.js --ext=.tsx,.ts --max-warnings=0 'packages'",
         "test": "jest -c=\"jest.config.ts\" --passWithNoTests",
         "tdd": "npm test -- --watch --watchman --coverage=false",
         "__release": "lerna run release --stream",
@@ -49,7 +49,7 @@
         "globals": "^16.2.0",
         "jest-environment-jsdom": "^29.0.2",
         "lerna": "^8.2.2",
-        "lerna-packer": "0.12.1",
+        "lerna-packer": "0.12.2",
         "nodemon": "^3.1.7",
         "react": "^19.0",
         "react-dom": "^19.0",
diff --git a/packages/material-code/package.json b/packages/material-code/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ui-schema/material-code",
-    "version": "0.5.0-alpha.0",
+    "version": "0.5.0-alpha.1",
     "description": "Code editor widgets using CodeMirror, with Material-UI styling for UI-Schema",
     "homepage": "https://ui-schema.bemit.codes/docs/material-code/material-code",
     "author": {
@@ -34,9 +34,22 @@
     "bugs": {
         "url": "https://github.com/ui-schema/react-codemirror/issues"
     },
-    "main": "./index.js",
+    "main": "./index.cjs",
     "module": "./esm/index.js",
     "types": "./index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./index.d.ts",
+            "import": "./esm/index.js",
+            "require": "./index.cjs"
+        },
+        "./*": {
+            "types": "./*/index.d.ts",
+            "import": "./esm/*/index.js",
+            "require": "./*/index.cjs"
+        },
+        "./esm": null
+    },
     "scripts": {
         "dtsgen": "tsc -d --emitDeclarationOnly --pretty && node ../../tools/merge-dirs.js build/dts/material-code/src build && rm -rf build/dts && rm -rf build/**/*.test.* build/**/*.mock.*",
         "__release": "cp package.json build/ && cp package-lock.json build/ && cp README.md build/ && npm publish build"
@@ -54,6 +67,7 @@
         "@ui-schema/kit-codemirror": "^1.0.0-alpha.0",
         "@ui-schema/ds-material": "~0.4.3",
         "@ui-schema/ui-schema": "~0.4.7",
+        "@lezer/highlight": "^1.2.1",
         "immutable": "^5.0.0",
         "react": "^19.0",
         "react-dom": "^19.0"
@@ -67,6 +81,7 @@
         "@ui-schema/kit-codemirror": "^1.0.0-alpha.0",
         "@ui-schema/ds-material": "~0.4.0-alpha",
         "@ui-schema/ui-schema": "~0.4.0-alpha",
+        "@lezer/highlight": "^1.0.0",
         "immutable": "^4.0.0 || ^5.0.0",
         "react": "^17.0 || ^18.0 || ^19.0"
     },
diff --git a/packages/material-code/src/CodeBar/index.ts b/packages/material-code/src/CodeBar/index.ts
@@ -1 +1 @@
-export * from './CodeBar'
+export * from './CodeBar.js'
diff --git a/packages/material-code/src/WidgetCode/index.ts b/packages/material-code/src/WidgetCode/index.ts
@@ -1 +1 @@
-export * from './WidgetCode'
+export * from './WidgetCode.js'
diff --git a/packages/material-code/src/WidgetCodeSelectable/index.ts b/packages/material-code/src/WidgetCodeSelectable/index.ts
@@ -1 +1 @@
-export * from './WidgetCodeSelectable'
+export * from './WidgetCodeSelectable.js'
diff --git a/packages/material-code/src/index.ts b/packages/material-code/src/index.ts
@@ -1,5 +1,5 @@
-export * from './CodeBar'
-export * from './useEditorTheme'
-export * from './useHighlightStyle'
-export * from './WidgetCode'
-export * from './WidgetCodeSelectable'
+export * from '@ui-schema/material-code/CodeBar'
+export * from '@ui-schema/material-code/useEditorTheme'
+export * from '@ui-schema/material-code/useHighlightStyle'
+export * from '@ui-schema/material-code/WidgetCode'
+export * from '@ui-schema/material-code/WidgetCodeSelectable'
diff --git a/packages/material-code/src/useEditorTheme/index.ts b/packages/material-code/src/useEditorTheme/index.ts
@@ -1 +1 @@
-export * from './useEditorTheme'
+export * from './useEditorTheme.js'
diff --git a/packages/material-code/src/useHighlightStyle/index.ts b/packages/material-code/src/useHighlightStyle/index.ts
@@ -1 +1 @@
-export * from './useHighlightStyle'
+export * from './useHighlightStyle.js'
diff --git a/packages/material-code/tsconfig.json b/packages/material-code/tsconfig.json
@@ -4,6 +4,8 @@
         "src"
     ],
     "compilerOptions": {
+        "module": "ES2020",
+        "moduleResolution": "Bundler",
         "outDir": "build/dts"
     }
 }
diff --git a/packages/tsconfig.json b/packages/tsconfig.json
@@ -27,10 +27,10 @@
                 "kit-codemirror/src/*/index.ts"
             ],
             "@ui-schema/material-code": [
-                "material-code/src"
+                "material-code/src/index.ts"
             ],
             "@ui-schema/material-code/*": [
-                "material-code/src/*"
+                "material-code/src/*/index.ts"
             ]
         }
     },
diff --git a/packerConfig.mjs b/packerConfig.mjs
@@ -1,10 +1,7 @@
 import path from 'path'
 import { packer, webpack } from 'lerna-packer'
-import { babelTargetsLegacyCjsFirst } from 'lerna-packer/packer/babelEsModules.js'
 import {
-    makeModulePackageJson,
     copyRootPackageJson,
-    transformerForLegacyCjsFirst,
 } from 'lerna-packer/packer/modulePackages.js'
 import { dirname } from 'node:path'
 import { fileURLToPath } from 'node:url'
@@ -41,40 +38,32 @@ const babelTargetsEsmCjs = [
     },
 ]
 
-/**
- * @todo this shouldn't be needed, or not working or used by TS/node at all,
- *       added for fallbacks for the moment,
- *       it seems for `cjs` fallbacks, `main` can still be used if using `.cjs` extension (like in @codemirror/view),
- *       while the Node.js spec says "`main` can be used as fallback with `type: module`, it will be interpreted as esm (with .js extension)",
- *       - `main` is used for "directory" imports/require, thus wanted to keep it for such legacy projects
- *       - as Node.js with ESM support would use the `exports`, it should be better to go the "main as .cjs" way
- *       - as Node.js with ESM support would use the `exports` in the root directory, the `exports` below will never have any effect when importing the package,
- *         yet it may be used in the built bundle and relative imports inside of it,
- *         which only was observed with jest and ESM,
- *         as `export * from './useExtension/index.js';` in `/index.js` does not follow the `exports` defined in the nested `package.json`,
- *         it should fail if Node.js really uses these nested `package.json`, yet it works correctly,
- *         without `exports` all files are available for imports
- *       - the same `main`/`module` pattern is used in the `package.json` of `kit-codemirror`
- */
-const transformerForEsmCjs = () => {
-    return {
-        sideEffects: false,
-        main: './index.cjs',
-        module: './index.js',
-        /*exports: {
-            types: './index.d.ts',
-            import: './index.js',
-            require: './index.cjs',
-        },*/
-        // this should be enough or even better, to force ESM instead of CJS fallbacks:
-        /*
-        sideEffects: false,
-        type: 'module',
-        main: './index.js',
-        types: './index.d.ts'
-        */
-    }
-}
+const babelTargetsCjsEsm = [
+    {
+        distSuffix: '',
+        args: [
+            '--env-name', 'cjs', '--no-comments', // '--copy-files', '--no-copy-ignored',
+            '--out-file-extension', '.cjs',
+            '--extensions', '.ts', '--extensions', '.tsx', '--extensions', '.js', '--extensions', '.jsx',
+            '--ignore', '**/*.d.ts',
+            '--ignore', '**/*.test.tsx', '--ignore', '**/*.test.ts', '--ignore', '**/*.test.js',
+            '--ignore', '**/*.mock.ts', '--ignore', '**/*.mock.js',
+        ],
+    },
+    {
+        distSuffix: '/esm',
+        // distSuffix: '', // for mjs it would need a distSuffix
+        args: [
+            // '--env-name', 'mjs',
+            // '--out-file-extension', '.mjs',
+            '--no-comments',
+            '--extensions', '.ts', '--extensions', '.tsx', '--extensions', '.js', '--extensions', '.jsx',
+            '--ignore', '**/*.d.ts',
+            '--ignore', '**/*.test.tsx', '--ignore', '**/*.test.ts', '--ignore', '**/*.test.js',
+            '--ignore', '**/*.mock.ts', '--ignore', '**/*.mock.js',
+        ],
+    },
+]
 
 packer({
     apps: {
@@ -113,7 +102,8 @@ packer({
             name: '@ui-schema/material-code',
             root: path.resolve(__dirname, 'packages', 'material-code'),
             entry: path.resolve(__dirname, 'packages', 'material-code/src/'),
-            babelTargets: babelTargetsLegacyCjsFirst,
+            babelTargets: babelTargetsCjsEsm,
+            // babelTargets: babelTargetsLegacyCjsFirst,
         },
     },
 }, __dirname, {
@@ -129,7 +119,8 @@ packer({
     },
     afterEsModules: (packages, pathBuild) => {
         return Promise.all([
-            makeModulePackageJson(transformerForEsmCjs)(packages, pathBuild),
+            // no longer needed for strict ESM
+            // makeModulePackageJson(transformerForEsmCjs)(packages, pathBuild),
             copyRootPackageJson()(packages, pathBuild),
         ]).then(() => undefined)
     },

Original file line number	Diff line number	Diff line change
`@@ -235,7 +235,7 @@ export default defineConfig([`
`235`	`235`	`{`
`236`	`236`	`files: [`
`237`	`237`	`'*/demo-server/.{ts,tsx,mjs,js}',`
`238`		`- 'packerConfig.js',`
	`238`	`+ 'packerConfig.{mjs,js}',`
`239`	`239`	`'jest.config.ts',`
`240`	`240`	`],`
`241`	`241`	`languageOptions: {`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-export * from './CodeBar'`
	`1`	`+export * from './CodeBar.js'`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-export * from './WidgetCode'`
	`1`	`+export * from './WidgetCode.js'`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-export * from './WidgetCodeSelectable'`
	`1`	`+export * from './WidgetCodeSelectable.js'`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-export * from './useEditorTheme'`
	`1`	`+export * from './useEditorTheme.js'`