11import { camelize , extend , isArray } from '@vue/shared'
22import type { CodegenContext } from '../generate'
3- import type { CreateComponentIRNode , IRProp } from '../ir'
3+ import type { CreateComponentIRNode , IRProp , IRProps } from '../ir'
44import {
55 type CodeFragment ,
66 NEWLINE ,
@@ -21,11 +21,11 @@ export function genCreateComponent(
2121 oper : CreateComponentIRNode ,
2222 context : CodegenContext ,
2323) : CodeFragment [ ] {
24- const { helper , vaporHelper } = context
24+ const { vaporHelper } = context
2525
2626 const tag = genTag ( )
2727 const isRoot = oper . root
28- const rawProps = genRawProps ( )
28+ const rawProps = genRawProps ( oper . props , context )
2929
3030 return [
3131 NEWLINE ,
@@ -49,63 +49,83 @@ export function genCreateComponent(
4949 )
5050 }
5151 }
52+ }
5253
53- function genRawProps ( ) {
54- const props = oper . props
55- . map ( props => {
56- if ( isArray ( props ) ) {
57- if ( ! props . length ) return
58- return genStaticProps ( props )
59- } else {
60- let expr = genExpression ( props . value , context )
61- if ( props . handler ) expr = genCall ( helper ( 'toHandlers' ) , expr )
62- return [ '() => (' , ...expr , ')' ]
54+ export function genRawProps ( props : IRProps [ ] , context : CodegenContext ) {
55+ const frag = props
56+ . map ( props => {
57+ if ( isArray ( props ) ) {
58+ if ( ! props . length ) return
59+ return genStaticProps ( props , context )
60+ } else {
61+ let expr : CodeFragment [ ]
62+ if ( 'key' in props )
63+ expr = genMulti (
64+ SEGMENTS_OBJECT_NEWLINE ,
65+ genProp ( props , context , false ) ,
66+ )
67+ else {
68+ expr = genExpression ( props . value , context )
69+ if ( props . handler ) expr = genCall ( context . helper ( 'toHandlers' ) , expr )
6370 }
64- } )
65- . filter ( Boolean )
66- if ( props . length ) {
67- return genMulti ( SEGMENTS_ARRAY , ...props )
68- }
71+ return [ '() => (' , ...expr , ')' ]
72+ }
73+ } )
74+ . filter (
75+ Boolean as any as ( v : CodeFragment [ ] | undefined ) => v is CodeFragment [ ] ,
76+ )
77+ if ( frag . length ) {
78+ return genMulti ( SEGMENTS_ARRAY , ...frag )
6979 }
80+ }
7081
71- function genStaticProps ( props : IRProp [ ] ) {
72- return genMulti (
73- SEGMENTS_OBJECT_NEWLINE ,
74- ...props . map ( prop => {
75- return [
76- ...genPropKey ( prop , context ) ,
77- ': ' ,
78- ...( prop . handler
79- ? genEventHandler ( context , prop . values [ 0 ] )
80- : [ '() => (' , ...genExpression ( prop . values [ 0 ] , context ) , ')' ] ) ,
81- ...( prop . model
82- ? [ ...genModelEvent ( prop ) , ...genModelModifiers ( prop ) ]
83- : [ ] ) ,
84- ]
85- } ) ,
86- )
82+ function genStaticProps (
83+ props : IRProp [ ] ,
84+ context : CodegenContext ,
85+ ) : CodeFragment [ ] {
86+ return genMulti (
87+ SEGMENTS_OBJECT_NEWLINE ,
88+ ...props . map ( prop => genProp ( prop , context , true ) ) ,
89+ )
90+ }
91+
92+ function genProp ( prop : IRProp , context : CodegenContext , isStaticArg : boolean ) {
93+ return [
94+ ...genPropKey ( prop , context ) ,
95+ ': ' ,
96+ ...( prop . handler
97+ ? genEventHandler ( context , prop . values [ 0 ] )
98+ : isStaticArg
99+ ? [ '() => (' , ...genExpression ( prop . values [ 0 ] , context ) , ')' ]
100+ : genExpression ( prop . values [ 0 ] , context ) ) ,
101+ ...( prop . model
102+ ? [ ...genModelEvent ( prop , context ) , ...genModelModifiers ( prop , context ) ]
103+ : [ ] ) ,
104+ ]
105+ }
87106
88- function genModelEvent ( prop : IRProp ) : CodeFragment [ ] {
89- const name = prop . key . isStatic
90- ? [ JSON . stringify ( `onUpdate:${ camelize ( prop . key . content ) } ) ]
91- : [ '["onUpdate:" + ' , ...genExpression ( prop . key , context ) , ']' ]
92- const handler = genModelHandler ( prop . values [ 0 ] , context )
107+ function genModelEvent ( prop : IRProp , context : CodegenContext ) : CodeFragment [ ] {
108+ const name = prop . key . isStatic
109+ ? [ JSON . stringify ( `onUpdate:${ camelize ( prop . key . content ) } ) ]
110+ : [ '["onUpdate:" + ' , ...genExpression ( prop . key , context ) , ']' ]
111+ const handler = genModelHandler ( prop . values [ 0 ] , context )
93112
94- return [ ',' , NEWLINE , ...name , ': ' , ...handler ]
95- }
113+ return [ ',' , NEWLINE , ...name , ': ' , ...handler ]
114+ }
96115
97- function genModelModifiers ( prop : IRProp ) : CodeFragment [ ] {
98- const { key, modelModifiers } = prop
99- if ( ! modelModifiers || ! modelModifiers . length ) return [ ]
116+ function genModelModifiers (
117+ prop : IRProp ,
118+ context : CodegenContext ,
119+ ) : CodeFragment [ ] {
120+ const { key, modelModifiers } = prop
121+ if ( ! modelModifiers || ! modelModifiers . length ) return [ ]
100122
101- const modifiersKey = key . isStatic
102- ? key . content === 'modelValue'
103- ? [ `modelModifiers` ]
104- : [ `${ key . content } ]
105- : [ '[' , ...genExpression ( key , context ) , ' + "Modifiers"]' ]
123+ const modifiersKey = key . isStatic
124+ ? key . content === 'modelValue'
125+ ? [ `modelModifiers` ]
126+ : [ `${ key . content } ]
127+ : [ '[' , ...genExpression ( key , context ) , ' + "Modifiers"]' ]
106128
107- const modifiersVal = genDirectiveModifiers ( modelModifiers )
108- return [ ',' , NEWLINE , ...modifiersKey , `: () => ({ ${ modifiersVal } ]
109- }
110- }
129+ const modifiersVal = genDirectiveModifiers ( modelModifiers )
130+ return [ ',' , NEWLINE , ...modifiersKey , `: () => ({ ${ modifiersVal } ]
111131}
0 commit comments