From 464c0cfe761e591f7c3974ee20f22a74f42df9e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 14 Mar 2024 15:44:29 +0800
Subject: [PATCH 01/13] wip: createComponent

---
 .../__snapshots__/compile.spec.ts.snap        |  18 +--
 .../src/generators/component.ts               |  20 +++
 .../src/generators/operation.ts               |   3 +
 packages/compiler-vapor/src/ir.ts             |  12 ++
 .../src/transforms/transformElement.ts        | 128 +++++++++++-------
 .../runtime-vapor/src/apiCreateComponent.ts   |  12 ++
 packages/runtime-vapor/src/directives.ts      |   4 -
 .../src/helpers/resolveAssets.ts              |   7 +
 packages/runtime-vapor/src/index.ts           |   4 +-
 9 files changed, 147 insertions(+), 61 deletions(-)
 create mode 100644 packages/compiler-vapor/src/generators/component.ts
 create mode 100644 packages/runtime-vapor/src/apiCreateComponent.ts
 create mode 100644 packages/runtime-vapor/src/helpers/resolveAssets.ts

diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
index 8eb9a09ea..407b7690c 100644
--- a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
@@ -120,18 +120,20 @@ export function render(_ctx) {
 `;
 
 exports[`compile > directives > v-pre > should not affect siblings after it 1`] = `
-"import { createTextNode as _createTextNode, insert as _insert, renderEffect as _renderEffect, setText as _setText, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
+"import { resolveComponent as _resolveComponent, createComponent as _createComponent, createTextNode as _createTextNode, insert as _insert, renderEffect as _renderEffect, setText as _setText, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
 const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
-const t1 = _template("<div><Comp></Comp></div>")
+const t1 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  const n2 = t1()
-  const n1 = _createTextNode()
-  _insert(n1, n2)
-  _renderEffect(() => _setText(n1, _ctx.bar))
-  _renderEffect(() => _setDynamicProp(n2, "id", _ctx.foo))
-  return [n0, n2]
+  const n3 = t1()
+  const n1 = n3.firstChild
+  const n1 = _createComponent(_resolveComponent("Comp"))
+  const n2 = _createTextNode()
+  _insert(n2, n3)
+  _renderEffect(() => _setText(n2, _ctx.bar))
+  _renderEffect(() => _setDynamicProp(n3, "id", _ctx.foo))
+  return [n0, n3]
 }"
 `;
 
diff --git a/packages/compiler-vapor/src/generators/component.ts b/packages/compiler-vapor/src/generators/component.ts
new file mode 100644
index 000000000..7a76d50ee
--- /dev/null
+++ b/packages/compiler-vapor/src/generators/component.ts
@@ -0,0 +1,20 @@
+import type { CodegenContext } from '../generate'
+import type { CreateComponentIRNode } from '../ir'
+import { type CodeFragment, NEWLINE, genCall } from './utils'
+
+export function genCreateComponent(
+  oper: CreateComponentIRNode,
+  context: CodegenContext,
+): CodeFragment[] {
+  const { vaporHelper } = context
+
+  const tag = oper.resolve
+    ? genCall(vaporHelper('resolveComponent'), JSON.stringify(oper.tag))
+    : [oper.tag]
+
+  return [
+    NEWLINE,
+    `const n${oper.id} = `,
+    ...genCall(vaporHelper('createComponent'), tag),
+  ]
+}
diff --git a/packages/compiler-vapor/src/generators/operation.ts b/packages/compiler-vapor/src/generators/operation.ts
index e08022a7d..59b0816d4 100644
--- a/packages/compiler-vapor/src/generators/operation.ts
+++ b/packages/compiler-vapor/src/generators/operation.ts
@@ -16,6 +16,7 @@ import {
   NEWLINE,
   buildCodeFragment,
 } from './utils'
+import { genCreateComponent } from './component'
 
 export function genOperations(opers: OperationNode[], context: CodegenContext) {
   const [frag, push] = buildCodeFragment()
@@ -56,6 +57,8 @@ export function genOperation(
       return genIf(oper, context)
     case IRNodeTypes.FOR:
       return genFor(oper, context)
+    case IRNodeTypes.CREATE_COMPONENT_NODE:
+      return genCreateComponent(oper, context)
   }
 
   return []
diff --git a/packages/compiler-vapor/src/ir.ts b/packages/compiler-vapor/src/ir.ts
index 6b6de7026..4caf8f8d6 100644
--- a/packages/compiler-vapor/src/ir.ts
+++ b/packages/compiler-vapor/src/ir.ts
@@ -29,6 +29,7 @@ export enum IRNodeTypes {
   INSERT_NODE,
   PREPEND_NODE,
   CREATE_TEXT_NODE,
+  CREATE_COMPONENT_NODE,
 
   WITH_DIRECTIVE,
 
@@ -173,6 +174,16 @@ export interface WithDirectiveIRNode extends BaseIRNode {
   builtin?: VaporHelper
 }
 
+export interface CreateComponentIRNode extends BaseIRNode {
+  type: IRNodeTypes.CREATE_COMPONENT_NODE
+  id: number
+  tag: string
+  props: IRProps
+  // TODO slots
+
+  resolve: boolean
+}
+
 export type IRNode = OperationNode | RootIRNode
 export type OperationNode =
   | SetPropIRNode
@@ -189,6 +200,7 @@ export type OperationNode =
   | WithDirectiveIRNode
   | IfIRNode
   | ForIRNode
+  | CreateComponentIRNode
 
 export enum DynamicFlag {
   NONE = 0,
diff --git a/packages/compiler-vapor/src/transforms/transformElement.ts b/packages/compiler-vapor/src/transforms/transformElement.ts
index a0e6146c6..8711f271c 100644
--- a/packages/compiler-vapor/src/transforms/transformElement.ts
+++ b/packages/compiler-vapor/src/transforms/transformElement.ts
@@ -29,8 +29,7 @@ export const isReservedProp = /*#__PURE__*/ makeMap(
 
 export const transformElement: NodeTransform = (node, context) => {
   return function postTransformElement() {
-    node = context.node
-
+    ;({ node } = context)
     if (
       !(
         node.type === NodeTypes.ELEMENT &&
@@ -41,37 +40,90 @@ export const transformElement: NodeTransform = (node, context) => {
       return
     }
 
-    const { tag, props } = node
-    const isComponent = node.tagType === ElementTypes.COMPONENT
+    const { tag, tagType } = node
+    const isComponent = tagType === ElementTypes.COMPONENT
+    const propsResult = buildProps(
+      node,
+      context as TransformContext<ElementNode>,
+    )
+
+    ;(isComponent ? transformComponentElement : transformNativeElement)(
+      tag,
+      propsResult,
+      context,
+    )
+  }
+}
 
-    context.template += `<${tag}`
-    if (props.length) {
-      buildProps(
-        node,
-        context as TransformContext<ElementNode>,
-        undefined,
-        isComponent,
-      )
-    }
-    const { scopeId } = context.options
-    if (scopeId) {
-      context.template += ` ${scopeId}`
-    }
-    context.template += `>` + context.childrenTemplate.join('')
+function transformComponentElement(
+  tag: string,
+  propsResult: ReturnType<typeof buildProps>,
+  context: TransformContext,
+) {
+  const { bindingMetadata } = context.options
+  const resolve = !bindingMetadata[tag]
+  context.registerOperation({
+    type: IRNodeTypes.CREATE_COMPONENT_NODE,
+    id: context.reference(),
+    tag,
+    props: [],
+    resolve,
+  })
+}
 
-    // TODO remove unnecessary close tag, e.g. if it's the last element of the template
-    if (!isVoidTag(tag)) {
-      context.template += `</${tag}>`
+function transformNativeElement(
+  tag: string,
+  propsResult: ReturnType<typeof buildProps>,
+  context: TransformContext,
+) {
+  const { scopeId } = context.options
+
+  context.template += `<${tag}`
+  if (scopeId) context.template += ` ${scopeId}`
+
+  if (propsResult[0] /* dynamic props */) {
+    const [, dynamicArgs, expressions] = propsResult
+    context.registerEffect(expressions, [
+      {
+        type: IRNodeTypes.SET_DYNAMIC_PROPS,
+        element: context.reference(),
+        props: dynamicArgs,
+      },
+    ])
+  } else {
+    for (const prop of propsResult[1]) {
+      const { key, values } = prop
+      if (key.isStatic && values.length === 1 && values[0].isStatic) {
+        context.template += ` ${key.content}`
+        if (values[0].content) context.template += `="${values[0].content}"`
+      } else {
+        context.registerEffect(values, [
+          {
+            type: IRNodeTypes.SET_PROP,
+            element: context.reference(),
+            prop,
+          },
+        ])
+      }
     }
   }
+
+  context.template += `>` + context.childrenTemplate.join('')
+  // TODO remove unnecessary close tag, e.g. if it's the last element of the template
+  if (!isVoidTag(tag)) {
+    context.template += `</${tag}>`
+  }
 }
 
 function buildProps(
   node: ElementNode,
   context: TransformContext<ElementNode>,
-  props: (VaporDirectiveNode | AttributeNode)[] = node.props as any,
-  isComponent: boolean,
-) {
+):
+  | [dynamic: true, props: IRProps[], expressions: SimpleExpressionNode[]]
+  | [dynamic: false, props: IRProp[]] {
+  const props = node.props as (VaporDirectiveNode | AttributeNode)[]
+  if (props.length === 0) return [false, []]
+
   const dynamicArgs: IRProps[] = []
   const dynamicExpr: SimpleExpressionNode[] = []
   let results: DirectiveTransformResult[] = []
@@ -112,31 +164,11 @@ function buildProps(
   if (dynamicArgs.length || results.some(({ key }) => !key.isStatic)) {
     // take rest of props as dynamic props
     pushMergeArg()
-    context.registerEffect(dynamicExpr, [
-      {
-        type: IRNodeTypes.SET_DYNAMIC_PROPS,
-        element: context.reference(),
-        props: dynamicArgs,
-      },
-    ])
-  } else {
-    const irProps = dedupeProperties(results)
-    for (const prop of irProps) {
-      const { key, values } = prop
-      if (key.isStatic && values.length === 1 && values[0].isStatic) {
-        context.template += ` ${key.content}`
-        if (values[0].content) context.template += `="${values[0].content}"`
-      } else {
-        context.registerEffect(values, [
-          {
-            type: IRNodeTypes.SET_PROP,
-            element: context.reference(),
-            prop,
-          },
-        ])
-      }
-    }
+    return [true, dynamicArgs, dynamicExpr]
   }
+
+  const irProps = dedupeProperties(results)
+  return [false, irProps]
 }
 
 function transformProp(
diff --git a/packages/runtime-vapor/src/apiCreateComponent.ts b/packages/runtime-vapor/src/apiCreateComponent.ts
new file mode 100644
index 000000000..0a657f539
--- /dev/null
+++ b/packages/runtime-vapor/src/apiCreateComponent.ts
@@ -0,0 +1,12 @@
+import type { Data } from '@vue/shared'
+import type { Component } from './component'
+import { render } from './render'
+
+export function createComponent(
+  comp: Component,
+  props: Data = {},
+  container: string | ParentNode,
+) {
+  const instance = render(comp, props, container)
+  return instance.block
+}
diff --git a/packages/runtime-vapor/src/directives.ts b/packages/runtime-vapor/src/directives.ts
index 9bff0a8eb..15d2119c4 100644
--- a/packages/runtime-vapor/src/directives.ts
+++ b/packages/runtime-vapor/src/directives.ts
@@ -145,7 +145,3 @@ function callDirectiveHook(
   ])
   resetTracking()
 }
-
-export function resolveDirective() {
-  // TODO
-}
diff --git a/packages/runtime-vapor/src/helpers/resolveAssets.ts b/packages/runtime-vapor/src/helpers/resolveAssets.ts
new file mode 100644
index 000000000..35ae0bb9a
--- /dev/null
+++ b/packages/runtime-vapor/src/helpers/resolveAssets.ts
@@ -0,0 +1,7 @@
+export function resolveComponent() {
+  // TODO
+}
+
+export function resolveDirective() {
+  // TODO
+}
diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts
index f3891c4a4..bae07bf63 100644
--- a/packages/runtime-vapor/src/index.ts
+++ b/packages/runtime-vapor/src/index.ts
@@ -62,7 +62,6 @@ export {
 } from './apiWatch'
 export {
   withDirectives,
-  resolveDirective,
   type Directive,
   type DirectiveBinding,
   type DirectiveHook,
@@ -105,6 +104,9 @@ export {
 } from './apiLifecycle'
 export { createIf } from './apiCreateIf'
 export { createFor } from './apiCreateFor'
+export { createComponent } from './apiCreateComponent'
+
+export { resolveComponent, resolveDirective } from './helpers/resolveAssets'
 
 // **Internal** DOM-only runtime directive helpers
 export {

From c18e994b8855d4e05921fda39b6631ffdf907a0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 14 Mar 2024 16:19:45 +0800
Subject: [PATCH 02/13] feat: basic component support

---
 .../__snapshots__/compile.spec.ts.snap        |   3 +-
 .../compiler-vapor/__tests__/compile.spec.ts  |   1 -
 .../src/transforms/transformElement.ts        |   3 +
 packages/runtime-vapor/__tests__/_utils.ts    |   4 +-
 .../runtime-vapor/src/apiCreateComponent.ts   |  22 ++--
 packages/runtime-vapor/src/component.ts       | 103 +++++++++++++-----
 packages/runtime-vapor/src/index.ts           |   4 +-
 packages/runtime-vapor/src/render.ts          |  38 +------
 playground/src/components.vue                 |  10 ++
 playground/src/main.ts                        |   4 +-
 playground/src/sub-comp.vue                   |  10 ++
 11 files changed, 120 insertions(+), 82 deletions(-)
 create mode 100644 playground/src/components.vue
 create mode 100644 playground/src/sub-comp.vue

diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
index 407b7690c..f5058d890 100644
--- a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
@@ -127,10 +127,9 @@ const t1 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const n3 = t1()
-  const n1 = n3.firstChild
   const n1 = _createComponent(_resolveComponent("Comp"))
   const n2 = _createTextNode()
-  _insert(n2, n3)
+  _insert([n1, n2], n3)
   _renderEffect(() => _setText(n2, _ctx.bar))
   _renderEffect(() => _setDynamicProp(n3, "id", _ctx.foo))
   return [n0, n3]
diff --git a/packages/compiler-vapor/__tests__/compile.spec.ts b/packages/compiler-vapor/__tests__/compile.spec.ts
index da6d96210..b406d9e95 100644
--- a/packages/compiler-vapor/__tests__/compile.spec.ts
+++ b/packages/compiler-vapor/__tests__/compile.spec.ts
@@ -72,7 +72,6 @@ describe('compile', () => {
         expect(code).not.contains('effect')
       })
 
-      // TODO: support multiple root nodes and components
       test('should not affect siblings after it', () => {
         const code = compile(
           `<div v-pre :id="foo"><Comp/>{{ bar }}</div>\n` +
diff --git a/packages/compiler-vapor/src/transforms/transformElement.ts b/packages/compiler-vapor/src/transforms/transformElement.ts
index 8711f271c..97cb4ffba 100644
--- a/packages/compiler-vapor/src/transforms/transformElement.ts
+++ b/packages/compiler-vapor/src/transforms/transformElement.ts
@@ -15,6 +15,7 @@ import type {
   TransformContext,
 } from '../transform'
 import {
+  DynamicFlag,
   IRNodeTypes,
   type IRProp,
   type IRProps,
@@ -62,10 +63,12 @@ function transformComponentElement(
 ) {
   const { bindingMetadata } = context.options
   const resolve = !bindingMetadata[tag]
+  context.dynamic.flags |= DynamicFlag.NON_TEMPLATE | DynamicFlag.INSERT
   context.registerOperation({
     type: IRNodeTypes.CREATE_COMPONENT_NODE,
     id: context.reference(),
     tag,
+    // TODO
     props: [],
     resolve,
   })
diff --git a/packages/runtime-vapor/__tests__/_utils.ts b/packages/runtime-vapor/__tests__/_utils.ts
index 9117cc677..5790c12c0 100644
--- a/packages/runtime-vapor/__tests__/_utils.ts
+++ b/packages/runtime-vapor/__tests__/_utils.ts
@@ -4,8 +4,8 @@ import {
   type ObjectComponent,
   type SetupFn,
   render as _render,
-  createComponentInstance,
   defineComponent,
+  test_createComponent,
 } from '../src'
 
 export function makeRender<Component = ObjectComponent | SetupFn>(
@@ -31,7 +31,7 @@ export function makeRender<Component = ObjectComponent | SetupFn>(
       props: Data = {},
       container: string | ParentNode = '#host',
     ) => {
-      instance = createComponentInstance(component, props)
+      instance = test_createComponent(component, props)
       _render(instance, container)
       return res()
     }
diff --git a/packages/runtime-vapor/src/apiCreateComponent.ts b/packages/runtime-vapor/src/apiCreateComponent.ts
index 0a657f539..801496270 100644
--- a/packages/runtime-vapor/src/apiCreateComponent.ts
+++ b/packages/runtime-vapor/src/apiCreateComponent.ts
@@ -1,12 +1,18 @@
 import type { Data } from '@vue/shared'
-import type { Component } from './component'
-import { render } from './render'
+import {
+  type Component,
+  createComponentInstance,
+  currentInstance,
+  setupComponent,
+} from './component'
+
+export function createComponent(comp: Component, props: Data = {}) {
+  const current = currentInstance!
+  const instance = createComponentInstance(comp, props)
+  setupComponent(instance)
+
+  // register sub-component with current component for lifecycle management
+  current.comps.add(instance)
 
-export function createComponent(
-  comp: Component,
-  props: Data = {},
-  container: string | ParentNode,
-) {
-  const instance = render(comp, props, container)
   return instance.block
 }
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 60f9fd298..79f3ce2cf 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -1,7 +1,7 @@
-import { EffectScope } from '@vue/reactivity'
+import { EffectScope, proxyRefs } from '@vue/reactivity'
 
-import { EMPTY_OBJ, isFunction } from '@vue/shared'
-import type { Block } from './render'
+import { EMPTY_OBJ, isArray, isFunction, isObject } from '@vue/shared'
+import { type Block, fragmentKey } from './render'
 import type { DirectiveBinding } from './directives'
 import {
   type ComponentPropsOptions,
@@ -37,33 +37,30 @@ type LifecycleHook<TFn = Function> = TFn[] | null
 
 export interface ComponentInternalInstance {
   uid: number
-  container: ParentNode
+  vapor: true
+
   block: Block | null
+  container: ParentNode
+  parent: ComponentInternalInstance | null
+
   scope: EffectScope
   component: FunctionalComponent | ObjectComponent
+  comps: Set<ComponentInternalInstance>
+  dirs: Map<Node, DirectiveBinding[]>
 
-  // TODO: ExtraProps: key, ref, ...
   rawProps: { [key: string]: any }
-
   // normalized options
   propsOptions: NormalizedPropsOptions
   emitsOptions: ObjectEmitsOptions | null
 
-  parent: ComponentInternalInstance | null
-
   // state
-  props: Data
-  attrs: Data
   setupState: Data
+  props: Data
   emit: EmitFn
   emitted: Record<string, boolean> | null
+  attrs: Data
   refs: Data
 
-  vapor: true
-
-  /** directives */
-  dirs: Map<Node, DirectiveBinding[]>
-
   // lifecycle
   isMounted: boolean
   isUnmounted: boolean
@@ -141,37 +138,37 @@ export const unsetCurrentInstance = () => {
 }
 
 let uid = 0
-export const createComponentInstance = (
+export function createComponentInstance(
   component: ObjectComponent | FunctionalComponent,
   rawProps: Data,
-): ComponentInternalInstance => {
+): ComponentInternalInstance {
   const instance: ComponentInternalInstance = {
     uid: uid++,
+    vapor: true,
+
     block: null,
-    container: null!, // set on mountComponent
-    scope: new EffectScope(true /* detached */)!,
-    component,
-    rawProps,
+    container: null!,
 
-    // TODO: registory of parent
+    // TODO
     parent: null,
 
+    scope: new EffectScope(true /* detached */)!,
+    component,
+    comps: new Set(),
+    dirs: new Map(),
+
+    rawProps,
     // resolved props and emits options
     propsOptions: normalizePropsOptions(component),
     emitsOptions: normalizeEmitsOptions(component),
 
-    // emit
-    emit: null!, // to be set immediately
-    emitted: null,
-
     // state
+    setupState: EMPTY_OBJ,
     props: EMPTY_OBJ,
+    emit: null!,
+    emitted: null,
     attrs: EMPTY_OBJ,
-    setupState: EMPTY_OBJ,
     refs: EMPTY_OBJ,
-    vapor: true,
-
-    dirs: new Map(),
 
     // lifecycle
     isMounted: false,
@@ -234,3 +231,49 @@ export const createComponentInstance = (
 
   return instance
 }
+
+export function setupComponent(instance: ComponentInternalInstance): void {
+  const reset = setCurrentInstance(instance)
+  instance.scope.run(() => {
+    const { component, props, emit, attrs } = instance
+    const ctx = { expose: () => {}, emit, attrs }
+
+    const setupFn = isFunction(component) ? component : component.setup
+    const stateOrNode = setupFn && setupFn(props, ctx)
+
+    let block: Block | undefined
+
+    if (
+      stateOrNode &&
+      (stateOrNode instanceof Node ||
+        isArray(stateOrNode) ||
+        (stateOrNode as any)[fragmentKey])
+    ) {
+      block = stateOrNode as Block
+    } else if (isObject(stateOrNode)) {
+      instance.setupState = proxyRefs(stateOrNode)
+    }
+    if (!block && component.render) {
+      block = component.render(instance.setupState)
+    }
+
+    if (block instanceof DocumentFragment) {
+      block = Array.from(block.childNodes)
+    }
+    if (!block) {
+      // TODO: warn no template
+      block = []
+    }
+    return (instance.block = block)
+  })
+  reset()
+}
+
+export function test_createComponent(
+  component: ObjectComponent | FunctionalComponent,
+  rawProps: Data,
+) {
+  const instance = createComponentInstance(component, rawProps)
+  setupComponent(instance)
+  return instance
+}
diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts
index bae07bf63..272c8b7f3 100644
--- a/packages/runtime-vapor/src/index.ts
+++ b/packages/runtime-vapor/src/index.ts
@@ -87,7 +87,6 @@ export { on, delegate, delegateEvents, setDynamicEvents } from './dom/event'
 export { setRef } from './dom/templateRef'
 
 export { defineComponent } from './apiDefineComponent'
-export { createComponentInstance } from './component'
 export {
   onBeforeMount,
   onMounted,
@@ -106,6 +105,9 @@ export { createIf } from './apiCreateIf'
 export { createFor } from './apiCreateFor'
 export { createComponent } from './apiCreateComponent'
 
+// TODO remove
+export { test_createComponent } from './component'
+
 export { resolveComponent, resolveDirective } from './helpers/resolveAssets'
 
 // **Internal** DOM-only runtime directive helpers
diff --git a/packages/runtime-vapor/src/render.ts b/packages/runtime-vapor/src/render.ts
index 893b046f4..7c34356a1 100644
--- a/packages/runtime-vapor/src/render.ts
+++ b/packages/runtime-vapor/src/render.ts
@@ -1,5 +1,4 @@
-import { proxyRefs } from '@vue/reactivity'
-import { invokeArrayFns, isArray, isFunction, isObject } from '@vue/shared'
+import { invokeArrayFns } from '@vue/shared'
 import {
   type ComponentInternalInstance,
   setCurrentInstance,
@@ -37,47 +36,14 @@ function mountComponent(
   container: ParentNode,
 ) {
   instance.container = container
-
   const reset = setCurrentInstance(instance)
-  const block = instance.scope.run(() => {
-    const { component, props, emit, attrs } = instance
-    const ctx = { expose: () => {}, emit, attrs }
-
-    const setupFn = isFunction(component) ? component : component.setup
-    const stateOrNode = setupFn && setupFn(props, ctx)
-
-    let block: Block | undefined
-
-    if (
-      stateOrNode &&
-      (stateOrNode instanceof Node ||
-        isArray(stateOrNode) ||
-        (stateOrNode as any)[fragmentKey])
-    ) {
-      block = stateOrNode as Block
-    } else if (isObject(stateOrNode)) {
-      instance.setupState = proxyRefs(stateOrNode)
-    }
-    if (!block && component.render) {
-      block = component.render(instance.setupState)
-    }
-
-    if (block instanceof DocumentFragment) {
-      block = Array.from(block.childNodes)
-    }
-    if (!block) {
-      // TODO: warn no template
-      block = []
-    }
-    return (instance.block = block)
-  })!
   const { bm, m } = instance
 
   // hook: beforeMount
   bm && invokeArrayFns(bm)
   invokeDirectiveHook(instance, 'beforeMount')
 
-  insert(block, instance.container)
+  insert(instance.block!, instance.container)
   instance.isMounted = true
 
   // hook: mounted
diff --git a/playground/src/components.vue b/playground/src/components.vue
new file mode 100644
index 000000000..4f85a0d49
--- /dev/null
+++ b/playground/src/components.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import SubComp from './sub-comp.vue'
+</script>
+
+<template>
+  <div>
+    root comp
+    <SubComp />
+  </div>
+</template>
diff --git a/playground/src/main.ts b/playground/src/main.ts
index e8f26d40f..10c4a1c1a 100644
--- a/playground/src/main.ts
+++ b/playground/src/main.ts
@@ -1,4 +1,4 @@
-import { createComponentInstance, render, unmountComponent } from 'vue/vapor'
+import { render, test_createComponent, unmountComponent } from 'vue/vapor'
 import { createApp } from 'vue'
 import './style.css'
 
@@ -7,7 +7,7 @@ const mod = (modules['.' + location.pathname] || modules['./App.vue'])()
 
 mod.then(({ default: mod }) => {
   if (mod.vapor) {
-    const instance = createComponentInstance(mod, {})
+    const instance = test_createComponent(mod, {})
     render(instance, '#app')
     // @ts-expect-error
     globalThis.unmount = () => {
diff --git a/playground/src/sub-comp.vue b/playground/src/sub-comp.vue
new file mode 100644
index 000000000..c212a07c8
--- /dev/null
+++ b/playground/src/sub-comp.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const props = defineProps<{
+  foo: string
+}>()
+</script>
+
+<template>
+  <div>sub-comp</div>
+  {{ props }}
+</template>

From f6d5f7167e2619feb85c1952598b326c79f7e3b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 14 Mar 2024 17:22:14 +0800
Subject: [PATCH 03/13] fix: repl

---
 packages/sfc-playground/src/App.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue
index a3525036c..37ef14c22 100644
--- a/packages/sfc-playground/src/App.vue
+++ b/packages/sfc-playground/src/App.vue
@@ -120,9 +120,10 @@ watch(
       files.value['src/index.html'] = new File(
         'src/index.html',
         `<script type="module">
-        import { render } from 'vue/vapor'
+        import { test_createComponent, render } from 'vue/vapor'
         import App from './App.vue'
-        render(App, {}, '#app')` +
+        const instance = test_createComponent(App, {})
+        render(instance, '#app')` +
           '<' +
           '/script>' +
           `<div id="app"></div>`,

From 58e843627866adaa6248c06401056a9785c80844 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Fri, 15 Mar 2024 13:16:22 +0800
Subject: [PATCH 04/13] feat: props

---
 .../__tests__/dom/element.spec.ts             |  2 +-
 packages/runtime-vapor/src/apiCreateApp.ts    | 58 +++++++++++++++
 .../runtime-vapor/src/apiCreateComponent.ts   | 10 +--
 packages/runtime-vapor/src/apiCreateFor.ts    |  2 +-
 packages/runtime-vapor/src/apiCreateIf.ts     |  2 +-
 .../src/{render.ts => apiRender.ts}           | 40 ++++++++++-
 packages/runtime-vapor/src/component.ts       | 60 ++--------------
 packages/runtime-vapor/src/componentProps.ts  |  2 +-
 packages/runtime-vapor/src/dom/element.ts     |  2 +-
 packages/runtime-vapor/src/index.ts           |  5 +-
 packages/sfc-playground/src/App.vue           |  5 +-
 playground/src/main.ts                        | 17 ++---
 playground/src/props.js                       | 71 ++++++-------------
 13 files changed, 142 insertions(+), 134 deletions(-)
 create mode 100644 packages/runtime-vapor/src/apiCreateApp.ts
 rename packages/runtime-vapor/src/{render.ts => apiRender.ts} (62%)

diff --git a/packages/runtime-vapor/__tests__/dom/element.spec.ts b/packages/runtime-vapor/__tests__/dom/element.spec.ts
index 43b9ab02b..603f43491 100644
--- a/packages/runtime-vapor/__tests__/dom/element.spec.ts
+++ b/packages/runtime-vapor/__tests__/dom/element.spec.ts
@@ -1,5 +1,5 @@
 import { insert, normalizeBlock, prepend, remove } from '../../src/dom/element'
-import { fragmentKey } from '../../src/render'
+import { fragmentKey } from '../../src/apiRender'
 
 const node1 = document.createTextNode('node1')
 const node2 = document.createTextNode('node2')
diff --git a/packages/runtime-vapor/src/apiCreateApp.ts b/packages/runtime-vapor/src/apiCreateApp.ts
new file mode 100644
index 000000000..e1fe4c671
--- /dev/null
+++ b/packages/runtime-vapor/src/apiCreateApp.ts
@@ -0,0 +1,58 @@
+import { type Data, isObject } from '@vue/shared'
+import {
+  type Component,
+  type ComponentInternalInstance,
+  createComponentInstance,
+} from './component'
+import { warn } from './warning'
+import { version } from '.'
+import { render, setupComponent, unmountComponent } from './apiRender'
+
+export function createVaporApp(
+  rootComponent: Component,
+  rootProps: Data | null | undefined = null,
+): App {
+  if (rootProps != null && !isObject(rootProps)) {
+    __DEV__ && warn(`root props passed to app.mount() must be an object.`)
+    rootProps = null
+  }
+
+  let instance: ComponentInternalInstance
+
+  const app: App = {
+    version,
+    mount(rootContainer): any {
+      if (!instance) {
+        instance = createComponentInstance(rootComponent, rootProps)
+        setupComponent(instance)
+        render(instance, rootContainer)
+        return instance
+      } else if (__DEV__) {
+        warn(
+          `App has already been mounted.\n` +
+            `If you want to remount the same app, move your app creation logic ` +
+            `into a factory function and create fresh app instances for each ` +
+            `mount - e.g. \`const createMyApp = () => createApp(App)\``,
+        )
+      }
+    },
+    unmount() {
+      if (instance) {
+        unmountComponent(instance)
+      } else if (__DEV__) {
+        warn(`Cannot unmount an app that is not mounted.`)
+      }
+    },
+  }
+
+  return app
+}
+
+export interface App {
+  version: string
+  mount(
+    rootContainer: Element | string,
+    isHydrate?: boolean,
+  ): ComponentInternalInstance
+  unmount(): void
+}
diff --git a/packages/runtime-vapor/src/apiCreateComponent.ts b/packages/runtime-vapor/src/apiCreateComponent.ts
index 801496270..17ab3ac51 100644
--- a/packages/runtime-vapor/src/apiCreateComponent.ts
+++ b/packages/runtime-vapor/src/apiCreateComponent.ts
@@ -1,14 +1,16 @@
-import type { Data } from '@vue/shared'
 import {
   type Component,
   createComponentInstance,
   currentInstance,
-  setupComponent,
 } from './component'
+import { setupComponent } from './apiRender'
 
-export function createComponent(comp: Component, props: Data = {}) {
+export function createComponent(
+  comp: Component,
+  rawProps: Record<string, () => unknown> | null = {},
+) {
   const current = currentInstance!
-  const instance = createComponentInstance(comp, props)
+  const instance = createComponentInstance(comp, rawProps)
   setupComponent(instance)
 
   // register sub-component with current component for lifecycle management
diff --git a/packages/runtime-vapor/src/apiCreateFor.ts b/packages/runtime-vapor/src/apiCreateFor.ts
index 20401c2a1..1d31aa41b 100644
--- a/packages/runtime-vapor/src/apiCreateFor.ts
+++ b/packages/runtime-vapor/src/apiCreateFor.ts
@@ -2,7 +2,7 @@ import { type EffectScope, effectScope, isReactive } from '@vue/reactivity'
 import { isArray, isObject, isString } from '@vue/shared'
 import { createComment, createTextNode, insert, remove } from './dom/element'
 import { renderEffect } from './renderWatch'
-import { type Block, type Fragment, fragmentKey } from './render'
+import { type Block, type Fragment, fragmentKey } from './apiRender'
 import { warn } from './warning'
 
 interface ForBlock extends Fragment {
diff --git a/packages/runtime-vapor/src/apiCreateIf.ts b/packages/runtime-vapor/src/apiCreateIf.ts
index 084544eb9..33270ef0c 100644
--- a/packages/runtime-vapor/src/apiCreateIf.ts
+++ b/packages/runtime-vapor/src/apiCreateIf.ts
@@ -1,5 +1,5 @@
 import { renderWatch } from './renderWatch'
-import { type Block, type Fragment, fragmentKey } from './render'
+import { type Block, type Fragment, fragmentKey } from './apiRender'
 import { type EffectScope, effectScope } from '@vue/reactivity'
 import { createComment, createTextNode, insert, remove } from './dom/element'
 
diff --git a/packages/runtime-vapor/src/render.ts b/packages/runtime-vapor/src/apiRender.ts
similarity index 62%
rename from packages/runtime-vapor/src/render.ts
rename to packages/runtime-vapor/src/apiRender.ts
index 7c34356a1..3d6224adb 100644
--- a/packages/runtime-vapor/src/render.ts
+++ b/packages/runtime-vapor/src/apiRender.ts
@@ -1,4 +1,4 @@
-import { invokeArrayFns } from '@vue/shared'
+import { invokeArrayFns, isArray, isFunction, isObject } from '@vue/shared'
 import {
   type ComponentInternalInstance,
   setCurrentInstance,
@@ -7,6 +7,7 @@ import {
 import { invokeDirectiveHook } from './directives'
 import { insert, querySelector, remove } from './dom/element'
 import { flushPostFlushCbs, queuePostRenderEffect } from './scheduler'
+import { proxyRefs } from '@vue/reactivity'
 
 export const fragmentKey = Symbol(__DEV__ ? `fragmentKey` : ``)
 
@@ -17,6 +18,43 @@ export type Fragment = {
   [fragmentKey]: true
 }
 
+export function setupComponent(instance: ComponentInternalInstance): void {
+  const reset = setCurrentInstance(instance)
+  instance.scope.run(() => {
+    const { component, props, emit, attrs } = instance
+    const ctx = { expose: () => {}, emit, attrs }
+
+    const setupFn = isFunction(component) ? component : component.setup
+    const stateOrNode = setupFn && setupFn(props, ctx)
+
+    let block: Block | undefined
+
+    if (
+      stateOrNode &&
+      (stateOrNode instanceof Node ||
+        isArray(stateOrNode) ||
+        (stateOrNode as any)[fragmentKey])
+    ) {
+      block = stateOrNode as Block
+    } else if (isObject(stateOrNode)) {
+      instance.setupState = proxyRefs(stateOrNode)
+    }
+    if (!block && component.render) {
+      block = component.render(instance.setupState)
+    }
+
+    if (block instanceof DocumentFragment) {
+      block = Array.from(block.childNodes)
+    }
+    if (!block) {
+      // TODO: warn no template
+      block = []
+    }
+    return (instance.block = block)
+  })
+  reset()
+}
+
 export function render(
   instance: ComponentInternalInstance,
   container: string | ParentNode,
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 79f3ce2cf..6c6a574a0 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -1,7 +1,6 @@
-import { EffectScope, proxyRefs } from '@vue/reactivity'
-
-import { EMPTY_OBJ, isArray, isFunction, isObject } from '@vue/shared'
-import { type Block, fragmentKey } from './render'
+import { EffectScope } from '@vue/reactivity'
+import { EMPTY_OBJ, isFunction } from '@vue/shared'
+import type { Block } from './apiRender'
 import type { DirectiveBinding } from './directives'
 import {
   type ComponentPropsOptions,
@@ -48,8 +47,6 @@ export interface ComponentInternalInstance {
   comps: Set<ComponentInternalInstance>
   dirs: Map<Node, DirectiveBinding[]>
 
-  rawProps: { [key: string]: any }
-  // normalized options
   propsOptions: NormalizedPropsOptions
   emitsOptions: ObjectEmitsOptions | null
 
@@ -140,7 +137,7 @@ export const unsetCurrentInstance = () => {
 let uid = 0
 export function createComponentInstance(
   component: ObjectComponent | FunctionalComponent,
-  rawProps: Data,
+  rawProps: Record<string, () => unknown> | null,
 ): ComponentInternalInstance {
   const instance: ComponentInternalInstance = {
     uid: uid++,
@@ -157,7 +154,6 @@ export function createComponentInstance(
     comps: new Set(),
     dirs: new Map(),
 
-    rawProps,
     // resolved props and emits options
     propsOptions: normalizePropsOptions(component),
     emitsOptions: normalizeEmitsOptions(component),
@@ -224,56 +220,8 @@ export function createComponentInstance(
      */
     // [VaporLifecycleHooks.SERVER_PREFETCH]: null,
   }
-
-  // TODO init first
   initProps(instance, rawProps, !isFunction(component))
   instance.emit = emit.bind(null, instance)
 
   return instance
 }
-
-export function setupComponent(instance: ComponentInternalInstance): void {
-  const reset = setCurrentInstance(instance)
-  instance.scope.run(() => {
-    const { component, props, emit, attrs } = instance
-    const ctx = { expose: () => {}, emit, attrs }
-
-    const setupFn = isFunction(component) ? component : component.setup
-    const stateOrNode = setupFn && setupFn(props, ctx)
-
-    let block: Block | undefined
-
-    if (
-      stateOrNode &&
-      (stateOrNode instanceof Node ||
-        isArray(stateOrNode) ||
-        (stateOrNode as any)[fragmentKey])
-    ) {
-      block = stateOrNode as Block
-    } else if (isObject(stateOrNode)) {
-      instance.setupState = proxyRefs(stateOrNode)
-    }
-    if (!block && component.render) {
-      block = component.render(instance.setupState)
-    }
-
-    if (block instanceof DocumentFragment) {
-      block = Array.from(block.childNodes)
-    }
-    if (!block) {
-      // TODO: warn no template
-      block = []
-    }
-    return (instance.block = block)
-  })
-  reset()
-}
-
-export function test_createComponent(
-  component: ObjectComponent | FunctionalComponent,
-  rawProps: Data,
-) {
-  const instance = createComponentInstance(component, rawProps)
-  setupComponent(instance)
-  return instance
-}
diff --git a/packages/runtime-vapor/src/componentProps.ts b/packages/runtime-vapor/src/componentProps.ts
index 5950a57a1..386fd0e1b 100644
--- a/packages/runtime-vapor/src/componentProps.ts
+++ b/packages/runtime-vapor/src/componentProps.ts
@@ -73,7 +73,7 @@ export type NormalizedPropsOptions = [NormalizedProps, string[]] | []
 
 export function initProps(
   instance: ComponentInternalInstance,
-  rawProps: Data | null,
+  rawProps: Record<string, () => unknown> | null,
   isStateful: boolean,
 ) {
   const props: Data = {}
diff --git a/packages/runtime-vapor/src/dom/element.ts b/packages/runtime-vapor/src/dom/element.ts
index d6d0dfa58..63c515d4a 100644
--- a/packages/runtime-vapor/src/dom/element.ts
+++ b/packages/runtime-vapor/src/dom/element.ts
@@ -1,5 +1,5 @@
 import { isArray, toDisplayString } from '@vue/shared'
-import type { Block } from '../render'
+import type { Block } from '../apiRender'
 
 /*! #__NO_SIDE_EFFECTS__ */
 export function normalizeBlock(block: Block): Node[] {
diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts
index 272c8b7f3..272163229 100644
--- a/packages/runtime-vapor/src/index.ts
+++ b/packages/runtime-vapor/src/index.ts
@@ -46,7 +46,6 @@ export {
   type FunctionalComponent,
   type SetupFn,
 } from './component'
-export { render, unmountComponent } from './render'
 export { renderEffect, renderWatch } from './renderWatch'
 export {
   watch,
@@ -101,13 +100,11 @@ export {
   onErrorCaptured,
   // onServerPrefetch,
 } from './apiLifecycle'
+export { createVaporApp } from './apiCreateApp'
 export { createIf } from './apiCreateIf'
 export { createFor } from './apiCreateFor'
 export { createComponent } from './apiCreateComponent'
 
-// TODO remove
-export { test_createComponent } from './component'
-
 export { resolveComponent, resolveDirective } from './helpers/resolveAssets'
 
 // **Internal** DOM-only runtime directive helpers
diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue
index 37ef14c22..1f0f3e62e 100644
--- a/packages/sfc-playground/src/App.vue
+++ b/packages/sfc-playground/src/App.vue
@@ -120,10 +120,9 @@ watch(
       files.value['src/index.html'] = new File(
         'src/index.html',
         `<script type="module">
-        import { test_createComponent, render } from 'vue/vapor'
+        import { createVaporApp } from 'vue/vapor'
         import App from './App.vue'
-        const instance = test_createComponent(App, {})
-        render(instance, '#app')` +
+        createVaporApp(App).mount('#app')` +
           '<' +
           '/script>' +
           `<div id="app"></div>`,
diff --git a/playground/src/main.ts b/playground/src/main.ts
index 10c4a1c1a..58677200c 100644
--- a/playground/src/main.ts
+++ b/playground/src/main.ts
@@ -1,4 +1,4 @@
-import { render, test_createComponent, unmountComponent } from 'vue/vapor'
+import { createVaporApp } from 'vue/vapor'
 import { createApp } from 'vue'
 import './style.css'
 
@@ -6,14 +6,11 @@ const modules = import.meta.glob<any>('./**/*.(vue|js)')
 const mod = (modules['.' + location.pathname] || modules['./App.vue'])()
 
 mod.then(({ default: mod }) => {
-  if (mod.vapor) {
-    const instance = test_createComponent(mod, {})
-    render(instance, '#app')
-    // @ts-expect-error
-    globalThis.unmount = () => {
-      unmountComponent(instance)
-    }
-  } else {
-    createApp(mod).mount('#app')
+  const app = (mod.vapor ? createVaporApp : createApp)(mod)
+  app.mount('#app')
+
+  // @ts-expect-error
+  globalThis.unmount = () => {
+    app.unmount()
   }
 })
diff --git a/playground/src/props.js b/playground/src/props.js
index 8da476cc8..79d63c8e0 100644
--- a/playground/src/props.js
+++ b/playground/src/props.js
@@ -1,10 +1,9 @@
 // @ts-check
 import {
-  children,
+  createComponent,
   defineComponent,
   on,
   ref,
-  render as renderComponent,
   setText,
   template,
   watch,
@@ -15,55 +14,26 @@ const t0 = template('<button></button>')
 
 export default defineComponent({
   vapor: true,
-  props: undefined,
-
-  setup(_, {}) {
+  setup() {
     const count = ref(1)
     const handleClick = () => {
       count.value++
     }
 
-    const __returned__ = { count, handleClick }
-
-    Object.defineProperty(__returned__, '__isScriptSetup', {
-      enumerable: false,
-      value: true,
-    })
-
-    return __returned__
-  },
-
-  render(_ctx) {
-    const n0 = t0()
-    const n1 = /** @type {HTMLButtonElement} */ (children(n0, 0))
-    on(n1, 'click', () => _ctx.handleClick)
-    watchEffect(() => {
-      setText(n1, _ctx.count)
-    })
-
-    // TODO: create component fn?
-    // const c0 = createComponent(...)
-    // insert(n0, c0)
-    renderComponent(
-      /** @type {any} */ (child),
-
-      // TODO: proxy??
-      {
+    return (() => {
+      const n0 = /** @type {HTMLButtonElement} */ (t0())
+      on(n0, 'click', () => handleClick)
+      watchEffect(() => setText(n0, count.value))
+      /** @type {any} */
+      const n1 = createComponent(child, {
         /* <Comp :count="count" /> */
-        get count() {
-          return _ctx.count
-        },
+        count: () => count.value,
 
         /* <Comp :inline-double="count * 2" /> */
-        get inlineDouble() {
-          return _ctx.count * 2
-        },
-      },
-      // @ts-expect-error TODO
-      n0[0],
-    )
-
-    return n0
+        inlineDouble: () => count.value * 2,
+      })
+      return [n0, n1]
+    })()
   },
 })
 
@@ -85,14 +55,13 @@ const child = defineComponent({
       () => props.inlineDouble,
       v => console.log('inlineDouble changed', v),
     )
-  },
 
-  render(_ctx) {
-    const n0 = t1()
-    const n1 = children(n0, 0)
-    watchEffect(() => {
-      setText(n1, void 0, _ctx.count + ' * 2 = ' + _ctx.inlineDouble)
-    })
-    return n0
+    return (() => {
+      const n0 = /** @type {HTMLParagraphElement} */ (t1())
+      watchEffect(() => {
+        setText(n0, props.count + ' * 2 = ' + props.inlineDouble)
+      })
+      return n0
+    })()
   },
 })

From 262e049735decc3a0b0f1969cf0098b40c1af3d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Fri, 15 Mar 2024 19:49:04 +0800
Subject: [PATCH 05/13] feat: rest props

---
 packages/runtime-vapor/src/apiCreateApp.ts    |   5 +-
 .../runtime-vapor/src/apiCreateComponent.ts   |   6 +-
 packages/runtime-vapor/src/component.ts       |   3 +-
 packages/runtime-vapor/src/componentProps.ts  | 195 +++++++++---------
 playground/src/props.js                       |  58 +++---
 5 files changed, 135 insertions(+), 132 deletions(-)

diff --git a/packages/runtime-vapor/src/apiCreateApp.ts b/packages/runtime-vapor/src/apiCreateApp.ts
index e1fe4c671..f6890b47e 100644
--- a/packages/runtime-vapor/src/apiCreateApp.ts
+++ b/packages/runtime-vapor/src/apiCreateApp.ts
@@ -1,4 +1,4 @@
-import { type Data, isObject } from '@vue/shared'
+import { isObject } from '@vue/shared'
 import {
   type Component,
   type ComponentInternalInstance,
@@ -7,10 +7,11 @@ import {
 import { warn } from './warning'
 import { version } from '.'
 import { render, setupComponent, unmountComponent } from './apiRender'
+import type { RawProps } from './componentProps'
 
 export function createVaporApp(
   rootComponent: Component,
-  rootProps: Data | null | undefined = null,
+  rootProps: RawProps | null = null,
 ): App {
   if (rootProps != null && !isObject(rootProps)) {
     __DEV__ && warn(`root props passed to app.mount() must be an object.`)
diff --git a/packages/runtime-vapor/src/apiCreateComponent.ts b/packages/runtime-vapor/src/apiCreateComponent.ts
index 17ab3ac51..ee4b15c1f 100644
--- a/packages/runtime-vapor/src/apiCreateComponent.ts
+++ b/packages/runtime-vapor/src/apiCreateComponent.ts
@@ -4,11 +4,9 @@ import {
   currentInstance,
 } from './component'
 import { setupComponent } from './apiRender'
+import type { RawProps } from './componentProps'
 
-export function createComponent(
-  comp: Component,
-  rawProps: Record<string, () => unknown> | null = {},
-) {
+export function createComponent(comp: Component, rawProps: RawProps) {
   const current = currentInstance!
   const instance = createComponentInstance(comp, rawProps)
   setupComponent(instance)
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 6c6a574a0..4bfe39b9e 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -5,6 +5,7 @@ import type { DirectiveBinding } from './directives'
 import {
   type ComponentPropsOptions,
   type NormalizedPropsOptions,
+  type RawProps,
   initProps,
   normalizePropsOptions,
 } from './componentProps'
@@ -137,7 +138,7 @@ export const unsetCurrentInstance = () => {
 let uid = 0
 export function createComponentInstance(
   component: ObjectComponent | FunctionalComponent,
-  rawProps: Record<string, () => unknown> | null,
+  rawProps: RawProps | null,
 ): ComponentInternalInstance {
   const instance: ComponentInternalInstance = {
     uid: uid++,
diff --git a/packages/runtime-vapor/src/componentProps.ts b/packages/runtime-vapor/src/componentProps.ts
index 386fd0e1b..9413a8446 100644
--- a/packages/runtime-vapor/src/componentProps.ts
+++ b/packages/runtime-vapor/src/componentProps.ts
@@ -1,5 +1,3 @@
-// NOTE: runtime-core/src/componentProps.ts
-
 import {
   type Data,
   EMPTY_ARR,
@@ -11,7 +9,6 @@ import {
   isArray,
   isFunction,
 } from '@vue/shared'
-import { shallowReactive, shallowReadonly, toRaw } from '@vue/reactivity'
 import { warn } from './warning'
 import {
   type Component,
@@ -69,108 +66,102 @@ type NormalizedProp =
     })
 
 export type NormalizedProps = Record<string, NormalizedProp>
-export type NormalizedPropsOptions = [NormalizedProps, string[]] | []
+export type NormalizedPropsOptions =
+  | [props: NormalizedProps, needCastKeys: string[]]
+  | []
+
+type StaticProps = Record<string, () => unknown>
+type RestProps = () => Data
+export type RawProps =
+  | [staticProps?: StaticProps, restProps?: RestProps]
+  | StaticProps
+  | null
 
 export function initProps(
   instance: ComponentInternalInstance,
-  rawProps: Record<string, () => unknown> | null,
+  rawProps: RawProps,
   isStateful: boolean,
 ) {
   const props: Data = {}
   const attrs: Data = {}
 
-  const [options, needCastKeys] = instance.propsOptions
-  let hasAttrsChanged = false
-  let rawCastValues: Data | undefined
+  let staticProps: StaticProps | undefined
+  let restProps: (() => Data) | undefined
+
   if (rawProps) {
-    for (let key in rawProps) {
-      const valueGetter = () => rawProps[key]
-      let camelKey
-      if (options && hasOwn(options, (camelKey = camelize(key)))) {
-        if (!needCastKeys || !needCastKeys.includes(camelKey)) {
-          // NOTE: must getter
-          // props[camelKey] = value
-          Object.defineProperty(props, camelKey, {
-            get() {
-              return valueGetter()
-            },
-            enumerable: true,
-          })
-        } else {
-          // NOTE: must getter
-          // ;(rawCastValues || (rawCastValues = {}))[camelKey] = value
-          rawCastValues || (rawCastValues = {})
-          Object.defineProperty(rawCastValues, camelKey, {
-            get() {
-              return valueGetter()
-            },
-            enumerable: true,
-          })
-        }
-      } else if (!isEmitListener(instance.emitsOptions, key)) {
-        // if (!(key in attrs) || value !== attrs[key]) {
-        if (!(key in attrs)) {
-          // NOTE: must getter
-          // attrs[key] = value
-          Object.defineProperty(attrs, key, {
-            get() {
-              return valueGetter()
-            },
-            enumerable: true,
-          })
-          hasAttrsChanged = true
-        }
-      }
+    if (isArray(rawProps)) {
+      ;[staticProps, restProps] = rawProps
+    } else {
+      staticProps = rawProps
     }
   }
 
-  if (needCastKeys) {
-    const rawCurrentProps = toRaw(props)
-    const castValues = rawCastValues || EMPTY_OBJ
-    for (let i = 0; i < needCastKeys.length; i++) {
-      const key = needCastKeys[i]
-
-      // NOTE: must getter
-      // props[key] = resolvePropValue(
-      //   options!,
-      //   rawCurrentProps,
-      //   key,
-      //   castValues[key],
-      //   instance,
-      //   !hasOwn(castValues, key),
-      // )
-      Object.defineProperty(props, key, {
-        get() {
-          return resolvePropValue(
-            options!,
-            rawCurrentProps,
-            key,
-            castValues[key],
-            instance,
-            !hasOwn(castValues, key),
-          )
-        },
-      })
+  const [options, needCastKeys] = instance.propsOptions
+
+  if (staticProps) {
+    for (const key in staticProps) {
+      registerProp(key, staticProps[key])
     }
   }
 
-  // validation
-  if (__DEV__) {
-    validateProps(rawProps || {}, props, instance)
+  // ensure all declared prop keys are present
+  if (options) {
+    for (const key in options) {
+      if (!(key in props)) {
+        if (restProps) {
+          const getter = () => {
+            const rest = restProps!()
+            return key in rest ? rest[key] : rest[hyphenate(key)]
+          }
+          registerProp(key, getter)
+        } else {
+          props[key] = undefined
+        }
+      }
+    }
+
+    // validation
+    if (__DEV__) {
+      validateProps(staticProps, restProps, props, options)
+    }
   }
 
   if (isStateful) {
-    instance.props = shallowReactive(props)
+    instance.props = props
   } else {
-    if (instance.propsOptions === EMPTY_ARR) {
-      instance.props = attrs
-    } else {
-      instance.props = props
-    }
+    // functional w/ optional props, props === attrs
+    instance.props = instance.propsOptions === EMPTY_ARR ? attrs : props
   }
   instance.attrs = attrs
 
-  return hasAttrsChanged
+  function registerProp(rawKey: string, getter: () => any) {
+    const key = camelize(rawKey)
+    if (options && hasOwn(options, key)) {
+      const getterWithCast =
+        needCastKeys && needCastKeys.includes(key)
+          ? () =>
+              resolvePropValue(
+                options!,
+                props,
+                rawKey,
+                getter(),
+                instance,
+                (!rawProps || !hasOwn(rawProps, rawKey)) &&
+                  (!restProps || !hasOwn(restProps(), rawKey)),
+              )
+          : getter
+
+      Object.defineProperty(props, key, {
+        get: getterWithCast,
+        enumerable: true,
+      })
+    } else if (!isEmitListener(instance.emitsOptions, rawKey)) {
+      Object.defineProperty(attrs, rawKey, {
+        get: getter,
+        enumerable: true,
+      })
+    }
+  }
 }
 
 function resolvePropValue(
@@ -223,12 +214,12 @@ function resolvePropValue(
 export function normalizePropsOptions(comp: Component): NormalizedPropsOptions {
   // TODO: cahching?
 
-  const raw = comp.props as any
-  const normalized: NormalizedPropsOptions[0] = {}
+  const raw = comp.props
+  const normalized: NormalizedProps | undefined = {}
   const needCastKeys: NormalizedPropsOptions[1] = []
 
   if (!raw) {
-    return EMPTY_ARR as any
+    return EMPTY_ARR as []
   }
 
   if (isArray(raw)) {
@@ -238,7 +229,7 @@ export function normalizePropsOptions(comp: Component): NormalizedPropsOptions {
         normalized[normalizedKey] = EMPTY_OBJ
       }
     }
-  } else if (raw) {
+  } else {
     for (const key in raw) {
       const normalizedKey = camelize(key)
       if (validatePropName(normalizedKey)) {
@@ -296,36 +287,36 @@ function getTypeIndex(
  * dev only
  */
 function validateProps(
-  rawProps: Data,
+  staticProps: StaticProps | undefined,
+  restProps: RestProps | undefined,
   props: Data,
-  instance: ComponentInternalInstance,
+  options: NormalizedProps,
 ) {
-  const resolvedValues = toRaw(props)
-  const options = instance.propsOptions[0]
   for (const key in options) {
-    let opt = options[key]
-    if (opt == null) continue
-    validateProp(
-      key,
-      resolvedValues[key],
-      opt,
-      __DEV__ ? shallowReadonly(resolvedValues) : resolvedValues,
-      !hasOwn(rawProps, key) && !hasOwn(rawProps, hyphenate(key)),
-    )
+    const opt = options[key]
+    const found =
+      (staticProps && findKey(staticProps, key)) ||
+      (restProps && findKey(restProps(), key))
+
+    if (opt != null) validateProp(key, props[key], opt, props, !found)
   }
 }
 
+function findKey(obj: Data, key: string) {
+  return Object.keys(obj).find(k => k !== '__rest' && camelize(k) === key)
+}
+
 /**
  * dev only
  */
 function validateProp(
   name: string,
   value: unknown,
-  prop: PropOptions,
+  option: PropOptions,
   props: Data,
   isAbsent: boolean,
 ) {
-  const { required, validator } = prop
+  const { required, validator } = option
   // required!
   if (required && isAbsent) {
     warn('Missing required prop: "' + name + '"')
diff --git a/playground/src/props.js b/playground/src/props.js
index 79d63c8e0..8127cc3a0 100644
--- a/playground/src/props.js
+++ b/playground/src/props.js
@@ -3,11 +3,11 @@ import {
   createComponent,
   defineComponent,
   on,
+  reactive,
   ref,
+  renderEffect,
   setText,
   template,
-  watch,
-  watchEffect,
 } from '@vue/vapor'
 
 const t0 = template('<button></button>')
@@ -16,22 +16,36 @@ export default defineComponent({
   vapor: true,
   setup() {
     const count = ref(1)
+    const props = reactive({
+      a: 'b',
+      'foo-bar': 100,
+    })
     const handleClick = () => {
       count.value++
+      props['foo-bar']++
+      // @ts-expect-error
+      props.boolean = true
+      console.log(count)
     }
 
     return (() => {
       const n0 = /** @type {HTMLButtonElement} */ (t0())
       on(n0, 'click', () => handleClick)
-      watchEffect(() => setText(n0, count.value))
+      renderEffect(() => setText(n0, count.value))
       /** @type {any} */
-      const n1 = createComponent(child, {
-        /* <Comp :count="count" /> */
-        count: () => count.value,
-
-        /* <Comp :inline-double="count * 2" /> */
-        inlineDouble: () => count.value * 2,
-      })
+      const n1 = createComponent(child, [
+        {
+          /* <Comp :count="count" /> */
+          count: () => {
+            // console.trace('access')
+            return count.value
+          },
+          /* <Comp :inline-double="count * 2" /> */
+          inlineDouble: () => count.value * 2,
+          id: () => 'hello',
+        },
+        () => props,
+      ])
       return [n0, n1]
     })()
   },
@@ -44,24 +58,22 @@ const child = defineComponent({
   props: {
     count: { type: Number, default: 1 },
     inlineDouble: { type: Number, default: 2 },
+    fooBar: { type: Number, required: true },
+    boolean: { type: Boolean },
   },
 
-  setup(props) {
-    watch(
-      () => props.count,
-      v => console.log('count changed', v),
-    )
-    watch(
-      () => props.inlineDouble,
-      v => console.log('inlineDouble changed', v),
-    )
+  setup(props, { attrs }) {
+    console.log(props, { ...props })
+    console.log(attrs, { ...attrs })
 
     return (() => {
       const n0 = /** @type {HTMLParagraphElement} */ (t1())
-      watchEffect(() => {
-        setText(n0, props.count + ' * 2 = ' + props.inlineDouble)
-      })
-      return n0
+      renderEffect(() =>
+        setText(n0, props.count + ' * 2 = ' + props.inlineDouble),
+      )
+      const n1 = /** @type {HTMLParagraphElement} */ (t1())
+      renderEffect(() => setText(n1, props.fooBar, ', ', props.boolean))
+      return [n0, n1]
     })()
   },
 })

From d87d6b8c82c0a7bf04f182a8b84a3b11578d82d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Fri, 15 Mar 2024 20:10:38 +0800
Subject: [PATCH 06/13] fix: unit test

---
 packages/runtime-vapor/__tests__/_utils.ts    | 14 +--
 .../runtime-vapor/__tests__/component.spec.ts |  6 +-
 .../__tests__/componentEmits.spec.ts          | 54 +++++-----
 .../__tests__/componentProps.spec.ts          | 99 +++++++++----------
 packages/runtime-vapor/src/apiCreateApp.ts    |  2 +-
 packages/runtime-vapor/src/componentEmits.ts  |  2 +
 packages/runtime-vapor/src/componentProps.ts  | 16 +--
 packages/runtime-vapor/src/index.ts           |  2 +-
 8 files changed, 97 insertions(+), 98 deletions(-)

diff --git a/packages/runtime-vapor/__tests__/_utils.ts b/packages/runtime-vapor/__tests__/_utils.ts
index 5790c12c0..d9169061d 100644
--- a/packages/runtime-vapor/__tests__/_utils.ts
+++ b/packages/runtime-vapor/__tests__/_utils.ts
@@ -1,12 +1,12 @@
-import type { Data } from '@vue/shared'
 import {
+  type App,
   type ComponentInternalInstance,
   type ObjectComponent,
   type SetupFn,
-  render as _render,
+  createVaporApp,
   defineComponent,
-  test_createComponent,
 } from '../src'
+import type { RawProps } from '../src/componentProps'
 
 export function makeRender<Component = ObjectComponent | SetupFn>(
   initHost = () => {
@@ -27,18 +27,20 @@ export function makeRender<Component = ObjectComponent | SetupFn>(
   const define = (comp: Component) => {
     const component = defineComponent(comp as any)
     let instance: ComponentInternalInstance
+    let app: App
     const render = (
-      props: Data = {},
+      props: RawProps = {},
       container: string | ParentNode = '#host',
     ) => {
-      instance = test_createComponent(component, props)
-      _render(instance, container)
+      app = createVaporApp(component, props)
+      instance = app.mount(container)
       return res()
     }
     const res = () => ({
       component,
       host,
       instance,
+      app,
       render,
     })
 
diff --git a/packages/runtime-vapor/__tests__/component.spec.ts b/packages/runtime-vapor/__tests__/component.spec.ts
index 7a2a68a78..c166a8c73 100644
--- a/packages/runtime-vapor/__tests__/component.spec.ts
+++ b/packages/runtime-vapor/__tests__/component.spec.ts
@@ -1,4 +1,4 @@
-import { ref, setText, template, unmountComponent, watchEffect } from '../src'
+import { ref, setText, template, watchEffect } from '../src'
 import { describe, expect } from 'vitest'
 import { makeRender } from './_utils'
 
@@ -6,7 +6,7 @@ const define = makeRender()
 
 describe('component', () => {
   test('unmountComponent', async () => {
-    const { host, instance } = define(() => {
+    const { host, app } = define(() => {
       const count = ref(0)
       const t0 = template('<div></div>')
       const n0 = t0()
@@ -16,7 +16,7 @@ describe('component', () => {
       return n0
     }).render()
     expect(host.innerHTML).toBe('<div>0</div>')
-    unmountComponent(instance)
+    app.unmount()
     expect(host.innerHTML).toBe('')
   })
 })
diff --git a/packages/runtime-vapor/__tests__/componentEmits.spec.ts b/packages/runtime-vapor/__tests__/componentEmits.spec.ts
index b2e34d572..6094c5120 100644
--- a/packages/runtime-vapor/__tests__/componentEmits.spec.ts
+++ b/packages/runtime-vapor/__tests__/componentEmits.spec.ts
@@ -3,13 +3,13 @@
 // Note: emits and listener fallthrough is tested in
 // ./rendererAttrsFallthrough.spec.ts.
 
-import { nextTick, onBeforeUnmount, unmountComponent } from '../src'
+import { nextTick, onBeforeUnmount } from '../src'
 import { isEmitListener } from '../src/componentEmits'
 import { makeRender } from './_utils'
 
 const define = makeRender<any>()
 
-describe('component: emit', () => {
+describe.todo('component: emit', () => {
   test('trigger handlers', () => {
     const { render } = define({
       render() {},
@@ -137,9 +137,7 @@ describe('component: emit', () => {
     const fn2 = vi.fn()
 
     render({
-      get onFoo() {
-        return [fn1, fn2]
-      },
+      onFoo: () => [fn1, fn2],
     })
     expect(fn1).toHaveBeenCalledTimes(1)
     expect(fn1).toHaveBeenCalledWith(1)
@@ -246,22 +244,22 @@ describe('component: emit', () => {
     const fn1 = vi.fn()
     const fn2 = vi.fn()
     render({
-      get modelValue() {
+      modelValue() {
         return null
       },
-      get modelModifiers() {
+      modelModifiers() {
         return { number: true }
       },
-      get ['onUpdate:modelValue']() {
+      ['onUpdate:modelValue']() {
         return fn1
       },
-      get foo() {
+      foo() {
         return null
       },
-      get fooModifiers() {
+      fooModifiers() {
         return { number: true }
       },
-      get ['onUpdate:foo']() {
+      ['onUpdate:foo']() {
         return fn2
       },
     })
@@ -282,22 +280,22 @@ describe('component: emit', () => {
     const fn1 = vi.fn()
     const fn2 = vi.fn()
     render({
-      get modelValue() {
+      modelValue() {
         return null
       },
-      get modelModifiers() {
+      modelModifiers() {
         return { trim: true }
       },
-      get ['onUpdate:modelValue']() {
+      ['onUpdate:modelValue']() {
         return fn1
       },
-      get foo() {
+      foo() {
         return null
       },
-      get fooModifiers() {
+      fooModifiers() {
         return { trim: true }
       },
-      get 'onUpdate:foo'() {
+      'onUpdate:foo'() {
         return fn2
       },
     })
@@ -318,22 +316,22 @@ describe('component: emit', () => {
     const fn1 = vi.fn()
     const fn2 = vi.fn()
     render({
-      get modelValue() {
+      modelValue() {
         return null
       },
-      get modelModifiers() {
+      modelModifiers() {
         return { trim: true, number: true }
       },
-      get ['onUpdate:modelValue']() {
+      ['onUpdate:modelValue']() {
         return fn1
       },
-      get foo() {
+      foo() {
         return null
       },
-      get fooModifiers() {
+      fooModifiers() {
         return { trim: true, number: true }
       },
-      get ['onUpdate:foo']() {
+      ['onUpdate:foo']() {
         return fn2
       },
     })
@@ -352,13 +350,13 @@ describe('component: emit', () => {
     })
     const fn = vi.fn()
     render({
-      get modelValue() {
+      modelValue() {
         return null
       },
-      get modelModifiers() {
+      modelModifiers() {
         return { trim: true }
       },
-      get ['onUpdate:modelValue']() {
+      ['onUpdate:modelValue']() {
         return fn
       },
     })
@@ -397,7 +395,7 @@ describe('component: emit', () => {
 
   test('does not emit after unmount', async () => {
     const fn = vi.fn()
-    const { instance } = define({
+    const { app } = define({
       emits: ['closing'],
       setup(_: any, { emit }: any) {
         onBeforeUnmount(async () => {
@@ -412,7 +410,7 @@ describe('component: emit', () => {
       },
     })
     await nextTick()
-    unmountComponent(instance)
+    app.unmount()
     await nextTick()
     expect(fn).not.toHaveBeenCalled()
   })
diff --git a/packages/runtime-vapor/__tests__/componentProps.spec.ts b/packages/runtime-vapor/__tests__/componentProps.spec.ts
index df493d71d..d74057bfe 100644
--- a/packages/runtime-vapor/__tests__/componentProps.spec.ts
+++ b/packages/runtime-vapor/__tests__/componentProps.spec.ts
@@ -1,9 +1,5 @@
 // NOTE: This test is implemented based on the case of `runtime-core/__test__/componentProps.spec.ts`.
 
-// NOTE: not supported
-// mixins
-// caching
-
 import { setCurrentInstance } from '../src/component'
 import {
   defineComponent,
@@ -18,7 +14,7 @@ import { makeRender } from './_utils'
 
 const define = makeRender<any>()
 
-describe('component props (vapor)', () => {
+describe('component: props', () => {
   test('stateful', () => {
     let props: any
     let attrs: any
@@ -33,10 +29,10 @@ describe('component props (vapor)', () => {
     })
 
     render({
-      get fooBar() {
+      fooBar() {
         return 1
       },
-      get bar() {
+      bar() {
         return 2
       },
     })
@@ -45,13 +41,13 @@ describe('component props (vapor)', () => {
 
     // test passing kebab-case and resolving to camelCase
     render({
-      get ['foo-bar']() {
+      ['foo-bar']() {
         return 2
       },
-      get bar() {
+      bar() {
         return 3
       },
-      get baz() {
+      baz() {
         return 4
       },
     })
@@ -61,16 +57,16 @@ describe('component props (vapor)', () => {
 
     // test updating kebab-case should not delete it (#955)
     render({
-      get ['foo-bar']() {
+      ['foo-bar']() {
         return 3
       },
-      get bar() {
+      bar() {
         return 3
       },
-      get baz() {
+      baz() {
         return 4
       },
-      get barBaz() {
+      barBaz() {
         return 5
       },
     })
@@ -80,7 +76,7 @@ describe('component props (vapor)', () => {
     expect(attrs.baz).toEqual(4)
 
     render({
-      get qux() {
+      qux() {
         return 5
       },
     })
@@ -106,10 +102,10 @@ describe('component props (vapor)', () => {
     Comp.props = ['foo']
 
     render({
-      get foo() {
+      foo() {
         return 1
       },
-      get bar() {
+      bar() {
         return 2
       },
     })
@@ -117,13 +113,13 @@ describe('component props (vapor)', () => {
     expect(attrs.bar).toEqual(2)
 
     render({
-      get foo() {
+      foo() {
         return 2
       },
-      get bar() {
+      bar() {
         return 3
       },
-      get baz() {
+      baz() {
         return 4
       },
     })
@@ -132,7 +128,7 @@ describe('component props (vapor)', () => {
     expect(attrs.baz).toEqual(4)
 
     render({
-      get qux() {
+      qux() {
         return 5
       },
     })
@@ -153,7 +149,7 @@ describe('component props (vapor)', () => {
     })
 
     render({
-      get foo() {
+      foo() {
         return 1
       },
     })
@@ -161,7 +157,7 @@ describe('component props (vapor)', () => {
     expect(attrs.foo).toEqual(1)
 
     render({
-      get foo() {
+      foo() {
         return 2
       },
     })
@@ -186,9 +182,9 @@ describe('component props (vapor)', () => {
 
     render({
       // absent should cast to false
-      bar: '', // empty string should cast to true
-      baz: 'baz', // same string should cast to true
-      qux: 'ok', // other values should be left in-tact (but raise warning)
+      bar: () => '', // empty string should cast to true
+      baz: () => 'baz', // same string should cast to true
+      qux: () => 'ok', // other values should be left in-tact (but raise warning)
     })
 
     expect(props.foo).toBe(false)
@@ -222,60 +218,57 @@ describe('component props (vapor)', () => {
     })
 
     render({
-      get foo() {
+      foo() {
         return 2
       },
     })
     expect(props.foo).toBe(2)
-    // const prevBar = props.bar
-    props.bar
     expect(props.bar).toEqual({ a: 1 })
     expect(props.baz).toEqual(defaultBaz)
-    // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: (caching is not supported)
-    expect(defaultFn).toHaveBeenCalledTimes(3)
+    expect(defaultFn).toHaveBeenCalledTimes(1)
     expect(defaultBaz).toHaveBeenCalledTimes(0)
 
     // #999: updates should not cause default factory of unchanged prop to be
     // called again
     render({
-      get foo() {
+      foo() {
         return 3
       },
     })
     expect(props.foo).toBe(3)
     expect(props.bar).toEqual({ a: 1 })
     // expect(props.bar).toBe(prevBar) // failed: (caching is not supported)
-    // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 3 times)
+    // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 2 times)
 
     render({
-      get bar() {
+      bar() {
         return { b: 2 }
       },
     })
     expect(props.foo).toBe(1)
     expect(props.bar).toEqual({ b: 2 })
-    // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 3 times)
+    // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 2 times)
 
     render({
-      get foo() {
+      foo() {
         return 3
       },
-      get bar() {
+      bar() {
         return { b: 3 }
       },
     })
     expect(props.foo).toBe(3)
     expect(props.bar).toEqual({ b: 3 })
-    // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 3 times)
+    // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 2 times)
 
     render({
-      get bar() {
+      bar() {
         return { b: 4 }
       },
     })
     expect(props.foo).toBe(1)
     expect(props.bar).toEqual({ b: 4 })
-    // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 3 times)
+    // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 2 times)
   })
 
   test.todo('using inject in default value factory', () => {
@@ -309,10 +302,10 @@ describe('component props (vapor)', () => {
         const n0 = t0()
         renderChild(
           {
-            get foo() {
+            foo() {
               return _ctx.foo
             },
-            get id() {
+            id() {
               return _ctx.id
             },
           },
@@ -345,10 +338,10 @@ describe('component props (vapor)', () => {
       })
 
       const props = {
-        get foo() {
+        foo() {
           return 1
         },
-        get bar() {
+        bar() {
           return 2
         },
       }
@@ -401,16 +394,16 @@ describe('component props (vapor)', () => {
             return n0
           },
         }).render!({
-          get foo() {
+          foo() {
             return 1
           },
-          get bar() {
+          bar() {
             return 2
           },
         })
 
         expect(
-          `Set operation on key "bar" failed: target is readonly.`,
+          `Set operation on key "bar" failed: taris readonly.`,
         ).toHaveBeenWarnedLast()
         expect(mockFn).toHaveBeenCalledWith(2)
       },
@@ -450,7 +443,7 @@ describe('component props (vapor)', () => {
         return () => null
       },
     }).render({
-      get ['foo-bar']() {
+      ['foo-bar']() {
         return 'hello'
       },
     })
@@ -472,7 +465,7 @@ describe('component props (vapor)', () => {
         return n0
       },
     }).render({
-      get foo() {
+      foo() {
         return BigInt(BigInt(100000111)) + BigInt(2000000000) * BigInt(30000000)
       },
     })
@@ -522,11 +515,11 @@ describe('component props (vapor)', () => {
     })
 
     expect(() => {
-      render({ foo: () => {} })
+      render({ foo: () => () => {} })
     }).not.toThrow()
 
     expect(() => {
-      render({ foo: null })
+      render({ foo: () => null })
     }).not.toThrow()
   })
 
@@ -548,7 +541,7 @@ describe('component props (vapor)', () => {
     })
 
     let attrs: any = {
-      get foo() {
+      foo() {
         return undefined
       },
     }
@@ -567,7 +560,7 @@ describe('component props (vapor)', () => {
         type: String,
       },
     }
-    define({ props, render() {} }).render({ msg: 'test' })
+    define({ props, render() {} }).render({ msg: () => 'test' })
 
     expect(Object.keys(props.msg).length).toBe(1)
   })
diff --git a/packages/runtime-vapor/src/apiCreateApp.ts b/packages/runtime-vapor/src/apiCreateApp.ts
index f6890b47e..1d59a79c1 100644
--- a/packages/runtime-vapor/src/apiCreateApp.ts
+++ b/packages/runtime-vapor/src/apiCreateApp.ts
@@ -52,7 +52,7 @@ export function createVaporApp(
 export interface App {
   version: string
   mount(
-    rootContainer: Element | string,
+    rootContainer: ParentNode | string,
     isHydrate?: boolean,
   ): ComponentInternalInstance
   unmount(): void
diff --git a/packages/runtime-vapor/src/componentEmits.ts b/packages/runtime-vapor/src/componentEmits.ts
index 138097c81..8b075281c 100644
--- a/packages/runtime-vapor/src/componentEmits.ts
+++ b/packages/runtime-vapor/src/componentEmits.ts
@@ -45,6 +45,8 @@ export function emit(
   ...rawArgs: any[]
 ) {
   if (instance.isUnmounted) return
+  // TODO
+  // @ts-expect-error
   const { rawProps } = instance
 
   let args = rawArgs
diff --git a/packages/runtime-vapor/src/componentProps.ts b/packages/runtime-vapor/src/componentProps.ts
index 9413a8446..b4ba89dd5 100644
--- a/packages/runtime-vapor/src/componentProps.ts
+++ b/packages/runtime-vapor/src/componentProps.ts
@@ -115,7 +115,7 @@ export function initProps(
           }
           registerProp(key, getter)
         } else {
-          props[key] = undefined
+          registerProp(key, () => undefined, true)
         }
       }
     }
@@ -134,7 +134,7 @@ export function initProps(
   }
   instance.attrs = attrs
 
-  function registerProp(rawKey: string, getter: () => any) {
+  function registerProp(rawKey: string, getter: () => any, isStatic?: boolean) {
     const key = camelize(rawKey)
     if (options && hasOwn(options, key)) {
       const getterWithCast =
@@ -151,10 +151,14 @@ export function initProps(
               )
           : getter
 
-      Object.defineProperty(props, key, {
-        get: getterWithCast,
-        enumerable: true,
-      })
+      if (isStatic) {
+        props[key] = getterWithCast()
+      } else {
+        Object.defineProperty(props, key, {
+          get: getterWithCast,
+          enumerable: true,
+        })
+      }
     } else if (!isEmitListener(instance.emitsOptions, rawKey)) {
       Object.defineProperty(attrs, rawKey, {
         get: getter,
diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts
index 272163229..dded0feab 100644
--- a/packages/runtime-vapor/src/index.ts
+++ b/packages/runtime-vapor/src/index.ts
@@ -100,7 +100,7 @@ export {
   onErrorCaptured,
   // onServerPrefetch,
 } from './apiLifecycle'
-export { createVaporApp } from './apiCreateApp'
+export { createVaporApp, type App } from './apiCreateApp'
 export { createIf } from './apiCreateIf'
 export { createFor } from './apiCreateFor'
 export { createComponent } from './apiCreateComponent'

From 5f77a2a5e9608f6693bf81d8b55f219afb61d670 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Fri, 15 Mar 2024 22:15:20 +0800
Subject: [PATCH 07/13] feat: app config & context

---
 .../{apiCreateApp.ts => apiCreateVaporApp.ts} | 44 +++++++++++++++++++
 packages/runtime-vapor/src/index.ts           |  7 ++-
 2 files changed, 50 insertions(+), 1 deletion(-)
 rename packages/runtime-vapor/src/{apiCreateApp.ts => apiCreateVaporApp.ts} (67%)

diff --git a/packages/runtime-vapor/src/apiCreateApp.ts b/packages/runtime-vapor/src/apiCreateVaporApp.ts
similarity index 67%
rename from packages/runtime-vapor/src/apiCreateApp.ts
rename to packages/runtime-vapor/src/apiCreateVaporApp.ts
index 1d59a79c1..af8e480fd 100644
--- a/packages/runtime-vapor/src/apiCreateApp.ts
+++ b/packages/runtime-vapor/src/apiCreateVaporApp.ts
@@ -18,10 +18,24 @@ export function createVaporApp(
     rootProps = null
   }
 
+  const context = createAppContext()
   let instance: ComponentInternalInstance
 
   const app: App = {
     version,
+
+    get config() {
+      return context.config
+    },
+
+    set config(v) {
+      if (__DEV__) {
+        warn(
+          `app.config cannot be replaced. Modify individual options instead.`,
+        )
+      }
+    },
+
     mount(rootContainer): any {
       if (!instance) {
         instance = createComponentInstance(rootComponent, rootProps)
@@ -49,11 +63,41 @@ export function createVaporApp(
   return app
 }
 
+function createAppContext(): AppContext {
+  return {
+    app: null as any,
+    config: {
+      errorHandler: undefined,
+      warnHandler: undefined,
+    },
+  }
+}
+
 export interface App {
   version: string
+  config: AppConfig
+
   mount(
     rootContainer: ParentNode | string,
     isHydrate?: boolean,
   ): ComponentInternalInstance
   unmount(): void
 }
+
+export interface AppConfig {
+  errorHandler?: (
+    err: unknown,
+    instance: ComponentInternalInstance | null,
+    info: string,
+  ) => void
+  warnHandler?: (
+    msg: string,
+    instance: ComponentInternalInstance | null,
+    trace: string,
+  ) => void
+}
+
+export interface AppContext {
+  app: App // for devtools
+  config: AppConfig
+}
diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts
index dded0feab..2ce9a8360 100644
--- a/packages/runtime-vapor/src/index.ts
+++ b/packages/runtime-vapor/src/index.ts
@@ -100,7 +100,12 @@ export {
   onErrorCaptured,
   // onServerPrefetch,
 } from './apiLifecycle'
-export { createVaporApp, type App } from './apiCreateApp'
+export {
+  createVaporApp,
+  type App,
+  type AppConfig,
+  type AppContext,
+} from './apiCreateVaporApp'
 export { createIf } from './apiCreateIf'
 export { createFor } from './apiCreateFor'
 export { createComponent } from './apiCreateComponent'

From 7a96ee9b4813c2cf0a9db7bc1ebde8eb6026f941 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sat, 16 Mar 2024 02:36:49 +0800
Subject: [PATCH 08/13] feat: attrs

---
 .../src/generators/component.ts               |  50 +++-
 .../compiler-vapor/src/generators/prop.ts     |   4 +-
 packages/compiler-vapor/src/ir.ts             |   2 +-
 .../src/transforms/transformElement.ts        |  14 +-
 packages/runtime-vapor/src/apiRender.ts       |   4 +
 packages/runtime-vapor/src/component.ts       |   3 +
 packages/runtime-vapor/src/componentProps.ts  | 213 ++++++++++++------
 packages/runtime-vapor/src/renderWatch.ts     |   3 +
 playground/src/components.vue                 |  24 +-
 playground/src/sub-comp.vue                   |  14 ++
 10 files changed, 244 insertions(+), 87 deletions(-)

diff --git a/packages/compiler-vapor/src/generators/component.ts b/packages/compiler-vapor/src/generators/component.ts
index 7a76d50ee..ad54d884f 100644
--- a/packages/compiler-vapor/src/generators/component.ts
+++ b/packages/compiler-vapor/src/generators/component.ts
@@ -1,6 +1,16 @@
+import { isArray } from '@vue/shared'
 import type { CodegenContext } from '../generate'
-import type { CreateComponentIRNode } from '../ir'
-import { type CodeFragment, NEWLINE, genCall } from './utils'
+import type { CreateComponentIRNode, IRProp } from '../ir'
+import {
+  type CodeFragment,
+  INDENT_END,
+  INDENT_START,
+  NEWLINE,
+  genCall,
+  genMulti,
+} from './utils'
+import { genExpression } from './expression'
+import { genPropKey } from './prop'
 
 export function genCreateComponent(
   oper: CreateComponentIRNode,
@@ -15,6 +25,40 @@ export function genCreateComponent(
   return [
     NEWLINE,
     `const n${oper.id} = `,
-    ...genCall(vaporHelper('createComponent'), tag),
+    ...genCall(vaporHelper('createComponent'), tag, genProps()),
   ]
+
+  function genProps() {
+    const props = oper.props
+      .map(props => {
+        if (isArray(props)) {
+          if (!props.length) return undefined
+          return genStaticProps(props)
+        } else {
+          return ['() => (', ...genExpression(props, context), ')']
+        }
+      })
+      .filter(Boolean)
+    if (props.length) {
+      return genMulti(['[', ']', ', '], ...props)
+    }
+  }
+
+  function genStaticProps(props: IRProp[]) {
+    return genMulti(
+      [
+        ['{', INDENT_START, NEWLINE],
+        [INDENT_END, NEWLINE, '}'],
+        [', ', NEWLINE],
+      ],
+      ...props.map(prop => {
+        return [
+          ...genPropKey(prop, context),
+          ': () => (',
+          ...genExpression(prop.values[0], context),
+          ')',
+        ]
+      }),
+    )
+  }
 }
diff --git a/packages/compiler-vapor/src/generators/prop.ts b/packages/compiler-vapor/src/generators/prop.ts
index 7ef11811e..8fcaf28bc 100644
--- a/packages/compiler-vapor/src/generators/prop.ts
+++ b/packages/compiler-vapor/src/generators/prop.ts
@@ -78,14 +78,14 @@ function genLiteralObjectProps(
   return genMulti(
     ['{ ', ' }', ', '],
     ...props.map(prop => [
-      ...genPropertyKey(prop, context),
+      ...genPropKey(prop, context),
       `: `,
       ...genPropValue(prop.values, context),
     ]),
   )
 }
 
-function genPropertyKey(
+export function genPropKey(
   { key: node, runtimeCamelize, modifier }: IRProp,
   context: CodegenContext,
 ): CodeFragment[] {
diff --git a/packages/compiler-vapor/src/ir.ts b/packages/compiler-vapor/src/ir.ts
index 4caf8f8d6..848e98014 100644
--- a/packages/compiler-vapor/src/ir.ts
+++ b/packages/compiler-vapor/src/ir.ts
@@ -178,7 +178,7 @@ export interface CreateComponentIRNode extends BaseIRNode {
   type: IRNodeTypes.CREATE_COMPONENT_NODE
   id: number
   tag: string
-  props: IRProps
+  props: IRProps[]
   // TODO slots
 
   resolve: boolean
diff --git a/packages/compiler-vapor/src/transforms/transformElement.ts b/packages/compiler-vapor/src/transforms/transformElement.ts
index 97cb4ffba..5e80749e0 100644
--- a/packages/compiler-vapor/src/transforms/transformElement.ts
+++ b/packages/compiler-vapor/src/transforms/transformElement.ts
@@ -58,18 +58,18 @@ export const transformElement: NodeTransform = (node, context) => {
 
 function transformComponentElement(
   tag: string,
-  propsResult: ReturnType<typeof buildProps>,
+  propsResult: PropsResult,
   context: TransformContext,
 ) {
   const { bindingMetadata } = context.options
   const resolve = !bindingMetadata[tag]
   context.dynamic.flags |= DynamicFlag.NON_TEMPLATE | DynamicFlag.INSERT
+
   context.registerOperation({
     type: IRNodeTypes.CREATE_COMPONENT_NODE,
     id: context.reference(),
     tag,
-    // TODO
-    props: [],
+    props: propsResult[0] ? propsResult[1] : [propsResult[1]],
     resolve,
   })
 }
@@ -118,12 +118,14 @@ function transformNativeElement(
   }
 }
 
+export type PropsResult =
+  | [dynamic: true, props: IRProps[], expressions: SimpleExpressionNode[]]
+  | [dynamic: false, props: IRProp[]]
+
 function buildProps(
   node: ElementNode,
   context: TransformContext<ElementNode>,
-):
-  | [dynamic: true, props: IRProps[], expressions: SimpleExpressionNode[]]
-  | [dynamic: false, props: IRProp[]] {
+): PropsResult {
   const props = node.props as (VaporDirectiveNode | AttributeNode)[]
   if (props.length === 0) return [false, []]
 
diff --git a/packages/runtime-vapor/src/apiRender.ts b/packages/runtime-vapor/src/apiRender.ts
index 3d6224adb..4ca6cef24 100644
--- a/packages/runtime-vapor/src/apiRender.ts
+++ b/packages/runtime-vapor/src/apiRender.ts
@@ -87,6 +87,10 @@ function mountComponent(
   // hook: mounted
   queuePostRenderEffect(() => {
     invokeDirectiveHook(instance, 'mounted')
+    // TODO
+    for (const com of instance.comps) {
+      com.isMounted = true
+    }
     m && invokeArrayFns(m)
   })
   reset()
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 4bfe39b9e..b980cc7ec 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -5,6 +5,7 @@ import type { DirectiveBinding } from './directives'
 import {
   type ComponentPropsOptions,
   type NormalizedPropsOptions,
+  type NormalizedRawProps,
   type RawProps,
   initProps,
   normalizePropsOptions,
@@ -48,6 +49,7 @@ export interface ComponentInternalInstance {
   comps: Set<ComponentInternalInstance>
   dirs: Map<Node, DirectiveBinding[]>
 
+  rawProps: NormalizedRawProps
   propsOptions: NormalizedPropsOptions
   emitsOptions: ObjectEmitsOptions | null
 
@@ -156,6 +158,7 @@ export function createComponentInstance(
     dirs: new Map(),
 
     // resolved props and emits options
+    rawProps: null!, // set later
     propsOptions: normalizePropsOptions(component),
     emitsOptions: normalizeEmitsOptions(component),
 
diff --git a/packages/runtime-vapor/src/componentProps.ts b/packages/runtime-vapor/src/componentProps.ts
index b4ba89dd5..6b228acb0 100644
--- a/packages/runtime-vapor/src/componentProps.ts
+++ b/packages/runtime-vapor/src/componentProps.ts
@@ -9,6 +9,7 @@ import {
   isArray,
   isFunction,
 } from '@vue/shared'
+import { shallowReactive } from '@vue/reactivity'
 import { warn } from './warning'
 import {
   type Component,
@@ -71,11 +72,9 @@ export type NormalizedPropsOptions =
   | []
 
 type StaticProps = Record<string, () => unknown>
-type RestProps = () => Data
-export type RawProps =
-  | [staticProps?: StaticProps, restProps?: RestProps]
-  | StaticProps
-  | null
+type DynamicProps = () => Data
+export type NormalizedRawProps = Array<StaticProps | DynamicProps>
+export type RawProps = NormalizedRawProps | StaticProps | null
 
 export function initProps(
   instance: ComponentInternalInstance,
@@ -83,98 +82,161 @@ export function initProps(
   isStateful: boolean,
 ) {
   const props: Data = {}
-  const attrs: Data = {}
-
-  let staticProps: StaticProps | undefined
-  let restProps: (() => Data) | undefined
 
-  if (rawProps) {
-    if (isArray(rawProps)) {
-      ;[staticProps, restProps] = rawProps
-    } else {
-      staticProps = rawProps
-    }
-  }
+  if (!rawProps) rawProps = []
+  else if (!isArray(rawProps)) rawProps = [rawProps]
+  instance.rawProps = rawProps
 
   const [options, needCastKeys] = instance.propsOptions
 
-  if (staticProps) {
-    for (const key in staticProps) {
-      registerProp(key, staticProps[key])
-    }
-  }
-
-  // ensure all declared prop keys are present
   if (options) {
-    for (const key in options) {
-      if (!(key in props)) {
-        if (restProps) {
-          const getter = () => {
-            const rest = restProps!()
-            return key in rest ? rest[key] : rest[hyphenate(key)]
-          }
-          registerProp(key, getter)
+    const hasDynamicProps = rawProps.length > 1
+    if (hasDynamicProps) {
+      for (const key in options) {
+        const getter = () =>
+          resolveDynamicProp(rawProps as NormalizedRawProps, key)
+        registerProp(key, getter, true)
+      }
+    } else {
+      for (const key in options) {
+        const rawKey = getRawKey(rawProps[0] as StaticProps, key)
+        if (rawKey) {
+          registerProp(key, (rawProps[0] as StaticProps)[rawKey])
         } else {
-          registerProp(key, () => undefined, true)
+          registerProp(key, undefined, false, true)
         }
       }
     }
+  }
 
-    // validation
-    if (__DEV__) {
-      validateProps(staticProps, restProps, props, options)
-    }
+  // validation
+  if (__DEV__) {
+    validateProps(rawProps, props, options || {})
   }
 
+  const attrs: Data = (instance.attrs = shallowReactive({}))
+  patchAttrs(instance)
+
   if (isStateful) {
     instance.props = props
   } else {
     // functional w/ optional props, props === attrs
     instance.props = instance.propsOptions === EMPTY_ARR ? attrs : props
   }
-  instance.attrs = attrs
 
-  function registerProp(rawKey: string, getter: () => any, isStatic?: boolean) {
+  function registerProp(
+    rawKey: string,
+    getter: () => DynamicPropResult,
+    isDynamic: true,
+    isAbsent?: boolean,
+  ): void
+  function registerProp(
+    rawKey: string,
+    getter?: () => any,
+    isDynamic?: false,
+    isAbsent?: boolean,
+  ): void
+  function registerProp(
+    rawKey: string,
+    getter?: (() => unknown) | (() => DynamicPropResult),
+    isDynamic?: boolean,
+    isAbsent?: boolean,
+  ) {
     const key = camelize(rawKey)
-    if (options && hasOwn(options, key)) {
-      const getterWithCast =
-        needCastKeys && needCastKeys.includes(key)
-          ? () =>
-              resolvePropValue(
-                options!,
-                props,
-                rawKey,
-                getter(),
-                instance,
-                (!rawProps || !hasOwn(rawProps, rawKey)) &&
-                  (!restProps || !hasOwn(restProps(), rawKey)),
-              )
-          : getter
-
-      if (isStatic) {
-        props[key] = getterWithCast()
-      } else {
-        Object.defineProperty(props, key, {
-          get: getterWithCast,
-          enumerable: true,
-        })
+    if (key in props) return
+
+    const needCast = needCastKeys && needCastKeys.includes(key)
+    const withCast = (value: unknown, absent?: boolean) =>
+      resolvePropValue(options!, props, key, value, instance, absent)
+
+    if (isAbsent) {
+      props[key] = needCast ? withCast(undefined, true) : undefined
+    } else {
+      const get: () => unknown = isDynamic
+        ? needCast
+          ? () => withCast(...(getter!() as DynamicPropResult))
+          : () => (getter!() as DynamicPropResult)[0]
+        : needCast
+          ? () => withCast(getter!())
+          : getter!
+
+      Object.defineProperty(props, key, {
+        get,
+        enumerable: true,
+      })
+    }
+  }
+}
+
+export function patchAttrs(instance: ComponentInternalInstance) {
+  const attrs = instance.attrs
+  const options = instance.propsOptions[0]
+
+  const keys = new Set<string>()
+  for (const props of Array.from(instance.rawProps).reverse()) {
+    if (isFunction(props)) {
+      const resolved = props()
+      for (const rawKey in resolved) {
+        registerAttr(rawKey, () => resolved[rawKey])
+      }
+    } else {
+      for (const rawKey in props) {
+        registerAttr(rawKey, props[rawKey])
       }
-    } else if (!isEmitListener(instance.emitsOptions, rawKey)) {
-      Object.defineProperty(attrs, rawKey, {
+    }
+  }
+
+  for (const key in attrs) {
+    if (!keys.has(key)) {
+      delete attrs[key]
+    }
+  }
+
+  function registerAttr(key: string, getter: () => unknown) {
+    if (
+      (!options || !(key in options)) &&
+      !isEmitListener(instance.emitsOptions, key)
+    ) {
+      keys.add(key)
+      if (key in attrs) return
+      Object.defineProperty(attrs, key, {
         get: getter,
         enumerable: true,
+        configurable: true,
       })
     }
   }
 }
 
+function getRawKey(obj: Data, key: string) {
+  return Object.keys(obj).find(k => camelize(k) === key)
+}
+
+type DynamicPropResult = [value: unknown, absent: boolean]
+function resolveDynamicProp(
+  rawProps: NormalizedRawProps,
+  key: string,
+): DynamicPropResult {
+  for (const props of Array.from(rawProps).reverse()) {
+    if (isFunction(props)) {
+      const resolved = props()
+      const rawKey = getRawKey(resolved, key)
+      if (rawKey) return [resolved[rawKey], false]
+    } else {
+      const rawKey = getRawKey(props, key)
+      if (rawKey) return [props[rawKey](), false]
+    }
+  }
+  return [undefined, true]
+}
+
 function resolvePropValue(
   options: NormalizedProps,
   props: Data,
   key: string,
   value: unknown,
   instance: ComponentInternalInstance,
-  isAbsent: boolean,
+  isAbsent?: boolean,
 ) {
   const opt = options[key]
   if (opt != null) {
@@ -291,25 +353,28 @@ function getTypeIndex(
  * dev only
  */
 function validateProps(
-  staticProps: StaticProps | undefined,
-  restProps: RestProps | undefined,
+  rawProps: NormalizedRawProps,
   props: Data,
   options: NormalizedProps,
 ) {
+  const presentKeys: string[] = []
+  for (const props of rawProps) {
+    presentKeys.push(...Object.keys(isFunction(props) ? props() : props))
+  }
+
   for (const key in options) {
     const opt = options[key]
-    const found =
-      (staticProps && findKey(staticProps, key)) ||
-      (restProps && findKey(restProps(), key))
-
-    if (opt != null) validateProp(key, props[key], opt, props, !found)
+    if (opt != null)
+      validateProp(
+        key,
+        props[key],
+        opt,
+        props,
+        !presentKeys.some(k => camelize(k) === key),
+      )
   }
 }
 
-function findKey(obj: Data, key: string) {
-  return Object.keys(obj).find(k => k !== '__rest' && camelize(k) === key)
-}
-
 /**
  * dev only
  */
diff --git a/packages/runtime-vapor/src/renderWatch.ts b/packages/runtime-vapor/src/renderWatch.ts
index 71364037f..250634906 100644
--- a/packages/runtime-vapor/src/renderWatch.ts
+++ b/packages/runtime-vapor/src/renderWatch.ts
@@ -17,6 +17,7 @@ import {
 import { handleError as handleErrorWithInstance } from './errorHandling'
 import { warn } from './warning'
 import { invokeDirectiveHook } from './directives'
+import { patchAttrs } from './componentProps'
 
 interface RenderWatchOptions {
   immediate?: boolean
@@ -82,6 +83,8 @@ const createMiddleware =
       // beforeUpdate hook
       const isFirstEffect = !instance.isUpdating
       if (isFirstEffect) {
+        // TODO
+        patchAttrs(instance)
         if (bu) {
           invokeArrayFns(bu)
         }
diff --git a/playground/src/components.vue b/playground/src/components.vue
index 4f85a0d49..2dee8bdd3 100644
--- a/playground/src/components.vue
+++ b/playground/src/components.vue
@@ -1,10 +1,32 @@
 <script setup lang="ts">
 import SubComp from './sub-comp.vue'
+import { ref } from 'vue'
+
+const bar = ref('update')
+const id = ref('id')
+const p = ref<any>({
+  bar,
+  id: 'not id',
+  test: 100,
+})
+
+function update() {
+  bar.value = 'updated'
+  p.value.foo = 'updated foo'
+  p.value.newAttr = 'new attr'
+  id.value = 'updated id'
+}
+
+function update2() {
+  delete p.value.test
+}
 </script>
 
 <template>
   <div>
     root comp
-    <SubComp />
+    <button @click="update">update</button>
+    <button @click="update2">update2</button>
+    <SubComp foo="foo" v-bind="p" :baz="'baz'" :id />
   </div>
 </template>
diff --git a/playground/src/sub-comp.vue b/playground/src/sub-comp.vue
index c212a07c8..2f050140c 100644
--- a/playground/src/sub-comp.vue
+++ b/playground/src/sub-comp.vue
@@ -1,10 +1,24 @@
 <script setup lang="ts">
+import { getCurrentInstance, watchEffect } from 'vue/vapor'
+
 const props = defineProps<{
   foo: string
+  bar: string
+  baz: string
 }>()
+
+const attrs = getCurrentInstance()?.attrs
+
+watchEffect(() => {
+  console.log({ ...attrs })
+})
+
+const keys = Object.keys
 </script>
 
 <template>
   <div>sub-comp</div>
   {{ props }}
+  {{ attrs }}
+  {{ keys(attrs) }}
 </template>

From 52255967c3cbc1ced186dc2a219035d32d924738 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sat, 16 Mar 2024 16:50:06 +0800
Subject: [PATCH 09/13] refactor: update attrs

---
 packages/runtime-vapor/src/componentAttrs.ts |  43 ++++++
 packages/runtime-vapor/src/componentProps.ts | 138 +++++++------------
 packages/runtime-vapor/src/renderWatch.ts    |   3 -
 3 files changed, 92 insertions(+), 92 deletions(-)
 create mode 100644 packages/runtime-vapor/src/componentAttrs.ts

diff --git a/packages/runtime-vapor/src/componentAttrs.ts b/packages/runtime-vapor/src/componentAttrs.ts
new file mode 100644
index 000000000..7162c0281
--- /dev/null
+++ b/packages/runtime-vapor/src/componentAttrs.ts
@@ -0,0 +1,43 @@
+import { isFunction } from '@vue/shared'
+import type { ComponentInternalInstance } from './component'
+import { isEmitListener } from './componentEmits'
+
+export function patchAttrs(instance: ComponentInternalInstance) {
+  const attrs = instance.attrs
+  const options = instance.propsOptions[0]
+
+  const keys = new Set<string>()
+  for (const props of Array.from(instance.rawProps).reverse()) {
+    if (isFunction(props)) {
+      const resolved = props()
+      for (const rawKey in resolved) {
+        registerAttr(rawKey, () => resolved[rawKey])
+      }
+    } else {
+      for (const rawKey in props) {
+        registerAttr(rawKey, props[rawKey])
+      }
+    }
+  }
+
+  for (const key in attrs) {
+    if (!keys.has(key)) {
+      delete attrs[key]
+    }
+  }
+
+  function registerAttr(key: string, getter: () => unknown) {
+    if (
+      (!options || !(key in options)) &&
+      !isEmitListener(instance.emitsOptions, key)
+    ) {
+      keys.add(key)
+      if (key in attrs) return
+      Object.defineProperty(attrs, key, {
+        get: getter,
+        enumerable: true,
+        configurable: true,
+      })
+    }
+  }
+}
diff --git a/packages/runtime-vapor/src/componentProps.ts b/packages/runtime-vapor/src/componentProps.ts
index 6b228acb0..157fdeaa6 100644
--- a/packages/runtime-vapor/src/componentProps.ts
+++ b/packages/runtime-vapor/src/componentProps.ts
@@ -9,14 +9,16 @@ import {
   isArray,
   isFunction,
 } from '@vue/shared'
-import { shallowReactive } from '@vue/reactivity'
+import { baseWatch, shallowReactive } from '@vue/reactivity'
 import { warn } from './warning'
 import {
   type Component,
   type ComponentInternalInstance,
   setCurrentInstance,
 } from './component'
-import { isEmitListener } from './componentEmits'
+import { patchAttrs } from './componentAttrs'
+import { watchEffect } from './apiWatch'
+import { createVaporPreScheduler } from './scheduler'
 
 export type ComponentPropsOptions<P = Data> =
   | ComponentObjectPropsOptions<P>
@@ -82,28 +84,34 @@ export function initProps(
   isStateful: boolean,
 ) {
   const props: Data = {}
+  const attrs = (instance.attrs = shallowReactive<Data>({}))
 
   if (!rawProps) rawProps = []
   else if (!isArray(rawProps)) rawProps = [rawProps]
   instance.rawProps = rawProps
 
-  const [options, needCastKeys] = instance.propsOptions
+  const [options] = instance.propsOptions
 
   if (options) {
-    const hasDynamicProps = rawProps.length > 1
+    const hasDynamicProps = rawProps.some(isFunction)
     if (hasDynamicProps) {
       for (const key in options) {
         const getter = () =>
-          resolveDynamicProp(rawProps as NormalizedRawProps, key)
-        registerProp(key, getter, true)
+          getDynamicPropValue(rawProps as NormalizedRawProps, key)
+        registerProp(instance, props, key, getter, true)
       }
     } else {
       for (const key in options) {
         const rawKey = getRawKey(rawProps[0] as StaticProps, key)
         if (rawKey) {
-          registerProp(key, (rawProps[0] as StaticProps)[rawKey])
+          registerProp(
+            instance,
+            props,
+            key,
+            (rawProps[0] as StaticProps)[rawKey],
+          )
         } else {
-          registerProp(key, undefined, false, true)
+          registerProp(instance, props, key, undefined, false, true)
         }
       }
     }
@@ -114,8 +122,9 @@ export function initProps(
     validateProps(rawProps, props, options || {})
   }
 
-  const attrs: Data = (instance.attrs = shallowReactive({}))
-  patchAttrs(instance)
+  baseWatch(() => patchAttrs(instance), undefined, {
+    scheduler: createVaporPreScheduler(instance),
+  })
 
   if (isStateful) {
     instance.props = props
@@ -123,88 +132,39 @@ export function initProps(
     // functional w/ optional props, props === attrs
     instance.props = instance.propsOptions === EMPTY_ARR ? attrs : props
   }
-
-  function registerProp(
-    rawKey: string,
-    getter: () => DynamicPropResult,
-    isDynamic: true,
-    isAbsent?: boolean,
-  ): void
-  function registerProp(
-    rawKey: string,
-    getter?: () => any,
-    isDynamic?: false,
-    isAbsent?: boolean,
-  ): void
-  function registerProp(
-    rawKey: string,
-    getter?: (() => unknown) | (() => DynamicPropResult),
-    isDynamic?: boolean,
-    isAbsent?: boolean,
-  ) {
-    const key = camelize(rawKey)
-    if (key in props) return
-
-    const needCast = needCastKeys && needCastKeys.includes(key)
-    const withCast = (value: unknown, absent?: boolean) =>
-      resolvePropValue(options!, props, key, value, instance, absent)
-
-    if (isAbsent) {
-      props[key] = needCast ? withCast(undefined, true) : undefined
-    } else {
-      const get: () => unknown = isDynamic
-        ? needCast
-          ? () => withCast(...(getter!() as DynamicPropResult))
-          : () => (getter!() as DynamicPropResult)[0]
-        : needCast
-          ? () => withCast(getter!())
-          : getter!
-
-      Object.defineProperty(props, key, {
-        get,
-        enumerable: true,
-      })
-    }
-  }
 }
 
-export function patchAttrs(instance: ComponentInternalInstance) {
-  const attrs = instance.attrs
-  const options = instance.propsOptions[0]
-
-  const keys = new Set<string>()
-  for (const props of Array.from(instance.rawProps).reverse()) {
-    if (isFunction(props)) {
-      const resolved = props()
-      for (const rawKey in resolved) {
-        registerAttr(rawKey, () => resolved[rawKey])
-      }
-    } else {
-      for (const rawKey in props) {
-        registerAttr(rawKey, props[rawKey])
-      }
-    }
-  }
+function registerProp(
+  instance: ComponentInternalInstance,
+  props: Data,
+  rawKey: string,
+  getter?: (() => unknown) | (() => DynamicPropResult),
+  isDynamic?: boolean,
+  isAbsent?: boolean,
+) {
+  const key = camelize(rawKey)
+  if (key in props) return
 
-  for (const key in attrs) {
-    if (!keys.has(key)) {
-      delete attrs[key]
-    }
-  }
+  const [options, needCastKeys] = instance.propsOptions
+  const needCast = needCastKeys && needCastKeys.includes(key)
+  const withCast = (value: unknown, absent?: boolean) =>
+    resolvePropValue(options!, props, key, value, instance, absent)
 
-  function registerAttr(key: string, getter: () => unknown) {
-    if (
-      (!options || !(key in options)) &&
-      !isEmitListener(instance.emitsOptions, key)
-    ) {
-      keys.add(key)
-      if (key in attrs) return
-      Object.defineProperty(attrs, key, {
-        get: getter,
-        enumerable: true,
-        configurable: true,
-      })
-    }
+  if (isAbsent) {
+    props[key] = needCast ? withCast(undefined, true) : undefined
+  } else {
+    const get: () => unknown = isDynamic
+      ? needCast
+        ? () => withCast(...(getter!() as DynamicPropResult))
+        : () => (getter!() as DynamicPropResult)[0]
+      : needCast
+        ? () => withCast(getter!())
+        : getter!
+
+    Object.defineProperty(props, key, {
+      get,
+      enumerable: true,
+    })
   }
 }
 
@@ -213,7 +173,7 @@ function getRawKey(obj: Data, key: string) {
 }
 
 type DynamicPropResult = [value: unknown, absent: boolean]
-function resolveDynamicProp(
+function getDynamicPropValue(
   rawProps: NormalizedRawProps,
   key: string,
 ): DynamicPropResult {
diff --git a/packages/runtime-vapor/src/renderWatch.ts b/packages/runtime-vapor/src/renderWatch.ts
index 250634906..71364037f 100644
--- a/packages/runtime-vapor/src/renderWatch.ts
+++ b/packages/runtime-vapor/src/renderWatch.ts
@@ -17,7 +17,6 @@ import {
 import { handleError as handleErrorWithInstance } from './errorHandling'
 import { warn } from './warning'
 import { invokeDirectiveHook } from './directives'
-import { patchAttrs } from './componentProps'
 
 interface RenderWatchOptions {
   immediate?: boolean
@@ -83,8 +82,6 @@ const createMiddleware =
       // beforeUpdate hook
       const isFirstEffect = !instance.isUpdating
       if (isFirstEffect) {
-        // TODO
-        patchAttrs(instance)
         if (bu) {
           invokeArrayFns(bu)
         }

From 71c9d27524e11fbf303abe2175cecb1c39e00b2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sat, 16 Mar 2024 17:00:38 +0800
Subject: [PATCH 10/13] chore: wip emits

---
 packages/runtime-vapor/src/componentEmits.ts | 3 +++
 packages/runtime-vapor/src/componentProps.ts | 1 -
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-vapor/src/componentEmits.ts b/packages/runtime-vapor/src/componentEmits.ts
index 8b075281c..bbca2044c 100644
--- a/packages/runtime-vapor/src/componentEmits.ts
+++ b/packages/runtime-vapor/src/componentEmits.ts
@@ -1,5 +1,8 @@
 // NOTE: runtime-core/src/componentEmits.ts
 
+// TODO WIP
+// @ts-nocheck
+
 import {
   EMPTY_OBJ,
   type UnionToIntersection,
diff --git a/packages/runtime-vapor/src/componentProps.ts b/packages/runtime-vapor/src/componentProps.ts
index 157fdeaa6..b6734c39a 100644
--- a/packages/runtime-vapor/src/componentProps.ts
+++ b/packages/runtime-vapor/src/componentProps.ts
@@ -17,7 +17,6 @@ import {
   setCurrentInstance,
 } from './component'
 import { patchAttrs } from './componentAttrs'
-import { watchEffect } from './apiWatch'
 import { createVaporPreScheduler } from './scheduler'
 
 export type ComponentPropsOptions<P = Data> =

From 83e4102320903110f88fee39e9c740483ed63723 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sat, 16 Mar 2024 17:39:23 +0800
Subject: [PATCH 11/13] feat: lifecycle

---
 packages/runtime-vapor/src/apiRender.ts       | 38 +++++--------------
 .../runtime-vapor/src/componentLifecycle.ts   | 34 +++++++++++++++++
 playground/src/components.vue                 | 13 ++++++-
 playground/src/sub-comp.vue                   | 14 ++++++-
 4 files changed, 69 insertions(+), 30 deletions(-)
 create mode 100644 packages/runtime-vapor/src/componentLifecycle.ts

diff --git a/packages/runtime-vapor/src/apiRender.ts b/packages/runtime-vapor/src/apiRender.ts
index 4ca6cef24..94efce891 100644
--- a/packages/runtime-vapor/src/apiRender.ts
+++ b/packages/runtime-vapor/src/apiRender.ts
@@ -1,13 +1,10 @@
-import { invokeArrayFns, isArray, isFunction, isObject } from '@vue/shared'
-import {
-  type ComponentInternalInstance,
-  setCurrentInstance,
-  unsetCurrentInstance,
-} from './component'
-import { invokeDirectiveHook } from './directives'
+import { isArray, isFunction, isObject } from '@vue/shared'
+import { type ComponentInternalInstance, setCurrentInstance } from './component'
 import { insert, querySelector, remove } from './dom/element'
 import { flushPostFlushCbs, queuePostRenderEffect } from './scheduler'
 import { proxyRefs } from '@vue/reactivity'
+import { invokeLifecycle } from './componentLifecycle'
+import { VaporLifecycleHooks } from './apiLifecycle'
 
 export const fragmentKey = Symbol(__DEV__ ? `fragmentKey` : ``)
 
@@ -74,44 +71,29 @@ function mountComponent(
   container: ParentNode,
 ) {
   instance.container = container
-  const reset = setCurrentInstance(instance)
-  const { bm, m } = instance
 
   // hook: beforeMount
-  bm && invokeArrayFns(bm)
-  invokeDirectiveHook(instance, 'beforeMount')
+  invokeLifecycle(instance, VaporLifecycleHooks.BEFORE_MOUNT, 'beforeMount')
 
   insert(instance.block!, instance.container)
   instance.isMounted = true
 
   // hook: mounted
-  queuePostRenderEffect(() => {
-    invokeDirectiveHook(instance, 'mounted')
-    // TODO
-    for (const com of instance.comps) {
-      com.isMounted = true
-    }
-    m && invokeArrayFns(m)
-  })
-  reset()
+  invokeLifecycle(instance, VaporLifecycleHooks.MOUNTED, 'mounted', true)
 
   return instance
 }
 
 export function unmountComponent(instance: ComponentInternalInstance) {
-  const { container, block, scope, um, bum } = instance
+  const { container, block, scope } = instance
 
   // hook: beforeUnmount
-  bum && invokeArrayFns(bum)
-  invokeDirectiveHook(instance, 'beforeUnmount')
+  invokeLifecycle(instance, VaporLifecycleHooks.BEFORE_UNMOUNT, 'beforeUnmount')
 
   scope.stop()
   block && remove(block, container)
-  instance.isMounted = false
-  instance.isUnmounted = true
 
   // hook: unmounted
-  invokeDirectiveHook(instance, 'unmounted')
-  um && invokeArrayFns(um)
-  unsetCurrentInstance()
+  invokeLifecycle(instance, VaporLifecycleHooks.UNMOUNTED, 'unmounted', true)
+  queuePostRenderEffect(() => (instance.isUnmounted = true))
 }
diff --git a/packages/runtime-vapor/src/componentLifecycle.ts b/packages/runtime-vapor/src/componentLifecycle.ts
new file mode 100644
index 000000000..2dd94b1d5
--- /dev/null
+++ b/packages/runtime-vapor/src/componentLifecycle.ts
@@ -0,0 +1,34 @@
+import { invokeArrayFns } from '@vue/shared'
+import type { VaporLifecycleHooks } from './apiLifecycle'
+import { type ComponentInternalInstance, setCurrentInstance } from './component'
+import { queuePostRenderEffect } from './scheduler'
+import { type DirectiveHookName, invokeDirectiveHook } from './directives'
+
+export function invokeLifecycle(
+  instance: ComponentInternalInstance,
+  lifecycle: VaporLifecycleHooks,
+  directive: DirectiveHookName,
+  post?: boolean,
+) {
+  invokeArrayFns(post ? [invokeSub, invokeCurrent] : [invokeCurrent, invokeSub])
+
+  function invokeCurrent() {
+    const hooks = instance[lifecycle]
+    if (hooks) {
+      const fn = () => {
+        const reset = setCurrentInstance(instance)
+        invokeArrayFns(hooks)
+        reset()
+      }
+      post ? queuePostRenderEffect(fn) : fn()
+    }
+
+    invokeDirectiveHook(instance, directive)
+  }
+
+  function invokeSub() {
+    instance.comps.forEach(comp =>
+      invokeLifecycle(comp, lifecycle, directive, post),
+    )
+  }
+}
diff --git a/playground/src/components.vue b/playground/src/components.vue
index 2dee8bdd3..b8a8f4ae0 100644
--- a/playground/src/components.vue
+++ b/playground/src/components.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
+import {
+  onBeforeMount,
+  onMounted,
+  onBeforeUnmount,
+  onUnmounted,
+  ref,
+} from 'vue/vapor'
 import SubComp from './sub-comp.vue'
-import { ref } from 'vue'
 
 const bar = ref('update')
 const id = ref('id')
@@ -20,6 +26,11 @@ function update() {
 function update2() {
   delete p.value.test
 }
+
+onBeforeMount(() => console.log('root: before mount'))
+onMounted(() => console.log('root: mounted'))
+onBeforeUnmount(() => console.log('root: before unmount'))
+onUnmounted(() => console.log('root: unmounted'))
 </script>
 
 <template>
diff --git a/playground/src/sub-comp.vue b/playground/src/sub-comp.vue
index 2f050140c..33e7ebd64 100644
--- a/playground/src/sub-comp.vue
+++ b/playground/src/sub-comp.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { getCurrentInstance, watchEffect } from 'vue/vapor'
+import {
+  getCurrentInstance,
+  onBeforeMount,
+  onBeforeUnmount,
+  onMounted,
+  onUnmounted,
+  watchEffect,
+} from 'vue/vapor'
 
 const props = defineProps<{
   foo: string
@@ -14,6 +21,11 @@ watchEffect(() => {
 })
 
 const keys = Object.keys
+
+onBeforeMount(() => console.log('sub: before mount'))
+onMounted(() => console.log('sub: mounted'))
+onBeforeUnmount(() => console.log('sub: before unmount'))
+onUnmounted(() => console.log('sub: unmounted'))
 </script>
 
 <template>

From 2b3962fe2f037daa54c04e7186ae1ed51d584b26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sat, 16 Mar 2024 17:51:29 +0800
Subject: [PATCH 12/13] refactor: optimize attrs

---
 packages/runtime-vapor/src/componentAttrs.ts | 21 ++++++++++----------
 packages/runtime-vapor/src/componentProps.ts | 12 +++++++----
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/runtime-vapor/src/componentAttrs.ts b/packages/runtime-vapor/src/componentAttrs.ts
index 7162c0281..90c4d9cd3 100644
--- a/packages/runtime-vapor/src/componentAttrs.ts
+++ b/packages/runtime-vapor/src/componentAttrs.ts
@@ -7,18 +7,19 @@ export function patchAttrs(instance: ComponentInternalInstance) {
   const options = instance.propsOptions[0]
 
   const keys = new Set<string>()
-  for (const props of Array.from(instance.rawProps).reverse()) {
-    if (isFunction(props)) {
-      const resolved = props()
-      for (const rawKey in resolved) {
-        registerAttr(rawKey, () => resolved[rawKey])
-      }
-    } else {
-      for (const rawKey in props) {
-        registerAttr(rawKey, props[rawKey])
+  if (instance.rawProps.length)
+    for (const props of Array.from(instance.rawProps).reverse()) {
+      if (isFunction(props)) {
+        const resolved = props()
+        for (const rawKey in resolved) {
+          registerAttr(rawKey, () => resolved[rawKey])
+        }
+      } else {
+        for (const rawKey in props) {
+          registerAttr(rawKey, props[rawKey])
+        }
       }
     }
-  }
 
   for (const key in attrs) {
     if (!keys.has(key)) {
diff --git a/packages/runtime-vapor/src/componentProps.ts b/packages/runtime-vapor/src/componentProps.ts
index b6734c39a..1fe907fc0 100644
--- a/packages/runtime-vapor/src/componentProps.ts
+++ b/packages/runtime-vapor/src/componentProps.ts
@@ -91,8 +91,8 @@ export function initProps(
 
   const [options] = instance.propsOptions
 
+  const hasDynamicProps = rawProps.some(isFunction)
   if (options) {
-    const hasDynamicProps = rawProps.some(isFunction)
     if (hasDynamicProps) {
       for (const key in options) {
         const getter = () =>
@@ -121,9 +121,13 @@ export function initProps(
     validateProps(rawProps, props, options || {})
   }
 
-  baseWatch(() => patchAttrs(instance), undefined, {
-    scheduler: createVaporPreScheduler(instance),
-  })
+  if (hasDynamicProps) {
+    baseWatch(() => patchAttrs(instance), undefined, {
+      scheduler: createVaporPreScheduler(instance),
+    })
+  } else {
+    patchAttrs(instance)
+  }
 
   if (isStateful) {
     instance.props = props

From 2ec05d8ffbc421f96d2f91d2a50ae73b861cfa1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sat, 16 Mar 2024 18:49:55 +0800
Subject: [PATCH 13/13] test: simplify

---
 .../__tests__/componentProps.spec.ts          | 356 +++++++-----------
 .../runtime-vapor/src/apiCreateComponent.ts   |   2 +-
 packages/runtime-vapor/src/componentAttrs.ts  |   4 +-
 packages/runtime-vapor/src/componentProps.ts  |   6 +-
 4 files changed, 146 insertions(+), 222 deletions(-)

diff --git a/packages/runtime-vapor/__tests__/componentProps.spec.ts b/packages/runtime-vapor/__tests__/componentProps.spec.ts
index d74057bfe..12f97274a 100644
--- a/packages/runtime-vapor/__tests__/componentProps.spec.ts
+++ b/packages/runtime-vapor/__tests__/componentProps.spec.ts
@@ -2,12 +2,15 @@
 
 import { setCurrentInstance } from '../src/component'
 import {
+  createComponent,
   defineComponent,
   getCurrentInstance,
   nextTick,
   ref,
   setText,
   template,
+  toRefs,
+  watch,
   watchEffect,
 } from '../src'
 import { makeRender } from './_utils'
@@ -15,6 +18,7 @@ import { makeRender } from './_utils'
 const define = makeRender<any>()
 
 describe('component: props', () => {
+  // NOTE: no proxy
   test('stateful', () => {
     let props: any
     let attrs: any
@@ -28,65 +32,51 @@ describe('component: props', () => {
       },
     })
 
-    render({
-      fooBar() {
-        return 1
-      },
-      bar() {
-        return 2
-      },
-    })
-    expect(props.fooBar).toEqual(1)
-    expect(attrs.bar).toEqual(2)
+    render({ fooBar: () => 1, bar: () => 2 })
+    expect(props).toEqual({ fooBar: 1 })
+    expect(attrs).toEqual({ bar: 2 })
 
     // test passing kebab-case and resolving to camelCase
-    render({
-      ['foo-bar']() {
-        return 2
-      },
-      bar() {
-        return 3
-      },
-      baz() {
-        return 4
-      },
-    })
-    expect(props.fooBar).toEqual(2)
-    expect(attrs.bar).toEqual(3)
-    expect(attrs.baz).toEqual(4)
+    render({ 'foo-bar': () => 2, bar: () => 3, baz: () => 4 })
+    expect(props).toEqual({ fooBar: 2 })
+    expect(attrs).toEqual({ bar: 3, baz: 4 })
 
     // test updating kebab-case should not delete it (#955)
-    render({
-      ['foo-bar']() {
-        return 3
-      },
-      bar() {
-        return 3
-      },
-      baz() {
-        return 4
-      },
-      barBaz() {
-        return 5
-      },
-    })
-    expect(props.fooBar).toEqual(3)
-    expect(props.barBaz).toEqual(5)
-    expect(attrs.bar).toEqual(3)
-    expect(attrs.baz).toEqual(4)
+    render({ 'foo-bar': () => 3, bar: () => 3, baz: () => 4, barBaz: () => 5 })
+    expect(props).toEqual({ fooBar: 3, barBaz: 5 })
+    expect(attrs).toEqual({ bar: 3, baz: 4 })
+
+    // remove the props with camelCase key (#1412)
+    render({ qux: () => 5 })
+    expect(props).toEqual({})
+    expect(attrs).toEqual({ qux: 5 })
+  })
 
-    render({
-      qux() {
-        return 5
+  test.fails('stateful with setup', () => {
+    let props: any
+    let attrs: any
+
+    const { render } = define({
+      props: ['foo'],
+      setup(_props: any, { attrs: _attrs }: any) {
+        return () => {
+          props = _props
+          attrs = _attrs
+        }
       },
     })
-    expect(props.fooBar).toBeUndefined()
-    expect(props.barBaz).toBeUndefined()
-    expect(attrs.qux).toEqual(5)
-  })
 
-  test.todo('stateful with setup', () => {
-    // TODO:
+    render({ foo: () => 1, bar: () => 2 })
+    expect(props).toEqual({ foo: 1 })
+    expect(attrs).toEqual({ bar: 2 })
+
+    render({ foo: () => 2, bar: () => 3, baz: () => 4 })
+    expect(props).toEqual({ foo: 2 })
+    expect(attrs).toEqual({ bar: 3, baz: 4 })
+
+    render({ qux: () => 5 })
+    expect(props).toEqual({})
+    expect(attrs).toEqual({ qux: 5 })
   })
 
   test('functional with declaration', () => {
@@ -101,42 +91,19 @@ describe('component: props', () => {
     })
     Comp.props = ['foo']
 
-    render({
-      foo() {
-        return 1
-      },
-      bar() {
-        return 2
-      },
-    })
-    expect(props.foo).toEqual(1)
-    expect(attrs.bar).toEqual(2)
+    render({ foo: () => 1, bar: () => 2 })
+    expect(props).toEqual({ foo: 1 })
+    expect(attrs).toEqual({ bar: 2 })
 
-    render({
-      foo() {
-        return 2
-      },
-      bar() {
-        return 3
-      },
-      baz() {
-        return 4
-      },
-    })
-    expect(props.foo).toEqual(2)
-    expect(attrs.bar).toEqual(3)
-    expect(attrs.baz).toEqual(4)
+    render({ foo: () => 2, bar: () => 3, baz: () => 4 })
+    expect(props).toEqual({ foo: 2 })
+    expect(attrs).toEqual({ bar: 3, baz: 4 })
 
-    render({
-      qux() {
-        return 5
-      },
-    })
-    expect(props.foo).toBeUndefined()
-    expect(attrs.qux).toEqual(5)
+    render({ qux: () => 5 })
+    expect(props).toEqual({})
+    expect(attrs).toEqual({ qux: 5 })
   })
 
-  // FIXME:
   test('functional without declaration', () => {
     let props: any
     let attrs: any
@@ -148,21 +115,15 @@ describe('component: props', () => {
       return {}
     })
 
-    render({
-      foo() {
-        return 1
-      },
-    })
-    expect(props.foo).toEqual(1)
-    expect(attrs.foo).toEqual(1)
+    render({ foo: () => 1 })
+    expect(props).toEqual({ foo: 1 })
+    expect(attrs).toEqual({ foo: 1 })
+    expect(props).toBe(attrs)
 
-    render({
-      foo() {
-        return 2
-      },
-    })
-    expect(props.foo).toEqual(2)
-    expect(attrs.foo).toEqual(2)
+    render({ bar: () => 2 })
+    expect(props).toEqual({ bar: 2 })
+    expect(attrs).toEqual({ bar: 2 })
+    expect(props).toBe(attrs)
   })
 
   test('boolean casting', () => {
@@ -191,6 +152,7 @@ describe('component: props', () => {
     expect(props.bar).toBe(true)
     expect(props.baz).toBe(true)
     expect(props.qux).toBe('ok')
+    // expect('type check failed for prop "qux"').toHaveBeenWarned()
   })
 
   test('default value', () => {
@@ -217,12 +179,9 @@ describe('component: props', () => {
       },
     })
 
-    render({
-      foo() {
-        return 2
-      },
-    })
+    render({ foo: () => 2 })
     expect(props.foo).toBe(2)
+    // const prevBar = props.bar
     expect(props.bar).toEqual({ a: 1 })
     expect(props.baz).toEqual(defaultBaz)
     expect(defaultFn).toHaveBeenCalledTimes(1)
@@ -230,42 +189,27 @@ describe('component: props', () => {
 
     // #999: updates should not cause default factory of unchanged prop to be
     // called again
-    render({
-      foo() {
-        return 3
-      },
-    })
+    render({ foo: () => 3 })
+
     expect(props.foo).toBe(3)
     expect(props.bar).toEqual({ a: 1 })
     // expect(props.bar).toBe(prevBar) // failed: (caching is not supported)
     // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 2 times)
 
-    render({
-      bar() {
-        return { b: 2 }
-      },
-    })
+    render({ bar: () => ({ b: 2 }) })
     expect(props.foo).toBe(1)
     expect(props.bar).toEqual({ b: 2 })
     // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 2 times)
 
     render({
-      foo() {
-        return 3
-      },
-      bar() {
-        return { b: 3 }
-      },
+      foo: () => 3,
+      bar: () => ({ b: 3 }),
     })
     expect(props.foo).toBe(3)
     expect(props.bar).toEqual({ b: 3 })
     // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 2 times)
 
-    render({
-      bar() {
-        return { b: 4 }
-      },
-    })
+    render({ bar: () => ({ b: 4 }) })
     expect(props.foo).toBe(1)
     expect(props.bar).toEqual({ b: 4 })
     // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 2 times)
@@ -275,21 +219,17 @@ describe('component: props', () => {
     // TODO: impl inject
   })
 
-  // NOTE: maybe it's unnecessary
-  // https://github.com/vuejs/core-vapor/pull/99#discussion_r1472647377
   test('optimized props updates', async () => {
-    const renderChild = define({
+    const t0 = template('<div>')
+    const { component: Child } = define({
       props: ['foo'],
       render() {
         const instance = getCurrentInstance()!
-        const t0 = template('<div></div>')
         const n0 = t0()
-        watchEffect(() => {
-          setText(n0, instance.props.foo)
-        })
+        watchEffect(() => setText(n0, instance.props.foo))
         return n0
       },
-    }).render
+    })
 
     const foo = ref(1)
     const id = ref('a')
@@ -298,54 +238,36 @@ describe('component: props', () => {
         return { foo, id }
       },
       render(_ctx: Record<string, any>) {
-        const t0 = template('<div>')
-        const n0 = t0()
-        renderChild(
-          {
-            foo() {
-              return _ctx.foo
-            },
-            id() {
-              return _ctx.id
-            },
-          },
-          n0 as HTMLDivElement,
-        )
-        return n0
+        return createComponent(Child, {
+          foo: () => _ctx.foo,
+          id: () => _ctx.id,
+        })
       },
     }).render()
     const reset = setCurrentInstance(instance)
     // expect(host.innerHTML).toBe('<div id="a">1</div>') // TODO: Fallthrough Attributes
-    expect(host.innerHTML).toBe('<div><div>1</div></div>')
+    expect(host.innerHTML).toBe('<div>1</div>')
 
     foo.value++
     await nextTick()
     // expect(host.innerHTML).toBe('<div id="a">2</div>') // TODO: Fallthrough Attributes
-    expect(host.innerHTML).toBe('<div><div>2</div></div>')
+    expect(host.innerHTML).toBe('<div>2</div>')
 
-    // id.value = 'b'
-    // await nextTick()
+    id.value = 'b'
+    await nextTick()
     // expect(host.innerHTML).toBe('<div id="b">2</div>') // TODO: Fallthrough Attributes
     reset()
   })
 
   describe('validator', () => {
     test('validator should be called with two arguments', () => {
-      let args: any
-      const mockFn = vi.fn((..._args: any[]) => {
-        args = _args
-        return true
-      })
-
+      const mockFn = vi.fn((...args: any[]) => true)
       const props = {
-        foo() {
-          return 1
-        },
-        bar() {
-          return 2
-        },
+        foo: () => 1,
+        bar: () => 2,
       }
 
+      const t0 = template('<div/>')
       define({
         props: {
           foo: {
@@ -357,19 +279,11 @@ describe('component: props', () => {
           },
         },
         render() {
-          const t0 = template('<div/>')
-          const n0 = t0()
-          return n0
+          return t0()
         },
       }).render(props)
 
-      expect(mockFn).toHaveBeenCalled()
-      // NOTE: Vapor Component props defined by getter. So, `props` not Equal to `{ foo: 1, bar: 2 }`
-      // expect(mockFn).toHaveBeenCalledWith(1, { foo: 1, bar: 2 })
-      expect(args.length).toBe(2)
-      expect(args[0]).toBe(1)
-      expect(args[1].foo).toEqual(1)
-      expect(args[1].bar).toEqual(2)
+      expect(mockFn).toHaveBeenCalledWith(1, { foo: 1, bar: 2 })
     })
 
     // TODO: impl setter and warnner
@@ -443,70 +357,71 @@ describe('component: props', () => {
         return () => null
       },
     }).render({
-      ['foo-bar']() {
-        return 'hello'
-      },
+      ['foo-bar']: () => 'hello',
     })
     expect(`Missing required prop: "fooBar"`).not.toHaveBeenWarned()
   })
 
   test('props type support BigInt', () => {
+    const t0 = template('<div>')
     const { host } = define({
       props: {
         foo: BigInt,
       },
       render() {
         const instance = getCurrentInstance()!
-        const t0 = template('<div></div>')
         const n0 = t0()
-        watchEffect(() => {
-          setText(n0, instance.props.foo)
-        })
+        watchEffect(() => setText(n0, instance.props.foo))
         return n0
       },
     }).render({
-      foo() {
-        return BigInt(BigInt(100000111)) + BigInt(2000000000) * BigInt(30000000)
-      },
+      foo: () =>
+        BigInt(BigInt(100000111)) + BigInt(2000000000) * BigInt(30000000),
     })
     expect(host.innerHTML).toBe('<div>60000000100000111</div>')
   })
 
-  // #3288
+  // #3474
   test.todo(
-    'declared prop key should be present even if not passed',
-    async () => {
-      // let initialKeys: string[] = []
-      // const changeSpy = vi.fn()
-      // const passFoo = ref(false)
-      // const Comp = {
-      //   props: ['foo'],
-      //   setup() {
-      //     const instance = getCurrentInstance()!
-      //     initialKeys = Object.keys(instance.props)
-      //     watchEffect(changeSpy)
-      //     return {}
-      //   },
-      //   render() {
-      //     return {}
-      //   },
-      // }
-      // const Parent = createIf(
-      //   () => passFoo.value,
-      //   () => {
-      //     return render(Comp , { foo: 1 }, host) // TODO: createComponent fn
-      //   },
-      // )
-      // // expect(changeSpy).toHaveBeenCalledTimes(1)
-    },
+    'should cache the value returned from the default factory to avoid unnecessary watcher trigger',
+    () => {},
   )
 
+  // #3288
+  test('declared prop key should be present even if not passed', async () => {
+    let initialKeys: string[] = []
+    const changeSpy = vi.fn()
+    const passFoo = ref(false)
+
+    const Comp: any = {
+      render() {},
+      props: {
+        foo: String,
+      },
+      setup(props: any) {
+        initialKeys = Object.keys(props)
+        const { foo } = toRefs(props)
+        watch(foo, changeSpy)
+      },
+    }
+
+    define(() =>
+      createComponent(Comp, [() => (passFoo.value ? { foo: () => 'ok' } : {})]),
+    ).render()
+
+    expect(initialKeys).toMatchObject(['foo'])
+    passFoo.value = true
+    await nextTick()
+    expect(changeSpy).toHaveBeenCalledTimes(1)
+  })
+
   // #3371
   test.todo(`avoid double-setting props when casting`, async () => {
     // TODO: proide, slots
   })
 
-  test('support null in required + multiple-type declarations', () => {
+  // NOTE: type check is not supported
+  test.todo('support null in required + multiple-type declarations', () => {
     const { render } = define({
       props: {
         foo: { type: [Function, null], required: true },
@@ -530,22 +445,17 @@ describe('component: props', () => {
         const instance = getCurrentInstance()!
         const t0 = template('<div></div>')
         const n0 = t0()
-        watchEffect(() => {
+        watchEffect(() =>
           setText(
             n0,
             JSON.stringify(instance.attrs) + Object.keys(instance.attrs),
-          )
-        })
+          ),
+        )
         return n0
       },
     })
 
-    let attrs: any = {
-      foo() {
-        return undefined
-      },
-    }
-
+    const attrs: any = { foo: () => undefined }
     render(attrs)
 
     expect(host.innerHTML).toBe(
@@ -564,4 +474,16 @@ describe('component: props', () => {
 
     expect(Object.keys(props.msg).length).toBe(1)
   })
+
+  test('should warn against reserved prop names', () => {
+    const { render } = define({
+      props: {
+        $foo: String,
+      },
+      render() {},
+    })
+
+    render({ msg: () => 'test' })
+    expect(`Invalid prop name: "$foo"`).toHaveBeenWarned()
+  })
 })
diff --git a/packages/runtime-vapor/src/apiCreateComponent.ts b/packages/runtime-vapor/src/apiCreateComponent.ts
index ee4b15c1f..c74783b32 100644
--- a/packages/runtime-vapor/src/apiCreateComponent.ts
+++ b/packages/runtime-vapor/src/apiCreateComponent.ts
@@ -6,7 +6,7 @@ import {
 import { setupComponent } from './apiRender'
 import type { RawProps } from './componentProps'
 
-export function createComponent(comp: Component, rawProps: RawProps) {
+export function createComponent(comp: Component, rawProps: RawProps = null) {
   const current = currentInstance!
   const instance = createComponentInstance(comp, rawProps)
   setupComponent(instance)
diff --git a/packages/runtime-vapor/src/componentAttrs.ts b/packages/runtime-vapor/src/componentAttrs.ts
index 90c4d9cd3..8eabb0449 100644
--- a/packages/runtime-vapor/src/componentAttrs.ts
+++ b/packages/runtime-vapor/src/componentAttrs.ts
@@ -1,4 +1,4 @@
-import { isFunction } from '@vue/shared'
+import { camelize, isFunction } from '@vue/shared'
 import type { ComponentInternalInstance } from './component'
 import { isEmitListener } from './componentEmits'
 
@@ -29,7 +29,7 @@ export function patchAttrs(instance: ComponentInternalInstance) {
 
   function registerAttr(key: string, getter: () => unknown) {
     if (
-      (!options || !(key in options)) &&
+      (!options || !(camelize(key) in options)) &&
       !isEmitListener(instance.emitsOptions, key)
     ) {
       keys.add(key)
diff --git a/packages/runtime-vapor/src/componentProps.ts b/packages/runtime-vapor/src/componentProps.ts
index 1fe907fc0..c1ebdf9ef 100644
--- a/packages/runtime-vapor/src/componentProps.ts
+++ b/packages/runtime-vapor/src/componentProps.ts
@@ -101,7 +101,7 @@ export function initProps(
       }
     } else {
       for (const key in options) {
-        const rawKey = getRawKey(rawProps[0] as StaticProps, key)
+        const rawKey = rawProps[0] && getRawKey(rawProps[0] as StaticProps, key)
         if (rawKey) {
           registerProp(
             instance,
@@ -130,7 +130,7 @@ export function initProps(
   }
 
   if (isStateful) {
-    instance.props = props
+    instance.props = /* isSSR ? props :  */ shallowReactive(props)
   } else {
     // functional w/ optional props, props === attrs
     instance.props = instance.propsOptions === EMPTY_ARR ? attrs : props
@@ -287,6 +287,8 @@ export function normalizePropsOptions(comp: Component): NormalizedPropsOptions {
 function validatePropName(key: string) {
   if (key[0] !== '$') {
     return true
+  } else if (__DEV__) {
+    warn(`Invalid prop name: "${key}" is a reserved property.`)
   }
   return false
 }