feat: implement defineVaporCustomElement (#14017)

Author: edison1105

packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap

@@ -333,6 +333,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';
 

packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts

@@ -1042,6 +1042,17 @@ describe('compiler: element transform', () => {
     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')
+  })
+
   test('svg', () => {
     const t = `<svg><circle r="40"></circle></svg>`
     const { code, ir } = compileWithElementTransform(t)

packages/compiler-vapor/src/generators/component.ts

@@ -73,9 +73,11 @@ export function genCreateComponent(
     ...genCall(
       operation.dynamic && !operation.dynamic.isStatic
         ? helper('createDynamicComponent')
-        : operation.asset
-          ? helper('createComponentWithFallback')
-          : helper('createComponent'),
+        : operation.isCustomElement
+          ? helper('createPlainElement')
+          : operation.asset
+            ? helper('createComponentWithFallback')
+            : helper('createComponent'),
       tag,
       rawProps,
       rawSlots,
@@ -86,7 +88,9 @@ export function genCreateComponent(
   ]
 
   function genTag() {
-    if (operation.dynamic) {
+    if (operation.isCustomElement) {
+      return JSON.stringify(operation.tag)
+    } else if (operation.dynamic) {
       if (operation.dynamic.isStatic) {
         return genCall(
           helper('resolveDynamicComponent'),

packages/compiler-vapor/src/ir/index.ts

@@ -204,6 +204,7 @@ export interface CreateComponentIRNode extends BaseIRNode {
   root: boolean
   once: boolean
   dynamic?: SimpleExpressionNode
+  isCustomElement: boolean
   parent?: number
   anchor?: number
   append?: boolean

packages/compiler-vapor/src/transforms/transformElement.ts

@@ -58,7 +58,12 @@ export const transformElement: NodeTransform = (node, context) => {
     )
       return
 
-    const isComponent = node.tagType === ElementTypes.COMPONENT
+    // treat custom elements as components because the template helper cannot
+    // resolve them properly; they require creation via createElement
+    const isCustomElement = !!context.options.isCustomElement(node.tag)
+    const isComponent =
+      node.tagType === ElementTypes.COMPONENT || isCustomElement
+
     const isDynamicComponent = isComponentTag(node.tag)
     const propsResult = buildProps(
       node,
@@ -78,9 +83,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(
@@ -89,6 +95,7 @@ export const transformElement: NodeTransform = (node, context) => {
         singleRoot,
         context,
         isDynamicComponent,
+        isCustomElement,
       )
     } else {
       transformNativeElement(
@@ -108,6 +115,7 @@ function transformComponentElement(
   singleRoot: boolean,
   context: TransformContext,
   isDynamicComponent: boolean,
+  isCustomElement: boolean,
 ) {
   const dynamicComponent = isDynamicComponent
     ? resolveDynamicComponent(node)
@@ -116,7 +124,7 @@ function transformComponentElement(
   let { tag } = node
   let asset = true
 
-  if (!dynamicComponent) {
+  if (!dynamicComponent && !isCustomElement) {
     const fromSetup = resolveSetupReference(tag, context)
     if (fromSetup) {
       tag = fromSetup
@@ -161,6 +169,7 @@ function transformComponentElement(
     slots: [...context.slots],
     once: context.inVOnce,
     dynamic: dynamicComponent,
+    isCustomElement,
   }
   context.slots = []
 }

packages/runtime-core/src/apiCreateApp.ts

@@ -111,6 +111,11 @@ export interface App<HostElement = any> {
    */
   _ceVNode?: VNode
 
+  /**
+   * @internal vapor custom element instance
+   */
+  _ceComponent?: GenericComponentInstance | null
+
   /**
    * v2 compat only
    */

packages/runtime-core/src/componentCurrentInstance.ts

@@ -5,6 +5,7 @@ import type {
 } from './component'
 import { currentRenderingInstance } from './componentRenderContext'
 import { type EffectScope, setCurrentScope } from '@vue/reactivity'
+import { warn } from './warning'
 
 /**
  * @internal
@@ -90,3 +91,36 @@ export const setCurrentInstance = (
     simpleSetCurrentInstance(instance)
   }
 }
+
+const internalOptions = ['ce'] as const
+
+/**
+ * @internal
+ */
+export const useInstanceOption = <K extends (typeof internalOptions)[number]>(
+  key: K,
+  silent = false,
+): {
+  hasInstance: boolean
+  value: GenericComponentInstance[K] | undefined
+} => {
+  const instance = getCurrentGenericInstance()
+  if (!instance) {
+    if (__DEV__ && !silent) {
+      warn(`useInstanceOption called without an active component instance.`)
+    }
+    return { hasInstance: false, value: undefined }
+  }
+
+  if (!internalOptions.includes(key)) {
+    if (__DEV__) {
+      warn(
+        `useInstanceOption only accepts ` +
+          ` ${internalOptions.map(k => `'${k}'`).join(', ')} as key, got '${key}'.`,
+      )
+    }
+    return { hasInstance: true, value: undefined }
+  }
+
+  return { hasInstance: true, value: instance[key] }
+}

packages/runtime-core/src/hmr.ts

@@ -123,7 +123,16 @@ function reload(id: string, newComp: HMRComponent): void {
   // create a snapshot which avoids the set being mutated during updates
   const instances = [...record.instances]
 
-  if (newComp.__vapor) {
+  if (newComp.__vapor && !instances.some(i => i.ceReload)) {
+    // For multiple instances with the same __hmrId, remove styles first before reload
+    // to avoid the second instance's style removal deleting the first instance's
+    // newly added styles (since hmrReload is synchronous)
+    for (const instance of instances) {
+      // update custom element child style
+      if (instance.root && instance.root.ce && instance !== instance.root) {
+        instance.root.ce._removeChildStyle(instance.type)
+      }
+    }
     for (const instance of instances) {
       instance.hmrReload!(newComp)
     }

packages/runtime-core/src/index.ts

@@ -105,6 +105,11 @@ export {
 // plugins
 export { getCurrentInstance } from './component'
 
+/**
+ * @internal
+ */
+export { useInstanceOption } from './component'
+
 // For raw render function users
 export { h } from './h'
 // Advanced render function utilities