Vue: pretty-print binding syntax#2108
Conversation
a1c1f21 to
3501dab
Compare
| return { | ||
| text: node.value, | ||
| options: { | ||
| parser: parseJavaScriptExpression, |
There was a problem hiding this comment.
We can use the custom parser API here!
src/printer-htmlparser2.js
Outdated
| return concat([name, '="', attribs[name], '"']); | ||
|
|
||
| // FastPath requires the next node to be a property of the current one | ||
| node._currentAttribute = { |
There was a problem hiding this comment.
This is the least worst way of doing this that I could think of.
The correct way would be to reshape the AST between parsing and printing, but I'm not sure if that would hurt performance?
There was a problem hiding this comment.
We're already doing it for css, I would also do it for HTML. We haven't done much performance work so far and it's been reasonable.
I'd rather do the right thing for now and when we decide that perf is important, then measure and optimize the things that are actually taking a lot of time and make trade-offs at that point.
There was a problem hiding this comment.
Adding it to the ast in this way is reasonable to me by the way, if you move it to the parsing phase, I'll be happy with it.
src/multiparser.js
Outdated
| transformDoc: doc => | ||
| util.hasNewlineInRange(node.value, 0, node.value.length) | ||
| ? doc | ||
| : docUtils.removeLines(doc) |
There was a problem hiding this comment.
Stopgap to remove the trailing hardline.
| type: "File", | ||
| program: ast.program.body[0].expression | ||
| }; | ||
| } |
|
Sounds good to me, I only have 2 comments. |
|
Can't wait to land this :) |
src/multiparser.js
Outdated
| * v-bind:id="'list-' + id" | ||
| * v-if="foo && !bar" | ||
| */ | ||
| if (/(^v-)|:/.test(node.name) && !/^\w+$/.test(node.value)) { |
There was a problem hiding this comment.
you may want to also include the @ , for things like @click="someFunction()"
For #2097, this is my work-in-progress attempt at pretty-printing the contents of binding attributes for Vue.