Line break character \n causes problem when trying to use it for splitting textarea content into an array with rows

[TomasJohansson]

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

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:

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

[samijaber]

Looking at the generated JSON:

    "rows": {
      "code": "get rows() {\n return state.textareaContent.split(\"\\n\").filter(row => row != \"\")}",
      "type": "getter"
    }

I do see the \n is escaped correctly. It might be our usage of the dedent library which is causing this problem 🤔, I'm not entirely sure...

Easiest way to make sure is add a snapshot test that includes a \n inside of a string, and then play with removing the dedent package from the generators and see if it fixes our issue.

[samijaber]

Confirming that dedent does not respect the escaped \n:

[moaoa]

hello @samijaber
I have found the bug with react generator I believe it is because of this function

mitosis/packages/core/src/helpers/replace-new-lines-in-strings.ts

Line 1 in 1f80185

export function stripNewlinesInStrings(string: string) {

it is being used in the react generator here

mitosis/packages/core/src/generators/react/generator.ts

Line 497 in 1f80185

return stripNewlinesInStrings(str);

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

	if (inString) {
	if (char === '\n') {
	return ' ';
	}
	}

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.
question number 2 is how to resolve the dedent issue.

[samijaber]

I think we solve both by removing all usage of dedent and stripNewLinesInStrings. That should be OK.

[Othman2001]

@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?