diff --git a/lib/process-functional.js b/lib/process-functional.js new file mode 100644 index 00000000..7751588b --- /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..7f483758 --- /dev/null +++ b/test/process-functional.spec.js @@ -0,0 +1,15 @@ +import extractProps from '../lib/process-functional' + +describe('when extracting props with props. prefix from functional template content', () => { + it('extracts interpolated props ', () => { + const content = '