Spacing issues around tags with dynamic text

[rhengles]

Describe the bug

I made an extremely simple example of running Mitosis with Astro. The same Mitosis component has different rendering between frameworks. I guess we'd need a test suite for this. But below is an example:

The text of the input is rendered like this:

    return <div>
        <input
            css={{
            color: "red",
            }}
            value={name}
            onChange={(event) => setName(event.target.value)}
        />
        Hello <span>{name}</span>!
        I can run in React, Vue, Solid, or Liquid!
    </div>;

Note that the dynamic content is rendered on a <span/> tag. I could have rendered it directly on the parent text but I wanted to specifically set it apart. I think the same issue happens without the <span/> tag.

To Reproduce

1. Just render dynamic content on a tag with text around it, and see if the text respects the spaces in the source.

If possible, a link to a https://mitosis.builder.io/ fiddle containing the bug:

There's not much point in this because the "rendered" output is a Builder editor and not rendered by the selected framework.

Link to fiddle

Expected behavior

First, I expect all frameworks to render the same. Second, I expect the spacing around texts to represent what I wrote in the source. Specifically, to have a space if there is one in the source and to not have a space if there isn't one in the source.

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

• React and Solid:
  No space after "Hello". Here the rendered source JSX has the word "Hello" on its own line. For it to work we need to output one of these options:
  • A space character when text is alone on the line:

      Hello{" "}
    

  • Make the text on the same line as the tag. I guess this is the easier option.

      Hello <span>{name}</span>!
    

    Edit: Also, I almost overlooked it, but the text "Hello" also does not have a space before it, having no space with the text input just before it.
• Svelte:
  This one is actually putting a space between the <span/> and the exclamation mark !. This space needs to be removed.

    Hello <span>{name}</span> !
  

• Vue:
  This one actually gets it right. No complaints here

[steve8708]

Awesome experiment, and great catch! We do nothing special for whitespace normalization currently (as you've discovered), but very solvable

[PatrickJS]

I guess the question is what is the default way for Mitosis?

jsx is a fork of DOM because the DOM let's you do a lot of things so it's not strict which means you're forced to work around a lot of the allowed quirks. In jsx it's purposely a strict version of the DOM so it's a lot easier to work with in a predictable way.

Mitosis can go either way of either allowing this jsx quirk since it's forcing the dev to create a text node or allow this DOM quirk of text nodes.

[rhengles]

I guess the question is what is the default way for Mitosis?

Your question is a little abstract, but I will try to write my humble opinion about some concrete points, feel free to use it or not.

1. The svelte generator is putting a space between the close </span> tag and the ! exclamation mark. I think this is a plain bug, because there is no space there in the source jsx.

2. There is a space between the Hello word and the open <span> tag. When the text is on the same line like this, even React respects this and there will be a space between them on the rendered dom.

3. The hardest issue here is the space between the text input field and the word Hello, because they are in different lines in the source. In handwritten React components, I'd have to use a {" "} space placeholder like this, because jsx seems to trim whitespace only between one line and another. Not within the same line.

   I'd accept to have to use the same {" "} placeholder in mitosis between lines, but then the Vue generator would have to also trim spaces between lines in the jsx source.

Please correct me if I got anything wrong.

[rhengles]

@samijaber Awesome that there was one fix for Svelte, however this issue is concerned with more than just that. Could you reopen please ?

[samijaber]

@rhengles Ah right, it auto-closed.

Looks like the remaining issues are in React/Solid now, where the spaces are missing