diff --git a/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap
index 100a1f41b5..2c9a83cafb 100644
--- a/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap
@@ -903,9 +903,11 @@ exports[`Builder > Regenerate custom Hero 1`] = `
   boxSizing: \\"border-box\\",
   marginTop: \\"200px\\"
 }",
+          "type": "single",
         },
         "height": {
           "code": "400",
+          "type": "single",
         },
       },
       "children": [],
diff --git a/packages/core/src/__tests__/__snapshots__/context.test.ts.snap b/packages/core/src/__tests__/__snapshots__/context.test.ts.snap
index 5c97bb8503..e129652576 100644
--- a/packages/core/src/__tests__/__snapshots__/context.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/context.test.ts.snap
@@ -104,10 +104,12 @@ exports[`Context > Use and set context in complex components 1`] = `
           "bindings": {
             "state.properties": {
               "code": "state.properties",
+              "spreadType": "normal",
               "type": "spread",
             },
             "style": {
               "code": "state.css",
+              "type": "single",
             },
           },
           "children": [
@@ -128,6 +130,7 @@ exports[`Context > Use and set context in complex components 1`] = `
               "bindings": {
                 "block": {
                   "code": "state.useBlock",
+                  "type": "single",
                 },
               },
               "children": [],
@@ -153,6 +156,7 @@ exports[`Context > Use and set context in complex components 1`] = `
               "bindings": {
                 "when": {
                   "code": "state.componentRef",
+                  "type": "single",
                 },
               },
               "children": [
@@ -161,9 +165,11 @@ exports[`Context > Use and set context in complex components 1`] = `
                   "bindings": {
                     "children": {
                       "code": "state.useBlock.children",
+                      "type": "single",
                     },
                     "state.componentOptions": {
                       "code": "state.componentOptions",
+                      "spreadType": "normal",
                       "type": "spread",
                     },
                   },
@@ -196,6 +202,7 @@ exports[`Context > Use and set context in complex components 1`] = `
               "bindings": {
                 "when": {
                   "code": "!state.componentRef && state.useBlock.children && state.useBlock.children.length",
+                  "type": "single",
                 },
               },
               "children": [
@@ -216,6 +223,7 @@ exports[`Context > Use and set context in complex components 1`] = `
                   "bindings": {
                     "each": {
                       "code": "state.useBlock.children",
+                      "type": "single",
                     },
                   },
                   "children": [
@@ -224,9 +232,11 @@ exports[`Context > Use and set context in complex components 1`] = `
                       "bindings": {
                         "block": {
                           "code": "child",
+                          "type": "single",
                         },
                         "index": {
                           "code": "index",
+                          "type": "single",
                         },
                       },
                       "children": [],
@@ -607,6 +617,7 @@ exports[`Context > Use and set context in components 1`] = `
               "bindings": {
                 "_text": {
                   "code": "foo.value",
+                  "type": "single",
                 },
               },
               "children": [],
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index 08dd29ddb0..f02bce07f0 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -85,14 +85,14 @@ exports[`Marko > jsx > Javascript Test > AdvancedRef 1`] = `
 }
 
 style { 
-  .input-4a4b9003 {
+  .input-790d468a {
     color: red;
   }
 }
 <div>
   <if(input.showInput)>
     <input
-      class=\\"input-4a4b9003\\"
+      class=\\"input-790d468a\\"
       key=\\"inputRef\\"
       value=(state.name)
       on-blur(event => component.onBlur())
@@ -129,11 +129,11 @@ class {
 }
 
 style { 
-  .div-6f8bbe5f {
+  .div-48c79144 {
     padding: 10px;
   }
 }
-<div class=\\"test div-6f8bbe5f\\">
+<div class=\\"test div-48c79144\\">
   <input
     value=(DEFAULT_VALUES.name || state.name)
     on-input(myEvent => state.name = myEvent.target.value)
@@ -331,14 +331,14 @@ exports[`Marko > jsx > Javascript Test > BasicRef 1`] = `
 }
 
 style { 
-  .input-37a1283e {
+  .input-cbb647ea {
     color: red;
   }
 }
 <div>
   <if(input.showInput)>
     <input
-      class=\\"input-37a1283e\\"
+      class=\\"input-cbb647ea\\"
       key=\\"inputRef\\"
       value=(state.name)
       on-blur(event => component.onBlur())
@@ -443,29 +443,29 @@ exports[`Marko > jsx > Javascript Test > Columns 1`] = `
 }
 
 style { 
-  .div-8dfe73ba {
+  .div-f5d75200 {
     display: flex;
     flex-direction: column;
     align-items: stretch;
     line-height: normal;
   }
   @media (max-width: 999px) {
-    .div-8dfe73ba {
+    .div-f5d75200 {
       flex-direction: row;
     }
   }
   @media (max-width: 639px) {
-    .div-8dfe73ba {
+    .div-f5d75200 {
       flex-direction: row-reverse;
     }
   }
-  .div-8dfe73ba-2 {
+  .div-f5d75200-2 {
     flex-grow: 1;
   }
 }
-<div class=\\"builder-columns div-8dfe73ba\\">
+<div class=\\"builder-columns div-f5d75200\\">
   <for|column,index| of=(input.columns)>
-    <div class=\\"builder-column div-8dfe73ba-2\\">\${column.content} \${index}</div>
+    <div class=\\"builder-column div-f5d75200-2\\">\${column.content} \${index}</div>
   </for>
 </div>"
 `;
@@ -872,7 +872,7 @@ class {
 }
 
 style { 
-  .pre-2a3c5c5a {
+  .pre-37eea1bf {
     padding: 10px;
     color: red;
     text-align: center;
@@ -907,7 +907,7 @@ style {
     ></BuilderBlocks></if>
 
   <if(component.submissionState === 'error' && state.responseData)>
-    <pre class=\\"builder-form-error-text pre-2a3c5c5a\\">
+    <pre class=\\"builder-form-error-text pre-37eea1bf\\">
           
 \${JSON.stringify(state.responseData, null, 2)}
 
@@ -977,7 +977,7 @@ exports[`Marko > jsx > Javascript Test > Image 1`] = `
 }
 
 style { 
-  .img-a94ec16e {
+  .img-45432c52 {
     opacity: 1;
     transition: opacity 0.2s ease-in-out;
     object-fit: cover;
@@ -990,7 +990,7 @@ style {
       <img
         alt=(input.altText)
         aria-role=(input.altText ? 'presentation' : undefined)
-        class=('builder-image' + (input._class ? ' ' + input._class : '') + ' img-a94ec16e')
+        class=('builder-image' + (input._class ? ' ' + input._class : '') + ' img-45432c52')
         src=(input.image)
         on-load(event => component.setLoaded())
         srcset=(input.srcset)
@@ -1185,16 +1185,16 @@ class {
 }
 
 style { 
-  .input-017045de {
+  .input-c3470f28 {
     display: block;
   }
-  .textarea-017045de {
+  .textarea-c3470f28 {
     display: block;
   }
-  .button-017045de {
+  .button-c3470f28 {
     display: block;
   }
-  .review-017045de {
+  .review-c3470f28 {
     margin: 10px;
     padding: 10px;
     background: white;
@@ -1202,7 +1202,7 @@ style {
     border-radius: 5px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   }
-  .img-017045de {
+  .img-c3470f28 {
     height: 30px;
     width: 30px;
     margin-right: 10px;
@@ -1215,13 +1215,13 @@ style {
 
   <if(state.showReviewPrompt || 'asdf')>
     <input placeholder=\\"Email\\" />
-    <input placeholder=\\"Title\\" class=\\"input-017045de\\" />
+    <input placeholder=\\"Title\\" class=\\"input-c3470f28\\" />
     <textarea
       placeholder=\\"How was your experience?\\"
-      class=\\"textarea-017045de\\"
+      class=\\"textarea-c3470f28\\"
     ></textarea>
     <button
-      class=\\"button-017045de\\"
+      class=\\"button-c3470f28\\"
       on-click(event => {
   event.preventDefault();
   state.showReviewPrompt = false;
@@ -1231,8 +1231,8 @@ style {
     </button></if>
 
   <for|review,index| of=(state.reviews)>
-    <div class=\\"review-017045de\\" key=(review.id)>
-      <img class=\\"img-017045de\\" src=(review.avatar) />
+    <div class=\\"review-c3470f28\\" key=(review.id)>
+      <img class=\\"img-c3470f28\\" src=(review.avatar) />
 
       <div class=(state.showReviewPrompt ? 'bg-primary' : 'bg-secondary')>
         <div>N: \${index}</div>
@@ -1339,13 +1339,13 @@ exports[`Marko > jsx > Javascript Test > basicForwardRef 1`] = `
 }
 
 style { 
-  .input-110b8dfc {
+  .input-014e706f {
     color: red;
   }
 }
 <div>
   <input
-    class=\\"input-110b8dfc\\"
+    class=\\"input-014e706f\\"
     key=\\"propsInputRef\\"
     value=(state.name)
     on-input(event => state.name = event.target.value)
@@ -1365,13 +1365,13 @@ exports[`Marko > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
 }
 
 style { 
-  .input-565a1be8 {
+  .input-53a59b24 {
     color: red;
   }
 }
 <div>
   <input
-    class=\\"input-565a1be8\\"
+    class=\\"input-53a59b24\\"
     key=\\"propsInputRef\\"
     value=(state.name)
     on-input(event => state.name = event.target.value)
@@ -1410,11 +1410,11 @@ exports[`Marko > jsx > Javascript Test > class + ClassName + css 1`] = `
 "class {}
 
 style { 
-  .div-45c59d97 {
+  .div-240d4a4d {
     padding: 10px;
   }
 }
-<div class=\\"test2 test div-45c59d97\\">
+<div class=\\"test2 test div-240d4a4d\\">
   Hello! I can run in React, Vue, Solid, or Liquid!
 </div>"
 `;
@@ -1423,11 +1423,11 @@ exports[`Marko > jsx > Javascript Test > class + css 1`] = `
 "class {}
 
 style { 
-  .div-74a0302e {
+  .div-210be817 {
     padding: 10px;
   }
 }
-<div class=\\"test div-74a0302e\\">
+<div class=\\"test div-210be817\\">
   Hello! I can run in React, Vue, Solid, or Liquid!
 </div>"
 `;
@@ -1436,11 +1436,11 @@ exports[`Marko > jsx > Javascript Test > className + css 1`] = `
 "class {}
 
 style { 
-  .div-74a0302e {
+  .div-210be817 {
     padding: 10px;
   }
 }
-<div class=\\"test div-74a0302e\\">
+<div class=\\"test div-210be817\\">
   Hello! I can run in React, Vue, Solid, or Liquid!
 </div>"
 `;
@@ -1472,11 +1472,11 @@ exports[`Marko > jsx > Javascript Test > classState 1`] = `
 }
 
 style { 
-  .div-25715889 {
+  .div-52624371 {
     padding: 10px;
   }
 }
-<div class=(state.classState + ' div-25715889') style=(state.styleState)>
+<div class=(state.classState + ' div-52624371') style=(state.styleState)>
   Hello! I can run in React, Vue, Solid, or Liquid!
 </div>"
 `;
@@ -1662,23 +1662,23 @@ exports[`Marko > jsx > Javascript Test > nestedStyles 1`] = `
 "class {}
 
 style { 
-  .div-92502f5c {
+  .div-04b41bf9 {
     display: flex;
     foo: var(--bar);
   }
   @media (max-width: env(--mobile)) {
-    .div-92502f5c {
+    .div-04b41bf9 {
       display: block;
     }
   }
-  .div-92502f5c:hover {
+  .div-04b41bf9:hover {
     display: flex;
   }
-  .div-92502f5c .nested-selector {
+  .div-04b41bf9 .nested-selector {
     display: grid;
   }
 }
-<div class=\\"div-92502f5c\\">Hello world</div>"
+<div class=\\"div-04b41bf9\\">Hello world</div>"
 `;
 
 exports[`Marko > jsx > Javascript Test > onInit & onMount 1`] = `
@@ -2064,12 +2064,12 @@ class {
 }
 
 style { 
-  .div-6d1158e4 {
+  .div-c8eb54c0 {
     display: flex;
     flex-direction: columns;
   }
 }
-<div class=\\"div-6d1158e4\\" on-click(event => trackClick(input.content.id))>
+<div class=\\"div-c8eb54c0\\" on-click(event => trackClick(input.content.id))>
   <RenderBlocks blocks=(input.content.blocks)></RenderBlocks>
 </div>"
 `;
@@ -2209,7 +2209,7 @@ exports[`Marko > jsx > Javascript Test > use-style-and-css 1`] = `
 "class {}
 
 style { 
-  .button-625c33fa {
+  .button-0b7811fa {
     background: blue;
     color: white;
   }
@@ -2219,7 +2219,7 @@ style {
     outline: 1px solid black;
   }
 }
-<button type=\\"button\\" class=\\"button-625c33fa\\">Button</button>"
+<button type=\\"button\\" class=\\"button-0b7811fa\\">Button</button>"
 `;
 
 exports[`Marko > jsx > Javascript Test > use-style-outside-component 1`] = `
@@ -2275,14 +2275,14 @@ exports[`Marko > jsx > Typescript Test > AdvancedRef 1`] = `
 }
 
 style { 
-  .input-4a4b9003 {
+  .input-790d468a {
     color: red;
   }
 }
 <div>
   <if(input.showInput)>
     <input
-      class=\\"input-4a4b9003\\"
+      class=\\"input-790d468a\\"
       key=\\"inputRef\\"
       value=(state.name)
       on-blur(event => component.onBlur())
@@ -2319,11 +2319,11 @@ class {
 }
 
 style { 
-  .div-6f8bbe5f {
+  .div-48c79144 {
     padding: 10px;
   }
 }
-<div class=\\"test div-6f8bbe5f\\">
+<div class=\\"test div-48c79144\\">
   <input
     value=(DEFAULT_VALUES.name || state.name)
     on-input(myEvent => state.name = myEvent.target.value)
@@ -2521,14 +2521,14 @@ exports[`Marko > jsx > Typescript Test > BasicRef 1`] = `
 }
 
 style { 
-  .input-37a1283e {
+  .input-cbb647ea {
     color: red;
   }
 }
 <div>
   <if(input.showInput)>
     <input
-      class=\\"input-37a1283e\\"
+      class=\\"input-cbb647ea\\"
       key=\\"inputRef\\"
       value=(state.name)
       on-blur(event => component.onBlur())
@@ -2633,29 +2633,29 @@ exports[`Marko > jsx > Typescript Test > Columns 1`] = `
 }
 
 style { 
-  .div-8dfe73ba {
+  .div-f5d75200 {
     display: flex;
     flex-direction: column;
     align-items: stretch;
     line-height: normal;
   }
   @media (max-width: 999px) {
-    .div-8dfe73ba {
+    .div-f5d75200 {
       flex-direction: row;
     }
   }
   @media (max-width: 639px) {
-    .div-8dfe73ba {
+    .div-f5d75200 {
       flex-direction: row-reverse;
     }
   }
-  .div-8dfe73ba-2 {
+  .div-f5d75200-2 {
     flex-grow: 1;
   }
 }
-<div class=\\"builder-columns div-8dfe73ba\\">
+<div class=\\"builder-columns div-f5d75200\\">
   <for|column,index| of=(input.columns)>
-    <div class=\\"builder-column div-8dfe73ba-2\\">\${column.content} \${index}</div>
+    <div class=\\"builder-column div-f5d75200-2\\">\${column.content} \${index}</div>
   </for>
 </div>"
 `;
@@ -3062,7 +3062,7 @@ class {
 }
 
 style { 
-  .pre-2a3c5c5a {
+  .pre-37eea1bf {
     padding: 10px;
     color: red;
     text-align: center;
@@ -3097,7 +3097,7 @@ style {
     ></BuilderBlocks></if>
 
   <if(component.submissionState === 'error' && state.responseData)>
-    <pre class=\\"builder-form-error-text pre-2a3c5c5a\\">
+    <pre class=\\"builder-form-error-text pre-37eea1bf\\">
           
 \${JSON.stringify(state.responseData, null, 2)}
 
@@ -3167,7 +3167,7 @@ exports[`Marko > jsx > Typescript Test > Image 1`] = `
 }
 
 style { 
-  .img-a94ec16e {
+  .img-45432c52 {
     opacity: 1;
     transition: opacity 0.2s ease-in-out;
     object-fit: cover;
@@ -3180,7 +3180,7 @@ style {
       <img
         alt=(input.altText)
         aria-role=(input.altText ? 'presentation' : undefined)
-        class=('builder-image' + (input._class ? ' ' + input._class : '') + ' img-a94ec16e')
+        class=('builder-image' + (input._class ? ' ' + input._class : '') + ' img-45432c52')
         src=(input.image)
         on-load(event => component.setLoaded())
         srcset=(input.srcset)
@@ -3375,16 +3375,16 @@ class {
 }
 
 style { 
-  .input-017045de {
+  .input-c3470f28 {
     display: block;
   }
-  .textarea-017045de {
+  .textarea-c3470f28 {
     display: block;
   }
-  .button-017045de {
+  .button-c3470f28 {
     display: block;
   }
-  .review-017045de {
+  .review-c3470f28 {
     margin: 10px;
     padding: 10px;
     background: white;
@@ -3392,7 +3392,7 @@ style {
     border-radius: 5px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   }
-  .img-017045de {
+  .img-c3470f28 {
     height: 30px;
     width: 30px;
     margin-right: 10px;
@@ -3405,13 +3405,13 @@ style {
 
   <if(state.showReviewPrompt || 'asdf')>
     <input placeholder=\\"Email\\" />
-    <input placeholder=\\"Title\\" class=\\"input-017045de\\" />
+    <input placeholder=\\"Title\\" class=\\"input-c3470f28\\" />
     <textarea
       placeholder=\\"How was your experience?\\"
-      class=\\"textarea-017045de\\"
+      class=\\"textarea-c3470f28\\"
     ></textarea>
     <button
-      class=\\"button-017045de\\"
+      class=\\"button-c3470f28\\"
       on-click(event => {
   event.preventDefault();
   state.showReviewPrompt = false;
@@ -3421,8 +3421,8 @@ style {
     </button></if>
 
   <for|review,index| of=(state.reviews)>
-    <div class=\\"review-017045de\\" key=(review.id)>
-      <img class=\\"img-017045de\\" src=(review.avatar) />
+    <div class=\\"review-c3470f28\\" key=(review.id)>
+      <img class=\\"img-c3470f28\\" src=(review.avatar) />
 
       <div class=(state.showReviewPrompt ? 'bg-primary' : 'bg-secondary')>
         <div>N: \${index}</div>
@@ -3529,13 +3529,13 @@ exports[`Marko > jsx > Typescript Test > basicForwardRef 1`] = `
 }
 
 style { 
-  .input-110b8dfc {
+  .input-014e706f {
     color: red;
   }
 }
 <div>
   <input
-    class=\\"input-110b8dfc\\"
+    class=\\"input-014e706f\\"
     key=\\"propsInputRef\\"
     value=(state.name)
     on-input(event => state.name = event.target.value)
@@ -3555,13 +3555,13 @@ exports[`Marko > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
 }
 
 style { 
-  .input-565a1be8 {
+  .input-53a59b24 {
     color: red;
   }
 }
 <div>
   <input
-    class=\\"input-565a1be8\\"
+    class=\\"input-53a59b24\\"
     key=\\"propsInputRef\\"
     value=(state.name)
     on-input(event => state.name = event.target.value)
@@ -3600,11 +3600,11 @@ exports[`Marko > jsx > Typescript Test > class + ClassName + css 1`] = `
 "class {}
 
 style { 
-  .div-45c59d97 {
+  .div-240d4a4d {
     padding: 10px;
   }
 }
-<div class=\\"test2 test div-45c59d97\\">
+<div class=\\"test2 test div-240d4a4d\\">
   Hello! I can run in React, Vue, Solid, or Liquid!
 </div>"
 `;
@@ -3613,11 +3613,11 @@ exports[`Marko > jsx > Typescript Test > class + css 1`] = `
 "class {}
 
 style { 
-  .div-74a0302e {
+  .div-210be817 {
     padding: 10px;
   }
 }
-<div class=\\"test div-74a0302e\\">
+<div class=\\"test div-210be817\\">
   Hello! I can run in React, Vue, Solid, or Liquid!
 </div>"
 `;
@@ -3626,11 +3626,11 @@ exports[`Marko > jsx > Typescript Test > className + css 1`] = `
 "class {}
 
 style { 
-  .div-74a0302e {
+  .div-210be817 {
     padding: 10px;
   }
 }
-<div class=\\"test div-74a0302e\\">
+<div class=\\"test div-210be817\\">
   Hello! I can run in React, Vue, Solid, or Liquid!
 </div>"
 `;
@@ -3662,11 +3662,11 @@ exports[`Marko > jsx > Typescript Test > classState 1`] = `
 }
 
 style { 
-  .div-25715889 {
+  .div-52624371 {
     padding: 10px;
   }
 }
-<div class=(state.classState + ' div-25715889') style=(state.styleState)>
+<div class=(state.classState + ' div-52624371') style=(state.styleState)>
   Hello! I can run in React, Vue, Solid, or Liquid!
 </div>"
 `;
@@ -3852,23 +3852,23 @@ exports[`Marko > jsx > Typescript Test > nestedStyles 1`] = `
 "class {}
 
 style { 
-  .div-92502f5c {
+  .div-04b41bf9 {
     display: flex;
     foo: var(--bar);
   }
   @media (max-width: env(--mobile)) {
-    .div-92502f5c {
+    .div-04b41bf9 {
       display: block;
     }
   }
-  .div-92502f5c:hover {
+  .div-04b41bf9:hover {
     display: flex;
   }
-  .div-92502f5c .nested-selector {
+  .div-04b41bf9 .nested-selector {
     display: grid;
   }
 }
-<div class=\\"div-92502f5c\\">Hello world</div>"
+<div class=\\"div-04b41bf9\\">Hello world</div>"
 `;
 
 exports[`Marko > jsx > Typescript Test > onInit & onMount 1`] = `
@@ -4254,12 +4254,12 @@ class {
 }
 
 style { 
-  .div-6d1158e4 {
+  .div-c8eb54c0 {
     display: flex;
     flex-direction: columns;
   }
 }
-<div class=\\"div-6d1158e4\\" on-click(event => trackClick(input.content.id))>
+<div class=\\"div-c8eb54c0\\" on-click(event => trackClick(input.content.id))>
   <RenderBlocks blocks=(input.content.blocks)></RenderBlocks>
 </div>"
 `;
@@ -4399,7 +4399,7 @@ exports[`Marko > jsx > Typescript Test > use-style-and-css 1`] = `
 "class {}
 
 style { 
-  .button-625c33fa {
+  .button-0b7811fa {
     background: blue;
     color: white;
   }
@@ -4409,7 +4409,7 @@ style {
     outline: 1px solid black;
   }
 }
-<button type=\\"button\\" class=\\"button-625c33fa\\">Button</button>"
+<button type=\\"button\\" class=\\"button-0b7811fa\\">Button</button>"
 `;
 
 exports[`Marko > jsx > Typescript Test > use-style-outside-component 1`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
index 16654db23b..3fe99b9b42 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -25,6 +25,7 @@ exports[`Parse JSX > AdvancedRef 1`] = `
           "bindings": {
             "when": {
               "code": "props.showInput",
+              "type": "single",
             },
           },
           "children": [
@@ -51,24 +52,29 @@ exports[`Parse JSX > AdvancedRef 1`] = `
                       "code": "{
   color: 'red'
 }",
+                      "type": "single",
                     },
                     "onBlur": {
                       "arguments": [
                         "event",
                       ],
                       "code": "state.onBlur()",
+                      "type": "single",
                     },
                     "onChange": {
                       "arguments": [
                         "event",
                       ],
                       "code": "state.name = event.target.value",
+                      "type": "single",
                     },
                     "ref": {
                       "code": "inputRef",
+                      "type": "single",
                     },
                     "value": {
                       "code": "state.name",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -95,6 +101,7 @@ exports[`Parse JSX > AdvancedRef 1`] = `
                   "bindings": {
                     "ref": {
                       "code": "inputNoArgRef",
+                      "type": "single",
                     },
                   },
                   "children": [
@@ -269,6 +276,7 @@ exports[`Parse JSX > AdvancedRef 1`] = `
           "bindings": {
             "_text": {
               "code": "state.lowerCaseName()",
+              "type": "single",
             },
           },
           "children": [],
@@ -363,6 +371,7 @@ exports[`Parse JSX > Basic 1`] = `
           "code": "{
   padding: '10px'
 }",
+          "type": "single",
         },
       },
       "children": [
@@ -386,9 +395,11 @@ exports[`Parse JSX > Basic 1`] = `
                 "myEvent",
               ],
               "code": "state.name = myEvent.target.value",
+              "type": "single",
             },
             "value": {
               "code": "DEFAULT_VALUES.name || state.name",
+              "type": "single",
             },
           },
           "children": [],
@@ -495,6 +506,7 @@ exports[`Parse JSX > Basic 2`] = `
           "bindings": {
             "each": {
               "code": "state.names",
+              "type": "single",
             },
           },
           "children": [
@@ -503,6 +515,7 @@ exports[`Parse JSX > Basic 2`] = `
               "bindings": {
                 "when": {
                   "code": "person === state.name",
+                  "type": "single",
                 },
               },
               "children": [
@@ -528,9 +541,11 @@ exports[`Parse JSX > Basic 2`] = `
                       "code": "{
   state.name = event.target.value + ' and ' + person;
 }",
+                      "type": "single",
                     },
                     "value": {
                       "code": "state.name",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -556,6 +571,7 @@ exports[`Parse JSX > Basic 2`] = `
                   "bindings": {
                     "_text": {
                       "code": "person",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -659,6 +675,7 @@ exports[`Parse JSX > Basic Context 1`] = `
           "bindings": {
             "_text": {
               "code": "myService.method('hello') + state.name",
+              "type": "single",
             },
           },
           "children": [],
@@ -685,6 +702,7 @@ exports[`Parse JSX > Basic Context 1`] = `
           "bindings": {
             "onChange": {
               "code": "state.onChange",
+              "type": "single",
             },
           },
           "children": [],
@@ -792,6 +810,7 @@ exports[`Parse JSX > Basic OnMount Update 1`] = `
           "bindings": {
             "_text": {
               "code": "state.name",
+              "type": "single",
             },
           },
           "children": [],
@@ -945,6 +964,7 @@ exports[`Parse JSX > BasicAttribute 1`] = `
       "bindings": {
         "spellcheck": {
           "code": "true",
+          "type": "single",
         },
       },
       "children": [],
@@ -998,6 +1018,7 @@ exports[`Parse JSX > BasicBooleanAttribute 1`] = `
           "bindings": {
             "_text": {
               "code": "props.children",
+              "type": "single",
             },
           },
           "children": [],
@@ -1022,6 +1043,7 @@ exports[`Parse JSX > BasicBooleanAttribute 1`] = `
           "bindings": {
             "_text": {
               "code": "props.type",
+              "type": "single",
             },
           },
           "children": [],
@@ -1047,6 +1069,7 @@ exports[`Parse JSX > BasicBooleanAttribute 1`] = `
           "bindings": {
             "toggle": {
               "code": "true",
+              "type": "single",
             },
           },
           "children": [],
@@ -1072,6 +1095,7 @@ exports[`Parse JSX > BasicBooleanAttribute 1`] = `
           "bindings": {
             "toggle": {
               "code": "true",
+              "type": "single",
             },
           },
           "children": [],
@@ -1097,6 +1121,7 @@ exports[`Parse JSX > BasicBooleanAttribute 1`] = `
           "bindings": {
             "list": {
               "code": "null",
+              "type": "single",
             },
           },
           "children": [],
@@ -1179,6 +1204,7 @@ exports[`Parse JSX > BasicChildComponent 1`] = `
           "bindings": {
             "id": {
               "code": "state.dev",
+              "type": "single",
             },
           },
           "children": [],
@@ -1220,9 +1246,11 @@ exports[`Parse JSX > BasicChildComponent 1`] = `
               "bindings": {
                 "bye": {
                   "code": "state.dev",
+                  "type": "single",
                 },
                 "hi": {
                   "code": "state.name",
+                  "type": "single",
                 },
               },
               "children": [],
@@ -1331,6 +1359,7 @@ exports[`Parse JSX > BasicFor 1`] = `
           "bindings": {
             "each": {
               "code": "state.names",
+              "type": "single",
             },
           },
           "children": [
@@ -1360,9 +1389,11 @@ exports[`Parse JSX > BasicFor 1`] = `
                       "code": "{
   state.name = event.target.value + ' and ' + person;
 }",
+                      "type": "single",
                     },
                     "value": {
                       "code": "state.name",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -1388,6 +1419,7 @@ exports[`Parse JSX > BasicFor 1`] = `
                   "bindings": {
                     "_text": {
                       "code": "person",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -1495,6 +1527,7 @@ exports[`Parse JSX > BasicRef 1`] = `
           "bindings": {
             "when": {
               "code": "props.showInput",
+              "type": "single",
             },
           },
           "children": [
@@ -1521,24 +1554,29 @@ exports[`Parse JSX > BasicRef 1`] = `
                       "code": "{
   color: 'red'
 }",
+                      "type": "single",
                     },
                     "onBlur": {
                       "arguments": [
                         "event",
                       ],
                       "code": "state.onBlur()",
+                      "type": "single",
                     },
                     "onChange": {
                       "arguments": [
                         "event",
                       ],
                       "code": "state.name = event.target.value",
+                      "type": "single",
                     },
                     "ref": {
                       "code": "inputRef",
+                      "type": "single",
                     },
                     "value": {
                       "code": "state.name",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -1565,6 +1603,7 @@ exports[`Parse JSX > BasicRef 1`] = `
                   "bindings": {
                     "ref": {
                       "code": "inputNoArgRef",
+                      "type": "single",
                     },
                   },
                   "children": [
@@ -1739,6 +1778,7 @@ exports[`Parse JSX > BasicRef 1`] = `
           "bindings": {
             "_text": {
               "code": "state.lowerCaseName()",
+              "type": "single",
             },
           },
           "children": [],
@@ -1843,6 +1883,7 @@ exports[`Parse JSX > BasicRefAssignment 1`] = `
                 "evt",
               ],
               "code": "state.handlerClick(evt)",
+              "type": "single",
             },
           },
           "children": [
@@ -1958,6 +1999,7 @@ exports[`Parse JSX > BasicRefPrevious 1`] = `
               "bindings": {
                 "_text": {
                   "code": "state.count",
+                  "type": "single",
                 },
               },
               "children": [],
@@ -1982,6 +2024,7 @@ exports[`Parse JSX > BasicRefPrevious 1`] = `
               "bindings": {
                 "_text": {
                   "code": "prevCount",
+                  "type": "single",
                 },
               },
               "children": [],
@@ -2025,6 +2068,7 @@ exports[`Parse JSX > BasicRefPrevious 1`] = `
           "bindings": {
             "onClick": {
               "code": "state.count += 1",
+              "type": "single",
             },
           },
           "children": [
@@ -2144,6 +2188,7 @@ exports[`Parse JSX > Button 1`] = `
           "bindings": {
             "when": {
               "code": "props.link",
+              "type": "single",
             },
           },
           "children": [
@@ -2164,13 +2209,16 @@ exports[`Parse JSX > Button 1`] = `
               "bindings": {
                 "href": {
                   "code": "props.link",
+                  "type": "single",
                 },
                 "props.attributes": {
                   "code": "props.attributes",
+                  "spreadType": "normal",
                   "type": "spread",
                 },
                 "target": {
                   "code": "props.openLinkInNewTab ? '_blank' : undefined",
+                  "type": "single",
                 },
               },
               "children": [
@@ -2191,6 +2239,7 @@ exports[`Parse JSX > Button 1`] = `
                   "bindings": {
                     "_text": {
                       "code": "props.text",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -2252,6 +2301,7 @@ exports[`Parse JSX > Button 1`] = `
           "bindings": {
             "when": {
               "code": "!props.link",
+              "type": "single",
             },
           },
           "children": [
@@ -2272,6 +2322,7 @@ exports[`Parse JSX > Button 1`] = `
               "bindings": {
                 "props.attributes": {
                   "code": "props.attributes",
+                  "spreadType": "normal",
                   "type": "spread",
                 },
               },
@@ -2293,6 +2344,7 @@ exports[`Parse JSX > Button 1`] = `
                   "bindings": {
                     "_text": {
                       "code": "props.text",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -2403,6 +2455,7 @@ exports[`Parse JSX > Columns 1`] = `
     flexDirection: 'row-reverse'
   }
 }",
+          "type": "single",
         },
       },
       "children": [
@@ -2423,6 +2476,7 @@ exports[`Parse JSX > Columns 1`] = `
           "bindings": {
             "each": {
               "code": "props.columns",
+              "type": "single",
             },
           },
           "children": [
@@ -2433,6 +2487,7 @@ exports[`Parse JSX > Columns 1`] = `
                   "code": "{
   flexGrow: '1'
 }",
+                  "type": "single",
                 },
               },
               "children": [
@@ -2453,6 +2508,7 @@ exports[`Parse JSX > Columns 1`] = `
                   "bindings": {
                     "_text": {
                       "code": "column.content",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -2477,6 +2533,7 @@ exports[`Parse JSX > Columns 1`] = `
                   "bindings": {
                     "_text": {
                       "code": "index",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -2622,6 +2679,7 @@ exports[`Parse JSX > ContentSlotHtml 1`] = `
           "bindings": {
             "name": {
               "code": "props.slotTesting",
+              "type": "single",
             },
           },
           "children": [],
@@ -2807,6 +2865,7 @@ exports[`Parse JSX > ContentSlotJSX 1`] = `
           "bindings": {
             "when": {
               "code": "props.slotTesting",
+              "type": "single",
             },
           },
           "children": [
@@ -2831,6 +2890,7 @@ exports[`Parse JSX > ContentSlotJSX 1`] = `
                   "bindings": {
                     "_text": {
                       "code": "props.slotTesting",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -2939,6 +2999,7 @@ exports[`Parse JSX > ContentSlotJSX 1`] = `
               "bindings": {
                 "_text": {
                   "code": "props.children",
+                  "type": "single",
                 },
               },
               "children": [],
@@ -3003,12 +3064,15 @@ exports[`Parse JSX > CustomCode 1`] = `
       "bindings": {
         "class": {
           "code": "'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')",
+          "type": "single",
         },
         "innerHTML": {
           "code": "props.code",
+          "type": "single",
         },
         "ref": {
           "code": "elem",
+          "type": "single",
         },
       },
       "children": [],
@@ -3105,12 +3169,15 @@ exports[`Parse JSX > Embed 1`] = `
       "bindings": {
         "class": {
           "code": "'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')",
+          "type": "single",
         },
         "innerHTML": {
           "code": "props.code",
+          "type": "single",
         },
         "ref": {
           "code": "elem",
+          "type": "single",
         },
       },
       "children": [],
@@ -3207,28 +3274,35 @@ exports[`Parse JSX > Form 1`] = `
       "bindings": {
         "action": {
           "code": "!props.sendWithJs && props.action",
+          "type": "single",
         },
         "method": {
           "code": "props.method",
+          "type": "single",
         },
         "name": {
           "code": "props.name",
+          "type": "single",
         },
         "onSubmit": {
           "arguments": [
             "event",
           ],
           "code": "state.onSubmit(event)",
+          "type": "single",
         },
         "props.attributes": {
           "code": "props.attributes",
+          "spreadType": "normal",
           "type": "spread",
         },
         "ref": {
           "code": "formRef",
+          "type": "single",
         },
         "validate": {
           "code": "props.validate",
+          "type": "single",
         },
       },
       "children": [
@@ -3249,6 +3323,7 @@ exports[`Parse JSX > Form 1`] = `
           "bindings": {
             "when": {
               "code": "props.builderBlock && props.builderBlock.children",
+              "type": "single",
             },
           },
           "children": [
@@ -3269,6 +3344,7 @@ exports[`Parse JSX > Form 1`] = `
               "bindings": {
                 "each": {
                   "code": "props.builderBlock?.children",
+                  "type": "single",
                 },
               },
               "children": [
@@ -3277,12 +3353,15 @@ exports[`Parse JSX > Form 1`] = `
                   "bindings": {
                     "block": {
                       "code": "block",
+                      "type": "single",
                     },
                     "index": {
                       "code": "index",
+                      "type": "single",
                     },
                     "key": {
                       "code": "block.id",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -3336,6 +3415,7 @@ exports[`Parse JSX > Form 1`] = `
           "bindings": {
             "when": {
               "code": "state.submissionState === 'error'",
+              "type": "single",
             },
           },
           "children": [
@@ -3356,6 +3436,7 @@ exports[`Parse JSX > Form 1`] = `
               "bindings": {
                 "blocks": {
                   "code": "props.errorMessage",
+                  "type": "single",
                 },
               },
               "children": [],
@@ -3402,6 +3483,7 @@ exports[`Parse JSX > Form 1`] = `
           "bindings": {
             "when": {
               "code": "state.submissionState === 'sending'",
+              "type": "single",
             },
           },
           "children": [
@@ -3422,6 +3504,7 @@ exports[`Parse JSX > Form 1`] = `
               "bindings": {
                 "blocks": {
                   "code": "props.sendingMessage",
+                  "type": "single",
                 },
               },
               "children": [],
@@ -3468,6 +3551,7 @@ exports[`Parse JSX > Form 1`] = `
           "bindings": {
             "when": {
               "code": "state.submissionState === 'error' && state.responseData",
+              "type": "single",
             },
           },
           "children": [
@@ -3492,6 +3576,7 @@ exports[`Parse JSX > Form 1`] = `
   color: 'red',
   textAlign: 'center'
 }",
+                  "type": "single",
                 },
               },
               "children": [
@@ -3512,6 +3597,7 @@ exports[`Parse JSX > Form 1`] = `
                   "bindings": {
                     "_text": {
                       "code": "JSON.stringify(state.responseData, null, 2)",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -3576,6 +3662,7 @@ exports[`Parse JSX > Form 1`] = `
           "bindings": {
             "when": {
               "code": "state.submissionState === 'success'",
+              "type": "single",
             },
           },
           "children": [
@@ -3596,6 +3683,7 @@ exports[`Parse JSX > Form 1`] = `
               "bindings": {
                 "blocks": {
                   "code": "props.successMessage",
+                  "type": "single",
                 },
               },
               "children": [],
@@ -3976,6 +4064,7 @@ exports[`Parse JSX > Image 1`] = `
           "bindings": {
             "ref": {
               "code": "pictureRef",
+              "type": "single",
             },
           },
           "children": [
@@ -3996,6 +4085,7 @@ exports[`Parse JSX > Image 1`] = `
               "bindings": {
                 "when": {
                   "code": "!state.useLazyLoading() || state.load",
+                  "type": "single",
                 },
               },
               "children": [
@@ -4016,12 +4106,15 @@ exports[`Parse JSX > Image 1`] = `
                   "bindings": {
                     "alt": {
                       "code": "props.altText",
+                      "type": "single",
                     },
                     "aria-role": {
                       "code": "props.altText ? 'presentation' : undefined",
+                      "type": "single",
                     },
                     "class": {
                       "code": "'builder-image' + (props._class ? ' ' + props._class : '')",
+                      "type": "single",
                     },
                     "css": {
                       "code": "{
@@ -4030,18 +4123,23 @@ exports[`Parse JSX > Image 1`] = `
   objectFit: 'cover',
   objectPosition: 'center'
 }",
+                      "type": "single",
                     },
                     "onLoad": {
                       "code": "state.setLoaded()",
+                      "type": "single",
                     },
                     "sizes": {
                       "code": "props.sizes",
+                      "type": "single",
                     },
                     "src": {
                       "code": "props.image",
+                      "type": "single",
                     },
                     "srcset": {
                       "code": "props.srcset",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -4085,6 +4183,7 @@ exports[`Parse JSX > Image 1`] = `
               "bindings": {
                 "srcset": {
                   "code": "props.srcset",
+                  "type": "single",
                 },
               },
               "children": [],
@@ -4128,6 +4227,7 @@ exports[`Parse JSX > Image 1`] = `
           "bindings": {
             "_text": {
               "code": "props.children",
+              "type": "single",
             },
           },
           "children": [],
@@ -4284,6 +4384,7 @@ exports[`Parse JSX > Image State 1`] = `
           "bindings": {
             "each": {
               "code": "state.images",
+              "type": "single",
             },
           },
           "children": [
@@ -4308,9 +4409,11 @@ exports[`Parse JSX > Image State 1`] = `
                   "bindings": {
                     "key": {
                       "code": "itemIndex",
+                      "type": "single",
                     },
                     "src": {
                       "code": "item",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -4401,22 +4504,27 @@ exports[`Parse JSX > Img 1`] = `
       "bindings": {
         "alt": {
           "code": "props.altText",
+          "type": "single",
         },
         "key": {
           "code": "Builder.isEditing && props.imgSrc || 'default-key'",
+          "type": "single",
         },
         "props.attributes": {
           "code": "props.attributes",
+          "spreadType": "normal",
           "type": "spread",
         },
         "src": {
           "code": "props.imgSrc",
+          "type": "single",
         },
         "style": {
           "code": "{
   objectFit: props.backgroundSize || 'cover',
   objectPosition: props.backgroundPosition || 'center'
 }",
+          "type": "single",
         },
       },
       "children": [],
@@ -4468,28 +4576,36 @@ exports[`Parse JSX > Input 1`] = `
       "bindings": {
         "defaultValue": {
           "code": "props.defaultValue",
+          "type": "single",
         },
         "key": {
           "code": "Builder.isEditing && props.defaultValue ? props.defaultValue : 'default-key'",
+          "type": "single",
         },
         "name": {
           "code": "props.name",
+          "type": "single",
         },
         "placeholder": {
           "code": "props.placeholder",
+          "type": "single",
         },
         "props.attributes": {
           "code": "props.attributes",
+          "spreadType": "normal",
           "type": "spread",
         },
         "required": {
           "code": "props.required",
+          "type": "single",
         },
         "type": {
           "code": "props.type",
+          "type": "single",
         },
         "value": {
           "code": "props.value",
+          "type": "single",
         },
       },
       "children": [],
@@ -4543,9 +4659,11 @@ exports[`Parse JSX > RawText 1`] = `
       "bindings": {
         "class": {
           "code": "props.attributes?.class || props.attributes?.className",
+          "type": "single",
         },
         "innerHTML": {
           "code": "props.text || ''",
+          "type": "single",
         },
       },
       "children": [],
@@ -4603,6 +4721,7 @@ exports[`Parse JSX > Remove Internal mitosis package 1`] = `
           "bindings": {
             "_text": {
               "code": "state.name",
+              "type": "single",
             },
           },
           "children": [],
@@ -4659,12 +4778,14 @@ exports[`Parse JSX > Section 1`] = `
       "bindings": {
         "props.attributes": {
           "code": "props.attributes",
+          "spreadType": "normal",
           "type": "spread",
         },
         "style": {
           "code": "props.maxWidth && typeof props.maxWidth === 'number' ? {
   maxWidth: props.maxWidth
 } : undefined",
+          "type": "single",
         },
       },
       "children": [
@@ -4685,6 +4806,7 @@ exports[`Parse JSX > Section 1`] = `
           "bindings": {
             "_text": {
               "code": "props.children",
+              "type": "single",
             },
           },
           "children": [],
@@ -4745,6 +4867,7 @@ exports[`Parse JSX > Section 2`] = `
       "bindings": {
         "when": {
           "code": "state.max",
+          "type": "single",
         },
       },
       "children": [
@@ -4765,6 +4888,7 @@ exports[`Parse JSX > Section 2`] = `
           "bindings": {
             "each": {
               "code": "state.items",
+              "type": "single",
             },
           },
           "children": [
@@ -4773,12 +4897,14 @@ exports[`Parse JSX > Section 2`] = `
               "bindings": {
                 "props.attributes": {
                   "code": "props.attributes",
+                  "spreadType": "normal",
                   "type": "spread",
                 },
                 "style": {
                   "code": "{
   maxWidth: item + state.max
 }",
+                  "type": "single",
                 },
               },
               "children": [
@@ -4799,6 +4925,7 @@ exports[`Parse JSX > Section 2`] = `
                   "bindings": {
                     "_text": {
                       "code": "props.children",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -4894,19 +5021,24 @@ exports[`Parse JSX > Select 1`] = `
       "bindings": {
         "defaultValue": {
           "code": "props.defaultValue",
+          "type": "single",
         },
         "key": {
           "code": "Builder.isEditing && props.defaultValue ? props.defaultValue : 'default-key'",
+          "type": "single",
         },
         "name": {
           "code": "props.name",
+          "type": "single",
         },
         "props.attributes": {
           "code": "props.attributes",
+          "spreadType": "normal",
           "type": "spread",
         },
         "value": {
           "code": "props.value",
+          "type": "single",
         },
       },
       "children": [
@@ -4927,6 +5059,7 @@ exports[`Parse JSX > Select 1`] = `
           "bindings": {
             "each": {
               "code": "props.options",
+              "type": "single",
             },
           },
           "children": [
@@ -4935,9 +5068,11 @@ exports[`Parse JSX > Select 1`] = `
               "bindings": {
                 "data-index": {
                   "code": "index",
+                  "type": "single",
                 },
                 "value": {
                   "code": "option.value",
+                  "type": "single",
                 },
               },
               "children": [
@@ -4958,6 +5093,7 @@ exports[`Parse JSX > Select 1`] = `
                   "bindings": {
                     "_text": {
                       "code": "option.name || option.value",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -5207,6 +5343,7 @@ exports[`Parse JSX > SlotHtml 1`] = `
               "bindings": {
                 "testing": {
                   "code": "<div>Hello</div>",
+                  "type": "single",
                 },
               },
               "children": [],
@@ -5306,6 +5443,7 @@ exports[`Parse JSX > SlotJsx 1`] = `
           "bindings": {
             "slotTesting": {
               "code": "<div>Hello</div>",
+              "type": "single",
             },
           },
           "children": [],
@@ -5511,6 +5649,7 @@ exports[`Parse JSX > Stamped.io 1`] = `
       "bindings": {
         "data-user": {
           "code": "state.name",
+          "type": "single",
         },
       },
       "children": [
@@ -5531,6 +5670,7 @@ exports[`Parse JSX > Stamped.io 1`] = `
           "bindings": {
             "onClick": {
               "code": "state.showReviewPrompt = true",
+              "type": "single",
             },
           },
           "children": [
@@ -5568,6 +5708,7 @@ exports[`Parse JSX > Stamped.io 1`] = `
           "bindings": {
             "when": {
               "code": "state.showReviewPrompt || 'asdf'",
+              "type": "single",
             },
           },
           "children": [
@@ -5614,6 +5755,7 @@ exports[`Parse JSX > Stamped.io 1`] = `
                   "code": "{
   display: 'block'
 }",
+                  "type": "single",
                 },
               },
               "children": [],
@@ -5644,6 +5786,7 @@ exports[`Parse JSX > Stamped.io 1`] = `
                   "code": "{
   display: 'block'
 }",
+                  "type": "single",
                 },
               },
               "children": [],
@@ -5673,6 +5816,7 @@ exports[`Parse JSX > Stamped.io 1`] = `
                   "code": "{
   display: 'block'
 }",
+                  "type": "single",
                 },
                 "onClick": {
                   "arguments": [
@@ -5682,6 +5826,7 @@ exports[`Parse JSX > Stamped.io 1`] = `
   event.preventDefault();
   state.showReviewPrompt = false;
 }",
+                  "type": "single",
                 },
               },
               "children": [
@@ -5739,6 +5884,7 @@ exports[`Parse JSX > Stamped.io 1`] = `
           "bindings": {
             "each": {
               "code": "state.reviews",
+              "type": "single",
             },
           },
           "children": [
@@ -5754,9 +5900,11 @@ exports[`Parse JSX > Stamped.io 1`] = `
   borderRadius: '5px',
   boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)'
 }",
+                  "type": "single",
                 },
                 "key": {
                   "code": "review.id",
+                  "type": "single",
                 },
               },
               "children": [
@@ -5781,9 +5929,11 @@ exports[`Parse JSX > Stamped.io 1`] = `
   width: '30px',
   marginRight: '10px'
 }",
+                      "type": "single",
                     },
                     "src": {
                       "code": "review.avatar",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -5809,6 +5959,7 @@ exports[`Parse JSX > Stamped.io 1`] = `
                   "bindings": {
                     "class": {
                       "code": "state.showReviewPrompt ? 'bg-primary' : 'bg-secondary'",
+                      "type": "single",
                     },
                   },
                   "children": [
@@ -5844,6 +5995,7 @@ exports[`Parse JSX > Stamped.io 1`] = `
                           "bindings": {
                             "_text": {
                               "code": "index",
+                              "type": "single",
                             },
                           },
                           "children": [],
@@ -5879,6 +6031,7 @@ exports[`Parse JSX > Stamped.io 1`] = `
                           "bindings": {
                             "_text": {
                               "code": "review.author",
+                              "type": "single",
                             },
                           },
                           "children": [],
@@ -5914,6 +6067,7 @@ exports[`Parse JSX > Stamped.io 1`] = `
                           "bindings": {
                             "_text": {
                               "code": "review.reviewMessage",
+                              "type": "single",
                             },
                           },
                           "children": [],
@@ -6070,6 +6224,7 @@ exports[`Parse JSX > Submit 1`] = `
       "bindings": {
         "props.attributes": {
           "code": "props.attributes",
+          "spreadType": "normal",
           "type": "spread",
         },
       },
@@ -6091,6 +6246,7 @@ exports[`Parse JSX > Submit 1`] = `
           "bindings": {
             "_text": {
               "code": "props.text",
+              "type": "single",
             },
           },
           "children": [],
@@ -6152,14 +6308,17 @@ exports[`Parse JSX > Text 1`] = `
       "bindings": {
         "contentEditable": {
           "code": "allowEditingText || undefined",
+          "type": "single",
         },
         "data-name": {
           "code": "{
   test: state.name || 'any name'
 }",
+          "type": "single",
         },
         "innerHTML": {
           "code": "props.text || props.content || state.name || '<p class=\\"text-lg\\">my name</p>'",
+          "type": "single",
         },
       },
       "children": [],
@@ -6216,19 +6375,24 @@ exports[`Parse JSX > Textarea 1`] = `
       "bindings": {
         "defaultValue": {
           "code": "props.defaultValue",
+          "type": "single",
         },
         "name": {
           "code": "props.name",
+          "type": "single",
         },
         "placeholder": {
           "code": "props.placeholder",
+          "type": "single",
         },
         "props.attributes": {
           "code": "props.attributes",
+          "spreadType": "normal",
           "type": "spread",
         },
         "value": {
           "code": "props.value",
+          "type": "single",
         },
       },
       "children": [],
@@ -6273,24 +6437,31 @@ exports[`Parse JSX > Video 1`] = `
       "bindings": {
         "autoplay": {
           "code": "props.autoPlay",
+          "type": "single",
         },
         "controls": {
           "code": "props.controls",
+          "type": "single",
         },
         "key": {
           "code": "props.video || 'no-src'",
+          "type": "single",
         },
         "loop": {
           "code": "props.loop",
+          "type": "single",
         },
         "muted": {
           "code": "props.muted",
+          "type": "single",
         },
         "poster": {
           "code": "props.posterImage",
+          "type": "single",
         },
         "props.attributes": {
           "code": "props.attributes",
+          "spreadType": "normal",
           "type": "spread",
         },
         "style": {
@@ -6304,6 +6475,7 @@ exports[`Parse JSX > Video 1`] = `
   // not have the video overflow
   borderRadius: 1
 }",
+          "type": "single",
         },
       },
       "children": [],
@@ -6374,6 +6546,7 @@ exports[`Parse JSX > arrowFunctionInUseStore 1`] = `
           "bindings": {
             "_text": {
               "code": "state.name",
+              "type": "single",
             },
           },
           "children": [],
@@ -6449,18 +6622,22 @@ exports[`Parse JSX > basicForwardRef 1`] = `
               "code": "{
   color: 'red'
 }",
+              "type": "single",
             },
             "onChange": {
               "arguments": [
                 "event",
               ],
               "code": "state.name = event.target.value",
+              "type": "single",
             },
             "ref": {
               "code": "props.inputRef",
+              "type": "single",
             },
             "value": {
               "code": "state.name",
+              "type": "single",
             },
           },
           "children": [],
@@ -6543,18 +6720,22 @@ exports[`Parse JSX > basicForwardRefMetadata 1`] = `
               "code": "{
   color: 'red'
 }",
+              "type": "single",
             },
             "onChange": {
               "arguments": [
                 "event",
               ],
               "code": "state.name = event.target.value",
+              "type": "single",
             },
             "ref": {
               "code": "props.inputRef",
+              "type": "single",
             },
             "value": {
               "code": "state.name",
+              "type": "single",
             },
           },
           "children": [],
@@ -6638,6 +6819,7 @@ exports[`Parse JSX > basicOnUpdateReturn 1`] = `
           "bindings": {
             "_text": {
               "code": "state.name",
+              "type": "single",
             },
           },
           "children": [],
@@ -6717,6 +6899,7 @@ exports[`Parse JSX > boolean attribute 1`] = `
           "bindings": {
             "_text": {
               "code": "props.children",
+              "type": "single",
             },
           },
           "children": [],
@@ -6741,6 +6924,7 @@ exports[`Parse JSX > boolean attribute 1`] = `
           "bindings": {
             "_text": {
               "code": "props.type",
+              "type": "single",
             },
           },
           "children": [],
@@ -6766,6 +6950,7 @@ exports[`Parse JSX > boolean attribute 1`] = `
           "bindings": {
             "toggle": {
               "code": "true",
+              "type": "single",
             },
           },
           "children": [],
@@ -6791,6 +6976,7 @@ exports[`Parse JSX > boolean attribute 1`] = `
           "bindings": {
             "toggle": {
               "code": "true",
+              "type": "single",
             },
           },
           "children": [],
@@ -6816,6 +7002,7 @@ exports[`Parse JSX > boolean attribute 1`] = `
           "bindings": {
             "list": {
               "code": "null",
+              "type": "single",
             },
           },
           "children": [],
@@ -6884,6 +7071,7 @@ exports[`Parse JSX > class + ClassName + css 1`] = `
           "code": "{
   padding: '10px'
 }",
+          "type": "single",
         },
       },
       "children": [
@@ -6936,6 +7124,7 @@ exports[`Parse JSX > class + css 1`] = `
           "code": "{
   padding: '10px'
 }",
+          "type": "single",
         },
       },
       "children": [
@@ -6988,6 +7177,7 @@ exports[`Parse JSX > className + css 1`] = `
           "code": "{
   padding: '10px'
 }",
+          "type": "single",
         },
       },
       "children": [
@@ -7113,6 +7303,7 @@ exports[`Parse JSX > className 1`] = `
           "bindings": {
             "class": {
               "code": "state.bindings",
+              "type": "single",
             },
           },
           "children": [
@@ -7189,14 +7380,17 @@ exports[`Parse JSX > classState 1`] = `
       "bindings": {
         "class": {
           "code": "state.classState",
+          "type": "single",
         },
         "css": {
           "code": "{
   padding: '10px'
 }",
+          "type": "single",
         },
         "style": {
           "code": "state.styleState",
+          "type": "single",
         },
       },
       "children": [
@@ -7276,6 +7470,7 @@ exports[`Parse JSX > componentWithContext 1`] = `
               "bindings": {
                 "_text": {
                   "code": "foo.value",
+                  "type": "single",
                 },
               },
               "children": [],
@@ -7403,6 +7598,7 @@ exports[`Parse JSX > componentWithContextMultiRoot 1`] = `
               "bindings": {
                 "_text": {
                   "code": "foo.value",
+                  "type": "single",
                 },
               },
               "children": [],
@@ -7622,6 +7818,7 @@ exports[`Parse JSX > defaultProps 1`] = `
           "bindings": {
             "when": {
               "code": "props.link",
+              "type": "single",
             },
           },
           "children": [
@@ -7642,13 +7839,16 @@ exports[`Parse JSX > defaultProps 1`] = `
               "bindings": {
                 "href": {
                   "code": "props.link",
+                  "type": "single",
                 },
                 "props.attributes": {
                   "code": "props.attributes",
+                  "spreadType": "normal",
                   "type": "spread",
                 },
                 "target": {
                   "code": "props.openLinkInNewTab ? '_blank' : undefined",
+                  "type": "single",
                 },
               },
               "children": [
@@ -7669,6 +7869,7 @@ exports[`Parse JSX > defaultProps 1`] = `
                   "bindings": {
                     "_text": {
                       "code": "props.text",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -7730,6 +7931,7 @@ exports[`Parse JSX > defaultProps 1`] = `
           "bindings": {
             "when": {
               "code": "!props.link",
+              "type": "single",
             },
           },
           "children": [
@@ -7753,9 +7955,11 @@ exports[`Parse JSX > defaultProps 1`] = `
                     "event",
                   ],
                   "code": "props.onClick(event)",
+                  "type": "single",
                 },
                 "props.attributes": {
                   "code": "props.attributes",
+                  "spreadType": "normal",
                   "type": "spread",
                 },
               },
@@ -7777,6 +7981,7 @@ exports[`Parse JSX > defaultProps 1`] = `
                   "bindings": {
                     "_text": {
                       "code": "props.buttonText",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -7915,6 +8120,7 @@ exports[`Parse JSX > defaultPropsOutsideComponent 1`] = `
           "bindings": {
             "when": {
               "code": "props.link",
+              "type": "single",
             },
           },
           "children": [
@@ -7935,13 +8141,16 @@ exports[`Parse JSX > defaultPropsOutsideComponent 1`] = `
               "bindings": {
                 "href": {
                   "code": "props.link",
+                  "type": "single",
                 },
                 "props.attributes": {
                   "code": "props.attributes",
+                  "spreadType": "normal",
                   "type": "spread",
                 },
                 "target": {
                   "code": "props.openLinkInNewTab ? '_blank' : undefined",
+                  "type": "single",
                 },
               },
               "children": [
@@ -7962,6 +8171,7 @@ exports[`Parse JSX > defaultPropsOutsideComponent 1`] = `
                   "bindings": {
                     "_text": {
                       "code": "props.text",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -8023,6 +8233,7 @@ exports[`Parse JSX > defaultPropsOutsideComponent 1`] = `
           "bindings": {
             "when": {
               "code": "!props.link",
+              "type": "single",
             },
           },
           "children": [
@@ -8046,9 +8257,11 @@ exports[`Parse JSX > defaultPropsOutsideComponent 1`] = `
                     "event",
                   ],
                   "code": "props.onClick(event)",
+                  "type": "single",
                 },
                 "props.attributes": {
                   "code": "props.attributes",
+                  "spreadType": "normal",
                   "type": "spread",
                 },
               },
@@ -8070,6 +8283,7 @@ exports[`Parse JSX > defaultPropsOutsideComponent 1`] = `
                   "bindings": {
                     "_text": {
                       "code": "props.text",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -8203,6 +8417,7 @@ exports[`Parse JSX > defaultValsWithTypes 1`] = `
           "bindings": {
             "_text": {
               "code": "props.name || DEFAULT_VALUES.name",
+              "type": "single",
             },
           },
           "children": [],
@@ -8261,6 +8476,7 @@ exports[`Parse JSX > expressionState 1`] = `
           "bindings": {
             "_text": {
               "code": "state.refToUse",
+              "type": "single",
             },
           },
           "children": [],
@@ -8306,6 +8522,7 @@ exports[`Parse JSX > import types 1`] = `
       "bindings": {
         "state.getRenderContentProps(props.renderContentProps.block, 0)": {
           "code": "state.getRenderContentProps(props.renderContentProps.block, 0)",
+          "spreadType": "normal",
           "type": "spread",
         },
       },
@@ -8382,6 +8599,7 @@ exports[`Parse JSX > metadata 1`] = `
           "bindings": {
             "when": {
               "code": "props.link",
+              "type": "single",
             },
           },
           "children": [
@@ -8402,13 +8620,16 @@ exports[`Parse JSX > metadata 1`] = `
               "bindings": {
                 "href": {
                   "code": "props.link",
+                  "type": "single",
                 },
                 "props.attributes": {
                   "code": "props.attributes",
+                  "spreadType": "normal",
                   "type": "spread",
                 },
                 "target": {
                   "code": "props.openLinkInNewTab ? '_blank' : undefined",
+                  "type": "single",
                 },
               },
               "children": [
@@ -8429,6 +8650,7 @@ exports[`Parse JSX > metadata 1`] = `
                   "bindings": {
                     "_text": {
                       "code": "props.text",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -8490,6 +8712,7 @@ exports[`Parse JSX > metadata 1`] = `
           "bindings": {
             "when": {
               "code": "!props.link",
+              "type": "single",
             },
           },
           "children": [
@@ -8510,6 +8733,7 @@ exports[`Parse JSX > metadata 1`] = `
               "bindings": {
                 "props.attributes": {
                   "code": "props.attributes",
+                  "spreadType": "normal",
                   "type": "spread",
                 },
               },
@@ -8531,6 +8755,7 @@ exports[`Parse JSX > metadata 1`] = `
                   "bindings": {
                     "_text": {
                       "code": "props.text",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -8744,10 +8969,12 @@ exports[`Parse JSX > multipleSpreads 1`] = `
       "bindings": {
         "attrs": {
           "code": "state.attrs",
+          "spreadType": "normal",
           "type": "spread",
         },
         "props": {
           "code": "props",
+          "spreadType": "normal",
           "type": "spread",
         },
       },
@@ -8791,6 +9018,7 @@ exports[`Parse JSX > nestedShow 1`] = `
       "bindings": {
         "when": {
           "code": "props.conditionA",
+          "type": "single",
         },
       },
       "children": [
@@ -8811,6 +9039,7 @@ exports[`Parse JSX > nestedShow 1`] = `
           "bindings": {
             "when": {
               "code": "!props.conditionB",
+              "type": "single",
             },
           },
           "children": [
@@ -8972,6 +9201,7 @@ exports[`Parse JSX > nestedStyles 1`] = `
     display: 'grid'
   }
 }",
+          "type": "single",
         },
       },
       "children": [
@@ -9072,6 +9302,7 @@ exports[`Parse JSX > onInit 1`] = `
           "bindings": {
             "_text": {
               "code": "state.name",
+              "type": "single",
             },
           },
           "children": [],
@@ -9548,6 +9779,7 @@ exports[`Parse JSX > preserveTyping 1`] = `
           "bindings": {
             "_text": {
               "code": "props.name",
+              "type": "single",
             },
           },
           "children": [],
@@ -9619,6 +9851,7 @@ exports[`Parse JSX > propsDestructure 1`] = `
           "bindings": {
             "_text": {
               "code": "props.children",
+              "type": "single",
             },
           },
           "children": [],
@@ -9643,6 +9876,7 @@ exports[`Parse JSX > propsDestructure 1`] = `
           "bindings": {
             "_text": {
               "code": "props.type",
+              "type": "single",
             },
           },
           "children": [],
@@ -9723,6 +9957,7 @@ exports[`Parse JSX > propsInterface 1`] = `
           "bindings": {
             "_text": {
               "code": "props.name",
+              "type": "single",
             },
           },
           "children": [],
@@ -9785,6 +10020,7 @@ exports[`Parse JSX > propsType 1`] = `
           "bindings": {
             "_text": {
               "code": "props.name",
+              "type": "single",
             },
           },
           "children": [],
@@ -9888,6 +10124,7 @@ exports[`Parse JSX > renderBlock 1`] = `
       "bindings": {
         "when": {
           "code": "state.shouldWrap",
+          "type": "single",
         },
       },
       "children": [
@@ -9920,6 +10157,7 @@ exports[`Parse JSX > renderBlock 1`] = `
           "bindings": {
             "when": {
               "code": "isEmptyHtmlElement(state.tag)",
+              "type": "single",
             },
           },
           "children": [
@@ -9940,10 +10178,12 @@ exports[`Parse JSX > renderBlock 1`] = `
               "bindings": {
                 "state.actions": {
                   "code": "state.actions",
+                  "spreadType": "normal",
                   "type": "spread",
                 },
                 "state.attributes": {
                   "code": "state.attributes",
+                  "spreadType": "normal",
                   "type": "spread",
                 },
               },
@@ -9988,6 +10228,7 @@ exports[`Parse JSX > renderBlock 1`] = `
           "bindings": {
             "when": {
               "code": "!isEmptyHtmlElement(state.tag) && state.repeatItemData",
+              "type": "single",
             },
           },
           "children": [
@@ -10008,6 +10249,7 @@ exports[`Parse JSX > renderBlock 1`] = `
               "bindings": {
                 "each": {
                   "code": "state.repeatItemData",
+                  "type": "single",
                 },
               },
               "children": [
@@ -10016,12 +10258,15 @@ exports[`Parse JSX > renderBlock 1`] = `
                   "bindings": {
                     "block": {
                       "code": "data.block",
+                      "type": "single",
                     },
                     "key": {
                       "code": "index",
+                      "type": "single",
                     },
                     "repeatContext": {
                       "code": "data.context",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -10074,6 +10319,7 @@ exports[`Parse JSX > renderBlock 1`] = `
           "bindings": {
             "when": {
               "code": "!isEmptyHtmlElement(state.tag) && !state.repeatItemData",
+              "type": "single",
             },
           },
           "children": [
@@ -10094,10 +10340,12 @@ exports[`Parse JSX > renderBlock 1`] = `
               "bindings": {
                 "state.actions": {
                   "code": "state.actions",
+                  "spreadType": "normal",
                   "type": "spread",
                 },
                 "state.attributes": {
                   "code": "state.attributes",
+                  "spreadType": "normal",
                   "type": "spread",
                 },
               },
@@ -10119,6 +10367,7 @@ exports[`Parse JSX > renderBlock 1`] = `
                   "bindings": {
                     "state.renderComponentProps": {
                       "code": "state.renderComponentProps",
+                      "spreadType": "normal",
                       "type": "spread",
                     },
                   },
@@ -10157,6 +10406,7 @@ exports[`Parse JSX > renderBlock 1`] = `
                   "bindings": {
                     "each": {
                       "code": "state.childrenWithoutParentComponent",
+                      "type": "single",
                     },
                   },
                   "children": [
@@ -10165,12 +10415,15 @@ exports[`Parse JSX > renderBlock 1`] = `
                       "bindings": {
                         "block": {
                           "code": "child",
+                          "type": "single",
                         },
                         "context": {
                           "code": "state.childrenContext",
+                          "type": "single",
                         },
                         "key": {
                           "code": "'render-block-' + child.id",
+                          "type": "single",
                         },
                       },
                       "children": [],
@@ -10204,6 +10457,7 @@ exports[`Parse JSX > renderBlock 1`] = `
                   "bindings": {
                     "each": {
                       "code": "state.childrenWithoutParentComponent",
+                      "type": "single",
                     },
                   },
                   "children": [
@@ -10212,12 +10466,15 @@ exports[`Parse JSX > renderBlock 1`] = `
                       "bindings": {
                         "block": {
                           "code": "child",
+                          "type": "single",
                         },
                         "context": {
                           "code": "state.childrenContext",
+                          "type": "single",
                         },
                         "key": {
                           "code": "'block-style-' + child.id",
+                          "type": "single",
                         },
                       },
                       "children": [],
@@ -10289,6 +10546,7 @@ exports[`Parse JSX > renderBlock 1`] = `
           "bindings": {
             "state.renderComponentProps": {
               "code": "state.renderComponentProps",
+              "spreadType": "normal",
               "type": "spread",
             },
           },
@@ -10634,9 +10892,11 @@ exports[`Parse JSX > renderContentExample 1`] = `
   display: 'flex',
   flexDirection: 'columns'
 }",
+          "type": "single",
         },
         "onClick": {
           "code": "trackClick(props.content.id)",
+          "type": "single",
         },
       },
       "children": [
@@ -10657,6 +10917,7 @@ exports[`Parse JSX > renderContentExample 1`] = `
           "bindings": {
             "blocks": {
               "code": "props.content.blocks",
+              "type": "single",
             },
           },
           "children": [],
@@ -10784,6 +11045,7 @@ exports[`Parse JSX > rootFragmentMultiNode 1`] = `
           "bindings": {
             "when": {
               "code": "props.link",
+              "type": "single",
             },
           },
           "children": [
@@ -10804,13 +11066,16 @@ exports[`Parse JSX > rootFragmentMultiNode 1`] = `
               "bindings": {
                 "href": {
                   "code": "props.link",
+                  "type": "single",
                 },
                 "props.attributes": {
                   "code": "props.attributes",
+                  "spreadType": "normal",
                   "type": "spread",
                 },
                 "target": {
                   "code": "props.openLinkInNewTab ? '_blank' : undefined",
+                  "type": "single",
                 },
               },
               "children": [
@@ -10831,6 +11096,7 @@ exports[`Parse JSX > rootFragmentMultiNode 1`] = `
                   "bindings": {
                     "_text": {
                       "code": "props.text",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -10892,6 +11158,7 @@ exports[`Parse JSX > rootFragmentMultiNode 1`] = `
           "bindings": {
             "when": {
               "code": "!props.link",
+              "type": "single",
             },
           },
           "children": [
@@ -10912,6 +11179,7 @@ exports[`Parse JSX > rootFragmentMultiNode 1`] = `
               "bindings": {
                 "props.attributes": {
                   "code": "props.attributes",
+                  "spreadType": "normal",
                   "type": "spread",
                 },
               },
@@ -10933,6 +11201,7 @@ exports[`Parse JSX > rootFragmentMultiNode 1`] = `
                   "bindings": {
                     "_text": {
                       "code": "props.text",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -11032,6 +11301,7 @@ exports[`Parse JSX > rootShow 1`] = `
       "bindings": {
         "when": {
           "code": "props.foo === 'bar'",
+          "type": "single",
         },
       },
       "children": [
@@ -11156,6 +11426,7 @@ exports[`Parse JSX > self-referencing component 1`] = `
           "bindings": {
             "_text": {
               "code": "props.name",
+              "type": "single",
             },
           },
           "children": [],
@@ -11181,6 +11452,7 @@ exports[`Parse JSX > self-referencing component 1`] = `
           "bindings": {
             "when": {
               "code": "props.name === 'Batman'",
+              "type": "single",
             },
           },
           "children": [
@@ -11286,6 +11558,7 @@ exports[`Parse JSX > self-referencing component with children 1`] = `
           "bindings": {
             "_text": {
               "code": "props.name",
+              "type": "single",
             },
           },
           "children": [],
@@ -11311,6 +11584,7 @@ exports[`Parse JSX > self-referencing component with children 1`] = `
           "bindings": {
             "_text": {
               "code": "props.children",
+              "type": "single",
             },
           },
           "children": [],
@@ -11336,6 +11610,7 @@ exports[`Parse JSX > self-referencing component with children 1`] = `
           "bindings": {
             "when": {
               "code": "props.name === 'Batman'",
+              "type": "single",
             },
           },
           "children": [
@@ -11471,6 +11746,7 @@ exports[`Parse JSX > showWithFor 1`] = `
       "bindings": {
         "when": {
           "code": "props.conditionA",
+          "type": "single",
         },
       },
       "children": [
@@ -11491,6 +11767,7 @@ exports[`Parse JSX > showWithFor 1`] = `
           "bindings": {
             "each": {
               "code": "props.items",
+              "type": "single",
             },
           },
           "children": [
@@ -11499,6 +11776,7 @@ exports[`Parse JSX > showWithFor 1`] = `
               "bindings": {
                 "key": {
                   "code": "idx",
+                  "type": "single",
                 },
               },
               "children": [
@@ -11507,6 +11785,7 @@ exports[`Parse JSX > showWithFor 1`] = `
                   "bindings": {
                     "_text": {
                       "code": "item",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -11603,6 +11882,7 @@ exports[`Parse JSX > spreadAttrs 1`] = `
       "bindings": {
         "attrs": {
           "code": "attrs",
+          "spreadType": "normal",
           "type": "spread",
         },
       },
@@ -11638,6 +11918,7 @@ exports[`Parse JSX > spreadNestedProps 1`] = `
       "bindings": {
         "props.nested": {
           "code": "props.nested",
+          "spreadType": "normal",
           "type": "spread",
         },
       },
@@ -11673,6 +11954,7 @@ exports[`Parse JSX > spreadProps 1`] = `
       "bindings": {
         "props": {
           "code": "props",
+          "spreadType": "normal",
           "type": "spread",
         },
       },
@@ -11745,12 +12027,15 @@ exports[`Parse JSX > svgComponent 1`] = `
       "bindings": {
         "height": {
           "code": "42",
+          "type": "single",
         },
         "viewBox": {
           "code": "'0 0 ' + 42 + ' ' + 42",
+          "type": "single",
         },
         "width": {
           "code": "42",
+          "type": "single",
         },
       },
       "children": [
@@ -11851,6 +12136,7 @@ exports[`Parse JSX > svgComponent 1`] = `
                   "bindings": {
                     "stdDeviation": {
                       "code": "7",
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -11951,6 +12237,7 @@ exports[`Parse JSX > typeDependency 1`] = `
           "bindings": {
             "_text": {
               "code": "props.foo",
+              "type": "single",
             },
           },
           "children": [],
@@ -12055,6 +12342,7 @@ exports[`Parse JSX > use-style-and-css 1`] = `
   background: 'blue',
   color: 'white'
 }",
+          "type": "single",
         },
       },
       "children": [
diff --git a/packages/core/src/__tests__/__snapshots__/parse-svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-svelte.test.ts.snap
index 78cae92833..6eff8f42e7 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-svelte.test.ts.snap
@@ -16,12 +16,11 @@ exports[`Parse JSX > basic 1`] = `
                 "event",
               ],
               "code": "state.name = event.target.value",
-              "type": undefined,
+              "type": "single",
             },
             "value": {
-              "arguments": undefined,
               "code": "state.name",
-              "type": undefined,
+              "type": "single",
             },
           },
           "children": [],
@@ -84,12 +83,14 @@ exports[`Parse JSX > bindGroup 1`] = `
           "bindings": {
             "checked": {
               "code": "state.tortilla === 'Plain'",
+              "type": "single",
             },
             "onChange": {
               "arguments": [
                 "event",
               ],
               "code": "state.tortilla = event.target.value",
+              "type": "single",
             },
           },
           "children": [],
@@ -106,12 +107,14 @@ exports[`Parse JSX > bindGroup 1`] = `
           "bindings": {
             "checked": {
               "code": "state.tortilla === 'Whole wheat'",
+              "type": "single",
             },
             "onChange": {
               "arguments": [
                 "event",
               ],
               "code": "state.tortilla = event.target.value",
+              "type": "single",
             },
           },
           "children": [],
@@ -128,12 +131,14 @@ exports[`Parse JSX > bindGroup 1`] = `
           "bindings": {
             "checked": {
               "code": "state.tortilla === 'Spinach'",
+              "type": "single",
             },
             "onChange": {
               "arguments": [
                 "event",
               ],
               "code": "state.tortilla = event.target.value",
+              "type": "single",
             },
           },
           "children": [],
@@ -168,12 +173,14 @@ exports[`Parse JSX > bindGroup 1`] = `
           "bindings": {
             "checked": {
               "code": "state.fillings === 'Rice'",
+              "type": "single",
             },
             "onChange": {
               "arguments": [
                 "event",
               ],
               "code": "state.fillings = event.target.value",
+              "type": "single",
             },
           },
           "children": [],
@@ -190,12 +197,14 @@ exports[`Parse JSX > bindGroup 1`] = `
           "bindings": {
             "checked": {
               "code": "state.fillings === 'Beans'",
+              "type": "single",
             },
             "onChange": {
               "arguments": [
                 "event",
               ],
               "code": "state.fillings = event.target.value",
+              "type": "single",
             },
           },
           "children": [],
@@ -212,12 +221,14 @@ exports[`Parse JSX > bindGroup 1`] = `
           "bindings": {
             "checked": {
               "code": "state.fillings === 'Cheese'",
+              "type": "single",
             },
             "onChange": {
               "arguments": [
                 "event",
               ],
               "code": "state.fillings = event.target.value",
+              "type": "single",
             },
           },
           "children": [],
@@ -234,12 +245,14 @@ exports[`Parse JSX > bindGroup 1`] = `
           "bindings": {
             "checked": {
               "code": "state.fillings === 'Guac (extra)'",
+              "type": "single",
             },
             "onChange": {
               "arguments": [
                 "event",
               ],
               "code": "state.fillings = event.target.value",
+              "type": "single",
             },
           },
           "children": [],
@@ -270,9 +283,8 @@ exports[`Parse JSX > bindGroup 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
-                  "arguments": undefined,
                   "code": "state.tortilla",
-                  "type": undefined,
+                  "type": "single",
                 },
               },
               "children": [],
@@ -306,9 +318,8 @@ exports[`Parse JSX > bindGroup 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
-                  "arguments": undefined,
                   "code": "state.fillings",
-                  "type": undefined,
+                  "type": "single",
                 },
               },
               "children": [],
@@ -363,9 +374,8 @@ exports[`Parse JSX > bindProperty 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "value": {
-          "arguments": undefined,
           "code": "state.value",
-          "type": undefined,
+          "type": "single",
         },
       },
       "children": [],
@@ -404,9 +414,8 @@ exports[`Parse JSX > classDirective 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "class": {
-          "arguments": undefined,
           "code": "\`form-input \${props.disabled ? 'disabled'  : ''} \${state.focus ? 'focus'  : ''}\`",
-          "type": undefined,
+          "type": "single",
         },
       },
       "children": [],
@@ -450,9 +459,8 @@ exports[`Parse JSX > context 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
-              "arguments": undefined,
               "code": "state.activeTab",
-              "type": undefined,
+              "type": "single",
             },
           },
           "children": [],
@@ -511,9 +519,8 @@ exports[`Parse JSX > each 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
-              "arguments": undefined,
               "code": "state.numbers",
-              "type": undefined,
+              "type": "single",
             },
           },
           "children": [
@@ -525,9 +532,8 @@ exports[`Parse JSX > each 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
-                      "arguments": undefined,
                       "code": "num",
-                      "type": undefined,
+                      "type": "single",
                     },
                   },
                   "children": [],
@@ -594,7 +600,7 @@ exports[`Parse JSX > eventHandlers 1`] = `
                 "a",
               ],
               "code": "state.log('hi')",
-              "type": undefined,
+              "type": "single",
             },
           },
           "children": [
@@ -621,7 +627,7 @@ exports[`Parse JSX > eventHandlers 1`] = `
             "onClick": {
               "arguments": undefined,
               "code": "state.log(event)",
-              "type": undefined,
+              "type": "single",
             },
           },
           "children": [
@@ -648,7 +654,7 @@ exports[`Parse JSX > eventHandlers 1`] = `
             "onClick": {
               "arguments": undefined,
               "code": "state.log(event)",
-              "type": undefined,
+              "type": "single",
             },
           },
           "children": [
@@ -710,9 +716,8 @@ exports[`Parse JSX > html 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "innerHTML": {
-          "arguments": undefined,
           "code": "state.html",
-          "type": undefined,
+          "type": "single",
         },
       },
       "children": [],
@@ -751,9 +756,8 @@ exports[`Parse JSX > ifElse 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "when": {
-          "arguments": undefined,
           "code": "state.show",
-          "type": undefined,
+          "type": "single",
         },
       },
       "children": [
@@ -763,7 +767,7 @@ exports[`Parse JSX > ifElse 1`] = `
             "onClick": {
               "arguments": undefined,
               "code": "state.toggle(event)",
-              "type": undefined,
+              "type": "single",
             },
           },
           "children": [
@@ -792,7 +796,7 @@ exports[`Parse JSX > ifElse 1`] = `
             "onClick": {
               "arguments": undefined,
               "code": "state.toggle(event)",
-              "type": undefined,
+              "type": "single",
             },
           },
           "children": [
@@ -858,9 +862,8 @@ exports[`Parse JSX > imports 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "disabled": {
-              "arguments": undefined,
               "code": "state.disabled",
-              "type": undefined,
+              "type": "single",
             },
           },
           "children": [
@@ -979,9 +982,8 @@ exports[`Parse JSX > reactive 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "value": {
-              "arguments": undefined,
               "code": "state.name",
-              "type": undefined,
+              "type": "single",
             },
           },
           "children": [],
@@ -1006,9 +1008,8 @@ exports[`Parse JSX > reactive 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
-              "arguments": undefined,
               "code": "state.lowercaseName",
-              "type": undefined,
+              "type": "single",
             },
           },
           "children": [],
@@ -1066,12 +1067,11 @@ exports[`Parse JSX > reactiveWithFn 1`] = `
                 "event",
               ],
               "code": "state.a = event.target.value",
-              "type": undefined,
+              "type": "single",
             },
             "value": {
-              "arguments": undefined,
               "code": "state.a",
-              "type": undefined,
+              "type": "single",
             },
           },
           "children": [],
@@ -1090,12 +1090,11 @@ exports[`Parse JSX > reactiveWithFn 1`] = `
                 "event",
               ],
               "code": "state.b = event.target.value",
-              "type": undefined,
+              "type": "single",
             },
             "value": {
-              "arguments": undefined,
               "code": "state.b",
-              "type": undefined,
+              "type": "single",
             },
           },
           "children": [],
@@ -1122,9 +1121,8 @@ exports[`Parse JSX > reactiveWithFn 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
-              "arguments": undefined,
               "code": "state.result",
-              "type": undefined,
+              "type": "single",
             },
           },
           "children": [],
@@ -1337,9 +1335,8 @@ exports[`Parse JSX > textExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
-              "arguments": undefined,
               "code": "state.a + state.b",
-              "type": undefined,
+              "type": "single",
             },
           },
           "children": [],
@@ -1374,9 +1371,8 @@ exports[`Parse JSX > textExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
-              "arguments": undefined,
               "code": "state.a > 2 ? 'hello' : 'bye'",
-              "type": undefined,
+              "type": "single",
             },
           },
           "children": [],
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 713d4d6367..fccc2b97a1 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -5984,13 +5984,13 @@ function SmileReviews(props) {
         {state.showReviewPrompt || \\"asdf\\" ? (
           <>
             <input placeholder=\\"Email\\" />
-            <input placeholder=\\"Title\\" className=\\"input-3a46cf08\\" />
+            <input placeholder=\\"Title\\" className=\\"input-68afa6b4\\" />
             <textarea
               placeholder=\\"How was your experience?\\"
-              className=\\"textarea-3a46cf08\\"
+              className=\\"textarea-68afa6b4\\"
             />
             <button
-              className=\\"button-3a46cf08\\"
+              className=\\"button-68afa6b4\\"
               onClick={(event) => {
                 event.preventDefault();
                 state.showReviewPrompt = false;
@@ -6002,8 +6002,8 @@ function SmileReviews(props) {
         ) : null}
 
         {state.reviews?.map((review, index) => (
-          <div className=\\"review-3a46cf08\\" key={review.id}>
-            <img className=\\"img-3a46cf08\\" src={review.avatar} />
+          <div className=\\"review-68afa6b4\\" key={review.id}>
+            <img className=\\"img-68afa6b4\\" src={review.avatar} />
 
             <div
               className={state.showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}
@@ -6020,20 +6020,20 @@ function SmileReviews(props) {
           </div>
         ))}
       </div>
-      <style>{\`.input-3a46cf08 {
+      <style>{\`.input-68afa6b4 {
 display: block;
-}.textarea-3a46cf08 {
+}.textarea-68afa6b4 {
 display: block;
-}.button-3a46cf08 {
+}.button-68afa6b4 {
 display: block;
-}.review-3a46cf08 {
+}.review-68afa6b4 {
 margin: 10px;
 padding: 10px;
 background: white;
 display: flex;
 border-radius: 5px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}.img-3a46cf08 {
+}.img-68afa6b4 {
 height: 30px;
 width: 30px;
 margin-right: 10px;
@@ -6090,13 +6090,13 @@ export default function SmileReviews(props) {
         {showReviewPrompt || \\"asdf\\" ? (
           <>
             <input placeholder=\\"Email\\" />
-            <input placeholder=\\"Title\\" className=\\"input-857f8768\\" />
+            <input placeholder=\\"Title\\" className=\\"input-bd83d79c\\" />
             <textarea
               placeholder=\\"How was your experience?\\"
-              className=\\"textarea-857f8768\\"
+              className=\\"textarea-bd83d79c\\"
             />
             <button
-              className=\\"button-857f8768\\"
+              className=\\"button-bd83d79c\\"
               onClick={(event) => {
                 event.preventDefault();
                 setShowReviewPrompt(false);
@@ -6108,8 +6108,8 @@ export default function SmileReviews(props) {
         ) : null}
 
         {reviews?.map((review, index) => (
-          <div className=\\"review-857f8768\\" key={review.id}>
-            <img className=\\"img-857f8768\\" src={review.avatar} />
+          <div className=\\"review-bd83d79c\\" key={review.id}>
+            <img className=\\"img-bd83d79c\\" src={review.avatar} />
 
             <div className={showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}>
               <div>
@@ -6124,20 +6124,20 @@ export default function SmileReviews(props) {
           </div>
         ))}
       </div>
-      <style>{\`.input-857f8768 {
+      <style>{\`.input-bd83d79c {
 display: block;
-}.textarea-857f8768 {
+}.textarea-bd83d79c {
 display: block;
-}.button-857f8768 {
+}.button-bd83d79c {
 display: block;
-}.review-857f8768 {
+}.review-bd83d79c {
 margin: 10px;
 padding: 10px;
 background: white;
 display: flex;
 border-radius: 5px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}.img-857f8768 {
+}.img-bd83d79c {
 height: 30px;
 width: 30px;
 margin-right: 10px;
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index b20f2a5389..992bc9b2b7 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -22,7 +22,7 @@ export default function MyBasicRefComponent(props) {
       <div>
         {props.showInput ? (
           <>
-            <input className=\\"input-9fa26074\\" value={state.name} />
+            <input className=\\"input-37c780bb\\" value={state.name} />
 
             <label htmlFor=\\"cars\\">Choose a car:</label>
 
@@ -37,7 +37,7 @@ export default function MyBasicRefComponent(props) {
         {state.lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-9fa26074 {
+      <style>{\`.input-37c780bb {
 color: red;
 }\`}</style>
     </>
@@ -67,11 +67,11 @@ export default function MyBasicComponent(props) {
 
   return (
     <>
-      <div className=\\"test div-1b7dd817\\">
+      <div className=\\"test div-251ed544\\">
         <input value={DEFAULT_VALUES.name || state.name} />
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-1b7dd817 {
+      <style>{\`.div-251ed544 {
 padding: 10px;
 }\`}</style>
     </>
@@ -271,7 +271,7 @@ export default function MyBasicRefComponent(props) {
       <div>
         {props.showInput ? (
           <>
-            <input className=\\"input-9fa26074\\" value={state.name} />
+            <input className=\\"input-37c780bb\\" value={state.name} />
 
             <label htmlFor=\\"cars\\">Choose a car:</label>
 
@@ -286,7 +286,7 @@ export default function MyBasicRefComponent(props) {
         {state.lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-9fa26074 {
+      <style>{\`.input-37c780bb {
 color: red;
 }\`}</style>
     </>
@@ -415,21 +415,21 @@ export default function Column(props) {
 
   return (
     <>
-      <div className=\\"builder-columns div-47a9ecfb\\">
+      <div className=\\"builder-columns div-033a66b8\\">
         {props.columns?.map((column, index) => (
-          <div className=\\"builder-column div-47a9ecfb-2\\">
+          <div className=\\"builder-column div-033a66b8-2\\">
             {column.content}
 
             {index}
           </div>
         ))}
       </div>
-      <style>{\`.div-47a9ecfb {
+      <style>{\`.div-033a66b8 {
 display: flex;
 flex-direction: column;
 align-items: stretch;
 line-height: normal;
-}@media (max-width: 999px) { .div-47a9ecfb {   flex-direction: row; } }@media (max-width: 639px) { .div-47a9ecfb {   flex-direction: row-reverse; } }.div-47a9ecfb-2 {
+}@media (max-width: 999px) { .div-033a66b8 {   flex-direction: row; } }@media (max-width: 639px) { .div-033a66b8 {   flex-direction: row-reverse; } }.div-033a66b8-2 {
 flex-grow: 1;
 }\`}</style>
     </>
@@ -860,7 +860,7 @@ export default function FormComponent(props) {
         ) : null}{\\" \\"}
         {state.submissionState === \\"error\\" && state.responseData ? (
           <>
-            <pre className=\\"builder-form-error-text pre-3f22586c\\">
+            <pre className=\\"builder-form-error-text pre-170708b2\\">
               {\\" \\"}
               {JSON.stringify(state.responseData, null, 2)}{\\" \\"}
             </pre>
@@ -876,7 +876,7 @@ export default function FormComponent(props) {
           </>
         ) : null}{\\" \\"}
       </form>{\\" \\"}
-      <style>{\`.pre-3f22586c { padding: 10px; color: red; text-align: center; }\`}</style>{\\" \\"}
+      <style>{\`.pre-170708b2 { padding: 10px; color: red; text-align: center; }\`}</style>{\\" \\"}
     </>
   );
 }
@@ -920,7 +920,7 @@ export default function Image(props) {
                 className={
                   \\"builder-image\\" +
                   (props._class ? \\" \\" + props._class : \\"\\") +
-                  \\" img-6748f1f2\\"
+                  \\" img-ccac6a98\\"
                 }
                 src={props.image}
                 srcset={props.srcset}
@@ -934,7 +934,7 @@ export default function Image(props) {
 
         {props.children}
       </div>
-      <style>{\`.img-6748f1f2 {
+      <style>{\`.img-ccac6a98 {
 opacity: 1;
 transition: opacity 0.2s ease-in-out;
 object-fit: cover;
@@ -1180,18 +1180,18 @@ export default function SmileReviews(props) {
         {state.showReviewPrompt || \\"asdf\\" ? (
           <>
             <input placeholder=\\"Email\\" />
-            <input placeholder=\\"Title\\" className=\\"input-31d03b9e\\" />
+            <input placeholder=\\"Title\\" className=\\"input-000d4b30\\" />
             <textarea
               placeholder=\\"How was your experience?\\"
-              className=\\"textarea-31d03b9e\\"
+              className=\\"textarea-000d4b30\\"
             />
-            <button className=\\"button-31d03b9e\\">Submit</button>
+            <button className=\\"button-000d4b30\\">Submit</button>
           </>
         ) : null}
 
         {state.reviews?.map((review, index) => (
-          <div className=\\"review-31d03b9e\\" key={review.id}>
-            <img className=\\"img-31d03b9e\\" src={review.avatar} />
+          <div className=\\"review-000d4b30\\" key={review.id}>
+            <img className=\\"img-000d4b30\\" src={review.avatar} />
 
             <div
               className={state.showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}
@@ -1208,20 +1208,20 @@ export default function SmileReviews(props) {
           </div>
         ))}
       </div>
-      <style>{\`.input-31d03b9e {
+      <style>{\`.input-000d4b30 {
 display: block;
-}.textarea-31d03b9e {
+}.textarea-000d4b30 {
 display: block;
-}.button-31d03b9e {
+}.button-000d4b30 {
 display: block;
-}.review-31d03b9e {
+}.review-000d4b30 {
 margin: 10px;
 padding: 10px;
 background: white;
 display: flex;
 border-radius: 5px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}.img-31d03b9e {
+}.img-000d4b30 {
 height: 30px;
 width: 30px;
 margin-right: 10px;
@@ -1363,9 +1363,9 @@ export default function MyBasicForwardRefComponent(props) {
   return (
     <>
       <div>
-        <input className=\\"input-49d4be1e\\" value={state.name} />
+        <input className=\\"input-346a570f\\" value={state.name} />
       </div>
-      <style>{\`.input-49d4be1e {
+      <style>{\`.input-346a570f {
 color: red;
 }\`}</style>
     </>
@@ -1385,9 +1385,9 @@ export default forwardRef(function MyBasicForwardRefComponent(props, inputRef) {
   return (
     <>
       <div>
-        <input className=\\"input-110f222e\\" value={state.name} />
+        <input className=\\"input-52d8b09f\\" value={state.name} />
       </div>
-      <style>{\`.input-110f222e {
+      <style>{\`.input-52d8b09f {
 color: red;
 }\`}</style>
     </>
@@ -1422,10 +1422,10 @@ export default function MyBasicComponent(props) {
 
   return (
     <>
-      <div className=\\"test2 test div-3e2c6b1c\\">
+      <div className=\\"test2 test div-0a30b052\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-3e2c6b1c {
+      <style>{\`.div-0a30b052 {
 padding: 10px;
 }\`}</style>
     </>
@@ -1442,10 +1442,10 @@ export default function MyBasicComponent(props) {
 
   return (
     <>
-      <div className=\\"test div-2d73eb46\\">
+      <div className=\\"test div-3e236934\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-2d73eb46 {
+      <style>{\`.div-3e236934 {
 padding: 10px;
 }\`}</style>
     </>
@@ -1462,10 +1462,10 @@ export default function MyBasicComponent(props) {
 
   return (
     <>
-      <div className=\\"test div-2d73eb46\\">
+      <div className=\\"test div-3e236934\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-2d73eb46 {
+      <style>{\`.div-3e236934 {
 padding: 10px;
 }\`}</style>
     </>
@@ -1509,12 +1509,12 @@ export default function MyBasicComponent(props) {
   return (
     <>
       <div
-        className={state.classState + \\" div-788e1d1e\\"}
+        className={state.classState + \\" div-a140d134\\"}
         style={state.styleState}
       >
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-788e1d1e {
+      <style>{\`.div-a140d134 {
 padding: 10px;
 }\`}</style>
     </>
@@ -1816,13 +1816,13 @@ export default function NestedStyles(props) {
 
   return (
     <>
-      <div className=\\"div-28db5af5\\">Hello world</div>
-      <style>{\`.div-28db5af5 {
+      <div className=\\"div-caf6a574\\">Hello world</div>
+      <style>{\`.div-caf6a574 {
 display: flex;
 foo: var(--bar);
-}@media (max-width: env(--mobile)) { .div-28db5af5 {   display: block; } }.div-28db5af5:hover {
+}@media (max-width: env(--mobile)) { .div-caf6a574 {   display: block; } }.div-caf6a574:hover {
 display: flex;
-}.div-28db5af5 .nested-selector {
+}.div-caf6a574 .nested-selector {
 display: grid;
 }\`}</style>
     </>
@@ -2300,10 +2300,10 @@ export default function RenderContent(props) {
 
   return (
     <>
-      <div className=\\"div-0c70c6dc\\">
+      <div className=\\"div-a387715c\\">
         <RenderBlocks blocks={props.content.blocks} _context={_context} />
       </div>
-      <style>{\`.div-0c70c6dc {
+      <style>{\`.div-a387715c {
 display: flex;
 flex-direction: columns;
 }\`}</style>
@@ -2562,10 +2562,10 @@ export default function MyComponent(props) {
 
   return (
     <>
-      <button type=\\"button\\" className=\\"button-07aeef55\\">
+      <button type=\\"button\\" className=\\"button-4fd6647d\\">
         Button
       </button>
-      <style>{\`.button-07aeef55 {
+      <style>{\`.button-4fd6647d {
 background: blue;
 color: white;
 }
@@ -2649,7 +2649,7 @@ export default function MyBasicRefComponent(props: Props) {
       <div>
         {props.showInput ? (
           <>
-            <input className=\\"input-9fa26074\\" value={state.name} />
+            <input className=\\"input-37c780bb\\" value={state.name} />
 
             <label htmlFor=\\"cars\\">Choose a car:</label>
 
@@ -2664,7 +2664,7 @@ export default function MyBasicRefComponent(props: Props) {
         {state.lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-9fa26074 {
+      <style>{\`.input-37c780bb {
 color: red;
 }\`}</style>
     </>
@@ -2698,11 +2698,11 @@ export default function MyBasicComponent(props: MyBasicComponentProps) {
 
   return (
     <>
-      <div className=\\"test div-1b7dd817\\">
+      <div className=\\"test div-251ed544\\">
         <input value={DEFAULT_VALUES.name || state.name} />
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-1b7dd817 {
+      <style>{\`.div-251ed544 {
 padding: 10px;
 }\`}</style>
     </>
@@ -2916,7 +2916,7 @@ export default function MyBasicRefComponent(props: Props) {
       <div>
         {props.showInput ? (
           <>
-            <input className=\\"input-9fa26074\\" value={state.name} />
+            <input className=\\"input-37c780bb\\" value={state.name} />
 
             <label htmlFor=\\"cars\\">Choose a car:</label>
 
@@ -2931,7 +2931,7 @@ export default function MyBasicRefComponent(props: Props) {
         {state.lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-9fa26074 {
+      <style>{\`.input-37c780bb {
 color: red;
 }\`}</style>
     </>
@@ -3090,21 +3090,21 @@ export default function Column(props: ColumnProps) {
 
   return (
     <>
-      <div className=\\"builder-columns div-47a9ecfb\\">
+      <div className=\\"builder-columns div-033a66b8\\">
         {props.columns?.map((column, index) => (
-          <div className=\\"builder-column div-47a9ecfb-2\\">
+          <div className=\\"builder-column div-033a66b8-2\\">
             {column.content}
 
             {index}
           </div>
         ))}
       </div>
-      <style>{\`.div-47a9ecfb {
+      <style>{\`.div-033a66b8 {
 display: flex;
 flex-direction: column;
 align-items: stretch;
 line-height: normal;
-}@media (max-width: 999px) { .div-47a9ecfb {   flex-direction: row; } }@media (max-width: 639px) { .div-47a9ecfb {   flex-direction: row-reverse; } }.div-47a9ecfb-2 {
+}@media (max-width: 999px) { .div-033a66b8 {   flex-direction: row; } }@media (max-width: 639px) { .div-033a66b8 {   flex-direction: row-reverse; } }.div-033a66b8-2 {
 flex-grow: 1;
 }\`}</style>
     </>
@@ -3578,7 +3578,7 @@ export default function FormComponent(props: FormProps) {
         ) : null}{\\" \\"}
         {state.submissionState === \\"error\\" && state.responseData ? (
           <>
-            <pre className=\\"builder-form-error-text pre-3f22586c\\">
+            <pre className=\\"builder-form-error-text pre-170708b2\\">
               {\\" \\"}
               {JSON.stringify(state.responseData, null, 2)}{\\" \\"}
             </pre>
@@ -3594,7 +3594,7 @@ export default function FormComponent(props: FormProps) {
           </>
         ) : null}{\\" \\"}
       </form>{\\" \\"}
-      <style>{\`.pre-3f22586c { padding: 10px; color: red; text-align: center; }\`}</style>{\\" \\"}
+      <style>{\`.pre-170708b2 { padding: 10px; color: red; text-align: center; }\`}</style>{\\" \\"}
     </>
   );
 }
@@ -3657,7 +3657,7 @@ export default function Image(props: ImageProps) {
                 className={
                   \\"builder-image\\" +
                   (props._class ? \\" \\" + props._class : \\"\\") +
-                  \\" img-6748f1f2\\"
+                  \\" img-ccac6a98\\"
                 }
                 src={props.image}
                 srcset={props.srcset}
@@ -3671,7 +3671,7 @@ export default function Image(props: ImageProps) {
 
         {props.children}
       </div>
-      <style>{\`.img-6748f1f2 {
+      <style>{\`.img-ccac6a98 {
 opacity: 1;
 transition: opacity 0.2s ease-in-out;
 object-fit: cover;
@@ -3990,18 +3990,18 @@ export default function SmileReviews(props: SmileReviewsProps) {
         {state.showReviewPrompt || \\"asdf\\" ? (
           <>
             <input placeholder=\\"Email\\" />
-            <input placeholder=\\"Title\\" className=\\"input-31d03b9e\\" />
+            <input placeholder=\\"Title\\" className=\\"input-000d4b30\\" />
             <textarea
               placeholder=\\"How was your experience?\\"
-              className=\\"textarea-31d03b9e\\"
+              className=\\"textarea-000d4b30\\"
             />
-            <button className=\\"button-31d03b9e\\">Submit</button>
+            <button className=\\"button-000d4b30\\">Submit</button>
           </>
         ) : null}
 
         {state.reviews?.map((review, index) => (
-          <div className=\\"review-31d03b9e\\" key={review.id}>
-            <img className=\\"img-31d03b9e\\" src={review.avatar} />
+          <div className=\\"review-000d4b30\\" key={review.id}>
+            <img className=\\"img-000d4b30\\" src={review.avatar} />
 
             <div
               className={state.showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}
@@ -4018,20 +4018,20 @@ export default function SmileReviews(props: SmileReviewsProps) {
           </div>
         ))}
       </div>
-      <style>{\`.input-31d03b9e {
+      <style>{\`.input-000d4b30 {
 display: block;
-}.textarea-31d03b9e {
+}.textarea-000d4b30 {
 display: block;
-}.button-31d03b9e {
+}.button-000d4b30 {
 display: block;
-}.review-31d03b9e {
+}.review-000d4b30 {
 margin: 10px;
 padding: 10px;
 background: white;
 display: flex;
 border-radius: 5px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}.img-31d03b9e {
+}.img-000d4b30 {
 height: 30px;
 width: 30px;
 margin-right: 10px;
@@ -4226,9 +4226,9 @@ export default function MyBasicForwardRefComponent(props: Props) {
   return (
     <>
       <div>
-        <input className=\\"input-49d4be1e\\" value={state.name} />
+        <input className=\\"input-346a570f\\" value={state.name} />
       </div>
-      <style>{\`.input-49d4be1e {
+      <style>{\`.input-346a570f {
 color: red;
 }\`}</style>
     </>
@@ -4256,9 +4256,9 @@ export default forwardRef(function MyBasicForwardRefComponent(
   return (
     <>
       <div>
-        <input className=\\"input-110f222e\\" value={state.name} />
+        <input className=\\"input-52d8b09f\\" value={state.name} />
       </div>
-      <style>{\`.input-110f222e {
+      <style>{\`.input-52d8b09f {
 color: red;
 }\`}</style>
     </>
@@ -4293,10 +4293,10 @@ export default function MyBasicComponent(props: any) {
 
   return (
     <>
-      <div className=\\"test2 test div-3e2c6b1c\\">
+      <div className=\\"test2 test div-0a30b052\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-3e2c6b1c {
+      <style>{\`.div-0a30b052 {
 padding: 10px;
 }\`}</style>
     </>
@@ -4313,10 +4313,10 @@ export default function MyBasicComponent(props: any) {
 
   return (
     <>
-      <div className=\\"test div-2d73eb46\\">
+      <div className=\\"test div-3e236934\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-2d73eb46 {
+      <style>{\`.div-3e236934 {
 padding: 10px;
 }\`}</style>
     </>
@@ -4333,10 +4333,10 @@ export default function MyBasicComponent(props: any) {
 
   return (
     <>
-      <div className=\\"test div-2d73eb46\\">
+      <div className=\\"test div-3e236934\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-2d73eb46 {
+      <style>{\`.div-3e236934 {
 padding: 10px;
 }\`}</style>
     </>
@@ -4385,12 +4385,12 @@ export default function MyBasicComponent(props: any) {
   return (
     <>
       <div
-        className={state.classState + \\" div-788e1d1e\\"}
+        className={state.classState + \\" div-a140d134\\"}
         style={state.styleState}
       >
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-788e1d1e {
+      <style>{\`.div-a140d134 {
 padding: 10px;
 }\`}</style>
     </>
@@ -4735,13 +4735,13 @@ export default function NestedStyles(props: any) {
 
   return (
     <>
-      <div className=\\"div-28db5af5\\">Hello world</div>
-      <style>{\`.div-28db5af5 {
+      <div className=\\"div-caf6a574\\">Hello world</div>
+      <style>{\`.div-caf6a574 {
 display: flex;
 foo: var(--bar);
-}@media (max-width: env(--mobile)) { .div-28db5af5 {   display: block; } }.div-28db5af5:hover {
+}@media (max-width: env(--mobile)) { .div-caf6a574 {   display: block; } }.div-caf6a574:hover {
 display: flex;
-}.div-28db5af5 .nested-selector {
+}.div-caf6a574 .nested-selector {
 display: grid;
 }\`}</style>
     </>
@@ -5285,10 +5285,10 @@ export default function RenderContent(props: Props) {
 
   return (
     <>
-      <div className=\\"div-0c70c6dc\\">
+      <div className=\\"div-a387715c\\">
         <RenderBlocks blocks={props.content.blocks} _context={_context} />
       </div>
-      <style>{\`.div-0c70c6dc {
+      <style>{\`.div-a387715c {
 display: flex;
 flex-direction: columns;
 }\`}</style>
@@ -5569,10 +5569,10 @@ export default function MyComponent(props: any) {
 
   return (
     <>
-      <button type=\\"button\\" className=\\"button-07aeef55\\">
+      <button type=\\"button\\" className=\\"button-4fd6647d\\">
         Button
       </button>
-      <style>{\`.button-07aeef55 {
+      <style>{\`.button-4fd6647d {
 background: blue;
 color: white;
 }
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index fe07cfe3ae..3d8ccc4616 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -88,7 +88,7 @@ function MyBasicRefComponent(props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-6d81d00c\\"
+              class=\\"input-593943a4\\"
               ref={inputRef}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -108,7 +108,7 @@ function MyBasicRefComponent(props) {
         Component!
       </div>
       <style jsx>{\`
-        .input-6d81d00c {
+        .input-593943a4 {
           color: red;
         }
       \`}</style>
@@ -220,7 +220,7 @@ function MyBasicComponent(props) {
 
   return (
     <>
-      <div class=\\"test div-5cae5810\\">
+      <div class=\\"test div-0de70668\\">
         <input
           value={DEFAULT_VALUES.name || name()}
           onInput={(myEvent) => setName(myEvent.target.value)}
@@ -228,7 +228,7 @@ function MyBasicComponent(props) {
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
       <style jsx>{\`
-        .div-5cae5810 {
+        .div-0de70668 {
           padding: 10px;
         }
       \`}</style>
@@ -782,7 +782,7 @@ function MyBasicRefComponent(props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-6e2a3a12\\"
+              class=\\"input-c02ab02c\\"
               ref={inputRef}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -802,7 +802,7 @@ function MyBasicRefComponent(props) {
         Component!
       </div>
       <style jsx>{\`
-        .input-6e2a3a12 {
+        .input-c02ab02c {
           color: red;
         }
       \`}</style>
@@ -1102,12 +1102,12 @@ function Column(props) {
 
   return (
     <>
-      <div class=\\"builder-columns div-8dfe73ba\\">
+      <div class=\\"builder-columns div-f5d75200\\">
         <For each={props.columns}>
           {(column, _index) => {
             const index = _index();
             return (
-              <div class=\\"builder-column div-8dfe73ba-2\\">
+              <div class=\\"builder-column div-f5d75200-2\\">
                 {column.content}
                 {index}
               </div>
@@ -1116,23 +1116,23 @@ function Column(props) {
         </For>
       </div>
       <style jsx>{\`
-        .div-8dfe73ba {
+        .div-f5d75200 {
           display: flex;
           flex-direction: column;
           align-items: stretch;
           line-height: normal;
         }
         @media (max-width: 999px) {
-          .div-8dfe73ba {
+          .div-f5d75200 {
             flex-direction: row;
           }
         }
         @media (max-width: 639px) {
-          .div-8dfe73ba {
+          .div-f5d75200 {
             flex-direction: row-reverse;
           }
         }
-        .div-8dfe73ba-2 {
+        .div-f5d75200-2 {
           flex-grow: 1;
         }
       \`}</style>
@@ -2102,7 +2102,7 @@ function FormComponent(props) {
           ></BuilderBlocks>
         </Show>
         <Show when={submissionState() === \\"error\\" && responseData()}>
-          <pre class=\\"builder-form-error-text pre-59d4f3a7\\">
+          <pre class=\\"builder-form-error-text pre-2d2d05c3\\">
             {JSON.stringify(responseData(), null, 2)}
           </pre>
         </Show>
@@ -2114,7 +2114,7 @@ function FormComponent(props) {
         </Show>
       </form>
       <style jsx>{\`
-        .pre-59d4f3a7 {
+        .pre-2d2d05c3 {
           padding: 10px;
           color: red;
           text-align: center;
@@ -2280,7 +2280,7 @@ function Image(props) {
               class={
                 \\"builder-image\\" +
                 (props._class ? \\" \\" + props._class : \\"\\") +
-                \\" img-7ed5bbbe\\"
+                \\" img-0a07dada\\"
               }
               alt={props.altText}
               aria-role={props.altText ? \\"presentation\\" : undefined}
@@ -2295,7 +2295,7 @@ function Image(props) {
         {props.children}
       </div>
       <style jsx>{\`
-        .img-7ed5bbbe {
+        .img-0a07dada {
           opacity: 1;
           transition: opacity 0.2s ease-in-out;
           object-fit: cover;
@@ -2992,13 +2992,13 @@ function SmileReviews(props) {
         </button>
         <Show when={showReviewPrompt() || \\"asdf\\"}>
           <input placeholder=\\"Email\\" />
-          <input class=\\"input-ea741630\\" placeholder=\\"Title\\" />
+          <input class=\\"input-4bfe25f8\\" placeholder=\\"Title\\" />
           <textarea
-            class=\\"textarea-ea741630\\"
+            class=\\"textarea-4bfe25f8\\"
             placeholder=\\"How was your experience?\\"
           ></textarea>
           <button
-            class=\\"button-ea741630\\"
+            class=\\"button-4bfe25f8\\"
             onClick={(event) => {
               event.preventDefault();
               setShowReviewPrompt(false);
@@ -3011,8 +3011,8 @@ function SmileReviews(props) {
           {(review, _index) => {
             const index = _index();
             return (
-              <div class=\\"div-ea741630\\" key={review.id}>
-                <img class=\\"img-ea741630\\" src={review.avatar} />
+              <div class=\\"div-4bfe25f8\\" key={review.id}>
+                <img class=\\"img-4bfe25f8\\" src={review.avatar} />
                 <div class={showReviewPrompt() ? \\"bg-primary\\" : \\"bg-secondary\\"}>
                   <div>
                     N:
@@ -3027,16 +3027,16 @@ function SmileReviews(props) {
         </For>
       </div>
       <style jsx>{\`
-        .input-ea741630 {
+        .input-4bfe25f8 {
           display: block;
         }
-        .textarea-ea741630 {
+        .textarea-4bfe25f8 {
           display: block;
         }
-        .button-ea741630 {
+        .button-4bfe25f8 {
           display: block;
         }
-        .div-ea741630 {
+        .div-4bfe25f8 {
           margin: 10px;
           padding: 10px;
           background: white;
@@ -3044,7 +3044,7 @@ function SmileReviews(props) {
           border-radius: 5px;
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         }
-        .img-ea741630 {
+        .img-4bfe25f8 {
           height: 30px;
           width: 30px;
           margin-right: 10px;
@@ -3410,11 +3410,11 @@ exports[`Solid > jsx > Javascript Test > class + ClassName + css 2`] = `
 function MyBasicComponent(props) {
   return (
     <>
-      <div class=\\"test2 test div-45c59d97\\">
+      <div class=\\"test2 test div-240d4a4d\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
       <style jsx>{\`
-        .div-45c59d97 {
+        .div-240d4a4d {
           padding: 10px;
         }
       \`}</style>
@@ -3454,11 +3454,11 @@ exports[`Solid > jsx > Javascript Test > class + css 2`] = `
 function MyBasicComponent(props) {
   return (
     <>
-      <div class=\\"test div-74a0302e\\">
+      <div class=\\"test div-210be817\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
       <style jsx>{\`
-        .div-74a0302e {
+        .div-210be817 {
           padding: 10px;
         }
       \`}</style>
@@ -3498,11 +3498,11 @@ exports[`Solid > jsx > Javascript Test > className + css 2`] = `
 function MyBasicComponent(props) {
   return (
     <>
-      <div class=\\"test div-74a0302e\\">
+      <div class=\\"test div-210be817\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
       <style jsx>{\`
-        .div-74a0302e {
+        .div-210be817 {
           padding: 10px;
         }
       \`}</style>
@@ -3600,11 +3600,11 @@ function MyBasicComponent(props) {
 
   return (
     <>
-      <div class={classState() + \\" div-24c4ffce\\"} style={styleState()}>
+      <div class={classState() + \\" div-db099e36\\"} style={styleState()}>
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
       <style jsx>{\`
-        .div-24c4ffce {
+        .div-db099e36 {
           padding: 10px;
         }
       \`}</style>
@@ -4297,21 +4297,21 @@ exports[`Solid > jsx > Javascript Test > nestedStyles 2`] = `
 function NestedStyles(props) {
   return (
     <>
-      <div class=\\"div-92502f5c\\">Hello world</div>
+      <div class=\\"div-04b41bf9\\">Hello world</div>
       <style jsx>{\`
-        .div-92502f5c {
+        .div-04b41bf9 {
           display: flex;
           foo: var(--bar);
         }
         @media (max-width: env(--mobile)) {
-          .div-92502f5c {
+          .div-04b41bf9 {
             display: block;
           }
         }
-        .div-92502f5c:hover {
+        .div-04b41bf9:hover {
           display: flex;
         }
-        .div-92502f5c .nested-selector {
+        .div-04b41bf9 .nested-selector {
           display: grid;
         }
       \`}</style>
@@ -5376,14 +5376,14 @@ function RenderContent(props) {
         }}
       >
         <div
-          class=\\"div-6c469b00\\"
+          class=\\"div-aeca8ad0\\"
           onClick={(event) => trackClick(props.content.id)}
         >
           <RenderBlocks blocks={props.content.blocks}></RenderBlocks>
         </div>
       </BuilderContext.Provider>
       <style jsx>{\`
-        .div-6c469b00 {
+        .div-aeca8ad0 {
           display: flex;
           flex-direction: columns;
         }
@@ -5873,11 +5873,11 @@ exports[`Solid > jsx > Javascript Test > use-style-and-css 2`] = `
 function MyComponent(props) {
   return (
     <>
-      <button class=\\"button-625c33fa\\" type=\\"button\\">
+      <button class=\\"button-0b7811fa\\" type=\\"button\\">
         Button
       </button>
       <style jsx>{\`
-        .button-625c33fa {
+        .button-0b7811fa {
           background: blue;
           color: white;
         }
@@ -6063,7 +6063,7 @@ function MyBasicRefComponent(props: Props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-6d81d00c\\"
+              class=\\"input-593943a4\\"
               ref={inputRef!}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -6083,7 +6083,7 @@ function MyBasicRefComponent(props: Props) {
         Component!
       </div>
       <style jsx>{\`
-        .input-6d81d00c {
+        .input-593943a4 {
           color: red;
         }
       \`}</style>
@@ -6201,7 +6201,7 @@ function MyBasicComponent(props: MyBasicComponentProps) {
 
   return (
     <>
-      <div class=\\"test div-5cae5810\\">
+      <div class=\\"test div-0de70668\\">
         <input
           value={DEFAULT_VALUES.name || name()}
           onInput={(myEvent) => setName(myEvent.target.value)}
@@ -6209,7 +6209,7 @@ function MyBasicComponent(props: MyBasicComponentProps) {
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
       <style jsx>{\`
-        .div-5cae5810 {
+        .div-0de70668 {
           padding: 10px;
         }
       \`}</style>
@@ -6787,7 +6787,7 @@ function MyBasicRefComponent(props: Props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-6e2a3a12\\"
+              class=\\"input-c02ab02c\\"
               ref={inputRef!}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -6807,7 +6807,7 @@ function MyBasicRefComponent(props: Props) {
         Component!
       </div>
       <style jsx>{\`
-        .input-6e2a3a12 {
+        .input-c02ab02c {
           color: red;
         }
       \`}</style>
@@ -7162,12 +7162,12 @@ function Column(props: ColumnProps) {
 
   return (
     <>
-      <div class=\\"builder-columns div-8dfe73ba\\">
+      <div class=\\"builder-columns div-f5d75200\\">
         <For each={props.columns}>
           {(column, _index) => {
             const index = _index();
             return (
-              <div class=\\"builder-column div-8dfe73ba-2\\">
+              <div class=\\"builder-column div-f5d75200-2\\">
                 {column.content}
                 {index}
               </div>
@@ -7176,23 +7176,23 @@ function Column(props: ColumnProps) {
         </For>
       </div>
       <style jsx>{\`
-        .div-8dfe73ba {
+        .div-f5d75200 {
           display: flex;
           flex-direction: column;
           align-items: stretch;
           line-height: normal;
         }
         @media (max-width: 999px) {
-          .div-8dfe73ba {
+          .div-f5d75200 {
             flex-direction: row;
           }
         }
         @media (max-width: 639px) {
-          .div-8dfe73ba {
+          .div-f5d75200 {
             flex-direction: row-reverse;
           }
         }
-        .div-8dfe73ba-2 {
+        .div-f5d75200-2 {
           flex-grow: 1;
         }
       \`}</style>
@@ -8242,7 +8242,7 @@ function FormComponent(props: FormProps) {
           ></BuilderBlocks>
         </Show>
         <Show when={submissionState() === \\"error\\" && responseData()}>
-          <pre class=\\"builder-form-error-text pre-59d4f3a7\\">
+          <pre class=\\"builder-form-error-text pre-2d2d05c3\\">
             {JSON.stringify(responseData(), null, 2)}
           </pre>
         </Show>
@@ -8254,7 +8254,7 @@ function FormComponent(props: FormProps) {
         </Show>
       </form>
       <style jsx>{\`
-        .pre-59d4f3a7 {
+        .pre-2d2d05c3 {
           padding: 10px;
           color: red;
           text-align: center;
@@ -8456,7 +8456,7 @@ function Image(props: ImageProps) {
               class={
                 \\"builder-image\\" +
                 (props._class ? \\" \\" + props._class : \\"\\") +
-                \\" img-7ed5bbbe\\"
+                \\" img-0a07dada\\"
               }
               alt={props.altText}
               aria-role={props.altText ? \\"presentation\\" : undefined}
@@ -8471,7 +8471,7 @@ function Image(props: ImageProps) {
         {props.children}
       </div>
       <style jsx>{\`
-        .img-7ed5bbbe {
+        .img-0a07dada {
           opacity: 1;
           transition: opacity 0.2s ease-in-out;
           object-fit: cover;
@@ -9308,13 +9308,13 @@ function SmileReviews(props: SmileReviewsProps) {
         </button>
         <Show when={showReviewPrompt() || \\"asdf\\"}>
           <input placeholder=\\"Email\\" />
-          <input class=\\"input-ea741630\\" placeholder=\\"Title\\" />
+          <input class=\\"input-4bfe25f8\\" placeholder=\\"Title\\" />
           <textarea
-            class=\\"textarea-ea741630\\"
+            class=\\"textarea-4bfe25f8\\"
             placeholder=\\"How was your experience?\\"
           ></textarea>
           <button
-            class=\\"button-ea741630\\"
+            class=\\"button-4bfe25f8\\"
             onClick={(event) => {
               event.preventDefault();
               setShowReviewPrompt(false);
@@ -9327,8 +9327,8 @@ function SmileReviews(props: SmileReviewsProps) {
           {(review, _index) => {
             const index = _index();
             return (
-              <div class=\\"div-ea741630\\" key={review.id}>
-                <img class=\\"img-ea741630\\" src={review.avatar} />
+              <div class=\\"div-4bfe25f8\\" key={review.id}>
+                <img class=\\"img-4bfe25f8\\" src={review.avatar} />
                 <div class={showReviewPrompt() ? \\"bg-primary\\" : \\"bg-secondary\\"}>
                   <div>
                     N:
@@ -9343,16 +9343,16 @@ function SmileReviews(props: SmileReviewsProps) {
         </For>
       </div>
       <style jsx>{\`
-        .input-ea741630 {
+        .input-4bfe25f8 {
           display: block;
         }
-        .textarea-ea741630 {
+        .textarea-4bfe25f8 {
           display: block;
         }
-        .button-ea741630 {
+        .button-4bfe25f8 {
           display: block;
         }
-        .div-ea741630 {
+        .div-4bfe25f8 {
           margin: 10px;
           padding: 10px;
           background: white;
@@ -9360,7 +9360,7 @@ function SmileReviews(props: SmileReviewsProps) {
           border-radius: 5px;
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         }
-        .img-ea741630 {
+        .img-4bfe25f8 {
           height: 30px;
           width: 30px;
           margin-right: 10px;
@@ -9816,11 +9816,11 @@ exports[`Solid > jsx > Typescript Test > class + ClassName + css 2`] = `
 function MyBasicComponent(props: any) {
   return (
     <>
-      <div class=\\"test2 test div-45c59d97\\">
+      <div class=\\"test2 test div-240d4a4d\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
       <style jsx>{\`
-        .div-45c59d97 {
+        .div-240d4a4d {
           padding: 10px;
         }
       \`}</style>
@@ -9860,11 +9860,11 @@ exports[`Solid > jsx > Typescript Test > class + css 2`] = `
 function MyBasicComponent(props: any) {
   return (
     <>
-      <div class=\\"test div-74a0302e\\">
+      <div class=\\"test div-210be817\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
       <style jsx>{\`
-        .div-74a0302e {
+        .div-210be817 {
           padding: 10px;
         }
       \`}</style>
@@ -9904,11 +9904,11 @@ exports[`Solid > jsx > Typescript Test > className + css 2`] = `
 function MyBasicComponent(props: any) {
   return (
     <>
-      <div class=\\"test div-74a0302e\\">
+      <div class=\\"test div-210be817\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
       <style jsx>{\`
-        .div-74a0302e {
+        .div-210be817 {
           padding: 10px;
         }
       \`}</style>
@@ -10015,11 +10015,11 @@ function MyBasicComponent(props: any) {
 
   return (
     <>
-      <div class={classState() + \\" div-24c4ffce\\"} style={styleState()}>
+      <div class={classState() + \\" div-db099e36\\"} style={styleState()}>
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
       <style jsx>{\`
-        .div-24c4ffce {
+        .div-db099e36 {
           padding: 10px;
         }
       \`}</style>
@@ -10787,21 +10787,21 @@ exports[`Solid > jsx > Typescript Test > nestedStyles 2`] = `
 function NestedStyles(props: any) {
   return (
     <>
-      <div class=\\"div-92502f5c\\">Hello world</div>
+      <div class=\\"div-04b41bf9\\">Hello world</div>
       <style jsx>{\`
-        .div-92502f5c {
+        .div-04b41bf9 {
           display: flex;
           foo: var(--bar);
         }
         @media (max-width: env(--mobile)) {
-          .div-92502f5c {
+          .div-04b41bf9 {
             display: block;
           }
         }
-        .div-92502f5c:hover {
+        .div-04b41bf9:hover {
           display: flex;
         }
-        .div-92502f5c .nested-selector {
+        .div-04b41bf9 .nested-selector {
           display: grid;
         }
       \`}</style>
@@ -11990,14 +11990,14 @@ function RenderContent(props: Props) {
         }}
       >
         <div
-          class=\\"div-6c469b00\\"
+          class=\\"div-aeca8ad0\\"
           onClick={(event) => trackClick(props.content.id)}
         >
           <RenderBlocks blocks={props.content.blocks}></RenderBlocks>
         </div>
       </BuilderContext.Provider>
       <style jsx>{\`
-        .div-6c469b00 {
+        .div-aeca8ad0 {
           display: flex;
           flex-direction: columns;
         }
@@ -12529,11 +12529,11 @@ exports[`Solid > jsx > Typescript Test > use-style-and-css 2`] = `
 function MyComponent(props: any) {
   return (
     <>
-      <button class=\\"button-625c33fa\\" type=\\"button\\">
+      <button class=\\"button-0b7811fa\\" type=\\"button\\">
         Button
       </button>
       <style jsx>{\`
-        .button-625c33fa {
+        .button-0b7811fa {
           background: blue;
           color: white;
         }
diff --git a/packages/core/src/__tests__/__snapshots__/styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/styles.test.ts.snap
index daa690b942..33cca793a7 100644
--- a/packages/core/src/__tests__/__snapshots__/styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/styles.test.ts.snap
@@ -11,6 +11,7 @@ exports[`Styles > class and CSS are merged 1`] = `
           "code": "{
   padding: '10px'
 }",
+          "type": "single",
         },
       },
       "children": [
@@ -63,6 +64,7 @@ exports[`Styles > class and className are merged 1`] = `
           "code": "{
   padding: '10px'
 }",
+          "type": "single",
         },
       },
       "children": [
@@ -115,6 +117,7 @@ exports[`Styles > className and CSS are merged 1`] = `
           "code": "{
   padding: '10px'
 }",
+          "type": "single",
         },
       },
       "children": [
diff --git a/packages/core/src/generators/qwik/jsx.ts b/packages/core/src/generators/qwik/jsx.ts
index e6b441b8f1..4398d29321 100644
--- a/packages/core/src/generators/qwik/jsx.ts
+++ b/packages/core/src/generators/qwik/jsx.ts
@@ -187,25 +187,29 @@ function rewriteHandlers(
   const outBindings: { [key: string]: Binding } = {};
   for (let key in bindings) {
     if (Object.prototype.hasOwnProperty.call(bindings, key)) {
-      let bindingExpr: string | undefined = bindings?.[key]?.code;
+      const bindingValue = bindings[key]!;
+      let bindingExpr: string = bindingValue.code;
       let handlerBlock: string | undefined;
-      if (bindingExpr != null) {
-        if (key == 'css') {
-          continue;
-        } else if ((handlerBlock = handlers.get(bindingExpr))) {
-          key = `${key}$`;
-          bindingExpr = invoke(file.import(file.qwikModule, 'qrl'), [
-            quote(file.qrlPrefix + 'high.js'),
-            quote(handlerBlock),
-            '[state]',
-          ]) as any;
-        } else if (symbolBindings && key.startsWith('symbol.data.')) {
-          symbolBindings[lastProperty(key)] = bindingExpr;
-        } else if (key.startsWith('component.options.')) {
-          key = lastProperty(key);
-        }
-        outBindings[key] = { code: bindingExpr as string, type: bindings?.[key]?.type };
+
+      if (key == 'css') {
+        continue;
+      } else if ((handlerBlock = handlers.get(bindingExpr))) {
+        key = `${key}$`;
+        bindingExpr = invoke(file.import(file.qwikModule, 'qrl'), [
+          quote(file.qrlPrefix + 'high.js'),
+          quote(handlerBlock),
+          '[state]',
+        ]) as any;
+      } else if (symbolBindings && key.startsWith('symbol.data.')) {
+        symbolBindings[lastProperty(key)] = bindingExpr;
+      } else if (key.startsWith('component.options.')) {
+        key = lastProperty(key);
       }
+
+      outBindings[key] = {
+        ...bindingValue,
+        code: bindingExpr,
+      };
     }
   }
   return outBindings;
diff --git a/packages/core/src/generators/react-native.ts b/packages/core/src/generators/react-native.ts
index ca038afad5..030649a86b 100644
--- a/packages/core/src/generators/react-native.ts
+++ b/packages/core/src/generators/react-native.ts
@@ -8,6 +8,7 @@ import { MitosisComponent } from '../types/mitosis-component';
 import { componentToReact, ToReactOptions } from './react';
 import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 import { Plugin } from '..';
+import { createSingleBinding } from '../helpers/bindings';
 
 export interface ToReactNativeOptions extends BaseTranspilerOptions {
   stylesType?: 'emotion' | 'react-native';
@@ -60,7 +61,7 @@ export const collectReactNativeStyles = (json: MitosisComponent): ClassStyleMap
     const componentName = camelCase(item.name || 'view');
     const index = (componentIndexes[componentName] = (componentIndexes[componentName] || 0) + 1);
     const className = `${componentName}${index}`;
-    item.bindings.style = { code: `styles.${className}` };
+    item.bindings.style = createSingleBinding({ code: `styles.${className}` });
 
     styleMap[className] = value;
   });
diff --git a/packages/core/src/generators/react/generator.ts b/packages/core/src/generators/react/generator.ts
index f91e5e777d..2d1f1aedb2 100644
--- a/packages/core/src/generators/react/generator.ts
+++ b/packages/core/src/generators/react/generator.ts
@@ -46,6 +46,7 @@ import {
 import { processBinding } from './helpers';
 import hash from 'hash-sum';
 import { getForArguments } from '../../helpers/nodes/for';
+import { createSingleBinding } from '../../helpers/bindings';
 
 export const contextPropDrillingKey = '_context';
 
@@ -362,9 +363,9 @@ function provideContext(json: MitosisComponent, options: ToReactOptions): string
             children: json.children,
             ...(value && {
               bindings: {
-                value: {
+                value: createSingleBinding({
                   code: stringifyContextValue(value),
-                },
+                }),
               },
             }),
           }),
@@ -376,9 +377,7 @@ function provideContext(json: MitosisComponent, options: ToReactOptions): string
             children: json.children,
             ...(ref && {
               bindings: {
-                value: {
-                  code: ref,
-                },
+                value: createSingleBinding({ code: ref }),
               },
             }),
           }),
diff --git a/packages/core/src/generators/react/state.ts b/packages/core/src/generators/react/state.ts
index ee2b6a6b16..013a3c18c6 100644
--- a/packages/core/src/generators/react/state.ts
+++ b/packages/core/src/generators/react/state.ts
@@ -76,13 +76,12 @@ export const updateStateSetters = (json: MitosisComponent, options: ToReactOptio
   traverse(json).forEach(function (item) {
     if (isMitosisNode(item)) {
       for (const key in item.bindings) {
-        let values = item.bindings[key];
+        let values = item.bindings[key]!;
         const newValue = updateStateSettersInCode(values?.code as string, options);
         if (newValue !== values?.code) {
           item.bindings[key] = {
+            ...values,
             code: newValue,
-            arguments: values?.arguments,
-            type: values?.type,
           };
         }
       }
diff --git a/packages/core/src/generators/rsc.ts b/packages/core/src/generators/rsc.ts
index c4b2a5e81f..fbfc5728df 100644
--- a/packages/core/src/generators/rsc.ts
+++ b/packages/core/src/generators/rsc.ts
@@ -1,3 +1,4 @@
+import { createSingleBinding } from '../helpers/bindings';
 import traverse from 'traverse';
 import { Plugin } from '..';
 import { fastClone } from '../helpers/fast-clone';
@@ -39,9 +40,9 @@ const RSC_TRANSFORM_PLUGIN: Plugin = () => ({
             // Drill context down, aka
             // function (props) { return <Component _context{props._context} /> }
             if (!node.bindings[contextPropDrillingKey]) {
-              node.bindings[contextPropDrillingKey] = {
+              node.bindings[contextPropDrillingKey] = createSingleBinding({
                 code: contextPropDrillingKey,
-              };
+              });
             }
           }
           if (node.bindings.ref) {
diff --git a/packages/core/src/generators/solid/index.ts b/packages/core/src/generators/solid/index.ts
index 81ccf7ffa0..8685e4b8ed 100644
--- a/packages/core/src/generators/solid/index.ts
+++ b/packages/core/src/generators/solid/index.ts
@@ -31,6 +31,7 @@ import { mergeOptions } from '../../helpers/merge-options';
 import { CODE_PROCESSOR_PLUGIN } from '../../helpers/plugins/process-code';
 import { hasGetContext } from '../helpers/context';
 import { blockToSolid } from './blocks';
+import { createSingleBinding } from '../../helpers/bindings';
 
 // Transform <foo.bar key={value} /> to <Dynamic compnent={foo.bar} key={value} />
 function processDynamicComponents(json: MitosisComponent, options: ToSolidOptions) {
@@ -38,7 +39,7 @@ function processDynamicComponents(json: MitosisComponent, options: ToSolidOption
   traverse(json).forEach((node) => {
     if (isMitosisNode(node)) {
       if (node.name.includes('.') && !node.name.endsWith('.Provider')) {
-        node.bindings.component = { code: node.name };
+        node.bindings.component = createSingleBinding({ code: node.name });
         node.name = 'Dynamic';
         found = true;
       }
@@ -75,7 +76,7 @@ function addProviderComponents(json: MitosisComponent, options: ToSolidOptions)
         children: json.children,
         ...(value && {
           bindings: {
-            value: { code: stringifyContextValue(value) },
+            value: createSingleBinding({ code: stringifyContextValue(value) }),
           },
         }),
       }),
diff --git a/packages/core/src/generators/svelte/blocks.ts b/packages/core/src/generators/svelte/blocks.ts
index 54627265b1..2678818873 100644
--- a/packages/core/src/generators/svelte/blocks.ts
+++ b/packages/core/src/generators/svelte/blocks.ts
@@ -10,6 +10,7 @@ import { isUpperCase } from '../../helpers/is-upper-case';
 import { getForArguments } from '../../helpers/nodes/for';
 import { ToSvelteOptions } from './types';
 import { stripStateAndProps } from './helpers';
+import { createSingleBinding } from '../../helpers/bindings';
 
 const mappers: {
   For: BlockToSvelte<ForNode>;
@@ -127,9 +128,9 @@ const getTagName = ({
   // TO-DO: no way to decide between <svelte:component> and <svelte:element>...need to do that through metadata
   // overrides for now
   if (!isValidHtmlTag && !isSpecialSvelteTag && !hasMatchingImport) {
-    json.bindings.this = {
+    json.bindings.this = createSingleBinding({
       code: stripStateAndProps({ json: parentComponent, options })(json.name),
-    };
+    });
     return SVELTE_SPECIAL_TAGS.COMPONENT;
   }
 
diff --git a/packages/core/src/generators/vue/blocks.ts b/packages/core/src/generators/vue/blocks.ts
index 17873a2328..d9f615fb0c 100644
--- a/packages/core/src/generators/vue/blocks.ts
+++ b/packages/core/src/generators/vue/blocks.ts
@@ -1,5 +1,4 @@
 import { pipe, identity } from 'fp-ts/lib/function';
-import { filter } from 'lodash';
 import { Dictionary } from '../../helpers/typescript';
 import { filterEmptyTextNodes } from '../../helpers/filter-empty-text-nodes';
 import isChildren from '../../helpers/is-children';
@@ -8,7 +7,7 @@ import { removeSurroundingBlock } from '../../helpers/remove-surrounding-block';
 import { replaceIdentifiers } from '../../helpers/replace-identifiers';
 import { replaceSlotsInString, stripSlotPrefix, isSlotProperty } from '../../helpers/slots';
 import { selfClosingTags } from '../../parsers/jsx';
-import { MitosisNode, ForNode, Binding } from '../../types/mitosis-node';
+import { MitosisNode, ForNode, Binding, SpreadType } from '../../types/mitosis-node';
 import {
   encodeQuotes,
   addBindingsToJson,
@@ -16,6 +15,7 @@ import {
   invertBooleanExpression,
 } from './helpers';
 import { ToVueOptions } from './types';
+import { checkIsDefined } from '../../helpers/nullable';
 
 const SPECIAL_PROPERTIES = {
   V_IF: 'v-if',
@@ -50,7 +50,7 @@ const NODE_MAPPERS: {
   },
   For(_json, options) {
     const json = _json as ForNode;
-    const keyValue = json.bindings.key || { code: 'index' };
+    const keyValue = json.bindings.key || { code: 'index', type: 'single' };
     const forValue = `(${json.scope.forName}, index) in ${json.bindings.each?.code}`;
 
     if (options.vueVersion >= 3) {
@@ -330,10 +330,11 @@ const stringifyBinding =
     }
   };
 
-const stringifySpreads = (node: MitosisNode) => {
-  let spreads = filter(node.bindings, (binding) => binding?.type === 'spread').map((value) =>
-    value!.code === 'props' ? '$props' : value!.code,
-  );
+const stringifySpreads = ({ node, spreadType }: { node: MitosisNode; spreadType: SpreadType }) => {
+  const spreads = Object.values(node.bindings)
+    .filter(checkIsDefined)
+    .filter((binding) => binding.type === 'spread' && binding.spreadType === spreadType)
+    .map((value) => (value!.code === 'props' ? '$props' : value!.code));
 
   if (spreads.length === 0) {
     return '';
@@ -342,7 +343,9 @@ const stringifySpreads = (node: MitosisNode) => {
   const stringifiedValue =
     spreads.length > 1 ? `{${spreads.map((spread) => `...${spread}`).join(', ')}}` : spreads[0];
 
-  return ` ${SPECIAL_PROPERTIES.V_BIND}="${encodeQuotes(stringifiedValue)}" `;
+  const key = spreadType === 'normal' ? SPECIAL_PROPERTIES.V_BIND : SPECIAL_PROPERTIES.V_ON;
+
+  return ` ${key}="${encodeQuotes(stringifiedValue)}" `;
 };
 
 const getBlockBindings = (node: MitosisNode) => {
@@ -362,7 +365,12 @@ const getBlockBindings = (node: MitosisNode) => {
     .map(stringifyBinding(node))
     .join(' ');
 
-  return [stringifiedProperties, stringifiedBindings, stringifySpreads(node)].join(' ');
+  return [
+    stringifiedProperties,
+    stringifiedBindings,
+    stringifySpreads({ node, spreadType: 'normal' }),
+    stringifySpreads({ node, spreadType: 'event-handlers' }),
+  ].join(' ');
 };
 
 export const blockToVue: BlockRenderer = (node, options, scope) => {
@@ -379,7 +387,7 @@ export const blockToVue: BlockRenderer = (node, options, scope) => {
     // Vue doesn't allow <style>...</style> in templates, but does support the synonymous
     // <component is="'style'">...</component>
     node.name = 'component';
-    node.bindings.is = { code: "'style'" };
+    node.bindings.is = { code: "'style'", type: 'single' };
   }
 
   if (node.properties._text) {
diff --git a/packages/core/src/generators/vue/vue.ts b/packages/core/src/generators/vue/vue.ts
index 491bfe7e5f..23609b8c45 100644
--- a/packages/core/src/generators/vue/vue.ts
+++ b/packages/core/src/generators/vue/vue.ts
@@ -30,13 +30,14 @@ import { blockToVue } from './blocks';
 import { mergeOptions } from '../../helpers/merge-options';
 import { CODE_PROCESSOR_PLUGIN } from '../../helpers/plugins/process-code';
 import { stripStateAndPropsRefs } from '../../helpers/strip-state-and-props-refs';
+import { createSingleBinding } from '../../helpers/bindings';
 
 // Transform <foo.bar key="value" /> to <component :is="foo.bar" key="value" />
 function processDynamicComponents(json: MitosisComponent, _options: ToVueOptions) {
   traverse(json).forEach((node) => {
     if (isMitosisNode(node)) {
       if (node.name.includes('.')) {
-        node.bindings.is = { code: node.name };
+        node.bindings.is = createSingleBinding({ code: node.name });
         node.name = 'component';
       }
     }
diff --git a/packages/core/src/helpers/bindings.ts b/packages/core/src/helpers/bindings.ts
new file mode 100644
index 0000000000..3164328cac
--- /dev/null
+++ b/packages/core/src/helpers/bindings.ts
@@ -0,0 +1,6 @@
+import { Binding } from '../types/mitosis-node';
+
+export const createSingleBinding = (args: Omit<Binding, 'type'>): Binding => ({
+  ...args,
+  type: 'single',
+});
diff --git a/packages/core/src/helpers/get-styles.ts b/packages/core/src/helpers/get-styles.ts
index b03f49714e..a2f3389cb7 100644
--- a/packages/core/src/helpers/get-styles.ts
+++ b/packages/core/src/helpers/get-styles.ts
@@ -2,6 +2,7 @@ import json5 from 'json5';
 import { size } from 'lodash';
 import { MitosisNode } from '../types/mitosis-node';
 import { MitosisStyles } from '../types/mitosis-styles';
+import { createSingleBinding } from './bindings';
 
 export const getStyles = (json: MitosisNode) => {
   if (!json.bindings.css) {
@@ -21,6 +22,6 @@ export const setStyles = (json: MitosisNode, styles: MitosisStyles | null) => {
   if (!size(styles)) {
     delete json.bindings.css;
   } else {
-    json.bindings.css = { code: json5.stringify(styles) };
+    json.bindings.css = createSingleBinding({ code: json5.stringify(styles) });
   }
 };
diff --git a/packages/core/src/helpers/styles/__snapshots__/collect-css.test.ts.snap b/packages/core/src/helpers/styles/__snapshots__/collect-css.test.ts.snap
index 4a445ed9eb..15400ff3c0 100644
--- a/packages/core/src/helpers/styles/__snapshots__/collect-css.test.ts.snap
+++ b/packages/core/src/helpers/styles/__snapshots__/collect-css.test.ts.snap
@@ -10,9 +10,11 @@ exports[`Styles > class binding and CSS are merged 1`] = `
         "bindings": {
           "class": {
             "code": "state.classState + ' div'",
+            "type": "single",
           },
           "style": {
             "code": "state.styleState",
+            "type": "single",
           },
         },
         "children": [
diff --git a/packages/core/src/parsers/angular.ts b/packages/core/src/parsers/angular.ts
index 3bc27809da..33b7597057 100644
--- a/packages/core/src/parsers/angular.ts
+++ b/packages/core/src/parsers/angular.ts
@@ -4,12 +4,14 @@ import { Node, Element, Template, Text, BoundText } from '@angular/compiler/src/
 import { ASTWithSource } from '@angular/compiler/src/expression_parser/ast';
 import { createMitosisComponent } from '../helpers/create-mitosis-component';
 import { createMitosisNode } from '../helpers/create-mitosis-node';
-import { MitosisNode } from '../types/mitosis-node';
+import { Binding, MitosisNode } from '../types/mitosis-node';
 import { omit } from 'lodash';
 import { babelTransformCode } from '../helpers/babel-transform';
 import { types } from '@babel/core';
 import { MitosisComponent } from '../types/mitosis-component';
 import { capitalize } from '../helpers/capitalize';
+import { createSingleBinding } from '../helpers/bindings';
+import { Dictionary } from '../helpers/typescript';
 
 const getTsAST = (code: string) => {
   return ts.createSourceFile('code.ts', code, ts.ScriptTarget.Latest, true);
@@ -58,9 +60,9 @@ const angularTemplateNodeToMitosisNode = (
       return createMitosisNode({
         name: 'Show',
         bindings: {
-          when: {
+          when: createSingleBinding({
             code: transformBinding((ngIf.value as ASTWithSource).source!, options),
-          },
+          }),
         },
         children: [angularTemplateNodeToMitosisNode(omit(node, 'templateAttrs'), options)],
       });
@@ -73,7 +75,7 @@ const angularTemplateNodeToMitosisNode = (
       return createMitosisNode({
         name: 'For',
         bindings: {
-          each: { code: transformBinding(expression, options) },
+          each: createSingleBinding({ code: transformBinding(expression, options) }),
         },
         scope: {
           forName: itemName,
@@ -85,22 +87,22 @@ const angularTemplateNodeToMitosisNode = (
 
   if (isElement(node)) {
     const properties: Record<string, string> = {};
-    const bindings: Record<string, { code: string; arguments?: string[] }> = {};
+    const bindings: Dictionary<Binding> = {};
 
     for (const input of node.inputs) {
-      bindings[input.name] = {
+      bindings[input.name] = createSingleBinding({
         code: transformBinding((input.value as ASTWithSource).source!, options),
-      };
+      });
     }
     for (const output of node.outputs) {
-      bindings['on' + capitalize(output.name)] = {
+      bindings['on' + capitalize(output.name)] = createSingleBinding({
         code: transformBinding(
           (output.handler as ASTWithSource)
             .source! // TODO: proper reference replace
             .replace(/\$event/g, 'event'),
           options,
         ),
-      };
+      });
     }
     for (const attribute of node.attributes) {
       properties[attribute.name] = attribute.value;
@@ -109,7 +111,7 @@ const angularTemplateNodeToMitosisNode = (
     return createMitosisNode({
       name: node.name,
       properties,
-      bindings,
+      bindings: bindings,
       children: node.children.map((node) => angularTemplateNodeToMitosisNode(node, options)),
     });
   }
diff --git a/packages/core/src/parsers/builder/builder.ts b/packages/core/src/parsers/builder/builder.ts
index 92eb08bb9f..b072259cf1 100644
--- a/packages/core/src/parsers/builder/builder.ts
+++ b/packages/core/src/parsers/builder/builder.ts
@@ -9,12 +9,14 @@ import { Size, sizeNames, sizes } from '../../constants/media-sizes';
 import { capitalize } from '../../helpers/capitalize';
 import { createMitosisComponent } from '../../helpers/create-mitosis-component';
 import { createMitosisNode } from '../../helpers/create-mitosis-node';
-import { MitosisNode } from '../../types/mitosis-node';
+import { Binding, MitosisNode } from '../../types/mitosis-node';
 import { parseJsx } from '../jsx';
 import { parseCode, isExpression } from '../../helpers/parsers';
 import { hashCodeAsString, MitosisComponent, MitosisState } from '../..';
 import { mapBuilderContentStateToMitosisState } from './helpers';
 import { parseStateObjectToMitosisState } from '../jsx/state';
+import { createSingleBinding } from '../../helpers/bindings';
+import { Dictionary } from '../../helpers/typescript';
 
 // Omit some superflous styles that can come from Builder's web importer
 const styleOmitList: (keyof CSSStyleDeclaration | 'backgroundRepeatX' | 'backgroundRepeatY')[] = [
@@ -87,7 +89,7 @@ const getActionBindingsFromBlock = (
         continue;
       }
       const useKey = `on${upperFirst(key)}`;
-      bindings[useKey] = { code: `${wrapBindingIfNeeded(value, options)}` };
+      bindings[useKey] = createSingleBinding({ code: `${wrapBindingIfNeeded(value, options)}` });
     }
   }
 
@@ -244,23 +246,25 @@ const componentMappers: {
     const styleString = getStyleStringFromBlock(block, options);
     const actionBindings = getActionBindingsFromBlock(block, options);
 
+    const bindings: Dictionary<Binding> = {
+      symbol: createSingleBinding({
+        code: JSON.stringify({
+          data: block.component?.options.symbol.data,
+          content: block.component?.options.symbol.content,
+        }),
+      }),
+      ...actionBindings,
+      ...(styleString && {
+        style: createSingleBinding({ code: styleString }),
+      }),
+      ...(Object.keys(css).length && {
+        css: createSingleBinding({ code: JSON.stringify(css) }),
+      }),
+    };
+
     return createMitosisNode({
       name: 'Symbol',
-      bindings: {
-        symbol: {
-          code: JSON.stringify({
-            data: block.component?.options.symbol.data,
-            content: block.component?.options.symbol.content,
-          }),
-        },
-        ...actionBindings,
-        ...(styleString && {
-          style: { code: styleString },
-        }),
-        ...(Object.keys(css).length && {
-          css: { code: JSON.stringify(css) },
-        }),
-      },
+      bindings: bindings,
     });
   },
   ...(!symbolBlocksAsChildren
@@ -281,18 +285,18 @@ const componentMappers: {
             name: 'Symbol',
             bindings: {
               // TODO: this doesn't use all attrs
-              symbol: {
+              symbol: createSingleBinding({
                 code: JSON.stringify({
                   data: block.component?.options.symbol.content.data,
                   content: content, // TODO: convert to <SymbolInternal>...</SymbolInternal> so can be parsed
                 }),
-              },
+              }),
               ...actionBindings,
               ...(styleString && {
-                style: { code: styleString },
+                style: createSingleBinding({ code: styleString }),
               }),
               ...(Object.keys(css).length && {
-                css: { code: JSON.stringify(css) },
+                css: createSingleBinding({ code: JSON.stringify(css) }),
               }),
             },
             children: !blocks
@@ -337,7 +341,9 @@ const componentMappers: {
     return createMitosisNode({
       name: 'For',
       bindings: {
-        each: { code: `state.${block.component!.options!.repeat!.collection}` },
+        each: createSingleBinding({
+          code: `state.${block.component!.options!.repeat!.collection}`,
+        }),
       },
       scope: {
         forName: block.component!.options!.repeat!.itemName,
@@ -384,9 +390,9 @@ const componentMappers: {
     const innerBindings: MitosisNode['bindings'] = {};
     const componentOptionsText = blockBindings['component.options.text'];
     if (componentOptionsText) {
-      innerBindings[options.preserveTextBlocks ? 'innerHTML' : '_text'] = {
+      innerBindings[options.preserveTextBlocks ? 'innerHTML' : '_text'] = createSingleBinding({
         code: wrapBindingIfNeeded(componentOptionsText.code, options),
-      };
+      });
     }
     const innerProperties = {
       [options.preserveTextBlocks ? 'innerHTML' : '_text']: block.component!.options.text,
@@ -469,13 +475,13 @@ export const builderElementToMitosisNode = (
     if (isFragment) {
       return createMitosisNode({
         name: 'Show',
-        bindings: { when: { code: code } },
+        bindings: { when: createSingleBinding({ code }) },
         children: block.children?.map((child) => builderElementToMitosisNode(child, options)) || [],
       });
     } else {
       return createMitosisNode({
         name: 'Show',
-        bindings: { when: { code: code } },
+        bindings: { when: createSingleBinding({ code }) },
         children: [
           builderElementToMitosisNode(
             {
@@ -500,9 +506,9 @@ export const builderElementToMitosisNode = (
       return createMitosisNode({
         name: 'For',
         bindings: {
-          each: {
+          each: createSingleBinding({
             code: wrapBindingIfNeeded(block.repeat?.collection!, options),
-          },
+          }),
         },
         scope: {
           forName: block.repeat?.itemName || 'item',
@@ -517,9 +523,9 @@ export const builderElementToMitosisNode = (
       return createMitosisNode({
         name: 'For',
         bindings: {
-          each: {
+          each: createSingleBinding({
             code: wrapBindingIfNeeded(block.repeat?.collection!, options),
-          },
+          }),
         },
         scope: {
           forName: block.repeat?.itemName || 'item',
@@ -921,9 +927,9 @@ function mapBuilderBindingsToMitosisBindingWithCode(
     Object.keys(bindings).forEach((key) => {
       const value: string | { code: string } = bindings[key] as any;
       if (typeof value === 'string') {
-        result[key] = { code: value };
+        result[key] = createSingleBinding({ code: value });
       } else if (value && typeof value === 'object' && value.code) {
-        result[key] = { code: value.code };
+        result[key] = createSingleBinding({ code: value.code });
       } else {
         throw new Error('Unexpected binding value: ' + JSON.stringify(value));
       }
diff --git a/packages/core/src/parsers/jsx/element-parser.ts b/packages/core/src/parsers/jsx/element-parser.ts
index eac03d5f84..5004ec3a53 100644
--- a/packages/core/src/parsers/jsx/element-parser.ts
+++ b/packages/core/src/parsers/jsx/element-parser.ts
@@ -5,6 +5,7 @@ import { createMitosisNode } from '../../helpers/create-mitosis-node';
 import { ForNode, MitosisNode } from '../../types/mitosis-node';
 import { pipe } from 'fp-ts/lib/function';
 import { transformAttributeName } from './helpers';
+import { createSingleBinding } from '../../helpers/bindings';
 
 const { types } = babel;
 
@@ -55,11 +56,11 @@ export const jsxElementToJson = (
           return createMitosisNode({
             name: 'For',
             bindings: {
-              each: {
+              each: createSingleBinding({
                 code: generate(node.expression.callee)
                   .code // Remove .map or potentially ?.map
                   .replace(/\??\.map$/, ''),
-              },
+              }),
             },
             scope: forArguments,
             children: [jsxElementToJson(callback.body as any)!],
@@ -74,7 +75,7 @@ export const jsxElementToJson = (
         return createMitosisNode({
           name: 'Show',
           bindings: {
-            when: { code: generate(node.expression.left).code! },
+            when: createSingleBinding({ code: generate(node.expression.left).code! }),
           },
           children: [jsxElementToJson(node.expression.right as any)!],
         });
@@ -91,7 +92,7 @@ export const jsxElementToJson = (
           else: jsxElementToJson(node.expression.alternate as any)!,
         },
         bindings: {
-          when: { code: generate(node.expression.test).code! },
+          when: createSingleBinding({ code: generate(node.expression.test).code! }),
         },
         children: [jsxElementToJson(node.expression.consequent as any)!],
       });
@@ -101,7 +102,7 @@ export const jsxElementToJson = (
 
     return createMitosisNode({
       bindings: {
-        _text: { code: generate(node.expression).code },
+        _text: createSingleBinding({ code: generate(node.expression).code }),
       },
     });
   }
@@ -145,7 +146,7 @@ export const jsxElementToJson = (
         else: elseValue || undefined,
       },
       bindings: {
-        ...(whenValue ? { when: { code: whenValue } } : {}),
+        ...(whenValue ? { when: createSingleBinding({ code: whenValue }) } : {}),
       },
       children: node.children.map(jsxElementToJson).filter(checkIsDefined),
     });
@@ -174,9 +175,9 @@ export const jsxElementToJson = (
         return createMitosisNode({
           name: 'For',
           bindings: {
-            each: {
+            each: createSingleBinding({
               code: forCode,
-            },
+            }),
           },
           scope: forArguments,
           children: [jsxElementToJson(childExpression.body as any)!],
@@ -209,24 +210,25 @@ export const jsxElementToJson = (
 
         // boolean attribute
         if (value === null) {
-          memo[key] = {
+          memo[key] = createSingleBinding({
             code: 'true',
-          };
+          });
           return memo;
         }
         if (types.isJSXExpressionContainer(value) && !types.isStringLiteral(value.expression)) {
           const { expression } = value;
           if (types.isArrowFunctionExpression(expression)) {
             if (key.startsWith('on')) {
-              memo[key] = {
+              const args = expression.params.map((node) => (node as babel.types.Identifier)?.name);
+              memo[key] = createSingleBinding({
                 code: generate(expression.body).code,
-                arguments: expression.params.map((node) => (node as babel.types.Identifier)?.name),
-              };
+                arguments: args.length ? args : undefined,
+              });
             } else {
-              memo[key] = { code: generate(expression.body).code };
+              memo[key] = createSingleBinding({ code: generate(expression.body).code });
             }
           } else {
-            memo[key] = { code: generate(expression).code };
+            memo[key] = createSingleBinding({ code: generate(expression).code });
           }
 
           return memo;
@@ -241,6 +243,7 @@ export const jsxElementToJson = (
         memo[key] = {
           code: types.stringLiteral(generate(item.argument).code).value,
           type: 'spread',
+          spreadType: 'normal',
         };
       }
       return memo;
diff --git a/packages/core/src/parsers/jsx/state.ts b/packages/core/src/parsers/jsx/state.ts
index 2af37c04c6..d5dd634717 100644
--- a/packages/core/src/parsers/jsx/state.ts
+++ b/packages/core/src/parsers/jsx/state.ts
@@ -96,19 +96,8 @@ export function mapStateIdentifiers(json: MitosisComponent) {
   traverse(json).forEach(function (item) {
     if (isMitosisNode(item)) {
       for (const key in item.bindings) {
-        const value = item.bindings[key];
-
-        if (value) {
-          item.bindings[key] = {
-            code: mapStateIdentifiersInExpression(value.code, stateProperties),
-          };
-          if (value.arguments?.length) {
-            item.bindings[key]!.arguments = value.arguments;
-          }
-          if (value.type?.length) {
-            item.bindings[key]!.type = value.type;
-          }
-        }
+        const value = item.bindings[key]!;
+        item.bindings[key]!.code = mapStateIdentifiersInExpression(value.code, stateProperties);
       }
 
       consolidateClassBindings(item);
diff --git a/packages/core/src/parsers/svelte/helpers/bindings.ts b/packages/core/src/parsers/svelte/helpers/bindings.ts
index fa80d41f91..7cda8a4858 100644
--- a/packages/core/src/parsers/svelte/helpers/bindings.ts
+++ b/packages/core/src/parsers/svelte/helpers/bindings.ts
@@ -1,3 +1,4 @@
+import { createSingleBinding } from '../../../helpers/bindings';
 import type { MitosisNode } from '../../../types/mitosis-node';
 import type { SveltosisComponent } from '../types';
 
@@ -19,9 +20,9 @@ function replaceGroupWithChecked(node: MitosisNode, isArray = false) {
         : `${groupBinding} === '${propertyValue}'`;
     }
 
-    node.bindings['checked'] = {
+    node.bindings['checked'] = createSingleBinding({
       code,
-    };
+    });
     delete node.bindings.group;
   }
 }
@@ -75,9 +76,9 @@ export function processBindings(json: SveltosisComponent, node: MitosisNode) {
   }
 
   if (name !== 'ref' && binding) {
-    node.bindings['onChange'] = {
+    node.bindings['onChange'] = createSingleBinding({
       code: onChangeCode,
       arguments: ['event'],
-    };
+    });
   }
 }
diff --git a/packages/core/src/parsers/svelte/helpers/post-process.ts b/packages/core/src/parsers/svelte/helpers/post-process.ts
index 6aaa97a99a..0b6b50dff7 100644
--- a/packages/core/src/parsers/svelte/helpers/post-process.ts
+++ b/packages/core/src/parsers/svelte/helpers/post-process.ts
@@ -93,11 +93,8 @@ function addPropertiesAndState(json: SveltosisComponent, input: string) {
 function addPropertiesAndStateToNode(json: SveltosisComponent, node: MitosisNode) {
   for (const key of Object.keys(node.bindings)) {
     if (Object.prototype.hasOwnProperty.call(node.bindings, key)) {
-      node.bindings[key] = {
-        code: addPropertiesAndState(json, node.bindings[key]?.code ?? '').trim(),
-        arguments: node.bindings[key]?.arguments,
-        type: node.bindings[key]?.type,
-      };
+      const value = node.bindings[key]!;
+      node.bindings[key]!.code = addPropertiesAndState(json, value?.code ?? '').trim();
     }
   }
 }
diff --git a/packages/core/src/parsers/svelte/html/each.ts b/packages/core/src/parsers/svelte/html/each.ts
index 4508dbce0a..6f2b001cc3 100644
--- a/packages/core/src/parsers/svelte/html/each.ts
+++ b/packages/core/src/parsers/svelte/html/each.ts
@@ -3,16 +3,18 @@ import { parseChildren } from '../helpers/children';
 
 import type { TemplateNode } from 'svelte/types/compiler/interfaces';
 import type { SveltosisComponent } from '../types';
+import { MitosisNode } from '../../../types/mitosis-node';
+import { createSingleBinding } from '../../../helpers/bindings';
 
-export function parseEach(json: SveltosisComponent, node: TemplateNode) {
+export function parseEach(json: SveltosisComponent, node: TemplateNode): MitosisNode {
   return {
     ...createMitosisNode(),
     name: 'For',
     scope: { forName: node.context.name },
     bindings: {
-      each: {
+      each: createSingleBinding({
         code: node.expression.name,
-      },
+      }),
     },
     children: parseChildren(json, node),
   };
diff --git a/packages/core/src/parsers/svelte/html/element.ts b/packages/core/src/parsers/svelte/html/element.ts
index 718e73f405..e7a44caa1a 100644
--- a/packages/core/src/parsers/svelte/html/element.ts
+++ b/packages/core/src/parsers/svelte/html/element.ts
@@ -8,6 +8,7 @@ import { parseAction } from './actions';
 import type { TemplateNode, Element, Text, MustacheTag } from 'svelte/types/compiler/interfaces';
 import type { Identifier, ArrowFunctionExpression, BaseCallExpression, Node } from 'estree';
 import type { SveltosisComponent } from '../types';
+import { createSingleBinding } from '../../../helpers/bindings';
 
 interface AttributeShorthand {
   type: 'AttributeShorthand';
@@ -25,9 +26,7 @@ export function parseElement(json: SveltosisComponent, node: TemplateNode) {
     if (!Object.keys(json.refs).includes(nodeReference)) {
       json.refs[nodeReference] = { argument: '', typeParameter: '' };
 
-      mitosisNode.bindings.ref = {
-        code: nodeReference,
-      };
+      mitosisNode.bindings.ref = createSingleBinding({ code: nodeReference });
     }
 
     return nodeReference;
@@ -84,9 +83,7 @@ export function parseElement(json: SveltosisComponent, node: TemplateNode) {
                   : '`${' + code + '}`';
               }
 
-              mitosisNode.bindings[attribute.name] = {
-                code,
-              };
+              mitosisNode.bindings[attribute.name] = createSingleBinding({ code });
 
               break;
             }
@@ -94,15 +91,15 @@ export function parseElement(json: SveltosisComponent, node: TemplateNode) {
               // e.g. <input {value}/>
               const value: AttributeShorthand = attribute.value[0];
               const code = value.expression.name;
-              mitosisNode.bindings[code] = {
-                code,
-              };
+              mitosisNode.bindings[code] = createSingleBinding({ code });
 
               break;
             }
             default: {
               const name = attribute.name;
-              mitosisNode.bindings[name] = { code: attribute.value.toString() };
+              mitosisNode.bindings[name] = createSingleBinding({
+                code: attribute.value.toString(),
+              });
             }
           }
 
@@ -113,6 +110,7 @@ export function parseElement(json: SveltosisComponent, node: TemplateNode) {
           mitosisNode.bindings[expression.name] = {
             code: expression.name,
             type: 'spread',
+            spreadType: 'normal',
           };
 
           break;
@@ -173,7 +171,7 @@ export function parseElement(json: SveltosisComponent, node: TemplateNode) {
             };
           }
 
-          mitosisNode.bindings[`on${upperFirst(attribute.name)}`] = object;
+          mitosisNode.bindings[`on${upperFirst(attribute.name)}`] = createSingleBinding(object);
 
           // add event handlers as props (e.g. props.onClick)
           json.props = {
@@ -209,15 +207,15 @@ export function parseElement(json: SveltosisComponent, node: TemplateNode) {
 
           if (name !== 'ref' && name !== 'group' && name !== 'this') {
             const onChangeCode = `${binding} = event.target.value`;
-            mitosisNode.bindings['onChange'] = {
+            mitosisNode.bindings['onChange'] = createSingleBinding({
               code: onChangeCode,
               arguments: ['event'],
-            };
+            });
           }
 
-          mitosisNode.bindings[name] = {
+          mitosisNode.bindings[name] = createSingleBinding({
             code: binding,
-          };
+          });
 
           break;
         }
@@ -249,15 +247,11 @@ export function parseElement(json: SveltosisComponent, node: TemplateNode) {
               ' ${' + binding + '}',
               mitosisNode.bindings.class.code.length - 1,
             );
-            mitosisNode.bindings.class = {
-              code,
-            };
+            mitosisNode.bindings.class = createSingleBinding({ code });
           } else {
             // otherwise just assign
             code = '`' + code + '${' + binding + '}`';
-            mitosisNode.bindings.class = {
-              code,
-            };
+            mitosisNode.bindings.class = createSingleBinding({ code });
           }
           break;
         }
@@ -280,9 +274,9 @@ export function parseElement(json: SveltosisComponent, node: TemplateNode) {
     const child = filteredChildren[0] as MustacheTag;
 
     mitosisNode.children = [];
-    mitosisNode.bindings.innerHTML = {
+    mitosisNode.bindings.innerHTML = createSingleBinding({
       code: generate(child.expression),
-    };
+    });
   } else {
     mitosisNode.children = parseChildren(json, node);
   }
diff --git a/packages/core/src/parsers/svelte/html/if-else.ts b/packages/core/src/parsers/svelte/html/if-else.ts
index 6b1520837c..ad1ae52662 100644
--- a/packages/core/src/parsers/svelte/html/if-else.ts
+++ b/packages/core/src/parsers/svelte/html/if-else.ts
@@ -6,14 +6,15 @@ import { parseChildren } from '../helpers/children';
 
 import type { TemplateNode } from 'svelte/types/compiler/interfaces';
 import type { SveltosisComponent } from '../types';
+import { createSingleBinding } from '../../../helpers/bindings';
 
 export function parseIfElse(json: SveltosisComponent, node: TemplateNode) {
   const mitosisNode = createMitosisNode();
   mitosisNode.name = 'Show';
   mitosisNode.bindings = {
-    when: {
+    when: createSingleBinding({
       code: generate(node.expression),
-    },
+    }),
   };
 
   mitosisNode.children = parseChildren(json, node);
diff --git a/packages/core/src/parsers/svelte/html/mustache-tag.ts b/packages/core/src/parsers/svelte/html/mustache-tag.ts
index 73bac317ee..84bb3f55c5 100644
--- a/packages/core/src/parsers/svelte/html/mustache-tag.ts
+++ b/packages/core/src/parsers/svelte/html/mustache-tag.ts
@@ -1,21 +1,22 @@
 import { generate } from 'astring';
+import { createSingleBinding } from '../../../helpers/bindings';
 import type { TemplateNode } from 'svelte/types/compiler/interfaces';
 import { createMitosisNode } from '../helpers/mitosis-node';
 
 export function parseMustacheTag(node: TemplateNode) {
   const mitosisNode = createMitosisNode();
   mitosisNode.name = 'div';
-  mitosisNode.bindings['_text'] = {
+  mitosisNode.bindings['_text'] = createSingleBinding({
     code: generate(node.expression),
-  };
+  });
   return mitosisNode;
 }
 
 export function parseRawMustacheTag(node: TemplateNode) {
   const mitosisNode = createMitosisNode();
   mitosisNode.name = 'div';
-  mitosisNode.bindings.innerHTML = {
+  mitosisNode.bindings.innerHTML = createSingleBinding({
     code: generate(node.expression),
-  };
+  });
   return mitosisNode;
 }
diff --git a/packages/core/src/plugins/compile-away-builder-components.ts b/packages/core/src/plugins/compile-away-builder-components.ts
index 35722b5acc..ae89d686f8 100644
--- a/packages/core/src/plugins/compile-away-builder-components.ts
+++ b/packages/core/src/plugins/compile-away-builder-components.ts
@@ -10,6 +10,7 @@ import * as JSON5 from 'json5';
 import { BuilderElement } from '@builder.io/sdk';
 import { builderElementToMitosisNode } from '../parsers/builder';
 import { Plugin } from '..';
+import { createSingleBinding } from '../helpers/bindings';
 
 function getComponentInputNames(componentName: string): string[] {
   const componentInfo = Builder.components.find((item) => item.name === componentName);
@@ -197,7 +198,7 @@ export const components: CompileAwayComponentsMap = {
           }),
         },
         bindings: {
-          css: {
+          css: createSingleBinding({
             code: JSON.stringify({
               width: '100%',
               alignSelf: 'stretch',
@@ -212,7 +213,7 @@ export const components: CompileAwayComponentsMap = {
               marginLeft: 'auto',
               marginRight: 'auto',
             }),
-          },
+          }),
         },
         children: node.children,
       }),
@@ -244,7 +245,7 @@ export const components: CompileAwayComponentsMap = {
           class: 'builder-columns',
         },
         bindings: {
-          css: {
+          css: createSingleBinding({
             code: JSON.stringify({
               display: 'flex',
               ...(properties.stackColumnsAt === 'never'
@@ -260,7 +261,7 @@ export const components: CompileAwayComponentsMap = {
                       },
                   }),
             }),
-          },
+          }),
         },
         children: columns.map((col, index) => {
           return createMitosisNode({
@@ -270,7 +271,7 @@ export const components: CompileAwayComponentsMap = {
               class: 'builder-column',
             },
             bindings: {
-              css: {
+              css: createSingleBinding({
                 code: JSON.stringify({
                   display: 'flex',
                   flexDirection: 'column',
@@ -289,7 +290,7 @@ export const components: CompileAwayComponentsMap = {
                         },
                       }),
                 }),
-              },
+              }),
             },
             children: col.children,
           });
@@ -332,7 +333,7 @@ export const components: CompileAwayComponentsMap = {
       bindings: noUndefined({
         src: node.bindings.image?.code && { code: node.bindings.image?.code },
         sizes: node.bindings.sizes?.code && { code: node.bindings.sizes?.code },
-        css: {
+        css: createSingleBinding({
           code: JSON.stringify({
             objectFit: backgroundSize || 'cover',
             objectPosition: backgroundPosition || 'cover',
@@ -346,7 +347,7 @@ export const components: CompileAwayComponentsMap = {
                 }
               : {}),
           }),
-        },
+        }),
       }),
     });
 
@@ -364,14 +365,14 @@ export const components: CompileAwayComponentsMap = {
           class: 'builder-image-sizer',
         },
         bindings: {
-          css: {
+          css: createSingleBinding({
             code: JSON.stringify({
               width: '100%',
               paddingTop: aspectRatio * 100 + '%',
               pointerEvents: 'none',
               fontSize: '0',
             }),
-          },
+          }),
         },
       });
 
@@ -384,7 +385,7 @@ export const components: CompileAwayComponentsMap = {
           $name: 'image-contents',
         },
         bindings: {
-          css: {
+          css: createSingleBinding({
             code: JSON.stringify({
               display: 'flex',
               flexDirection: 'column',
@@ -395,7 +396,7 @@ export const components: CompileAwayComponentsMap = {
               width: '100%',
               height: '100%',
             }),
-          },
+          }),
         },
         children: node.children,
       });
@@ -414,7 +415,7 @@ export const components: CompileAwayComponentsMap = {
         },
         bindings: hrefBinding
           ? {
-              href: { code: hrefBinding },
+              href: createSingleBinding({ code: hrefBinding }),
             }
           : undefined,
         children: imageNodes,
@@ -463,7 +464,7 @@ export const components: CompileAwayComponentsMap = {
             code: node.bindings.playsInline?.code,
           },
           loop: node.bindings.loop?.code && { code: node.bindings.loop?.code },
-          css: {
+          css: createSingleBinding({
             code: JSON.stringify({
               width: '100%',
               height: '100%',
@@ -472,7 +473,7 @@ export const components: CompileAwayComponentsMap = {
               borderRadius: '1',
               position: aspectRatio ? 'absolute' : '',
             }),
-          },
+          }),
         }),
         children: [
           createMitosisNode({
@@ -499,14 +500,14 @@ export const components: CompileAwayComponentsMap = {
             $name: 'builder-video-sizer',
           },
           bindings: {
-            css: {
+            css: createSingleBinding({
               code: JSON.stringify({
                 width: '100%',
                 paddingTop: aspectRatio * 100 + '%',
                 pointerEvents: 'none',
                 fontSize: '0',
               }),
-            },
+            }),
           },
         }),
       );
@@ -520,7 +521,7 @@ export const components: CompileAwayComponentsMap = {
             $name: 'image-contents',
           },
           bindings: {
-            css: {
+            css: createSingleBinding({
               code: JSON.stringify({
                 display: 'flex',
                 flexDirection: 'column',
@@ -531,7 +532,7 @@ export const components: CompileAwayComponentsMap = {
                 width: '100%',
                 height: '100%',
               }),
-            },
+            }),
           },
           children: node.children,
         }),
@@ -543,7 +544,7 @@ export const components: CompileAwayComponentsMap = {
         $name: 'video-container',
       },
       bindings: {
-        css: { code: JSON.stringify({ position: 'relative' }) },
+        css: createSingleBinding({ code: JSON.stringify({ position: 'relative' }) }),
       },
       children: videoContainerNodes,
     });
diff --git a/packages/core/src/types/mitosis-node.ts b/packages/core/src/types/mitosis-node.ts
index 679541f51d..6ba5b12a06 100644
--- a/packages/core/src/types/mitosis-node.ts
+++ b/packages/core/src/types/mitosis-node.ts
@@ -1,6 +1,20 @@
 import { JSONObject } from './json';
 
-export type Binding = { code: string; arguments?: string[]; type?: 'spread' };
+export type SpreadType = 'normal' | 'event-handlers';
+
+type BindingProperties =
+  | {
+      type: 'spread';
+      spreadType: SpreadType;
+    }
+  | {
+      type: 'single';
+    };
+
+export type Binding = {
+  code: string;
+  arguments?: string[];
+} & BindingProperties;
 
 export type BaseNode = {
   '@type': '@builder.io/mitosis/node';