Line break character \n causes problem when trying to use it for splitting textarea content into an array with rows
#1064 aperta il 18 mar 2023
Metriche repository
- Star
- (9803 star)
- Metriche merge PR
- (Merge medio 1g 1h) (6 PR mergiate in 30 g)
Descrizione
I am interested in helping provide a fix!
No
Which generators are impacted?
- All
- Angular
- HTML
- Qwik
- React
- React-Native
- Solid
- Stencil
- Svelte
- Vue
- Web components
Reproduction case
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:
textareaContent.split("
").filter(row => row != "")
(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
<script lang="ts">
let textareaContent = "";
let rows;
$: rows = textareaContent.split("\n").filter(row => row != "");
</script>
<textarea
bind:value="{textareaContent}"
rows="10"
cols="20"
/>
<ul>
{#each rows as row}
<li>{row}</li>
{/each}
</ul>
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