Merge branch 'main' into feature-ref-update

Author: Doctor-wu

packages/compiler-vapor/src/transform.ts

@@ -25,7 +25,7 @@ import {
   type VaporDirectiveNode,
 } from './ir'
 import { isConstantExpression } from './utils'
-import { newDynamic } from './transforms/utils'
+import { newBlock, newDynamic } from './transforms/utils'
 
 export type NodeTransform = (
   node: RootNode | TemplateChildNode,
@@ -211,14 +211,7 @@ export function transform(
     source: node.source,
     template: [],
     component: new Set(),
-    block: {
-      type: IRNodeTypes.BLOCK,
-      node,
-      dynamic: newDynamic(),
-      effect: [],
-      operation: [],
-      returns: [],
-    },
+    block: newBlock(node),
   }
 
   const context = new TransformContext(ir, node, options)

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

@@ -9,13 +9,27 @@ import {
   createSimpleExpression,
 } from '@vue/compiler-dom'
 import { extend } from '@vue/shared'
-import { DynamicFlag, type IRDynamicInfo } from '../ir'
+import {
+  type BlockIRNode,
+  DynamicFlag,
+  type IRDynamicInfo,
+  IRNodeTypes,
+} from '../ir'
 
 export const newDynamic = (): IRDynamicInfo => ({
   flags: DynamicFlag.REFERENCED,
   children: [],
 })
 
+export const newBlock = (node: BlockIRNode['node']): BlockIRNode => ({
+  type: IRNodeTypes.BLOCK,
+  node,
+  dynamic: newDynamic(),
+  effect: [],
+  operation: [],
+  returns: [],
+})
+
 export function wrapTemplate(node: ElementNode, dirs: string[]): TemplateNode {
   if (node.tagType === ElementTypes.TEMPLATE) {
     return node

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

@@ -15,7 +15,7 @@ import {
   type VaporDirectiveNode,
 } from '../ir'
 import { findProp, propToExpression } from '../utils'
-import { newDynamic, wrapTemplate } from './utils'
+import { newBlock, wrapTemplate } from './utils'
 
 export const transformVFor = createStructuralDirectiveTransform(
   'for',
@@ -48,14 +48,7 @@ export function processFor(
   context.node = node = wrapTemplate(node, ['for'])
   context.dynamic.flags |= DynamicFlag.NON_TEMPLATE | DynamicFlag.INSERT
   const id = context.reference()
-  const render: BlockIRNode = {
-    type: IRNodeTypes.BLOCK,
-    node,
-    dynamic: newDynamic(),
-    effect: [],
-    operation: [],
-    returns: [],
-  }
+  const render: BlockIRNode = newBlock(node)
   const exitBlock = context.enterBlock(render, true)
   context.reference()
 

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

@@ -15,7 +15,7 @@ import {
   type VaporDirectiveNode,
 } from '../ir'
 import { extend } from '@vue/shared'
-import { newDynamic, wrapTemplate } from './utils'
+import { newBlock, wrapTemplate } from './utils'
 import { getSiblingIf } from './transformComment'
 
 export const transformVIf = createStructuralDirectiveTransform(
@@ -114,15 +114,7 @@ export function createIfBranch(
 ): [BlockIRNode, () => void] {
   context.node = node = wrapTemplate(node, ['if', 'else-if', 'else'])
 
-  const branch: BlockIRNode = {
-    type: IRNodeTypes.BLOCK,
-    node,
-    dynamic: newDynamic(),
-    effect: [],
-    operation: [],
-    returns: [],
-  }
-
+  const branch: BlockIRNode = newBlock(node)
   const exitBlock = context.enterBlock(branch)
   context.reference()
   return [branch, exitBlock]

packages/runtime-vapor/__tests__/renderEffect.spec.ts

@@ -180,7 +180,7 @@ describe('renderEffect', () => {
     }).rejects.toThrow('error in beforeUpdate')
 
     expect(
-      '[Vue warn] Unhandled error during execution of beforeUpdate hook',
+      '[Vue warn]: Unhandled error during execution of beforeUpdate hook',
     ).toHaveBeenWarned()
   })
 
@@ -210,7 +210,7 @@ describe('renderEffect', () => {
     }).rejects.toThrow('error in updated')
 
     expect(
-      '[Vue warn] Unhandled error during execution of updated',
+      '[Vue warn]: Unhandled error during execution of updated',
     ).toHaveBeenWarned()
   })
 

packages/runtime-vapor/src/component.ts

@@ -31,7 +31,10 @@ import type { Data } from '@vue/shared'
 export type Component = FunctionalComponent | ObjectComponent
 
 export type SetupFn = (props: any, ctx: SetupContext) => Block | Data | void
-export type FunctionalComponent = SetupFn & Omit<ObjectComponent, 'setup'>
+export type FunctionalComponent = SetupFn &
+  Omit<ObjectComponent, 'setup'> & {
+    displayName?: string
+  }
 
 export type SetupContext<E = EmitsOptions> = E extends any
   ? {
@@ -96,15 +99,46 @@ export function createSetupContext(
   }
 }
 
-export interface ObjectComponent {
-  props?: ComponentPropsOptions
+export interface ObjectComponent extends ComponentInternalOptions {
+  setup?: SetupFn
   inheritAttrs?: boolean
+  props?: ComponentPropsOptions
   emits?: EmitsOptions
-  setup?: SetupFn
   render?(ctx: any): Block
+
+  name?: string
   vapor?: boolean
 }
 
+// Note: can't mark this whole interface internal because some public interfaces
+// extend it.
+export interface ComponentInternalOptions {
+  /**
+   * @internal
+   */
+  __scopeId?: string
+  /**
+   * @internal
+   */
+  __cssModules?: Data
+  /**
+   * @internal
+   */
+  __hmrId?: string
+  /**
+   * Compat build only, for bailing out of certain compatibility behavior
+   */
+  __isBuiltIn?: boolean
+  /**
+   * This one should be exposed so that devtools can make use of it
+   */
+  __file?: string
+  /**
+   * name inferred from filename
+   */
+  __name?: string
+}
+
 type LifecycleHook<TFn = Function> = TFn[] | null
 
 export const componentKey = Symbol(__DEV__ ? `componentKey` : ``)
@@ -121,7 +155,7 @@ export interface ComponentInternalInstance {
 
   provides: Data
   scope: EffectScope
-  component: FunctionalComponent | ObjectComponent
+  component: Component
   comps: Set<ComponentInternalInstance>
   dirs: Map<Node, DirectiveBinding[]>
 

packages/runtime-vapor/src/index.ts

@@ -41,6 +41,10 @@ export {
   getCurrentWatcher,
 } from '@vue/reactivity'
 
+import { NOOP } from '@vue/shared'
+import { warn as _warn } from './warning'
+export const warn = (__DEV__ ? _warn : NOOP) as typeof _warn
+
 export { nextTick } from './scheduler'
 export {
   getCurrentInstance,