feat: testing branch for ESM-only packages []

.storybook/main.ts

@@ -30,6 +30,18 @@ const config: StorybookConfig = {
   docs: {
     autodocs: false,
   },
+  webpackFinal: async (config) => {
+    const customConfig = { ...config };
+
+    if (!customConfig.resolve) {
+      customConfig.resolve = {};
+    }
+
+    customConfig.resolve.extensionAlias = {
+      '.js': ['.tsx', '.ts', '.js'],
+    };
+    return customConfig;
+  },
 };
 
 export default config;

.swcrc

@@ -12,7 +12,8 @@
     }
   },
   "module": {
-    "type": "es6"
+    "type": "es6",
+    "strict": false
   },
   "minify": false
 }

baseESMJestConfig.js

@@ -0,0 +1,29 @@
+/* eslint-disable */
+
+function getConfig(packageName) {
+  return {
+    testEnvironment: 'jsdom',
+    modulePathIgnorePatterns: ['<rootDir>/dist/'],
+    testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'],
+    extensionsToTreatAsEsm: ['.ts', '.tsx'],
+    moduleNameMapper: {
+      '^(\\.\\.?\\/.+)\\.js$': '$1',
+    },
+    transform: {
+      '^.+\\.tsx?$': ['@swc/jest'],
+    },
+    reporters: [
+      'default',
+      [
+        'jest-junit',
+        {
+          outputDirectory: '../../reports',
+          outputName: `${packageName}-results.xml`,
+          addFileAttribute: true,
+        },
+      ],
+    ],
+  };
+}
+
+module.exports = getConfig;

baseJestConfig.js

@@ -5,6 +5,10 @@ function getConfig(packageName) {
     testEnvironment: 'jsdom',
     modulePathIgnorePatterns: ['<rootDir>/dist/'],
     testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'],
+    // for esm imports with .js extensions
+    moduleNameMapper: {
+      '^(\\.\\.?\\/.+)\\.js$': '$1',
+    },
     reporters: [
       'default',
       [

packages/boolean/jest.config.js

@@ -1,10 +1,8 @@
-/* eslint-disable */
+import baseConfig from '../../baseESMJestConfig.js';
+import packageJSON from './package.json' assert { type: 'json' };
 
-const baseConfig = require('../../baseJestConfig');
+const packageName = packageJSON.name.split('@contentful/')[1];
 
-const package = require('./package.json');
-const packageName = package.name.split('@contentful/')[1];
-
-module.exports = {
+export default {
   ...baseConfig(packageName),
 };

packages/boolean/package.json

@@ -1,17 +1,9 @@
 {
   "name": "@contentful/field-editor-boolean",
   "version": "1.4.2",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "type": "module",
+  "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/types/index.d.ts",
-      "require": "./dist/cjs/index.js",
-      "default": "./dist/cjs/index.js"
-    },
-    "./package.json": "./package.json"
-  },
   "files": [
     "dist"
   ],
@@ -23,15 +15,13 @@
   },
   "scripts": {
     "watch": "yarn concurrently \"yarn:watch:*\"",
-    "watch:cjs": "yarn build:cjs -w",
     "watch:esm": "yarn build:esm -w",
     "watch:types": "yarn build:types --watch",
-    "build": "yarn build:types && yarn build:cjs && yarn build:esm",
+    "build": "yarn build:types && yarn build:esm",
     "build:types": "tsc --outDir dist/types --emitDeclarationOnly",
-    "build:cjs": "swc src --config-file ../../.swcrc -d dist/cjs -C module.type=commonjs",
     "build:esm": "swc src --config-file ../../.swcrc -d dist/esm",
     "test": "jest --watch",
-    "test:ci": "jest --ci",
+    "test:ci": "yarn node --experimental-vm-modules $(yarn bin jest --ci)",
     "tsc": "tsc -p ./ --noEmit"
   },
   "dependencies": {

packages/boolean/src/Boolean.spec.tsx

@@ -4,7 +4,7 @@ import { createFakeFieldAPI } from '@contentful/field-editor-test-utils';
 import '@testing-library/jest-dom/extend-expect';
 import { cleanup, configure, fireEvent, render } from '@testing-library/react';
 
-import { BooleanEditor } from './BooleanEditor';
+import { BooleanEditor } from './BooleanEditor.js';
 
 configure({
   testIdAttribute: 'data-test-id',

packages/boolean/src/BooleanEditor.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { TextLink, Flex, Radio } from '@contentful/f36-components';
 import { FieldAPI, ParametersAPI, FieldConnector } from '@contentful/field-editor-shared';
-import get from 'lodash/get';
+import get from 'lodash-es/get.js';
 import { nanoid } from 'nanoid';
 
 export interface BooleanEditorProps {

packages/boolean/src/index.tsx

@@ -1 +1 @@
-export { BooleanEditor } from './BooleanEditor';
+export { BooleanEditor } from './BooleanEditor.js';

packages/boolean/tsconfig.json

@@ -2,9 +2,8 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "types"],
   "compilerOptions": {
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "moduleResolution": "bundler",
+    "module": "Node16",
+    "moduleResolution": "Node16",
     "lib": ["dom", "esnext"],
     "rootDir": "./src",
     "baseUrl": "./",

packages/json/jest.config.js

@@ -1,10 +1,9 @@
 /* eslint-disable */
+const baseConfig = require('../../baseESMJestConfig.js');
 
-const baseConfig = require('../../baseJestConfig');
+const packageJSON = require('./package.json');
+const packageName = packageJSON.name.split('@contentful/')[1];
 
-const package = require('./package.json');
-const packageName = package.name.split('@contentful/')[1];
-
-module.exports = {
+export default {
   ...baseConfig(packageName),
 };

packages/json/package.json

@@ -1,17 +1,9 @@
 {
   "name": "@contentful/field-editor-json",
   "version": "3.3.6",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "type": "module",
+  "main": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/types/index.d.ts",
-      "require": "./dist/cjs/index.js",
-      "default": "./dist/esm/index.js"
-    },
-    "./package.json": "./package.json"
-  },
   "files": [
     "dist"
   ],
@@ -23,12 +15,10 @@
   },
   "scripts": {
     "watch": "yarn concurrently \"yarn:watch:*\"",
-    "watch:cjs": "yarn build:cjs -w",
     "watch:esm": "yarn build:esm -w",
     "watch:types": "yarn build:types --watch",
-    "build": "yarn build:types && yarn build:cjs && yarn build:esm",
+    "build": "yarn build:types && yarn build:esm",
     "build:types": "tsc --outDir dist/types --emitDeclarationOnly",
-    "build:cjs": "swc src --config-file ../../.swcrc -d dist/cjs -C module.type=commonjs",
     "build:esm": "swc src --config-file ../../.swcrc -d dist/esm",
     "tsc": "tsc -p ./ --noEmit"
   },
@@ -38,13 +28,14 @@
     "@contentful/f36-tokens": "^4.0.0",
     "@contentful/field-editor-shared": "^1.4.2",
     "@types/deep-equal": "1.0.1",
-    "@types/react-codemirror": "1.0.3",
-    "@uiw/react-codemirror": "^4.11.4",
+    "@types/react-codemirror": "1.0.10",
+    "@uiw/react-codemirror": "^4.21.20",
     "deep-equal": "2.2.2",
     "emotion": "^10.0.17",
     "lodash": "^4.17.15"
   },
   "devDependencies": {
+    "@types/lodash-es": "4.17.9",
     "@contentful/field-editor-test-utils": "^1.4.3"
   },
   "peerDependencies": {

packages/json/src/JsonEditor.tsx

@@ -2,13 +2,13 @@ import * as React from 'react';
 
 import { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';
 import deepEqual from 'deep-equal';
-import throttle from 'lodash/throttle';
+import throttle from 'lodash-es/throttle.js';
 
-import { JsonEditorField } from './JsonEditorField';
-import { JsonEditorToolbar } from './JsonEditorToolbar';
-import { JsonInvalidStatus } from './JsonInvalidStatus';
-import { JSONObject } from './types';
-import { stringifyJSON, parseJSON, SPACE_INDENT_COUNT } from './utils';
+import { JsonEditorField } from './JsonEditorField.js';
+import { JsonEditorToolbar } from './JsonEditorToolbar.js';
+import { JsonInvalidStatus } from './JsonInvalidStatus.js';
+import { JSONObject } from './types.js';
+import { stringifyJSON, parseJSON, SPACE_INDENT_COUNT } from './utils.js';
 
 export interface JsonEditorProps {
   /**

packages/json/src/JsonEditorField.tsx

@@ -4,10 +4,10 @@ import { json } from '@codemirror/lang-json';
 import { indentUnit } from '@codemirror/language';
 import { EditorView } from '@codemirror/view';
 import tokens from '@contentful/f36-tokens';
-import CodeMirror from '@uiw/react-codemirror';
+import CodeMirror from '@uiw/react-codemirror/esm/index.js';
 import { css, cx } from 'emotion';
 
-import { SPACE_INDENT_COUNT } from './utils';
+import { SPACE_INDENT_COUNT } from './utils.js';
 
 type JsonEditorFieldProps = {
   isDisabled: boolean;
@@ -60,6 +60,7 @@ export function JsonEditorField(props: JsonEditorFieldProps) {
       className={cx(styles.root, { disabled: props.isDisabled })}
       data-test-id="json-editor-code-mirror"
     >
+      {/* @ts-expect-error */}
       <CodeMirror
         value={props.value}
         onChange={props.onChange}

packages/json/src/index.tsx

@@ -1,3 +1,3 @@
-import JsonEditor from './JsonEditor';
+import JsonEditor from './JsonEditor.js';
 
 export { JsonEditor };

packages/json/src/utils.ts

@@ -1,4 +1,4 @@
-import { JSONObject } from './types';
+import { JSONObject } from './types.js';
 
 export const SPACE_INDENT_COUNT = 4;
 

packages/json/tsconfig.json

@@ -2,8 +2,8 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "types"],
   "compilerOptions": {
-    "module": "esnext",
-    "moduleResolution": "bundler",
+    "module": "Node16",
+    "moduleResolution": "Node16",
     "lib": ["dom", "esnext"],
     "rootDir": "./src",
     "baseUrl": "./",

yarn.lock

@@ -7700,6 +7700,18 @@
   dependencies:
     "@types/node" "*"
 
+"@types/lodash-es@4.17.9":
+  version "4.17.9"
+  resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.9.tgz#49dbe5112e23c54f2b387d860b7d03028ce170c2"
+  integrity sha512-ZTcmhiI3NNU7dEvWLZJkzG6ao49zOIjEgIE0RgV7wbPxU0f2xT3VSAHw2gmst8swH6V0YkLRGp4qPlX/6I90MQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.200"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.200.tgz#435b6035c7eba9cdf1e039af8212c9e9281e7149"
+  integrity sha512-YI/M/4HRImtNf3pJgbF+W6FrXovqj+T+/HpENLTooK9PnkacBsDpeP3IpHab40CClUfhNmdM2WTNP2sa2dni5Q==
+
 "@types/lodash@4.14.168":
   version "4.14.168"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008"
@@ -7854,10 +7866,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-codemirror@1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@types/react-codemirror/-/react-codemirror-1.0.3.tgz#5b0e4d5529a6bc934e992c49f3d1fa77daacc59b"
-  integrity sha512-EAyys2Wpys7bJatgnfpXXs4Gi1Vktj23mNngG4Ex2Q0W6eVgfkP4GP7qHyDVU2wbW3T0K7Jqatf2dCob25ptMw==
+"@types/react-codemirror@1.0.10":
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/@types/react-codemirror/-/react-codemirror-1.0.10.tgz#980fe0d560a00874edef45e36ab8b1de35ee6df9"
+  integrity sha512-0QfiTtSnGHuiyfd3NBPOqJGaeBIntl975In/Iv5FLwvVpcheEFBb/QZSPvR0MGb2TFJYuHa5tJrRfrBKxk+dGg==
   dependencies:
     "@types/codemirror" "*"
     "@types/react" "*"
@@ -8641,10 +8653,10 @@
     immer "^9.0.6"
     react-tracked "^1.7.9"
 
-"@uiw/codemirror-extensions-basic-setup@4.20.2":
-  version "4.20.2"
-  resolved "https://registry.yarnpkg.com/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.20.2.tgz#25c098c9984403955498d996435c43941507a039"
-  integrity sha512-8oF7ICSEoJVjn9MNKLsY5BaxGsFS/Qh8AMHa/0hZP1fExeI+LKhaaSfHbdRk8RpYE5Ffjtx+tBQfh22YBiv5dQ==
+"@uiw/codemirror-extensions-basic-setup@4.21.20":
+  version "4.21.20"
+  resolved "https://registry.yarnpkg.com/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.21.20.tgz#9dbfab401a3168312c3f1d908b0f9b280410c206"
+  integrity sha512-Wyi9q4uw0xGYd/tJ6bULG7tkCLqcUsQT0AQBfCDtnkV3LdiLU0LceTrzJoHJyIKSHsKDJxFQxa1qg3QLt4gIUA==
   dependencies:
     "@codemirror/autocomplete" "^6.0.0"
     "@codemirror/commands" "^6.0.0"
@@ -8654,16 +8666,16 @@
     "@codemirror/state" "^6.0.0"
     "@codemirror/view" "^6.0.0"
 
-"@uiw/react-codemirror@^4.11.4":
-  version "4.20.2"
-  resolved "https://registry.yarnpkg.com/@uiw/react-codemirror/-/react-codemirror-4.20.2.tgz#e429821b0c5fb572e50ab38329086a79cd7f908f"
-  integrity sha512-Rf6i9HgtNnYAVRBb1gfWlhiiOBrEPuIfHLn87cV9XPpjP+YtqZoP6VMMlMq4XFTbZ/E1GIxnSUgJMQToTth0iw==
+"@uiw/react-codemirror@^4.21.20":
+  version "4.21.20"
+  resolved "https://registry.yarnpkg.com/@uiw/react-codemirror/-/react-codemirror-4.21.20.tgz#bbfb57676c9939d880de6c7223c2ed7410271145"
+  integrity sha512-PdyewPvNXnvT3JHj888yjpbWsAGw5qlxW6w1sMdsqJ0R6vPV++ob1iZXCGrM1FVpbqPK0DNfpXvjzp2gIr3lYw==
   dependencies:
     "@babel/runtime" "^7.18.6"
     "@codemirror/commands" "^6.1.0"
     "@codemirror/state" "^6.1.1"
     "@codemirror/theme-one-dark" "^6.0.0"
-    "@uiw/codemirror-extensions-basic-setup" "4.20.2"
+    "@uiw/codemirror-extensions-basic-setup" "4.21.20"
     codemirror "^6.0.0"
 
 "@ungap/promise-all-settled@1.1.2":