fix bugs with re-using components with html components

teleporthq · Sep 4, 2024 · 5bf5d9e · 5bf5d9e
1 parent f9a3a23
commit 5bf5d9e
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 59 deletions.
diff --git a/packages/teleport-plugin-css-modules/__tests__/component-scoped.ts b/packages/teleport-plugin-css-modules/__tests__/component-scoped.ts
@@ -2,6 +2,7 @@ import { createCSSModulesPlugin } from '../src'
 import { staticNode, elementNode, component } from '@teleporthq/teleport-uidl-builders'
 import { ComponentStructure } from '@teleporthq/teleport-types'
 import { createComponentChunk } from './mocks'
+import { JSXElement } from '@babel/types'
 
 describe('Component Scoped Styles', () => {
   const uidl = component('MYComponent', elementNode('container', {}, [], null, {}), {}, {})
@@ -85,8 +86,8 @@ describe('Component Scoped Styles', () => {
 
     const { chunks } = await plugin(structure)
     const jsxComponent = chunks.find((chunk) => chunk.name === 'jsx-component')
-    const jsxExpressions =
-      jsxComponent.meta.nodesLookup.container.openingElement.attributes[0].value.expression
+    const jsxExpressions = (jsxComponent?.meta?.nodesLookup?.container as unknown as JSXElement)
+      .openingElement.attributes[0]?.value.expression
 
     expect(jsxExpressions.quasis.length).toBe(4)
     expect(jsxExpressions.expressions[0]?.value).toBe('md-8')

diff --git a/packages/teleport-plugin-css-modules/__tests__/index.ts b/packages/teleport-plugin-css-modules/__tests__/index.ts
@@ -227,12 +227,12 @@ describe('plugin-css-modules', () => {
     const jsxChunk = result.chunks.find((chunk) => chunk.fileType === 'js')
     const cssFile = result.chunks.find((file) => file.fileType === 'css')
 
-    const nodeReference = jsxChunk.meta.nodesLookup.container
-    const styleAttr = nodeReference.openingElement.attributes[0]
+    const nodeReference = jsxChunk?.meta?.nodesLookup?.container
+    const styleAttr = nodeReference?.openingElement?.attributes?.[0]
 
     expect(cssFile).toBeDefined()
     expect(jsxChunk).toBeDefined()
-    expect(nodeReference.openingElement.attributes.length).toBe(1)
+    expect(nodeReference?.openingElement?.attributes?.length).toBe(1)
     expect(styleAttr.value.expression.quasis.length).toBe(3)
     expect(styleAttr.value.expression.expressions.length).toBe(2)
   })

diff --git a/packages/teleport-plugin-css-modules/__tests__/mocks.ts b/packages/teleport-plugin-css-modules/__tests__/mocks.ts
@@ -13,12 +13,17 @@ export const createComponentChunk = (elementKey: string = 'container') => {
     meta: {
       nodesLookup: {
         [elementKey]: {
+          type: 'JSXElement',
           openingElement: {
+            type: 'JSXOpeningElement',
             name: {
+              type: 'JSXIdentifier',
               name: '',
             },
+            selfClosing: false,
             attributes: [],
           },
+          children: [],
         },
       },
       dynamicRefPrefix: {
@@ -36,12 +41,12 @@ export const createComponentChunk = (elementKey: string = 'container') => {
 
 export const setupPluginStructure = (
   elementKey: string = 'container',
-  styleDefinition: UIDLStyleDefinitions = null
+  styleDefinition?: UIDLStyleDefinitions
 ) => {
   const style = styleDefinition || {
     height: staticNode('100px'),
   }
-  const element = elementNode('container', {}, [], null, style)
+  const element = elementNode('container', {}, [], undefined, style)
   element.content.key = elementKey
   const uidlSample = component('CSSModules', element)
 

diff --git a/packages/teleport-plugin-html-base-component/src/node-handlers.ts b/packages/teleport-plugin-html-base-component/src/node-handlers.ts
@@ -160,10 +160,6 @@ const generateElementNode: NodeToHTML<UIDLElementNode, Promise<HastNode | HastTe
   } = node.content
   const { dependencies } = structure
   if (dependency && (dependency as UIDLDependency)?.type === 'local') {
-    if (nodesLookup[elementType]) {
-      return nodesLookup[elementType]
-    }
-
     const compTag = await generateComponentContent(
       node,
       compName,
@@ -278,9 +274,7 @@ const generateComponentContent = async (
 
   const componentClone = UIDLUtils.cloneObject<ComponentUIDL>(component)
 
-  let compHasSlots: boolean = false
   if (children.length) {
-    compHasSlots = true
     UIDLUtils.traverseNodes(componentClone.node, (childNode, parentNode) => {
       if (childNode.type === 'slot' && parentNode.type === 'element') {
         const nonSlotNodes = parentNode.content?.children?.filter((n) => n.type !== 'slot')
@@ -489,26 +483,13 @@ const generateComponentContent = async (
     Promise.resolve(initialStructure)
   )
 
-  if (compHasSlots) {
-    result.chunks.forEach((chunk) => {
-      if (chunk.fileType === FileType.CSS) {
-        chunks.push(chunk)
-      }
-    })
-  } else {
-    const chunk = chunks.find((item) => item.name === componentClone.name)
-    if (!chunk) {
-      const styleChunk = result.chunks.find(
-        (item: ChunkDefinition) => item.fileType === FileType.CSS
-      )
-      if (!styleChunk) {
-        return
-      }
-      chunks.push(styleChunk)
+  result.chunks.forEach((chunk) => {
+    if (chunk.fileType === FileType.CSS) {
+      chunks.push(chunk)
     }
-  }
+  })
 
-  addNodeToLookup(elementType, node, compTag, nodesLookup, [compName, component.name])
+  addNodeToLookup(node.content.key, node, compTag, nodesLookup, [compName, component.name])
   return compTag
 }
 

diff --git a/packages/teleport-plugin-react-jss/__tests__/mocks.ts b/packages/teleport-plugin-react-jss/__tests__/mocks.ts
@@ -1,35 +1,45 @@
 import { ChunkDefinition, FileType, ChunkType } from '@teleporthq/teleport-types'
+import * as types from '@babel/types'
 
-export const createComponentChunk = (): ChunkDefinition => ({
-  name: 'jsx-component',
-  meta: {
-    nodesLookup: {
-      container: {
-        openingElement: {
-          name: {
-            name: '',
-          },
-          attributes: [],
-        },
+export const createComponentChunk = (): ChunkDefinition => {
+  const jsxElement: types.JSXElement = {
+    type: 'JSXElement',
+    openingElement: {
+      type: 'JSXOpeningElement',
+      name: {
+        type: 'JSXIdentifier',
+        name: '',
       },
+      selfClosing: false,
+      attributes: [],
     },
-    dynamicRefPrefix: {
-      prop: 'props',
+    children: [],
+  }
+
+  return {
+    name: 'jsx-component',
+    meta: {
+      nodesLookup: {
+        container: jsxElement as unknown as Record<string, unknown>,
+      },
+      dynamicRefPrefix: {
+        prop: 'props',
+      },
     },
-  },
-  type: ChunkType.AST,
-  fileType: FileType.JS,
-  linkAfter: ['import-local'],
-  content: {
-    declarations: [
-      {
-        init: {
-          params: [],
-          body: {
-            body: [],
+    type: ChunkType.AST,
+    fileType: FileType.JS,
+    linkAfter: ['import-local'],
+    content: {
+      declarations: [
+        {
+          init: {
+            params: [],
+            body: {
+              body: [],
+            },
           },
         },
-      },
-    ],
-  },
-})
+      ],
+    },
+  }
+}