@builder.io/mitosis 0.0.64 → 0.0.66

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/qwik/component-generator.js

@@ -63,6 +63,7 @@ var componentToQwik = function (userOptions) {
             var css_1 = null;
             var componentFn = (0, src_generator_1.arrowFnBlock)(['props'], [
                 function () {
+                    var _a, _b;
                     css_1 = emitUseStyles(file, component);
                     emitUseContext(file, component);
                     emitUseRef(file, component);
@@ -71,7 +72,8 @@ var componentToQwik = function (userOptions) {
                     emitUseMount(file, component);
                     emitUseWatch(file, component);
                     emitUseCleanup(file, component);
-                    emitTagNameHack(file, component);
+                    emitTagNameHack(file, component, (_a = component.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.elementTag);
+                    emitTagNameHack(file, component, (_b = component.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.componentElementTag);
                     emitJSX(file, component, mutable_1);
                 },
             ], [component.propsTypeRef + (isLightComponent ? '&{key?:any}' : '') || 'any']);
@@ -95,11 +97,9 @@ var componentToQwik = function (userOptions) {
     };
 };
 exports.componentToQwik = componentToQwik;
-function emitTagNameHack(file, component) {
-    var _a;
-    var elementTag = (_a = component.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.elementTag;
-    if (elementTag) {
-        file.src.emit(elementTag, '=', (0, convert_method_to_function_1.convertMethodToFunction)(elementTag, stateToMethodOrGetter(component.state), getLexicalScopeVars(component)), ';');
+function emitTagNameHack(file, component, metadataValue) {
+    if (typeof metadataValue === 'string' && metadataValue) {
+        file.src.emit(metadataValue, '=', (0, convert_method_to_function_1.convertMethodToFunction)(metadataValue, stateToMethodOrGetter(component.state), getLexicalScopeVars(component)), ';');
     }
 }
 function emitUseMount(file, component) {
@@ -215,7 +215,7 @@ function emitUseStore(file, stateInit) {
     }
     else {
         // TODO hack for now so that `state` variable is defined, even though it is never read.
-        file.src.emit('const state={tagName:""' + (file.options.isTypeScript ? 'as any' : '') + '};');
+        file.src.emit('const state' + (file.options.isTypeScript ? ': any' : '') + ' = {};');
     }
 }
 function emitTypes(file, component) {

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

@@ -165,6 +165,7 @@ var getTagName = function (_a) {
 var stripStateAndProps = function (code, options) {
     return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
         includeState: options.stateType === 'variables',
+        replaceWith: function (name) { return (name === 'children' ? '$$slots.default' : name); },
     });
 };
 var blockToSvelte = function (_a) {

package/dist/src/index.d.ts

@@ -1,5 +1,12 @@
+import { JSX } from '@builder.io/mitosis/jsx-runtime';
 export * from './flow';
-export declare type Context<T> = {};
+declare function Provider<T>(props: {
+    value: T;
+    children: JSX.Element;
+}): any;
+export declare type Context<T> = {
+    Provider: typeof Provider<T>;
+};
 export declare const useStore: <T>(obj: T) => T;
 export declare const useState: <T>(obj: T) => [T, (value: T) => void];
 export declare const useRef: <T>(obj?: void | T | null | undefined) => T;
@@ -54,6 +61,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

@@ -16,6 +16,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDefaultProps = exports.useMetadata = exports.onError = exports.useDynamicTag = exports.onUnMount = exports.onInit = exports.onCreate = exports.onUpdate = exports.onMount = exports.setContext = exports.createContext = exports.useContext = exports.useRef = exports.useState = exports.useStore = void 0;
 __exportStar(require("./flow"), exports);
+function Provider(props) {
+    return null;
+}
 // These compile away
 var useStore = function (obj) {
     throw new Error('useStore: Mitosis hook should have been compiled away');
@@ -95,6 +98,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 {};