@teleporthq/teleport-project-plugin-parse-embed 0.34.0-alpha.0 → 0.34.0

package/src/component-plugin.ts

@@ -0,0 +1,103 @@
+import { ComponentPlugin, ComponentPluginFactory, HastNode } from '@teleporthq/teleport-types'
+import { UIDLUtils } from '@teleporthq/teleport-shared'
+import { SUPPORTED_PROJECT_TYPES } from './utils'
+import type { JSXElement, JSXIdentifier, JSXText } from '@babel/types'
+
+interface ParseEmbedPluginConfig {
+  projectType: SUPPORTED_PROJECT_TYPES
+}
+
+const NODE_MAPPER: Record<
+  SUPPORTED_PROJECT_TYPES,
+  Promise<(content: unknown, options: unknown) => string>
+> = {
+  'teleport-project-html': import('hast-util-to-html').then((mod) => mod.toHtml),
+  'teleport-project-angular': import('hast-util-to-html').then((mod) => mod.toHtml),
+  'teleport-project-vue': import('hast-util-to-html').then((mod) => mod.toHtml),
+  'teleport-project-nuxt': import('hast-util-to-html').then((mod) => mod.toHtml),
+  'teleport-project-react': import('hast-util-to-jsx-inline-script').then((mod) => mod.default),
+  'teleport-project-next': import('hast-util-to-jsx-inline-script').then((mod) => mod.default),
+}
+
+const COMPONENT_CHUNK_NAMES: Record<SUPPORTED_PROJECT_TYPES, string> = {
+  'teleport-project-html': 'html-chunk',
+  'teleport-project-angular': 'template-chunk',
+  'teleport-project-vue': 'template-chunk',
+  'teleport-project-nuxt': 'template-chunk',
+  'teleport-project-next': 'jsx-component',
+  'teleport-project-react': 'jsx-component',
+}
+
+export const createParseEmbedPlugin: ComponentPluginFactory<ParseEmbedPluginConfig> = (config) => {
+  const { projectType } = config
+
+  if (!NODE_MAPPER[projectType]) {
+    throw new Error(`Received a invalid ${projectType}`)
+  }
+
+  const componentPlugin: ComponentPlugin = async (structure) => {
+    const { uidl, chunks, dependencies } = structure
+    const compontnChunk = chunks.find((chunk) => chunk?.name === COMPONENT_CHUNK_NAMES[projectType])
+
+    if (!compontnChunk) {
+      throw new Error(`MIssing component chunk to parse for embeds`)
+    }
+
+    const fromHtml = (await import('hast-util-from-html')).fromHtml
+    const hastToJsxOrHtml = await NODE_MAPPER[projectType]
+
+    UIDLUtils.traverseElements(uidl.node, (element) => {
+      const { key, elementType, attrs } = element
+
+      if (
+        (elementType === 'dangerous-html' || element.dependency?.path === 'dangerous-html') &&
+        attrs?.html
+      ) {
+        const hastNodes = fromHtml(element.attrs.html.content as string, {
+          fragment: true,
+        })
+        const content = hastToJsxOrHtml(hastNodes, { wrapper: 'fragment' })
+
+        if (
+          projectType === 'teleport-project-html' ||
+          projectType === 'teleport-project-angular' ||
+          projectType === 'teleport-project-vue' ||
+          projectType === 'teleport-project-nuxt'
+        ) {
+          const node = compontnChunk.meta.nodesLookup[key] as HastNode
+          if (!node) {
+            return
+          }
+          /*
+            Convert the HastNode to HastText
+          */
+
+          Object.assign(node, {
+            type: 'text',
+            value: content,
+          })
+
+          delete node.children
+          delete node.properties
+          delete dependencies['dangerous-html']
+        } else {
+          const node = compontnChunk.meta.nodesLookup[key] as JSXElement
+          if (!node) {
+            return
+          }
+          ;(node.openingElement.name as JSXIdentifier).name = 'React.Fragment'
+          ;(node.closingElement.name as JSXIdentifier).name = 'React.Fragment'
+          node.openingElement.attributes = []
+          node.children.push({
+            type: 'JSXText' as const,
+            value: content,
+          } as JSXText)
+        }
+      }
+    })
+
+    return structure
+  }
+
+  return componentPlugin
+}

package/src/index.ts

@@ -1,106 +1,31 @@
-import { UIDLUtils } from '@teleporthq/teleport-shared'
-import {
-  ProjectPluginStructure,
-  ProjectPlugin,
-  UIDLElementNode,
-  UIDLRootComponent,
-  ComponentUIDL,
-} from '@teleporthq/teleport-types'
-import { JS_EXECUTION_DEPENDENCIES, SUPPORTED_PROJECT_TYPES } from './utils'
-
-const NODE_MAPPER: Record<SUPPORTED_PROJECT_TYPES, Promise<(content: unknown) => string>> = {
-  'teleport-project-html': import('hast-util-to-html').then((mod) => mod.toHtml),
-  'teleport-project-react': import('hast-util-to-jsx-inline-script').then((mod) => mod.default),
-  'teleport-project-next': import('hast-util-to-jsx-inline-script').then((mod) => mod.default),
-}
-
-export class ProjectPluginParseEmbed implements ProjectPlugin {
-  fromHtml: (value: string, opts: { fragment: boolean }) => unknown
-  hastToJsxOrHtml: (content: unknown, opts: { wrapper: string }) => string
-
-  async loadFromHTML(): Promise<(value: string, opts: { fragment: boolean }) => unknown> {
-    if (!this.fromHtml) {
-      this.fromHtml = (await import('hast-util-from-html')).fromHtml
-    }
-    return this.fromHtml
-  }
-
-  async loadNodeMapper(
-    id: SUPPORTED_PROJECT_TYPES
-  ): Promise<(content: unknown, opts: { wrapper: string }) => string> {
-    if (!this.hastToJsxOrHtml) {
-      this.hastToJsxOrHtml = await NODE_MAPPER[id]
-    }
-    return this.hastToJsxOrHtml
-  }
-
-  async traverseComponentUIDL(node: UIDLElementNode, id: SUPPORTED_PROJECT_TYPES): Promise<void> {
-    return new Promise((resolve, reject) => {
-      try {
-        UIDLUtils.traverseElements(node, (element) => {
-          if (element.elementType === 'html-node' && element.attrs?.html && NODE_MAPPER[id]) {
-            const hastNodes = this.fromHtml(element.attrs.html.content as string, {
-              fragment: true,
-            })
-            const content = this.hastToJsxOrHtml(hastNodes, { wrapper: 'fragment' })
-            element.elementType = 'container'
-            element.attrs = {}
-            element.style = { display: { type: 'static', content: 'contents' } }
-            element.children = [
-              {
-                type: 'inject',
-                content,
-                ...(content.includes('<Script') && { dependency: JS_EXECUTION_DEPENDENCIES[id] }),
-              },
-            ]
-          }
-        })
-        resolve()
-      } catch (error) {
-        reject(error)
-      }
-    })
-  }
-
-  async traverseNodeAndAddImport(
-    componentUIDL: UIDLRootComponent | ComponentUIDL,
-    projectType: SUPPORTED_PROJECT_TYPES
-  ) {
-    await this.traverseComponentUIDL(componentUIDL.node, projectType)
-  }
+import { ProjectPluginStructure, ProjectPlugin } from '@teleporthq/teleport-types'
+import { createParseEmbedPlugin } from './component-plugin'
+import { SUPPORTED_PROJECT_TYPES } from './utils'
 
+class ProjectPluginParseEmbed implements ProjectPlugin {
   async runBefore(structure: ProjectPluginStructure) {
-    await this.loadFromHTML()
-    const projectType = structure.strategy.id as SUPPORTED_PROJECT_TYPES
-    await this.loadNodeMapper(projectType)
+    const parseEmbedPlugin = createParseEmbedPlugin({
+      projectType: structure.strategy.id as SUPPORTED_PROJECT_TYPES,
+    })
 
-    if (!NODE_MAPPER[projectType]) {
-      return structure
+    if (structure.strategy.pages?.plugins?.length > 0) {
+      structure.strategy.pages.plugins.push(parseEmbedPlugin)
+    } else {
+      structure.strategy.pages.plugins = [parseEmbedPlugin]
     }
 
-    const promises: Array<Promise<void>> = []
-    promises.push(this.traverseNodeAndAddImport(structure.uidl.root, projectType))
-
-    const components = Object.keys(structure.uidl?.components || {})
-    for (let i = 0; i < components.length; i++) {
-      promises.push(
-        this.traverseNodeAndAddImport(structure.uidl.components[components[i]], projectType)
-      )
+    if (structure.strategy.components?.plugins?.length > 0) {
+      structure.strategy.components.plugins.push(parseEmbedPlugin)
+    } else {
+      structure.strategy.components.plugins = [parseEmbedPlugin]
     }
 
-    await Promise.all(promises)
     return structure
   }
 
   async runAfter(structure: ProjectPluginStructure) {
-    if (!NODE_MAPPER[structure.strategy.id as SUPPORTED_PROJECT_TYPES]) {
-      return structure
-    }
-
-    if (structure.strategy.id === 'teleport-project-react') {
-      structure.dependencies['dangerous-html'] = '^0.1.13'
-    }
-
     return structure
   }
 }
+
+export { createParseEmbedPlugin, ProjectPluginParseEmbed }

package/src/utils.ts

@@ -4,6 +4,9 @@ export type SUPPORTED_PROJECT_TYPES =
   | 'teleport-project-html'
   | 'teleport-project-react'
   | 'teleport-project-next'
+  | 'teleport-project-angular'
+  | 'teleport-project-vue'
+  | 'teleport-project-nuxt'
 
 export const JS_EXECUTION_DEPENDENCIES: Record<string, UIDLExternalDependency> = {
   'teleport-project-react': {