fix: Builder Text node is preserved when converting to Mitosis JSON by liamdebeasi · Pull Request #1769 · BuilderIO/mitosis

liamdebeasi · 2025-05-29T16:00:00Z

Problem

Builder Text nodes are compiled away by default when converting to Mitosis JSON (and by extension Mitosis JSX). This means that <Text text="foo" /> becomes <div>foo</div>. When converting Mitosis JSX back to Builder JSON we intentionally do not convert the div back to a Builder Text node because we have no idea if it's supposed to remain as a regular div.

This causes issues because the Builder Text primitive has additional styling built-in. When we convert JSX back to Builder JSON that styling is effectively lost since the Text node is not re-created. This can result in rendering differences due to the loss of the Text node.

Solution

Converting from Builder JSON to Mitosis JSON no longer compiles away Builder Text nodes by default. As a result, <Text text="foo" /> remains as-is when converting to Mitosis JSON/JSX. Similarly, the Text primitive is preserved when converting back to Builder JSON.

The compileAwayBuilderComponents function has been updated to account for Text, so developers who still wish to have this primitive compiled away can use that function to do so.

Other Information

The compile away logic for Text that I removed had a lot of Text-specific logic that I don't think we need anymore now that we are preserving Text nodes. I intentionally made the logic in compileAwayBuilderComponents simple, but we can add logic there as needed.
This change revealed some existing bugs in certain generators where the Text primitive isn't handled properly. To avoid playing "whack a mole" and making this PR larger than it already is, I left TODOs where necessary.

Make sure to follow the PR preparation steps in CONTRIBUTING.md before submitting your PR:

format the codebase: from the root, run yarn fmt:prettier.
update all snapshots (in core & CLI): from the root, run yarn test:update
add Changeset entry: from the root, run yarn g:changeset and follow the CLI instructions. Alternatively, use the Changeset Github Bot to create the file.

changeset-bot · 2025-05-29T16:00:04Z

🦋 Changeset detected

Latest commit: 8e20873

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@builder.io/mitosis	Minor
@builder.io/mitosis-cli	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

nx-cloud · 2025-05-29T16:03:44Z

View your CI Pipeline Execution ↗ for commit 8e20873.

Command	Status	Duration	Result
`nx e2e @builder.io/e2e-app`	✅ Succeeded	1m 16s	View ↗
`nx run-many --target test`	✅ Succeeded	5m 5s	View ↗
`nx run-many --target build --exclude @builder.i...`	✅ Succeeded	3m 45s	View ↗
`nx build @builder.io/mitosis-site`	✅ Succeeded	2m 23s	View ↗

☁️ Nx Cloud last updated this comment at 2025-06-27 19:53:58 UTC

liamdebeasi · 2025-06-11T16:35:53Z

packages/core/src/__tests__/qwik/specs/qwik.test.mount.json

        "component": {
-          "name": "Text",
-          "options": {
-            "text": "Enter some text..."


This example has both component.options.text as well as bindings.component.options.text. Leaving both in created a behavior change with this PR. I spoke with Sami and he said that this use case is a bit unusual so we decided to not worry about supporting it for now.

packages/core/src/parsers/builder/builder.ts

packages/core/src/__tests__/builder/builder.test.ts

packages/core/src/generators/builder/generator.ts

packages/core/src/plugins/compile-away-builder-components.ts

midhunadarvin

LGTM. I'll suggest a review from @samijaber / @sidmohanty11 too.

midhunadarvin · 2025-06-26T06:07:51Z

packages/core/src/__tests__/builder/__snapshots__/builder.test.ts.snap

      <Fragment>
        <Show when={props.conditionA}>
-          <span>Content0</span>
+          <Text $tagName=\\"span\\" text=\\"Content0\\" />


❔question:

Thespan/div tag, for gen2 sdks, would be transformed to the framework specific element right ? So with this change we would need update the corresponding tests / snapshots in the gen 2 sdks repo right ?

Since there are only changes in the snapshots for builderContentToMitosisComponent tests and there are no snapshot changes for componentToBuilder tests, I'm assuming we won't have any breaking change in Builder JSON with regards to how mitosis is being used within AI services. Just wanted to confirm that.

samijaber · 2025-06-26T13:23:57Z

packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap

-      \\"builder-id\\": \\"builder-192569f8d0a943398ec7ab9c327e104f\\",
-      class: \\"cjrqfb1 builder-block\\",
-      style: {
-        backgroundColor: (() => {


It looks like we lost bindings (class, style, "builder-id", key in another one below) in these tests. Do you know why? A bit concerning

Good catch! This was a bug in my compile away implementation. Qwik does not render any bindings it sees on a node with _text (since it's supposed to be plain text).

I fixed the implementation by making sure bindings/props (except for _text) are rendered on the parent div: 1c7eb2e

However, this did uncover an inconsistency in the Qwik generator:

When a node has both an innerHTML binding and property, we prefer the binding. However, when the node has a _text binding and property we prefer the property.

samijaber · 2025-06-26T13:26:20Z

packages/core/src/__tests__/builder/__snapshots__/builder.test.ts.snap

        "css": {
          "bindingType": "expression",
-          "code": "{backgroundColor:'rgba(0, 0, 0, 1)',display:'flex',paddingLeft:'72px',paddingRight:'72px',paddingTop:'25px',paddingBottom:'25px',alignItems:'start',gap:'10px',fontFamily:'Poppins, -apple-system, Roboto, Helvetica, sans-serif',fontSize:'16px',color:'rgba(255, 255, 255, 1)',fontWeight:'700',textTransform:'uppercase',justifyContent:'start'}",
+          "code": "{\\"backgroundColor\\":\\"rgba(0, 0, 0, 1)\\",\\"display\\":\\"flex\\",\\"paddingLeft\\":\\"72px\\",\\"paddingRight\\":\\"72px\\",\\"paddingTop\\":\\"25px\\",\\"paddingBottom\\":\\"25px\\",\\"alignItems\\":\\"start\\",\\"gap\\":\\"10px\\",\\"fontFamily\\":\\"Poppins, -apple-system, Roboto, Helvetica, sans-serif\\",\\"fontSize\\":\\"16px\\",\\"color\\":\\"rgba(255, 255, 255, 1)\\",\\"fontWeight\\":\\"700\\",\\"textTransform\\":\\"uppercase\\",\\"justifyContent\\":\\"start\\"}",


im seeing css code expressions in snapshots across this PR have their formatting updated from single quotes to escaped double-quotes. it looks like purely a formatting change, but i'm still surprised why it happens. Do you know? Is it a symptom of a potential problem?

The difference comes down to our use of both JSON.stringify and json5.stringify. The former adds double quotes, the latter does not.

More specifically, in main if we find a node with a single child Text node, we will try to merge code which uses json5.stringify for the CSS. This code was removed in this PR, so json5.stringify is never called and instead the original JSON.stringify formatting is preserved

Also we don't have that code path anymore because by merging the code we compile away the Text node which we are trying to avoid.

add failing test

03b2780

liamdebeasi added 8 commits May 29, 2025 13:59

remove Text component mapper

43fcf1e

include text in compile away buiulder components

134be7f

fix: remove Text transformations

aa5c311

test: add another test

8ee4e43

remove .only

d3de101

sync

6142822

Merge branch 'main' into ENG-9431

cb75c4d

update spec

b1c9dd4

liamdebeasi changed the title ~~add failing test~~ fix: Builder Text node is preserved when converting to Mitosis JSON Jun 2, 2025

liamdebeasi added 8 commits June 2, 2025 14:08

re-add single node merging

f4f7a11

fix some bugs with merging nodes with single text nodes

68e23b6

fix: account for bindings too

de4f9d2

fix tests

1668ac8

fix a few tests

58d7fcd

fix a couple tests

df09a1d

tests

8007538

update

ced2a98

liamdebeasi force-pushed the ENG-9431 branch from 508a530 to ced2a98 Compare June 11, 2025 15:49

liamdebeasi added 3 commits June 11, 2025 11:52

add todo

001de8c

remove old file

83cc9a4

shiny seas do!

929f9c7

liamdebeasi commented Jun 11, 2025

View reviewed changes

liamdebeasi marked this pull request as ready for review June 11, 2025 16:36

liamdebeasi requested a review from samijaber as a code owner June 11, 2025 16:36

kylefowler reviewed Jun 24, 2025

View reviewed changes

packages/core/src/parsers/builder/builder.ts Show resolved Hide resolved

midhunadarvin reviewed Jun 25, 2025

View reviewed changes

packages/core/src/__tests__/builder/builder.test.ts Show resolved Hide resolved

packages/core/src/generators/builder/generator.ts Show resolved Hide resolved

Merge branch 'main' into ENG-9431

cd699c8

liamdebeasi added 2 commits June 25, 2025 09:33

revert

950e0fc

remove log

a38c9c8

liamdebeasi commented Jun 25, 2025

View reviewed changes

packages/core/src/plugins/compile-away-builder-components.ts Show resolved Hide resolved

liamdebeasi added 4 commits June 25, 2025 09:54

fix: styles are preserved when compiling away text node

69c5f1a

revert

36de61b

clean up

425b75f

fix test

b2a629b

midhunadarvin approved these changes Jun 26, 2025

View reviewed changes

samijaber reviewed Jun 26, 2025

View reviewed changes

liamdebeasi added 3 commits June 27, 2025 13:55

bindings and props are rendered when compiling away Text node

1c7eb2e

Merge branch 'main' into ENG-9431

9dafcd0

types

a3d4e05

samijaber approved these changes Jun 27, 2025

View reviewed changes

liamdebeasi added 2 commits June 27, 2025 14:23

better sync

feb0a82

more fixes

8e20873

liamdebeasi merged commit 2bd0070 into BuilderIO:main Jun 30, 2025
7 checks passed

liamdebeasi deleted the ENG-9431 branch June 30, 2025 13:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Builder Text node is preserved when converting to Mitosis JSON#1769

fix: Builder Text node is preserved when converting to Mitosis JSON#1769
liamdebeasi merged 32 commits intoBuilderIO:mainfrom
liamdebeasi:ENG-9431

liamdebeasi commented May 29, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented May 29, 2025 •

edited

Loading

Uh oh!

nx-cloud bot commented May 29, 2025 •

edited

Loading

Uh oh!

liamdebeasi Jun 11, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

midhunadarvin left a comment

Uh oh!

midhunadarvin Jun 26, 2025

Uh oh!

samijaber Jun 26, 2025

Uh oh!

liamdebeasi Jun 27, 2025

Uh oh!

samijaber Jun 26, 2025

Uh oh!

liamdebeasi Jun 26, 2025

Uh oh!

liamdebeasi Jun 26, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

liamdebeasi commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Solution

Other Information

Uh oh!

changeset-bot bot commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

nx-cloud bot commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

liamdebeasi Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

midhunadarvin left a comment

Choose a reason for hiding this comment

Uh oh!

midhunadarvin Jun 26, 2025

Choose a reason for hiding this comment

Uh oh!

samijaber Jun 26, 2025

Choose a reason for hiding this comment

Uh oh!

liamdebeasi Jun 27, 2025

Choose a reason for hiding this comment

Uh oh!

samijaber Jun 26, 2025

Choose a reason for hiding this comment

Uh oh!

liamdebeasi Jun 26, 2025

Choose a reason for hiding this comment

Uh oh!

liamdebeasi Jun 26, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

liamdebeasi commented May 29, 2025 •

edited

Loading

changeset-bot bot commented May 29, 2025 •

edited

Loading

nx-cloud bot commented May 29, 2025 •

edited

Loading