Skip to content

Commit ced2a98

Browse files
liamdebeasiliamdebeasi
committed
update
1 parent 8007538 commit ced2a98

File tree

2 files changed

+273
-180
lines changed

2 files changed

+273
-180
lines changed

‎old.html‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
import { componentToBuilder } from '@/generators/builder';
2+
import { componentToMitosis } from '@/generators/mitosis';
3+
import { builderContentToMitosisComponent } from '@/parsers/builder';
4+
import { parseJsx } from '@/parsers/jsx';
5+
import {
6+
compileAwayBuilderComponentsFromTree,
7+
components as compileAwayComponents,
8+
} from '@/plugins/compile-away-builder-components';
9+
import { describe, test } from 'vitest';
10+
11+
describe('Builder Text node', () => {
12+
test('preserve Text component', () => {
13+
const builderJson = {
14+
data: {
15+
blocks: [
16+
{
17+
'@type': '@builder.io/sdk:Element' as const,
18+
id: 'builder-281c8c0da7be4f8a923f872d4825f14d',
19+
component: {
20+
name: 'Text',
21+
options: {
22+
text: '<h1>Hello World</h1>',
23+
},
24+
},
25+
},
26+
],
27+
},
28+
};
29+
const builderToMitosis = builderContentToMitosisComponent(builderJson);
30+
31+
expect(builderToMitosis.children[0]).toMatchInlineSnapshot(`
32+
{
33+
"@type": "@builder.io/mitosis/node",
34+
"bindings": {},
35+
"children": [],
36+
"meta": {},
37+
"name": "Text",
38+
"properties": {
39+
"$tagName": undefined,
40+
"text": "<h1>Hello World</h1>",
41+
},
42+
"scope": {},
43+
"slots": {},
44+
}
45+
`);
46+
47+
const mitosis = componentToMitosis({})({
48+
component: builderToMitosis,
49+
});
50+
expect(mitosis).toMatchInlineSnapshot(`
51+
"import { Text } from \\"@components\\";
52+
53+
export default function MyComponent(props) {
54+
return <Text text=\\"<h1>Hello World</h1>\\" />;
55+
}
56+
"
57+
`);
58+
59+
const backToMitosis = parseJsx(mitosis);
60+
expect(backToMitosis.children[0]).toMatchInlineSnapshot(`
61+
{
62+
"@type": "@builder.io/mitosis/node",
63+
"bindings": {},
64+
"children": [],
65+
"meta": {},
66+
"name": "Text",
67+
"properties": {
68+
"text": "<h1>Hello World</h1>",
69+
},
70+
"scope": {},
71+
}
72+
`);
73+
74+
const backToBuilder = componentToBuilder()({ component: backToMitosis });
75+
// no data loss means the component payloads are exactly the same
76+
expect(backToBuilder.data!.blocks![0].component).toEqual(builderJson.data.blocks[0].component);
77+
});
78+
test.only('compile away Text component', () => {
79+
const builderJson = {
80+
data: {
81+
blocks: [
82+
{
83+
'@type': '@builder.io/sdk:Element' as const,
84+
id: 'builder-281c8c0da7be4f8a923f872d4825f14d',
85+
component: {
86+
name: 'Text',
87+
options: {
88+
text: '<h1>Hello World</h1>',
89+
},
90+
},
91+
responsiveStyles: {
92+
large: {
93+
color: 'red',
94+
},
95+
},
96+
},
97+
],
98+
},
99+
};
100+
const builderToMitosis = builderContentToMitosisComponent(builderJson);
101+
102+
compileAwayBuilderComponentsFromTree(builderToMitosis, compileAwayComponents);
103+
104+
expect(builderToMitosis.children[0]).toMatchInlineSnapshot(`
105+
{
106+
"@type": "@builder.io/mitosis/node",
107+
"bindings": {
108+
"css": {
109+
"code": "{\\"color\\":\\"red\\"}",
110+
},
111+
},
112+
"children": [
113+
{
114+
"@type": "@builder.io/mitosis/node",
115+
"bindings": {},
116+
"children": [],
117+
"meta": {},
118+
"name": "div",
119+
"properties": {
120+
"_text": "<h1>Hello World</h1>",
121+
},
122+
"scope": {},
123+
},
124+
],
125+
"meta": {},
126+
"name": "div",
127+
"properties": {},
128+
"scope": {},
129+
}
130+
`);
131+
132+
const mitosis = componentToMitosis({})({
133+
component: builderToMitosis,
134+
});
135+
expect(mitosis).toMatchInlineSnapshot(`
136+
"export default function MyComponent(props) {
137+
return (
138+
<div
139+
css={{
140+
color: \\"red\\",
141+
}}
142+
>
143+
<h1>Hello World</h1>
144+
</div>
145+
);
146+
}
147+
"
148+
`);
149+
150+
const backToMitosis = parseJsx(mitosis);
151+
expect(backToMitosis.children[0]).toMatchInlineSnapshot(`
152+
{
153+
"@type": "@builder.io/mitosis/node",
154+
"bindings": {
155+
"css": {
156+
"bindingType": "expression",
157+
"code": "{
158+
color: \\"red\\"
159+
}",
160+
"type": "single",
161+
},
162+
},
163+
"children": [
164+
{
165+
"@type": "@builder.io/mitosis/node",
166+
"bindings": {},
167+
"children": [
168+
{
169+
"@type": "@builder.io/mitosis/node",
170+
"bindings": {},
171+
"children": [],
172+
"meta": {},
173+
"name": "div",
174+
"properties": {
175+
"_text": "Hello World",
176+
},
177+
"scope": {},
178+
},
179+
],
180+
"meta": {},
181+
"name": "h1",
182+
"properties": {},
183+
"scope": {},
184+
},
185+
],
186+
"meta": {},
187+
"name": "div",
188+
"properties": {},
189+
"scope": {},
190+
}
191+
`);
192+
193+
const backToBuilder = componentToBuilder()({ component: backToMitosis });
194+
// no data loss means the component payloads are exactly the same
195+
expect(backToBuilder.data!.blocks![0]).toMatchInlineSnapshot(`
196+
{
197+
"@type": "@builder.io/sdk:Element",
198+
"actions": {},
199+
"bindings": {},
200+
"children": [
201+
{
202+
"@type": "@builder.io/sdk:Element",
203+
"actions": {},
204+
"bindings": {},
205+
"children": [
206+
{
207+
"@type": "@builder.io/sdk:Element",
208+
"bindings": {},
209+
"component": {
210+
"name": "Text",
211+
"options": {
212+
"text": "Hello World",
213+
},
214+
},
215+
"tagName": "span",
216+
},
217+
],
218+
"code": {
219+
"actions": {},
220+
"bindings": {},
221+
},
222+
"properties": {},
223+
"tagName": "h1",
224+
},
225+
],
226+
"code": {
227+
"actions": {},
228+
"bindings": {},
229+
},
230+
"properties": {},
231+
"responsiveStyles": {
232+
"large": {
233+
"color": "red",
234+
},
235+
},
236+
"tagName": "div",
237+
}
238+
`);
239+
});
240+
});

0 commit comments

Comments
 (0)