@teleporthq/teleport-plugin-html-base-component 0.35.0-alpha.0 → 0.36.0-alpha.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,7 +48,7 @@ export const generateHtmlSynatx: NodeToHTML<UIDLNode, Promise<HastNode | HastTex
   templatesLookUp,
   propDefinitions,
   stateDefinitions,
-  externals,
+  subComponentOptions,
   routeDefinitions,
   structure
 ) => {
@@ -64,7 +69,7 @@ export const generateHtmlSynatx: NodeToHTML<UIDLNode, Promise<HastNode | HastTex
         templatesLookUp,
         propDefinitions,
         stateDefinitions,
-        externals,
+        subComponentOptions,
         routeDefinitions,
         structure
       )
@@ -75,7 +80,7 @@ export const generateHtmlSynatx: NodeToHTML<UIDLNode, Promise<HastNode | HastTex
         templatesLookUp,
         propDefinitions,
         stateDefinitions,
-        externals,
+        subComponentOptions,
         routeDefinitions,
         structure
       )
@@ -96,7 +101,7 @@ const generatElementNode: NodeToHTML<UIDLElementNode, Promise<HastNode | HastTex
   templatesLookUp,
   propDefinitions,
   stateDefinitions,
-  externals,
+  subComponentOptions,
   routeDefinitions,
   structure
 ) => {
@@ -123,7 +128,7 @@ const generatElementNode: NodeToHTML<UIDLElementNode, Promise<HastNode | HastTex
       node,
       propDefinitions,
       stateDefinitions,
-      externals,
+      subComponentOptions,
       routeDefinitions,
       structure
     )
@@ -137,7 +142,7 @@ const generatElementNode: NodeToHTML<UIDLElementNode, Promise<HastNode | HastTex
         templatesLookUp,
         propDefinitions,
         stateDefinitions,
-        externals,
+        subComponentOptions,
         routeDefinitions,
         structure
       )
@@ -179,7 +184,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[]
@@ -187,8 +195,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
@@ -284,21 +293,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,
@@ -318,7 +327,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) => {
@@ -329,7 +346,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)
     }
   }