@builder.io/mitosis 0.0.56-13 → 0.0.56-16

package/dist/src/index.js

@@ -14,22 +14,33 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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 = void 0;
+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);
 // These compile away
-var useState = function (obj) { return obj; };
+var useStore = function (obj) { return obj; };
+exports.useStore = useStore;
+var useState = function (obj) {
+    throw new Error('useState: Mitosis hook should have been compiled away');
+    return null;
+};
 exports.useState = useState;
-var useRef = function () { return null; };
+var useRef = function (obj) {
+    throw new Error('useRef: Mitosis hook should have been compiled away');
+    return obj;
+};
 exports.useRef = useRef;
-var useContext = function (key) {
+var useContext = function (key) { return null; };
+exports.useContext = useContext;
+var createContext = function (value) {
     return null;
 };
-exports.useContext = useContext;
-var createContext = function (value) { return null; };
 exports.createContext = createContext;
 var setContext = function (key, value) { };
 exports.setContext = setContext;
-var onMount = function (fn) { return null; };
+var onMount = function (fn) {
+    throw new Error('onMount: Mitosis hook should have been compiled away');
+    return null;
+};
 exports.onMount = onMount;
 var onUpdate = function (fn, deps) { return null; };
 exports.onUpdate = onUpdate;
@@ -43,7 +54,10 @@ var useDynamicTag = function (fn) { return null; };
 exports.useDynamicTag = useDynamicTag;
 var onError = function (fn) { return null; };
 exports.onError = onError;
-var useMetadata = function (obj) { return null; };
+var useMetadata = function (obj) {
+    throw new Error('useMetadata: Mitosis hook should have been compiled away');
+    return null;
+};
 exports.useMetadata = useMetadata;
 __exportStar(require("./parsers/jsx"), exports);
 __exportStar(require("./parsers/builder"), exports);
@@ -53,6 +67,7 @@ __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/qwik"), exports);
 __exportStar(require("./generators/context/solid"), exports);
 __exportStar(require("./generators/context/vue"), exports);
 __exportStar(require("./generators/context/svelte"), exports);
@@ -74,6 +89,7 @@ __exportStar(require("./helpers/is-mitosis-node"), exports);
 __exportStar(require("./types/mitosis-node"), exports);
 __exportStar(require("./types/mitosis-component"), exports);
 __exportStar(require("./types/config"), exports);
+__exportStar(require("./types/transpiler"), 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/jsx-types.d.ts

@@ -46,6 +46,7 @@ declare global {
             classList?: {
                 [k: string]: boolean | undefined;
             };
+            className?: string;
             on?: {
                 [key: string]: EventHandler<T, CustomEvent>;
             };

package/dist/src/modules/plugins.d.ts

@@ -1,6 +1,6 @@
 import { MitosisComponent } from '../types/mitosis-component';
 import { Plugin } from '../types/plugins';
-export { Plugin };
+export type { Plugin };
 export declare const runPreJsonPlugins: (json: MitosisComponent, plugins: Plugin[], options?: any) => MitosisComponent;
 export declare const runPostJsonPlugins: (json: MitosisComponent, plugins: Plugin[], options?: any) => MitosisComponent;
 export declare const runPreCodePlugins: (code: string, plugins: Plugin[], options?: any) => string;

package/dist/src/parsers/angular.js

@@ -19,10 +19,8 @@ var transformBinding = function (binding, _options) {
     return (0, babel_transform_1.babelTransformCode)(binding, {
         Identifier: function (path) {
             var name = path.node.name;
-            if ((core_1.types.isObjectProperty(path.parent) &&
-                path.parent.key === path.node) ||
-                (core_1.types.isMemberExpression(path.parent) &&
-                    path.parent.property === path.node)) {
+            if ((core_1.types.isObjectProperty(path.parent) && path.parent.key === path.node) ||
+                (core_1.types.isMemberExpression(path.parent) && path.parent.property === path.node)) {
                 return;
             }
             if (!(name.startsWith('state.') || name === 'event' || name === '$event')) {
@@ -39,12 +37,8 @@ var isTemplate = function (node) {
     // TODO: theres got to be a better way than this
     return Array.isArray(node.templateAttrs);
 };
-var isText = function (node) {
-    return typeof node.value === 'string';
-};
-var isBoundText = function (node) {
-    return typeof node.value === 'object';
-};
+var isText = function (node) { return typeof node.value === 'string'; };
+var isBoundText = function (node) { return typeof node.value === 'object'; };
 var angularTemplateNodeToMitosisNode = function (node, options) {
     if (isTemplate(node)) {
         var ngIf = node.templateAttrs.find(function (item) { return item.name === 'ngIf'; });
@@ -56,9 +50,7 @@ var angularTemplateNodeToMitosisNode = function (node, options) {
                         code: transformBinding(ngIf.value.source, options),
                     },
                 },
-                children: [
-                    angularTemplateNodeToMitosisNode((0, lodash_1.omit)(node, 'templateAttrs'), options),
-                ],
+                children: [angularTemplateNodeToMitosisNode((0, lodash_1.omit)(node, 'templateAttrs'), options)],
             });
         }
         var ngFor = node.templateAttrs.find(function (item) { return item.name === 'ngFor'; });
@@ -74,9 +66,7 @@ var angularTemplateNodeToMitosisNode = function (node, options) {
                 properties: {
                     _forName: itemName,
                 },
-                children: [
-                    angularTemplateNodeToMitosisNode((0, lodash_1.omit)(node, 'templateAttrs'), options),
-                ],
+                children: [angularTemplateNodeToMitosisNode((0, lodash_1.omit)(node, 'templateAttrs'), options)],
             });
         }
     }
@@ -105,9 +95,7 @@ var angularTemplateNodeToMitosisNode = function (node, options) {
             name: node.name,
             properties: properties,
             bindings: bindings,
-            children: node.children.map(function (node) {
-                return angularTemplateNodeToMitosisNode(node, options);
-            }),
+            children: node.children.map(function (node) { return angularTemplateNodeToMitosisNode(node, options); }),
         });
     }
     if (isText(node)) {
@@ -129,9 +117,7 @@ var angularTemplateNodeToMitosisNode = function (node, options) {
 };
 var angularTemplateToMitosisNodes = function (template, options) {
     var ast = (0, compiler_1.parseTemplate)(template, '.');
-    var blocks = ast.nodes.map(function (node) {
-        return angularTemplateNodeToMitosisNode(node, options);
-    });
+    var blocks = ast.nodes.map(function (node) { return angularTemplateNodeToMitosisNode(node, options); });
     return blocks;
 };
 var parseTypescript = function (code, options) {
@@ -151,13 +137,9 @@ var parseTypescript = function (code, options) {
                             if (typescript_1.default.isObjectLiteralExpression(firstArg)) {
                                 firstArg.properties.find(function (item) {
                                     if (typescript_1.default.isPropertyAssignment(item)) {
-                                        if (typescript_1.default.isIdentifier(item.name) &&
-                                            item.name.text === 'template') {
+                                        if (typescript_1.default.isIdentifier(item.name) && item.name.text === 'template') {
                                             if (typescript_1.default.isTemplateLiteral(item.initializer)) {
-                                                var template = item.initializer
-                                                    .getText()
-                                                    .trim()
-                                                    .slice(1, -1);
+                                                var template = item.initializer.getText().trim().slice(1, -1);
                                                 component.children = angularTemplateToMitosisNodes(template, options);
                                             }
                                         }

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

@@ -27,30 +27,27 @@ export declare function extractStateHook(code: string): {
     state: any;
 };
 export declare function convertExportDefaultToReturn(code: string): string;
-export declare const createBuilderElement: (options?: Partial<BuilderElement> | undefined) => BuilderElement;
+export declare const createBuilderElement: (options?: Partial<BuilderElement>) => BuilderElement;
 export declare const isBuilderElement: (el: unknown) => el is BuilderElement;
 export declare const builderContentToMitosisComponent: (builderContent: BuilderContent, options?: BuilderToMitosisOptions) => {
     subComponents: {
         name: string;
         '@type': "@builder.io/mitosis/component";
         imports: import("..").MitosisImport[];
+        exports?: import("..").MitosisExport | undefined;
         meta: import("../types/json").JSONObject & {
             useMetadata?: import("../types/json").JSONObject | undefined;
         };
         inputs: import("..").MitosisComponentInput[];
         state: import("../types/json").JSONObject;
         context: {
-            get: {
-                [key: string]: {
-                    name: string;
-                    path: string;
-                };
-            };
-            set: {
-                [key: string]: {
-                    name: string;
-                    value?: import("../types/json").JSONObject | undefined;
-                };
+            get: import("..").ContextGet;
+            set: import("..").ContextSet;
+        };
+        refs: {
+            [useRef: string]: {
+                typeParameter?: string | undefined;
+                argument: string;
             };
         };
         hooks: {
@@ -64,27 +61,27 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
         };
         children: MitosisNode[];
         subComponents: import("..").MitosisComponent[];
+        types?: string[] | undefined;
+        interfaces?: string[] | undefined;
+        propsTypeRef?: string | undefined;
     }[];
     '@type': "@builder.io/mitosis/component";
     name: string;
     imports: import("..").MitosisImport[];
+    exports?: import("..").MitosisExport | undefined;
     meta: import("../types/json").JSONObject & {
         useMetadata?: import("../types/json").JSONObject | undefined;
     };
     inputs: import("..").MitosisComponentInput[];
     state: import("../types/json").JSONObject;
     context: {
-        get: {
-            [key: string]: {
-                name: string;
-                path: string;
-            };
-        };
-        set: {
-            [key: string]: {
-                name: string;
-                value?: import("../types/json").JSONObject | undefined;
-            };
+        get: import("..").ContextGet;
+        set: import("..").ContextSet;
+    };
+    refs: {
+        [useRef: string]: {
+            typeParameter?: string | undefined;
+            argument: string;
         };
     };
     hooks: {
@@ -97,5 +94,8 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
         onUpdate?: import("..").extendedHook[] | undefined;
     };
     children: MitosisNode[];
+    types?: string[] | undefined;
+    interfaces?: string[] | undefined;
+    propsTypeRef?: string | undefined;
 };
 export {};

package/dist/src/parsers/builder.js

@@ -59,7 +59,9 @@ var styleOmitList = [
 ];
 var getCssFromBlock = function (block) {
     var _a;
-    var blockSizes = Object.keys(block.responsiveStyles || {}).filter(function (size) { return media_sizes_1.sizeNames.includes(size); });
+    var blockSizes = Object.keys(block.responsiveStyles || {}).filter(function (size) {
+        return media_sizes_1.sizeNames.includes(size);
+    });
     var css = {};
     for (var _i = 0, blockSizes_1 = blockSizes; _i < blockSizes_1.length; _i++) {
         var size = blockSizes_1[_i];
@@ -266,9 +268,7 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
                         (0, create_mitosis_node_1.createMitosisNode)({
                             // TODO: the Builder generator side of this converting to blocks
                             name: 'BuilderSymbolContents',
-                            children: blocks.map(function (item) {
-                                return (0, exports.builderElementToMitosisNode)(item, options);
-                            }),
+                            children: blocks.map(function (item) { return (0, exports.builderElementToMitosisNode)(item, options); }),
                         }),
                     ],
             });
@@ -287,9 +287,7 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
                 properties: {
                     link: col.link,
                 },
-            })), { children: col.blocks.map(function (col) {
-                    return (0, exports.builderElementToMitosisNode)(col, options);
-                }) }));
+            })), { children: col.blocks.map(function (col) { return (0, exports.builderElementToMitosisNode)(col, options); }) }));
         });
         return node;
     }, 'Shopify:For': function (block, options) {
@@ -301,9 +299,7 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
             properties: {
                 _forName: block.component.options.repeat.itemName,
             },
-            children: (block.children || []).map(function (child) {
-                return (0, exports.builderElementToMitosisNode)(child, options);
-            }),
+            children: (block.children || []).map(function (child) { return (0, exports.builderElementToMitosisNode)(child, options); }),
         });
     }, Text: function (block, options) {
         var _a, _b;
@@ -389,9 +385,7 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
                 bindings: {
                     when: { code: wrapBindingIfNeeded(showBinding, options) },
                 },
-                children: ((_d = block.children) === null || _d === void 0 ? void 0 : _d.map(function (child) {
-                    return (0, exports.builderElementToMitosisNode)(child, options);
-                })) || [],
+                children: ((_d = block.children) === null || _d === void 0 ? void 0 : _d.map(function (child) { return (0, exports.builderElementToMitosisNode)(child, options); })) || [],
             });
         }
         else {
@@ -421,14 +415,11 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
                 properties: {
                     _forName: ((_h = block.repeat) === null || _h === void 0 ? void 0 : _h.itemName) || 'item',
                 },
-                children: ((_j = block.children) === null || _j === void 0 ? void 0 : _j.map(function (child) {
-                    return (0, exports.builderElementToMitosisNode)(child, options);
-                })) || [],
+                children: ((_j = block.children) === null || _j === void 0 ? void 0 : _j.map(function (child) { return (0, exports.builderElementToMitosisNode)(child, options); })) || [],
             });
         }
         else {
-            var useBlock = ((_k = block.component) === null || _k === void 0 ? void 0 : _k.name) === 'Core:Fragment' &&
-                ((_l = block.children) === null || _l === void 0 ? void 0 : _l.length) === 1
+            var useBlock = ((_k = block.component) === null || _k === void 0 ? void 0 : _k.name) === 'Core:Fragment' && ((_l = block.children) === null || _l === void 0 ? void 0 : _l.length) === 1
                 ? block.children[0]
                 : block;
             return (0, create_mitosis_node_1.createMitosisNode)({
@@ -441,15 +432,11 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
                 properties: {
                     _forName: ((_o = block.repeat) === null || _o === void 0 ? void 0 : _o.itemName) || 'item',
                 },
-                children: [
-                    (0, exports.builderElementToMitosisNode)((0, lodash_1.omit)(useBlock, 'repeat'), options),
-                ],
+                children: [(0, exports.builderElementToMitosisNode)((0, lodash_1.omit)(useBlock, 'repeat'), options)],
             });
         }
     }
-    var mapper = !_internalOptions.skipMapper &&
-        block.component &&
-        componentMappers[block.component.name];
+    var mapper = !_internalOptions.skipMapper && block.component && componentMappers[block.component.name];
     if (mapper) {
         return mapper(block, options);
     }
@@ -500,8 +487,7 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
     var styleString = getStyleStringFromBlock(block, options);
     var actionBindings = getActionBindingsFromBlock(block, options);
     for (var binding in blockBindings) {
-        if (binding.startsWith('component.options') ||
-            binding.startsWith('options')) {
+        if (binding.startsWith('component.options') || binding.startsWith('options')) {
             var value = blockBindings[binding];
             var useKey = binding.replace(/^(component\.options\.|options\.)/, '');
             bindings[useKey] = { code: value };
@@ -535,9 +521,7 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
             })),
         });
     }
-    node.children = (block.children || []).map(function (item) {
-        return (0, exports.builderElementToMitosisNode)(item, options);
-    });
+    node.children = (block.children || []).map(function (item) { return (0, exports.builderElementToMitosisNode)(item, options); });
     return node;
 };
 exports.builderElementToMitosisNode = builderElementToMitosisNode;
@@ -572,8 +556,7 @@ function extractStateHook(code) {
             var expression = statement.expression;
             // Check for useState
             if (types.isCallExpression(expression)) {
-                if (types.isIdentifier(expression.callee) &&
-                    expression.callee.name === 'useState') {
+                if (types.isIdentifier(expression.callee) && expression.callee.name === 'useState') {
                     var arg = expression.arguments[0];
                     if (types.isObjectExpression(arg)) {
                         state = (0, jsx_1.parseStateObject)(arg);
@@ -705,8 +688,7 @@ var builderContentPartToMitosisComponent = function (builderContent, options) {
             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 })) && {
+        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: (((_h = builderContent.data) === null || _h === void 0 ? void 0 : _h.blocks) || [])

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

@@ -2,12 +2,13 @@ import * as babel from '@babel/core';
 import { MitosisComponent } from '../types/mitosis-component';
 export declare const selfClosingTags: Set<string>;
 export declare const createFunctionStringLiteral: (node: babel.types.Node) => babel.types.StringLiteral;
-export declare const createFunctionStringLiteralObjectProperty: (key: babel.types.Expression, node: babel.types.Node) => babel.types.ObjectProperty;
+export declare const createFunctionStringLiteralObjectProperty: (key: babel.types.PrivateName | babel.types.Expression, node: babel.types.Node) => babel.types.ObjectProperty;
 export declare const parseStateObject: (object: babel.types.ObjectExpression) => any;
 export declare const METADATA_HOOK_NAME = "useMetadata";
 declare type ParseMitosisOptions = {
     format: 'react' | 'simple';
     jsonHookNames?: string[];
+    compileAwayPackages?: string[];
 };
 /**
  * This function takes the raw string from a Mitosis component, and converts it into a JSON that can be processed by