Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
liamdebeasi merged 32 commits into from
Jun 30, 2025
Merged

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

Show file tree
Hide file tree
Changes from 27 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
03b2780
add failing test
liamdebeasi May 29, 2025
43fcf1e
remove Text component mapper
liamdebeasi May 29, 2025
134be7f
include text in compile away buiulder components
liamdebeasi May 29, 2025
aa5c311
fix: remove Text transformations
liamdebeasi May 29, 2025
8ee4e43
test: add another test
liamdebeasi May 29, 2025
d3de101
remove .only
liamdebeasi May 29, 2025
6142822
sync
liamdebeasi May 30, 2025
cb75c4d
Merge branch 'main' into ENG-9431
liamdebeasi Jun 2, 2025
b1c9dd4
update spec
liamdebeasi Jun 2, 2025
f4f7a11
re-add single node merging
liamdebeasi Jun 2, 2025
68e23b6
fix some bugs with merging nodes with single text nodes
liamdebeasi Jun 2, 2025
de4f9d2
fix: account for bindings too
liamdebeasi Jun 2, 2025
1668ac8
fix tests
liamdebeasi Jun 2, 2025
58d7fcd
fix a few tests
liamdebeasi Jun 2, 2025
df09a1d
fix a couple tests
liamdebeasi Jun 9, 2025
8007538
tests
liamdebeasi Jun 9, 2025
ced2a98
update
liamdebeasi Jun 11, 2025
001de8c
add todo
liamdebeasi Jun 11, 2025
83cc9a4
remove old file
liamdebeasi Jun 11, 2025
929f9c7
shiny seas do!
liamdebeasi Jun 11, 2025
cd699c8
Merge branch 'main' into ENG-9431
midhunadarvin Jun 25, 2025
950e0fc
revert
liamdebeasi Jun 25, 2025
a38c9c8
remove log
liamdebeasi Jun 25, 2025
69c5f1a
fix: styles are preserved when compiling away text node
liamdebeasi Jun 25, 2025
36de61b
revert
liamdebeasi Jun 25, 2025
425b75f
clean up
liamdebeasi Jun 25, 2025
b2a629b
fix test
liamdebeasi Jun 25, 2025
1c7eb2e
bindings and props are rendered when compiling away Text node
liamdebeasi Jun 27, 2025
9dafcd0
Merge branch 'main' into ENG-9431
liamdebeasi Jun 27, 2025
a3d4e05
types
liamdebeasi Jun 27, 2025
feb0a82
better sync
liamdebeasi Jun 27, 2025
8e20873
more fixes
liamdebeasi Jun 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/shiny-seas-do.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@builder.io/mitosis': minor
'@builder.io/mitosis-cli': minor
---

feat: Builder Text node is no longer stripped away by default when converting to Mitosis
51 changes: 18 additions & 33 deletions packages/cli/src/__tests__/compile/__snapshots__/compile.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@ function MyComponent(props) {
},
}}
>
<div
<Text
text=\\"<p>Something Great to Say</p>\\"
css={{
display: \\"flex\\",
flexDirection: \\"column\\",
Expand All @@ -81,10 +82,9 @@ function MyComponent(props) {
fontSize: \\"25px\\",
},
}}
>
<p>Something Great to Say</p>
</div>
<div
/>
<Text
text=\\"<p>Some more great things to elaborate on that wonderful things you have to tell your audience</p>\\"
css={{
display: \\"flex\\",
flexDirection: \\"column\\",
Expand All @@ -104,12 +104,7 @@ function MyComponent(props) {
fontSize: \\"15px\\",
},
}}
>
<p>
Some more great things to elaborate on that wonderful things you
have to tell your audience
</p>
</div>
/>
</div>
</Column>
<Column>
Expand Down Expand Up @@ -161,7 +156,8 @@ function MyComponent(props) {
},
}}
>
<div
<Text
text=\\"<p>Something Great to Say</p>\\"
css={{
display: \\"flex\\",
flexDirection: \\"column\\",
Expand All @@ -181,10 +177,9 @@ function MyComponent(props) {
fontSize: \\"25px\\",
},
}}
>
<p>Something Great to Say</p>
</div>
<div
/>
<Text
text=\\"<p>Some more great things to elaborate on that wonderful things you have to tell your audience</p>\\"
css={{
display: \\"flex\\",
flexDirection: \\"column\\",
Expand All @@ -204,12 +199,7 @@ function MyComponent(props) {
fontSize: \\"15px\\",
},
}}
>
<p>
Some more great things to elaborate on that wonderful things you
have to tell your audience
</p>
</div>
/>
</div>
</Column>
<Column>
Expand Down Expand Up @@ -265,7 +255,8 @@ function MyComponent(props) {
},
}}
>
<div
<Text
text=\\"<p>Something Great to Say</p>\\"
css={{
display: \\"flex\\",
flexDirection: \\"column\\",
Expand All @@ -285,10 +276,9 @@ function MyComponent(props) {
fontSize: \\"25px\\",
},
}}
>
<p>Something Great to Say</p>
</div>
<div
/>
<Text
text=\\"<p>Some more great things to elaborate on that wonderful things you have to tell your audience</p>\\"
css={{
display: \\"flex\\",
flexDirection: \\"column\\",
Expand All @@ -308,12 +298,7 @@ function MyComponent(props) {
fontSize: \\"15px\\",
},
}}
>
<p>
Some more great things to elaborate on that wonderful things you
have to tell your audience
</p>
</div>
/>
</div>
</Column>
</Columns>
Expand Down
161 changes: 22 additions & 139 deletions packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,15 +214,8 @@ export const MyComponentOnMount = (p) => {
builder-id=\\"builder-5fed2723c1cc4fb39e9d22b9c54ef179\\"
class=\\"csanagh\\"
>
<div
builder-id=\\"builder-2cad86b387ec405d82917895d7af0a12\\"
class=\\"crwdrpw\\"
>
<div
key=\\"builder-2cad86b387ec405d82917895d7af0a12\\"
dangerouslySetInnerHTML=\\"<p>Item 1</p>\\"
class=\\"builder-text\\"
></div>
<div class=\\"crwdrpw\\">
<p>Item 1</p>
</div>
</div>
</div>
Expand All @@ -231,15 +224,8 @@ export const MyComponentOnMount = (p) => {
builder-id=\\"builder-18279a99b32240f19aa21d3f4b015cc9\\"
class=\\"c4qyc1p\\"
>
<div
builder-id=\\"builder-2dbfa56b8988461c8566bbe759580e9b\\"
class=\\"ctcw2m4\\"
>
<div
key=\\"builder-2dbfa56b8988461c8566bbe759580e9b\\"
dangerouslySetInnerHTML=\\"<p>Item 1 content</p>\\"
class=\\"builder-text\\"
></div>
<div class=\\"ctcw2m4\\">
<p>Item 1 content</p>
</div>
</div>
</div>
Expand All @@ -250,15 +236,8 @@ export const MyComponentOnMount = (p) => {
builder-id=\\"builder-2a93def22a354cf7aa193c20d1ad6def\\"
class=\\"csanagh\\"
>
<div
builder-id=\\"builder-1365fc457ece45db82ad90dbe9819e7c\\"
class=\\"crwdrpw\\"
>
<div
key=\\"builder-1365fc457ece45db82ad90dbe9819e7c\\"
dangerouslySetInnerHTML=\\"<p>Item 2</p>\\"
class=\\"builder-text\\"
></div>
<div class=\\"crwdrpw\\">
<p>Item 2</p>
</div>
</div>
</div>
Expand All @@ -267,15 +246,8 @@ export const MyComponentOnMount = (p) => {
builder-id=\\"builder-fd6ef41da6d040328fbd8b0801611fe5\\"
class=\\"c4qyc1p\\"
>
<div
builder-id=\\"builder-7362f9fd64c647c5a400d9e75c74473f\\"
class=\\"ctcw2m4\\"
>
<div
key=\\"builder-7362f9fd64c647c5a400d9e75c74473f\\"
dangerouslySetInnerHTML=\\"<p>Item 2 content</p>\\"
class=\\"builder-text\\"
></div>
<div class=\\"ctcw2m4\\">
<p>Item 2 content</p>
</div>
</div>
</div>
Expand Down Expand Up @@ -389,18 +361,7 @@ export const MyComponentOnMount = (p) => {
$index: $index,
};
const state = __proxyMerge__(s, l);
return (
<div
builder-id=\\"builder-927e0013cb8142a9bd46a4f3811d0865\\"
class=\\"cdrk993\\"
>
<div
key=\\"builder-927e0013cb8142a9bd46a4f3811d0865\\"
class=\\"builder-text\\"
dangerouslySetInnerHTML={state.resultsItem.data.title}
></div>
</div>
);
return <>{state.resultsItem.data.title}</>;
}).bind(l)
)}
</section>
Expand Down Expand Up @@ -542,18 +503,7 @@ export const MyComponentOnMount = (p) => {
height: 1300,
width: 1300,
}),
h(
\\"div\\",
{
\\"builder-id\\": \\"builder-1072afed47764e7cb37d088fd66f3a67\\",
class: \\"cjrqfb1 builder-block\\",
},
h(\\"div\\", {
key: \\"builder-1072afed47764e7cb37d088fd66f3a67\\",
class: \\"builder-text\\",
dangerouslySetInnerHTML: state.myState,
})
)
state.myState
);
};
export const MyComponent = componentQrl(
Expand Down Expand Up @@ -772,18 +722,7 @@ export const MyComponentOnMount = (p) => {
height: 1300,
width: 1300,
}),
h(
\\"div\\",
{
\\"builder-id\\": \\"builder-1072afed47764e7cb37d088fd66f3a67\\",
class: \\"cjrqfb1 builder-block\\",
},
h(\\"div\\", {
key: \\"builder-1072afed47764e7cb37d088fd66f3a67\\",
class: \\"builder-text\\",
dangerouslySetInnerHTML: state.myState,
})
)
state.myState
);
};
export const MyComponent = componentQrl(
Expand Down Expand Up @@ -956,27 +895,7 @@ exports.MyComponentOnMount = (p) => {

useStylesScopedQrl(qrl(\\"./low.js\\", \\"MyComponentStyles\\", []));

return h(
\\"div\\",
{
\\"builder-id\\": \\"builder-192569f8d0a943398ec7ab9c327e104f\\",
class: \\"cjrqfb1 builder-block\\",
style: {
backgroundColor: (() => {
Copy link
Contributor

@samijaber samijaber Jun 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@liamdebeasi liamdebeasi Jun 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

try {
return state.hilitTitle ? \\"red\\" : \\"gray\\";
} catch (err) {
console.warn(\\"Builder code error\\", err);
}
})(),
},
},
h(\\"div\\", {
key: \\"builder-192569f8d0a943398ec7ab9c327e104f\\",
class: \\"builder-text\\",
dangerouslySetInnerHTML: state.title,
})
);
return h(Fragment, null, state.title);
};
const __proxyMerge__ = (exports.__proxyMerge__ = function __proxyMerge__(
state,
Expand Down Expand Up @@ -1223,16 +1142,7 @@ export const ComponentD187055AF171488FAD843ACF045D6BF7OnMount = (p) => {
builder-id=\\"builder-139a8479536b4c4f9c2738e724ed0952\\"
class=\\"cj49hqu builder-block\\"
>
<div
builder-id=\\"builder-2ae3b4104cc0478e85eff49694792d9c\\"
class=\\"cjrqfb1\\"
>
<div
key=\\"builder-2ae3b4104cc0478e85eff49694792d9c\\"
class=\\"builder-text\\"
dangerouslySetInnerHTML={state.title}
></div>
</div>
{state.title}
</div>
);
};
Expand Down Expand Up @@ -1436,16 +1346,7 @@ exports.MyComponentOnMount = (p) => {

return (
<>
<div
builder-id=\\"builder-71f26e4ffffe4e24940aa12e5250fa5f\\"
class=\\"cjrqfb1 builder-block\\"
>
<div
key=\\"builder-71f26e4ffffe4e24940aa12e5250fa5f\\"
class=\\"builder-text\\"
dangerouslySetInnerHTML={state.data}
></div>
</div>
{state.data}
<CoreButton
builder-id=\\"builder-6f8fe6a1d2284f2890ae97657eed084a\\"
text=\\"Something else\\"
Expand Down Expand Up @@ -10062,7 +9963,7 @@ const qrl = require(\\"@builder.io/qwik\\").qrl;
const useStore = require(\\"@builder.io/qwik\\").useStore;
const useStylesScopedQrl = require(\\"@builder.io/qwik\\").useStylesScopedQrl;

exports.MyComponentStyles = \`.cjrqfb1{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;line-height:normal;height:auto;text-align:center}\`;
exports.MyComponentStyles = \`.cxfmert{all:unset;display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;line-height:normal;height:auto;text-align:center}\`;
exports.MyComponentOnMount = (p) => {
const s = useStore(
() => {
Expand All @@ -10087,10 +9988,10 @@ exports.MyComponentOnMount = (p) => {
useStylesScopedQrl(qrl(\\"./low.js\\", \\"MyComponentStyles\\", []));

return h(
\\"div\\",
\\"button\\",
{
\\"builder-id\\": \\"builder-192569f8d0a943398ec7ab9c327e104f\\",
class: \\"cjrqfb1 builder-block\\",
class: \\"cxfmert builder-block\\",
style: {
backgroundColor: (() => {
try {
Expand All @@ -10101,11 +10002,7 @@ exports.MyComponentOnMount = (p) => {
})(),
},
},
h(\\"div\\", {
key: \\"builder-192569f8d0a943398ec7ab9c327e104f\\",
class: \\"builder-text\\",
dangerouslySetInnerHTML: state.title,
})
state.title
);
};
const __proxyMerge__ = (exports.__proxyMerge__ = function __proxyMerge__(
Expand Down Expand Up @@ -10341,27 +10238,13 @@ export const MyComponentOnMount = (p) => {
onClick$={qrl(\\"./high.js\\", \\"MyComponent_onClick_0\\", [s, l])}
></CoreButton>
{state.visible ? (
<div
builder-id=\\"builder-845ebd803c89485383568d433b6fd517\\"
class=\\"cjrqfb1\\"
>
<div
key=\\"builder-845ebd803c89485383568d433b6fd517\\"
dangerouslySetInnerHTML=\\"<p>Show when visible=true</p>\\"
class=\\"builder-text\\"
></div>
<div class=\\"cjrqfb1\\">
<p>Show when visible=true</p>
</div>
) : null}
{!state.visible ? (
<div
builder-id=\\"builder-67baa3b2073942b99017e846759776aa\\"
class=\\"cjrqfb1\\"
>
<div
key=\\"builder-67baa3b2073942b99017e846759776aa\\"
dangerouslySetInnerHTML=\\"<p>Show when visible=false</p>\\"
class=\\"builder-text\\"
></div>
<div class=\\"cjrqfb1\\">
<p>Show when visible=false</p>
</div>
) : null}
{!visible ? (
Expand Down
Loading