Skip to content

Commit 720e30b

Browse files
NKoech123NKoech123
authored
Add symbol name serialization and inputs to level props (#1787)
* add symbol name serialization and inputs to level props * handle converting symbol components back to Symbol for Builder * add round trip testing * removed unnecessary comments * add comments about What symbolData contains: It's extracted from symbol.options.data and contains key-value pairs for props passed to the symbol instance in Builder.io * remove comments and enable snapshot test * sanitizeSymbolName always returns * add type user-symbol to identify user symbol * add changeset * user-symbol type change
1 parent 993fd9e commit 720e30b

File tree

13 files changed

+678
-26
lines changed

13 files changed

+678
-26
lines changed

‎.changeset/chilled-seahorses-search.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@builder.io/mitosis': minor
3+
---
4+
5+
add symbol name serialization to enable symbols to work well with editor-ai

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10145,7 +10145,7 @@ exports[`qwik > page-with-symbol 1`] = `
1014510145
});
1014610146
};
1014710147
",
10148-
"low.js": "import { Symbol1 } from \\"./med.js\\";
10148+
"low.js": "import { SymbolHeaderSymbol } from \\"./med.js\\";
1014910149

1015010150
import {
1015110151
Fragment,
@@ -10178,7 +10178,7 @@ export const MyComponentOnMount = (p) => {
1017810178
return h(
1017910179
Fragment,
1018010180
null,
10181-
h(Symbol1, {
10181+
h(SymbolHeaderSymbol, {
1018210182
class: \\"c713ty2\\",
1018310183
symbol: {
1018410184
model: \\"page\\",

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

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4925,3 +4925,220 @@ function MyComponent(props) {
49254925
export default MyComponent;
49264926
"
49274927
`;
4928+
4929+
exports[`Symbol Serialization > Multiple symbols with different names 1`] = `
4930+
[
4931+
{
4932+
"bindings": {
4933+
"symbol": {
4934+
"bindingType": "expression",
4935+
"code": "{\\"entry\\":\\"2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e\\",\\"model\\":\\"symbol\\",\\"ownerId\\":\\"99d964b716f94737a50de4d76134d098\\"}",
4936+
"type": "single",
4937+
},
4938+
"text": {
4939+
"bindingType": "expression",
4940+
"code": "'Get Started'",
4941+
"type": "single",
4942+
},
4943+
"variant": {
4944+
"bindingType": "expression",
4945+
"code": "'primary'",
4946+
"type": "single",
4947+
},
4948+
},
4949+
"name": "SymbolPrimaryButton",
4950+
},
4951+
{
4952+
"bindings": {
4953+
"symbol": {
4954+
"bindingType": "expression",
4955+
"code": "{\\"entry\\":\\"3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f\\",\\"model\\":\\"symbol\\",\\"ownerId\\":\\"99d964b716f94737a50de4d76134d098\\"}",
4956+
"type": "single",
4957+
},
4958+
"text": {
4959+
"bindingType": "expression",
4960+
"code": "'Learn More'",
4961+
"type": "single",
4962+
},
4963+
"variant": {
4964+
"bindingType": "expression",
4965+
"code": "'secondary'",
4966+
"type": "single",
4967+
},
4968+
},
4969+
"name": "SymbolSecondaryButton",
4970+
},
4971+
{
4972+
"bindings": {
4973+
"copyrightText": {
4974+
"bindingType": "expression",
4975+
"code": "'© 2024 Company Name'",
4976+
"type": "single",
4977+
},
4978+
"showSocialLinks": {
4979+
"bindingType": "expression",
4980+
"code": "true",
4981+
"type": "single",
4982+
},
4983+
"symbol": {
4984+
"bindingType": "expression",
4985+
"code": "{\\"entry\\":\\"4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a\\",\\"model\\":\\"symbol\\",\\"ownerId\\":\\"99d964b716f94737a50de4d76134d098\\"}",
4986+
"type": "single",
4987+
},
4988+
},
4989+
"name": "SymbolFooterSection",
4990+
},
4991+
]
4992+
`;
4993+
4994+
exports[`Symbol Serialization > Multiple symbols with different names 2`] = `
4995+
"import {
4996+
SymbolPrimaryButton,
4997+
SymbolSecondaryButton,
4998+
SymbolFooterSection,
4999+
} from \\"@components\\";
5000+
5001+
export default function MyComponent(props) {
5002+
return (
5003+
<>
5004+
<SymbolPrimaryButton
5005+
symbol={{
5006+
entry: \\"2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e\\",
5007+
model: \\"symbol\\",
5008+
ownerId: \\"99d964b716f94737a50de4d76134d098\\",
5009+
}}
5010+
text={\\"Get Started\\"}
5011+
variant={\\"primary\\"}
5012+
/>
5013+
<SymbolSecondaryButton
5014+
symbol={{
5015+
entry: \\"3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f\\",
5016+
model: \\"symbol\\",
5017+
ownerId: \\"99d964b716f94737a50de4d76134d098\\",
5018+
}}
5019+
text={\\"Learn More\\"}
5020+
variant={\\"secondary\\"}
5021+
/>
5022+
<SymbolFooterSection
5023+
symbol={{
5024+
entry: \\"4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a\\",
5025+
model: \\"symbol\\",
5026+
ownerId: \\"99d964b716f94737a50de4d76134d098\\",
5027+
}}
5028+
copyrightText={\\"© 2024 Company Name\\"}
5029+
showSocialLinks={true}
5030+
/>
5031+
</>
5032+
);
5033+
}
5034+
"
5035+
`;
5036+
5037+
exports[`Symbol Serialization > Symbol with basic metadata 1`] = `
5038+
"import { SymbolBasicSymbol } from \\"@components\\";
5039+
5040+
export default function MyComponent(props) {
5041+
return (
5042+
<SymbolBasicSymbol
5043+
symbol={{
5044+
entry: \\"5a009380a7274b1388f8f1e500d2e28a\\",
5045+
model: \\"symbol\\",
5046+
ownerId: \\"99d964b716f94737a50de4d76134d098\\",
5047+
}}
5048+
/>
5049+
);
5050+
}
5051+
"
5052+
`;
5053+
5054+
exports[`Symbol Serialization > Symbol with entry name 1`] = `
5055+
"import { SymbolHeaderNavigation } from \\"@components\\";
5056+
5057+
export default function MyComponent(props) {
5058+
return (
5059+
<SymbolHeaderNavigation
5060+
symbol={{
5061+
entry: \\"1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d\\",
5062+
model: \\"symbol\\",
5063+
ownerId: \\"99d964b716f94737a50de4d76134d098\\",
5064+
}}
5065+
logoUrl={\\"/logo.png\\"}
5066+
showSearch={true}
5067+
menuItems={[
5068+
{
5069+
label: \\"Home\\",
5070+
url: \\"/\\",
5071+
},
5072+
{
5073+
label: \\"About\\",
5074+
url: \\"/about\\",
5075+
},
5076+
]}
5077+
/>
5078+
);
5079+
}
5080+
"
5081+
`;
5082+
5083+
exports[`Symbol Serialization > Symbol with inputs as top-level props 1`] = `
5084+
{
5085+
"bindings": {
5086+
"buttonText": {
5087+
"bindingType": "expression",
5088+
"code": "'Click me!'",
5089+
"type": "single",
5090+
},
5091+
"config": {
5092+
"bindingType": "expression",
5093+
"code": "{showIcon:true,iconPosition:'left'}",
5094+
"type": "single",
5095+
},
5096+
"count": {
5097+
"bindingType": "expression",
5098+
"code": "42",
5099+
"type": "single",
5100+
},
5101+
"isDisabled": {
5102+
"bindingType": "expression",
5103+
"code": "false",
5104+
"type": "single",
5105+
},
5106+
"symbol": {
5107+
"bindingType": "expression",
5108+
"code": "{\\"entry\\":\\"7b8c9d0e1a2b3c4d5e6f7a8b9c0d1e2f\\",\\"model\\":\\"symbol\\",\\"ownerId\\":\\"99d964b716f94737a50de4d76134d098\\"}",
5109+
"type": "single",
5110+
},
5111+
"variant": {
5112+
"bindingType": "expression",
5113+
"code": "'primary'",
5114+
"type": "single",
5115+
},
5116+
},
5117+
"name": "SymbolButtonComponent",
5118+
}
5119+
`;
5120+
5121+
exports[`Symbol Serialization > Symbol with inputs as top-level props 2`] = `
5122+
"import { SymbolButtonComponent } from \\"@components\\";
5123+
5124+
export default function MyComponent(props) {
5125+
return (
5126+
<SymbolButtonComponent
5127+
symbol={{
5128+
entry: \\"7b8c9d0e1a2b3c4d5e6f7a8b9c0d1e2f\\",
5129+
model: \\"symbol\\",
5130+
ownerId: \\"99d964b716f94737a50de4d76134d098\\",
5131+
}}
5132+
buttonText={\\"Click me!\\"}
5133+
variant={\\"primary\\"}
5134+
isDisabled={false}
5135+
count={42}
5136+
config={{
5137+
showIcon: true,
5138+
iconPosition: \\"left\\",
5139+
}}
5140+
/>
5141+
);
5142+
}
5143+
"
5144+
`;

0 commit comments

Comments
 (0)