@builder.io/mitosis 0.0.45-5 → 0.0.48

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

@@ -84,67 +84,70 @@ var embed = fixture('./data/blocks/embed.raw');
 var image = fixture('./data/blocks/image.raw');
 var columns = fixture('./data/blocks/columns.raw');
 var lazyLoadSection = JSON.parse(fixture('./data/builder/lazy-load-section.json'));
+var mitosisOptions = {
+    format: 'legacy',
+};
 describe('Builder', function () {
     test('extractStateHook', function () {
         var code = "useState({ foo: 'bar' }); alert('hi');";
-        expect(builder_2.extractStateHook(code)).toEqual({
+        expect((0, builder_2.extractStateHook)(code)).toEqual({
             code: "alert('hi');",
             state: { foo: 'bar' },
         });
-        expect(builder_2.extractStateHook(code)).toEqual({
+        expect((0, builder_2.extractStateHook)(code)).toEqual({
             code: "alert('hi');",
             state: { foo: 'bar' },
         });
     });
     test('Stamped', function () {
-        var json = jsx_1.parseJsx(stamped);
-        var builderJson = builder_1.componentToBuilder(json);
+        var component = (0, jsx_1.parseJsx)(stamped);
+        var builderJson = (0, builder_1.componentToBuilder)()({ component: component });
         expect(builderJson).toMatchSnapshot();
-        var backToMitosis = builder_2.builderContentToMitosisComponent(builderJson);
-        var mitosis = mitosis_1.componentToMitosis(backToMitosis);
+        var backToMitosis = (0, builder_2.builderContentToMitosisComponent)(builderJson);
+        var mitosis = (0, mitosis_1.componentToMitosis)()({ component: backToMitosis });
         expect(mitosis).toMatchSnapshot();
     });
     test('CustomCode', function () {
-        var json = jsx_1.parseJsx(customCode);
-        var builderJson = builder_1.componentToBuilder(json);
+        var component = (0, jsx_1.parseJsx)(customCode);
+        var builderJson = (0, builder_1.componentToBuilder)()({ component: component });
         expect(builderJson).toMatchSnapshot();
-        var backToMitosis = builder_2.builderContentToMitosisComponent(builderJson);
-        var mitosis = mitosis_1.componentToMitosis(backToMitosis);
+        var backToMitosis = (0, builder_2.builderContentToMitosisComponent)(builderJson);
+        var mitosis = (0, mitosis_1.componentToMitosis)()({ component: backToMitosis });
         expect(mitosis).toMatchSnapshot();
     });
     test('Embed', function () {
-        var json = jsx_1.parseJsx(embed);
-        var builderJson = builder_1.componentToBuilder(json);
+        var component = (0, jsx_1.parseJsx)(embed);
+        var builderJson = (0, builder_1.componentToBuilder)()({ component: component });
         expect(builderJson).toMatchSnapshot();
-        var backToMitosis = builder_2.builderContentToMitosisComponent(builderJson);
-        var mitosis = mitosis_1.componentToMitosis(backToMitosis);
+        var backToMitosis = (0, builder_2.builderContentToMitosisComponent)(builderJson);
+        var mitosis = (0, mitosis_1.componentToMitosis)()({ component: backToMitosis });
         expect(mitosis).toMatchSnapshot();
     });
     test('Image', function () {
-        var json = jsx_1.parseJsx(image);
-        var builderJson = builder_1.componentToBuilder(json);
+        var component = (0, jsx_1.parseJsx)(image);
+        var builderJson = (0, builder_1.componentToBuilder)()({ component: component });
         expect(builderJson).toMatchSnapshot();
-        var backToMitosis = builder_2.builderContentToMitosisComponent(builderJson);
-        var mitosis = mitosis_1.componentToMitosis(backToMitosis);
+        var backToMitosis = (0, builder_2.builderContentToMitosisComponent)(builderJson);
+        var mitosis = (0, mitosis_1.componentToMitosis)()({ component: backToMitosis });
         expect(mitosis).toMatchSnapshot();
     });
     test('Columns', function () {
-        var json = jsx_1.parseJsx(columns);
-        var builderJson = builder_1.componentToBuilder(json);
+        var component = (0, jsx_1.parseJsx)(columns);
+        var builderJson = (0, builder_1.componentToBuilder)()({ component: component });
         expect(builderJson).toMatchSnapshot();
-        var backToMitosis = builder_2.builderContentToMitosisComponent(builderJson);
-        var mitosis = mitosis_1.componentToMitosis(backToMitosis);
+        var backToMitosis = (0, builder_2.builderContentToMitosisComponent)(builderJson);
+        var mitosis = (0, mitosis_1.componentToMitosis)()({ component: backToMitosis });
         expect(mitosis).toMatchSnapshot();
     });
     test('Section', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var mitosisComponent, html;
+        var component, html;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    mitosisComponent = builder_2.builderContentToMitosisComponent(lazyLoadSection);
-                    return [4 /*yield*/, html_1.componentToHtml(mitosisComponent, {
-                            plugins: [compile_away_builder_components_1.compileAwayBuilderComponents()],
-                        })];
+                    component = (0, builder_2.builderContentToMitosisComponent)(lazyLoadSection);
+                    return [4 /*yield*/, (0, html_1.componentToHtml)({
+                            plugins: [(0, compile_away_builder_components_1.compileAwayBuilderComponents)()],
+                        })({ component: component })];
                 case 1:
                     html = _a.sent();
                     expect(html).toMatchSnapshot();
@@ -153,74 +156,74 @@ describe('Builder', function () {
         });
     }); });
     test('Regenerate Image', function () {
-        var code = 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=\"hi\"\n              css={{\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=\"hi\"\n              css={{\n                display: \"block\",\n              }}\n            />\n          </div>\n        );\n      }\n    "])));
-        var json = jsx_1.parseJsx(code);
-        var builderJson = builder_1.componentToBuilder(json);
-        var backToMitosis = builder_2.builderContentToMitosisComponent(builderJson);
-        var mitosis = mitosis_1.componentToMitosis(backToMitosis, {
-            format: 'legacy',
+        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 component = (0, jsx_1.parseJsx)(code);
+        var builderJson = (0, builder_1.componentToBuilder)()({ component: component });
+        var backToMitosis = (0, builder_2.builderContentToMitosisComponent)(builderJson);
+        var mitosis = (0, mitosis_1.componentToMitosis)(mitosisOptions)({
+            component: backToMitosis,
         });
         expect(mitosis.trim()).toEqual(code.trim());
-        var react = __1.componentToReact(json, {
-            plugins: [compile_away_builder_components_1.compileAwayBuilderComponents()],
-        });
+        var react = (0, __1.componentToReact)({
+            plugins: [(0, compile_away_builder_components_1.compileAwayBuilderComponents)()],
+        })({ component: component });
         expect(react).toMatchSnapshot();
     });
     test('Regenerate Text', function () {
-        var code = 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 json = jsx_1.parseJsx(code);
-        var builderJson = builder_1.componentToBuilder(json);
-        var backToMitosis = builder_2.builderContentToMitosisComponent(builderJson);
-        var mitosis = mitosis_1.componentToMitosis(backToMitosis, {
-            format: 'legacy',
+        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 component = (0, jsx_1.parseJsx)(code);
+        var builderJson = (0, builder_1.componentToBuilder)()({ component: component });
+        var backToMitosis = (0, builder_2.builderContentToMitosisComponent)(builderJson);
+        var mitosis = (0, mitosis_1.componentToMitosis)(mitosisOptions)({
+            component: backToMitosis,
         });
         expect(mitosis.trim()).toEqual(code.trim());
     });
     test('Regenerate loop', function () {
-        var code = 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                {person}\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                {person}\n              </div>\n            )}\n          </For>\n        );\n      }\n    "])));
-        var json = jsx_1.parseJsx(code);
-        var builderJson = builder_1.componentToBuilder(json);
-        var backToMitosis = builder_2.builderContentToMitosisComponent(builderJson);
-        var mitosis = mitosis_1.componentToMitosis(backToMitosis, {
-            format: 'legacy',
+        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                {person}\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                {person}\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);
+        var mitosis = (0, mitosis_1.componentToMitosis)(mitosisOptions)({
+            component: backToMitosis,
         });
         expect(mitosis.trim()).toEqual(code.trim());
     });
     test('Regenerate custom Hero', function () {
-        var code = dedent_1.default(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      import { Hero } from \"@components\";\n\n      export default function MyComponent(props) {\n        return (\n          <Hero\n            title=\"Your Title Here\"\n            image=\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F52dcecf48f9c48cc8ddd8f81fec63236\"\n            buttonLink=\"https://example.com\"\n            buttonText=\"Click\"\n            height={400}\n            css={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"stretch\",\n              position: \"relative\",\n              flexShrink: \"0\",\n              boxSizing: \"border-box\",\n              marginTop: \"200px\",\n            }}\n          />\n        );\n      }\n    "], ["\n      import { Hero } from \"@components\";\n\n      export default function MyComponent(props) {\n        return (\n          <Hero\n            title=\"Your Title Here\"\n            image=\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F52dcecf48f9c48cc8ddd8f81fec63236\"\n            buttonLink=\"https://example.com\"\n            buttonText=\"Click\"\n            height={400}\n            css={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"stretch\",\n              position: \"relative\",\n              flexShrink: \"0\",\n              boxSizing: \"border-box\",\n              marginTop: \"200px\",\n            }}\n          />\n        );\n      }\n    "])));
-        var json = jsx_1.parseJsx(code);
-        expect(json).toMatchSnapshot();
-        var builderJson = builder_1.componentToBuilder(json);
+        var code = (0, dedent_1.default)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      import { Hero } from \"@components\";\n\n      export default function MyComponent(props) {\n        return (\n          <Hero\n            title=\"Your Title Here\"\n            image=\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F52dcecf48f9c48cc8ddd8f81fec63236\"\n            buttonLink=\"https://example.com\"\n            buttonText=\"Click\"\n            height={400}\n            css={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"stretch\",\n              position: \"relative\",\n              flexShrink: \"0\",\n              boxSizing: \"border-box\",\n              marginTop: \"200px\",\n            }}\n          />\n        );\n      }\n    "], ["\n      import { Hero } from \"@components\";\n\n      export default function MyComponent(props) {\n        return (\n          <Hero\n            title=\"Your Title Here\"\n            image=\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F52dcecf48f9c48cc8ddd8f81fec63236\"\n            buttonLink=\"https://example.com\"\n            buttonText=\"Click\"\n            height={400}\n            css={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"stretch\",\n              position: \"relative\",\n              flexShrink: \"0\",\n              boxSizing: \"border-box\",\n              marginTop: \"200px\",\n            }}\n          />\n        );\n      }\n    "])));
+        var component = (0, jsx_1.parseJsx)(code);
+        expect(component).toMatchSnapshot();
+        var builderJson = (0, builder_1.componentToBuilder)()({ component: component });
         expect(builderJson).toMatchSnapshot();
-        var backToMitosis = builder_2.builderContentToMitosisComponent(builderJson);
+        var backToMitosis = (0, builder_2.builderContentToMitosisComponent)(builderJson);
         expect(backToMitosis).toMatchSnapshot();
-        var mitosis = mitosis_1.componentToMitosis(backToMitosis, {
-            format: 'legacy',
+        var mitosis = (0, mitosis_1.componentToMitosis)(mitosisOptions)({
+            component: backToMitosis,
         });
         expect(mitosis.trim()).toEqual(code.trim());
     });
     // TODO: fix divs and CoreFragment - need to find way to reproduce
     test.skip('Regenerate fragments', function () {
-        var code = dedent_1.default(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      export default function MyComponent(props) {\n        return (\n          <>\n            Hello world\n\n            <>\n              <Fragment>Hi</Fragment>\n            </>\n          </>\n        );\n      }\n    "], ["\n      export default function MyComponent(props) {\n        return (\n          <>\n            Hello world\n\n            <>\n              <Fragment>Hi</Fragment>\n            </>\n          </>\n        );\n      }\n    "])));
-        var json = jsx_1.parseJsx(code);
-        expect(json).toMatchSnapshot();
-        var builderJson = builder_1.componentToBuilder(json);
+        var code = (0, dedent_1.default)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      export default function MyComponent(props) {\n        return (\n          <>\n            Hello world\n\n            <>\n              <Fragment>Hi</Fragment>\n            </>\n          </>\n        );\n      }\n    "], ["\n      export default function MyComponent(props) {\n        return (\n          <>\n            Hello world\n\n            <>\n              <Fragment>Hi</Fragment>\n            </>\n          </>\n        );\n      }\n    "])));
+        var component = (0, jsx_1.parseJsx)(code);
+        expect(component).toMatchSnapshot();
+        var builderJson = (0, builder_1.componentToBuilder)()({ component: component });
         expect(builderJson).toMatchSnapshot();
-        var backToMitosis = builder_2.builderContentToMitosisComponent(builderJson);
+        var backToMitosis = (0, builder_2.builderContentToMitosisComponent)(builderJson);
         expect(backToMitosis).toMatchSnapshot();
-        var mitosis = mitosis_1.componentToMitosis(backToMitosis, {
-            format: 'legacy',
+        var mitosis = (0, mitosis_1.componentToMitosis)(mitosisOptions)({
+            component: backToMitosis,
         });
         expect(mitosis.trim()).toEqual(code.trim());
     });
     // TODO: get passing, don't add extra divs. or at least use spans instead so don't break layout
     test.skip('Regenerate span text', function () {
-        var code = dedent_1.default(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      export default function MyComponent(props) {\n        return (\n          <div\n            css={{\n              display: \"block\",\n            }}\n          >\n            Hi there\n            <span\n              css={{\n                color: \"red\",\n              }}\n            >\n              Hello world\n            </span>\n          </div>\n        );\n      }\n    "], ["\n      export default function MyComponent(props) {\n        return (\n          <div\n            css={{\n              display: \"block\",\n            }}\n          >\n            Hi there\n            <span\n              css={{\n                color: \"red\",\n              }}\n            >\n              Hello world\n            </span>\n          </div>\n        );\n      }\n    "])));
-        var json = jsx_1.parseJsx(code);
-        var builderJson = builder_1.componentToBuilder(json);
-        var backToMitosis = builder_2.builderContentToMitosisComponent(builderJson);
-        var mitosis = mitosis_1.componentToMitosis(backToMitosis, {
-            format: 'legacy',
+        var code = (0, dedent_1.default)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      export default function MyComponent(props) {\n        return (\n          <div\n            css={{\n              display: \"block\",\n            }}\n          >\n            Hi there\n            <span\n              css={{\n                color: \"red\",\n              }}\n            >\n              Hello world\n            </span>\n          </div>\n        );\n      }\n    "], ["\n      export default function MyComponent(props) {\n        return (\n          <div\n            css={{\n              display: \"block\",\n            }}\n          >\n            Hi there\n            <span\n              css={{\n                color: \"red\",\n              }}\n            >\n              Hello world\n            </span>\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);
+        var mitosis = (0, mitosis_1.componentToMitosis)(mitosisOptions)({
+            component: backToMitosis,
         });
         expect(mitosis.trim()).toEqual(code.trim());
     });

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

@@ -4,29 +4,32 @@ var jsx_1 = require("../parsers/jsx");
 var react_1 = require("../generators/context/react");
 var context_1 = require("../parsers/context");
 var react_2 = require("../generators/react");
+var react_native_1 = require("../generators/react-native");
 var simpleExample = require('./data/context/simple.context.lite');
 var componentWithContext = require('./data/context/component-with-context.lite');
 var renderBlock = require('./data/blocks/builder-render-block.raw');
 describe('Context', function () {
     test('Parse context', function () {
-        var json = context_1.parseContext(simpleExample, { name: 'SimpleExample' });
-        if (!json) {
+        var component = (0, context_1.parseContext)(simpleExample, { name: 'SimpleExample' });
+        if (!component) {
             throw new Error('No parseable context found for simple.context.lite.ts');
         }
-        expect(json).toMatchSnapshot();
-        var reactContext = react_1.contextToReact(json);
+        expect(component).toMatchSnapshot();
+        var reactContext = (0, react_1.contextToReact)()({ context: component });
         expect(reactContext).toMatchSnapshot();
     });
     test('Use and set context in components', function () {
-        var json = jsx_1.parseJsx(componentWithContext);
-        expect(json).toMatchSnapshot();
-        var reactComponent = react_2.componentToReact(json);
+        var component = (0, jsx_1.parseJsx)(componentWithContext);
+        expect(component).toMatchSnapshot();
+        var reactComponent = (0, react_2.componentToReact)()({ component: component });
         expect(reactComponent).toMatchSnapshot();
+        var reactNativeComponent = (0, react_native_1.componentToReactNative)()({ component: component });
+        expect(reactNativeComponent).toMatchSnapshot();
     });
     test('Use and set context in complex components', function () {
-        var json = jsx_1.parseJsx(renderBlock);
-        expect(json).toMatchSnapshot();
-        var reactComponent = react_2.componentToReact(json);
+        var component = (0, jsx_1.parseJsx)(renderBlock);
+        expect(component).toMatchSnapshot();
+        var reactComponent = (0, react_2.componentToReact)()({ component: component });
         expect(reactComponent).toMatchSnapshot();
     });
 });

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

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

package/dist/src/__tests__/data/blocks/button-with-metadata.raw.jsx

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
-mitosis_1.useMetadata({
+(0, mitosis_1.useMetadata)({
     foo: {
         bar: 'baz',
     },

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 = mitosis_1.useState({
+    var state = (0, mitosis_1.useState)({
         getColumns: function () {
             return props.columns || [];
         },
@@ -17,7 +17,7 @@ function Column(props) {
             var columns = this.getColumns();
             var gutterSize = this.getGutterSize();
             var subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-            return "calc(" + this.getWidth(index) + "% - " + subtractWidth + "px)";
+            return "calc(".concat(this.getWidth(index), "% - ").concat(subtractWidth, "px)");
         },
     });
     return (<div class="builder-columns" css={{
@@ -25,6 +25,12 @@ function Column(props) {
             flexDirection: 'column',
             alignItems: 'stretch',
             lineHeight: 'normal',
+            '@media (max-width: 999px)': {
+                flexDirection: 'row',
+            },
+            '@media (max-width: 639px)': {
+                flexDirection: 'row-reverse',
+            },
         }}>
       <mitosis_1.For each={props.columns}>
         {function (column) { return (<div class="builder-column" css={{ flexGrow: '1' }}>

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function CustomCode(props) {
-    var elem = mitosis_1.useRef();
-    var state = mitosis_1.useState({
+    var elem = (0, mitosis_1.useRef)();
+    var state = (0, mitosis_1.useState)({
         scriptsInserted: [],
         scriptsRun: [],
         findAndRunScripts: function () {
@@ -44,7 +44,7 @@ function CustomCode(props) {
             }
         },
     });
-    mitosis_1.onMount(function () {
+    (0, mitosis_1.onMount)(function () {
         state.findAndRunScripts();
     });
     return (<div ref={elem} class={'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')} innerHTML={props.code}></div>);

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function Embed(props) {
-    var elem = mitosis_1.useRef();
-    var state = mitosis_1.useState({
+    var elem = (0, mitosis_1.useRef)();
+    var state = (0, mitosis_1.useState)({
         scriptsInserted: [],
         scriptsRun: [],
         findAndRunScripts: function () {
@@ -44,7 +44,7 @@ function Embed(props) {
             }
         },
     });
-    mitosis_1.onMount(function () {
+    (0, mitosis_1.onMount)(function () {
         state.findAndRunScripts();
     });
     return <div ref={elem} class="builder-embed" innerHTML={props.content}></div>;

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 = mitosis_1.useState({
+    var state = (0, mitosis_1.useState)({
         state: 'unsubmitted',
         // TODO: separate response and error?
         responseData: null,
@@ -127,7 +127,7 @@ function FormComponent(props) {
                     var json_1 = {};
                     Array.from(formPairs).forEach(function (_a) {
                         var value = _a.value, key = _a.key;
-                        _fake_3.set(json_1, key, value);
+                        (0, _fake_3.set)(json_1, key, value);
                     });
                     body = JSON.stringify(json_1);
                 }
@@ -150,7 +150,7 @@ function FormComponent(props) {
                     }
                 }
                 state.state = 'sending';
-                var formUrl = (sdk_1.builder.env === 'dev' ? 'http://localhost:5000' : 'https://builder.io') + "/api/v1/form-submit?apiKey=" + sdk_1.builder.apiKey + "&to=" + btoa(props.sendSubmissionsToEmail || '') + "&name=" + encodeURIComponent(props.name || '');
+                var formUrl = "".concat(sdk_1.builder.env === 'dev' ? 'http://localhost:5000' : 'https://builder.io', "/api/v1/form-submit?apiKey=").concat(sdk_1.builder.apiKey, "&to=").concat(btoa(props.sendSubmissionsToEmail || ''), "&name=").concat(encodeURIComponent(props.name || ''));
                 fetch(props.sendSubmissionsTo === 'email'
                     ? formUrl
                     : props.action /* TODO: throw error if no action URL */, {
@@ -174,7 +174,7 @@ function FormComponent(props) {
                                 _a.label = 4;
                             case 4:
                                 if (!res.ok && props.errorMessagePath) {
-                                    message = _fake_4.get(body, props.errorMessagePath);
+                                    message = (0, _fake_4.get)(body, props.errorMessagePath);
                                     if (message) {
                                         if (typeof message !== 'string') {
                                             /* TODO: ideally convert json to yaml so it woul dbe like
@@ -242,7 +242,7 @@ function FormComponent(props) {
             }
         },
     });
-    var formRef = mitosis_1.useRef();
+    var formRef = (0, mitosis_1.useRef)();
     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}>

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function Image(props) {
-    var pictureRef = mitosis_1.useRef();
-    var state = mitosis_1.useState({
+    var pictureRef = (0, mitosis_1.useRef)();
+    var state = (0, mitosis_1.useState)({
         scrollListener: null,
         imageLoaded: false,
         load: false,
@@ -19,7 +19,7 @@ function Image(props) {
             return !!props.lazy && state.isBrowser();
         },
     });
-    mitosis_1.onMount(function () {
+    (0, mitosis_1.onMount)(function () {
         if (state.useLazyLoading()) {
             // throttled scroll capture listener
             var listener_1 = function () {
@@ -41,7 +41,7 @@ function Image(props) {
             listener_1();
         }
     });
-    mitosis_1.onUnMount(function () {
+    (0, mitosis_1.onUnMount)(function () {
         if (state.scrollListener) {
             window.removeEventListener('scroll', state.scrollListener);
         }

package/dist/src/__tests__/data/blocks/stamped-io.raw.jsx

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function SmileReviews(props) {
-    var state = mitosis_1.useState({
+    var state = (0, mitosis_1.useState)({
         reviews: [],
         showReviewPrompt: false,
     });
     // TODO: allow async function here
-    mitosis_1.onMount(function () {
-        fetch("https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=" + (props.apiKey ||
-            'pubkey-8bbDq7W6w4sB3OWeM1HUy2s47702hM') + "&productId=" + (props.productId ||
+    (0, mitosis_1.onMount)(function () {
+        fetch("https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=".concat(props.apiKey ||
+            'pubkey-8bbDq7W6w4sB3OWeM1HUy2s47702hM', "&productId=").concat(props.productId ||
             '2410511106127'))
             .then(function (res) { return res.json(); })
             .then(function (data) {

package/dist/src/__tests__/data/context/component-with-context.lite.jsx

@@ -7,8 +7,8 @@ var _1_1 = __importDefault(require("@dummy/1"));
 var _2_1 = __importDefault(require("@dummy/2"));
 var mitosis_1 = require("@builder.io/mitosis");
 function ComponentWithContext() {
-    var foo = mitosis_1.useContext(_1_1.default);
-    mitosis_1.setContext(_1_1.default, { foo: 'bar' });
+    var foo = (0, mitosis_1.useContext)(_1_1.default);
+    (0, mitosis_1.setContext)(_1_1.default, { foo: 'bar' });
     return (<_2_1.default.Provider value={{ bar: 'baz' }}>
       <>{foo.value}</>
     </_2_1.default.Provider>);

package/dist/src/__tests__/data/context/simple.context.lite.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
-exports.default = mitosis_1.createContext({
+exports.default = (0, mitosis_1.createContext)({
     foo: 'bar',
     get fooUpperCase() {
         return this.foo.toUpperCase();

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

@@ -5,8 +5,8 @@ var jsx_1 = require("../parsers/jsx");
 var stamped = require('./data/blocks/stamped-io.raw');
 describe('Html', function () {
     test('Stamped', function () {
-        var json = jsx_1.parseJsx(stamped);
-        var html = html_1.componentToHtml(json);
+        var component = (0, jsx_1.parseJsx)(stamped);
+        var html = (0, html_1.componentToHtml)()({ component: component });
         expect(html).toMatchSnapshot();
     });
 });