Merge branch 'development' into fetch-hooks

.gitignore

@@ -33,3 +33,6 @@ tmp/
 
 # Necessary for pushing to alternative npm registry
 .npmrc
+
+# Ignore built styles.css file in packages/components
+/packages/components/styles.css

lerna.json

@@ -4,7 +4,7 @@
   "version": "independent",
   "command": {
     "version": {
-      "allowBranch": ["main", "next", "development", "chore/toolkit-repo-migration"],
+      "allowBranch": ["main", "next", "development", "feat/native-visual-editor"],
       "conventionalCommits": true,
       "message": "chore(release): updated release notes and package versions [ci skip]",
       "ignoreChanges": [

packages/components/src/components/ContentfulContainer/ContentfulContainer.css

@@ -1,11 +1,7 @@
 #ContentfulContainer.defaultStyles {
-  overflow: scroll;
   position: relative;
   display: flex;
   box-sizing: border-box;
-
-  -ms-overflow-style: none; /* Internet Explorer 10+ */
-  scrollbar-width: none; /* Firefox */
 }
 
 #ContentfulContainer.defaultStyles::-webkit-scrollbar {

packages/components/src/components/ContentfulContainer/ContentfulContainer.tsx

@@ -44,7 +44,6 @@ export const ContentfulContainer = (sectionProps: ContentfulContainerProps) => {
     ['data-cf-node-block-type']: node.type,
     id: 'ContentfulContainer',
     className: combineClasses(className, 'defaultStyles'),
-    zoneId: node.data.id,
     WrapperComponent: Flex,
   });
 };

packages/components/src/components/ContentfulContainer/index.ts

@@ -1,27 +1,13 @@
-import { builtInStyles } from '@contentful/experience-builder-core';
+import { containerBuiltInStyles } from '@contentful/experience-builder-core';
 import { ContentfulContainer } from './ContentfulContainer';
-import {
-  ComponentDefinitionVariable,
-  ComponentDefinition,
-} from '@contentful/experience-builder-core/types';
+import { ComponentDefinition } from '@contentful/experience-builder-core/types';
 import {
   CONTENTFUL_COMPONENT_CATEGORY,
   CONTENTFUL_CONTAINER_ID,
 } from '@contentful/experience-builder-core/constants';
 
 export { ContentfulContainer };
 
-export const containerBuiltInStyles = {
-  ...builtInStyles,
-  cfHeight: {
-    displayName: 'Height',
-    type: 'Text',
-    group: 'style',
-    description: 'The height of the section',
-    defaultValue: 'auto',
-  } as ComponentDefinitionVariable<'Text'>,
-};
-
 export const ContentfulContainerComponentDefinition: ComponentDefinition = {
   id: CONTENTFUL_CONTAINER_ID,
   name: 'Container',

packages/components/src/components/DesignComponent/DesignComponent.tsx

@@ -0,0 +1,47 @@
+import {
+  CompositionComponentNode,
+  ResolveDesignValueType,
+  StyleProps,
+} from '@contentful/experience-builder-core/types';
+import React from 'react';
+
+export type DesignComponentProps<EditorMode = boolean> = EditorMode extends true
+  ? {
+      children?: React.ReactNode;
+      className?: string;
+      cfHyperlink?: StyleProps['cfHyperlink'];
+      cfOpenInNewTab?: StyleProps['cfOpenInNewTab'];
+      editorMode?: EditorMode;
+      node: CompositionComponentNode;
+      resolveDesignValue?: ResolveDesignValueType;
+      renderDropZone: (
+        node: CompositionComponentNode,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        props?: Record<string, any>
+      ) => React.ReactNode;
+    }
+  : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Record<string, any>;
+
+const designComponentStyle = { display: 'contents' };
+
+// Feel free to do any magic as regards variable definitions for design components
+// Or if this isn't necessary by the time we figure that part out, we can bid this part farewell
+export const DesignComponent: React.FC<DesignComponentProps> = (props) => {
+  if (props.editorMode) {
+    const { node } = props;
+
+    return props.renderDropZone(node, {
+      ['data-test-id']: 'contentful-container',
+      ['data-cf-node-id']: node.data.id,
+      ['data-cf-node-block-id']: node.data.blockId,
+      ['data-cf-node-block-type']: node.type,
+      id: 'design-component',
+      className: props.className,
+      style: designComponentStyle,
+    });
+  }
+  // Using a display contents so design component content/children
+  // can appear as if they are direct children of the div wrapper's parent
+  return <div data-test-id="design-component" {...props} style={designComponentStyle} />;
+};

packages/components/src/components/DesignComponent/index.ts

@@ -0,0 +1 @@
+export * from './DesignComponent';

packages/components/src/components/Text/Text.css

@@ -1,7 +1,4 @@
 .cf-text {
-  color: var(--cf-text-color);
-  font-size: var(--cf-text-base);
-  font-weight: var(--cf-font-normal);
   font-family: var(--cf-font-family-sans);
   margin: var(--cf-spacing-0);
 }

packages/components/src/components/index.ts

@@ -5,3 +5,4 @@ export * from './Text';
 export * from './Image';
 export * from './ContentfulContainer';
 export * from './Columns';
+export * from './DesignComponent';

packages/components/styles.css

@@ -127,9 +127,6 @@ h6.cf-heading {
   font-family: var(--cf-font-family-sans);
 }
 .cf-text {
-  color: var(--cf-text-color);
-  font-size: var(--cf-text-base);
-  font-weight: var(--cf-font-normal);
   font-family: var(--cf-font-family-sans);
   margin: var(--cf-spacing-0);
 }

packages/core/rollup.config.mjs

@@ -14,7 +14,6 @@ export default [
     ],
     plugins: [nodeResolve(), typescript({ tsconfig: './tsconfig.json' })],
     external: [/node_modules\/(?!tslib.*)/],
-    treeshake: false,
   },
   //specific exports in package.json
   {
@@ -29,21 +28,18 @@ export default [
     ],
     plugins: [nodeResolve(), typescript({ tsconfig: './tsconfig.json' })],
     external: [/node_modules\/(?!tslib.*)/],
-    treeshake: false,
   },
   //typings
   {
     input: 'src/index.ts',
     output: [{ dir: 'dist', format: 'esm', preserveModules: true }],
     plugins: [dts({ tsconfig: './tsconfig.json' })],
     external: [/.css/],
-    treeshake: false,
   },
   {
     input: 'src/exports.ts',
     output: [{ dir: 'dist', format: 'esm', preserveModules: true }],
     plugins: [dts({ tsconfig: './tsconfig.json' })],
     external: [/.css/],
-    treeshake: false,
   },
 ];

packages/core/src/communication/sendMessage.ts

@@ -6,7 +6,7 @@ export const sendMessage = (eventType: OutgoingEvent | PostMessageMethods, data?
     return;
   }
 
-  console.debug('data sent', {
+  console.debug(`[exp-builder.sdk::sendMessage] Sending message [${eventType}]`, {
     source: 'customer-app',
     eventType,
     payload: data,

packages/core/src/constants.ts

@@ -35,7 +35,9 @@ export const INCOMING_EVENTS = {
   HoverComponent: 'hoverComponent',
   UpdatedEntity: 'updatedEntity',
   DesignComponentsAdded: 'designComponentsAdded',
+  DesignComponentsRegistered: 'designComponentsRegistered',
   InitEditor: 'initEditor',
+  EntitiesResolved: 'entitiesResolved',
 };
 
 export const INTERNAL_EVENTS = {

packages/core/src/definitions/components.ts

@@ -0,0 +1,12 @@
+import type { ComponentDefinition } from '@/types';
+
+import { CONTENTFUL_COMPONENT_CATEGORY, CONTENTFUL_CONTAINER_ID } from '@/constants';
+import { containerBuiltInStyles } from './styles';
+
+export const containerDefinition: ComponentDefinition = {
+  id: CONTENTFUL_CONTAINER_ID,
+  name: 'Container',
+  category: CONTENTFUL_COMPONENT_CATEGORY,
+  children: true,
+  variables: containerBuiltInStyles,
+};

packages/core/src/definitions/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './styles';

packages/core/src/definitions/styles.ts

@@ -96,7 +96,7 @@ export const builtInStyles: Partial<
     type: 'Text',
     group: 'style',
     description: 'The orientation of the section',
-    defaultValue: 'row',
+    defaultValue: 'column',
   },
   cfFlexWrap: {
     displayName: 'Wrap objects',
@@ -183,11 +183,27 @@ export const optionalBuiltInStyles: Partial<
     defaultValue: '16px',
   },
   cfFontWeight: {
+    validations: {
+      in: [
+        {
+          value: '400',
+          displayName: 'Normal',
+        },
+        {
+          value: '500',
+          displayName: 'Medium',
+        },
+        {
+          value: '600',
+          displayName: 'Semi Bold',
+        },
+      ],
+    },
     displayName: 'Font Weight',
     type: 'Text',
     group: 'style',
     description: 'The font weight of the section',
-    defaultValue: 'normal',
+    defaultValue: '400',
   },
   cfLineHeight: {
     displayName: 'Line Height',
@@ -238,7 +254,7 @@ export const optionalBuiltInStyles: Partial<
       in: [
         {
           value: 'none',
-          displayName: 'None',
+          displayName: 'Normal',
         },
         {
           value: 'capitalize',
@@ -282,3 +298,14 @@ export const optionalBuiltInStyles: Partial<
     defaultValue: false,
   },
 };
+
+export const containerBuiltInStyles = {
+  ...builtInStyles,
+  cfHeight: {
+    displayName: 'Height',
+    type: 'Text',
+    group: 'style',
+    description: 'The height of the section',
+    defaultValue: 'auto',
+  } as ComponentDefinitionVariable<'Text'>,
+};

packages/core/src/entity/EditorModeEntityStore.ts

@@ -2,17 +2,32 @@ import { EditorEntityStore, RequestedEntitiesMessage } from '@contentful/visual-
 import type { Asset, AssetFile, Entry, UnresolvedLink } from 'contentful';
 import { sendMessage } from '../communication/sendMessage';
 
+// The default of 3s in the EditorEntityStore is sometimes timing out and
+// leads to not rendering bound content and design components.
+const REQUEST_TIMEOUT = 10000;
+
 export class EditorModeEntityStore extends EditorEntityStore {
+  public locale: string;
+
   constructor({ entities, locale }: { entities: Array<Entry | Asset>; locale: string }) {
+    console.debug(
+      `[exp-builder.sdk] Initializing editor entity store with ${entities.length} entities for locale ${locale}.`,
+      { entities }
+    );
+
     const subscribe = (method: unknown, cb: (payload: RequestedEntitiesMessage) => void) => {
       const listeners = (event: MessageEvent) => {
+        if (typeof event.data !== 'string') {
+          return;
+        }
         const data: {
           source: 'composability-app';
           eventType: string;
           payload: RequestedEntitiesMessage;
         } = JSON.parse(event.data);
 
         if (typeof data !== 'object' || !data) return;
+
         if (data.source !== 'composability-app') return;
         if (data.eventType === method) {
           cb(data.payload);
@@ -30,20 +45,33 @@ export class EditorModeEntityStore extends EditorEntityStore {
       };
     };
 
-    super({ entities, sendMessage, subscribe, locale });
+    super({ entities, sendMessage, subscribe, locale, timeoutDuration: REQUEST_TIMEOUT });
+    this.locale = locale;
   }
+  /**
+   * This function collects and returns the list of requested entries and assets. Additionally, it checks
+   * upfront whether any async fetching logic is actually happening. If not, it returns a plain `false` value, so we
+   * can detect this early and avoid unnecessary re-renders.
+   * @param entityLinks
+   * @returns false if no async fetching is happening, otherwise a promise that resolves when all entities are fetched
+   */
+  fetchEntities(entityLinks: UnresolvedLink<'Entry' | 'Asset'>[]): false | Promise<void> {
+    const entryLinks = entityLinks.filter((link) => link.sys?.linkType === 'Entry');
+    const assetLinks = entityLinks.filter((link) => link.sys?.linkType === 'Asset');
+
+    const uniqueEntryIds = [...new Set(entryLinks.map((link) => link.sys.id))];
+    const uniqueAssetIds = [...new Set(assetLinks.map((link) => link.sys.id))];
 
-  async fetchEntities(entityLinks: UnresolvedLink<'Entry' | 'Asset'>[]) {
-    const entryLinks = entityLinks.filter((link) => link.sys.linkType === 'Entry');
-    const assetLinks = entityLinks.filter((link) => link.sys.linkType === 'Asset');
+    const { missing: missingEntryIds } = this.getEntitiesFromMap('Entry', uniqueEntryIds);
+    const { missing: missingAssetIds } = this.getEntitiesFromMap('Asset', uniqueAssetIds);
 
-    const uniqueEntryLinks = new Set(entryLinks.map((link) => link.sys.id));
-    const uniqueAssetLinks = new Set(assetLinks.map((link) => link.sys.id));
+    // Return false to indicate that no async fetching is happening
+    if (!missingAssetIds.length && !missingEntryIds.length) return false;
 
-    return await Promise.allSettled([
-      this.fetchEntries([...uniqueEntryLinks]),
-      this.fetchAssets([...uniqueAssetLinks]),
-    ]);
+    // Entries and assets will be stored in entryMap and assetMap
+    return Promise.all([this.fetchEntries(uniqueEntryIds), this.fetchAssets(uniqueAssetIds)]).then(
+      () => Promise.resolve()
+    );
   }
 
   getValue(