@builder.io/mitosis 0.0.56-2 → 0.0.56-22

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

@@ -1,18 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var angular_1 = require("../generators/angular");
-var jsx_1 = require("../parsers/jsx");
-var onUpdate = require('./data/blocks/onUpdate.raw');
-var slot = require('./data/blocks/slot.raw');
+var shared_1 = require("./shared");
 describe('Angular', function () {
-    test('onUpdate', function () {
-        var component = (0, jsx_1.parseJsx)(onUpdate);
-        var output = (0, angular_1.componentToAngular)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('ng-content', function () {
-        var component = (0, jsx_1.parseJsx)(slot);
-        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.d.ts

@@ -0,0 +1 @@
+export default function MyBasicChildComponent(): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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.useStore)({
+        name: 'Steve',
+        dev: 'PatrickJS',
+    });
+    return (<div>
+      <basic_raw_1.default id={state.dev}/>
+      <div>
+        <basic_onMount_update_raw_1.default hi={state.name} bye={state.dev}/>
+      </div>
+    </div>);
+}
+exports.default = MyBasicChildComponent;

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

@@ -0,0 +1 @@
+export default function MyBasicComponent(): import("@builder.io/mitosis/jsx-runtime").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(): import("@builder.io/mitosis/jsx-runtime").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.d.ts

@@ -0,0 +1 @@
+export default function MyBasicForShowComponent(): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicForShowComponent() {
+    var state = (0, mitosis_1.useStore)({
+        name: 'PatrickJS',
+        names: ['Steve', 'PatrickJS'],
+    });
+    return (<div>
+      <mitosis_1.For each={state.names}>
+        {function (person) { return (<mitosis_1.Show when={person === state.name}>
+            <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!
+          </mitosis_1.Show>); }}
+      </mitosis_1.For>
+    </div>);
+}
+exports.default = MyBasicForShowComponent;

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

@@ -0,0 +1 @@
+export default function MyBasicForComponent(): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicForComponent() {
+    var state = (0, mitosis_1.useStore)({
+        name: 'PatrickJS',
+        names: ['Steve', 'PatrickJS'],
+    });
+    (0, mitosis_1.onMount)(function () {
+        console.log('onMount code');
+    });
+    return (<div>
+      <mitosis_1.For each={state.names}>
+        {function (person) { return (<>
+            <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!
+          </>); }}
+      </mitosis_1.For>
+    </div>);
+}
+exports.default = MyBasicForComponent;

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): import("@builder.io/mitosis/jsx-runtime").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): import("@builder.io/mitosis/jsx-runtime").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(): import("@builder.io/mitosis/jsx-runtime").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.d.ts

@@ -0,0 +1,5 @@
+export interface Props {
+    hi: string;
+    bye: string;
+}
+export default function MyBasicOnMountUpdateComponent(props: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicOnMountUpdateComponent(props) {
+    var state = (0, mitosis_1.useStore)({
+        name: 'PatrickJS',
+        names: ['Steve', 'PatrickJS'],
+    });
+    (0, mitosis_1.onInit)(function () {
+        state.name = 'PatrickJS onInit' + props.hi;
+    });
+    (0, mitosis_1.onMount)(function () {
+        state.name = 'PatrickJS onMount' + props.bye;
+    });
+    return <div>Hello {state.name}</div>;
+}
+exports.default = MyBasicOnMountUpdateComponent;

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

@@ -0,0 +1 @@
+export default function MyBasicOnUpdateReturnComponent(): import("@builder.io/mitosis/jsx-runtime").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.d.ts

@@ -0,0 +1 @@
+export default function MyBasicOutputsComponent(props: any): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/basic-outputs-meta.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)({
+    outputs: ['onMessage', 'onEvent'],
+});
+function MyBasicOutputsComponent(props) {
+    var state = (0, mitosis_1.useStore)({
+        name: 'PatrickJS',
+    });
+    (0, mitosis_1.onMount)(function () {
+        props.onMessage(state.name);
+        props.onEvent(props.message);
+    });
+    return <div></div>;
+}
+exports.default = MyBasicOutputsComponent;

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

@@ -0,0 +1 @@
+export default function MyBasicOutputsComponent(props: any): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicOutputsComponent(props) {
+    var state = (0, mitosis_1.useStore)({
+        name: 'PatrickJS',
+    });
+    (0, mitosis_1.onMount)(function () {
+        props.onMessage(state.name);
+        props.onEvent(props.message);
+    });
+    return <div></div>;
+}
+exports.default = MyBasicOutputsComponent;

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;
+}): import("@builder.io/mitosis/jsx-runtime").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): import("@builder.io/mitosis/jsx-runtime").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): import("@builder.io/mitosis/jsx-runtime").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): import("@builder.io/mitosis/jsx-runtime").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): import("@builder.io/mitosis/jsx-runtime").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): import("@builder.io/mitosis/jsx-runtime").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;
+}): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

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

@@ -1,12 +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>
-      <input value={state.name} onChange={function (event) { return (state.name = event.target.value); }}/>
+    return (<div class="test" css={{
+            padding: '10px',
+        }}>
+      <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/button-with-metadata.raw.d.ts

@@ -4,4 +4,4 @@ export interface ButtonProps {
     link?: string;
     openLinkInNewTab?: boolean;
 }
-export default function Button(props: ButtonProps): JSX.Element;
+export default function Button(props: ButtonProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/button.raw.d.ts

@@ -4,4 +4,4 @@ export interface ButtonProps {
     link?: string;
     openLinkInNewTab?: boolean;
 }
-export default function Button(props: ButtonProps): JSX.Element;
+export default function Button(props: ButtonProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import type { JSX } from '../../../../jsx-runtime';
+declare type Props = {
+    [key: string]: string | JSX.Element;
+    slotTesting: JSX.Element;
+};
+export default function ClassNameCode(props: Props): JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function ClassNameCode(props) {
+    var state = (0, mitosis_1.useStore)({
+        bindings: 'a binding',
+    });
+    return (<div>
+      {/*// @ts-ignore */}
+      <div className="no binding">Without Binding</div>
+      {/*// @ts-ignore */}
+      <div className={state.bindings}>With binding</div>
+    </div>);
+}
+exports.default = ClassNameCode;

package/dist/src/__tests__/data/blocks/columns.raw.d.ts

@@ -8,5 +8,5 @@ export interface ColumnProps {
     stackColumnsAt?: 'tablet' | 'mobile' | 'never';
     reverseColumnsWhenStacked?: boolean;
 }
-export default function Column(props: ColumnProps): JSX.Element;
+export default function Column(props: ColumnProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;
 export {};

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