Skip to content

Commit f6ecca7

Browse files
nmergetnmerget
authored
Merge branch 'main' into fix-angular-signals-issues
2 parents a43979c + a9b29b2 commit f6ecca7

File tree

7 files changed

+175
-89
lines changed

7 files changed

+175
-89
lines changed

‎packages/cli/CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# @builder.io/mitosis-cli
22

3+
## 0.11.4
4+
5+
### Patch Changes
6+
7+
- Updated dependencies [b405755]
8+
- @builder.io/[email protected]
9+
310
## 0.11.3
411

512
### Patch Changes

‎packages/cli/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@builder.io/mitosis-cli",
3-
"version": "0.11.3",
3+
"version": "0.11.4",
44
"description": "mitosis CLI",
55
"types": "build/types/types.d.ts",
66
"bin": {

‎packages/core/CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Change Log
22

3+
## 0.11.4
4+
5+
### Patch Changes
6+
7+
- b405755: fix issue where bindings' responsiveStyles keys (when destructured) aren't well accessed.
8+
39
## 0.11.3
410

511
### Patch Changes

‎packages/core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"name": "Builder.io",
2323
"url": "https://www.builder.io"
2424
},
25-
"version": "0.11.3",
25+
"version": "0.11.4",
2626
"homepage": "https://github.com/BuilderIO/mitosis",
2727
"main": "./dist/src/index.js",
2828
"exports": {

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

Lines changed: 0 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -909,91 +909,6 @@ describe('Builder', () => {
909909
);
910910
});
911911

912-
test('preserve bound media query styles when converting to mitosis', () => {
913-
const content = {
914-
data: {
915-
blocks: [
916-
{
917-
'@type': '@builder.io/sdk:Element' as const,
918-
bindings: {
919-
'responsiveStyles.small.left': 'state.left',
920-
'responsiveStyles.small.top': 'state.top',
921-
'responsiveStyles.large.color': 'state.color',
922-
'style.fontSize': 'state.fontSize',
923-
'style.background': '"red"',
924-
'responsiveStyles.large.background': '"green"',
925-
},
926-
},
927-
],
928-
},
929-
};
930-
931-
const mitosis = builderContentToMitosisComponent(content);
932-
expect(mitosis.children[0].bindings).toMatchInlineSnapshot(`
933-
{
934-
"style": {
935-
"bindingType": "expression",
936-
"code": "{ fontSize: state.fontSize, background: \\"red\\", \\"@media (max-width: 640px)\\": { left: state.left, top: state.top }, \\"@media (max-width: 1200px)\\": { color: state.color, background: \\"green\\" }, }",
937-
"type": "single",
938-
},
939-
}
940-
`);
941-
942-
const jsx = componentToMitosis()({ component: mitosis });
943-
expect(jsx).toMatchInlineSnapshot(`
944-
"export default function MyComponent(props) {
945-
return (
946-
<div
947-
style={{
948-
fontSize: state.fontSize,
949-
background: \\"red\\",
950-
\\"@media (max-width: 640px)\\": {
951-
left: state.left,
952-
top: state.top,
953-
},
954-
\\"@media (max-width: 1200px)\\": {
955-
color: state.color,
956-
background: \\"green\\",
957-
},
958-
}}
959-
/>
960-
);
961-
}
962-
"
963-
`);
964-
965-
const json = componentToBuilder()({ component: mitosis });
966-
expect(json).toMatchInlineSnapshot(`
967-
{
968-
"data": {
969-
"blocks": [
970-
{
971-
"@type": "@builder.io/sdk:Element",
972-
"actions": {},
973-
"bindings": {
974-
"responsiveStyles.large.background": "\\"green\\"",
975-
"responsiveStyles.large.color": "state.color",
976-
"responsiveStyles.small.left": "state.left",
977-
"responsiveStyles.small.top": "state.top",
978-
"style.background": "\\"red\\"",
979-
"style.fontSize": "state.fontSize",
980-
},
981-
"children": [],
982-
"code": {
983-
"actions": {},
984-
"bindings": {},
985-
},
986-
"properties": {},
987-
"tagName": "div",
988-
},
989-
],
990-
"jsCode": "",
991-
"tsCode": "",
992-
},
993-
}
994-
`);
995-
});
996-
997912
test('preserve bound call expressions for styles', () => {
998913
const code = dedent`
999914
import { useStore } from "@builder.io/mitosis";

‎packages/core/src/__tests__/builder/responsive-styles.test.ts‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
import { componentToBuilder } from '@/generators/builder';
2+
import { componentToMitosis } from '@/generators/mitosis';
3+
import { describe, expect, test } from 'vitest';
4+
import {
5+
builderContentToMitosisComponent,
6+
getStyleStringFromBlock,
7+
} from '../../parsers/builder/builder';
8+
9+
const options = {
10+
escapeInvalidCode: true,
11+
includeMeta: true,
12+
includeSpecialBindings: true,
13+
};
14+
15+
describe('Responsive Styles', () => {
16+
test('preserve bound media query styles when converting to mitosis', () => {
17+
const content = {
18+
data: {
19+
blocks: [
20+
{
21+
'@type': '@builder.io/sdk:Element' as const,
22+
bindings: {
23+
'responsiveStyles.small.left': 'state.left',
24+
'responsiveStyles.small.top': 'state.top',
25+
'responsiveStyles.large.color': 'state.color',
26+
'style.fontSize': 'state.fontSize',
27+
'style.background': '"red"',
28+
'responsiveStyles.large.background': '"green"',
29+
'component.options.responsiveStyles.medium.flexDirection':
30+
'state.reverseColumnsWhenStacked && (state.stackColumnsAt === "tablet" || state.stackColumnsAt === "mobile") ? "column-reverse" : undefined',
31+
'component.options.responsiveStyles.small.color': '"red"',
32+
'component.options.responsiveStyles.medium.color': '"green"',
33+
'component.options.responsiveStyles.large.color': '"blue"',
34+
},
35+
},
36+
],
37+
},
38+
};
39+
40+
const result = getStyleStringFromBlock(content.data.blocks[0], options);
41+
42+
// Should contain both media queries
43+
expect(result).toContain('@media (max-width: 1200px)');
44+
expect(result).toContain('@media (max-width: 640px)');
45+
expect(result).toContain('@media (max-width: 991px)');
46+
47+
// Should contain the correct flexDirection bindings
48+
expect(result).toContain(
49+
'flexDirection: state.reverseColumnsWhenStacked && (state.stackColumnsAt === "tablet" || state.stackColumnsAt === "mobile") ? "column-reverse" : undefined',
50+
);
51+
52+
const mitosis = builderContentToMitosisComponent(content);
53+
54+
expect(mitosis.children[0].bindings).toMatchInlineSnapshot(`
55+
{
56+
"responsiveStyles.large.color": {
57+
"bindingType": "expression",
58+
"code": "\\"blue\\"",
59+
"type": "single",
60+
},
61+
"responsiveStyles.medium.color": {
62+
"bindingType": "expression",
63+
"code": "\\"green\\"",
64+
"type": "single",
65+
},
66+
"responsiveStyles.medium.flexDirection": {
67+
"bindingType": "expression",
68+
"code": "state.reverseColumnsWhenStacked && (state.stackColumnsAt === \\"tablet\\" || state.stackColumnsAt === \\"mobile\\") ? \\"column-reverse\\" : undefined",
69+
"type": "single",
70+
},
71+
"responsiveStyles.small.color": {
72+
"bindingType": "expression",
73+
"code": "\\"red\\"",
74+
"type": "single",
75+
},
76+
"style": {
77+
"bindingType": "expression",
78+
"code": "{ fontSize: state.fontSize, background: \\"red\\", \\"@media (max-width: 640px)\\": { left: state.left, top: state.top, color: \\"red\\" }, \\"@media (max-width: 1200px)\\": { color: \\"blue\\", background: \\"green\\" }, \\"@media (max-width: 991px)\\": { flexDirection: state.reverseColumnsWhenStacked && (state.stackColumnsAt === \\"tablet\\" || state.stackColumnsAt === \\"mobile\\") ? \\"column-reverse\\" : undefined, color: \\"green\\" }, }",
79+
"type": "single",
80+
},
81+
}
82+
`);
83+
84+
const jsx = componentToMitosis()({ component: mitosis });
85+
86+
expect(jsx).toMatchInlineSnapshot(`
87+
"export default function MyComponent(props) {
88+
return (
89+
<div
90+
style={{
91+
fontSize: state.fontSize,
92+
background: \\"red\\",
93+
\\"@media (max-width: 640px)\\": {
94+
left: state.left,
95+
top: state.top,
96+
color: \\"red\\",
97+
},
98+
\\"@media (max-width: 1200px)\\": {
99+
color: \\"blue\\",
100+
background: \\"green\\",
101+
},
102+
\\"@media (max-width: 991px)\\": {
103+
flexDirection:
104+
state.reverseColumnsWhenStacked &&
105+
(state.stackColumnsAt === \\"tablet\\" ||
106+
state.stackColumnsAt === \\"mobile\\")
107+
? \\"column-reverse\\"
108+
: undefined,
109+
color: \\"green\\",
110+
},
111+
}}
112+
/>
113+
);
114+
}
115+
"
116+
`);
117+
118+
const json = componentToBuilder()({ component: mitosis });
119+
expect(json).toMatchInlineSnapshot(`
120+
{
121+
"data": {
122+
"blocks": [
123+
{
124+
"@type": "@builder.io/sdk:Element",
125+
"actions": {},
126+
"bindings": {
127+
"responsiveStyles.large.background": "\\"green\\"",
128+
"responsiveStyles.large.color": "\\"blue\\"",
129+
"responsiveStyles.medium.color": "\\"green\\"",
130+
"responsiveStyles.medium.flexDirection": "state.reverseColumnsWhenStacked && (state.stackColumnsAt === \\"tablet\\" || state.stackColumnsAt === \\"mobile\\") ? \\"column-reverse\\" : undefined",
131+
"responsiveStyles.small.color": "\\"red\\"",
132+
"responsiveStyles.small.left": "state.left",
133+
"responsiveStyles.small.top": "state.top",
134+
"style.background": "\\"red\\"",
135+
"style.fontSize": "state.fontSize",
136+
},
137+
"children": [],
138+
"code": {
139+
"actions": {},
140+
"bindings": {},
141+
},
142+
"properties": {},
143+
"tagName": "div",
144+
},
145+
],
146+
"jsCode": "",
147+
"tsCode": "",
148+
},
149+
}
150+
`);
151+
});
152+
});

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,10 @@ const getActionBindingsFromBlock = (
106106
return bindings;
107107
};
108108

109-
const getStyleStringFromBlock = (block: BuilderElement, options: BuilderToMitosisOptions) => {
109+
export const getStyleStringFromBlock = (
110+
block: BuilderElement,
111+
options: BuilderToMitosisOptions,
112+
) => {
110113
const styleBindings: any = {};
111114
const responsiveStyles: Record<string, Record<string, string>> = {};
112115
let styleString = '';
@@ -143,7 +146,10 @@ const getStyleStringFromBlock = (block: BuilderElement, options: BuilderToMitosi
143146
* }
144147
*/
145148
} else if (key.includes('responsiveStyles')) {
146-
const [_, size, prop] = key.split('.');
149+
const parts = key.split('.');
150+
const size = parts[parts.length - 2];
151+
const prop = parts[parts.length - 1];
152+
147153
const mediaKey = `@media (max-width: ${sizes[size as Size].max}px)`;
148154

149155
/**

0 commit comments

Comments
 (0)