fix builder<->mitosis bindings (#1533)

* test reproducing binding issue this output should include the binding * fix * bindings fixes * changeset
BuilderIO · Aug 22, 2024 · 7d8f4ff · 7d8f4ff
1 parent 5d78497
commit 7d8f4ff
Show file tree

Hide file tree

Showing 6 changed files with 266 additions and 79 deletions.
diff --git a/.changeset/short-seahorses-build.md b/.changeset/short-seahorses-build.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': minor
+---
+
+Correct support bindings netween Builder and Mitosis, including useStore() hook
diff --git a/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap
@@ -108,7 +108,7 @@ Object.assign(state, {
 ",
  "tsCode": "var props = state;
 
-useState({
+useStore({
  getColumns() {
  return props.columns || [];
  },
@@ -264,7 +264,7 @@ state.findAndRunScripts();
 ",
  "tsCode": "var props = state;
 
-useState({
+useStore({
  scriptsInserted: [],
  scriptsRun: [],
  findAndRunScripts() {
@@ -461,7 +461,7 @@ state.findAndRunScripts();
 ",
  "tsCode": "var props = state;
 
-useState({
+useStore({
  scriptsInserted: [],
  scriptsRun: [],
  findAndRunScripts() {
@@ -721,7 +721,7 @@ if (state.useLazyLoading()) {
 ",
  "tsCode": "var props = state;
 
-useState({
+useStore({
  scrollListener: null,
  imageLoaded: false,
  setLoaded() {
@@ -1516,7 +1516,7 @@ fetch(
 ",
  "tsCode": "var props = state;
 
-useState({
+useStore({
  reviews: [],
  name: \\"test\\",
  showReviewPrompt: false,
@@ -1877,14 +1877,11 @@ export default MyComponent;
 
 exports[`Builder > extractStateHook 1`] = `
 {
- "code": "alert('hi');",
- "state": {
- "foo": {
- "code": "'bar'",
- "propertyType": "normal",
- "type": "property",
- },
- },
+ "code": "useState({
+ foo: 'bar'
+});
+alert('hi');",
+ "state": {},
 }
 `;
 
@@ -2066,3 +2063,121 @@ function MyComponent(props) {
 export default MyComponent;
 "
 `;
+
+exports[`builder > binding 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "label": {
+ "code": "state.text",
+ "type": "single",
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "Button",
+ "properties": {
+ "$tagName": undefined,
+ "label": "hello",
+ },
+ "scope": {},
+ "slots": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "css": {
+ "code": "{backgroundColor:'rgba(0, 0, 0, 1)',display:'flex',paddingLeft:'72px',paddingRight:'72px',paddingTop:'25px',paddingBottom:'25px',alignItems:'start',gap:'10px',fontFamily:'Poppins, -apple-system, Roboto, Helvetica, sans-serif',fontSize:'16px',color:'rgba(255, 255, 255, 1)',fontWeight:'700',textTransform:'uppercase',justifyContent:'start'}",
+ "type": "single",
+ },
+ },
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "_text": {
+ "code": "state.text",
+ "type": "single",
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "div",
+ "properties": {
+ "$name": "Book an Appointment",
+ },
+ "scope": {},
+ "slots": {},
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "exports": {},
+ "hooks": {
+ "onEvent": [],
+ "onMount": [],
+ },
+ "imports": [],
+ "inputs": [
+ {
+ "defaultValue": "Hello",
+ "name": "text",
+ },
+ ],
+ "meta": {
+ "cssCode": "builder-component { max-width: none !important; }",
+ "useMetadata": {
+ "httpRequests": undefined,
+ },
+ },
+ "name": "MyComponent",
+ "refs": {},
+ "state": {},
+ "subComponents": [],
+}
+`;
+
+exports[`builder > binding 2`] = `
+"import { Button } from \\"@components\\";
+
+export default function MyComponent(props) {
+ return (
+ <>
+ <Button label=\\"hello\\" label={state.text} />
+ <div
+ $name=\\"Book an Appointment\\"
+ css={{
+ backgroundColor: \\"rgba(0, 0, 0, 1)\\",
+ display: \\"flex\\",
+ paddingLeft: \\"72px\\",
+ paddingRight: \\"72px\\",
+ paddingTop: \\"25px\\",
+ paddingBottom: \\"25px\\",
+ alignItems: \\"start\\",
+ gap: \\"10px\\",
+ fontFamily: \\"Poppins, -apple-system, Roboto, Helvetica, sans-serif\\",
+ fontSize: \\"16px\\",
+ color: \\"rgba(255, 255, 255, 1)\\",
+ fontWeight: \\"700\\",
+ textTransform: \\"uppercase\\",
+ justifyContent: \\"start\\",
+ }}
+ >
+ {state.text}
+ </div>
+ </>
+ );
+}
+"
+`;
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -397,14 +397,7 @@ export const MyComponentOnMount = (p) => {
  <div
  key=\\"builder-927e0013cb8142a9bd46a4f3811d0865\\"
  class=\\"builder-text\\"
- dangerouslySetInnerHTML={(() => {
- try {
- var _virtual_index = state.resultsItem.data.title;
- return _virtual_index;
- } catch (err) {
- console.warn(\\"Builder code error\\", err);
- }
- })()}
+ dangerouslySetInnerHTML={state.resultsItem.data.title}
  ></div>
  </div>
  );
@@ -558,14 +551,7 @@ export const MyComponentOnMount = (p) => {
  h(\\"div\\", {
  key: \\"builder-1072afed47764e7cb37d088fd66f3a67\\",
  class: \\"builder-text\\",
- dangerouslySetInnerHTML: (() => {
- try {
- var _virtual_index = state.myState;
- return _virtual_index;
- } catch (err) {
- console.warn(\\"Builder code error\\", err);
- }
- })(),
+ dangerouslySetInnerHTML: state.myState,
  })
  )
  );
@@ -795,14 +781,7 @@ export const MyComponentOnMount = (p) => {
  h(\\"div\\", {
  key: \\"builder-1072afed47764e7cb37d088fd66f3a67\\",
  class: \\"builder-text\\",
- dangerouslySetInnerHTML: (() => {
- try {
- var _virtual_index = state.myState;
- return _virtual_index;
- } catch (err) {
- console.warn(\\"Builder code error\\", err);
- }
- })(),
+ dangerouslySetInnerHTML: state.myState,
  })
  )
  );
@@ -995,14 +974,7 @@ exports.MyComponentOnMount = (p) => {
  h(\\"div\\", {
  key: \\"builder-192569f8d0a943398ec7ab9c327e104f\\",
  class: \\"builder-text\\",
- dangerouslySetInnerHTML: (() => {
- try {
- var _virtual_index = state.title;
- return _virtual_index;
- } catch (err) {
- console.warn(\\"Builder code error\\", err);
- }
- })(),
+ dangerouslySetInnerHTML: state.title,
  })
  );
 };
@@ -1258,14 +1230,7 @@ export const ComponentD187055AF171488FAD843ACF045D6BF7OnMount = (p) => {
  <div
  key=\\"builder-2ae3b4104cc0478e85eff49694792d9c\\"
  class=\\"builder-text\\"
- dangerouslySetInnerHTML={(() => {
- try {
- var _virtual_index = state.title;
- return _virtual_index;
- } catch (err) {
- console.warn(\\"Builder code error\\", err);
- }
- })()}
+ dangerouslySetInnerHTML={state.title}
  ></div>
  </div>
  </div>
@@ -1478,14 +1443,7 @@ exports.MyComponentOnMount = (p) => {
  <div
  key=\\"builder-71f26e4ffffe4e24940aa12e5250fa5f\\"
  class=\\"builder-text\\"
- dangerouslySetInnerHTML={(() => {
- try {
- var _virtual_index = state.data;
- return _virtual_index;
- } catch (err) {
- console.warn(\\"Builder code error\\", err);
- }
- })()}
+ dangerouslySetInnerHTML={state.data}
  ></div>
  </div>
  <CoreButton
@@ -8788,14 +8746,7 @@ exports.MyComponentOnMount = (p) => {
  h(\\"div\\", {
  key: \\"builder-192569f8d0a943398ec7ab9c327e104f\\",
  class: \\"builder-text\\",
- dangerouslySetInnerHTML: (() => {
- try {
- var _virtual_index = state.title;
- return _virtual_index;
- } catch (err) {
- console.warn(\\"Builder code error\\", err);
- }
- })(),
+ dangerouslySetInnerHTML: state.title,
  })
  );
 };