@teleporthq/teleport-plugin-html-base-component 0.29.0-alpha.0 → 0.29.0

package/src/node-handlers.ts

@@ -17,6 +17,8 @@ import {
   UIDLStyleValue,
   GeneratorOptions,
   UIDLRouteDefinitions,
+  ComponentPlugin,
+  ComponentStructure,
 } from '@teleporthq/teleport-types'
 import { HASTBuilders, HASTUtils } from '@teleporthq/teleport-plugin-common'
 import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
@@ -29,7 +31,10 @@ type NodeToHTML<NodeType, ReturnType> = (
   templatesLookUp: Record<string, unknown>,
   propDefinitions: Record<string, UIDLPropDefinition>,
   stateDefinitions: Record<string, UIDLStateDefinition>,
-  externals: Record<string, ComponentUIDL>,
+  subComponentOptions: {
+    externals: Record<string, ComponentUIDL>
+    plugins: ComponentPlugin[]
+  },
   routeDefinitions: UIDLRouteDefinitions,
   structure: {
     chunks: ChunkDefinition[]
@@ -43,11 +48,12 @@ export const generateHtmlSynatx: NodeToHTML<UIDLNode, Promise<HastNode | HastTex
   templatesLookUp,
   propDefinitions,
   stateDefinitions,
-  externals,
+  subComponentOptions,
   routeDefinitions,
   structure
 ) => {
   switch (node.type) {
+    case 'inject':
     case 'raw':
       return HASTBuilders.createTextNode(node.content.toString())
 
@@ -63,7 +69,7 @@ export const generateHtmlSynatx: NodeToHTML<UIDLNode, Promise<HastNode | HastTex
         templatesLookUp,
         propDefinitions,
         stateDefinitions,
-        externals,
+        subComponentOptions,
         routeDefinitions,
         structure
       )
@@ -74,7 +80,7 @@ export const generateHtmlSynatx: NodeToHTML<UIDLNode, Promise<HastNode | HastTex
         templatesLookUp,
         propDefinitions,
         stateDefinitions,
-        externals,
+        subComponentOptions,
         routeDefinitions,
         structure
       )
@@ -95,7 +101,7 @@ const generatElementNode: NodeToHTML<UIDLElementNode, Promise<HastNode | HastTex
   templatesLookUp,
   propDefinitions,
   stateDefinitions,
-  externals,
+  subComponentOptions,
   routeDefinitions,
   structure
 ) => {
@@ -108,7 +114,6 @@ const generatElementNode: NodeToHTML<UIDLElementNode, Promise<HastNode | HastTex
     dependency,
     key,
   } = node.content
-
   const elementNode = HASTBuilders.createHTMLNode(elementType)
   templatesLookUp[key] = elementNode
 
@@ -122,7 +127,7 @@ const generatElementNode: NodeToHTML<UIDLElementNode, Promise<HastNode | HastTex
       node,
       propDefinitions,
       stateDefinitions,
-      externals,
+      subComponentOptions,
       routeDefinitions,
       structure
     )
@@ -136,7 +141,7 @@ const generatElementNode: NodeToHTML<UIDLElementNode, Promise<HastNode | HastTex
         templatesLookUp,
         propDefinitions,
         stateDefinitions,
-        externals,
+        subComponentOptions,
         routeDefinitions,
         structure
       )
@@ -178,7 +183,10 @@ const generateComponentContent = async (
   node: UIDLElementNode,
   propDefinitions: Record<string, UIDLPropDefinition>,
   stateDefinitions: Record<string, UIDLStateDefinition>,
-  externals: Record<string, ComponentUIDL>,
+  subComponentOptions: {
+    externals: Record<string, ComponentUIDL>
+    plugins: ComponentPlugin[]
+  },
   routeDefinitions: UIDLRouteDefinitions,
   structure: {
     chunks: ChunkDefinition[]
@@ -186,8 +194,9 @@ const generateComponentContent = async (
     options: GeneratorOptions
   }
 ) => {
+  const { externals, plugins } = subComponentOptions
   const { elementType, attrs = {}, key, children = [] } = node.content
-  const { dependencies, chunks, options } = structure
+  const { dependencies, chunks = [], options } = structure
   const comp = UIDLUtils.cloneObject(externals[elementType] || {}) as ComponentUIDL
   const lookUpTemplates: Record<string, unknown> = {}
   let compHasSlots: boolean = false
@@ -229,7 +238,6 @@ const generateComponentContent = async (
   }
 
   const combinedProps = { ...propDefinitions, ...(comp?.propDefinitions || {}) }
-
   const propsForInstance = Object.keys(combinedProps).reduce(
     (acc: Record<string, UIDLPropDefinition>, propKey) => {
       if (attrs[propKey]) {
@@ -262,7 +270,6 @@ const generateComponentContent = async (
     },
     {}
   )
-
   const elementNode = HASTBuilders.createHTMLNode(StringUtils.camelCaseToDashCase(elementType))
   lookUpTemplates[key] = elementNode
 
@@ -283,21 +290,21 @@ const generateComponentContent = async (
     lookUpTemplates,
     propsForInstance,
     statesForInstance,
-    externals,
+    subComponentOptions,
     routeDefinitions,
     structure
   )) as unknown as HastNode
 
   const cssPlugin = createCSSPlugin({
     templateStyle: 'html',
-    templateChunkName: 'html-template',
+    templateChunkName: DEFAULT_COMPONENT_CHUNK_NAME,
     declareDependency: 'import',
     forceScoping: true,
     chunkName: comp.name,
     staticPropReferences: true,
   })
 
-  const result = await cssPlugin({
+  const initialStructure: ComponentStructure = {
     uidl: {
       ...comp,
       propDefinitions: propsForInstance,
@@ -317,7 +324,15 @@ const generateComponentContent = async (
     ],
     dependencies,
     options,
-  })
+  }
+
+  const result = await [cssPlugin, ...plugins].reduce(
+    async (previousPluginOperation: Promise<ComponentStructure>, plugin) => {
+      const modifiedStructure = await previousPluginOperation
+      return plugin(modifiedStructure)
+    },
+    Promise.resolve(initialStructure)
+  )
 
   if (compHasSlots) {
     result.chunks.forEach((chunk) => {
@@ -328,7 +343,12 @@ const generateComponentContent = async (
   } else {
     const chunk = chunks.find((item) => item.name === comp.name)
     if (!chunk) {
-      const styleChunk = result.chunks.find((item: ChunkDefinition) => item.name === comp.name)
+      const styleChunk = result.chunks.find(
+        (item: ChunkDefinition) => item.fileType === FileType.CSS
+      )
+      if (!styleChunk) {
+        return
+      }
       chunks.push(styleChunk)
     }
   }
@@ -409,7 +429,7 @@ const handleAttributes = (
     }
 
     if (attrValue.type === 'raw') {
-      HASTUtils.addAttributeToNode(htmlNode, attrKey, String(attrValue.content))
+      HASTUtils.addAttributeToNode(htmlNode, attrKey, attrValue.content)
       return
     }
 
@@ -427,7 +447,7 @@ const getValueFromReference = (
   key: string,
   definitions: Record<string, UIDLPropDefinition>
 ): string => {
-  const usedReferenceValue = definitions[key]
+  const usedReferenceValue = definitions[key.includes('.') ? key.split('.')[0] : key]
 
   if (!usedReferenceValue) {
     throw new HTMLComponentGeneratorError(
@@ -445,7 +465,7 @@ const getValueFromReference = (
     )
   }
 
-  if (!['string', 'number'].includes(usedReferenceValue?.type)) {
+  if (!['string', 'number', 'object'].includes(usedReferenceValue?.type)) {
     throw new HTMLComponentGeneratorError(
       `Attribute is using dynamic value, but received of type ${JSON.stringify(
         usedReferenceValue,