@builder.io/mitosis 0.0.63 → 0.0.65

package/dist/src/constants/html_tags.js

@@ -116,4 +116,67 @@ exports.VALID_HTML_TAGS = [
     'summary',
     'slot',
     'template',
+    // tags below are SVG tags. See the below article for list of SVG tags
+    // https://developer.mozilla.org/en-US/docs/Web/SVG/Element
+    'animate',
+    'animateMotion',
+    'animateTransform',
+    'circle',
+    'clipPath',
+    'defs',
+    'desc',
+    'discard',
+    'ellipse',
+    'feBlend',
+    'feColorMatrix',
+    'feComponentTransfer',
+    'feComposite',
+    'feConvolveMatrix',
+    'feDiffuseLighting',
+    'feDisplacementMap',
+    'feDistantLight',
+    'feDropShadow',
+    'feFlood',
+    'feFuncA',
+    'feFuncB',
+    'feFuncG',
+    'feFuncR',
+    'feGaussianBlur',
+    'feImage',
+    'feMerge',
+    'feMergeNode',
+    'feMorphology',
+    'feOffset',
+    'fePointLight',
+    'feSpecularLighting',
+    'feSpotLight',
+    'feTile',
+    'feTurbulence',
+    'filter',
+    'foreignObject',
+    'g',
+    'hatch',
+    'hatchpath',
+    'image',
+    'line',
+    'linearGradient',
+    'marker',
+    'mask',
+    'metadata',
+    'mpath',
+    'path',
+    'pattern',
+    'polygon',
+    'polyline',
+    'radialGradient',
+    'rect',
+    'set',
+    'stop',
+    'switch',
+    'symbol',
+    'text',
+    'textPath',
+    'tspan',
+    'use',
+    'view',
 ];

package/dist/src/flow.d.ts

@@ -21,3 +21,6 @@ export declare function Show<T>(props: {
     else?: JSX.Element;
     children?: JSX.Element | null;
 }): any;
+export declare function Fragment(props: {
+    children: JSX.Element | JSX.Element[];
+}): any;

package/dist/src/flow.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Show = exports.Slot = exports.For = void 0;
+exports.Fragment = exports.Show = exports.Slot = exports.For = void 0;
 /**
  * Flow control based on Solid
  *
@@ -21,3 +21,7 @@ function Show(props) {
     return null;
 }
 exports.Show = Show;
+function Fragment(props) {
+    return null;
+}
+exports.Fragment = Fragment;

package/dist/src/generators/angular.d.ts

@@ -2,6 +2,7 @@ import { MitosisNode } from '../types/mitosis-node';
 import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 export interface ToAngularOptions extends BaseTranspilerOptions {
     standalone?: boolean;
+    preserveImports?: boolean;
 }
 interface AngularBlockOptions {
     contextVars?: string[];

package/dist/src/generators/angular.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -202,11 +213,15 @@ var blockToAngular = function (json, options, blockOptions) {
     return str;
 };
 exports.blockToAngular = blockToAngular;
-var componentToAngular = function (options) {
-    if (options === void 0) { options = {}; }
+var componentToAngular = function (userOptions) {
+    if (userOptions === void 0) { userOptions = {}; }
     return function (_a) {
         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         var _component = _a.component;
+        var DEFAULT_OPTIONS = {
+            preserveImports: false,
+        };
+        var options = __assign(__assign({}, DEFAULT_OPTIONS), userOptions);
         // Make a copy we can safely mutate, similar to babel's toolchain
         var json = (0, fast_clone_1.fastClone)(_component);
         if (options.plugins) {
@@ -301,16 +316,24 @@ var componentToAngular = function (options) {
                 });
             },
         });
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n      selector: '", "',\n      template: `\n        ", "\n      `,\n      ", "\n      ", "\n    })\n    export default class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n      selector: '", "',\n      template: \\`\n        ", "\n      \\`,\n      ", "\n      ", "\n    })\n    export default class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', options.standalone ? "import { CommonModule } from '@angular/common';" : '', json.types ? json.types.join('\n') : '', !json.defaultProps ? '' : "const defaultProps = ".concat(json5_1.default.stringify(json.defaultProps), "\n"), (0, render_imports_1.renderPreComponent)({
+        // Preparing built in component metadata parameters
+        var componentMetadata = __assign(__assign({ selector: "'".concat((0, lodash_1.kebabCase)(json.name || 'my-component'), ", ").concat(json.name, "'"), template: "`\n        ".concat((0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${'), "\n        `") }, (css.length ? { styles: "[`".concat((0, indent_1.indent)(css, 8), "`]") } : {})), (options.standalone
+            ? // TODO: also add child component imports here as well
+                {
+                    standalone: 'true',
+                    imports: "[".concat(__spreadArray(['CommonModule'], componentsUsed, true).join(', '), "]"),
+                }
+            : {}));
+        // Taking into consideration what user has passed in options and allowing them to override the default generated metadata
+        Object.entries(json.meta.angularConfig || {}).forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            componentMetadata[key] = value;
+        });
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n    })\n    export default class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n    })\n    export default class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', options.standalone ? "import { CommonModule } from '@angular/common';" : '', json.types ? json.types.join('\n') : '', !json.defaultProps ? '' : "const defaultProps = ".concat(json5_1.default.stringify(json.defaultProps), "\n"), (0, render_imports_1.renderPreComponent)({
             component: json,
             target: 'angular',
-            excludeMitosisComponents: !options.standalone,
-        }), options.standalone
-            ? // TODO: also add child component imports here as well
-                "\n        standalone: true,\n        imports: [CommonModule".concat(componentsUsed.length ? ", ".concat(componentsUsed.join(', ')) : '', "],\n      ")
-            : '', (0, lodash_1.kebabCase)(json.name || 'my-component'), (0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${'), css.length
-            ? "styles: [\n        `".concat((0, indent_1.indent)(css, 8), "`\n      ],")
-            : '', Object.entries(json.meta.angularConfig || {})
+            excludeMitosisComponents: !options.standalone && !options.preserveImports,
+        }), Object.entries(componentMetadata)
             .map(function (_a) {
             var k = _a[0], v = _a[1];
             return "".concat(k, ": ").concat(v);

package/dist/src/generators/react/generator.js

@@ -83,7 +83,6 @@ var NODE_MAPPERS = {
     },
     Fragment: function (json, options) {
         var wrap = wrapInFragment(json);
-        var tagName = options.preact ? 'Fragment' : '';
         return "".concat(wrap ? getFragment('open', options) : '').concat(json.children
             .map(function (item) { return (0, exports.blockToReact)(item, options); })
             .join('\n')).concat(wrap ? getFragment('close', options) : '');
@@ -409,7 +408,10 @@ var _componentToReact = function (json, options, isSubComponent) {
         ? "/** @jsx jsx */\n    import { jsx } from '@emotion/react'".trim()
         : '', hasState && stateType === 'valtio' ? "import { useLocalProxy } from 'valtio/utils';" : '', hasState && stateType === 'solid' ? "import { useMutable } from 'react-solid-state';" : '', stateType === 'mobx' && hasState
         ? "import { useLocalObservable } from 'mobx-react-lite';"
-        : '', json.types ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({ component: json, target: 'react' }), isSubComponent ? '' : 'export default ', isForwardRef ? "forwardRef".concat(forwardRefType ? "<".concat(forwardRefType, ">") : '', "(") : '', json.name || 'MyComponent', propsArgs, isForwardRef ? ", ".concat(options.forwardRef) : '', hasStateArgument ? '' : refsString, hasState
+        : '', json.types ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({
+        component: json,
+        target: options.type === 'native' ? 'reactNative' : 'react',
+    }), isSubComponent ? '' : 'export default ', isForwardRef ? "forwardRef".concat(forwardRefType ? "<".concat(forwardRefType, ">") : '', "(") : '', json.name || 'MyComponent', propsArgs, isForwardRef ? ", ".concat(options.forwardRef) : '', hasStateArgument ? '' : refsString, hasState
         ? stateType === 'mobx'
             ? "const state = useLocalObservable(() => (".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), "));")
             : stateType === 'useState'

package/dist/src/generators/react-native.js

@@ -10,6 +10,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -66,45 +75,53 @@ var collectReactNativeStyles = function (json) {
     return styleMap;
 };
 exports.collectReactNativeStyles = collectReactNativeStyles;
-// Plugin to convert DOM tags to <View /> and <Text />
-function processReactNative() {
-    return function () { return ({
-        json: {
-            pre: function (json) {
-                (0, traverse_1.default)(json).forEach(function (node) {
-                    var _a, _b, _c, _d;
-                    if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
-                        // TODO: handle TextInput, Image, etc
-                        if (node.name.toLowerCase() === node.name) {
-                            node.name = 'View';
-                        }
-                        if (((_a = node.properties._text) === null || _a === void 0 ? void 0 : _a.trim().length) || ((_d = (_c = (_b = node.bindings._text) === null || _b === void 0 ? void 0 : _b.code) === null || _c === void 0 ? void 0 : _c.trim()) === null || _d === void 0 ? void 0 : _d.length)) {
-                            node.name = 'Text';
-                        }
-                        if (node.properties.class) {
-                            delete node.properties.class;
-                        }
-                        if (node.properties.className) {
-                            delete node.properties.className;
-                        }
-                        if (node.bindings.class) {
-                            delete node.bindings.class;
-                        }
-                        if (node.bindings.className) {
-                            delete node.bindings.className;
-                        }
+/**
+ * Plugin that handles necessary transformations from React to React Native:
+ * - Converts DOM tags to <View /> and <Text />
+ * - Removes redundant `class`/`className` attributes
+ */
+var PROCESS_REACT_NATIVE_PLUGIN = function () { return ({
+    json: {
+        pre: function (json) {
+            (0, traverse_1.default)(json).forEach(function (node) {
+                var _a, _b, _c, _d;
+                if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+                    // TODO: handle TextInput, Image, etc
+                    if (node.name.toLowerCase() === node.name) {
+                        node.name = 'View';
+                    }
+                    if (((_a = node.properties._text) === null || _a === void 0 ? void 0 : _a.trim().length) || ((_d = (_c = (_b = node.bindings._text) === null || _b === void 0 ? void 0 : _b.code) === null || _c === void 0 ? void 0 : _c.trim()) === null || _d === void 0 ? void 0 : _d.length)) {
+                        node.name = 'Text';
+                    }
+                    if (node.properties.class) {
+                        delete node.properties.class;
+                    }
+                    if (node.properties.className) {
+                        delete node.properties.className;
                     }
-                });
-            },
+                    if (node.bindings.class) {
+                        delete node.bindings.class;
+                    }
+                    if (node.bindings.className) {
+                        delete node.bindings.className;
+                    }
+                }
+            });
         },
-    }); };
-}
-var componentToReactNative = function (options) {
-    if (options === void 0) { options = {}; }
+    },
+}); };
+var DEFAULT_OPTIONS = {
+    stateType: 'useState',
+    stylesType: 'react-native',
+    plugins: [PROCESS_REACT_NATIVE_PLUGIN],
+};
+var componentToReactNative = function (_options) {
+    if (_options === void 0) { _options = {}; }
     return function (_a) {
         var component = _a.component, path = _a.path;
         var json = (0, fast_clone_1.fastClone)(component);
-        return (0, react_1.componentToReact)(__assign(__assign({}, options), { plugins: (options.plugins || []).concat([processReactNative()]), stylesType: options.stylesType || 'react-native', type: 'native' }))({ component: json, path: path });
+        var options = __assign(__assign(__assign({}, DEFAULT_OPTIONS), _options), { plugins: __spreadArray(__spreadArray([], (DEFAULT_OPTIONS.plugins || []), true), (_options.plugins || []), true), type: 'native' });
+        return (0, react_1.componentToReact)(options)({ component: json, path: path });
     };
 };
 exports.componentToReactNative = componentToReactNative;

package/dist/src/generators/svelte.js

@@ -363,7 +363,9 @@ var componentToSvelte = function (_a) {
         if ((0, context_1.hasContext)(component)) {
             svelteImports.push('getContext', 'setContext');
         }
-        str += (0, dedent_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      <script ", ">\n      ", "\n      ", "\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "], ["\n      <script ", ">\n      ", "\n      ", "\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "])), tsLangAttribute, !svelteImports.length ? '' : "import { ".concat(svelteImports.sort().join(', '), " } from 'svelte'"), (0, render_imports_1.renderPreComponent)({ component: json, target: 'svelte' }), !hasData || options.stateType === 'variables' ? '' : "import onChange from 'on-change'", props
+        str += (0, dedent_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      <script ", ">\n      ", "\n      ", "\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "], ["\n      <script ", ">\n      ", "\n      ", "\n\n      ", "\n      ", "\n      "
+            // https://svelte.dev/repl/bd9b56891f04414982517bbd10c52c82?version=3.31.0
+            , "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "])), tsLangAttribute, !svelteImports.length ? '' : "import { ".concat(svelteImports.sort().join(', '), " } from 'svelte'"), (0, render_imports_1.renderPreComponent)({ component: json, target: 'svelte' }), !hasData || options.stateType === 'variables' ? '' : "import onChange from 'on-change'", props
             .map(function (name) {
             if (name === 'children') {
                 return '';
@@ -378,8 +380,10 @@ var componentToSvelte = function (_a) {
             propDeclaration += ';';
             return propDeclaration;
         })
-            .join('\n'), (0, helpers_1.hasStyle)(json)
-            ? "\n        function mitosis_styling (node, vars) {\n          Object.entries(vars || {}).forEach(([ p, v ]) => { node.style[p] = v })\n        }\n      "
+            .join('\n'), 
+        // https://svelte.dev/repl/bd9b56891f04414982517bbd10c52c82?version=3.31.0
+        (0, helpers_1.hasStyle)(json)
+            ? "\n        function mitosis_styling (node, vars) {\n          Object.entries(vars || {}).forEach(([ p, v ]) => {\n            if (p.startsWith('--')) {\n              node.style.setProperty(p, v);\n            } else {\n              node.style[p] = v;\n            }\n          })\n        }\n      "
             : '', getContextCode(json), setContextCode(json), functionsString.length < 4 ? '' : functionsString, getterString.length < 4 ? '' : getterString, refs.map(function (ref) { return "let ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(ref)); }).join('\n'), options.stateType === 'proxies'
             ? dataString.length < 4
                 ? ''

package/dist/src/index.d.ts

@@ -54,6 +54,7 @@ export * from './types/mitosis-node';
 export * from './types/mitosis-component';
 export * from './types/config';
 export * from './types/transpiler';
+export * from './types/plugins';
 export * from './plugins/compile-away-builder-components';
 export * from './plugins/compile-away-components';
 export * from './plugins/map-styles';

package/dist/src/index.js

@@ -95,6 +95,7 @@ __exportStar(require("./types/mitosis-node"), exports);
 __exportStar(require("./types/mitosis-component"), exports);
 __exportStar(require("./types/config"), exports);
 __exportStar(require("./types/transpiler"), exports);
+__exportStar(require("./types/plugins"), exports);
 __exportStar(require("./plugins/compile-away-builder-components"), exports);
 __exportStar(require("./plugins/compile-away-components"), exports);
 __exportStar(require("./plugins/map-styles"), exports);

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

@@ -64,6 +64,8 @@ export declare type MitosisConfig = {
      * Configure a custom function that provides the output path for each target.
      * If you provide this function, you must provide a value for every target yourself.
      */
-    getTargetPath?: (target: Target) => string;
+    getTargetPath: ({ target }: {
+        target: Target;
+    }) => string;
 };
 export {};