@builder.io/mitosis 0.0.56-0 → 0.0.56-3

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

@@ -0,0 +1,3 @@
+export default function RenderStyles(props: {
+    foo: string;
+}): JSX.Element;

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function RenderStyles(props) {
+    return (<mitosis_1.Show when={props.foo === 'bar'} else={<div>Foo</div>}>
+      <div>Bar</div>
+    </mitosis_1.Show>);
+}
+exports.default = RenderStyles;

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

@@ -1 +1,3 @@
-export default function ComponentWithContext(): JSX.Element;
+export default function ComponentWithContext(props: {
+    content: string;
+}): JSX.Element;

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

@@ -6,9 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var _1_1 = __importDefault(require("@dummy/1"));
 var _2_1 = __importDefault(require("@dummy/2"));
 var mitosis_1 = require("@builder.io/mitosis");
-function ComponentWithContext() {
+function ComponentWithContext(props) {
     var foo = (0, mitosis_1.useContext)(_1_1.default);
-    (0, mitosis_1.setContext)(_1_1.default, { foo: 'bar' });
+    (0, mitosis_1.setContext)(_1_1.default, {
+        foo: 'bar',
+        content: function () {
+            return props.content;
+        },
+    });
     return (<_2_1.default.Provider value={{ bar: 'baz' }}>
       <>{foo.value}</>
     </_2_1.default.Provider>);

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

@@ -24,6 +24,7 @@ var onUpdateWithDeps = require('./data/blocks/onUpdateWithDeps.raw');
 var multipleOnUpdate = require('./data/blocks/multiple-onUpdate.raw');
 var multipleOnUpdateWithDeps = require('./data/blocks/multiple-onUpdateWithDeps.raw');
 var onMount = require('./data/blocks/onMount.raw');
+var rootShow = require('./data/blocks/rootShow.raw');
 describe('React', function () {
     test('Basic', function () {
         var component = (0, jsx_1.parseJsx)(basic);
@@ -138,4 +139,9 @@ describe('React', function () {
         var output = (0, react_1.componentToReact)()({ component: component });
         expect(output).toMatchSnapshot();
     });
+    test('rootShow', function () {
+        var component = (0, jsx_1.parseJsx)(rootShow);
+        var output = (0, react_1.componentToReact)({ prettier: false })({ component: component });
+        expect(output).toMatchSnapshot();
+    });
 });

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

@@ -1,36 +1,70 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var svelte_1 = require("../generators/svelte");
+var svelte_1 = require("../generators/context/svelte");
+var context_1 = require("../parsers/context");
+var svelte_2 = require("../generators/svelte");
 var jsx_1 = require("../parsers/jsx");
 var onUpdate = require('./data/blocks/onUpdate.raw');
 var multipleOUpdate = require('./data/blocks/multiple-onUpdate.raw');
 var selfReferencingComponent = require('./data/blocks/self-referencing-component.raw');
 var selfReferencingComponentWithChildren = require('./data/blocks/self-referencing-component-with-children.raw');
 var builderRenderBlock = require('./data/blocks/builder-render-block.raw');
+var rootShow = require('./data/blocks/rootShow.raw');
+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('Svelte', function () {
     test('onUpdate', function () {
         var component = (0, jsx_1.parseJsx)(onUpdate);
-        var output = (0, svelte_1.componentToSvelte)()({ component: component });
+        var output = (0, svelte_2.componentToSvelte)()({ component: component });
         expect(output).toMatchSnapshot();
     });
     test('multipleOnUpdate', function () {
         var component = (0, jsx_1.parseJsx)(multipleOUpdate);
-        var output = (0, svelte_1.componentToSvelte)()({ component: component });
+        var output = (0, svelte_2.componentToSvelte)()({ component: component });
         expect(output).toMatchSnapshot();
     });
     test('selfReferencingComponent', function () {
         var component = (0, jsx_1.parseJsx)(selfReferencingComponent);
-        var output = (0, svelte_1.componentToSvelte)()({ component: component });
+        var output = (0, svelte_2.componentToSvelte)()({ component: component });
         expect(output).toMatchSnapshot();
     });
     test('selfReferencingComponentWithChildren', function () {
         var component = (0, jsx_1.parseJsx)(selfReferencingComponentWithChildren);
-        var output = (0, svelte_1.componentToSvelte)()({ component: component });
+        var output = (0, svelte_2.componentToSvelte)()({ component: component });
         expect(output).toMatchSnapshot();
     });
     test('BuilderRenderBlock', function () {
         var component = (0, jsx_1.parseJsx)(builderRenderBlock);
-        var output = (0, svelte_1.componentToSvelte)()({ component: component });
+        var output = (0, svelte_2.componentToSvelte)()({ component: component });
         expect(output).toMatchSnapshot();
     });
+    test('rootShow', function () {
+        var component = (0, jsx_1.parseJsx)(rootShow);
+        var output = (0, svelte_2.componentToSvelte)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    describe('Context', function () {
+        test('Parse context', function () {
+            var component = (0, context_1.parseContext)(simpleExample, { name: 'SimpleExample' });
+            if (!component) {
+                throw new Error('No parseable context found for simple.context.lite.ts');
+            }
+            expect(component).toMatchSnapshot();
+            var context = (0, svelte_1.contextToSvelte)()({ context: component });
+            expect(context).toMatchSnapshot();
+        });
+        test('Use and set context in components', function () {
+            var component = (0, jsx_1.parseJsx)(componentWithContext);
+            expect(component).toMatchSnapshot();
+            var output = (0, svelte_2.componentToSvelte)()({ component: component });
+            expect(output).toMatchSnapshot();
+        });
+        test('Use and set context in complex components', function () {
+            var component = (0, jsx_1.parseJsx)(renderBlock);
+            expect(component).toMatchSnapshot();
+            var output = (0, svelte_2.componentToSvelte)()({ component: component });
+            expect(output).toMatchSnapshot();
+        });
+    });
 });

package/dist/src/generators/react.js

@@ -49,6 +49,14 @@ var plugins_1 = require("../modules/plugins");
 var jsx_1 = require("../parsers/jsx");
 var context_1 = require("./helpers/context");
 var react_native_1 = require("./react-native");
+/**
+ * If the root Mitosis component only has 1 child, and it is a `Show` node, then we need to wrap it in a fragment.
+ * Otherwise, we end up with invalid React render code.
+ *
+ */
+var isRootShowNode = function (json) {
+    return json.children.length === 1 && ['Show'].includes(json.children[0].name);
+};
 var wrapInFragment = function (json) {
     return json.children.length !== 1;
 };
@@ -387,7 +395,9 @@ var _componentToReact = function (json, options, isSubComponent) {
         ((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length)) {
         reactLibImports.add('useEffect');
     }
-    var wrap = wrapInFragment(json) || (componentHasStyles && stylesType === 'styled-jsx');
+    var wrap = wrapInFragment(json) ||
+        (componentHasStyles && stylesType === 'styled-jsx') ||
+        isRootShowNode(json);
     var nativeStyles = stylesType === 'react-native' &&
         componentHasStyles &&
         (0, react_native_1.collectReactNativeStyles)(json);

package/dist/src/generators/svelte.js

@@ -69,7 +69,13 @@ var mappers = {
             includeState: options.stateType === 'variables',
         }), " }\n").concat(json.children
             .map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); })
-            .join('\n'), "\n{/if}");
+            .join('\n'), "\n\n  ").concat(json.meta.else
+            ? "\n  {:else}\n  ".concat((0, exports.blockToSvelte)({
+                json: json.meta.else,
+                options: options,
+                parentComponent: parentComponent,
+            }), "\n  ")
+            : '', "\n{/if}");
     },
 };
 var getContextCode = function (json) {
@@ -83,7 +89,9 @@ var setContextCode = function (json) {
     return Object.keys(contextSetters)
         .map(function (key) {
         var _a = contextSetters[key], value = _a.value, name = _a.name;
-        return "setContext(".concat(name, ".key, ").concat(value ? (0, get_state_object_string_1.getMemberObjectString)(value) : 'undefined', ");");
+        return "setContext(".concat(name, ".key, ").concat(value
+            ? (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((0, get_state_object_string_1.getMemberObjectString)(value))
+            : 'undefined', ");");
     })
         .join('\n');
 };

package/dist/src/generators/vue.js

@@ -196,9 +196,9 @@ var blockToVue = function (node, options) {
     }
     if (node.name === 'style') {
         // Vue doesn't allow <style>...</style> in templates, but does support the synonymous
-        // <component is="style">...</component>
+        // <component is="'style'">...</component>
         node.name = 'component';
-        node.bindings.is = 'style';
+        node.bindings.is = "'style'";
     }
     if (node.properties._text) {
         return "".concat(node.properties._text);

package/dist/src/types/config.d.ts

@@ -1,9 +1,15 @@
 import { MitosisComponent } from '..';
 import { Plugin } from './plugins';
+export declare type Format = 'esm' | 'cjs';
+export interface TranspilerOptions {
+    format?: Format;
+}
 declare type Targets = typeof import('../targets').targets;
 export declare type Target = keyof Targets;
 export declare type GeneratorOptions = {
-    [K in keyof Targets]: NonNullable<Parameters<Targets[K]>[0]>;
+    [K in keyof Targets]: NonNullable<Parameters<Targets[K]>[0]> & {
+        transpiler?: TranspilerOptions;
+    };
 };
 export interface TranspilerArgs {
     path?: string;

package/dist/src/types/mitosis-node.d.ts

@@ -3,9 +3,30 @@ export declare type MitosisNode = {
     '@type': '@builder.io/mitosis/node';
     name: string;
     meta: JSONObject;
+    /**
+     * Key-value store of static values for DOM attributes.
+     * ```js
+     * {
+     *   disabled: false,
+     *   defaultValue: 'initial text`,
+     *   width: 100,
+     * }
+     * ```
+     */
     properties: {
         [key: string]: string | undefined;
     };
+    /**
+     * Key-value store of _dynamic_ values for DOM attributes.
+     *
+     * ```js
+     * {
+     *   disabled: state.isDisabled,
+     *   defaultValue: `${props.text} + ' initial'`,
+     *   width: props.width * 10,
+     * }
+     * ```
+     */
     bindings: {
         [key: string]: string | undefined;
     };