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 23 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
213 changes: 33 additions & 180 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 Expand Up @@ -405,55 +390,11 @@ function MyComponent(props) {
},
}}
>
<div
css={{
display: \\"flex\\",
flexDirection: \\"column\\",
alignItems: \\"stretch\\",
flexShrink: \\"0\\",
position: \\"relative\\",
marginTop: \\"-1.65625px\\",
textAlign: \\"center\\",
lineHeight: \\"normal\\",
height: \\"auto\\",
fontSize: \\"24px\\",
\\"@media (max-width: 991px)\\": {
marginTop: \\"1.34375px\\",
textAlign: \\"center\\",
},
\\"@media (max-width: 640px)\\": {
fontSize: \\"25px\\",
},
}}
>
<p>Something Great to Say</p>
</div>
<div
css={{
display: \\"flex\\",
flexDirection: \\"column\\",
alignItems: \\"stretch\\",
flexShrink: \\"0\\",
position: \\"relative\\",
marginTop: \\"14.59375px\\",
textAlign: \\"center\\",
lineHeight: \\"normal\\",
height: \\"auto\\",
fontSize: \\"15px\\",
color: \\"rgba(86, 86, 86, 1)\\",
\\"@media (max-width: 991px)\\": {
textAlign: \\"center\\",
},
\\"@media (max-width: 640px)\\": {
fontSize: \\"15px\\",
},
}}
>
<p>
Some more great things to elaborate on that wonderful things you
have to tell your audience
</p>
</div>
<p>Something Great to Say</p>
<p>
Some more great things to elaborate on that wonderful things you
have to tell your audience
</p>
</div>
</div>
<div
Expand Down Expand Up @@ -513,55 +454,11 @@ function MyComponent(props) {
},
}}
>
<div
css={{
display: \\"flex\\",
flexDirection: \\"column\\",
alignItems: \\"stretch\\",
flexShrink: \\"0\\",
position: \\"relative\\",
marginTop: \\"-1.65625px\\",
textAlign: \\"center\\",
lineHeight: \\"normal\\",
height: \\"auto\\",
fontSize: \\"24px\\",
\\"@media (max-width: 991px)\\": {
marginTop: \\"1.34375px\\",
textAlign: \\"center\\",
},
\\"@media (max-width: 640px)\\": {
fontSize: \\"25px\\",
},
}}
>
<p>Something Great to Say</p>
</div>
<div
css={{
display: \\"flex\\",
flexDirection: \\"column\\",
alignItems: \\"stretch\\",
flexShrink: \\"0\\",
position: \\"relative\\",
marginTop: \\"14.59375px\\",
textAlign: \\"center\\",
lineHeight: \\"normal\\",
height: \\"auto\\",
fontSize: \\"15px\\",
color: \\"rgba(86, 86, 86, 1)\\",
\\"@media (max-width: 991px)\\": {
textAlign: \\"center\\",
},
\\"@media (max-width: 640px)\\": {
fontSize: \\"15px\\",
},
}}
>
<p>
Some more great things to elaborate on that wonderful things you
have to tell your audience
</p>
</div>
<p>Something Great to Say</p>
<p>
Some more great things to elaborate on that wonderful things you
have to tell your audience
</p>
</div>
</div>
<div
Expand Down Expand Up @@ -625,55 +522,11 @@ function MyComponent(props) {
},
}}
>
<div
css={{
display: \\"flex\\",
flexDirection: \\"column\\",
alignItems: \\"stretch\\",
flexShrink: \\"0\\",
position: \\"relative\\",
marginTop: \\"-1.65625px\\",
textAlign: \\"center\\",
lineHeight: \\"normal\\",
height: \\"auto\\",
fontSize: \\"24px\\",
\\"@media (max-width: 991px)\\": {
marginTop: \\"1.34375px\\",
textAlign: \\"center\\",
},
\\"@media (max-width: 640px)\\": {
fontSize: \\"25px\\",
},
}}
>
<p>Something Great to Say</p>
</div>
<div
css={{
display: \\"flex\\",
flexDirection: \\"column\\",
alignItems: \\"stretch\\",
flexShrink: \\"0\\",
position: \\"relative\\",
marginTop: \\"14.59375px\\",
textAlign: \\"center\\",
lineHeight: \\"normal\\",
height: \\"auto\\",
fontSize: \\"15px\\",
color: \\"rgba(86, 86, 86, 1)\\",
\\"@media (max-width: 991px)\\": {
textAlign: \\"center\\",
},
\\"@media (max-width: 640px)\\": {
fontSize: \\"15px\\",
},
}}
>
<p>
Some more great things to elaborate on that wonderful things you
have to tell your audience
</p>
</div>
<p>Something Great to Say</p>
<p>
Some more great things to elaborate on that wonderful things you
have to tell your audience
</p>
</div>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions packages/cli/src/__tests__/compile/compile.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { DEFAULT_TEST_TIMEOUT, cli } from '../utils';

// TODO refactor commands/compile.ts to not have side effects (like calling
// process.exit) so that this can be unit tested instead.
// TODO styles are missing in the react generator on the Text nodes
test(
'strips out builder components by default',
async () => {
Expand Down
Loading