@teleporthq/teleport-plugin-common 0.41.0 → 0.42.0

package/dist/esm/utils/hast-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"hast-utils.js","sourceRoot":"","sources":["../../../src/utils/hast-utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE1D,MAAM,CAAC,IAAM,yBAAyB,GAAG,UAAC,IAAc,EAAE,GAAW,EAAE,KAAqB;IAArB,sBAAA,EAAA,YAAqB;IAC1F,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;IAClD;;gCAE4B;AAC9B,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,kBAAkB,GAAG,UAAC,IAAc,EAAE,GAAW,EAAE,KAAa;IAC3E,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;AAC9B,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,IAAc,EAAE,SAAiB;IAC9D,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,SAAS,CAAA;AACnC,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,YAAY,GAAG,UAAC,IAAc,EAAE,KAAe;IAC1D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AAC3B,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,IAAc,EAAE,IAAY;IACtD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAA;AAC1C,CAAC,CAAA"}
+{"version":3,"file":"hast-utils.js","sourceRoot":"","sources":["../../../src/utils/hast-utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAE1C,MAAM,CAAC,IAAM,yBAAyB,GAAG,UACvC,IAA2B,EAC3B,GAAW,EACX,KAAqB;IAArB,sBAAA,EAAA,YAAqB;IAErB,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACvB,IAAI,CAAC,OAAO,CAAC,UAAC,OAAO,IAAK,OAAA,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAvD,CAAuD,CAAC,CAAA;QAClF,OAAM;KACP;IACD,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;IAClD,gFAAgF;AAClF,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,kBAAkB,GAAG,UAAC,IAA2B,EAAE,GAAW,EAAE,KAAa;IACxF,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACvB,IAAI,CAAC,OAAO,CAAC,UAAC,OAAO,IAAK,OAAA,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,EAAjC,CAAiC,CAAC,CAAA;QAC5D,OAAM;KACP;IACD,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;AAC9B,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,IAA2B,EAAE,SAAiB;IAC3E,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACvB,IAAI,CAAC,OAAO,CAAC,UAAC,OAAO,IAAK,OAAA,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC,EAAtC,CAAsC,CAAC,CAAA;QACjE,OAAM;KACP;IACD,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,SAAS,CAAA;AACnC,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,YAAY,GAAG,UAAC,IAA2B,EAAE,KAA0B;IAClF,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACvB,IAAI,CAAC,OAAO,CAAC,UAAC,OAAO,IAAK,OAAA,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAA5B,CAA4B,CAAC,CAAA;QACvD,OAAM;KACP;IACD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AAC3B,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,IAA2B,EAAE,IAAY;IACnE,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACvB,IAAI,CAAC,OAAO,CAAC,UAAC,OAAO,IAAK,OAAA,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,EAA3C,CAA2C,CAAC,CAAA;QACtE,OAAM;KACP;IACD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAA;AAC1C,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,KAA4B;IACxD,OAAA,YAAY,CAAC,KAAK,CAAC,KAAK,KAAK;QAC7B,CAAC,YAAY,IAAI,KAAK,IAAI,UAAU,IAAI,KAAK,IAAI,SAAS,IAAI,KAAK,CAAC;AADpE,CACoE,CAAA"}

package/dist/esm/utils/types.d.ts

@@ -0,0 +1,3 @@
+export type BinaryOperator = '===' | '+' | '-' | '/' | '%' | '*' | '**' | '&' | '|' | '>>' | '>>>' | '<<' | '^' | '==' | '!=' | '!==' | 'in' | 'instanceof' | '>' | '<' | '>=' | '<=';
+export type UnaryOperation = '+' | '-' | 'void' | 'throw' | 'delete' | '!' | '~' | 'typeof';
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/utils/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GACtB,KAAK,GACL,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,GAAG,GACH,GAAG,GACH,IAAI,GACJ,KAAK,GACL,IAAI,GACJ,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,IAAI,GACJ,YAAY,GACZ,GAAG,GACH,GAAG,GACH,IAAI,GACJ,IAAI,CAAA;AAER,MAAM,MAAM,cAAc,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,GAAG,GAAG,GAAG,GAAG,QAAQ,CAAA"}

package/dist/esm/utils/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/utils/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teleporthq/teleport-plugin-common",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "description": "Common building and modelating functions for ASTs and HASTs",
   "author": "teleportHQ",
   "license": "MIT",
@@ -27,10 +27,10 @@
     "@babel/core": "^7.5.5",
     "@babel/preset-react": "^7.22.5",
     "@babel/types": "^7.5.5",
-    "@teleporthq/teleport-shared": "^0.41.0",
-    "@teleporthq/teleport-types": "^0.41.0",
+    "@teleporthq/teleport-shared": "^0.42.0",
+    "@teleporthq/teleport-types": "^0.42.0",
     "jss": "^10.0.0",
     "jss-preset-default": "^10.0.0"
   },
-  "gitHead": "e27d8195d1be04c1991e23cad87bcf65d87ab2f3"
+  "gitHead": "5460b740bf90a0a320f7a6b56119e3aa03fc3609"
 }

package/src/builders/ast-builders.ts

@@ -4,6 +4,7 @@ import {
   objectToObjectExpression,
   addAttributeToJSXTag,
   addChildJSXTag,
+  addDynamicExpressionAttributeToJSXTag,
 } from '../utils/ast-utils'
 import {
   ImportIdentifier,
@@ -151,7 +152,7 @@ export const createFunctionalComponent = (
   t = types
 ) => {
   const returnStatement = t.returnStatement(jsxRoot)
-  const arrowFunction = t.arrowFunctionExpression([], t.blockStatement([returnStatement] || []))
+  const arrowFunction = t.arrowFunctionExpression([], t.blockStatement([returnStatement]))
 
   const declarator = t.variableDeclarator(t.identifier(componentName), arrowFunction)
   const component = t.variableDeclaration('const', [declarator])
@@ -245,7 +246,18 @@ export const appendAssetsAST = (
       addAttributeToJSXTag(scriptTag, 'type', 'text/javascript')
 
       if (assetPath) {
-        addAttributeToJSXTag(scriptTag, 'src', assetPath)
+        // If the path contains a template expression (e.g., ${process.env.KEY}),
+        // set it as a dynamic expression so it renders with backticks instead of a plain string.
+        if (assetPath.includes('${')) {
+          // Wrap in backticks so it's parsed as a template literal expression
+          addDynamicExpressionAttributeToJSXTag(
+            scriptTag,
+            { type: 'expr', content: `\`${assetPath}\`` },
+            'src'
+          )
+        } else {
+          addAttributeToJSXTag(scriptTag, 'src', assetPath)
+        }
         if (asset.options && asset.options.defer) {
           addAttributeToJSXTag(scriptTag, 'defer', true)
         }
@@ -282,3 +294,25 @@ export const appendAssetsAST = (
     }
   })
 }
+
+export const createDOMInjectionNode = (content: string) => {
+  return types.jsxElement(
+    types.jsxOpeningElement(
+      types.jsxIdentifier('span'),
+      [
+        types.jsxAttribute(
+          types.jsxIdentifier('dangerouslySetInnerHTML'),
+          types.jsxExpressionContainer(
+            types.objectExpression([
+              types.objectProperty(types.identifier('__html'), types.stringLiteral(content)),
+            ])
+          )
+        ),
+      ],
+      true
+    ),
+    null,
+    [],
+    true
+  )
+}

package/src/builders/hast-builders.ts

@@ -4,6 +4,10 @@ export const createHTMLNode = (
   tagName: string,
   children: Array<HastNode | HastText> = []
 ): HastNode => {
+  if (tagName === undefined) {
+    console.trace({ tagName, children })
+  }
+
   return {
     type: 'element',
     tagName,
@@ -18,3 +22,10 @@ export const createTextNode = (content: string): HastText => {
     value: content,
   }
 }
+
+export const createComment = (content: string): HastText => {
+  return {
+    type: 'comment',
+    value: content,
+  }
+}

package/src/builders/style-builders.ts

@@ -13,6 +13,9 @@ import {
   getContentOfStyleObject,
   getCSSVariablesContentFromTokenStyles,
 } from '../utils/style-utils'
+import { isJSXElement } from '../utils/ast-utils'
+import { isHastElement } from '../utils/hast-utils'
+
 jss.setup(preset())
 
 export const createCSSClass = (key: string, styleObject: Record<string, string | number>) => {
@@ -47,6 +50,14 @@ export const createCSSClassWithSelector = (
     .toString()
 }
 
+export const createFontDecleration = (styleObject: Record<string, string | number>) => {
+  return jss
+    .createStyleSheet({
+      '@font-face': styleObject,
+    })
+    .toString()
+}
+
 export const createCSSClassWithMediaQuery = (
   mediaOffset: string,
   styleObject: Record<string, string | number | Record<string, string | number>>
@@ -99,8 +110,25 @@ export const generateMediaStyle = (
         createCSSClassWithMediaQuery(
           `max-width: ${mediaOffset}px`,
           (styleMap[String(mediaOffset)] || []).reduce(
-            (acc: Record<string, string | number>, style) => {
-              Object.assign(acc, style)
+            (acc: Record<string, string | number | Record<string, string | number>>, style) => {
+              // Deep merge to handle both direct styles and nested subselectors
+              Object.keys(style).forEach((className) => {
+                const existingValue = acc[className]
+                const newValue = style[className]
+
+                if (!existingValue) {
+                  acc[className] = newValue as Record<string, string | number>
+                } else if (typeof existingValue === 'object' && typeof newValue === 'object') {
+                  // Both are objects, merge them
+                  acc[className] = {
+                    ...existingValue,
+                    ...(newValue as Record<string, string | number>),
+                  }
+                } else {
+                  // One or both are primitives, new value overwrites
+                  acc[className] = newValue as Record<string, string | number>
+                }
+              })
               return acc
             },
             {}
@@ -122,6 +150,7 @@ export const generateStylesFromStyleSetDefinitions = (
 ) => {
   Object.keys(styleSetDefinitions).forEach((styleId) => {
     const style = styleSetDefinitions[styleId]
+
     const { content, conditions = [], type } = style
     const name = className(style.className || styleId)
     const subselectors = style.subselectors
@@ -136,6 +165,7 @@ export const generateStylesFromStyleSetDefinitions = (
     const cls = subselectors
       ? createCSSClassWithSelector(name, `&${subselectors}`, collectedStyles)
       : createCSSClass(name, collectedStyles)
+
     if (type === 'reusable-component-style-map') {
       cssMap.unshift(cls)
     } else {
@@ -196,34 +226,28 @@ export const generateStylesFromStyleSetDefinitions = (
 
 export const setPropValueForCompStyle = (params: {
   attrs: Record<string, UIDLAttributeValue>
-  key: string
-  jsxNodesLookup: Record<string, types.JSXElement | HastNode>
+  root: types.JSXElement | HastNode
   templateStyle?: 'jsx' | 'html'
   getClassName: (str: string) => string
 }) => {
-  const { attrs, jsxNodesLookup, key, templateStyle = 'jsx', getClassName } = params
-  Object.keys(attrs).forEach((attr) => {
-    if (attrs[attr].type !== 'comp-style') {
-      return
-    }
-
-    if (templateStyle === 'jsx') {
-      const compInstanceNode = jsxNodesLookup[key] as types.JSXElement
-      compInstanceNode.openingElement?.attributes.forEach((attribute: types.JSXAttribute) => {
-        if (attribute.name?.name === attr && (attribute.value as types.StringLiteral)?.value) {
-          ;(attribute.value as types.StringLiteral).value = getClassName(
-            (attribute.value as types.StringLiteral).value
-          )
-        }
-      })
-    }
+  const { attrs, root, templateStyle = 'jsx', getClassName } = params
+  Object.keys(attrs)
+    .filter((attr) => attrs[attr].type === 'comp-style')
+    .forEach((attr) => {
+      if (templateStyle === 'jsx' && isJSXElement(root)) {
+        root.openingElement?.attributes.forEach((attribute: types.JSXAttribute) => {
+          if (
+            attribute.value?.type === 'StringLiteral' &&
+            attribute.value?.value &&
+            attribute.name?.name === attr
+          ) {
+            attribute.value.value = getClassName(attribute.value.value)
+          }
+        })
+      }
 
-    if (templateStyle === 'html') {
-      const compInstanceNode = jsxNodesLookup[key] as HastNode
-      if (!compInstanceNode?.properties[attr]) {
-        return
+      if (templateStyle === 'html' && isHastElement(root)) {
+        root.properties[attr] = getClassName(String(root.properties[attr]))
       }
-      compInstanceNode.properties[attr] = getClassName(String(compInstanceNode.properties[attr]))
-    }
-  })
+    })
 }

package/src/index.ts

@@ -7,7 +7,18 @@ import * as StyleUtils from './utils/style-utils'
 import * as HASTUtils from './utils/hast-utils'
 import ParsedASTNode from './utils/parsed-ast'
 
-export { ASTBuilders, StyleBuilders, HASTBuilders, ASTUtils, StyleUtils, HASTUtils, ParsedASTNode }
+import { createBinaryExpression } from './node-handlers/node-to-jsx/utils'
+
+export {
+  ASTBuilders,
+  StyleBuilders,
+  HASTBuilders,
+  ASTUtils,
+  StyleUtils,
+  HASTUtils,
+  ParsedASTNode,
+  createBinaryExpression,
+}
 
 export { default as createHTMLTemplateSyntax } from './node-handlers/node-to-html'
 export { default as createJSXSyntax } from './node-handlers/node-to-jsx'

package/src/node-handlers/node-to-html/constants.ts

@@ -16,4 +16,6 @@ export const DEFAULT_TEMPLATE_SYNTAX: HTMLTemplateSyntax = {
   customElementTagName: (value) => value,
   dependencyHandling: 'import',
   domHTMLInjection: 'innerHTML',
+  slotBinding: `v-slot`,
+  slotTagName: 'template',
 }

package/src/node-handlers/node-to-html/index.ts

@@ -1,5 +1,5 @@
 import * as hastUtils from '../../utils/hast-utils'
-import { createHTMLNode } from '../../builders/hast-builders'
+import { createComment, createHTMLNode } from '../../builders/hast-builders'
 import { UIDLUtils, StringUtils } from '@teleporthq/teleport-shared'
 import {
   UIDLRepeatNode,
@@ -8,6 +8,8 @@ import {
   UIDLNode,
   UIDLElementNode,
   HastNode,
+  HastText,
+  UIDLDynamicReference,
 } from '@teleporthq/teleport-types'
 import { createConditionalStatement, handleAttribute, handleEvent } from './utils'
 import { NodeToHTML } from './types'
@@ -86,7 +88,11 @@ const generateElementNode: NodeToHTML<UIDLElementNode, HastNode> = (node, params
 
 export default generateElementNode
 
-const generateNode: NodeToHTML<UIDLNode, HastNode | string> = (node, params, templateSyntax) => {
+const generateNode: NodeToHTML<UIDLNode, HastNode | HastText | string> = (
+  node,
+  params,
+  templateSyntax
+) => {
   switch (node.type) {
     case 'inject':
       if (node?.dependency) {
@@ -102,7 +108,7 @@ const generateNode: NodeToHTML<UIDLNode, HastNode | string> = (node, params, tem
       return StringUtils.encode(node.content.toString())
 
     case 'dynamic':
-      return templateSyntax.interpolation(node.content.id)
+      return generateDynamicNode(node, params, templateSyntax)
 
     case 'element':
       return generateElementNode(node, params, templateSyntax)
@@ -116,6 +122,10 @@ const generateNode: NodeToHTML<UIDLNode, HastNode | string> = (node, params, tem
     case 'slot':
       return generateSlotNode(node, params, templateSyntax)
 
+    case 'expr':
+      return 'Expression nodes are not supported'
+    case 'cms-list-repeater':
+      return 'CMS repeater nodes are not supported'
     default:
       throw new Error(
         `generateHTMLSyntax encountered a node of unsupported type: ${JSON.stringify(
@@ -127,6 +137,74 @@ const generateNode: NodeToHTML<UIDLNode, HastNode | string> = (node, params, tem
   }
 }
 
+const generateDynamicNode: NodeToHTML<UIDLDynamicReference, HastNode | HastText | string> = (
+  node,
+  params,
+  templateSyntax
+) => {
+  if (node.content.referenceType === 'global') {
+    // TODO: Check this in the future. Not throwing an error for now
+    console.info(`Global dynamic values are not supported in the HTML generator`)
+    const spanNode = createHTMLNode('span')
+    return spanNode
+  }
+
+  const usedPropType = params.propDefinitions[node.content.id]
+  if (usedPropType && usedPropType.type === 'element') {
+    let slotNode = createHTMLNode('slot')
+    const commentNode = createComment(`Default content for ${node.content.id}`)
+    hastUtils.addChildNode(slotNode, commentNode)
+
+    // Named slot handling for VueJS
+    if (templateSyntax.slotBinding === 'v-slot') {
+      hastUtils.addAttributeToNode(slotNode, 'name', node.content.id)
+      if (usedPropType.defaultValue) {
+        const defaultSlotContent = generateNode(
+          usedPropType.defaultValue as UIDLElementNode,
+          params,
+          templateSyntax
+        ) as HastNode
+        hastUtils.addChildNode(slotNode, defaultSlotContent)
+      }
+
+      return slotNode
+    } else {
+      const slotWrapper = createHTMLNode('ng-container')
+      slotNode = createHTMLNode('ng-container')
+
+      if (usedPropType.defaultValue) {
+        const defaultSlotTemplateName = StringUtils.dashCaseToCamelCase(
+          `default-${node.content.id}`
+        )
+
+        hastUtils.addAttributeToNode(
+          slotNode,
+          '*ngTemplateOutlet',
+          `${node.content.id} ? ${node.content.id} : ${defaultSlotTemplateName}`
+        )
+
+        const templateNode = createHTMLNode('ng-template')
+        hastUtils.addBooleanAttributeToNode(templateNode, `#${defaultSlotTemplateName}`)
+
+        const defaultSlotContent = generateNode(
+          usedPropType.defaultValue as UIDLElementNode,
+          params,
+          templateSyntax
+        ) as HastNode
+        hastUtils.addChildNode(templateNode, defaultSlotContent)
+        hastUtils.addChildNode(slotWrapper, templateNode)
+      } else {
+        hastUtils.addAttributeToNode(slotNode, '*ngTemplateOutlet', node.content.id)
+      }
+
+      hastUtils.addChildNode(slotWrapper, slotNode)
+      return slotWrapper
+    }
+  }
+
+  return templateSyntax.interpolation(node.content.id)
+}
+
 const generateRawHTMLNode: NodeToHTML<UIDLNode, HastNode> = (node, params, templateSyntax) => {
   const attrKey = templateSyntax.domHTMLInjection ? templateSyntax.domHTMLInjection : 'innerHTML'
   const htmlNode = createHTMLNode('span')
@@ -159,12 +237,20 @@ const generateRepeatNode: NodeToHTML<UIDLRepeatNode, HastNode> = (node, params,
   return repeatContentTag
 }
 
-const generateConditionalNode: NodeToHTML<UIDLConditionalNode, HastNode> = (
+const generateConditionalNode: NodeToHTML<UIDLConditionalNode, HastNode | HastText> = (
   node,
   params,
   templateSyntax
 ) => {
   let conditionalTag = generateNode(node.content.node, params, templateSyntax)
+
+  // We can add attributes only to tags, so in case of a text node we wrap it with a 'span'
+  if (typeof conditionalTag === 'object' && !('properties' in conditionalTag)) {
+    const wrappingSpan = createHTMLNode('span')
+    hastUtils.addTextNode(wrappingSpan, conditionalTag.value)
+    conditionalTag = wrappingSpan
+  }
+
   // conditional attribute needs to be added on a tag, so in case of a text node we wrap it with
   // a 'span' which is the less intrusive of all
   if (typeof conditionalTag === 'string') {
@@ -178,7 +264,11 @@ const generateConditionalNode: NodeToHTML<UIDLConditionalNode, HastNode> = (
   return conditionalTag
 }
 
-const generateSlotNode: NodeToHTML<UIDLSlotNode, HastNode> = (node, params, templateSyntax) => {
+const generateSlotNode: NodeToHTML<UIDLSlotNode, HastNode | HastText> = (
+  node,
+  params,
+  templateSyntax
+) => {
   const slotNode = createHTMLNode('slot')
 
   if (node.content.name) {

package/src/node-handlers/node-to-html/types.ts

@@ -2,6 +2,8 @@ import {
   UIDLDependency,
   UIDLEventHandlerStatement,
   UIDLElementNode,
+  UIDLPropDefinition,
+  UIDLStateDefinition,
 } from '@teleporthq/teleport-types'
 
 export interface HTMLTemplateGenerationParams {
@@ -11,6 +13,8 @@ export interface HTMLTemplateGenerationParams {
   // tslint:disable-next-line no-any
   dataObject: Record<string, any>
   methodsObject: Record<string, UIDLEventHandlerStatement[]>
+  propDefinitions: Record<string, UIDLPropDefinition>
+  stateDefinitions: Record<string, UIDLStateDefinition>
 }
 
 export interface HTMLTemplateSyntax {
@@ -25,6 +29,8 @@ export interface HTMLTemplateSyntax {
   customElementTagName?: (value: string) => string
   dependencyHandling?: 'import' | 'ignore'
   domHTMLInjection?: string
+  slotBinding?: string
+  slotTagName?: string
 }
 
 export type NodeToHTML<NodeType, ReturnType> = (

package/src/node-handlers/node-to-html/utils.ts

@@ -7,8 +7,12 @@ import {
   UIDLAttributeValue,
   UIDLEventHandlerStatement,
   UIDLElementNode,
+  UIDLExpressionValue,
+  UIDLDynamicReference,
 } from '@teleporthq/teleport-types'
 import { HTMLTemplateGenerationParams, HTMLTemplateSyntax } from './types'
+import { createHTMLNode } from '../../builders/hast-builders'
+import generateElementNode from '../node-to-html'
 
 export const handleAttribute = (
   htmlNode: HastNode,
@@ -58,6 +62,35 @@ export const handleAttribute = (
         hastUtils.addAttributeToNode(htmlNode, dynamicAttrKey, attrValue.content.toString())
       }
       break
+
+    case 'element':
+      const templateNode = createHTMLNode(templateSyntax.slotTagName)
+      const templateContent = generateElementNode(attrValue, params, templateSyntax)
+
+      if (templateSyntax.slotBinding === 'v-slot') {
+        hastUtils.addBooleanAttributeToNode(
+          templateNode,
+          `${templateSyntax.slotBinding}:${attrKey}`
+        )
+      } else {
+        hastUtils.addBooleanAttributeToNode(templateNode, `${templateSyntax.slotBinding}${attrKey}`)
+      }
+
+      hastUtils.addChildNode(templateNode, templateContent)
+      hastUtils.addChildNode(htmlNode, templateNode)
+      break
+
+    case 'object': {
+      dataObject[attrKey] = attrValue.content
+      hastUtils.addAttributeToNode(htmlNode, dynamicAttrKey, attrKey)
+      break
+    }
+
+    case 'expr':
+      // TODO: Check this in the future. Not throwing an error for now
+      console.info(`Expressions are not supported in HTML templates`)
+      break
+
     default:
       throw new Error(
         `generateElementNode could not generate code for attribute of type ${JSON.stringify(
@@ -112,13 +145,20 @@ export const createConditionalStatement = (node: UIDLConditionalNode): string =>
   const { node: childNode, reference, value, condition } = node.content
 
   const expression = standardizeUIDLConditionalExpression(value, condition)
-  const statement = createConditional(reference.content.id, expression)
+  if (reference.type === 'dynamic') {
+    const statement = createConditional(reference.content.id, expression)
+
+    if (childNode.type === 'conditional') {
+      return `${statement} && ${createConditionalStatement(childNode)}`
+    }
 
-  if (childNode.type === 'conditional') {
-    return `${statement} && ${createConditionalStatement(childNode)}`
+    return statement
   }
 
-  return statement
+  // expression nodes are not supported in html based templates.
+  if (reference.type === 'expr') {
+    return ''
+  }
 }
 
 const standardizeUIDLConditionalExpression = (
@@ -144,6 +184,9 @@ const createConditional = (
   }
 
   const stringConditions = conditions.map(({ operation, operand }) => {
+    // @todo
+    // unlike jsx code generation, we are not converting the operand to binary or unary operation.
+    // Please refer to https://github.com/teleporthq/teleport-code-generators/blob/development/packages/teleport-plugin-common/src/node-handlers/node-to-jsx/utils.ts#L303-L319
     return `(${stringifyConditionalExpression(conditionalKey, operation, operand)})`
   })
 
@@ -154,7 +197,7 @@ const createConditional = (
 const stringifyConditionalExpression = (
   identifier: string,
   operation: string,
-  value: string | number | boolean
+  value: string | number | boolean | UIDLDynamicReference | UIDLExpressionValue
 ) => {
   if (typeof value === 'boolean') {
     return `${value ? '' : '!'}${identifier}`
@@ -164,5 +207,17 @@ const stringifyConditionalExpression = (
     return `${identifier} ${operation} '${value}'`
   }
 
+  if (typeof value === 'number') {
+    return `${identifier} ${operation} ${value}`
+  }
+
+  if (value.type === 'dynamic') {
+    return `${identifier} ${operation} ${value.content.id}`
+  }
+
+  if (value.type === 'expr') {
+    return `${identifier} ${operation} ${value.content}`
+  }
+
   return `${identifier} ${operation} ${value}`
 }