From 9660336b75c5a42ca4640dcfd855dedd80d995e1 Mon Sep 17 00:00:00 2001 From: Alberto Gualis Date: Thu, 2 Nov 2017 09:21:33 +0100 Subject: [PATCH 1/2] Generate appropriate prop definitions for functional SFCs --- lib/process-functional.js | 11 +++++++++++ lib/process.js | 5 ++++- test/FunctionalSFC.spec.js | 2 +- test/FunctionalSFCParent.spec.js | 7 +++++++ test/process-functional.spec.js | 16 ++++++++++++++++ test/resources/FunctionalSFC.vue | 1 + test/resources/FunctionalSFCParent.vue | 14 ++++++++++++++ 7 files changed, 54 insertions(+), 2 deletions(-) create mode 100644 lib/process-functional.js create mode 100644 test/FunctionalSFCParent.spec.js create mode 100644 test/process-functional.spec.js create mode 100644 test/resources/FunctionalSFCParent.vue diff --git a/lib/process-functional.js b/lib/process-functional.js new file mode 100644 index 00000000..4dfff35f --- /dev/null +++ b/lib/process-functional.js @@ -0,0 +1,11 @@ +module.exports = function extractProps(content) { + const DETECT_PROP_DEFINITIONS = /(props\..*?)(}| |\.)/g + const CHARS_TO_REMOVE = /(\.|}| |props)/g + const propDefinitions = content.match(DETECT_PROP_DEFINITIONS) + if (!propDefinitions) return '{}' + const props = propDefinitions.map((match) => { + const propName = match.trim().replace(CHARS_TO_REMOVE, '') + return `'${propName}'` + }) + return `[ ${props.join(', ')} ]` +} diff --git a/lib/process.js b/lib/process.js index 6e0ae9b2..4d8530a7 100644 --- a/lib/process.js +++ b/lib/process.js @@ -6,6 +6,7 @@ const addTemplateMapping = require('./add-template-mapping') const compileBabel = require('./compilers/babel-compiler') const compileTypescript = require('./compilers/typescript-compiler') const compileCoffeeScript = require('./compilers/coffee-compiler') +const extractPropsFromFunctionalTemplate = require('./process-functional') const splitRE = /\r?\n/g @@ -32,7 +33,9 @@ function isFunctionalTemplate (parts) { function changePartsIfFunctional (parts) { if (isFunctionalTemplate(parts)) { parts.lang = 'javascript' - parts.script = { type: 'script', content: 'export default { props: { props: Object } }' } + const functionalProps = extractPropsFromFunctionalTemplate(parts.template.content) + parts.template.content = parts.template.content.replace('props.', '') + parts.script = { type: 'script', content: `export default { props: ${functionalProps} }` } } } diff --git a/test/FunctionalSFC.spec.js b/test/FunctionalSFC.spec.js index 64f63e44..30c5d106 100644 --- a/test/FunctionalSFC.spec.js +++ b/test/FunctionalSFC.spec.js @@ -3,7 +3,7 @@ import FunctionalSFC from './resources/FunctionalSFC.vue' test('processes .vue file with functional template', () => { const wrapper = shallow(FunctionalSFC, { - propsData: { props: { msg: 'Hello' }} + propsData: { msg: 'Hello' } }) expect(wrapper.is('div')).toBe(true) expect(wrapper.text().trim()).toBe('Hello') diff --git a/test/FunctionalSFCParent.spec.js b/test/FunctionalSFCParent.spec.js new file mode 100644 index 00000000..16a4979e --- /dev/null +++ b/test/FunctionalSFCParent.spec.js @@ -0,0 +1,7 @@ +import { mount } from 'vue-test-utils' +import FunctionalSFCParent from './resources/FunctionalSFCParent.vue' + +test('processes .vue file with functional template from parent', () => { + const wrapper = mount(FunctionalSFCParent) + expect(wrapper.text().trim()).toBe('TEST') +}) diff --git a/test/process-functional.spec.js b/test/process-functional.spec.js new file mode 100644 index 00000000..f167192d --- /dev/null +++ b/test/process-functional.spec.js @@ -0,0 +1,16 @@ +import extractProps from '../lib/process-functional' + +describe('when extracting props with props. prefix from functional template content', () => { + + it('extracts interpolated props ', () => { + const content = '
{{props.msg1 }} {{props.msg2}}
' + + expect(extractProps(content)).toBe("[ 'msg1', 'msg2' ]") + }) + + it('extracts props used in v-for', () => { + const content = '
{{ bar }}}
' + + expect(extractProps(content)).toBe("[ 'foo' ]") + }) +}) diff --git a/test/resources/FunctionalSFC.vue b/test/resources/FunctionalSFC.vue index c0c1d734..ea14734c 100644 --- a/test/resources/FunctionalSFC.vue +++ b/test/resources/FunctionalSFC.vue @@ -3,3 +3,4 @@ {{ props.msg }} + diff --git a/test/resources/FunctionalSFCParent.vue b/test/resources/FunctionalSFCParent.vue new file mode 100644 index 00000000..bb8c691f --- /dev/null +++ b/test/resources/FunctionalSFCParent.vue @@ -0,0 +1,14 @@ + + + From 788c9a212a0b6c83ec6419af7721c9d3669ab137 Mon Sep 17 00:00:00 2001 From: Alberto Gualis Date: Thu, 2 Nov 2017 09:31:59 +0100 Subject: [PATCH 2/2] Fix linter errors --- lib/process-functional.js | 2 +- test/process-functional.spec.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/process-functional.js b/lib/process-functional.js index 4dfff35f..7751588b 100644 --- a/lib/process-functional.js +++ b/lib/process-functional.js @@ -1,4 +1,4 @@ -module.exports = function extractProps(content) { +module.exports = function extractProps (content) { const DETECT_PROP_DEFINITIONS = /(props\..*?)(}| |\.)/g const CHARS_TO_REMOVE = /(\.|}| |props)/g const propDefinitions = content.match(DETECT_PROP_DEFINITIONS) diff --git a/test/process-functional.spec.js b/test/process-functional.spec.js index f167192d..7f483758 100644 --- a/test/process-functional.spec.js +++ b/test/process-functional.spec.js @@ -1,7 +1,6 @@ import extractProps from '../lib/process-functional' describe('when extracting props with props. prefix from functional template content', () => { - it('extracts interpolated props ', () => { const content = '
{{props.msg1 }} {{props.msg2}}
'