File tree Expand file tree Collapse file tree 8 files changed +62
-40
lines changed Expand file tree Collapse file tree 8 files changed +62
-40
lines changed Original file line number Diff line number Diff line change 1
1
module . exports = function extractProps ( content ) {
2
- const DETECT_PROP_DEFINITIONS = / ( p r o p s \. .* ?) ( } | | \. ) / g
3
- const CHARS_TO_REMOVE = / ( \. | } | | p r o p s ) / g
2
+ const DETECT_PROP_DEFINITIONS = / ( p r o p s \. .* ?) ( } | | \. | \[ ) / g
3
+ const CHARS_TO_REMOVE = / ( \. | } | | p r o p s | \( | \[ ) / g
4
4
const propDefinitions = content . match ( DETECT_PROP_DEFINITIONS )
5
5
if ( ! propDefinitions ) return '{}'
6
- const props = propDefinitions . map ( ( match ) => {
6
+ let props = propDefinitions . map ( ( match ) => {
7
7
const propName = match . trim ( ) . replace ( CHARS_TO_REMOVE , '' )
8
8
return `'${ propName } '`
9
9
} )
10
+ props = removeDuplicates ( props )
10
11
return `[ ${ props . join ( ', ' ) } ]`
11
12
}
13
+
14
+ function removeDuplicates ( props ) {
15
+ return [ ...new Set ( props ) ]
16
+ }
Original file line number Diff line number Diff line change @@ -6,7 +6,7 @@ const addTemplateMapping = require('./add-template-mapping')
6
6
const compileBabel = require ( './compilers/babel-compiler' )
7
7
const compileTypescript = require ( './compilers/typescript-compiler' )
8
8
const compileCoffeeScript = require ( './compilers/coffee-compiler' )
9
- const extractPropsFromFunctionalTemplate = require ( './process-functional ' )
9
+ const extractPropsFromFunctionalTemplate = require ( './extract-props ' )
10
10
11
11
const splitRE = / \r ? \n / g
12
12
@@ -22,19 +22,12 @@ function processScript (scriptPart) {
22
22
return compileBabel ( scriptPart . content )
23
23
}
24
24
25
- function isFunctionalTemplate ( parts ) {
26
- try {
27
- if ( parts . template . attrs . functional === true ) return true
28
- } catch ( error ) {
29
- return false
30
- }
31
- }
32
-
33
25
function changePartsIfFunctional ( parts ) {
34
- if ( isFunctionalTemplate ( parts ) ) {
26
+ const isFunctional = parts . template && parts . template . attrs && parts . template . attrs . functional
27
+ if ( isFunctional ) {
35
28
parts . lang = 'javascript'
36
29
const functionalProps = extractPropsFromFunctionalTemplate ( parts . template . content )
37
- parts . template . content = parts . template . content . replace ( ' props.' , '' )
30
+ parts . template . content = parts . template . content . replace ( / p r o p s ./ g , '' )
38
31
parts . script = { type : 'script' , content : `export default { props: ${ functionalProps } }` }
39
32
}
40
33
}
Original file line number Diff line number Diff line change 1
1
import { shallow } from 'vue-test-utils'
2
2
import FunctionalSFC from './resources/FunctionalSFC.vue'
3
3
4
- test ( 'processes .vue file with functional template' , ( ) => {
5
- const wrapper = shallow ( FunctionalSFC , {
6
- propsData : { msg : 'Hello' }
4
+ let wrapper
5
+ const clickSpy = jest . fn ( )
6
+ beforeEach ( ( ) => {
7
+ wrapper = shallow ( FunctionalSFC , {
8
+ propsData : { msg : { id : 1 , title : 'foo' } , onClick : clickSpy }
9
+ } )
10
+ } )
11
+
12
+ describe ( 'Processes .vue file with functional template' , ( ) => {
13
+ it ( 'with nested props' , ( ) => {
14
+ expect ( wrapper . text ( ) . trim ( ) ) . toBe ( 'foo' )
15
+ } )
16
+
17
+ it ( 'with callback prop' , ( ) => {
18
+ wrapper . trigger ( 'click' )
19
+ expect ( clickSpy ) . toHaveBeenCalledWith ( 1 )
7
20
} )
8
- expect ( wrapper . is ( 'div' ) ) . toBe ( true )
9
- expect ( wrapper . text ( ) . trim ( ) ) . toBe ( 'Hello' )
10
21
} )
Original file line number Diff line number Diff line change @@ -3,5 +3,5 @@ import FunctionalSFCParent from './resources/FunctionalSFCParent.vue'
3
3
4
4
test ( 'processes .vue file with functional template from parent' , ( ) => {
5
5
const wrapper = mount ( FunctionalSFCParent )
6
- expect ( wrapper . text ( ) . trim ( ) ) . toBe ( 'TEST ' )
6
+ expect ( wrapper . text ( ) . trim ( ) ) . toBe ( 'foo ' )
7
7
} )
Original file line number Diff line number Diff line change
1
+ import extractProps from '../lib/extract-props'
2
+
3
+ describe ( 'when extracting props with props. prefix from functional template content' , ( ) => {
4
+ it ( 'extracts interpolated props ' , ( ) => {
5
+ const content = '<div> {{props.msg1 }} {{props.msg2}}</div>'
6
+
7
+ expect ( extractProps ( content ) ) . toBe ( "[ 'msg1', 'msg2' ]" )
8
+ } )
9
+
10
+ it ( 'extracts props used in v-for' , ( ) => {
11
+ const content = '<div v-for="bar in props.foo.bar"> {{ bar }}} </div>'
12
+
13
+ expect ( extractProps ( content ) ) . toBe ( "[ 'foo' ]" )
14
+ } )
15
+
16
+ it ( 'extracts props with nested structure' , ( ) => {
17
+ const content = '<div> {{props.msg1.foo }} {{props.msg1.bar}}</div>'
18
+
19
+ expect ( extractProps ( content ) ) . toBe ( "[ 'msg1' ]" )
20
+ } )
21
+
22
+ it ( 'extracts callback props' , ( ) => {
23
+ const content = '<button @click="props.onClick(props.msg)">{{props.msg.title}}</button>'
24
+ expect ( extractProps ( content ) ) . toBe ( "[ 'onClick', 'msg' ]" )
25
+ } )
26
+
27
+ it ( 'extracts array props' , ( ) => {
28
+ const content = '<div>{{props.msg[title]}}</div>'
29
+ expect ( extractProps ( content ) ) . toBe ( "[ 'msg' ]" )
30
+ } )
31
+ } )
Load Diff This file was deleted.
Original file line number Diff line number Diff line change 1
1
<template functional>
2
- <div class =" hello" >
3
- {{ props.msg }}
4
- </div >
2
+ <button @click =" props.onClick(props.msg.id)" >{{props.msg.title}}</button >
5
3
</template >
6
-
Original file line number Diff line number Diff line change 1
1
<template >
2
- <FunctionalSFC msg =" TEST " />
2
+ <FunctionalSFC : msg =" {id: 1, title: 'foo'} " :onClick = " () => {} " />
3
3
</template >
4
4
5
5
<script >
You can’t perform that action at this time.
0 commit comments