feat: attrs

Author: sxzz

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),
+          ')',
+        ]
+      }),
+    )
+  }
 }

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[] {

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

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, []]
 

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()

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),