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/_shared/jest.config.js

@@ -1,10 +1,9 @@
 /* eslint-disable */
+import baseConfig from '../../baseESMJestConfig.js';
 
-const baseConfig = require('../../baseJestConfig');
+import packageJson from './package.json' assert { type: '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/_shared/package.json

@@ -1,17 +1,9 @@
 {
   "name": "@contentful/field-editor-shared",
   "version": "1.4.2",
-  "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,26 +15,26 @@
   },
   "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"
   },
   "devDependencies": {
     "@contentful/app-sdk": "^4.17.1",
-    "@contentful/field-editor-test-utils": "^1.4.3"
+    "@contentful/field-editor-test-utils": "^1.4.3",
+    "@types/lodash-es": "4.17.9",
+    "@jest/globals": "29.7.0"
   },
   "dependencies": {
     "@contentful/f36-note": "^4.2.8",
     "@contentful/f36-tokens": "^4.0.0",
     "emotion": "^10.0.17",
-    "lodash": "^4.17.15"
+    "lodash-es": "4.17.21"
   },
   "peerDependencies": {
     "@contentful/app-sdk": "^4.17.1",

packages/_shared/src/CharValidation.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { ValidationType } from './types';
+import { ValidationType } from './types.js';
 
 interface CharValidationProps {
   constraints: ValidationType;

packages/_shared/src/FieldConnector.test.tsx

@@ -1,16 +1,18 @@
 import * as React from 'react';
 
 import { createFakeFieldAPI } from '@contentful/field-editor-test-utils';
+import { jest } from '@jest/globals';
 import { render } from '@testing-library/react';
-import noop from 'lodash/noop';
+import { noop } from 'lodash-es';
 
-import { FieldConnector, FieldConnectorChildProps } from './FieldConnector';
+import { FieldConnector, FieldConnectorChildProps } from './FieldConnector.js';
 
 it('does not rerender with outdated value after calling setValue', () => {
+  noop();
+  expect(true).toBe(true);
   function getChild(): FieldConnectorChildProps<any> {
-    return props.children.mock.calls[props.children.mock.calls.length - 1][0];
+    return props.children.mock.calls[props.children.mock.calls.length - 1][0] as any;
   }
-
   const onSchemaErrorsChanged = jest.fn();
   const [field] = createFakeFieldAPI((field: any) => {
     return {
@@ -20,27 +22,20 @@ it('does not rerender with outdated value after calling setValue', () => {
       onSchemaErrorsChanged,
     };
   }, 'initial value');
-
   const props = {
     isInitiallyDisabled: false,
     children: jest.fn().mockImplementation(() => null),
     field,
     debounce: 0,
   };
-
   render(<FieldConnector {...props} />);
-
   let child = getChild();
   expect(child.value).toBe('initial value');
   const initialRenderCount = props.children.mock.calls.length;
-
   child.setValue('new value');
-
-  onSchemaErrorsChanged.mock.calls.forEach(([cb]) => cb([]));
-
+  onSchemaErrorsChanged.mock.calls.forEach(([cb]) => (cb as any)([]));
   child = getChild();
   expect(child.value).toBe('new value');
-
   // to ensure that there was actually a rerender after calling `setValue` as we want to test that we don't rerender with outdated data
   expect(props.children.mock.calls.length).toBeGreaterThan(initialRenderCount);
 });

packages/_shared/src/FieldConnector.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
 import { FieldAPI, ValidationError } from '@contentful/app-sdk';
-import debounce from 'lodash/debounce';
-import isEqual from 'lodash/isEqual';
+import { debounce } from 'lodash-es';
+import { isEqual } from 'lodash-es';
 
 type Nullable = null | undefined;
 

packages/_shared/src/ModalDialogLauncher.tsx

@@ -4,8 +4,8 @@ import * as React from 'react';
 import ReactDOM from 'react-dom';
 
 import { OpenCustomWidgetOptions } from '@contentful/app-sdk';
-import { Modal, ModalHeader } from '@contentful/f36-components';
-import isNumber from 'lodash/isNumber';
+import { Modal, ModalHeader } from '@contentful/f36-modal';
+import isNumber from 'lodash-es/isNumber.js';
 
 export function open(componentRenderer: (params: { onClose: Function; isShown: boolean }) => any) {
   let rootDom: any = null;

packages/_shared/src/index.tsx

@@ -1,4 +1,4 @@
-export {
+export type {
   AccessAPI,
   AppConfigAPI,
   BaseAppSDK,
@@ -18,18 +18,19 @@ export {
   SpaceAPI,
   WindowAPI,
 } from '@contentful/app-sdk';
-export { CharCounter } from './CharCounter';
-export { CharValidation } from './CharValidation';
-export { FieldConnector } from './FieldConnector';
-export type { FieldConnectorChildProps } from './FieldConnector';
-export { PredefinedValuesError } from './PredefinedValuesError';
-export { Asset, Entry, File } from './typesEntity';
-export { isValidImage } from './utils/isValidImage';
-export { shortenStorageUnit, toLocaleString } from './utils/shortenStorageUnit';
+
+export { CharCounter } from './CharCounter.js';
+export { CharValidation } from './CharValidation.js';
+export { FieldConnector } from './FieldConnector.js';
+export type { FieldConnectorChildProps } from './FieldConnector.js';
+export { PredefinedValuesError } from './PredefinedValuesError.js';
+export type { Asset, Entry, File } from './typesEntity.js';
+export { isValidImage } from './utils/isValidImage.js';
+export { shortenStorageUnit, toLocaleString } from './utils/shortenStorageUnit.js';
 export { ModalDialogLauncher };
 export { entityHelpers };
 export { ConstraintsUtils };
 
-import * as ModalDialogLauncher from './ModalDialogLauncher';
-import * as ConstraintsUtils from './utils/constraints';
-import * as entityHelpers from './utils/entityHelpers';
+import * as ModalDialogLauncher from './ModalDialogLauncher.js';
+import * as ConstraintsUtils from './utils/constraints.js';
+import * as entityHelpers from './utils/entityHelpers.js';

packages/_shared/src/typesEntity.ts

@@ -1,4 +1,11 @@
-export { BaseAppSDK, ContentType, ContentTypeField, Link, Entry, Asset } from '@contentful/app-sdk';
+export type {
+  BaseAppSDK,
+  ContentType,
+  ContentTypeField,
+  Link,
+  Entry,
+  Asset,
+} from '@contentful/app-sdk';
 
 export interface File {
   fileName: string;

packages/_shared/src/utils/constraints.ts

@@ -5,9 +5,9 @@
  * values against that constraint.
  */
 
-import isNumber from 'lodash/isNumber';
+import isNumber from 'lodash-es/isNumber.js';
 
-import { ValidationType } from '../types';
+import { ValidationType } from '../types.js';
 
 export function fromFieldValidations(
   validations: Record<string, any>[] = [],

packages/_shared/src/utils/entityHelpers.ts

@@ -1,8 +1,8 @@
-import get from 'lodash/get';
-import isObject from 'lodash/isObject';
-import isString from 'lodash/isString';
+import get from 'lodash-es/get.js';
+import isObject from 'lodash-es/isObject.js';
+import isString from 'lodash-es/isString.js';
 
-import { Asset, ContentType, ContentTypeField, Entry, File } from '../typesEntity';
+import { Asset, ContentType, ContentTypeField, Entry, File } from '../typesEntity.js';
 
 function titleOrDefault(title: string | undefined, defaultTitle: string): string {
   if (!isString(title)) {

packages/_shared/src/utils/isValidImage.ts

@@ -1,4 +1,4 @@
-import { File } from '../typesEntity';
+import { File } from '../typesEntity.js';
 
 /**
  * Checks whether the passed content type matches one of our valid MIME types

packages/_shared/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/_test/jest.config.js

@@ -1,10 +1,9 @@
 /* eslint-disable */
+import baseConfig from '../../baseESMJestConfig.js';
 
-const baseConfig = require('../../baseJestConfig');
+import packageJson from './package.json' assert { type: '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/_test/package.json

@@ -1,17 +1,9 @@
 {
   "name": "@contentful/field-editor-test-utils",
   "version": "1.4.3",
-  "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/_test/src/createFakeFieldAPI.test.ts

@@ -1,4 +1,4 @@
-import { createFakeFieldAPI } from './createFakeFieldAPI';
+import { createFakeFieldAPI } from './createFakeFieldAPI.js';
 
 describe('createFakeFieldAPI', () => {
   it('exposes all methods', () => {

packages/_test/src/createFakeFieldAPI.ts

@@ -12,6 +12,7 @@ export function createFakeFieldAPI<T>(
   customizeMock: CustomizeMockFn = identity,
   initialValue?: T
 ): [FieldAPI, Emitter] {
+  // @ts-expect-error -- TODO: describe this error
   const emitter: Emitter = mitt();
 
   // eslint-disable-next-line -- TODO: describe this disable

packages/_test/src/createFakeSpaceAPI.ts

@@ -1,6 +1,6 @@
 import { ContentType, SearchQuery, SpaceAPI, Entry } from '@contentful/app-sdk';
 
-import { createEntry } from './fakesFactory';
+import { createEntry } from './fakesFactory.js';
 
 function identity<T>(item: T): T {
   return item;

packages/_test/src/index.ts

@@ -1,6 +1,6 @@
-export { createFakeCMAAdapter } from './createFakeCMAAdapter';
-export { createFakeFieldAPI } from './createFakeFieldAPI';
-export { createFakeLocalesAPI } from './createFakeLocalesAPI';
-export { createFakeSpaceAPI } from './createFakeSpaceAPI';
-export { createFakeNavigatorAPI } from './createFakeNavigatorAPI';
-export { ActionsPlayground } from './ActionsPlayground';
+export { createFakeCMAAdapter } from './createFakeCMAAdapter.js';
+export { createFakeFieldAPI } from './createFakeFieldAPI.js';
+export { createFakeLocalesAPI } from './createFakeLocalesAPI.js';
+export { createFakeSpaceAPI } from './createFakeSpaceAPI.js';
+export { createFakeNavigatorAPI } from './createFakeNavigatorAPI.js';
+export { ActionsPlayground } from './ActionsPlayground.js';