feat(vue): codegen handles void elements

histoire-dev · Apr 22, 2022 · 9b324ea · 9b324ea
1 parent ca13bc5
commit 9b324ea
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/examples/vue3/src/components/CodeGen.story.vue b/examples/vue3/src/components/CodeGen.story.vue
@@ -36,6 +36,7 @@ function onClick (event) {
   >
     <Variant
       title="html"
+      icon="carbon:code"
       :init-state="() => ({
         object: { foo: 'bar' },
       })"

diff --git a/packages/histoire/src/client/app/codegen/const.ts b/packages/histoire/src/client/app/codegen/const.ts
@@ -0,0 +1,3 @@
+export const voidElements = [
+  'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'
+]
diff --git a/packages/histoire/src/client/app/codegen/vue3.ts b/packages/histoire/src/client/app/codegen/vue3.ts
@@ -7,6 +7,7 @@ import { pascal } from 'case'
 import { createAutoBuildingObject, indent } from './util'
 import { serializeJs } from './serialize-js'
 import type { Variant } from '../types'
+import { voidElements } from './const'
 
 export async function generateSourceCode (variant: Variant) {
   const vnode = variant.slots().default?.({ state: variant.state ?? {} }) ?? []
@@ -186,7 +187,7 @@ async function printVNode (vnode: VNode): Promise<{ lines: string[], isText?: bo
     } else if (Array.isArray(vnode.children)) {
       for (const child of vnode.children) {
         const result = await printVNode(child)
-        childLines.push(...result.lines)
+          childLines.push(...result.lines)
         if (result.isText) {
           isChildText = true
         }
@@ -242,6 +243,8 @@ async function printVNode (vnode: VNode): Promise<{ lines: string[], isText?: bo
       }
     }
 
+    const isVoid = voidElements.includes(tagName.toLowerCase())
+
     if (childLines.length > 0) {
       if (childLines.length === 1 && tag.length === 1 && !attrs.length && isChildText) {
         lines.push(`${tag[0]}${childLines[0]}</${tagName}>`)
@@ -252,9 +255,9 @@ async function printVNode (vnode: VNode): Promise<{ lines: string[], isText?: bo
       }
     } else if (tag.length > 1) {
       lines.push(...tag)
-      lines.push('/>')
+      lines.push(isVoid ? '>' : '/>')
     } else {
-      lines.push(`${tag[0]} />`)
+      lines.push(`${tag[0]}${isVoid ? '' : ' /'}>`)
     }
   } else if (vnode?.shapeFlag & 1 << 4) {
     for (const child of vnode.children) {