-
Notifications
You must be signed in to change notification settings - Fork 574
New issue
Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? # to your account
Line break character \n causes problem when trying to use it for splitting textarea content into an array with rows #1064
Comments
Looking at the generated JSON: "rows": {
"code": "get rows() {\n return state.textareaContent.split(\"\\n\").filter(row => row != \"\")}",
"type": "getter"
} I do see the Easiest way to make sure is add a snapshot test that includes a |
hello @samijaber
it is being used in the react generator here
the logic is as follows: if the char \n is between double quotes or single quotes then replace it with empty space mitosis/packages/core/src/helpers/replace-new-lines-in-strings.ts Lines 6 to 10 in 1f80185
I used backticks instead of double quotes and the react generator is no longer replacing \n with a space, and the \n is getting replaced with an actual line break just like Vue and Angular generators question number 1 is how to resolve the react issue. |
I think we solve both by removing all usage of |
@samijaber I am interested in fixing this issue (to be my first one ever in open source), but may I ask why we used dedent in the first place? and will remove it cause any problems? |
I am interested in helping provide a fix!
No
Which generators are impacted?
Reproduction case
https://mitosis.builder.io/?outputTab=IYOw5grgNsBOQ%3D%3D%3D&inputTab=M4NwpgNgLmQ%3D&code=DwZwxgTglgDgLgAgDYEMB2BzAvAIjiHAPgCgEzkBTROCgDzhQgpQGEB7NGzhLBHHANylySKgghsA7iCHkEAEgBc4qSB4Ia9Rs3acKnAHQgYSKHAAUOADpocASgMAzKEhoRzEyT0IqvAQl5%2BOyFgAHpwaHgSYmBNBiYUBGEyACMoNAATRQA3FCQAVwpcAG847VYOLjgAXxwkuU8QXABGAAYcZIQwNiQmnAAmduJQnzkkmPykEjligGJmMAALXzUUNU9qzrlgU0JijbDdzuLQhcXNsMnCIA%3D%3D%3D
Expected Behaviour
The code generation should generate similar code as in the Svelte/sveltosis input code regarding splitting the content of a textarea, i.e. the following line of code should become similar for the other targets:
textareaContent.split("\n").filter(row => row != "")
Actual Behaviour
The targets 'react' and 'reactNative' instead generates the following corresponding line of code (with space instead of line break character):
textareaContent.split(" ").filter((row) => row != "")
The targets 'angular' and 'vue' instead generates the following corresponding lines of code:
(i.e. with an actual line break rather than the line break character \n)
Target 'svelte' generates the same result as angular and vue, i.e. when trying to generate from Svelte/sveltosis input to target 'svelte'
The target 'solid' fails with a "SyntaxError: Unterminated string literal" and does not generate any output file.
Additional Information
Svelte/sveltosis input file src\lib\MySveltePage.svelte
When generating the outputs I was using this command:
pnpm exec mitosis build
pnpm list
@builder.io/mitosis 0.0.92
@builder.io/mitosis-cli 0.0.51
pnpm --version
7.29.3
npm --version
9.6.1
node --version
v18.15.0
Operating system: Windows 10
The text was updated successfully, but these errors were encountered: