@builder.io/mitosis 0.0.56-13 → 0.0.56-16

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.d.ts

@@ -0,0 +1 @@
+export default function MyBasicComponent(): JSX.Element;

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+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.useStore)({
+        name: 'PatrickJS',
+    });
+    (0, mitosis_1.onInit)(function () {
+        var hi = myService.method('hi');
+        console.log(hi);
+    });
+    (0, mitosis_1.onMount)(function () {
+        var bye = myService.method('hi');
+        console.log(bye);
+    });
+    function onChange() {
+        var change = myService.method('change');
+        console.log(change);
+    }
+    return (<div>
+      {myService.method('hello') + state.name}
+      Hello! I can run in React, Vue, Solid, or Liquid!
+      <input onChange={onChange}></input>
+    </div>);
+}
+exports.default = MyBasicComponent;

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

@@ -0,0 +1 @@
+export default function MyBasicComponent(): JSX.Element;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var custom_mitosis_1 = require("@dummy/custom-mitosis");
+function MyBasicComponent() {
+    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>;
+}
+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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+(0, mitosis_1.useMetadata)({
+    forwardRef: 'inputRef',
+});
+function MyBasicForwardRefComponent(props) {
+    var state = (0, mitosis_1.useStore)({
+        name: 'PatrickJS',
+    });
+    return (<div>
+      <input ref={props.inputRef} css={{
+            color: 'red',
+        }} value={state.name} onChange={function (event) { return (state.name = event.target.value); }}/>
+    </div>);
+}
+exports.default = MyBasicForwardRefComponent;

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicForwardRefComponent(props) {
+    var state = (0, mitosis_1.useStore)({
+        name: 'PatrickJS',
+    });
+    return (<div>
+      <input ref={props.inputRef} css={{
+            color: 'red',
+        }} value={state.name} onChange={function (event) { return (state.name = event.target.value); }}/>
+    </div>);
+}
+exports.default = MyBasicForwardRefComponent;

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

@@ -0,0 +1 @@
+export default function MyBasicComponent(): JSX.Element;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicComponent() {
+    var state = (0, mitosis_1.useStore)({
+        name: 'Steve',
+    });
+    return (<div class="test" css={{
+            padding: '10px',
+        }}>
+      <input value={state.name} onChange={function (myEvent) {
+            state.name = myEvent.target.value;
+        }}/>
+      Hello! I can run in React, Vue, Solid, or Liquid!
+    </div>);
+}
+exports.default = MyBasicComponent;

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.d.ts

@@ -0,0 +1 @@
+export default function MyBasicOnUpdateReturnComponent(): JSX.Element;

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicOnUpdateReturnComponent() {
+    var state = (0, mitosis_1.useStore)({
+        name: 'PatrickJS',
+    });
+    (0, mitosis_1.onUpdate)(function () {
+        var controller = new AbortController();
+        var signal = controller.signal;
+        fetch('https://patrickjs.com/api/resource.json', { signal: signal })
+            .then(function (response) { return response.json(); })
+            .then(function (data) {
+            state.name = data.name;
+        });
+        return function () {
+            if (!signal.aborted) {
+                controller.abort();
+            }
+        };
+    }, [state.name]);
+    return <div>Hello! {state.name}</div>;
+}
+exports.default = MyBasicOnUpdateReturnComponent;

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-assignment.raw.d.ts

@@ -0,0 +1,4 @@
+export interface Props {
+    showInput: boolean;
+}
+export default function MyBasicRefAssignmentComponent(props: Props): JSX.Element;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicRefAssignmentComponent(props) {
+    var holdValueRef = (0, mitosis_1.useRef)('Patrick');
+    function handlerClick(event) {
+        event.preventDefault();
+        console.log('current value', holdValueRef);
+        holdValueRef = holdValueRef + 'JS';
+    }
+    return (<div>
+      <button onClick={function (evt) { return handlerClick(evt); }}>Click</button>
+    </div>);
+}
+exports.default = MyBasicRefAssignmentComponent;

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

@@ -0,0 +1,5 @@
+export interface Props {
+    showInput: boolean;
+}
+export declare function usePrevious<T>(value: T): T;
+export default function MyPreviousComponent(props: Props): JSX.Element;

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrevious = void 0;
+var mitosis_1 = require("@builder.io/mitosis");
+function usePrevious(value) {
+    // The ref object is a generic container whose current property is mutable ...
+    // ... and can hold any value, similar to an instance property on a class
+    var ref = (0, mitosis_1.useRef)(null);
+    // Store current value in ref
+    (0, mitosis_1.onUpdate)(function () {
+        ref = value;
+    }, [value]); // Only re-run if value changes
+    // Return previous value (happens before update in useEffect above)
+    return ref;
+}
+exports.usePrevious = usePrevious;
+function MyPreviousComponent(props) {
+    var state = (0, mitosis_1.useStore)({
+        count: 0,
+    });
+    var prevCount = (0, mitosis_1.useRef)(state.count);
+    (0, mitosis_1.onUpdate)(function () {
+        prevCount = state.count;
+    }, [state.count]); //
+    // Get the previous value (was passed into hook on last render)
+    // const prevCount = usePrevious(state.count);
+    // Display both current and previous count value
+    return (<div>
+      <h1>
+        Now: {state.count}, before: {prevCount}
+      </h1>
+      <button onClick={function () { return (state.count += 1); }}>Increment</button>
+    </div>);
+}
+exports.default = MyPreviousComponent;

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

@@ -0,0 +1,4 @@
+export interface Props {
+    showInput: boolean;
+}
+export default function MyBasicRefComponent(props: Props): JSX.Element;

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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.useStore)({
+        name: 'PatrickJS',
+    });
+    function onBlur() {
+        // Maintain focus
+        inputRef.focus();
+    }
+    function lowerCaseName() {
+        return state.name.toLowerCase();
+    }
+    return (<div>
+      {props.showInput && (<>
+          <input ref={inputRef} css={{
+                color: 'red',
+            }} value={state.name} onBlur={function (event) { return onBlur(); }} onChange={function (event) { return (state.name = event.target.value); }}/>
+
+          <label ref={inputNoArgRef} for="cars">
+            Choose a car:
+          </label>
+
+          <select name="cars" id="cars">
+            <option value="supra">GR Supra</option>
+            <option value="86">GR 86</option>
+          </select>
+        </>)}
+      Hello
+      {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web Component!
+    </div>);
+}
+exports.default = MyBasicRefComponent;

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

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

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

@@ -1,14 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_VALUES = void 0;
 var mitosis_1 = require("@builder.io/mitosis");
-function MyBasicComponent() {
-    var state = (0, mitosis_1.useState)({
+exports.DEFAULT_VALUES = {
+    name: 'Steve',
+};
+function MyBasicComponent(props) {
+    var state = (0, mitosis_1.useStore)({
         name: 'Steve',
+        underscore_fn_name: function () {
+            return 'bar';
+        },
     });
     return (<div class="test" css={{
             padding: '10px',
         }}>
-      <input value={state.name} onChange={function (myEvent) { return (state.name = myEvent.target.value); }}/>
+      <input value={exports.DEFAULT_VALUES.name || state.name} onChange={function (myEvent) { return (state.name = myEvent.target.value); }}/>
       Hello! I can run in React, Vue, Solid, or Liquid!
     </div>);
 }

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 || [];
         },