@teleporthq/teleport-plugin-html-base-component 0.38.5 → 0.38.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teleporthq/teleport-plugin-html-base-component",
-  "version": "0.38.5",
+  "version": "0.38.9",
   "description": "A plugin for handling the skeleton/baseline of a base html component",
   "author": "teleportHQ",
   "license": "MIT",
@@ -24,11 +24,11 @@
     "build": "tsc -p tsconfig.json && tsc -p tsconfig.json --module commonjs --outDir dist/cjs"
   },
   "dependencies": {
-    "@teleporthq/teleport-plugin-common": "^0.38.5",
-    "@teleporthq/teleport-plugin-css": "^0.38.5",
+    "@teleporthq/teleport-plugin-common": "^0.38.9",
+    "@teleporthq/teleport-plugin-css": "^0.38.9",
     "@teleporthq/teleport-shared": "^0.38.3",
     "@teleporthq/teleport-types": "^0.38.3",
     "@teleporthq/teleport-uidl-builders": "^0.38.3"
   },
-  "gitHead": "3ac5a427c7ce0620dc1e61dfc71544ef515537ad"
+  "gitHead": "a0c0698b2c4f14e9e3c4cbe62f9e57d231a6c2e4"
 }

package/src/node-handlers.ts

@@ -24,6 +24,7 @@ import {
   ElementsLookup,
   UIDLConditionalNode,
   PropDefaultValueTypes,
+  UIDLCMSListRepeaterNode,
 } from '@teleporthq/teleport-types'
 import { join, relative } from 'path'
 import { HASTBuilders, HASTUtils, ASTUtils } from '@teleporthq/teleport-plugin-common'
@@ -45,23 +46,21 @@ const isValidURL = (url: string) => {
 
 const addNodeToLookup = (
   key: string,
-  node: UIDLElementNode,
-  tag: HastNode | HastText,
-  nodesLoookup: Record<string, HastNode | HastText>,
-  hierarchy: string[] = []
+  tag: HastNode | HastText | Array<HastNode | HastText>,
+  nodesLoookup: Record<string, HastNode | HastText | Array<HastNode | HastText>>
 ) => {
   // In html code-generation we combine the nodes of the component that is being consumed with the current component.
   // As html can't load the component at runtime like react or any other frameworks. So, we merge the component as a standalone
   // component in the current component.
-  if (nodesLoookup[key]) {
-    throw new HTMLComponentGeneratorError(
-      `\n${hierarchy.join(' -> ')} \n
-Duplicate key found in nodesLookup: ${node.content.key} \n
+  const currentLookup = nodesLoookup[key]
+  if (currentLookup) {
+    if (Array.isArray(currentLookup)) {
+      Array.isArray(tag) ? currentLookup.push(...tag) : currentLookup.push(tag)
+    } else {
+      nodesLoookup[key] = Array.isArray(tag) ? [currentLookup, ...tag] : [currentLookup, tag]
+    }
 
-A node with the same key already exists\n
-Received \n\n ${JSON.stringify(tag)}\n ${JSON.stringify(node)}
-Existing \n\n ${JSON.stringify(nodesLoookup[key])} \n\n`
-    )
+    return
   }
 
   nodesLoookup[key] = tag
@@ -70,7 +69,7 @@ Existing \n\n ${JSON.stringify(nodesLoookup[key])} \n\n`
 type NodeToHTML<NodeType, ReturnType> = (
   node: NodeType,
   componentName: string,
-  nodesLookup: Record<string, HastNode | HastText>,
+  nodesLookup: Record<string, HastNode | HastText | Array<HastNode | HastText>>,
   propDefinitions: Record<string, UIDLPropDefinition>,
   stateDefinitions: Record<string, UIDLStateDefinition>,
   subComponentOptions: {
@@ -82,17 +81,28 @@ type NodeToHTML<NodeType, ReturnType> = (
     dependencies: Record<string, UIDLDependency>
     options: GeneratorOptions
     outputOptions: UIDLComponentOutputOptions
+  },
+  /**
+   * This param is just to be able to handle CMS array mappers/Repeater nodes. A bit hacky, better support should be implemented
+   */
+  resolvedExpressions?: {
+    expressions: Record<string, UIDLPropDefinition>
+    currentIndex: number
   }
 ) => ReturnType
 
-export const generateHtmlSyntax: NodeToHTML<UIDLNode, Promise<HastNode | HastText>> = async (
+export const generateHtmlSyntax: NodeToHTML<
+  UIDLNode,
+  Promise<HastNode | HastText | Array<HastNode | HastText>>
+> = async (
   node,
   compName,
   nodesLookup,
   propDefinitions,
   stateDefinitions,
   subComponentOptions,
-  structure
+  structure,
+  resolvedExpressions
 ) => {
   switch (node.type) {
     case 'inject':
@@ -113,7 +123,8 @@ export const generateHtmlSyntax: NodeToHTML<UIDLNode, Promise<HastNode | HastTex
         propDefinitions,
         stateDefinitions,
         subComponentOptions,
-        structure
+        structure,
+        resolvedExpressions
       )
       return elementNode
 
@@ -186,7 +197,8 @@ export const generateHtmlSyntax: NodeToHTML<UIDLNode, Promise<HastNode | HastTex
                 propDefinitions,
                 stateDefinitions,
                 subComponentOptions,
-                structure
+                structure,
+                resolvedExpressions
               )
             }
           } catch (error) {
@@ -202,9 +214,40 @@ export const generateHtmlSyntax: NodeToHTML<UIDLNode, Promise<HastNode | HastTex
       }
 
     case 'expr':
+      const content = node.content.split('?.')
+
+      if (resolvedExpressions && resolvedExpressions.expressions?.[content[0] || '']) {
+        const uidlDynamicRef: UIDLDynamicReference = {
+          type: 'dynamic',
+          content: {
+            referenceType: 'prop',
+            refPath: [resolvedExpressions.currentIndex.toString(), ...content.slice(1)],
+            id: content[0],
+          },
+        }
+        const generatedNode = await generateDynamicNode(
+          uidlDynamicRef,
+          compName,
+          nodesLookup,
+          resolvedExpressions.expressions,
+          stateDefinitions,
+          subComponentOptions,
+          structure
+        )
+        return generatedNode
+      }
+
       return HASTBuilders.createComment('Expressions are not supported in HTML')
     case 'cms-list-repeater':
-      return HASTBuilders.createComment('CMS Repeater/Array Mapper nodes are not supported in HTML')
+      return generateRepeaterNode(
+        node,
+        compName,
+        nodesLookup,
+        propDefinitions,
+        stateDefinitions,
+        subComponentOptions,
+        structure
+      )
     default:
       throw new HTMLComponentGeneratorError(
         `generateHtmlSyntax encountered a node of unsupported type: ${JSON.stringify(
@@ -250,7 +293,10 @@ const getValueType = (value: UIDLPropDefinition['defaultValue']) => {
   }
 }
 
-const generateElementNode: NodeToHTML<UIDLElementNode, Promise<HastNode | HastText>> = async (
+const generateRepeaterNode: NodeToHTML<
+  UIDLCMSListRepeaterNode,
+  Promise<HastNode | HastText>
+> = async (
   node,
   compName,
   nodesLookup,
@@ -258,6 +304,110 @@ const generateElementNode: NodeToHTML<UIDLElementNode, Promise<HastNode | HastTe
   stateDefinitions,
   subComponentOptions,
   structure
+) => {
+  const { nodes } = node.content
+
+  const contextId = node.content.renderPropIdentifier
+  const sourceValue = node.content.source
+  let propDef =
+    propDefinitions[
+      Object.keys(propDefinitions).find((propKey) => sourceValue.includes(propKey)) || ''
+    ]
+
+  if (!propDef || !Array.isArray(propDef.defaultValue)) {
+    // If no prop is found we might have a static source value
+    try {
+      const parsedSource = JSON.parse(sourceValue)
+      propDef = {
+        defaultValue: parsedSource,
+        id: contextId,
+        type: 'array',
+      }
+    } catch {
+      // Silent fail
+    }
+  }
+
+  // We do the check again to keep typescript happy, otherwise this could be in catch
+  if (!propDef || !Array.isArray(propDef.defaultValue)) {
+    return HASTBuilders.createComment(
+      'CMS Array Mapper/Repeater not supported in HTML without a prop source'
+    )
+  }
+  propDefinitions[contextId] = propDef
+
+  const elementNode = HASTBuilders.createHTMLNode('div')
+  node.content.nodes.list.content.style = { display: { type: 'static', content: 'contents' } }
+  if (node.content.nodes.empty) {
+    node.content.nodes.empty.content.style = { display: { type: 'static', content: 'contents' } }
+  }
+  // Empty case
+  if (propDef.defaultValue.length === 0) {
+    const emptyChildren = nodes.empty.content.children
+    if (emptyChildren) {
+      for (const child of emptyChildren) {
+        const childTag = await generateHtmlSyntax(
+          child,
+          compName,
+          nodesLookup,
+          propDefinitions,
+          stateDefinitions,
+          subComponentOptions,
+          structure
+        )
+
+        if (typeof childTag === 'string') {
+          HASTUtils.addTextNode(elementNode, childTag)
+        } else {
+          HASTUtils.addChildNode(elementNode, childTag as HastNode)
+        }
+      }
+    }
+
+    addNodeToLookup(`${node.content.nodes.empty.content.key}`, elementNode, nodesLookup)
+    return elementNode
+  }
+
+  const listChildren = nodes.list.content.children
+  if (listChildren) {
+    for (let index = 0; index < propDef.defaultValue.length; index++) {
+      for (const child of listChildren) {
+        const childTag = await generateHtmlSyntax(
+          child,
+          compName,
+          nodesLookup,
+          propDefinitions,
+          stateDefinitions,
+          subComponentOptions,
+          structure,
+          { currentIndex: index, expressions: { [contextId]: propDef } }
+        )
+
+        if (typeof childTag === 'string') {
+          HASTUtils.addTextNode(elementNode, childTag)
+        } else {
+          HASTUtils.addChildNode(elementNode, childTag as HastNode)
+        }
+      }
+    }
+  }
+
+  addNodeToLookup(`${node.content.nodes.list.content.key}`, elementNode, nodesLookup)
+  return elementNode
+}
+
+const generateElementNode: NodeToHTML<
+  UIDLElementNode,
+  Promise<HastNode | HastText | Array<HastNode | HastText>>
+> = async (
+  node,
+  compName,
+  nodesLookup,
+  propDefinitions,
+  stateDefinitions,
+  subComponentOptions,
+  structure,
+  resolvedExpressions
 ) => {
   const {
     elementType,
@@ -271,7 +421,6 @@ const generateElementNode: NodeToHTML<UIDLElementNode, Promise<HastNode | HastTe
   if (dependency && (dependency as UIDLDependency)?.type === 'local') {
     const compTag = await generateComponentContent(
       node,
-      compName,
       nodesLookup,
       propDefinitions,
       stateDefinitions,
@@ -301,7 +450,8 @@ const generateElementNode: NodeToHTML<UIDLElementNode, Promise<HastNode | HastTe
         propDefinitions,
         stateDefinitions,
         subComponentOptions,
-        structure
+        structure,
+        resolvedExpressions
       )
 
       if (typeof childTag === 'string') {
@@ -332,16 +482,17 @@ const generateElementNode: NodeToHTML<UIDLElementNode, Promise<HastNode | HastTe
     propDefinitions,
     stateDefinitions,
     structure.options.projectRouteDefinition,
-    structure.outputOptions
+    structure.outputOptions,
+    resolvedExpressions?.currentIndex
   )
 
-  addNodeToLookup(node.content.key, node, elementNode, nodesLookup, [compName])
+  addNodeToLookup(node.content.key, elementNode, nodesLookup)
   return elementNode
 }
 
 const createLookupTable = (
   component: ComponentUIDL,
-  nodesLookup: Record<string, HastNode | HastText>
+  nodesLookup: Record<string, HastNode | HastText | Array<HastNode | HastText>>
 ): ElementsLookup => {
   const lookup: ElementsLookup = {}
   for (const node of Object.keys(nodesLookup)) {
@@ -356,8 +507,7 @@ const createLookupTable = (
 
 const generateComponentContent = async (
   node: UIDLElementNode,
-  compName: string,
-  nodesLookup: Record<string, HastNode | HastText>,
+  nodesLookup: Record<string, HastNode | HastText | Array<HastNode | HastText>>,
   propDefinitions: Record<string, UIDLPropDefinition>,
   stateDefinitions: Record<string, UIDLStateDefinition>,
   subComponentOptions: {
@@ -505,7 +655,7 @@ const generateComponentContent = async (
           propsForInstance[propKey] = combinedStates[propKey]
           break
         case 'expr':
-          // Ignore expr type attributes in html for the time being.
+          // Ignore expr type attributes in html comp instances for the time being.
           break
         default:
           throw new Error(
@@ -625,11 +775,14 @@ const generateComponentContent = async (
     }
   })
 
-  addNodeToLookup(node.content.key, node, compTag, nodesLookup, [compName, component.name])
+  addNodeToLookup(node.content.key, compTag, nodesLookup)
   return compTag
 }
 
-const generateDynamicNode: NodeToHTML<UIDLDynamicReference, Promise<HastNode | HastText>> = async (
+const generateDynamicNode: NodeToHTML<
+  UIDLDynamicReference,
+  Promise<HastNode | HastText | Array<HastNode | HastText>>
+> = async (
   node,
   compName,
   nodesLookup,
@@ -637,7 +790,7 @@ const generateDynamicNode: NodeToHTML<UIDLDynamicReference, Promise<HastNode | H
   stateDefinitions,
   subComponentOptions,
   structure
-): Promise<HastNode | HastText> => {
+): Promise<HastNode | HastText | Array<HastNode | HastText>> => {
   if (node.content.referenceType === 'locale') {
     const localeTag = HASTBuilders.createHTMLNode('span')
     const commentNode = HASTBuilders.createComment(`Content for locale ${node.content.id}`)
@@ -727,7 +880,8 @@ const handleAttributes = (
   propDefinitions: Record<string, UIDLPropDefinition>,
   stateDefinitions: Record<string, UIDLStateDefinition>,
   routeDefinitions: UIDLRouteDefinitions,
-  outputOptions: UIDLComponentOutputOptions
+  outputOptions: UIDLComponentOutputOptions,
+  currentIndex?: number
 ) => {
   for (const attrKey of Object.keys(attrs)) {
     const attrValue = attrs[attrKey]
@@ -820,9 +974,28 @@ const handleAttributes = (
         break
       }
 
+      case 'expr': {
+        const fullPath = content.split('?.')
+        const prop = propDefinitions[fullPath?.[0] || '']
+
+        if (!prop) {
+          break
+        }
+
+        const path =
+          typeof currentIndex === 'number'
+            ? [currentIndex.toString(), ...fullPath.slice(1)]
+            : fullPath.slice(1)
+        const value = extractDefaultValueFromRefPath(prop.defaultValue, path)
+        if (!value) {
+          break
+        }
+        HASTUtils.addAttributeToNode(htmlNode, attrKey, String(value))
+        break
+      }
+
       case 'element':
       case 'import':
-      case 'expr':
       case 'object':
         break