diff --git a/.storybook/main.ts b/.storybook/main.ts index b8dd82a7d..91403dfc0 100644 --- a/.storybook/main.ts +++ b/.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; diff --git a/.swcrc b/.swcrc index f9dfcd0d7..c30ce55f3 100644 --- a/.swcrc +++ b/.swcrc @@ -12,7 +12,8 @@ } }, "module": { - "type": "es6" + "type": "es6", + "strict": false }, "minify": false } diff --git a/baseJestConfig.es.js b/baseJestConfig.es.js new file mode 100644 index 000000000..ff3c0f6f8 --- /dev/null +++ b/baseJestConfig.es.js @@ -0,0 +1,29 @@ +/* eslint-disable */ + +function getConfig(packageName) { + return { + testEnvironment: 'jsdom', + modulePathIgnorePatterns: ['/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; diff --git a/baseJestConfig.js b/baseJestConfig.js index 1fbf26495..9be26d608 100644 --- a/baseJestConfig.js +++ b/baseJestConfig.js @@ -5,6 +5,10 @@ function getConfig(packageName) { testEnvironment: 'jsdom', modulePathIgnorePatterns: ['/dist/'], testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'], + // for esm imports with .js extensions + moduleNameMapper: { + '^(\\.\\.?\\/.+)\\.js$': '$1', + }, reporters: [ 'default', [ diff --git a/packages/default-field-editors/.eslintrc.js b/packages/default-field-editors/.eslintrc.cjs similarity index 100% rename from packages/default-field-editors/.eslintrc.js rename to packages/default-field-editors/.eslintrc.cjs diff --git a/packages/default-field-editors/jest.config.js b/packages/default-field-editors/jest.config.cjs similarity index 90% rename from packages/default-field-editors/jest.config.js rename to packages/default-field-editors/jest.config.cjs index d174cf263..29831ff5c 100644 --- a/packages/default-field-editors/jest.config.js +++ b/packages/default-field-editors/jest.config.cjs @@ -9,6 +9,7 @@ module.exports = { ...baseConfig(packageName), transformIgnorePatterns: [`/../../node_modules/(?!nanoid|rehype-raw)`], moduleNameMapper: { + ...baseConfig(packageName).moduleNameMapper, '^.+\\.css$': '/src/__mocks__/styles.ts', 'react-markdown': '/../../node_modules/react-markdown/react-markdown.min.js', }, diff --git a/packages/default-field-editors/package.json b/packages/default-field-editors/package.json index bedc3c16a..ea98e357b 100644 --- a/packages/default-field-editors/package.json +++ b/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", diff --git a/packages/default-field-editors/src/Field.spec.tsx b/packages/default-field-editors/src/Field.spec.tsx index 896778cef..f37ae0152 100644 --- a/packages/default-field-editors/src/Field.spec.tsx +++ b/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', diff --git a/packages/default-field-editors/src/Field.tsx b/packages/default-field-editors/src/Field.tsx index e4eafeba5..d024f4f0e 100644 --- a/packages/default-field-editors/src/Field.tsx +++ b/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; diff --git a/packages/default-field-editors/src/FieldWrapper.spec.tsx b/packages/default-field-editors/src/FieldWrapper.spec.tsx index 303354f32..cfb390e75 100644 --- a/packages/default-field-editors/src/FieldWrapper.spec.tsx +++ b/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={() =>
custom label
} - > + renderHeading={() =>
custom label
}>
children
); @@ -66,8 +65,7 @@ describe('Field', () => { name="field" sdk={sdk} getEntryURL={getEntryURL} - renderHelpText={() =>
custom hint
} - > + renderHelpText={() =>
custom hint
}>
children
); diff --git a/packages/default-field-editors/src/FieldWrapper.tsx b/packages/default-field-editors/src/FieldWrapper.tsx index 577a0409f..285abded7 100644 --- a/packages/default-field-editors/src/FieldWrapper.tsx +++ b/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 = 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) ) : ( diff --git a/packages/default-field-editors/src/getDefaultWidgetId.ts b/packages/default-field-editors/src/getDefaultWidgetId.ts index d6d6c49ff..ca649afe7 100644 --- a/packages/default-field-editors/src/getDefaultWidgetId.ts +++ b/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): WidgetType { const field = sdk.field; diff --git a/packages/default-field-editors/src/index.tsx b/packages/default-field-editors/src/index.tsx index 76f66de6e..8c729ce73 100644 --- a/packages/default-field-editors/src/index.tsx +++ b/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'; diff --git a/packages/default-field-editors/tsconfig.json b/packages/default-field-editors/tsconfig.json index dd2fdf530..c5eb62a8e 100644 --- a/packages/default-field-editors/tsconfig.json +++ b/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": "./", diff --git a/packages/json/.eslintrc.js b/packages/json/.eslintrc.cjs similarity index 100% rename from packages/json/.eslintrc.js rename to packages/json/.eslintrc.cjs diff --git a/packages/json/jest.config.js b/packages/json/jest.config.cjs similarity index 100% rename from packages/json/jest.config.js rename to packages/json/jest.config.cjs diff --git a/packages/json/package.json b/packages/json/package.json index b467a0083..ea6c4913b 100644 --- a/packages/json/package.json +++ b/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": { diff --git a/packages/json/src/JsonEditor.tsx b/packages/json/src/JsonEditor.tsx index e1fdfa27a..7b1622009 100644 --- a/packages/json/src/JsonEditor.tsx +++ b/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 ( + data-test-id="json-editor-code-mirror"> + {/* @ts-expect-error */}