refactor: add createPlainElement helper

diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
index 8d9df60dfa131cda9cad23b18cfa14affa1d2e3d..39cf802be0a72ba0464d94795cbb779730817b4d 100644 (file)
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
@@ -323,6 +323,15 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler: element transform > custom element 1`] = `
+"import { createPlainElement as _createPlainElement } from 'vue';
+
+export function render(_ctx) {
+  const n0 = _createPlainElement("my-custom-element", null, null, true)
+  return n0
+}"
+`;
+
 exports[`compiler: element transform > dynamic component > capitalized version w/ static binding 1`] = `
 "import { resolveDynamicComponent as _resolveDynamicComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
 

diff --git a/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts b/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
index 66768508f67afcb509311c973a53458235b2bd52..398eac518ffe3f6cef04e42106179c7fce494efa 100644 (file)
--- a/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
@@ -1037,4 +1037,15 @@ describe('compiler: element transform', () => {
     expect(code).toMatchSnapshot()
     expect(code).contain('return null')
   })
+
+  test('custom element', () => {
+    const { code } = compileWithElementTransform(
+      '<my-custom-element></my-custom-element>',
+      {
+        isCustomElement: tag => tag === 'my-custom-element',
+      },
+    )
+    expect(code).toMatchSnapshot()
+    expect(code).toContain('createPlainElement')
+  })
 })

diff --git a/packages/compiler-vapor/src/generators/component.ts b/packages/compiler-vapor/src/generators/component.ts
index fd770f16d35f695c8327e9c479ffd5f9d504ed49..8bd0a02a1c703e8ce7f44c072c2f72c3d026e4b3 100644 (file)
--- a/packages/compiler-vapor/src/generators/component.ts
+++ b/packages/compiler-vapor/src/generators/component.ts
@@ -74,7 +74,7 @@ export function genCreateComponent(
       operation.dynamic && !operation.dynamic.isStatic
         ? helper('createDynamicComponent')
         : operation.isCustomElement
-          ? helper('createComponentWithFallback')
+          ? helper('createPlainElement')
           : operation.asset
             ? helper('createComponentWithFallback')
             : helper('createComponent'),

diff --git a/packages/compiler-vapor/src/transforms/transformElement.ts b/packages/compiler-vapor/src/transforms/transformElement.ts
index 136f29d8a4e20643555cae90b5d87972b4d99282..c9b5a9d7a3fa9d38ed1a3a66d1d59243935795eb 100644 (file)
--- a/packages/compiler-vapor/src/transforms/transformElement.ts
+++ b/packages/compiler-vapor/src/transforms/transformElement.ts
@@ -82,9 +82,10 @@ export const transformElement: NodeTransform = (node, context) => {
       parent = parent.parent
     }
     const singleRoot =
-      context.root === parent &&
-      parent.node.children.filter(child => child.type !== NodeTypes.COMMENT)
-        .length === 1
+      (context.root === parent &&
+        parent.node.children.filter(child => child.type !== NodeTypes.COMMENT)
+          .length === 1) ||
+      isCustomElement
 
     if (isComponent) {
       transformComponentElement(

diff --git a/packages/runtime-vapor/__tests__/customElement.spec.ts b/packages/runtime-vapor/__tests__/customElement.spec.ts
index ab651711a47bf27162160990db50916452fbd576..47116e324b0395bac21f8b35e469f58b4935cb98 100644 (file)
--- a/packages/runtime-vapor/__tests__/customElement.spec.ts
+++ b/packages/runtime-vapor/__tests__/customElement.spec.ts
@@ -16,8 +16,8 @@ import {
   VaporTeleport,
   child,
   createComponent,
-  createComponentWithFallback,
   createIf,
+  createPlainElement,
   createSlot,
   createVaporApp,
   defineVaporAsyncComponent,
@@ -50,7 +50,7 @@ describe('defineVaporCustomElement', () => {
     document.body.appendChild(root)
     createVaporApp({
       setup() {
-        return createComponentWithFallback(tag, props, null, true)
+        return createPlainElement(tag, props, null, true)
       },
     }).mount(root)
 
@@ -125,7 +125,7 @@ describe('defineVaporCustomElement', () => {
         setup() {
           const n1 = template('<div><div id="move"></div></div>', true)() as any
           setInsertionState(n1, 0, true)
-          createComponentWithFallback('my-el-input', {
+          createPlainElement('my-el-input', {
             value: () => num.value,
             onInput: () => ($event: CustomEvent) => {
               num.value = $event.detail[0]
@@ -832,7 +832,7 @@ describe('defineVaporCustomElement', () => {
       const Provider = defineVaporCustomElement({
         setup() {
           provide('foo', foo)
-          return createComponentWithFallback('my-consumer')
+          return createPlainElement('my-consumer')
         },
       })
       customElements.define('my-provider', Provider)
@@ -873,13 +873,13 @@ describe('defineVaporCustomElement', () => {
       const ProviderA = defineVaporCustomElement({
         setup() {
           provide('fooA', fooA)
-          return createComponentWithFallback('provider-b')
+          return createPlainElement('provider-b')
         },
       })
       const ProviderB = defineVaporCustomElement({
         setup() {
           provide('fooB', fooB)
-          return createComponentWithFallback('my-multi-consumer')
+          return createPlainElement('my-multi-consumer')
         },
       })
 
@@ -1403,9 +1403,9 @@ describe('defineVaporCustomElement', () => {
 
       const App = {
         setup() {
-          return createComponentWithFallback('my-parent', null, {
+          return createPlainElement('my-parent', null, {
             default: () =>
-              createComponentWithFallback('my-child', null, {
+              createPlainElement('my-child', null, {
                 default: () => template('<span>default</span>')(),
               }),
           })
@@ -1456,9 +1456,9 @@ describe('defineVaporCustomElement', () => {
 
       const App = {
         setup() {
-          return createComponentWithFallback('my-el-teleport-parent', null, {
+          return createPlainElement('my-el-teleport-parent', null, {
             default: () =>
-              createComponentWithFallback('my-el-teleport-child', null, {
+              createPlainElement('my-el-teleport-child', null, {
                 default: () => template('<span>default</span>')(),
               }),
           })
@@ -1501,7 +1501,7 @@ describe('defineVaporCustomElement', () => {
 
       const App = {
         setup() {
-          return createComponentWithFallback('my-el-two-teleport-child', null, {
+          return createPlainElement('my-el-two-teleport-child', null, {
             default: () => [
               template('<div slot="header">header</div>')(),
               template('<span slot="body">body</span>')(),
@@ -1552,16 +1552,12 @@ describe('defineVaporCustomElement', () => {
 
       const App = {
         setup() {
-          return createComponentWithFallback(
-            'my-el-two-teleport-child-0',
-            null,
-            {
-              default: () => [
-                template('<div slot="header">header</div>')(),
-                template('<span slot="body">body</span>')(),
-              ],
-            },
-          )
+          return createPlainElement('my-el-two-teleport-child-0', null, {
+            default: () => [
+              template('<div slot="header">header</div>')(),
+              template('<span slot="body">body</span>')(),
+            ],
+          })
         },
       }
       const app = createVaporApp(App)
@@ -1591,7 +1587,7 @@ describe('defineVaporCustomElement', () => {
       )
       const ChildWrapper = {
         setup() {
-          return createComponentWithFallback('my-el-child-shadow-false', null, {
+          return createPlainElement('my-el-child-shadow-false', null, {
             default: () => template('child')(),
           })
         },
@@ -1624,7 +1620,7 @@ describe('defineVaporCustomElement', () => {
           isShown: { type: Boolean, required: true },
         },
         setup(props: any) {
-          return createComponentWithFallback(
+          return createPlainElement(
             'my-el-parent-shadow-false',
             { isShown: () => props.isShown },
             {
@@ -2029,7 +2025,7 @@ describe('defineVaporCustomElement', () => {
         const fooValue = ref('fooValue')
         const n0 = template('<div></div>')() as any
         setInsertionState(n0, null)
-        createComponentWithFallback('my-el-async-4', {
+        createPlainElement('my-el-async-4', {
           fooValue: () => fooValue.value,
         })
         return n0

diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 8073237b427b5b6002139691c6b453775e580adc..fb1db6c5a8b45367934a4de2002994330f6bad26 100644 (file)
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -642,6 +642,16 @@ export function createComponentWithFallback(
     )
   }
 
+  return createPlainElement(comp, rawProps, rawSlots, isSingleRoot, once)
+}
+
+export function createPlainElement(
+  comp: string,
+  rawProps?: LooseRawProps | null,
+  rawSlots?: LooseRawSlots | null,
+  isSingleRoot?: boolean,
+  once?: boolean,
+): HTMLElement {
   const _insertionParent = insertionParent
   const _insertionAnchor = insertionAnchor
   const _isLastInsertion = isLastInsertion

diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts
index d8fbbf0e97c8f40a298a7d73a2124d3426a7edd6..98bfda025d0169bb5016f4bfca6271a71321707a 100644 (file)
--- a/packages/runtime-vapor/src/index.ts
+++ b/packages/runtime-vapor/src/index.ts
@@ -17,6 +17,7 @@ export { setInsertionState } from './insertionState'
 export {
   createComponent,
   createComponentWithFallback,
+  createPlainElement,
   isVaporComponent,
 } from './component'
 export { renderEffect } from './renderEffect'