@builder.io/mitosis 0.0.56-2 → 0.0.56-22

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/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'; });
@@ -52,11 +46,11 @@ var angularTemplateNodeToMitosisNode = function (node, options) {
             return (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'Show',
                 bindings: {
-                    when: transformBinding(ngIf.value.source, options),
+                    when: {
+                        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'; });
@@ -67,14 +61,12 @@ var angularTemplateNodeToMitosisNode = function (node, options) {
             return (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'For',
                 bindings: {
-                    each: transformBinding(expression, options),
+                    each: { code: transformBinding(expression, options) },
                 },
                 properties: {
                     _forName: itemName,
                 },
-                children: [
-                    angularTemplateNodeToMitosisNode((0, lodash_1.omit)(node, 'templateAttrs'), options),
-                ],
+                children: [angularTemplateNodeToMitosisNode((0, lodash_1.omit)(node, 'templateAttrs'), options)],
             });
         }
     }
@@ -83,13 +75,17 @@ var angularTemplateNodeToMitosisNode = function (node, options) {
         var bindings = {};
         for (var _i = 0, _a = node.inputs; _i < _a.length; _i++) {
             var input = _a[_i];
-            bindings[input.name] = transformBinding(input.value.source, options);
+            bindings[input.name] = {
+                code: transformBinding(input.value.source, options),
+            };
         }
         for (var _b = 0, _c = node.outputs; _b < _c.length; _b++) {
             var output = _c[_b];
-            bindings['on' + (0, capitalize_1.capitalize)(output.name)] = transformBinding(output.handler
-                .source // TODO: proper reference replace
-                .replace(/\$event/g, 'event'), options);
+            bindings['on' + (0, capitalize_1.capitalize)(output.name)] = {
+                code: transformBinding(output.handler
+                    .source // TODO: proper reference replace
+                    .replace(/\$event/g, 'event'), options),
+            };
         }
         for (var _d = 0, _e = node.attributes; _d < _e.length; _d++) {
             var attribute = _e[_d];
@@ -99,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)) {
@@ -123,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) {
@@ -145,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,34 +27,32 @@ 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: {
             init?: import("..").extendedHook | undefined;
+            onInit?: import("..").extendedHook | undefined;
             onMount?: import("..").extendedHook | undefined;
             onUnMount?: import("..").extendedHook | undefined;
             preComponent?: import("..").extendedHook | undefined;
@@ -63,31 +61,32 @@ 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: {
         init?: import("..").extendedHook | undefined;
+        onInit?: import("..").extendedHook | undefined;
         onMount?: import("..").extendedHook | undefined;
         onUnMount?: import("..").extendedHook | undefined;
         preComponent?: import("..").extendedHook | undefined;
@@ -95,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];
@@ -103,7 +105,7 @@ var getActionBindingsFromBlock = function (block, options) {
                 continue;
             }
             var useKey = "on".concat((0, lodash_1.upperFirst)(key));
-            bindings[useKey] = "".concat(wrapBindingIfNeeded(value, options));
+            bindings[useKey] = { code: "".concat(wrapBindingIfNeeded(value, options)) };
         }
     }
     return bindings;
@@ -222,13 +224,15 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
         var actionBindings = getActionBindingsFromBlock(block, options);
         return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'Symbol',
-            bindings: __assign(__assign(__assign({ symbol: JSON.stringify({
-                    data: (_a = block.component) === null || _a === void 0 ? void 0 : _a.options.symbol.data,
-                    content: (_b = block.component) === null || _b === void 0 ? void 0 : _b.options.symbol.content,
-                }) }, actionBindings), (styleString && {
-                style: styleString,
+            bindings: __assign(__assign(__assign({ symbol: {
+                    code: JSON.stringify({
+                        data: (_a = block.component) === null || _a === void 0 ? void 0 : _a.options.symbol.data,
+                        content: (_b = block.component) === null || _b === void 0 ? void 0 : _b.options.symbol.content,
+                    }),
+                } }, actionBindings), (styleString && {
+                style: { code: styleString },
             })), (Object.keys(css).length && {
-                css: JSON.stringify(css),
+                css: { code: JSON.stringify(css) },
             })),
         });
     } }, (!exports.symbolBlocksAsChildren
@@ -248,13 +252,15 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
                 name: 'Symbol',
                 bindings: __assign(__assign(__assign({ 
                     // TODO: this doesn't use all attrs
-                    symbol: JSON.stringify({
-                        data: (_c = block.component) === null || _c === void 0 ? void 0 : _c.options.symbol.content.data,
-                        content: content, // TODO: convert to <SymbolInternal>...</SymbolInternal> so can be parsed
-                    }) }, actionBindings), (styleString && {
-                    style: styleString,
+                    symbol: {
+                        code: JSON.stringify({
+                            data: (_c = block.component) === null || _c === void 0 ? void 0 : _c.options.symbol.content.data,
+                            content: content, // TODO: convert to <SymbolInternal>...</SymbolInternal> so can be parsed
+                        }),
+                    } }, actionBindings), (styleString && {
+                    style: { code: styleString },
                 })), (Object.keys(css).length && {
-                    css: JSON.stringify(css),
+                    css: { code: JSON.stringify(css) },
                 })),
                 children: !blocks
                     ? []
@@ -262,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); }),
                         }),
                     ],
             });
@@ -278,28 +282,24 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
         delete node.properties.columns;
         node.children = (_b = (_a = block.component) === null || _a === void 0 ? void 0 : _a.options.columns) === null || _b === void 0 ? void 0 : _b.map(function (col, index) {
             return (0, create_mitosis_node_1.createMitosisNode)(__assign(__assign({ name: 'Column', bindings: {
-                    width: col.width,
+                    width: { code: col.width },
                 } }, (col.link && {
                 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) {
         return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'For',
             bindings: {
-                each: "state.".concat(block.component.options.repeat.collection),
+                each: { code: "state.".concat(block.component.options.repeat.collection) },
             },
             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;
@@ -317,16 +317,18 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
             }
             return false;
         })), actionBindings), (styleString && {
-            style: styleString,
+            style: { code: styleString },
         })), (Object.keys(css).length && {
-            css: JSON.stringify(css),
+            css: { code: JSON.stringify(css) },
         }));
         var properties = __assign({}, block.properties);
         if (block.layerName) {
             properties.$name = block.layerName;
         }
         var innerBindings = (_a = {},
-            _a[options.preserveTextBlocks ? 'innerHTML' : '_text'] = wrapBindingIfNeeded(blockBindings['component.options.text'], options),
+            _a[options.preserveTextBlocks ? 'innerHTML' : '_text'] = {
+                code: wrapBindingIfNeeded(blockBindings['component.options.text'], options),
+            },
             _a);
         var innerProperties = (_b = {},
             _b[options.preserveTextBlocks ? 'innerHTML' : '_text'] = block.component.options.text,
@@ -365,7 +367,7 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
     } });
 var builderElementToMitosisNode = function (block, options, _internalOptions) {
     var _a;
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     if (_internalOptions === void 0) { _internalOptions = {}; }
     if (((_b = block.component) === null || _b === void 0 ? void 0 : _b.name) === 'Core:Fragment') {
         block.component.name = 'Fragment';
@@ -381,18 +383,16 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
             return (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'Show',
                 bindings: {
-                    when: wrapBindingIfNeeded(showBinding, options),
+                    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 {
             return (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'Show',
                 bindings: {
-                    when: wrapBindingIfNeeded(showBinding, options),
+                    when: { code: wrapBindingIfNeeded(showBinding, options) },
                 },
                 children: [
                     (0, exports.builderElementToMitosisNode)(__assign(__assign({}, block), { code: __assign(__assign({}, block.code), { bindings: (0, lodash_1.omit)(blockBindings, 'show') }), bindings: (0, lodash_1.omit)(blockBindings, 'show') }), options),
@@ -408,38 +408,35 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
             return (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'For',
                 bindings: {
-                    each: wrapBindingIfNeeded((_g = block.repeat) === null || _g === void 0 ? void 0 : _g.collection, options),
+                    each: {
+                        code: wrapBindingIfNeeded((_g = block.repeat) === null || _g === void 0 ? void 0 : _g.collection, options),
+                    },
                 },
                 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)({
                 name: 'For',
                 bindings: {
-                    each: wrapBindingIfNeeded((_m = block.repeat) === null || _m === void 0 ? void 0 : _m.collection, options),
+                    each: {
+                        code: wrapBindingIfNeeded((_m = block.repeat) === null || _m === void 0 ? void 0 : _m.collection, options),
+                    },
                 },
                 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);
     }
@@ -451,7 +448,9 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
             }
             var useKey = key.replace(/^(component\.)?options\./, '');
             if (!useKey.includes('.')) {
-                bindings[useKey] = blockBindings[key];
+                bindings[useKey] = {
+                    code: blockBindings[key].code || blockBindings[key],
+                };
             }
             else if (useKey.includes('style') && useKey.includes('.')) {
                 var styleProperty = useKey.split('.')[1];
@@ -477,7 +476,7 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
                 properties[key] = value;
             }
             else {
-                bindings[key] = json5_1.default.stringify(value);
+                bindings[key] = { code: json5_1.default.stringify(value) };
             }
         }
     }
@@ -488,11 +487,10 @@ 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] = value;
+            bindings[useKey] = { code: value };
         }
     }
     var node = (0, create_mitosis_node_1.createMitosisNode)({
@@ -505,10 +503,10 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
             }
             : null)), properties),
         bindings: __assign(__assign(__assign(__assign({}, bindings), actionBindings), (styleString && {
-            style: styleString,
+            style: { code: styleString },
         })), (css &&
             Object.keys(css).length && {
-            css: JSON.stringify(css),
+            css: { code: JSON.stringify(css) },
         })),
     });
     // Has single text node child
@@ -516,18 +514,14 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
         ((_t = block.children[0].component) === null || _t === void 0 ? void 0 : _t.name) === 'Text' &&
         !options.preserveTextBlocks) {
         var textProperties = (0, exports.builderElementToMitosisNode)(block.children[0], options);
-        var mergedCss = (0, lodash_1.merge)(json5_1.default.parse(node.bindings.css || '{}'), json5_1.default.parse(textProperties.bindings.css || '{}'));
+        var mergedCss = (0, lodash_1.merge)(json5_1.default.parse(((_u = node.bindings.css) === null || _u === void 0 ? void 0 : _u.code) || '{}'), json5_1.default.parse(((_v = textProperties.bindings.css) === null || _v === void 0 ? void 0 : _v.code) || '{}'));
         return (0, lodash_1.merge)({}, textProperties, node, {
-            bindings: {
-                css: Object.keys(mergedCss).length
-                    ? json5_1.default.stringify(mergedCss)
-                    : undefined,
-            },
+            bindings: __assign({}, (Object.keys(mergedCss).length && {
+                css: { code: json5_1.default.stringify(mergedCss) },
+            })),
         });
     }
-    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;
@@ -562,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);
@@ -695,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