@builder.io/mitosis 0.0.50-6 → 0.0.50

package/dist/src/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -17,13 +21,13 @@ var useState = function (obj) { return obj; };
 exports.useState = useState;
 var useRef = function () { return null; };
 exports.useRef = useRef;
-var useContext = function (key) { return null; };
+var useContext = function (key) {
+    return null;
+};
 exports.useContext = useContext;
 var createContext = function (value) { return null; };
 exports.createContext = createContext;
-var setContext = function (key, value) {
-    return null;
-};
+var setContext = function (key, value) { };
 exports.setContext = setContext;
 var onMount = function (fn) { return null; };
 exports.onMount = onMount;
@@ -49,7 +53,9 @@ __exportStar(require("./parsers/context"), exports);
 __exportStar(require("./generators/vue"), exports);
 __exportStar(require("./generators/angular"), exports);
 __exportStar(require("./generators/context/react"), exports);
+__exportStar(require("./generators/context/solid"), exports);
 __exportStar(require("./generators/context/vue"), exports);
+__exportStar(require("./generators/context/svelte"), exports);
 __exportStar(require("./generators/react"), exports);
 __exportStar(require("./generators/solid"), exports);
 __exportStar(require("./generators/liquid"), exports);

package/dist/src/parsers/builder.d.ts

@@ -35,8 +35,9 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
         '@type': "@builder.io/mitosis/component";
         imports: import("..").MitosisImport[];
         meta: import("../types/json").JSONObject & {
-            metadataHook?: import("../types/json").JSONObject | undefined;
+            useMetadata?: import("../types/json").JSONObject | undefined;
         };
+        inputs: import("..").MitosisComponentInput[];
         state: import("../types/json").JSONObject;
         context: {
             get: {
@@ -53,30 +54,12 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
             };
         };
         hooks: {
-            init?: {
-                code: string;
-                deps?: string | undefined;
-            } | undefined;
-            onMount?: {
-                code: string;
-                deps?: string | undefined;
-            } | undefined;
-            onUnMount?: {
-                code: string;
-                deps?: string | undefined;
-            } | undefined;
-            preComponent?: {
-                code: string;
-                deps?: string | undefined;
-            } | undefined;
-            postComponent?: {
-                code: string;
-                deps?: string | undefined;
-            } | undefined;
-            onUpdate?: {
-                code: string;
-                deps?: string | undefined;
-            } | undefined;
+            init?: import("..").extendedHook | undefined;
+            onMount?: import("..").extendedHook | undefined;
+            onUnMount?: import("..").extendedHook | undefined;
+            preComponent?: import("..").extendedHook | undefined;
+            postComponent?: import("..").extendedHook | undefined;
+            onUpdate?: import("..").extendedHook[] | undefined;
         };
         children: MitosisNode[];
         subComponents: import("..").MitosisComponent[];
@@ -85,8 +68,9 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
     name: string;
     imports: import("..").MitosisImport[];
     meta: import("../types/json").JSONObject & {
-        metadataHook?: import("../types/json").JSONObject | undefined;
+        useMetadata?: import("../types/json").JSONObject | undefined;
     };
+    inputs: import("..").MitosisComponentInput[];
     state: import("../types/json").JSONObject;
     context: {
         get: {
@@ -103,30 +87,12 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
         };
     };
     hooks: {
-        init?: {
-            code: string;
-            deps?: string | undefined;
-        } | undefined;
-        onMount?: {
-            code: string;
-            deps?: string | undefined;
-        } | undefined;
-        onUnMount?: {
-            code: string;
-            deps?: string | undefined;
-        } | undefined;
-        preComponent?: {
-            code: string;
-            deps?: string | undefined;
-        } | undefined;
-        postComponent?: {
-            code: string;
-            deps?: string | undefined;
-        } | undefined;
-        onUpdate?: {
-            code: string;
-            deps?: string | undefined;
-        } | undefined;
+        init?: import("..").extendedHook | undefined;
+        onMount?: import("..").extendedHook | undefined;
+        onUnMount?: import("..").extendedHook | undefined;
+        preComponent?: import("..").extendedHook | undefined;
+        postComponent?: import("..").extendedHook | undefined;
+        onUpdate?: import("..").extendedHook[] | undefined;
     };
     children: MitosisNode[];
 };

package/dist/src/parsers/builder.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -45,9 +49,7 @@ var capitalize_1 = require("../helpers/capitalize");
 var create_mitosis_component_1 = require("../helpers/create-mitosis-component");
 var create_mitosis_node_1 = require("../helpers/create-mitosis-node");
 var jsx_1 = require("./jsx");
-var jsxPlugin = require('@babel/plugin-syntax-jsx');
-var tsPreset = require('@babel/preset-typescript');
-var decorators = require('@babel/plugin-syntax-decorators');
+var parsers_1 = require("../helpers/parsers");
 // Omit some superflous styles that can come from Builder's web importer
 var styleOmitList = [
     'backgroundRepeatX',
@@ -178,7 +180,7 @@ var getBlockNonActionBindings = function (block, options) {
     if (options.includeBuilderExtras) {
         for (var key in obj) {
             if (!isValidBindingKey(key)) {
-                console.warn('Skipping invalid biding key:', key);
+                console.warn('Skipping invalid binding key:', key);
                 continue;
             }
             var value = obj[key];
@@ -205,7 +207,7 @@ var wrapBinding = function (value) {
     if (!(value.includes(';') || value.match(/(^|\s|;)return[^a-z0-9A-Z]/))) {
         return value;
     }
-    return "(() => {\n    try { ".concat(isExpression(value) ? 'return ' : '').concat(value, " }\n    catch (err) {\n      console.warn('Builder code error', err);\n    }\n  })()");
+    return "(() => {\n    try { ".concat((0, parsers_1.isExpression)(value) ? 'return ' : '').concat(value, " }\n    catch (err) {\n      console.warn('Builder code error', err);\n    }\n  })()");
 };
 var getBlockBindings = function (block, options) {
     var obj = __assign(__assign({}, getBlockNonActionBindings(block, options)), getBlockActionsAsBindings(block, options));
@@ -552,7 +554,7 @@ var getHooks = function (content) {
 function extractStateHook(code) {
     var types = babel.types;
     var state = {};
-    var body = parseCode(code);
+    var body = (0, parsers_1.parseCode)(code);
     var newBody = body.slice();
     for (var i = 0; i < body.length; i++) {
         var statement = body[i];
@@ -590,7 +592,7 @@ function extractStateHook(code) {
 exports.extractStateHook = extractStateHook;
 function convertExportDefaultToReturn(code) {
     var types = babel.types;
-    var body = parseCode(code);
+    var body = (0, parsers_1.parseCode)(code);
     var newBody = body.slice();
     for (var i = 0; i < body.length; i++) {
         var statement = body[i];
@@ -604,32 +606,6 @@ function convertExportDefaultToReturn(code) {
     return (0, generator_1.default)(types.program(newBody)).code || '';
 }
 exports.convertExportDefaultToReturn = convertExportDefaultToReturn;
-function parseCode(code) {
-    var ast = babel.parse(code, {
-        presets: [[tsPreset, { isTSX: true, allExtensions: true }]],
-        plugins: [[decorators, { legacy: true }], jsxPlugin],
-    });
-    var body = babel.types.isFile(ast)
-        ? ast.program.body
-        : babel.types.isProgram(ast)
-            ? ast.body
-            : [];
-    return body;
-}
-/**
- * Returns `true` if the `code` is a valid expression. (vs a statement)
- */
-function isExpression(code) {
-    try {
-        var body = parseCode(code);
-        return (body.length == 1 &&
-            (babel.types.isExpression(body[0]) ||
-                babel.types.isExpressionStatement(body[0])));
-    }
-    catch (e) {
-        return false;
-    }
-}
 // TODO: maybe this should be part of the builder -> Mitosis part
 function extractSymbols(json) {
     var _a, _b, _c, _d;
@@ -671,10 +647,12 @@ function extractSymbols(json) {
 }
 var createBuilderElement = function (options) { return (__assign({ '@type': '@builder.io/sdk:Element', id: 'builder-' + Math.random().toString(36).split('.')[1] }, options)); };
 exports.createBuilderElement = createBuilderElement;
-var isBuilderElement = function (el) { var _a; return ((_a = el) === null || _a === void 0 ? void 0 : _a['@type']) === '@builder.io/sdk:Element'; };
+var isBuilderElement = function (el) {
+    return (el === null || el === void 0 ? void 0 : el['@type']) === '@builder.io/sdk:Element';
+};
 exports.isBuilderElement = isBuilderElement;
 var builderContentPartToMitosisComponent = function (builderContent, options) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     if (options === void 0) { options = {}; }
     builderContent = (0, fast_clone_1.fastClone)(builderContent);
     (0, traverse_1.default)(builderContent).forEach(function (elem) {
@@ -703,7 +681,7 @@ var builderContentPartToMitosisComponent = function (builderContent, options) {
             }
         }
     });
-    var _g = extractStateHook(((_a = builderContent === null || builderContent === void 0 ? void 0 : builderContent.data) === null || _a === void 0 ? void 0 : _a.tsCode) || ((_b = builderContent === null || builderContent === void 0 ? void 0 : builderContent.data) === null || _b === void 0 ? void 0 : _b.jsCode) || ''), state = _g.state, code = _g.code;
+    var _j = extractStateHook(((_a = builderContent === null || builderContent === void 0 ? void 0 : builderContent.data) === null || _a === void 0 ? void 0 : _a.tsCode) || ((_b = builderContent === null || builderContent === void 0 ? void 0 : builderContent.data) === null || _b === void 0 ? void 0 : _b.jsCode) || ''), state = _j.state, code = _j.code;
     var customCode = convertExportDefaultToReturn(code);
     var parsed = getHooks(builderContent);
     var componentJson = (0, create_mitosis_component_1.createMitosisComponent)({
@@ -712,12 +690,16 @@ var builderContentPartToMitosisComponent = function (builderContent, options) {
                 httpRequests: (_c = builderContent.data) === null || _c === void 0 ? void 0 : _c.httpRequests,
             },
         },
-        state: (parsed === null || parsed === void 0 ? void 0 : parsed.state) || __assign(__assign({}, state), (_d = builderContent.data) === null || _d === void 0 ? void 0 : _d.state),
-        hooks: __assign({}, ((((_e = parsed === null || parsed === void 0 ? void 0 : parsed.hooks.onMount) === null || _e === void 0 ? void 0 : _e.code) ||
+        inputs: (_e = (_d = builderContent.data) === null || _d === void 0 ? void 0 : _d.inputs) === null || _e === void 0 ? void 0 : _e.map(function (input) { return ({
+            name: input.name,
+            defaultValue: input.defaultValue,
+        }); }),
+        state: (parsed === null || parsed === void 0 ? void 0 : parsed.state) || __assign(__assign({}, state), (_f = builderContent.data) === null || _f === void 0 ? void 0 : _f.state),
+        hooks: __assign({}, ((((_g = parsed === null || parsed === void 0 ? void 0 : parsed.hooks.onMount) === null || _g === void 0 ? void 0 : _g.code) ||
             (customCode && { code: customCode })) && {
             onMount: (parsed === null || parsed === void 0 ? void 0 : parsed.hooks.onMount) || { code: customCode },
         })),
-        children: (((_f = builderContent.data) === null || _f === void 0 ? void 0 : _f.blocks) || [])
+        children: (((_h = builderContent.data) === null || _h === void 0 ? void 0 : _h.blocks) || [])
             .filter(function (item) {
             var _a, _b;
             if ((_b = (_a = item.properties) === null || _a === void 0 ? void 0 : _a.src) === null || _b === void 0 ? void 0 : _b.includes('/api/v1/pixel')) {

package/dist/src/parsers/context.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/src/parsers/jsx.d.ts

@@ -9,5 +9,12 @@ declare type ParseMitosisOptions = {
     format: 'react' | 'simple';
     jsonHookNames?: string[];
 };
+/**
+ * This function takes the raw string from a Mitosis component, and converts it into a JSON that can be processed by
+ * each generator function.
+ *
+ * @param jsx string representation of the Mitosis component
+ * @returns A JSON representation of the Mitosis component
+ */
 export declare function parseJsx(jsx: string, options?: Partial<ParseMitosisOptions>): MitosisComponent;
 export {};

package/dist/src/parsers/jsx.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -29,6 +33,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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 };
 };
@@ -217,10 +230,12 @@ var componentFunctionToJson = function (node, context) {
                                 (types.isArrayExpression(secondArg) &&
                                     secondArg.elements.length > 0)) {
                                 var depsCode = secondArg ? (0, generator_1.default)(secondArg).code : '';
-                                hooks.onUpdate = {
-                                    code: code,
-                                };
-                                hooks.onUpdate.deps = depsCode;
+                                hooks.onUpdate = __spreadArray(__spreadArray([], (hooks.onUpdate || []), true), [
+                                    {
+                                        code: code,
+                                        deps: depsCode,
+                                    },
+                                ], false);
                             }
                         }
                     }
@@ -607,6 +622,13 @@ function extractContextComponents(json) {
 var isImportOrDefaultExport = function (node) {
     return types.isExportDefaultDeclaration(node) || types.isImportDeclaration(node);
 };
+/**
+ * This function takes the raw string from a Mitosis component, and converts it into a JSON that can be processed by
+ * each generator function.
+ *
+ * @param jsx string representation of the Mitosis component
+ * @returns A JSON representation of the Mitosis component
+ */
 function parseJsx(jsx, options) {
     if (options === void 0) { options = {}; }
     var useOptions = __assign({ format: 'react' }, options);

package/dist/src/parsers/liquid.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/src/plugins/compile-away-builder-components.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/src/symbols/symbol-processor.js

@@ -76,7 +76,7 @@ function convertBuilderContentToSymbolHierarchy(content, _a) {
         if (cssCode) {
             collectComponentStyles && collectComponentStyles.push((0, minify_1.minify)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", ""], ["", ""])), cssCode));
         }
-        while (path[0 /* DEPTH */] >= this.path.length) {
+        while (path[0 /* Path.DEPTH */] >= this.path.length) {
             path.shift();
             path.shift();
         }
@@ -92,10 +92,10 @@ function convertBuilderContentToSymbolHierarchy(content, _a) {
                         collectComponentState[id] = state;
                     }
                 }
-                if (path[0 /* DEPTH */] < this.path.length) {
+                if (path[0 /* Path.DEPTH */] < this.path.length) {
                     var id = getIdFromSymbol(el);
                     hierarchy[id] = [];
-                    addIfMissing(hierarchy[path[1 /* ID */]], id);
+                    addIfMissing(hierarchy[path[1 /* Path.ID */]], id);
                     path.unshift(this.path.length, id);
                 }
                 // TODO(misko): This should be `el.content` not `el`

package/dist/src/targets.d.ts

@@ -19,7 +19,7 @@ export declare const targets: {
     swift: (options?: import("./generators/swift-ui").ToSwiftOptions) => import(".").Transpiler;
     template: (options?: import("./generators/template").ToTemplateOptions) => import(".").Transpiler;
     webcomponent: (options?: import("./generators/html").ToHtmlOptions) => import(".").Transpiler;
-    vue: (options?: import("./generators/vue").ToVueOptions) => ({ component, path }: import(".").TranspilerArgs & {
+    vue: (userOptions?: import("./generators/vue").ToVueOptions) => ({ component, path }: import(".").TranspilerArgs & {
         path: string;
     }) => string;
 };

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

@@ -31,17 +31,22 @@ declare type ContextInfo = {
     name: string;
     path: string;
 };
-declare type extendedHook = {
+export declare type extendedHook = {
     code: string;
     deps?: string;
 };
+export declare type MitosisComponentInput = {
+    name: string;
+    defaultValue: any;
+};
 export declare type MitosisComponent = {
     '@type': '@builder.io/mitosis/component';
     name: string;
     imports: MitosisImport[];
     meta: JSONObject & {
-        metadataHook?: JSONObject;
+        useMetadata?: JSONObject;
     };
+    inputs: MitosisComponentInput[];
     state: JSONObject;
     context: {
         get: {
@@ -60,7 +65,7 @@ export declare type MitosisComponent = {
         onUnMount?: extendedHook;
         preComponent?: extendedHook;
         postComponent?: extendedHook;
-        onUpdate?: extendedHook;
+        onUpdate?: extendedHook[];
     };
     children: MitosisNode[];
     subComponents: MitosisComponent[];

package/dist/test/qwik/Accordion/high.jsx

@@ -1 +0,0 @@
-