@teleporthq/teleport-plugin-html-base-component 0.36.5 → 0.37.2

package/src/node-handlers.ts

@@ -22,10 +22,11 @@ import {
   UIDLComponentOutputOptions,
   UIDLElement,
   ElementsLookup,
+  UIDLConditionalNode,
 } from '@teleporthq/teleport-types'
 import { join, relative } from 'path'
-import { HASTBuilders, HASTUtils } from '@teleporthq/teleport-plugin-common'
-import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
+import { HASTBuilders, HASTUtils, ASTUtils } from '@teleporthq/teleport-plugin-common'
+import { GenericUtils, StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
 import { staticNode } from '@teleporthq/teleport-uidl-builders'
 import { createCSSPlugin } from '@teleporthq/teleport-plugin-css'
 import { generateUniqueKeys, createNodesLookup } from '@teleporthq/teleport-uidl-resolver'
@@ -128,7 +129,69 @@ export const generateHtmlSyntax: NodeToHTML<UIDLNode, Promise<HastNode | HastTex
       return dynamicNode
 
     case 'conditional':
-      return HASTBuilders.createComment('Conditional nodes are not supported in HTML')
+      const conditionalNodeComment = HASTBuilders.createComment(
+        'Conditional nodes are not supported in HTML'
+      )
+      const {
+        value: staticValue,
+        reference,
+        condition: { conditions, matchingCriteria },
+      } = node.content
+
+      if (reference.type !== 'dynamic') {
+        return conditionalNodeComment
+      }
+
+      const {
+        content: { referenceType, id },
+      } = reference
+
+      switch (referenceType) {
+        case 'prop': {
+          const usedProp = propDefinitions[id]
+          if (usedProp === undefined || usedProp.defaultValue === undefined) {
+            return conditionalNodeComment
+          }
+
+          // Since we know the operand and the default value from the prop.
+          // We can try building the condition and check if the condition is true or false.
+          // @todo: You can only use a 'value' in UIDL or 'conditions' but not both.
+          // UIDL validations need to be improved on this aspect.
+          const dynamicConditions = createConditionalStatement(
+            staticValue !== undefined ? [{ operand: staticValue, operation: '===' }] : conditions,
+            usedProp.defaultValue
+          )
+          const matchCondition = matchingCriteria && matchingCriteria === 'all' ? '&&' : '||'
+          const conditionString = dynamicConditions.join(` ${matchCondition} `)
+
+          try {
+            // tslint:disable-next-line function-constructor
+            const isConditionPassing = new Function(`return ${conditionString}`)()
+            if (isConditionPassing) {
+              return generateHtmlSyntax(
+                node.content.node,
+                compName,
+                nodesLookup,
+                propDefinitions,
+                stateDefinitions,
+                subComponentOptions,
+                structure
+              )
+            }
+          } catch (error) {
+            return conditionalNodeComment
+          }
+
+          return conditionalNodeComment
+        }
+
+        case 'state':
+        default:
+          return conditionalNodeComment
+      }
+
+    case 'expr':
+      return HASTBuilders.createComment('Expressions are not supported in HTML')
 
     default:
       throw new HTMLComponentGeneratorError(
@@ -141,6 +204,40 @@ export const generateHtmlSyntax: NodeToHTML<UIDLNode, Promise<HastNode | HastTex
   }
 }
 
+const createConditionalStatement = (
+  conditions: UIDLConditionalNode['content']['condition']['conditions'],
+  leftOperand: UIDLPropDefinition['defaultValue']
+) => {
+  return conditions.map((condition) => {
+    const { operation, operand } = condition
+
+    if (operand === undefined) {
+      return `${ASTUtils.convertToUnaryOperator(operation)}${getValueType(operand)}`
+    }
+
+    return `${getValueType(leftOperand)} ${ASTUtils.convertToBinaryOperator(
+      operation
+    )} ${getValueType(operand)}`
+  })
+}
+
+const getValueType = (value: UIDLPropDefinition['defaultValue']) => {
+  const valueType = typeof value
+  switch (valueType) {
+    case 'string':
+      return `"${value}"`
+    case 'number':
+      return value
+    case 'boolean':
+      return value
+    default:
+      throw new HTMLComponentGeneratorError(
+        `Conditional node received an operand of type ${valueType} \n
+          Received ${JSON.stringify(value)}`
+      )
+  }
+}
+
 const generateElementNode: NodeToHTML<UIDLElementNode, Promise<HastNode | HastText>> = async (
   node,
   compName,
@@ -339,10 +436,15 @@ const generateComponentContent = async (
   const combinedStates = { ...stateDefinitions, ...(componentClone?.stateDefinitions || {}) }
   const statesForInstance = Object.keys(combinedStates).reduce(
     (acc: Record<string, UIDLStateDefinition>, propKey) => {
-      if (attrs[propKey]) {
+      const attr = attrs[propKey]
+      if (attr.type === 'object') {
+        throw new Error(`Object attributes are not supported in html exports`)
+      }
+
+      if (attr) {
         acc[propKey] = {
           ...combinedStates[propKey],
-          defaultValue: attrs[propKey]?.content || combinedStates[propKey]?.defaultValue,
+          defaultValue: attr?.content || combinedStates[propKey]?.defaultValue,
         }
       } else {
         acc[propKey] = combinedStates[propKey]
@@ -358,8 +460,9 @@ const generateComponentContent = async (
   // We check if we are passing any props and pick the value from the atrrs, if not we pick the value from the propDefinitions of
   // the component instance that we are using here.
   for (const propKey of Object.keys(combinedProps)) {
-    const prop = attrs[propKey]
-    if (prop?.type === 'element') {
+    const attribute = attrs[propKey]
+
+    if (attribute?.type === 'element') {
       propsForInstance[propKey] = {
         ...combinedProps[propKey],
         defaultValue: attrs[propKey],
@@ -373,13 +476,15 @@ const generateComponentContent = async (
         subComponentOptions,
         structure
       )
-    } else if (prop?.type === 'dynamic') {
+    }
+
+    if (attribute?.type === 'dynamic') {
       // When we are using a component instance in a component and the attribute
       // that is passed to the component is of dynamic reference.
       // If means, the component is redirecting the prop that is received to the prop of the component that it is consuming.
       // In this case, we need to pass the value of the prop that is received to the prop of the component that it is consuming.
       // And similary we do the same for the states.
-      switch (prop.content.referenceType) {
+      switch (attribute.content.referenceType) {
         case 'prop':
           propsForInstance[propKey] = combinedProps[propKey]
           break
@@ -388,15 +493,30 @@ const generateComponentContent = async (
           break
         default:
           throw new Error(
-            `ReferenceType ${prop.content.referenceType} is not supported in HTML Export.`
+            `ReferenceType ${attribute.content.referenceType} is not supported in HTML Export.`
           )
       }
-    } else if (prop) {
+    }
+
+    if (attribute?.type === 'object') {
       propsForInstance[propKey] = {
         ...combinedProps[propKey],
-        defaultValue: attrs[propKey]?.content || combinedProps[propKey]?.defaultValue,
+        defaultValue: (attribute?.content as object) || combinedProps[propKey]?.defaultValue,
       }
-    } else {
+    }
+
+    if (
+      attribute?.type !== 'dynamic' &&
+      attribute?.type !== 'element' &&
+      attribute?.type !== 'object'
+    ) {
+      propsForInstance[propKey] = {
+        ...combinedProps[propKey],
+        defaultValue: attribute?.content || combinedProps[propKey]?.defaultValue,
+      }
+    }
+
+    if (attribute === undefined) {
       const propFromCurrentComponent = combinedProps[propKey]
       if (propFromCurrentComponent.type === 'element' && propFromCurrentComponent.defaultValue) {
         await generateHtmlSyntax(
@@ -501,11 +621,35 @@ const generateDynamicNode: NodeToHTML<UIDLDynamicReference, Promise<HastNode | H
   propDefinitions,
   stateDefinitions
 ): Promise<HastNode | HastText> => {
+  if (node.content.referenceType === 'locale') {
+    const localeTag = HASTBuilders.createHTMLNode('span')
+    const commentNode = HASTBuilders.createComment(`Content for locale ${node.content.id}`)
+    HASTUtils.addChildNode(localeTag, commentNode)
+    return localeTag
+  }
+
   const usedReferenceValue = getValueFromReference(
     node.content.id,
     node.content.referenceType === 'prop' ? propDefinitions : stateDefinitions
   )
 
+  if (usedReferenceValue.type === 'object' && usedReferenceValue.defaultValue) {
+    // Let's say users are biding the prop to a node using something like this "fields.Title"
+    // But the fields in the object is the value where the object is defined either in propDefinitions
+    // or on the attrs. So, we just need to parsed the rest of the object path and get the value from the object.
+    const pathKeys: string[] = node.content.id.split(/\.|\[(['"]?)(.+?)\1\]/).filter(Boolean)
+    pathKeys.shift()
+
+    const value = GenericUtils.getValueFromPath(
+      pathKeys.join('.'),
+      usedReferenceValue.defaultValue as Record<string, UIDLPropDefinition>
+    )
+
+    if (value) {
+      return HASTBuilders.createTextNode(String(value))
+    }
+  }
+
   if (usedReferenceValue.type === 'element' && usedReferenceValue.defaultValue) {
     const elementNode = usedReferenceValue.defaultValue as UIDLElementNode
 
@@ -651,6 +795,7 @@ const handleAttributes = (
       case 'element':
       case 'import':
       case 'expr':
+      case 'object':
         break
 
       default: {