Add callback and array prop detection in functional template #23
Conversation
| @@ -1,11 +1,16 @@ | |||
| module.exports = function extractProps (content) { | |||
There was a problem hiding this comment.
Can you rename this file to extract-props, so that it matches the named exported function
lib/process.js
Outdated
| @@ -34,7 +34,7 @@ function changePartsIfFunctional (parts) { | |||
| if (isFunctionalTemplate(parts)) { | |||
| parts.lang = 'javascript' | |||
| const functionalProps = extractPropsFromFunctionalTemplate(parts.template.content) | |||
| parts.template.content = parts.template.content.replace('props.', '') | |||
| parts.template.content = parts.template.content.replace(/props./g, '') | |||
There was a problem hiding this comment.
Can you explain why you remove props from the template?
There was a problem hiding this comment.
I know this code is a bit cryptic. What I basically do is detecting all prop definitions through a regular expression and then I remove the "props." prefix cause it won't be present when parent templates pass properties (you can see how this works in process-functional.spec.js that will be renamed to extract-props.spec.js)
|
I'll be honest, I wasn't sure what was happening in the last PR. I haven't looked into functional templates, but I saw you had a passing test so assumed it was working. Can you tell me a bit more about why you need to extract props specifically? From this page — https://vue-loader.vuejs.org/en/features/functional.html — it looks like you can access anything on the context object, which contain a lot of properties like |
|
If I understood it correctly, is vue-loader the one that parses the SFC functional templates, extracts the inline prop definitions and passes the result to Vue.render in a webpack context. I didn't want to import vue-loader code to make the everything lighter and faster.That's why I decided to do the parsing by hand. But it's not a trivial case and that's why the pull-request did not work straight forward with all possible cases. Tell me if I'm losing something and I'll be happy to solve the problem in another way. Thanks a lot for your amazing job BTW! |
|
Ah, so in that case the context refers to the functional render context object. Functional components receive a context object, because they are just functions, which means they can't access props using the this keyword. I agree that we shouldn't port things over from vue-loader. It's fine to do the parsing by hand. And thanks for the PR and for your work 😀 |
I should have reviewed the compiler books from my college times ;)