fix: React generator

.changeset/small-garlics-flash.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[React] Refactor: consolidate bindings processing into code processor plugin.

.gitignore

@@ -1,34 +1,7 @@
-node_modules
-dist
-*.log
-.vscode/**
-!.vscode/extensions.json
-!.vscode/settings.json
-.idea
-coverage
-.DS_Store
-*.tsbuildinfo
-.cache
-fiddle/build/
-packages/core/mitosis-build
-.history
-.pnp.*
-.eslintcache
-
-# ignore everything in .yarn folder, except the .yarn/patches and the .yarn/versions subfolders
-.yarn/*
-!/.yarn/patches
-!/.yarn/versions
-!/.yarn/releases
-
-# sveltekit tmp files
-**/package/__package_types_tmp__/
-
-**/test-results/
-**/playwright-report/
-
-packages/core/src/__tests__/__snapshots__/local.test.ts.snap
-
-.nx/cache
-.nx-cache
-.nx/workspace-data
+/nbproject/
+/.idea/*
+*.tmlanguage.cache
+*.tmPreferences.cache
+*.stTheme.cache
+*.sublime-workspace
+*.sublime-project

packages/cli/src/__tests__/__snapshots__/cli-integration.test.ts.snap

@@ -364,10 +364,7 @@ function MyComponent(props) {
             lineHeight: \\"normal\\",
             width: \\"33%\\",
             marginLeft: \\"0px\\",
-            \\"@media (max-width: 991px)\\": {
-              width: \\"100%\\",
-              marginLeft: 0,
-            },
+            \\"@media (max-width: 991px)\\": { width: \\"100%\\", marginLeft: 0 },
           }}
         >
           <img
@@ -462,10 +459,7 @@ function MyComponent(props) {
             lineHeight: \\"normal\\",
             width: \\"33%\\",
             marginLeft: \\"20px\\",
-            \\"@media (max-width: 991px)\\": {
-              width: \\"100%\\",
-              marginLeft: 0,
-            },
+            \\"@media (max-width: 991px)\\": { width: \\"100%\\", marginLeft: 0 },
           }}
         >
           <img
@@ -570,10 +564,7 @@ function MyComponent(props) {
             lineHeight: \\"normal\\",
             width: \\"33%\\",
             marginLeft: \\"20px\\",
-            \\"@media (max-width: 991px)\\": {
-              width: \\"100%\\",
-              marginLeft: 0,
-            },
+            \\"@media (max-width: 991px)\\": { width: \\"100%\\", marginLeft: 0 },
           }}
         >
           <img

packages/core/src/__tests__/__snapshots__/context.test.ts.snap

@@ -578,15 +578,10 @@ function ComponentWithContext(props) {
   const foo = useContext(Context1);
 
   return (
-    <Context2.Provider
-      value={{
-        bar: \\"baz\\",
-      }}
-    >
+    <Context2.Provider value={{ bar: \\"baz\\" }}>
       <Context1.Provider
         value={{
           foo: \\"bar\\",
-
           content() {
             return props.content;
           },
@@ -625,15 +620,10 @@ function ComponentWithContext(props) {
   const foo = useContext(Context1);
 
   return (
-    <Context2.Provider
-      value={{
-        bar: \\"baz\\",
-      }}
-    >
+    <Context2.Provider value={{ bar: \\"baz\\" }}>
       <Context1.Provider
         value={{
           foo: \\"bar\\",
-
           content() {
             return props.content;
           },

packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap

@@ -15215,15 +15215,10 @@ function ComponentWithContext(props) {
   const foo = useContext(Context1);
 
   return (
-    <Context2.Provider
-      value={{
-        bar: \\"baz\\",
-      }}
-    >
+    <Context2.Provider value={{ bar: \\"baz\\" }}>
       <Context1.Provider
         value={{
           foo: \\"bar\\",
-
           content() {
             return props.content;
           },
@@ -15250,15 +15245,10 @@ function ComponentWithContext(props) {
   const foo = useContext(Context1);
 
   return (
-    <Context2.Provider
-      value={{
-        bar: \\"baz\\",
-      }}
-    >
+    <Context2.Provider value={{ bar: \\"baz\\" }}>
       <Context1.Provider
         value={{
           foo: \\"bar\\",
-
           content() {
             return props.content;
           },
@@ -15457,7 +15447,7 @@ function RenderContent(props) {
 
   return (
     <RenderBlock
-      {...state.getRenderContentProps(props.renderContentProps.block, 0)}
+      {...getRenderContentProps(props.renderContentProps.block, 0)}
     />
   );
 }
@@ -15532,7 +15522,7 @@ function MyBasicComponent(props) {
     hello: \\"world\\",
   }));
 
-  return <input {...state.attrs} {...props} />;
+  return <input {...attrs} {...props} />;
 }
 
 export default MyBasicComponent;
@@ -16188,7 +16178,6 @@ function RenderContent(props) {
         get content() {
           return 3;
         },
-
         get registeredComponents() {
           return 4;
         },
@@ -18615,15 +18604,10 @@ function ComponentWithContext(props) {
   const foo = useContext(Context1);
 
   return (
-    <Context2.Provider
-      value={{
-        bar: \\"baz\\",
-      }}
-    >
+    <Context2.Provider value={{ bar: \\"baz\\" }}>
       <Context1.Provider
         value={{
           foo: \\"bar\\",
-
           content() {
             return props.content;
           },
@@ -18650,15 +18634,10 @@ function ComponentWithContext(props) {
   const foo = useContext(Context1);
 
   return (
-    <Context2.Provider
-      value={{
-        bar: \\"baz\\",
-      }}
-    >
+    <Context2.Provider value={{ bar: \\"baz\\" }}>
       <Context1.Provider
         value={{
           foo: \\"bar\\",
-
           content() {
             return props.content;
           },
@@ -18858,7 +18837,7 @@ function RenderContent(props) {
 
   return (
     <RenderBlock
-      {...state.getRenderContentProps(props.renderContentProps.block, 0)}
+      {...getRenderContentProps(props.renderContentProps.block, 0)}
     />
   );
 }
@@ -18933,7 +18912,7 @@ function MyBasicComponent(props) {
     hello: \\"world\\",
   }));
 
-  return <input {...state.attrs} {...props} />;
+  return <input {...attrs} {...props} />;
 }
 
 export default MyBasicComponent;
@@ -19597,7 +19576,6 @@ function RenderContent(props) {
         get content() {
           return 3;
         },
-
         get registeredComponents() {
           return 4;
         },
@@ -20283,7 +20261,7 @@ exports[`Mitosis, format: react > svelte > Javascript Test > context 1`] = `
 "'>' expected. (35:13)
   33 | return (
   34 |
-> 35 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+> 35 | <'activeTab'.Provider  value={state.activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
   36 |
   37 |
@@ -20686,7 +20664,7 @@ exports[`Mitosis, format: react > svelte > Typescript Test > context 1`] = `
 "'>' expected. (35:13)
   33 | return (
   34 |
-> 35 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+> 35 | <'activeTab'.Provider  value={state.activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
   36 |
   37 |

packages/core/src/__tests__/__snapshots__/preact.test.ts.snap

@@ -1844,15 +1844,10 @@ function ComponentWithContext(props) {
   const foo = useContext(Context1);
 
   return (
-    <Context2.Provider
-      value={{
-        bar: \\"baz\\",
-      }}
-    >
+    <Context2.Provider value={{ bar: \\"baz\\" }}>
       <Context1.Provider
         value={{
           foo: \\"bar\\",
-
           content() {
             return props.content;
           },
@@ -1879,15 +1874,10 @@ function ComponentWithContext(props) {
   const foo = useContext(Context1);
 
   return (
-    <Context2.Provider
-      value={{
-        bar: \\"baz\\",
-      }}
-    >
+    <Context2.Provider value={{ bar: \\"baz\\" }}>
       <Context1.Provider
         value={{
           foo: \\"bar\\",
-
           content() {
             return props.content;
           },
@@ -2089,7 +2079,7 @@ function RenderContent(props) {
 
   return (
     <RenderBlock
-      {...state.getRenderContentProps(props.renderContentProps.block, 0)}
+      {...getRenderContentProps(props.renderContentProps.block, 0)}
     />
   );
 }
@@ -2164,7 +2154,7 @@ function MyBasicComponent(props) {
     hello: \\"world\\",
   }));
 
-  return <input {...state.attrs} {...props} />;
+  return <input {...attrs} {...props} />;
 }
 
 export default MyBasicComponent;
@@ -2831,7 +2821,6 @@ function RenderContent(props) {
           get content() {
             return 3;
           },
-
           get registeredComponents() {
             return 4;
           },
@@ -5596,15 +5585,10 @@ function ComponentWithContext(props: ComponentWithContextProps) {
   const foo = useContext(Context1);
 
   return (
-    <Context2.Provider
-      value={{
-        bar: \\"baz\\",
-      }}
-    >
+    <Context2.Provider value={{ bar: \\"baz\\" }}>
       <Context1.Provider
         value={{
           foo: \\"bar\\",
-
           content() {
             return props.content;
           },
@@ -5636,15 +5620,10 @@ function ComponentWithContext(props: ComponentWithContextProps) {
   const foo = useContext(Context1);
 
   return (
-    <Context2.Provider
-      value={{
-        bar: \\"baz\\",
-      }}
-    >
+    <Context2.Provider value={{ bar: \\"baz\\" }}>
       <Context1.Provider
         value={{
           foo: \\"bar\\",
-
           content() {
             return props.content;
           },
@@ -5879,7 +5858,7 @@ function RenderContent(props: RenderContentProps) {
 
   return (
     <RenderBlock
-      {...state.getRenderContentProps(props.renderContentProps.block, 0)}
+      {...getRenderContentProps(props.renderContentProps.block, 0)}
     />
   );
 }
@@ -5954,7 +5933,7 @@ function MyBasicComponent(props: any) {
     hello: \\"world\\",
   }));
 
-  return <input {...state.attrs} {...props} />;
+  return <input {...attrs} {...props} />;
 }
 
 export default MyBasicComponent;
@@ -6693,7 +6672,6 @@ function RenderContent(props: Props) {
           get content() {
             return 3;
           },
-
           get registeredComponents() {
             return 4;
           },
@@ -7511,7 +7489,7 @@ exports[`Preact > svelte > Javascript Test > context 1`] = `
 "'>' expected. (36:13)
   34 | return (
   35 |
-> 36 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+> 36 | <'activeTab'.Provider  value={state.activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
   37 |
   38 |
@@ -7915,7 +7893,7 @@ exports[`Preact > svelte > Typescript Test > context 1`] = `
 "'>' expected. (36:13)
   34 | return (
   35 |
-> 36 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+> 36 | <'activeTab'.Provider  value={state.activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
   37 |
   38 |