@teleporthq/teleport-plugin-html-base-component 0.32.10 → 0.33.0

package/src/node-handlers.ts

@@ -76,7 +76,7 @@ export const generateHtmlSynatx: NodeToHTML<UIDLNode, Promise<HastNode | HastTex
       return HASTBuilders.createHTMLNode(node.type)
 
     case 'element':
-      return generatElementNode(
+      const elementNode = await generateElementNode(
         node,
         templatesLookUp,
         propDefinitions,
@@ -84,9 +84,10 @@ export const generateHtmlSynatx: NodeToHTML<UIDLNode, Promise<HastNode | HastTex
         subComponentOptions,
         structure
       )
+      return elementNode
 
     case 'dynamic':
-      return generateDynamicNode(
+      const dynamicNode = await generateDynamicNode(
         node,
         templatesLookUp,
         propDefinitions,
@@ -95,6 +96,8 @@ export const generateHtmlSynatx: NodeToHTML<UIDLNode, Promise<HastNode | HastTex
         structure
       )
 
+      return dynamicNode
+
     default:
       throw new HTMLComponentGeneratorError(
         `generateHtmlSyntax encountered a node of unsupported type: ${JSON.stringify(
@@ -106,7 +109,7 @@ export const generateHtmlSynatx: NodeToHTML<UIDLNode, Promise<HastNode | HastTex
   }
 }
 
-const generatElementNode: NodeToHTML<UIDLElementNode, Promise<HastNode | HastText>> = async (
+const generateElementNode: NodeToHTML<UIDLElementNode, Promise<HastNode | HastText>> = async (
   node,
   templatesLookUp,
   propDefinitions,
@@ -137,6 +140,7 @@ const generatElementNode: NodeToHTML<UIDLElementNode, Promise<HastNode | HastTex
       node,
       propDefinitions,
       stateDefinitions,
+      templatesLookUp,
       subComponentOptions,
       structure
     )
@@ -180,17 +184,15 @@ const generatElementNode: NodeToHTML<UIDLElementNode, Promise<HastNode | HastTex
     handleStyles(node, style, propDefinitions, stateDefinitions)
   }
 
-  if (Object.keys(attrs).length > 0) {
-    handleAttributes(
-      elementType,
-      elementNode,
-      attrs,
-      propDefinitions,
-      stateDefinitions,
-      structure.options.projectRouteDefinition,
-      structure.outputOptions
-    )
-  }
+  handleAttributes(
+    elementType,
+    elementNode,
+    attrs,
+    propDefinitions,
+    stateDefinitions,
+    structure.options.projectRouteDefinition,
+    structure.outputOptions
+  )
 
   return elementNode
 }
@@ -199,6 +201,7 @@ const generateComponentContent = async (
   node: UIDLElementNode,
   propDefinitions: Record<string, UIDLPropDefinition>,
   stateDefinitions: Record<string, UIDLStateDefinition>,
+  templateLookup: Record<string, unknown>,
   subComponentOptions: {
     externals: Record<string, ComponentUIDL>
     plugins: ComponentPlugin[]
@@ -216,7 +219,6 @@ const generateComponentContent = async (
   // "Component" will not exist when generating a component because the resolver checks for illegal class names
   const compName = elementType === 'Component' ? 'AppComponent' : elementType
   const comp = UIDLUtils.cloneObject(externals[compName] || {}) as ComponentUIDL
-  const lookUpTemplates: Record<string, unknown> = {}
   let compHasSlots: boolean = false
 
   if (!comp || !comp?.node) {
@@ -256,22 +258,26 @@ const generateComponentContent = async (
   }
 
   const combinedProps = { ...propDefinitions, ...(comp?.propDefinitions || {}) }
-
-  const propsForInstance = Object.keys(combinedProps).reduce(
-    (acc: Record<string, UIDLPropDefinition>, propKey) => {
-      if (attrs[propKey]) {
-        acc[propKey] = {
-          ...combinedProps[propKey],
-          defaultValue: attrs[propKey]?.content || combinedProps[propKey]?.defaultValue,
-        }
-      } else {
-        acc[propKey] = combinedProps[propKey]
+  const propsForInstance: Record<string, UIDLPropDefinition> = {}
+  for (const propKey of Object.keys(combinedProps)) {
+    // If the attribute is a named-slot, then we can directly pass the value instead of just the content
+    if (attrs[propKey]?.type === 'element') {
+      propsForInstance[propKey] = {
+        ...combinedProps[propKey],
+        defaultValue: attrs[propKey],
       }
+      continue
+    }
 
-      return acc
-    },
-    {}
-  )
+    if (attrs[propKey]) {
+      propsForInstance[propKey] = {
+        ...combinedProps[propKey],
+        defaultValue: attrs[propKey]?.content || combinedProps[propKey]?.defaultValue,
+      }
+    } else {
+      propsForInstance[propKey] = combinedProps[propKey]
+    }
+  }
 
   const combinedStates = { ...stateDefinitions, ...(comp?.stateDefinitions || {}) }
   const statesForInstance = Object.keys(combinedStates).reduce(
@@ -291,7 +297,7 @@ const generateComponentContent = async (
   )
 
   const elementNode = HASTBuilders.createHTMLNode(StringUtils.camelCaseToDashCase(elementType))
-  lookUpTemplates[key] = elementNode
+  templateLookup[key] = elementNode
 
   const compTag = (await generateHtmlSynatx(
     {
@@ -307,7 +313,7 @@ const generateComponentContent = async (
         },
       },
     },
-    lookUpTemplates,
+    templateLookup,
     propsForInstance,
     statesForInstance,
     subComponentOptions,
@@ -337,7 +343,7 @@ const generateComponentContent = async (
         linkAfter: [],
         content: compTag,
         meta: {
-          nodesLookup: lookUpTemplates,
+          nodesLookup: templateLookup,
         },
       },
     ],
@@ -375,19 +381,41 @@ const generateComponentContent = async (
   return compTag
 }
 
-const generateDynamicNode: NodeToHTML<UIDLDynamicReference, HastNode> = (
+const generateDynamicNode: NodeToHTML<UIDLDynamicReference, Promise<HastNode>> = async (
   node,
-  _,
+  templateLookup,
   propDefinitions,
-  stateDefinitions
-) => {
-  const spanTag = HASTBuilders.createHTMLNode('span')
-  const usedReferenceValue =
-    node.content.referenceType === 'prop'
-      ? getValueFromReference(node.content.id, propDefinitions)
-      : getValueFromReference(node.content.id, stateDefinitions)
+  stateDefinitions,
+  subComponentOptions,
+  structure
+): Promise<HastNode> => {
+  const usedReferenceValue = getValueFromReference(
+    node.content.id,
+    node.content.referenceType === 'prop' ? propDefinitions : stateDefinitions
+  )
+
+  if (usedReferenceValue.type === 'element' && usedReferenceValue.defaultValue) {
+    const slotNode = await generateElementNode(
+      usedReferenceValue.defaultValue as UIDLElementNode,
+      templateLookup,
+      propDefinitions,
+      stateDefinitions,
+      subComponentOptions,
+      structure
+    )
+
+    return slotNode as HastNode
+  }
 
-  HASTUtils.addTextNode(spanTag, String(usedReferenceValue))
+  if (usedReferenceValue.type === 'element' && usedReferenceValue.defaultValue === undefined) {
+    const spanTagWrapper = HASTBuilders.createHTMLNode('span')
+    const commentNode = HASTBuilders.createComment(`Content for slot ${node.content.id}`)
+    HASTUtils.addChildNode(spanTagWrapper, commentNode)
+    return spanTagWrapper
+  }
+
+  const spanTag = HASTBuilders.createHTMLNode('span')
+  HASTUtils.addTextNode(spanTag, String(usedReferenceValue.defaultValue))
   return spanTag
 }
 
@@ -400,10 +428,12 @@ const handleStyles = (
   Object.keys(styles).forEach((styleKey) => {
     let style: string | UIDLStyleValue = styles[styleKey]
     if (style.type === 'dynamic' && style.content?.referenceType !== 'token') {
-      if (style.content.referenceType === 'prop') {
-        style = getValueFromReference(style.content.id, propDefinitions)
-      } else if (style.content.referenceType === 'state') {
-        style = getValueFromReference(style.content.id, stateDefinitions)
+      const referencedValue = getValueFromReference(
+        style.content.id,
+        style.content.referenceType === 'prop' ? propDefinitions : stateDefinitions
+      )
+      if (referencedValue.type === 'string' || referencedValue.type === 'number') {
+        style = String(referencedValue.defaultValue)
       }
       node.content.style[styleKey] = typeof style === 'string' ? staticNode(style) : style
     }
@@ -419,99 +449,110 @@ const handleAttributes = (
   routeDefinitions: UIDLRouteDefinitions,
   outputOptions: UIDLComponentOutputOptions
 ) => {
-  Object.keys(attrs).forEach((attrKey) => {
+  for (const attrKey of Object.keys(attrs)) {
     const attrValue = attrs[attrKey]
+    const { type, content } = attrValue
 
-    if (
-      attrKey === 'href' &&
-      attrValue.type === 'static' &&
-      typeof attrValue.content === 'string' &&
-      attrValue.content.startsWith('/')
-    ) {
-      let targetLink
+    switch (type) {
+      case 'static': {
+        if (attrKey === 'href' && typeof content === 'string' && content.startsWith('/')) {
+          let targetLink
 
-      const targetRoute = (routeDefinitions?.values || []).find(
-        (route) => route.pageOptions.navLink === attrValue.content
-      )
+          const targetRoute = (routeDefinitions?.values || []).find(
+            (route) => route.pageOptions.navLink === content
+          )
 
-      if (targetRoute) {
-        targetLink = targetRoute.pageOptions.navLink
-      }
+          if (targetRoute) {
+            targetLink = targetRoute.pageOptions.navLink
+          }
 
-      if (!targetRoute && attrValue.content === '/home') {
-        targetLink = '/'
-      }
+          if (!targetRoute && content === '/home') {
+            targetLink = '/'
+          }
 
-      if (!targetLink && !targetRoute) {
-        targetLink = attrValue.content
-      }
+          if (!targetLink && !targetRoute) {
+            targetLink = content
+          }
 
-      const currentPageRoute = join(...(outputOptions?.folderPath || []), './')
-      const localPrefix = relative(
-        `/${currentPageRoute}`,
-        `/${targetLink === '/' ? 'index' : targetLink}`
-      )
+          const currentPageRoute = join(...(outputOptions?.folderPath || []), './')
+          const localPrefix = relative(
+            `/${currentPageRoute}`,
+            `/${targetLink === '/' ? 'index' : targetLink}`
+          )
 
-      HASTUtils.addAttributeToNode(htmlNode, attrKey, `${localPrefix}.html`)
-      return
-    }
+          HASTUtils.addAttributeToNode(htmlNode, attrKey, `${localPrefix}.html`)
+          break
+        }
 
-    if (attrValue.type === 'dynamic') {
-      const value =
-        attrValue.content.referenceType === 'prop'
-          ? getValueFromReference(attrValue.content.id, propDefinitions)
-          : getValueFromReference(attrValue.content.id, stateDefinitions)
-      HASTUtils.addAttributeToNode(htmlNode, attrKey, String(value))
-      return
-    }
+        if (typeof content === 'boolean') {
+          htmlNode.properties[attrKey] = content === true ? 'true' : 'false'
+        } else if (typeof content === 'string' || typeof attrValue.content === 'number') {
+          let value = StringUtils.encode(String(attrValue.content))
+
+          /*
+            elementType of image is always mapped to img.
+            For reference, check `html-mapping` file.
+          */
+          if (elementType === 'img' && attrKey === 'src' && !isValidURL(value)) {
+            /*
+              By default we just prefix all the asset paths with just the
+              assetPrefix that is configured in the project. But for `html` generators
+              we need to prefix that with the current file location.
+
+              Because, all the other frameworks have a build setup. which serves all the
+              assets from the `public` folder. But in the case of `html` here is how it works
+
+              We load a file from `index.html` the request for the image goes from
+              '...url.../public/...image...'
+              If it's a nested url, then the request goes from
+              '...url/nested/public/...image..'
+
+              But the nested folder is available only on the root. With this
+              The url changes prefixes to
+
+              ../public/playground_assets/..image.. etc depending on the dept the file is in.
+            */
+            value = join(relative(join(...outputOptions.folderPath), './'), value)
+          }
+
+          HASTUtils.addAttributeToNode(htmlNode, attrKey, value)
+        }
 
-    if (attrValue.type === 'raw') {
-      HASTUtils.addAttributeToNode(htmlNode, attrKey, attrValue.content)
-      return
-    }
+        break
+      }
 
-    if (typeof attrValue.content === 'boolean') {
-      HASTUtils.addBooleanAttributeToNode(htmlNode, attrKey)
-      return
-    } else if (typeof attrValue.content === 'string' || typeof attrValue.content === 'number') {
-      let value = StringUtils.encode(String(attrValue.content))
-
-      /*
-        elementType of image is always mapped to img.
-        For reference, check `html-mapping` file.
-      */
-      if (elementType === 'img' && attrKey === 'src' && !isValidURL(value)) {
-        /*
-          By default we just prefix all the asset paths with just the
-          assetPrefix that is configured in the project. But for `html` generators
-          we need to prefix that with the current file location.
-
-          Because, all the other frameworks have a build setup. which serves all the
-          assets from the `public` folder. But in the case of `html` here is how it works
-
-          We load a file from `index.html` the request for the image goes from
-          '...url.../public/...image...'
-          If it's a nested url, then the request goes from
-          '...url/nested/public/...image..'
-
-          But the nested folder is available only on the root. With this
-          The url changes prefixes to
-
-          ../public/playground_assets/..image.. etc depending on the dept the file is in.
-        */
-        value = join(relative(join(...outputOptions.folderPath), './'), value)
+      case 'dynamic': {
+        const value = getValueFromReference(
+          content.id,
+          content.referenceType === 'prop' ? propDefinitions : stateDefinitions
+        )
+
+        HASTUtils.addAttributeToNode(htmlNode, attrKey, String(value.defaultValue))
+        break
+      }
+
+      case 'raw': {
+        HASTUtils.addAttributeToNode(htmlNode, attrKey, content)
+        break
       }
 
-      HASTUtils.addAttributeToNode(htmlNode, attrKey, value)
-      return
+      case 'element':
+      case 'import':
+        break
+
+      default: {
+        throw new HTMLComponentGeneratorError(
+          `Received ${JSON.stringify(attrValue, null, 2)} \n in handleAttributes for html`
+        )
+      }
     }
-  })
+  }
 }
 
 const getValueFromReference = (
   key: string,
   definitions: Record<string, UIDLPropDefinition>
-): string => {
+): UIDLPropDefinition | undefined => {
   const usedReferenceValue = definitions[key.includes('.') ? key.split('.')[0] : key]
 
   if (!usedReferenceValue) {
@@ -520,9 +561,9 @@ const getValueFromReference = (
     )
   }
 
-  if (!usedReferenceValue.hasOwnProperty('defaultValue')) {
+  if (['string', 'number', 'object', 'element'].includes(usedReferenceValue?.type) === false) {
     throw new HTMLComponentGeneratorError(
-      `Default value is missing from dynamic reference - ${JSON.stringify(
+      `Attribute is using dynamic value, but received of type ${JSON.stringify(
         usedReferenceValue,
         null,
         2
@@ -530,9 +571,12 @@ const getValueFromReference = (
     )
   }
 
-  if (!['string', 'number', 'object'].includes(usedReferenceValue?.type)) {
+  if (
+    usedReferenceValue.type !== 'element' &&
+    usedReferenceValue.hasOwnProperty('defaultValue') === false
+  ) {
     throw new HTMLComponentGeneratorError(
-      `Attribute is using dynamic value, but received of type ${JSON.stringify(
+      `Default value is missing from dynamic reference - ${JSON.stringify(
         usedReferenceValue,
         null,
         2
@@ -540,5 +584,5 @@ const getValueFromReference = (
     )
   }
 
-  return String(usedReferenceValue.defaultValue)
+  return usedReferenceValue
 }