spike: default field editors and json editor esm only []

.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
 }

baseJestConfig.es.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/default-field-editors/jest.config.js → packages/default-field-editors/jest.config.cjs

@@ -9,6 +9,7 @@ module.exports = {
   ...baseConfig(packageName),
   transformIgnorePatterns: [`<rootDir>/../../node_modules/(?!nanoid|rehype-raw)`],
   moduleNameMapper: {
+    ...baseConfig(packageName).moduleNameMapper,
     '^.+\\.css$': '<rootDir>/src/__mocks__/styles.ts',
     'react-markdown': '<rootDir>/../../node_modules/react-markdown/react-markdown.min.js',
   },

packages/default-field-editors/package.json

@@ -1,17 +1,9 @@
 {
   "name": "@contentful/default-field-editors",
   "version": "1.5.17",
-  "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/cjs/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",
     "test": "jest --watch",
     "test:ci": "jest --ci",

packages/default-field-editors/src/Field.spec.tsx

@@ -6,7 +6,7 @@ import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-edit
 import '@testing-library/jest-dom/extend-expect';
 import { cleanup, configure, render } from '@testing-library/react';
 
-import { Field } from './Field';
+import { Field } from './Field.js';
 
 configure({
   testIdAttribute: 'data-test-id',

packages/default-field-editors/src/Field.tsx

@@ -25,8 +25,8 @@ import { SlugEditor } from '@contentful/field-editor-slug';
 import { TagsEditor } from '@contentful/field-editor-tags';
 import { UrlEditor } from '@contentful/field-editor-url';
 
-import { getDefaultWidgetId } from './getDefaultWidgetId';
-import type { EditorOptions, WidgetType } from './types';
+import { getDefaultWidgetId } from './getDefaultWidgetId.js';
+import type { EditorOptions, WidgetType } from './types.js';
 
 type FieldProps = {
   sdk: FieldAppSDK;

packages/default-field-editors/src/FieldWrapper.spec.tsx

@@ -5,7 +5,7 @@ import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-edit
 import '@testing-library/jest-dom/extend-expect';
 import { act, cleanup, configure, render } from '@testing-library/react';
 
-import { FieldWrapper } from './FieldWrapper';
+import { FieldWrapper } from './FieldWrapper.js';
 
 configure({
   testIdAttribute: 'data-test-id',
@@ -52,8 +52,7 @@ describe('Field', () => {
         name="field"
         sdk={sdk}
         getEntryURL={getEntryURL}
-        renderHeading={() => <div data-test-id="custom-label">custom label</div>}
-      >
+        renderHeading={() => <div data-test-id="custom-label">custom label</div>}>
         <div>children</div>
       </FieldWrapper>
     );
@@ -66,8 +65,7 @@ describe('Field', () => {
         name="field"
         sdk={sdk}
         getEntryURL={getEntryURL}
-        renderHelpText={() => <div data-test-id="custom-hint">custom hint</div>}
-      >
+        renderHelpText={() => <div data-test-id="custom-hint">custom hint</div>}>
         <div>children</div>
       </FieldWrapper>
     );

packages/default-field-editors/src/FieldWrapper.tsx

@@ -5,7 +5,7 @@ import type { FieldAppSDK, Entry } from '@contentful/field-editor-shared';
 import { ValidationErrors } from '@contentful/field-editor-validation-errors';
 import { cx } from 'emotion';
 
-import { styles } from './FieldWrapper.styles';
+import { styles } from './FieldWrapper.styles.js';
 
 type FieldWrapperProps = {
   name: string;
@@ -58,8 +58,7 @@ export const FieldWrapper: React.FC<FieldWrapperProps> = function (props: FieldW
       data-test-id="entity-field-controls"
       className={cx(showFocusBar && styles.withFocusBar, className)}
       aria-invalid={hasErrors}
-      isRequired={field.required}
-    >
+      isRequired={field.required}>
       {renderHeading ? (
         renderHeading(name)
       ) : (

packages/default-field-editors/src/getDefaultWidgetId.ts

@@ -1,7 +1,7 @@
 import type { FieldAppSDK } from '@contentful/field-editor-shared';
 import { editorInterfaceDefaults } from 'contentful-management';
 
-import type { WidgetType } from './types';
+import type { WidgetType } from './types.js';
 
 export function getDefaultWidgetId(sdk: Pick<FieldAppSDK, 'field' | 'contentType'>): WidgetType {
   const field = sdk.field;

packages/default-field-editors/src/index.tsx

@@ -1,4 +1,4 @@
-export { Field } from './Field';
-export { FieldWrapper } from './FieldWrapper';
-export type { WidgetType, EditorOptions } from './types';
-export { getDefaultWidgetId } from './getDefaultWidgetId';
+export { Field } from './Field.js';
+export { FieldWrapper } from './FieldWrapper.js';
+export type { WidgetType, EditorOptions } from './types.js';
+export { getDefaultWidgetId } from './getDefaultWidgetId.js';

packages/default-field-editors/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/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 {
   /**
@@ -168,8 +168,7 @@ export default function JsonEditor(props: JsonEditorProps) {
       isInitiallyDisabled={props.isInitiallyDisabled}
       isEqualValues={(value1, value2) => {
         return deepEqual(value1, value2);
-      }}
-    >
+      }}>
       {({ value, disabled, setValue, externalReset }) => {
         return (
           <ConnectedJsonEditor

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;
@@ -58,8 +58,8 @@ export function JsonEditorField(props: JsonEditorFieldProps) {
   return (
     <div
       className={cx(styles.root, { disabled: props.isDisabled })}
-      data-test-id="json-editor-code-mirror"
-    >
+      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": "./",