Feat/esm only reference

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-es';
-import { isEqual } from 'lodash-es';
+import debounce from 'lodash-es/debounce.js';
+import isEqual from 'lodash-es/isEqual.js';
 
 type Nullable = null | undefined;
 

packages/_shared/src/index.tsx

@@ -24,7 +24,7 @@ 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 { Asset, Entry } from './typesEntity.js';
 export { isValidImage } from './utils/isValidImage.js';
 export { shortenStorageUnit, toLocaleString } from './utils/shortenStorageUnit.js';
 export { ModalDialogLauncher };
@@ -34,3 +34,12 @@ export { ConstraintsUtils };
 import * as ModalDialogLauncher from './ModalDialogLauncher.js';
 import * as ConstraintsUtils from './utils/constraints.js';
 import * as entityHelpers from './utils/entityHelpers.js';
+
+export interface File {
+  fileName: string;
+  contentType: string;
+  upload?: string;
+  url?: string;
+  details?: Record<string, any>;
+  uploadFrom?: Record<string, any>;
+}

packages/_shared/src/typesEntity.ts

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

packages/reference/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/reference/package.json

@@ -1,17 +1,9 @@
 {
   "name": "@contentful/field-editor-reference",
   "version": "5.19.0",
-  "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,16 +15,15 @@
   },
   "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",
-    "tsc": "tsc -p ./ --noEmit"
+    "test:ci": "yarn node --experimental-vm-modules $(yarn bin jest --ci)",
+    "tsc": "tsc -p ./ --noEmit",
+    "prepare": "relative-deps"
   },
   "dependencies": {
     "@contentful/f36-components": "^4.0.27",
@@ -45,23 +36,27 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@tanstack/react-query": "^4.3.9",
     "@types/deep-equal": "^1.0.1",
-    "constate": "3.2.0",
+    "constate": "3.3.2",
     "contentful-management": "^10.14.0",
     "deep-equal": "2.2.2",
     "emotion": "^10.0.17",
     "lodash": "^4.17.15",
     "moment": "^2.20.0",
-    "p-queue": "^4.0.0",
+    "p-queue": "^7.4.1",
     "react-intersection-observer": "9.4.0",
     "type-fest": "2.17.0"
   },
   "devDependencies": {
     "@contentful/app-sdk": "^4.17.1",
     "@contentful/field-editor-test-utils": "^1.4.3",
+    "@jest/globals": "29.7.0",
     "@testing-library/react-hooks": "^5.0.3"
   },
   "peerDependencies": {
     "@contentful/app-sdk": "^4.17.1",
     "react": ">=16.8.0"
+  },
+  "relativeDependencies": {
+    "@contentful/field-editor-shared": "../_shared"
   }
-}
+}

packages/reference/src/__fixtures__/FakeSdk.ts

@@ -8,7 +8,7 @@ import {
 import { CollectionProp, GetSpaceParams, LocaleProps } from 'contentful-management';
 import { Emitter } from 'mitt';
 
-import { assets, contentTypes, entries, locales as localesFixtures, spaces } from './fixtures';
+import { assets, contentTypes, entries, locales as localesFixtures, spaces } from './fixtures.js';
 
 const newLink = (linkType: string, id: string): Link => ({
   sys: {

packages/reference/src/__fixtures__/fixtures.ts

@@ -1,7 +1,7 @@
-import * as assets from './asset';
-import * as contentTypes from './content-type';
-import * as entries from './entry';
-import * as locales from './locale';
-import * as spaces from './space';
+import * as assets from './asset/index.js';
+import * as contentTypes from './content-type/index.js';
+import * as entries from './entry/index.js';
+import * as locales from './locale/index.js';
+import * as spaces from './space/index.js';
 
 export { assets, contentTypes, entries, locales, spaces };

packages/reference/src/assets/MultipleMediaEditor.tsx

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { rectSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { css, cx } from 'emotion';
 
-import { MultipleReferenceEditor } from '../common/MultipleReferenceEditor';
-import { ReferenceEditorProps } from '../common/ReferenceEditor';
-import { SortableLinkList } from '../common/SortableLinkList';
-import { ReferenceValue } from '../types';
-import { FetchingWrappedAssetCard } from './WrappedAssetCard/FetchingWrappedAssetCard';
+import { MultipleReferenceEditor } from '../common/MultipleReferenceEditor.js';
+import { ReferenceEditorProps } from '../common/ReferenceEditor.js';
+import { SortableLinkList } from '../common/SortableLinkList.js';
+import { ReferenceValue } from '../types.js';
+import { FetchingWrappedAssetCard } from './WrappedAssetCard/FetchingWrappedAssetCard.js';
 
 // Omit<ReferenceEditorProps, 'hasCardEditActions'>;
 // does not work nice with <Props of={SingleMediaEditor} /> from docz
@@ -34,8 +34,7 @@ export function MultipleMediaEditor(props: EditorProps) {
           sortingStrategy={
             childrenProps.viewType === 'card' ? rectSortingStrategy : verticalListSortingStrategy
           }
-          className={cx({ [styles.gridContainer]: childrenProps.viewType === 'card' })}
-        >
+          className={cx({ [styles.gridContainer]: childrenProps.viewType === 'card' })}>
           {({ items, item, index, isDisabled, DragHandle }) => (
             <FetchingWrappedAssetCard
               {...childrenProps}

packages/reference/src/assets/SingleMediaEditor.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import { ReferenceEditorProps } from '../common/ReferenceEditor';
-import { SingleReferenceEditor } from '../common/SingleReferenceEditor';
-import { FetchingWrappedAssetCard } from './WrappedAssetCard/FetchingWrappedAssetCard';
+import { ReferenceEditorProps } from '../common/ReferenceEditor.js';
+import { SingleReferenceEditor } from '../common/SingleReferenceEditor.js';
+import { FetchingWrappedAssetCard } from './WrappedAssetCard/FetchingWrappedAssetCard.js';
 
 // Omit<ReferenceEditorProps, 'hasCardEditActions'>;
 // does not work nice with <Props of={SingleMediaEditor} /> from docz

packages/reference/src/assets/WrappedAssetCard/AssetCardActions.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
 
-import { Menu, Text } from '@contentful/f36-components';
+import { Menu } from '@contentful/f36-menu';
 import tokens from '@contentful/f36-tokens';
+import { Text } from '@contentful/f36-typography';
 import { shortenStorageUnit } from '@contentful/field-editor-shared';
 import { css } from 'emotion';
-import get from 'lodash/get';
+import get from 'lodash-es/get.js';
 
-import { File } from '../../types';
+import { File } from '../../types.js';
 
 const styles = {
   dragHandle: css({
@@ -114,8 +115,7 @@ export function renderActions(props: {
             downloadAsset(entityFile.url);
           }
         }}
-        testId="card-action-download"
-      >
+        testId="card-action-download">
         Download
       </Menu.Item>
     ) : null,

packages/reference/src/assets/WrappedAssetCard/FetchingWrappedAssetCard.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
 
-import { AssetCard, EntryCard } from '@contentful/f36-components';
+import { AssetCard, EntryCard } from '@contentful/f36-card';
 
 import {
   CustomEntityCardProps,
   CustomCardRenderer,
   RenderCustomMissingEntityCard,
-} from '../../common/customCardTypes';
-import { useEntity, useEntityLoader } from '../../common/EntityStore';
-import { LinkActionsProps, MissingEntityCard } from '../../components';
-import { Action, Asset, FieldAppSDK, ViewType, RenderDragFn } from '../../types';
-import { WrappedAssetCard, WrappedAssetCardProps } from './WrappedAssetCard';
-import { WrappedAssetLink } from './WrappedAssetLink';
+} from '../../common/customCardTypes.js';
+import { useEntity, useEntityLoader } from '../../common/EntityStore.js';
+import { LinkActionsProps, MissingEntityCard } from '../../components/index.js';
+import { Action, Asset, FieldAppSDK, ViewType, RenderDragFn } from '../../types.js';
+import { WrappedAssetCard, WrappedAssetCardProps } from './WrappedAssetCard.js';
+import { WrappedAssetLink } from './WrappedAssetLink.js';
 
 type FetchingWrappedAssetCardProps = {
   assetId: string;

packages/reference/src/assets/WrappedAssetCard/WrappedAssetCard.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
 
 import { SpaceAPI } from '@contentful/app-sdk';
-import { AssetCard } from '@contentful/f36-components';
+import { AssetCard } from '@contentful/f36-card';
 import { ClockIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
 import { entityHelpers } from '@contentful/field-editor-shared';
 // @ts-expect-error
 import mimetype from '@contentful/mimetype';
 import { css } from 'emotion';
 
-import { MissingEntityCard, ScheduledIconWithTooltip } from '../../components';
-import { Asset, File, RenderDragFn } from '../../types';
-import { renderActions, renderAssetInfo } from './AssetCardActions';
+import { MissingEntityCard, ScheduledIconWithTooltip } from '../../components/index.js';
+import { Asset, File, RenderDragFn } from '../../types.js';
+import { renderActions, renderAssetInfo } from './AssetCardActions.js';
 
 const groupToIconMap = {
   image: 'image',
@@ -111,8 +111,7 @@ export const WrappedAssetCard = (props: WrappedAssetCardProps) => {
         <ScheduledIconWithTooltip
           getEntityScheduledActions={props.getEntityScheduledActions}
           entityType="Asset"
-          entityId={props.asset.sys.id}
-        >
+          entityId={props.asset.sys.id}>
           <ClockIcon
             className={styles.scheduleIcon}
             size="small"

packages/reference/src/assets/WrappedAssetCard/WrappedAssetLink.tsx

@@ -1,14 +1,18 @@
 import * as React from 'react';
 
-import { EntryCard } from '@contentful/f36-components';
+import { EntryCard } from '@contentful/f36-card';
 import { ClockIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
 import { entityHelpers, isValidImage, SpaceAPI } from '@contentful/field-editor-shared';
 import { css } from 'emotion';
 
-import { AssetThumbnail, MissingEntityCard, ScheduledIconWithTooltip } from '../../components';
-import { Asset, RenderDragFn } from '../../types';
-import { renderActions, renderAssetInfo } from './AssetCardActions';
+import {
+  AssetThumbnail,
+  MissingEntityCard,
+  ScheduledIconWithTooltip,
+} from '../../components/index.js';
+import { Asset, RenderDragFn } from '../../types.js';
+import { renderActions, renderAssetInfo } from './AssetCardActions.js';
 
 const styles = {
   scheduleIcon: css({
@@ -72,8 +76,7 @@ export const WrappedAssetLink = (props: WrappedAssetLinkProps) => {
         <ScheduledIconWithTooltip
           getEntityScheduledActions={props.getEntityScheduledActions}
           entityType="Asset"
-          entityId={props.asset.sys.id}
-        >
+          entityId={props.asset.sys.id}>
           <ClockIcon
             className={styles.scheduleIcon}
             size="small"

packages/reference/src/assets/index.ts

@@ -1,3 +1,3 @@
-export { SingleMediaEditor } from './SingleMediaEditor';
-export { MultipleMediaEditor } from './MultipleMediaEditor';
-export { WrappedAssetCard } from './WrappedAssetCard/WrappedAssetCard';
+export { SingleMediaEditor } from './SingleMediaEditor.js';
+export { MultipleMediaEditor } from './MultipleMediaEditor.js';
+export { WrappedAssetCard } from './WrappedAssetCard/WrappedAssetCard.js';

packages/reference/src/common/EntityStore.tsx

@@ -11,8 +11,8 @@ import {
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query';
-import constate from 'constate';
-import { PlainClientAPI, createClient } from 'contentful-management';
+import { PlainClientAPI } from 'contentful-management';
+import contentful from 'contentful-management';
 import PQueue from 'p-queue';
 
 import {
@@ -23,7 +23,10 @@ import {
   ResourceType,
   ScheduledAction,
   Space,
-} from '../types';
+} from '../types.js';
+import constate from './constate.js';
+
+const { createClient } = contentful;
 
 export type ResourceInfo<R extends Resource = Resource> = {
   resource: R;
@@ -212,7 +215,10 @@ const [InternalServiceProvider, useFetch, useEntityLoader, useCurrentIds] = cons
         const { priority, ...queryOptions } = options;
         return queryClient.fetchQuery(
           queryKey,
-          () => queryQueue.add(() => fn({ cmaClient }), { priority }),
+          () =>
+            queryQueue.add(() => fn({ cmaClient }), { priority }) as
+              | TQueryFnData
+              | Promise<TQueryFnData>,
           queryOptions
         );
       },

packages/reference/src/common/MultipleReferenceEditor.tsx

@@ -4,13 +4,13 @@ import { useCallback } from 'react';
 import { DragStartEvent } from '@dnd-kit/core';
 import { arrayMove } from '@dnd-kit/sortable';
 
-import { LinkEntityActions } from '../components';
-import { useLinkActionsProps } from '../components/LinkActions/LinkEntityActions';
-import { ReferenceValue, ContentEntityType, ContentType } from '../types';
-import { useSortIDs } from '../utils/useSortIDs';
-import { CustomEntityCardProps } from './customCardTypes';
-import { ReferenceEditor, ReferenceEditorProps } from './ReferenceEditor';
-import { useEditorPermissions } from './useEditorPermissions';
+import { LinkEntityActions } from '../components/index.js';
+import { useLinkActionsProps } from '../components/LinkActions/LinkEntityActions.js';
+import { ReferenceValue, ContentEntityType, ContentType } from '../types.js';
+import { useSortIDs } from '../utils/useSortIDs.js';
+import { CustomEntityCardProps } from './customCardTypes.js';
+import { ReferenceEditor, ReferenceEditorProps } from './ReferenceEditor.js';
+import { useEditorPermissions } from './useEditorPermissions.js';
 
 type ChildProps = {
   entityType: ContentEntityType;