Fix corrupt attribute values on dynamically bound Vue props without quotes #252
Conversation
This change allows for dynamically bound Vue props that are missing their quotes to be properly quoted. Performing the change in `src/printer.ts` fixed the bug, but caused other tests to fail. Adding the additional back-tic quote in `isQuoted` allows all unit tests to pass. I looked at all of the calling sites of `isQuoted` and it looks okay to me, but it should probably be double checked.
Shinigami92
added
framework: Vue
| @@ -165,7 +165,7 @@ export function isWrappedWith(val: string, start: string, end: string, offset: n | |||
| * @returns Whether the value is quoted or not. | |||
| */ | |||
| export function isQuoted(val: string): boolean { | |||
| if (/^(["'])(.*)\1$/.test(val)) { | |||
| if (/^(["'`])(.*)\1$/.test(val)) { | |||
There was a problem hiding this comment.
If I remember correctly, backtick quoted strings are pre processed by pug as JS. Therefore it is handled a bit differently than normal quoted strings.
But beside that, if this is the case, I should find a test case to cover that 🤔
Will have a deeper look later.
There was a problem hiding this comment.
@bitencode Do you have a case for this? Then add it to the tests
If not, I would like to revert this line and just change it when it is absolutely necessary
There was a problem hiding this comment.
@Shinigami92 I do not have a specific test case for this. However, with the changes to avoid quoting pug variables assigned to Vue props to other test cases break (issue-61 - 'should not wrap chained data-bindings' and issue-80 - 'should not reformat multiline interpolation strings' because they are then not unquoted before being passed to the prettier format function.
It's possible that if isQuoted need to not check for back-tic quotes that there should be another function that does the check needed in formatDelegatePrettier. Or possibly an additional parameter that indicates which quotes to check for with the default being "' and the new call can pass in all 3 types of quotes. I don't know this code base well, or your coding preferences, so I'm open to suggestions.
There was a problem hiding this comment.
Thx 🙂 I will look into the branch and discover it
Will send feedback later back to you
There was a problem hiding this comment.
AHA! The thing is, that 61 and 80 have backtick quoted strings, but can be normal strings cause they don't use code interpolation! So no ${ in it.
Then my plugin converts these template literal strings to normal strings (by design)
But I currently don't understand why the new change is needed then 🤔
And we should create a test to check that it doesn't convert the backticks if it contains interpolated code in one single line
There was a problem hiding this comment.
@bitencode So I added commit: a491e08
Seems that it still works with your change and not work when reverting...
So thx I'm now less afraid and confident using your change 🙂
There was a problem hiding this comment.
👍 Awesome - Thanks!
- fix copy/paste error on test description - fix formatted/unformatted test files: - unquoted pug variable assignment to Vue prop should not be quoted
Shinigami92
changed the title
Changes:
Note that I changed
isQuotedand added the back-tic quote to the test with the other two quote styles (was"', now is"`'). All the tests pass, running this on my code based produced correct results, but I only have plain and Vue-based code (no angular, react, svelte, etc..). I looked at all the calling sites ofisQuotedand it looks okay to me, but someone more familiar with the code base should probably review that carefully.