feat: use agreed component definition structure [SPA-1126] (#9)

* chore: make the message source app origin configurable via an env var

* feat: define component definition types aligned with the proposal

* refactor: mvp component definition structure

* chore: prettify

* chore: update inline comment

* chore: clarify readme

README.md

@@ -26,3 +26,9 @@ const App = () => {
   );
 }
 ```
+
+In case you expect the message to arrive from a different origin, define this environment variable with your desired value
+
+```sh
+REACT_APP_EXPERIENCE_BUILDER_ORIGIN=https://localhost:3001 # https://app.contentful.com by default
+```

src/Test.tsx

@@ -1,5 +1,45 @@
 import React from 'react'
+import { useComponents } from './hooks'
+import { ComponentDefinitionVariableArrayItemType, ComponentDefinitionVariableType } from './types'
+
+const Com = () => {
+  return null
+}
 
 export const Test = () => {
+  const { defineComponent } = useComponents()
+
+  defineComponent(Com, {
+    id: 'Com',
+    name: 'Com',
+    variables: {
+      name: {
+        type: ComponentDefinitionVariableType.LINK,
+        linkType: 'Asset',
+      },
+      isChecked: {
+        type: ComponentDefinitionVariableType.BOOLEAN,
+      },
+      elements: {
+        type: ComponentDefinitionVariableType.ARRAY,
+        items: {
+          linkType: 'Entry',
+          type: ComponentDefinitionVariableArrayItemType.LINK,
+        },
+      },
+      elementsSymbol: {
+        type: ComponentDefinitionVariableType.ARRAY,
+        items: {
+          type: ComponentDefinitionVariableArrayItemType.SYMBOL,
+        },
+      },
+      elementsComponent: {
+        type: ComponentDefinitionVariableType.ARRAY,
+        items: {
+          type: ComponentDefinitionVariableArrayItemType.COMPONENT,
+        },
+      },
+    },
+  })
   return <div data-test-id="test">Test</div>
 }

src/blocks/VisualEditorBlock.tsx

@@ -40,16 +40,13 @@ export const VisualEditorBlock = ({
   boundData,
 }: VisualEditorBlockProps) => {
   const { sendMessage } = useCommunication()
-  const { getComponentDefinition } = useComponents()
+  const { getComponent } = useComponents()
   const { onComponentDropped } = useInteraction()
   const wasMousePressed = useRef(false)
 
   const blockType = node.data.blockId.split(':')[0]
 
-  const blockConfiguration = useMemo(
-    () => getComponentDefinition(blockType),
-    [blockType, getComponentDefinition]
-  )
+  const definedComponent = useMemo(() => getComponent(blockType), [blockType, getComponent])
 
   const { nodeBinding = {}, nodeBoundProps = {} } = useMemo(() => {
     // plain node, not a child of a template
@@ -88,19 +85,23 @@ export const VisualEditorBlock = ({
   }, [template, binding, node, boundData])
 
   const props = useMemo(() => {
-    if (!blockConfiguration) {
+    if (!definedComponent) {
       return {}
     }
 
-    return blockConfiguration.componentDefinition.variables.reduce((acc, variable) => {
-      const boundValue = nodeBoundProps ? nodeBoundProps[variable.name]?.value : undefined
+    return Object.entries(definedComponent.componentDefinition.variables).reduce(
+      (acc, [variableName, variableDefinition]) => {
+        const boundValue = nodeBoundProps ? nodeBoundProps[variableName]?.value : undefined
 
-      return {
-        ...acc,
-        [variable.name]: boundValue || node.data.props[variable.name] || variable.defaultValue,
-      }
-    }, {})
-  }, [blockConfiguration, node.data.props, nodeBoundProps])
+        return {
+          ...acc,
+          [variableName]:
+            boundValue || node.data.props[variableName] || variableDefinition.defaultValue,
+        }
+      },
+      {}
+    )
+  }, [definedComponent, node.data.props, nodeBoundProps])
 
   if (node.type === 'template') {
     return (
@@ -113,11 +114,11 @@ export const VisualEditorBlock = ({
     )
   }
 
-  if (!blockConfiguration) {
+  if (!definedComponent) {
     return null
   }
 
-  const { component, componentDefinition } = blockConfiguration
+  const { component, componentDefinition } = definedComponent
 
   const children = node.children.map((childNode: any) => {
     if (childNode.type === 'string') {
@@ -168,8 +169,8 @@ export const VisualEditorBlock = ({
       },
       className: cx(
         styles.hover,
-        componentDefinition.container && !children?.length ? styles.emptyContainer : undefined,
-        componentDefinition.container ? styles.container : undefined
+        componentDefinition.children && !children?.length ? styles.emptyContainer : undefined,
+        componentDefinition.children ? styles.container : undefined
       ),
       ...props,
     },

src/constants.ts

@@ -0,0 +1 @@
+export const CONTENTFUL_WEB_APP_ORIGIN = 'https://app.contentful.com'

src/hooks/useComponents.ts

@@ -20,14 +20,14 @@ export const useComponents = () => {
     [sendMessage]
   )
 
-  const getComponentDefinition = useCallback((id: string) => {
+  const getComponent = useCallback((id: string) => {
     return registeredComponentDefinitions.find(
       (definition) => definition.componentDefinition.id === id
     )
   }, [])
 
   return {
     defineComponent,
-    getComponentDefinition,
+    getComponent,
   }
 }

src/hooks/useExperienceBuilder.ts

@@ -3,6 +3,7 @@ import throttle from 'lodash.throttle'
 import type { PlainClientAPI } from 'contentful-management'
 import { BindingMapByBlockId, BoundData } from '../types'
 import { useCommunication } from './useCommunication'
+import { CONTENTFUL_WEB_APP_ORIGIN } from '../constants'
 
 type VisualEditorMessagePayload = {
   source: string
@@ -14,6 +15,15 @@ type UseExperienceBuilderProps = {
   cma: PlainClientAPI
 }
 
+const getAppOrigins = () => {
+  if (typeof process.env !== 'undefined') {
+    if (process.env?.REACT_APP_EXPERIENCE_BUILDER_ORIGIN) {
+      return [process.env.REACT_APP_EXPERIENCE_BUILDER_ORIGIN]
+    }
+  }
+  return [CONTENTFUL_WEB_APP_ORIGIN]
+}
+
 export const useExperienceBuilder = ({ cma }: UseExperienceBuilderProps) => {
   const [tree, setTree] = useState({})
   const [binding, setBinding] = useState<BindingMapByBlockId>({})
@@ -23,8 +33,8 @@ export const useExperienceBuilder = ({ cma }: UseExperienceBuilderProps) => {
 
   useEffect(() => {
     const onMessage = (event: MessageEvent) => {
-      // where the app is contentful hosted when run locally
-      if (event.origin !== 'http://localhost:3001') {
+      // makes sure that the message originates from contentful web app
+      if (!getAppOrigins().includes(event.origin)) {
         return
       }
 
@@ -44,7 +54,6 @@ export const useExperienceBuilder = ({ cma }: UseExperienceBuilderProps) => {
 
         switch (eventData.eventType) {
           case 'componentDropped': {
-            console.log('component dropped', payload)
             break
           }
           case 'componentTreeUpdated': {
@@ -56,7 +65,6 @@ export const useExperienceBuilder = ({ cma }: UseExperienceBuilderProps) => {
           case 'valueChanged': {
             const { boundData = {}, binding = {} } = payload
             setBinding(binding)
-            console.log('setting stuff', boundData)
             setBoundData(boundData)
             break
           }

src/index.ts

@@ -1,2 +1,4 @@
 export { VisualEditorRoot } from './blocks'
 export { useExperienceBuilder, useComponents as useExperienceBuilderComponents } from './hooks'
+export type { ComponentDefinition, ComponentDefinitionVariable } from './types'
+export { ComponentDefinitionVariableType, ComponentDefinitionVariableArrayItemType } from './types'

src/types.ts

@@ -1,17 +1,80 @@
-export type ComponentDefinitionVariables = {
-  name: string
-  dataType: string
-  defaultValue?: string | boolean
-  options?: string[]
+export enum ComponentDefinitionVariableType {
+  TEXT = 'Text',
+  NUMBER = 'Number',
+  DATE = 'Date',
+  BOOLEAN = 'Boolean',
+  LOCATION = 'Location',
+  LINK = 'Link',
+  ARRAY = 'Array',
+}
+
+export enum ComponentDefinitionVariableArrayItemType {
+  LINK = 'Link',
+  SYMBOL = 'Symbol',
+  COMPONENT = 'Component',
+}
+
+export type ComponentDefinitionVariableValidation = {
   required?: boolean
-  childNode?: boolean
 }
 
-export type ComponentDefinition = {
+export interface ComponentDefinitionVariableBase<T extends ComponentDefinitionVariableType> {
+  type: T
+  validations?: ComponentDefinitionVariableValidation
+  isStyle?: boolean
+  description?: string
+  defaultValue?: string | boolean | number
+}
+
+export interface ComponentDefinitionVariableLink
+  extends ComponentDefinitionVariableBase<ComponentDefinitionVariableType.LINK> {
+  linkType: 'Entry' | 'Asset'
+}
+
+export interface ComponentDefinitionVariableArrayOfEntityLinks
+  extends ComponentDefinitionVariableBase<ComponentDefinitionVariableType.ARRAY> {
+  items: {
+    type: ComponentDefinitionVariableArrayItemType.LINK
+    linkType: 'Entry' | 'Asset'
+  }
+}
+
+export interface ComponentDefinitionVariableArrayOfPrimitives
+  extends ComponentDefinitionVariableBase<ComponentDefinitionVariableType.ARRAY> {
+  type: ComponentDefinitionVariableType.ARRAY
+}
+
+export interface ComponentDefinitionVariableArrayOfComponents {
+  type: ComponentDefinitionVariableType.ARRAY
+  items: {
+    type: ComponentDefinitionVariableArrayItemType.COMPONENT
+  }
+}
+
+export type ComponentDefinitionVariableArray<
+  K extends ComponentDefinitionVariableArrayItemType = ComponentDefinitionVariableArrayItemType
+> = K extends ComponentDefinitionVariableArrayItemType.LINK
+  ? ComponentDefinitionVariableArrayOfEntityLinks
+  : ComponentDefinitionVariableArrayOfPrimitives
+
+export type ComponentDefinitionVariable<
+  T extends ComponentDefinitionVariableType,
+  K extends ComponentDefinitionVariableArrayItemType = ComponentDefinitionVariableArrayItemType
+> = T extends ComponentDefinitionVariableType.LINK
+  ? ComponentDefinitionVariableLink
+  : T extends ComponentDefinitionVariableType.ARRAY
+  ? { items: { type: K } } & ComponentDefinitionVariableArray<K>
+  : ComponentDefinitionVariableBase<T>
+
+export type ComponentDefinition<
+  T extends ComponentDefinitionVariableType = ComponentDefinitionVariableType
+> = {
   id: string
-  container: boolean
-  category: string
-  variables: ComponentDefinitionVariables[]
+  name: string
+  category?: string
+  thumbnailUrl?: string
+  variables: Record<string, { type: T } & ComponentDefinitionVariable<T>>
+  children?: boolean
 }
 
 export type Binding = {