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

.swcrc

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

packages/default-field-editors/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@contentful/default-field-editors",
   "version": "1.5.7",
-  "main": "dist/cjs/index.js",
+  "type": "module",
+  "main": "dist/esm/index.js",
   "module": "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"
+      "import": "./dist/esm/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -23,10 +24,10 @@
   },
   "scripts": {
     "watch": "yarn concurrently \"yarn:watch:*\"",
-    "watch:cjs": "yarn build:cjs -w",
     "watch:esm": "yarn build:esm -w",
+    "watch:cjs": "yarn build:cjs -w",
     "watch:types": "yarn build:types --watch",
-    "build": "yarn build:types && yarn build:cjs && yarn build:esm",
+    "build": "yarn build:types && yarn build:esm && yarn build:cjs",
     "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",

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: FieldExtensionSDK;

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 { FieldExtensionSDK, 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;

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

@@ -1,7 +1,7 @@
 import type { FieldExtensionSDK } 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<FieldExtensionSDK, 'field' | 'contentType'>

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

@@ -4,7 +4,6 @@
   "compilerOptions": {
     "module": "esnext",
     "moduleResolution": "bundler",
-    "moduleResolution": "bundler",
     "lib": ["dom", "esnext"],
     "rootDir": "./src",
     "baseUrl": "./",

packages/json/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@contentful/field-editor-json",
   "version": "3.3.4",
-  "main": "dist/cjs/index.js",
+  "type": "module",
+  "main": "dist/esm/index.js",
   "module": "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"
+      "import": "./dist/esm/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -23,10 +24,10 @@
   },
   "scripts": {
     "watch": "yarn concurrently \"yarn:watch:*\"",
-    "watch:cjs": "yarn build:cjs -w",
     "watch:esm": "yarn build:esm -w",
+    "watch:cjs": "yarn build:cjs -w",
     "watch:types": "yarn build:types --watch",
-    "build": "yarn build:types && yarn build:cjs && yarn build:esm",
+    "build": "yarn build:types && yarn build:esm && yarn build:cjs",
     "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",
@@ -45,6 +46,7 @@
     "lodash": "^4.17.15"
   },
   "devDependencies": {
+    "@types/lodash-es": "4.17.9",
     "@contentful/field-editor-test-utils": "^1.4.1"
   },
   "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

@@ -7,7 +7,7 @@ import tokens from '@contentful/f36-tokens';
 import CodeMirror from '@uiw/react-codemirror';
 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,7 @@ 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">
       <CodeMirror
         value={props.value}
         onChange={props.onChange}

packages/json/src/index.tsx

@@ -1,3 +1,7 @@
-import JsonEditor from './JsonEditor';
+import JsonEditor from './JsonEditor.js';
 
 export { JsonEditor };
+
+export const TestFunction = () => {
+  console.log('hello');
+};

packages/json/src/utils.ts

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