@builder.io/mitosis 0.0.56-35 → 0.0.56-38

package/dist/src/generators/angular.d.ts

@@ -1,6 +1,7 @@
 import { MitosisNode } from '../types/mitosis-node';
 import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
 export interface ToAngularOptions extends BaseTranspilerOptions {
+    standalone?: boolean;
 }
 interface AngularBlockOptions {
     contextVars?: string[];

package/dist/src/generators/angular.js

@@ -283,7 +283,10 @@ var componentToAngular = function (options) {
                 });
             },
         });
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      selector: '", "',\n      template: `\n        ", "\n      `,\n      ", "\n    })\n    export default class ", " {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      selector: '", "',\n      template: \\`\n        ", "\n      \\`,\n      ", "\n    })\n    export default class ", " {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', json.types ? json.types.join('\n') : '', json.interfaces ? (_h = json.interfaces) === null || _h === void 0 ? void 0 : _h.join('\n') : '', (0, render_imports_1.renderPreComponent)({ component: json, target: 'angular' }), (0, lodash_1.kebabCase)(json.name || 'my-component'), (0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${'), css.length
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n      selector: '", "',\n      template: `\n        ", "\n      `,\n      ", "\n    })\n    export default class ", " {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n      selector: '", "',\n      template: \\`\n        ", "\n      \\`,\n      ", "\n    })\n    export default class ", " {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', options.standalone ? "import { CommonModule } from '@angular/common';" : '', json.types ? json.types.join('\n') : '', json.interfaces ? (_h = json.interfaces) === null || _h === void 0 ? void 0 : _h.join('\n') : '', (0, render_imports_1.renderPreComponent)({ component: json, target: 'angular' }), options.standalone
+            ? // TODO: also add child component imports here as well
+                "\n        standalone: true,\n        imports: [CommonModule],\n      "
+            : '', (0, lodash_1.kebabCase)(json.name || 'my-component'), (0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${'), css.length
             ? "styles: [\n        `".concat((0, indent_1.indent)(css, 8), "`\n      ],")
             : '', component.name, localExportVars.join('\n'), Array.from(props)
             .filter(function (item) { return !(0, slots_1.isSlotProperty)(item) && item !== 'children'; })

package/dist/src/generators/marko/generate.js

@@ -23,6 +23,7 @@ var collect_css_1 = require("../../helpers/styles/collect-css");
 var indent_1 = require("../../helpers/indent");
 var map_refs_1 = require("../../helpers/map-refs");
 var dash_case_1 = require("../../helpers/dash-case");
+var has_props_1 = require("../../helpers/has-props");
 // Having issues with this, so off for now
 var USE_MARKO_PRETTIER = false;
 var blockToMarko = function (json, options) {
@@ -50,7 +51,7 @@ var blockToMarko = function (json, options) {
             .join('\n'), "</if>\n    ").concat(!json.meta.else ? '' : "<else>".concat(blockToMarko(json.meta.else, options), "</else>"));
     }
     var str = '';
-    str += "<".concat(json.name, " ");
+    str += "<".concat((0, dash_case_1.dashCase)(json.name), " ");
     var classString = (0, collect_class_string_1.collectClassString)(json);
     if (classString) {
         str += " class=".concat(classString, " ");
@@ -85,17 +86,17 @@ var blockToMarko = function (json, options) {
     if (json.children) {
         str += json.children.map(function (item) { return blockToMarko(item, options); }).join('\n');
     }
-    str += "</".concat(json.name, ">");
+    str += "</".concat((0, dash_case_1.dashCase)(json.name), ">");
     return str;
 };
 function processBinding(code, type) {
     if (type === void 0) { type = 'attribute'; }
     return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
-        replaceWith: type === 'class' ? 'this.input.' : 'input.',
+        replaceWith: type === 'state' ? 'input.' : type === 'class' ? 'this.input.' : 'input.',
         includeProps: true,
         includeState: false,
     }), {
-        replaceWith: type === 'class' ? 'this.state.' : 'state.',
+        replaceWith: type === 'state' ? 'this.' : type === 'class' ? 'this.state.' : 'state.',
         includeProps: false,
         includeState: true,
     });
@@ -120,8 +121,9 @@ var componentToMarko = function (options) {
             data: true,
             functions: true,
             getters: true,
-            valueMapper: function (code) { return processBinding(code, 'class'); },
+            valueMapper: function (code) { return processBinding(code, 'state'); },
         });
+        var thisHasProps = (0, has_props_1.hasProps)(json);
         var methodsString = '';
         var hasState = dataString.length > 5;
         if (options.prettier !== false) {
@@ -137,13 +139,13 @@ var componentToMarko = function (options) {
         }
         var jsString = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n\n    class {\n        ", "\n\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    }\n  "], ["\n    ", "\n\n    class {\n        ", "\n\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    }\n  "])), (0, render_imports_1.renderPreComponent)({ component: json, target: 'marko' }), methodsString, !hasState
             ? ''
-            : "onCreate() {\n          this.state = ".concat(dataString, "\n        }"), !((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code)
+            : "onCreate() {\n          ".concat(thisHasProps ? 'const input = this.input;' : '', "\n          this.state = ").concat(dataString, "\n        }"), !((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code)
             ? ''
-            : "onMount() { ".concat(processBinding(json.hooks.onMount.code), " }"), !((_c = json.hooks.onUnMount) === null || _c === void 0 ? void 0 : _c.code)
+            : "onMount() { ".concat(processBinding(json.hooks.onMount.code, 'class'), " }"), !((_c = json.hooks.onUnMount) === null || _c === void 0 ? void 0 : _c.code)
             ? ''
-            : "onDestroy() { ".concat(processBinding(json.hooks.onUnMount.code), " }"), !((_d = json.hooks.onUpdate) === null || _d === void 0 ? void 0 : _d.length)
+            : "onDestroy() { ".concat(processBinding(json.hooks.onUnMount.code, 'class'), " }"), !((_d = json.hooks.onUpdate) === null || _d === void 0 ? void 0 : _d.length)
             ? ''
-            : json.hooks.onUpdate.map(function (hook) { return "onRender() { ".concat(processBinding(hook.code), " }"); }));
+            : json.hooks.onUpdate.map(function (hook) { return "onRender() { ".concat(processBinding(hook.code, 'class'), " }"); }));
         var htmlString = json.children.map(function (item) { return blockToMarko(item, options); }).join('\n');
         var cssString = css.length
             ? "style { \n  ".concat((0, indent_1.indent)(css, 2).trim(), "\n}")

package/dist/test/qwik/Accordion/low.jsx

@@ -1,17 +1,26 @@
-import { h, qrl, withScopedStylesQrl } from "@builder.io/qwik";
+import {
+  Fragment,
+  h,
+  qrl,
+  useStore,
+  withScopedStylesQrl,
+} from "@builder.io/qwik";
 export const MyComponent_styles = `.csw5022{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;align-items:stretch}.csanagh{margin-top:10px;position:relative;display:flex;align-items:stretch;flex-direction:column;padding-bottom:10px}.c4qyc1p{position:relative;display:flex;align-items:stretch;flex-direction:column;margin-top:10px;padding-bottom:10px}.crwdrpw{text-align:left;display:flex;flex-direction:column}.ctcw2m4{padding-top:50px;text-align:left;display:flex;flex-direction:column;padding-bottom:50px}`;
-export const MyComponent_onMount = (state) => {
-  if (!state.__INIT__) {
-    state.__INIT__ = true;
-    typeof __STATE__ === "object" &&
-      Object.assign(state, __STATE__[state.serverStateId]);
-    undefined;
-  }
+export const MyComponent_onMount = (props) => {
+  const state = useStore(() => {
+    const state = Object.assign(
+      {},
+      props,
+      typeof __STATE__ === "object" ? __STATE__[props.serverStateId] : undefined
+    );
+    return state;
+  });
   withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
   return (
     <div
+      builder-id="builder-bb2f62792e464d73b7cb89258027f356"
       gridRowWidth="25%"
-      class="csw5022"
+      class="csw5022 builder-block"
       items={[
         {
           title: [
@@ -171,14 +180,20 @@ export const MyComponent_onMount = (state) => {
       <div>
         <div builder="accordion">
           <div builder="accordion-title">
-            <div class="csanagh">
+            <div
+              builder-id="builder-5fed2723c1cc4fb39e9d22b9c54ef179"
+              class="csanagh"
+            >
               <div class="crwdrpw">
                 <div innerHTML="<p>Item 1</p>" class="builder-text"></div>
               </div>
             </div>
           </div>
           <div builder="accordion-detail">
-            <div class="c4qyc1p">
+            <div
+              builder-id="builder-18279a99b32240f19aa21d3f4b015cc9"
+              class="c4qyc1p"
+            >
               <div class="ctcw2m4">
                 <div
                   innerHTML="<p>Item 1 content</p>"
@@ -190,14 +205,20 @@ export const MyComponent_onMount = (state) => {
         </div>
         <div builder="accordion">
           <div builder="accordion-title">
-            <div class="csanagh">
+            <div
+              builder-id="builder-2a93def22a354cf7aa193c20d1ad6def"
+              class="csanagh"
+            >
               <div class="crwdrpw">
                 <div innerHTML="<p>Item 2</p>" class="builder-text"></div>
               </div>
             </div>
           </div>
           <div builder="accordion-detail">
-            <div class="c4qyc1p">
+            <div
+              builder-id="builder-fd6ef41da6d040328fbd8b0801611fe5"
+              class="c4qyc1p"
+            >
               <div class="ctcw2m4">
                 <div
                   innerHTML="<p>Item 2 content</p>"

package/dist/test/qwik/For/low.jsx

@@ -1,38 +1,51 @@
-import { h, qrl, withScopedStylesQrl } from "@builder.io/qwik";
+import {
+  Fragment,
+  h,
+  qrl,
+  useStore,
+  withScopedStylesQrl,
+} from "@builder.io/qwik";
 export const MyComponent_styles = `.cvdfnp5{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:0px;padding-left:20px;padding-right:20px;padding-top:50px;padding-bottom:50px;width:100vw;margin-left:calc(50% - 50vw)}.cz5wnof{width:100%;align-self:stretch;flex-grow:1;box-sizing:border-box;max-width:1200px;display:flex;flex-direction:column;align-items:stretch;margin-left:auto;margin-right:auto}.cdrk993{text-align:center}`;
-export const MyComponent_onMount = (state) => {
-  if (!state.__INIT__) {
-    state.__INIT__ = true;
-    typeof __STATE__ === "object" &&
-      Object.assign(state, __STATE__[state.serverStateId]);
-    undefined;
-  }
+export const MyComponent_onMount = (props) => {
+  const state = useStore(() => {
+    const state = Object.assign(
+      {},
+      props,
+      typeof __STATE__ === "object" ? __STATE__[props.serverStateId] : undefined
+    );
+    return state;
+  });
   withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
   return (
-    <div class="cvdfnp5" maxWidth={1200}>
-      <section class="cz5wnof">
-        {(state.simpleList.results || []).map(
-          function (__value__) {
-            var state = Object.assign({}, this, {
-              resultsItem: __value__ == null ? {} : __value__,
-            });
-            return (
-              <div class="cdrk993">
-                <div
-                  class="builder-text"
-                  innerHTML={(() => {
-                    try {
-                      var _virtual_index = state.resultsItem.data.title;
-                      return _virtual_index;
-                    } catch (err) {
-                      console.warn("Builder code error", err);
-                    }
-                  })()}
-                ></div>
-              </div>
-            );
-          }.bind(state)
-        )}
+    <div
+      builder-id="builder-a58a66676d9b4ecc826c1b8bc5ad91f1"
+      class="cvdfnp5 builder-block"
+      maxWidth={1200}
+    >
+      <section
+        builder-id="builder-a58a66676d9b4ecc826c1b8bc5ad91f1"
+        class="cz5wnof"
+      >
+        {(state.simpleList.results || []).map((item) => {
+          var state = Object.assign({}, this, {
+            resultsItem: item == null ? {} : item,
+          });
+          return (
+            <div class="cdrk993">
+              <div
+                class="builder-text"
+                innerHTML={(() => {
+                  try {
+                    var _virtual_index = state.resultsItem.data.title;
+                    return _virtual_index;
+                  } catch (err) {
+                    console.warn("Builder code error", err);
+                  }
+                })()}
+              ></div>
+            </div>
+          );
+        })}
       </section>
     </div>
   );

package/dist/test/qwik/Image/med.js

@@ -3,22 +3,26 @@ import {
   componentQrl,
   h,
   qrl,
+  useStore,
   withScopedStylesQrl,
 } from "@builder.io/qwik";
 export const MyComponent_styles = `.cvk52jt{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;min-height:20px;min-width:20px;overflow:hidden}.cjrqfb1{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;line-height:normal;height:auto;text-align:center}`;
-export const MyComponent_onMount = (state) => {
-  if (!state.__INIT__) {
-    state.__INIT__ = true;
+export const MyComponent_onMount = (props) => {
+  const state = useStore(() => {
+    const state = Object.assign(
+      {},
+      props,
+      typeof __STATE__ === "object" ? __STATE__[props.serverStateId] : undefined
+    );
     if (!state.hasOwnProperty("myState")) state.myState = "initialValue";
-    typeof __STATE__ === "object" &&
-      Object.assign(state, __STATE__[state.serverStateId]);
-    undefined;
-  }
+    return state;
+  });
   withScopedStylesQrl(qrl("./med.js", "MyComponent_styles", []));
   return h(
     Fragment,
     null,
     h(Image, {
+      "builder-id": "builder-fa4480d2f48a44a7a2e98cf07c54927b",
       image:
         "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1160",
       backgroundSize: "cover",
@@ -26,8 +30,8 @@ export const MyComponent_onMount = (state) => {
       srcset:
         "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=100 100w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=200 200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=400 400w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=800 800w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1160 1160w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=598 598w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=958 958w",
       sizes: "(max-width: 638px) 94vw, (max-width: 998px) 96vw, 83vw",
-      class: "cvk52jt",
-      onClickQrl: qrl("./high.js", "MyComponent_onClick_0", [state]),
+      class: "cvk52jt builder-block",
+      onClick$: qrl("./high.js", "MyComponent_onClick_0", [state]),
       lazy: false,
       fitContent: true,
       aspectRatio: 1,
@@ -142,7 +146,7 @@ export const __passThroughProps__ = function __passThroughProps__(
   for (var key in srcProps) {
     if (
       Object.prototype.hasOwnProperty.call(srcProps, key) &&
-      ((key.startsWith("on") && key.endsWith("Qrl")) || key == "style")
+      ((key.startsWith("on") && key.endsWith("$")) || key == "style")
     ) {
       dstProps[key] = srcProps[key];
     }

package/dist/test/qwik/Image.slow/med.js

@@ -3,22 +3,26 @@ import {
   componentQrl,
   h,
   qrl,
+  useStore,
   withScopedStylesQrl,
 } from "@builder.io/qwik";
 export const MyComponent_styles = `.cvk52jt{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;min-height:20px;min-width:20px;overflow:hidden}.cjrqfb1{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;line-height:normal;height:auto;text-align:center}`;
-export const MyComponent_onMount = (state) => {
-  if (!state.__INIT__) {
-    state.__INIT__ = true;
+export const MyComponent_onMount = (props) => {
+  const state = useStore(() => {
+    const state = Object.assign(
+      {},
+      props,
+      typeof __STATE__ === "object" ? __STATE__[props.serverStateId] : undefined
+    );
     if (!state.hasOwnProperty("myState")) state.myState = "initialValue";
-    typeof __STATE__ === "object" &&
-      Object.assign(state, __STATE__[state.serverStateId]);
-    undefined;
-  }
+    return state;
+  });
   withScopedStylesQrl(qrl("./med.js", "MyComponent_styles", []));
   return h(
     Fragment,
     null,
     h(Image, {
+      "builder-id": "builder-fa4480d2f48a44a7a2e98cf07c54927b",
       image:
         "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1160",
       backgroundSize: "cover",
@@ -26,8 +30,8 @@ export const MyComponent_onMount = (state) => {
       srcset:
         "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=100 100w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=200 200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=400 400w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=800 800w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1160 1160w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=598 598w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=958 958w",
       sizes: "(max-width: 638px) 94vw, (max-width: 998px) 96vw, 83vw",
-      class: "cvk52jt",
-      onClickQrl: qrl("./high.js", "MyComponent_onClick_0", [state]),
+      class: "cvk52jt builder-block",
+      onClick$: qrl("./high.js", "MyComponent_onClick_0", [state]),
       lazy: false,
       fitContent: true,
       aspectRatio: 1,
@@ -142,7 +146,7 @@ export const __passThroughProps__ = function __passThroughProps__(
   for (var key in srcProps) {
     if (
       Object.prototype.hasOwnProperty.call(srcProps, key) &&
-      ((key.startsWith("on") && key.endsWith("Qrl")) || key == "style")
+      ((key.startsWith("on") && key.endsWith("$")) || key == "style")
     ) {
       dstProps[key] = srcProps[key];
     }

package/dist/test/qwik/bindings/low.cjs

@@ -1,16 +1,20 @@
+const Fragment = require("@builder.io/qwik").Fragment;
 const h = require("@builder.io/qwik").h;
 const qrl = require("@builder.io/qwik").qrl;
+const useStore = require("@builder.io/qwik").useStore;
 const withScopedStylesQrl = require("@builder.io/qwik").withScopedStylesQrl;
 exports.MyComponent_styles = `.cjrqfb1{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;line-height:normal;height:auto;text-align:center}`;
-exports.MyComponent_onMount = (state) => {
-  if (!state.__INIT__) {
-    state.__INIT__ = true;
+exports.MyComponent_onMount = (props) => {
+  const state = useStore(() => {
+    const state = Object.assign(
+      {},
+      props,
+      typeof __STATE__ === "object" ? __STATE__[props.serverStateId] : undefined
+    );
     if (!state.hasOwnProperty("title")) state.title = '"Default title value"';
     if (!state.hasOwnProperty("hiliteTitle")) state.hiliteTitle = true;
-    typeof __STATE__ === "object" &&
-      Object.assign(state, __STATE__[state.serverStateId]);
-    undefined;
-  }
+    return state;
+  });
   withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
   return h(
     "div",

package/dist/test/qwik/button/low.js

@@ -1,17 +1,25 @@
 import { CoreButton } from "./med.js";
-import { h, qrl, withScopedStylesQrl } from "@builder.io/qwik";
+import {
+  Fragment,
+  h,
+  qrl,
+  useStore,
+  withScopedStylesQrl,
+} from "@builder.io/qwik";
 export const MyComponent_styles = `.c9nzze9{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;appearance:none;padding-top:15px;padding-bottom:15px;padding-left:25px;padding-right:25px;background-color:#3898EC;color:white;border-radius:4px;text-align:center;cursor:pointer}`;
-export const MyComponent_onMount = (state) => {
-  if (!state.__INIT__) {
-    state.__INIT__ = true;
-    typeof __STATE__ === "object" &&
-      Object.assign(state, __STATE__[state.serverStateId]);
-    undefined;
-  }
+export const MyComponent_onMount = (props) => {
+  const state = useStore(() => {
+    const state = Object.assign(
+      {},
+      props,
+      typeof __STATE__ === "object" ? __STATE__[props.serverStateId] : undefined
+    );
+    return state;
+  });
   withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
   return h(CoreButton, {
     text: "Click me!",
     class: "c9nzze9",
-    onClickQrl: qrl("./high.js", "MyComponent_onClick_0", [state]),
+    onClick$: qrl("./high.js", "MyComponent_onClick_0", [state]),
   });
 };

package/dist/test/qwik/button/med.js

@@ -22,7 +22,7 @@ export const __passThroughProps__ = function __passThroughProps__(
   for (var key in srcProps) {
     if (
       Object.prototype.hasOwnProperty.call(srcProps, key) &&
-      ((key.startsWith("on") && key.endsWith("Qrl")) || key == "style")
+      ((key.startsWith("on") && key.endsWith("$")) || key == "style")
     ) {
       dstProps[key] = srcProps[key];
     }

package/dist/test/qwik/component/bindings/low.jsx

@@ -1,19 +1,30 @@
 import { ComponentD187055AF171488FAD843ACF045D6BF7 } from "./med.js";
-import { Fragment, h, qrl, withScopedStylesQrl } from "@builder.io/qwik";
+import {
+  Fragment,
+  h,
+  qrl,
+  useStore,
+  withScopedStylesQrl,
+} from "@builder.io/qwik";
 export const ComponentD187055AF171488FAD843ACF045D6BF7_styles = `.cj49hqu{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;height:auto;background-color:rgba(227, 227, 227, 1);border-radius:5px;border-style:solid;border-color:rgb(0, 0, 0);border-width:1px;padding-bottom:30px}.cjrqfb1{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;line-height:normal;height:auto;text-align:center}`;
-export const ComponentD187055AF171488FAD843ACF045D6BF7_onMount = (state) => {
-  if (!state.__INIT__) {
-    state.__INIT__ = true;
+export const ComponentD187055AF171488FAD843ACF045D6BF7_onMount = (props) => {
+  const state = useStore(() => {
+    const state = Object.assign(
+      {},
+      props,
+      typeof __STATE__ === "object" ? __STATE__[props.serverStateId] : undefined
+    );
     if (!state.hasOwnProperty("title")) state.title = "default-title";
-    typeof __STATE__ === "object" &&
-      Object.assign(state, __STATE__[state.serverStateId]);
-    undefined;
-  }
+    return state;
+  });
   withScopedStylesQrl(
     qrl("./low.js", "ComponentD187055AF171488FAD843ACF045D6BF7_styles", [])
   );
   return (
-    <div class="cj49hqu">
+    <div
+      builder-id="builder-139a8479536b4c4f9c2738e724ed0952"
+      class="cj49hqu builder-block"
+    >
       <div class="cjrqfb1">
         <div
           class="builder-text"
@@ -31,54 +42,61 @@ export const ComponentD187055AF171488FAD843ACF045D6BF7_onMount = (state) => {
   );
 };
 export const MyComponent_styles = `.c713ty2{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px}`;
-export const MyComponent_onMount = (state) => {
-  if (!state.__INIT__) {
-    state.__INIT__ = true;
-    typeof __STATE__ === "object" &&
-      Object.assign(state, __STATE__[state.serverStateId]);
-    (() => {
-      /*
-       * Global objects available:
-       *
-       * state - builder state object - learn about state https://www.builder.io/c/docs/guides/state-and-actions
-       * context - builder context object - learn about state https://github.com/BuilderIO/builder/tree/main/packages/react#passing-data-and-functions-down
-       * fetch - Fetch API - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API'
-       * Builder - Builder object - useful values include: Builder.isServer, Builder.isBrowser, Builder.isPreviewing, Builder.isEditing
-       *
-       * visit https://www.builder.io/c/docs/guides/custom-code
-       * for more information on writing custom code
-       */
-      async function main() {
-        if (Builder.isServer) {
-          // Place any code here you want to only run on the server. Any
-          // data fetched on the server will be available to re-hydrate on the client
-          // if added to the state object
-        }
-
-        if (Builder.isBrowser) {
-          // Place code that you only want to run in the browser (client side only) here
-          // For example, anything that uses document/window access or DOM manipulation
-        }
+export const MyComponent_onMount = (props) => {
+  const state = useStore(() => {
+    const state = Object.assign(
+      {},
+      props,
+      typeof __STATE__ === "object" ? __STATE__[props.serverStateId] : undefined
+    );
+    /*
+     * Global objects available:
+     *
+     * state - builder state object - learn about state https://www.builder.io/c/docs/guides/state-and-actions
+     * context - builder context object - learn about state https://github.com/BuilderIO/builder/tree/main/packages/react#passing-data-and-functions-down
+     * fetch - Fetch API - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API'
+     * Builder - Builder object - useful values include: Builder.isServer, Builder.isBrowser, Builder.isPreviewing, Builder.isEditing
+     *
+     * visit https://www.builder.io/c/docs/guides/custom-code
+     * for more information on writing custom code
+     */
+    async function main() {
+      if (Builder.isServer) {
+        // Place any code here you want to only run on the server. Any
+        // data fetched on the server will be available to re-hydrate on the client
+        // if added to the state object
+      }
 
-        state.something = "works!";
+      if (Builder.isBrowser) {
+        // Place code that you only want to run in the browser (client side only) here
+        // For example, anything that uses document/window access or DOM manipulation
       }
 
-      return main();
-    })();
-  }
+      state.something = "works!";
+    }
+    return state;
+  });
   withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
   return (
     <>
-      <div class="c713ty2">
+      <div
+        builder-id="builder-50b2438beaa4498b985eb9d8a7659afa"
+        class="c713ty2 builder-block"
+      >
         <ComponentD187055AF171488FAD843ACF045D6BF7
+          builder-id="builder-l6nwek"
           title="First title from parent"
-          serverStateId="woo8b6"
+          serverStateId="w8x6w6"
         ></ComponentD187055AF171488FAD843ACF045D6BF7>
       </div>
-      <div class="c713ty2">
+      <div
+        builder-id="builder-33f427415bef4725b0c9fcd4fed325f2"
+        class="c713ty2 builder-block"
+      >
         <ComponentD187055AF171488FAD843ACF045D6BF7
+          builder-id="builder-1iryyq"
           title="Second title from parent"
-          serverStateId="woo8b6"
+          serverStateId="w8x6w6"
         ></ComponentD187055AF171488FAD843ACF045D6BF7>
       </div>
     </>

package/dist/test/qwik/component/component/inputs/med.cjsx

@@ -2,16 +2,19 @@ const Fragment = require("@builder.io/qwik").Fragment;
 const componentQrl = require("@builder.io/qwik").componentQrl;
 const h = require("@builder.io/qwik").h;
 const qrl = require("@builder.io/qwik").qrl;
+const useStore = require("@builder.io/qwik").useStore;
 const withScopedStylesQrl = require("@builder.io/qwik").withScopedStylesQrl;
 exports.MyComponent_styles = `.cjrqfb1{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;line-height:normal;height:auto;text-align:center}.c9nzze9{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;appearance:none;padding-top:15px;padding-bottom:15px;padding-left:25px;padding-right:25px;background-color:#3898EC;color:white;border-radius:4px;text-align:center;cursor:pointer}`;
-exports.MyComponent_onMount = (state) => {
-  if (!state.__INIT__) {
-    state.__INIT__ = true;
+exports.MyComponent_onMount = (props) => {
+  const state = useStore(() => {
+    const state = Object.assign(
+      {},
+      props,
+      typeof __STATE__ === "object" ? __STATE__[props.serverStateId] : undefined
+    );
     if (!state.hasOwnProperty("data")) state.data = 0;
-    typeof __STATE__ === "object" &&
-      Object.assign(state, __STATE__[state.serverStateId]);
-    undefined;
-  }
+    return state;
+  });
   withScopedStylesQrl(qrl("./med.js", "MyComponent_styles", []));
   return (
     <>
@@ -29,9 +32,10 @@ exports.MyComponent_onMount = (state) => {
         ></div>
       </div>
       <CoreButton
+        builder-id="builder-6f8fe6a1d2284f2890ae97657eed084a"
         text="Something else"
-        class="c9nzze9"
-        onClickQrl={qrl("./high.js", "MyComponent_onClick_0", [state])}
+        class="c9nzze9 builder-block"
+        onClick$={qrl("./high.js", "MyComponent_onClick_0", [state])}
       ></CoreButton>
     </>
   );
@@ -55,7 +59,7 @@ const __passThroughProps__ = (exports.__passThroughProps__ =
     for (var key in srcProps) {
       if (
         Object.prototype.hasOwnProperty.call(srcProps, key) &&
-        ((key.startsWith("on") && key.endsWith("Qrl")) || key == "style")
+        ((key.startsWith("on") && key.endsWith("$")) || key == "style")
       ) {
         dstProps[key] = srcProps[key];
       }