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,68 @@ 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 , ')' ]
63- }
64- } )
65- . filter ( Boolean )
66- if ( props . length ) {
67- return genMulti ( SEGMENTS_ARRAY , ...props )
68- }
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 = genExpression ( props . value , context )
62+ if ( props . handler ) expr = genCall ( context . helper ( 'toHandlers' ) , expr )
63+ return [ '() => (' , ...expr , ')' ]
64+ }
65+ } )
66+ . filter (
67+ Boolean as any as ( v : CodeFragment [ ] | undefined ) => v is CodeFragment [ ] ,
68+ )
69+ if ( frag . length ) {
70+ return genMulti ( SEGMENTS_ARRAY , ...frag )
6971 }
72+ }
7073
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- )
74+ export function genStaticProps (
75+ props : IRProp [ ] ,
76+ context : CodegenContext ,
77+ ) : CodeFragment [ ] {
78+ return genMulti (
79+ SEGMENTS_OBJECT_NEWLINE ,
80+ ...props . map ( prop => {
81+ return [
82+ ...genPropKey ( prop , context ) ,
83+ ': ' ,
84+ ...( prop . handler
85+ ? genEventHandler ( context , prop . values [ 0 ] )
86+ : [ '() => (' , ...genExpression ( prop . values [ 0 ] , context ) , ')' ] ) ,
87+ ...( prop . model
88+ ? [ ...genModelEvent ( prop ) , ...genModelModifiers ( prop ) ]
89+ : [ ] ) ,
90+ ]
91+ } ) ,
92+ )
8793
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 )
94+ function genModelEvent ( prop : IRProp ) : CodeFragment [ ] {
95+ const name = prop . key . isStatic
96+ ? [ JSON . stringify ( `onUpdate:${ camelize ( prop . key . content ) } ` ) ]
97+ : [ '["onUpdate:" + ' , ...genExpression ( prop . key , context ) , ']' ]
98+ const handler = genModelHandler ( prop . values [ 0 ] , context )
9399
94- return [ ',' , NEWLINE , ...name , ': ' , ...handler ]
95- }
100+ return [ ',' , NEWLINE , ...name , ': ' , ...handler ]
101+ }
96102
97- function genModelModifiers ( prop : IRProp ) : CodeFragment [ ] {
98- const { key, modelModifiers } = prop
99- if ( ! modelModifiers || ! modelModifiers . length ) return [ ]
103+ function genModelModifiers ( prop : IRProp ) : CodeFragment [ ] {
104+ const { key, modelModifiers } = prop
105+ if ( ! modelModifiers || ! modelModifiers . length ) return [ ]
100106
101- const modifiersKey = key . isStatic
102- ? key . content === 'modelValue'
103- ? [ `modelModifiers` ]
104- : [ `${ key . content } Modifiers` ]
105- : [ '[' , ...genExpression ( key , context ) , ' + "Modifiers"]' ]
107+ const modifiersKey = key . isStatic
108+ ? key . content === 'modelValue'
109+ ? [ `modelModifiers` ]
110+ : [ `${ key . content } Modifiers` ]
111+ : [ '[' , ...genExpression ( key , context ) , ' + "Modifiers"]' ]
106112
107- const modifiersVal = genDirectiveModifiers ( modelModifiers )
108- return [ ',' , NEWLINE , ...modifiersKey , `: () => ({ ${ modifiersVal } })` ]
109- }
113+ const modifiersVal = genDirectiveModifiers ( modelModifiers )
114+ return [ ',' , NEWLINE , ...modifiersKey , `: () => ({ ${ modifiersVal } })` ]
110115 }
111116}
0 commit comments