@builder.io/mitosis 0.0.56-14 → 0.0.56-15

package/dist/src/__tests__/angular.test.js

@@ -1,109 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var angular_1 = require("../generators/angular");
-var jsx_1 = require("../parsers/jsx");
-var multipleOnUpdate = require('./data/blocks/multiple-onUpdate.raw');
-var onUpdate = require('./data/blocks/onUpdate.raw');
-var onMount = require('./data/blocks/onMount.raw');
-var onInitonMount = require('./data/blocks/onInit-onMount.raw');
-var onInit = require('./data/blocks/onInit.raw');
-var basicFor = require('./data/basic-for.raw');
-var basic = require('./data/basic.raw');
-var basicChildComponent = require('./data/basic-child-component.raw');
-var basicOutputsMeta = require('./data/basic-outputs-meta.raw');
-var basicOutputs = require('./data/basic-outputs.raw');
-var contentSlotHtml = require('./data/blocks/content-slot-html.raw');
-var contentSlotJsx = require('./data/blocks/content-slot-jsx.raw');
-var slotJsx = require('./data/blocks/slot-jsx.raw');
-var classNameJsx = require('./data/blocks/classname-jsx.raw');
-var text = require('./data/blocks/text.raw');
-// const slotHtml = require('./data/blocks/slot-html.raw');
+var shared_1 = require("./shared");
 describe('Angular', function () {
-    test('Basic', function () {
-        var component = (0, jsx_1.parseJsx)(basic);
-        var output = (0, angular_1.componentToAngular)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Basic Child Component', function () {
-        var component = (0, jsx_1.parseJsx)(basicChildComponent);
-        var output = (0, angular_1.componentToAngular)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('basic outputs meta', function () {
-        var component = (0, jsx_1.parseJsx)(basicOutputsMeta);
-        var output = (0, angular_1.componentToAngular)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('basic outputs', function () {
-        var component = (0, jsx_1.parseJsx)(basicOutputs);
-        var output = (0, angular_1.componentToAngular)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('basic outputs same as meta', function () {
-        var component = (0, jsx_1.parseJsx)(basicOutputs);
-        var componentMeta = (0, jsx_1.parseJsx)(basicOutputsMeta);
-        var output = (0, angular_1.componentToAngular)()({ component: component });
-        var outputMeta = (0, angular_1.componentToAngular)()({ component: componentMeta });
-        expect(output).toMatch(outputMeta);
-    });
-    test('multiple onUpdate', function () {
-        var component = (0, jsx_1.parseJsx)(multipleOnUpdate);
-        var output = (0, angular_1.componentToAngular)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('onUpdate', function () {
-        var component = (0, jsx_1.parseJsx)(onUpdate);
-        var output = (0, angular_1.componentToAngular)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('onMount', function () {
-        var component = (0, jsx_1.parseJsx)(onMount);
-        var output = (0, angular_1.componentToAngular)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('onInit and onMount', function () {
-        var component = (0, jsx_1.parseJsx)(onInitonMount);
-        var output = (0, angular_1.componentToAngular)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('onInit', function () {
-        var component = (0, jsx_1.parseJsx)(onInit);
-        var output = (0, angular_1.componentToAngular)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('BasicFor', function () {
-        var component = (0, jsx_1.parseJsx)(basicFor);
-        var output = (0, angular_1.componentToAngular)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('ng-content and Slot', function () {
-        var component = (0, jsx_1.parseJsx)(contentSlotHtml);
-        var output = (0, angular_1.componentToAngular)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('ng-content and Slot jsx-props', function () {
-        var component = (0, jsx_1.parseJsx)(contentSlotJsx);
-        var output = (0, angular_1.componentToAngular)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Slot Jsx', function () {
-        var component = (0, jsx_1.parseJsx)(slotJsx);
-        var output = (0, angular_1.componentToAngular)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    // test('Slot Html', () => {
-    //   const component = parseJsx(slotHtml);
-    //   const output = componentToAngular()({ component });
-    //   expect(output).toMatchSnapshot();
-    // });
-    test('className to class', function () {
-        var component = (0, jsx_1.parseJsx)(classNameJsx);
-        var output = (0, angular_1.componentToAngular)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Text', function () {
-        var component = (0, jsx_1.parseJsx)(text);
-        var output = (0, angular_1.componentToAngular)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
+    (0, shared_1.runTestsForTarget)('angular', (0, angular_1.componentToAngular)());
 });

package/dist/src/__tests__/builder.test.js

@@ -160,7 +160,7 @@ describe('Builder', function () {
         });
     }); });
     test('Regenerate Image', function () {
-        var code = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      import { useState } from \"@builder.io/mitosis\";\n      import { Image } from \"@components\";\n\n      export default function MyComponent(props) {\n        const state = useState({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <div\n            css={{\n              padding: \"20px\",\n            }}\n          >\n            <Image\n              image=\"https://cdn.builder.io/api/v1/image/foobar\"\n              sizes=\"100vw\"\n              backgroundSize=\"contain\"\n              css={{\n                marignTop: \"50px\",\n                display: \"block\",\n              }}\n            />\n          </div>\n        );\n      }\n    "], ["\n      import { useState } from \"@builder.io/mitosis\";\n      import { Image } from \"@components\";\n\n      export default function MyComponent(props) {\n        const state = useState({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <div\n            css={{\n              padding: \"20px\",\n            }}\n          >\n            <Image\n              image=\"https://cdn.builder.io/api/v1/image/foobar\"\n              sizes=\"100vw\"\n              backgroundSize=\"contain\"\n              css={{\n                marignTop: \"50px\",\n                display: \"block\",\n              }}\n            />\n          </div>\n        );\n      }\n    "])));
+        var code = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      import { useStore } from \"@builder.io/mitosis\";\n      import { Image } from \"@components\";\n\n      export default function MyComponent(props) {\n        const state = useStore({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <div\n            css={{\n              padding: \"20px\",\n            }}\n          >\n            <Image\n              image=\"https://cdn.builder.io/api/v1/image/foobar\"\n              sizes=\"100vw\"\n              backgroundSize=\"contain\"\n              css={{\n                marignTop: \"50px\",\n                display: \"block\",\n              }}\n            />\n          </div>\n        );\n      }\n    "], ["\n      import { useStore } from \"@builder.io/mitosis\";\n      import { Image } from \"@components\";\n\n      export default function MyComponent(props) {\n        const state = useStore({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <div\n            css={{\n              padding: \"20px\",\n            }}\n          >\n            <Image\n              image=\"https://cdn.builder.io/api/v1/image/foobar\"\n              sizes=\"100vw\"\n              backgroundSize=\"contain\"\n              css={{\n                marignTop: \"50px\",\n                display: \"block\",\n              }}\n            />\n          </div>\n        );\n      }\n    "])));
         var component = (0, jsx_1.parseJsx)(code);
         var builderJson = (0, builder_1.componentToBuilder)()({ component: component });
         var backToMitosis = (0, builder_2.builderContentToMitosisComponent)(builderJson);
@@ -174,7 +174,7 @@ describe('Builder', function () {
         expect(react).toMatchSnapshot();
     });
     test('Regenerate Text', function () {
-        var code = (0, dedent_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      import { useState } from \"@builder.io/mitosis\";\n\n      export default function MyComponent(props) {\n        const state = useState({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <div\n            css={{\n              padding: \"20px\",\n            }}\n          >\n            <h2\n              css={{\n                marginBottom: \"20px\",\n              }}\n            >\n              Hello!\n            </h2>\n          </div>\n        );\n      }\n    "], ["\n      import { useState } from \"@builder.io/mitosis\";\n\n      export default function MyComponent(props) {\n        const state = useState({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <div\n            css={{\n              padding: \"20px\",\n            }}\n          >\n            <h2\n              css={{\n                marginBottom: \"20px\",\n              }}\n            >\n              Hello!\n            </h2>\n          </div>\n        );\n      }\n    "])));
+        var code = (0, dedent_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      import { useStore } from \"@builder.io/mitosis\";\n\n      export default function MyComponent(props) {\n        const state = useStore({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <div\n            css={{\n              padding: \"20px\",\n            }}\n          >\n            <h2\n              css={{\n                marginBottom: \"20px\",\n              }}\n            >\n              Hello!\n            </h2>\n          </div>\n        );\n      }\n    "], ["\n      import { useStore } from \"@builder.io/mitosis\";\n\n      export default function MyComponent(props) {\n        const state = useStore({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <div\n            css={{\n              padding: \"20px\",\n            }}\n          >\n            <h2\n              css={{\n                marginBottom: \"20px\",\n              }}\n            >\n              Hello!\n            </h2>\n          </div>\n        );\n      }\n    "])));
         var component = (0, jsx_1.parseJsx)(code);
         var builderJson = (0, builder_1.componentToBuilder)()({ component: component });
         var backToMitosis = (0, builder_2.builderContentToMitosisComponent)(builderJson);
@@ -184,7 +184,7 @@ describe('Builder', function () {
         expect(mitosis.trim()).toEqual(code.trim());
     });
     test('Regenerate loop', function () {
-        var code = (0, dedent_1.default)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      import { useState, For } from \"@builder.io/mitosis\";\n\n      export default function MyComponent(props) {\n        const state = useState({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <For each={state.people}>\n            {(person, index) => (\n              <div\n                key={person}\n                css={{\n                  padding: \"10px 0\",\n                }}\n              >\n                <span>{person}</span>\n                <span>{index}</span>\n              </div>\n            )}\n          </For>\n        );\n      }\n    "], ["\n      import { useState, For } from \"@builder.io/mitosis\";\n\n      export default function MyComponent(props) {\n        const state = useState({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <For each={state.people}>\n            {(person, index) => (\n              <div\n                key={person}\n                css={{\n                  padding: \"10px 0\",\n                }}\n              >\n                <span>{person}</span>\n                <span>{index}</span>\n              </div>\n            )}\n          </For>\n        );\n      }\n    "])));
+        var code = (0, dedent_1.default)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      import { useStore, For } from \"@builder.io/mitosis\";\n\n      export default function MyComponent(props) {\n        const state = useStore({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <For each={state.people}>\n            {(person, index) => (\n              <div\n                key={person}\n                css={{\n                  padding: \"10px 0\",\n                }}\n              >\n                <span>{person}</span>\n                <span>{index}</span>\n              </div>\n            )}\n          </For>\n        );\n      }\n    "], ["\n      import { useStore, For } from \"@builder.io/mitosis\";\n\n      export default function MyComponent(props) {\n        const state = useStore({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <For each={state.people}>\n            {(person, index) => (\n              <div\n                key={person}\n                css={{\n                  padding: \"10px 0\",\n                }}\n              >\n                <span>{person}</span>\n                <span>{index}</span>\n              </div>\n            )}\n          </For>\n        );\n      }\n    "])));
         var component = (0, jsx_1.parseJsx)(code);
         var builderJson = (0, builder_1.componentToBuilder)()({ component: component });
         var backToMitosis = (0, builder_2.builderContentToMitosisComponent)(builderJson);

package/dist/src/__tests__/data/basic-child-component.raw.jsx

@@ -7,12 +7,11 @@ var mitosis_1 = require("@builder.io/mitosis");
 var basic_raw_1 = __importDefault(require("./basic.raw"));
 var basic_onMount_update_raw_1 = __importDefault(require("./basic-onMount-update.raw"));
 function MyBasicChildComponent() {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         name: 'Steve',
         dev: 'PatrickJS',
     });
     return (<div>
-      {/*// @ts-ignore */}
       <basic_raw_1.default id={state.dev}/>
       <div>
         <basic_onMount_update_raw_1.default hi={state.name} bye={state.dev}/>

package/dist/src/__tests__/data/basic-context.raw.jsx

@@ -5,7 +5,7 @@ var injection_js_1 = require("@dummy/injection-js");
 function MyBasicComponent() {
     (0, mitosis_1.setContext)(injection_js_1.Injector, (0, injection_js_1.createInjector)());
     var myService = (0, mitosis_1.useContext)(injection_js_1.MyService);
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         name: 'PatrickJS',
     });
     (0, mitosis_1.onInit)(function () {

package/dist/src/__tests__/data/basic-custom-mitosis-package.raw.jsx

@@ -2,11 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var custom_mitosis_1 = require("@dummy/custom-mitosis");
 function MyBasicComponent() {
-    var state = (0, custom_mitosis_1.useState)({
+    var state = (0, custom_mitosis_1.useStore)({
         name: 'PatrickJS',
     });
-    return (<div>
-      Hello {state.name}! I can run in React, Qwik, Vue, Solid, or Liquid!
-    </div>);
+    return <div>Hello {state.name}! I can run in React, Qwik, Vue, Solid, or Liquid!</div>;
 }
 exports.default = MyBasicComponent;

package/dist/src/__tests__/data/basic-for-show.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function MyBasicForShowComponent() {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         name: 'PatrickJS',
         names: ['Steve', 'PatrickJS'],
     });
@@ -12,8 +12,7 @@ function MyBasicForShowComponent() {
             <input value={state.name} onChange={function (event) {
                 state.name = event.target.value + ' and ' + person;
             }}/>
-            Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid,
-            or Liquid!
+            Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid, or Liquid!
           </mitosis_1.Show>); }}
       </mitosis_1.For>
     </div>);

package/dist/src/__tests__/data/basic-for.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function MyBasicForComponent() {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         name: 'PatrickJS',
         names: ['Steve', 'PatrickJS'],
     });
@@ -15,8 +15,7 @@ function MyBasicForComponent() {
             <input value={state.name} onChange={function (event) {
                 state.name = event.target.value + ' and ' + person;
             }}/>
-            Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid,
-            or Liquid!
+            Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid, or Liquid!
           </>); }}
       </mitosis_1.For>
     </div>);

package/dist/src/__tests__/data/basic-forwardRef-metadata.raw.d.ts

@@ -1,5 +1,5 @@
 export interface Props {
     showInput: boolean;
-    inputRef: any;
+    inputRef: HTMLInputElement;
 }
 export default function MyBasicForwardRefComponent(props: Props): JSX.Element;

package/dist/src/__tests__/data/basic-forwardRef-metadata.raw.jsx

@@ -5,7 +5,7 @@ var mitosis_1 = require("@builder.io/mitosis");
     forwardRef: 'inputRef',
 });
 function MyBasicForwardRefComponent(props) {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         name: 'PatrickJS',
     });
     return (<div>

package/dist/src/__tests__/data/basic-forwardRef.raw.d.ts

@@ -1,5 +1,5 @@
 export interface Props {
     showInput: boolean;
-    inputRef: any;
+    inputRef: HTMLInputElement;
 }
 export default function MyBasicForwardRefComponent(props: Props): JSX.Element;

package/dist/src/__tests__/data/basic-forwardRef.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function MyBasicForwardRefComponent(props) {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         name: 'PatrickJS',
     });
     return (<div>

package/dist/src/__tests__/data/basic-onChange.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function MyBasicComponent() {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         name: 'Steve',
     });
     return (<div class="test" css={{

package/dist/src/__tests__/data/basic-onMount-update.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function MyBasicOnMountUpdateComponent(props) {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         name: 'PatrickJS',
         names: ['Steve', 'PatrickJS'],
     });

package/dist/src/__tests__/data/basic-onUpdate-return.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function MyBasicOnUpdateReturnComponent() {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         name: 'PatrickJS',
     });
     (0, mitosis_1.onUpdate)(function () {

package/dist/src/__tests__/data/basic-outputs-meta.raw.jsx

@@ -5,7 +5,7 @@ var mitosis_1 = require("@builder.io/mitosis");
     outputs: ['onMessage', 'onEvent'],
 });
 function MyBasicOutputsComponent(props) {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         name: 'PatrickJS',
     });
     (0, mitosis_1.onMount)(function () {

package/dist/src/__tests__/data/basic-outputs.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function MyBasicOutputsComponent(props) {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         name: 'PatrickJS',
     });
     (0, mitosis_1.onMount)(function () {

package/dist/src/__tests__/data/basic-preserve-export-or-local-statement.raw.d.ts

@@ -0,0 +1,6 @@
+export declare const a = 3;
+export declare const bar: () => void;
+export declare function run<T>(value: T): void;
+export default function MyBasicComponent(props: {
+    id: string;
+}): JSX.Element;

package/dist/src/__tests__/data/basic-preserve-export-or-local-statement.raw.jsx

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.run = exports.bar = exports.a = void 0;
+var b = 3;
+var foo = function () { };
+exports.a = 3;
+var bar = function () { };
+exports.bar = bar;
+function run(value) { }
+exports.run = run;
+function MyBasicComponent(props) {
+    return <div></div>;
+}
+exports.default = MyBasicComponent;

package/dist/src/__tests__/data/basic-props-destructure.raw.d.ts

@@ -0,0 +1,6 @@
+declare type Props = {
+    children: any;
+    type: string;
+};
+export default function MyBasicComponent({ children: c, type }: Props): JSX.Element;
+export {};

package/dist/src/__tests__/data/basic-props-destructure.raw.jsx

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicComponent(_a) {
+    var c = _a.children, type = _a.type;
+    var state = (0, mitosis_1.useStore)({
+        name: 'Decadef20',
+    });
+    return (<div>
+      {c} {type}
+      Hello! I can run in React, Vue, Solid, or Liquid!
+    </div>);
+}
+exports.default = MyBasicComponent;

package/dist/src/__tests__/data/basic-props.raw.d.ts

@@ -0,0 +1,6 @@
+declare type Props = {
+    children: any;
+    type: string;
+};
+export default function MyBasicComponent(props: Props): JSX.Element;
+export {};

package/dist/src/__tests__/data/basic-props.raw.jsx

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicComponent(props) {
+    var state = (0, mitosis_1.useStore)({
+        name: 'Decadef20',
+    });
+    return (<div>
+      {props.children} {props.type}
+      Hello! I can run in React, Vue, Solid, or Liquid!
+    </div>);
+}
+exports.default = MyBasicComponent;

package/dist/src/__tests__/data/basic-ref-usePrevious.raw.jsx

@@ -15,7 +15,7 @@ function usePrevious(value) {
 }
 exports.usePrevious = usePrevious;
 function MyPreviousComponent(props) {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         count: 0,
     });
     var prevCount = (0, mitosis_1.useRef)(state.count);

package/dist/src/__tests__/data/basic-ref.raw.jsx

@@ -4,7 +4,7 @@ var mitosis_1 = require("@builder.io/mitosis");
 function MyBasicRefComponent(props) {
     var inputRef = (0, mitosis_1.useRef)(null);
     var inputNoArgRef = (0, mitosis_1.useRef)(null);
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         name: 'PatrickJS',
     });
     function onBlur() {

package/dist/src/__tests__/data/basic.raw.d.ts

@@ -1,4 +1,6 @@
 export declare const DEFAULT_VALUES: {
     name: string;
 };
-export default function MyBasicComponent(): JSX.Element;
+export default function MyBasicComponent(props: {
+    id: string;
+}): JSX.Element;

package/dist/src/__tests__/data/basic.raw.jsx

@@ -5,9 +5,12 @@ var mitosis_1 = require("@builder.io/mitosis");
 exports.DEFAULT_VALUES = {
     name: 'Steve',
 };
-function MyBasicComponent() {
-    var state = (0, mitosis_1.useState)({
+function MyBasicComponent(props) {
+    var state = (0, mitosis_1.useStore)({
         name: 'Steve',
+        underscore_fn_name: function () {
+            return 'bar';
+        },
     });
     return (<div class="test" css={{
             padding: '10px',

package/dist/src/__tests__/data/blocks/classname-jsx.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function ClassNameCode(props) {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         bindings: 'a binding',
     });
     return (<div>

package/dist/src/__tests__/data/blocks/columns.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function Column(props) {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         getColumns: function () {
             return props.columns || [];
         },

package/dist/src/__tests__/data/blocks/custom-code.raw.jsx

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function CustomCode(props) {
     var elem = (0, mitosis_1.useRef)(null);
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         scriptsInserted: [],
         scriptsRun: [],
         findAndRunScripts: function () {
@@ -24,11 +24,7 @@ function CustomCode(props) {
                         document.head.appendChild(newScript);
                     }
                     else if (!script.type ||
-                        [
-                            'text/javascript',
-                            'application/javascript',
-                            'application/ecmascript',
-                        ].includes(script.type)) {
+                        ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(script.type)) {
                         if (state.scriptsRun.includes(script.innerText)) {
                             continue;
                         }

package/dist/src/__tests__/data/blocks/embed.raw.jsx

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function Embed(props) {
     var elem = (0, mitosis_1.useRef)(null);
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         scriptsInserted: [],
         scriptsRun: [],
         findAndRunScripts: function () {
@@ -24,11 +24,7 @@ function Embed(props) {
                         document.head.appendChild(newScript);
                     }
                     else if (!script.type ||
-                        [
-                            'text/javascript',
-                            'application/javascript',
-                            'application/ecmascript',
-                        ].includes(script.type)) {
+                        ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(script.type)) {
                         if (state.scriptsRun.includes(script.innerText)) {
                             continue;
                         }

package/dist/src/__tests__/data/blocks/form.raw.jsx

@@ -44,7 +44,7 @@ var _fake_3 = require("@fake");
 var _fake_4 = require("@fake");
 function FormComponent(props) {
     var _a;
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         state: 'unsubmitted',
         // TODO: separate response and error?
         responseData: null,
@@ -246,7 +246,7 @@ function FormComponent(props) {
     return (<form validate={props.validate} ref={formRef} action={!props.sendWithJs && props.action} method={props.method} name={props.name} onSubmit={function (event) { return state.onSubmit(event); }} {...props.attributes}>
       <mitosis_1.Show when={props.builderBlock && props.builderBlock.children}>
         <mitosis_1.For each={(_a = props.builderBlock) === null || _a === void 0 ? void 0 : _a.children}>
-          {function (block, index) { return (<_fake_1.BuilderBlock key={block.id} block={block} index={index}/>); }}
+          {function (block, index) { return <_fake_1.BuilderBlock key={block.id} block={block} index={index}/>; }}
         </mitosis_1.For>
       </mitosis_1.Show>
 

package/dist/src/__tests__/data/blocks/image.raw.jsx

@@ -3,22 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function Image(props) {
     var pictureRef = (0, mitosis_1.useRef)();
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         scrollListener: null,
         imageLoaded: false,
-        load: false,
         setLoaded: function () {
             state.imageLoaded = true;
         },
-        isBrowser: function () {
-            return (typeof window !== 'undefined' &&
-                window.navigator.product != 'ReactNative');
-        },
         useLazyLoading: function () {
             // TODO: Add more checks here, like testing for real web browsers
-            return !!props.lazy && state.isBrowser();
+            return !!props.lazy && isBrowser();
         },
     });
+    function isBrowser() {
+        return typeof window !== 'undefined' && window.navigator.product != 'ReactNative';
+    }
+    var _a = (0, mitosis_1.useState)(false), load = _a[0], setLoad = _a[1];
     (0, mitosis_1.onMount)(function () {
         if (state.useLazyLoading()) {
             // throttled scroll capture listener
@@ -27,7 +26,7 @@ function Image(props) {
                     var rect = pictureRef.getBoundingClientRect();
                     var buffer = window.innerHeight / 2;
                     if (rect.top < window.innerHeight + buffer) {
-                        state.load = true;
+                        setLoad(true);
                         state.scrollListener = null;
                         window.removeEventListener('scroll', listener_1);
                     }
@@ -48,7 +47,7 @@ function Image(props) {
     });
     return (<>
       <picture ref={pictureRef}>
-        <mitosis_1.Show when={!state.useLazyLoading() || state.load}>
+        <mitosis_1.Show when={!state.useLazyLoading() || load}>
           <img alt={props.altText} aria-role={props.altText ? 'presentation' : undefined} css={{
             opacity: '1',
             transition: 'opacity 0.2s ease-in-out',

package/dist/src/__tests__/data/blocks/img-state.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function ImgStateComponent() {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         canShow: true,
         images: ['http://example.com/qwik.png'],
     });

package/dist/src/__tests__/data/blocks/input.raw.jsx

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 require("@builder.io/mitosis");
 var sdk_1 = require("@builder.io/sdk");
 function FormInputComponent(props) {
-    return (<input {...props.attributes} key={sdk_1.Builder.isEditing && props.defaultValue
-            ? props.defaultValue
-            : 'default-key'} placeholder={props.placeholder} type={props.type} name={props.name} value={props.value} defaultValue={props.defaultValue} required={props.required}/>);
+    return (<input {...props.attributes} key={sdk_1.Builder.isEditing && props.defaultValue ? props.defaultValue : 'default-key'} placeholder={props.placeholder} type={props.type} name={props.name} value={props.value} defaultValue={props.defaultValue} required={props.required}/>);
 }
 exports.default = FormInputComponent;

package/dist/src/__tests__/data/blocks/multiple-onUpdateWithDeps.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function MultipleOnUpdateWithDeps() {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         a: 'a',
         b: 'b',
         c: 'c',
@@ -10,9 +10,15 @@ function MultipleOnUpdateWithDeps() {
     });
     (0, mitosis_1.onUpdate)(function () {
         console.log('Runs when a or b changes', state.a, state.b);
+        if (state.a === 'a') {
+            state.a = 'b';
+        }
     }, [state.a, state.b]);
     (0, mitosis_1.onUpdate)(function () {
         console.log('Runs when c or d changes', state.c, state.d);
+        if (state.a === 'a') {
+            state.a = 'b';
+        }
     }, [state.c, state.d]);
     return <div />;
 }

package/dist/src/__tests__/data/blocks/onInit.raw.jsx

@@ -6,7 +6,7 @@ exports.defaultValues = {
     name: 'PatrickJS',
 };
 function OnInit(props) {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         // name: props.name
         // name: defaultValues.name || props.name,
         name: '',

package/dist/src/__tests__/data/blocks/onUpdateWithDeps.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function OnUpdateWithDeps() {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         a: 'a',
         b: 'b',
     });