@builder.io/mitosis 0.0.50-6 → 0.0.50

package/dist/src/generators/vue.js

@@ -3,6 +3,37 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 };
 };
@@ -31,9 +62,12 @@ var filter_empty_text_nodes_1 = require("../helpers/filter-empty-text-nodes");
 var json5_1 = __importDefault(require("json5"));
 var process_http_requests_1 = require("../helpers/process-http-requests");
 var patterns_1 = require("../helpers/patterns");
+var method_literal_prefix_1 = require("../constants/method-literal-prefix");
 function getContextNames(json) {
     return Object.keys(json.context.get);
 }
+var ON_UPDATE_HOOK_NAME = 'onUpdateHook';
+var getOnUpdateHookName = function (index) { return ON_UPDATE_HOOK_NAME + "".concat(index); };
 // TODO: migrate all stripStateAndPropsRefs to use this here
 // to properly replace context refs
 function processBinding(code, _options, json) {
@@ -218,13 +252,45 @@ function getContextProvideString(component, options) {
     str += '}';
     return str;
 }
-var componentToVue = function (options) {
-    if (options === void 0) { options = {}; }
+/**
+ * This plugin handle `onUpdate` code that watches depdendencies.
+ * We need to apply this workaround to be able to watch specific dependencies in Vue 2: https://stackoverflow.com/a/45853349
+ *
+ * We add a `computed` property for the dependencies, and a matching `watch` function for the `onUpdate` code
+ */
+var onUpdatePlugin = function (options) { return ({
+    json: {
+        post: function (component) {
+            if (component.hooks.onUpdate) {
+                component.hooks.onUpdate
+                    .filter(function (hook) { var _a; return (_a = hook.deps) === null || _a === void 0 ? void 0 : _a.length; })
+                    .forEach(function (hook, index) {
+                    var _a;
+                    component.state[getOnUpdateHookName(index)] = "".concat(method_literal_prefix_1.methodLiteralPrefix, "get ").concat(getOnUpdateHookName(index), " () {\n            return {\n              ").concat((_a = hook.deps) === null || _a === void 0 ? void 0 : _a.slice(1, -1).split(',').map(function (dep, k) {
+                        var val = dep.trim();
+                        return "".concat(k, ": ").concat(val);
+                    }).join(','), "\n            }\n          }");
+                });
+            }
+        },
+    },
+}); };
+var BASE_OPTIONS = {
+    plugins: [onUpdatePlugin],
+};
+var mergeOptions = function (_a, _b) {
+    var _c = _a.plugins, pluginsA = _c === void 0 ? [] : _c, a = __rest(_a, ["plugins"]);
+    var _d = _b.plugins, pluginsB = _d === void 0 ? [] : _d, b = __rest(_b, ["plugins"]);
+    return (__assign(__assign(__assign({}, a), b), { plugins: __spreadArray(__spreadArray([], pluginsA, true), pluginsB, true) }));
+};
+var componentToVue = function (userOptions) {
+    if (userOptions === void 0) { userOptions = {}; }
     // hack while we migrate all other transpilers to receive/handle path
     // TO-DO: use `Transpiler` once possible
     return function (_a) {
-        var _b, _c, _d, _e, _f, _g;
+        var _b, _c, _d, _e, _f, _g, _h, _j;
         var component = _a.component, path = _a.path;
+        var options = mergeOptions(BASE_OPTIONS, userOptions);
         // Make a copy we can safely mutate, similar to babel's toolchain can be used
         component = (0, fast_clone_1.fastClone)(component);
         (0, process_http_requests_1.processHttpRequests)(component);
@@ -287,12 +353,14 @@ var componentToVue = function (options) {
             functionsString = functionsString.replace(/}\s*$/, "_classStringToObject(str) {\n        const obj = {};\n        if (typeof str !== 'string') { return obj }\n        const classNames = str.trim().split(/\\s+/); \n        for (const name of classNames) {\n          obj[name] = true;\n        } \n        return obj;\n      }  }");
         }
         var builderRegister = Boolean(options.builderRegister && component.meta.registerComponent);
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    <template>\n      ", "\n    </template>\n    <script>\n      ", "\n      ", "\n\n      export default ", "{\n        ", "\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n      }", "\n    </script>\n    ", "\n  "], ["\n    <template>\n      ", "\n    </template>\n    <script>\n      ", "\n      ", "\n\n      export default ", "{\n        ", "\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n      }", "\n    </script>\n    ", "\n  "])), template, (0, render_imports_1.renderPreComponent)(component), component.meta.registerComponent
-            ? (_d = options.registerComponentPrepend) !== null && _d !== void 0 ? _d : ''
+        var onUpdateWithDeps = ((_d = component.hooks.onUpdate) === null || _d === void 0 ? void 0 : _d.filter(function (hook) { var _a; return (_a = hook.deps) === null || _a === void 0 ? void 0 : _a.length; })) || [];
+        var onUpdateWithoutDeps = ((_e = component.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.filter(function (hook) { var _a; return !((_a = hook.deps) === null || _a === void 0 ? void 0 : _a.length); })) || [];
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    <template>\n      ", "\n    </template>\n    <script>\n      ", "\n      ", "\n\n      export default ", "{\n        ", "\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n\n        ", "\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n      }", "\n    </script>\n    ", "\n  "], ["\n    <template>\n      ", "\n    </template>\n    <script>\n      ", "\n      ", "\n\n      export default ", "{\n        ", "\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n\n        ", "\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n      }", "\n    </script>\n    ", "\n  "])), template, (0, render_imports_1.renderPreComponent)(component), component.meta.registerComponent
+            ? (_f = options.registerComponentPrepend) !== null && _f !== void 0 ? _f : ''
             : '', !builderRegister ? '' : 'registerComponent(', !component.name
             ? ''
-            : "name: '".concat(((_e = options.namePrefix) === null || _e === void 0 ? void 0 : _e.call(options, path))
-                ? ((_f = options.namePrefix) === null || _f === void 0 ? void 0 : _f.call(options, path)) + '-'
+            : "name: '".concat(((_g = options.namePrefix) === null || _g === void 0 ? void 0 : _g.call(options, path))
+                ? ((_h = options.namePrefix) === null || _h === void 0 ? void 0 : _h.call(options, path)) + '-'
                 : '').concat((0, lodash_1.kebabCase)(component.name), "',"), !componentsUsed.length
             ? ''
             : "components: { ".concat(componentsUsed
@@ -307,10 +375,18 @@ var componentToVue = function (options) {
             ? "provide() {\n                const _this = this;\n                return ".concat(getContextProvideString(component, options), "\n              },")
             : '', (0, lodash_1.size)(component.context.get)
             ? "inject: ".concat(getContextInjectString(component, options), ",")
-            : '', ((_g = component.hooks.onMount) === null || _g === void 0 ? void 0 : _g.code)
+            : '', ((_j = component.hooks.onMount) === null || _j === void 0 ? void 0 : _j.code)
             ? "mounted() {\n                ".concat(processBinding(component.hooks.onMount.code, options, component), "\n              },")
-            : '', component.hooks.onUpdate
-            ? "updated() {\n                ".concat(processBinding(component.hooks.onUpdate.code, options, component), "\n              },")
+            : '', onUpdateWithoutDeps.length
+            ? "updated() {\n            ".concat(onUpdateWithoutDeps
+                .map(function (hook) { return processBinding(hook.code, options, component); })
+                .join('\n'), "\n          },")
+            : '', onUpdateWithDeps.length
+            ? "watch: {\n            ".concat(onUpdateWithDeps
+                .map(function (hook, index) {
+                return "".concat(getOnUpdateHookName(index), "() {\n                  ").concat(processBinding(hook.code, options, component), "\n                  }\n                ");
+            })
+                .join(','), "\n          },")
             : '', component.hooks.onUnMount
             ? "unmounted() {\n                ".concat(processBinding(component.hooks.onUnMount.code, options, component), "\n              },")
             : '', getterString.length < 4

package/dist/src/helpers/babel-transform copy.d.ts

@@ -0,0 +1,8 @@
+import * as babel from '@babel/core';
+declare type Visitor<ContextType = any> = {
+    [key: string]: (path: any, context: ContextType) => void;
+};
+export declare const babelTransform: <VisitorContextType = any>(code: string, visitor?: Visitor<VisitorContextType> | undefined) => babel.BabelFileResult | null;
+export declare const babelTransformCode: <VisitorContextType = any>(code: string, visitor?: Visitor<VisitorContextType> | undefined) => string;
+export declare const babelTransformExpression: <VisitorContextType = any>(code: string, visitor: Visitor<VisitorContextType>, type?: 'expression' | 'unknown' | 'block' | 'functionBody') => string;
+export {};

package/dist/src/helpers/babel-transform copy.js

@@ -0,0 +1,138 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = 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];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.babelTransformExpression = exports.babelTransformCode = exports.babelTransform = void 0;
+var babel = __importStar(require("@babel/core"));
+var lodash_1 = require("lodash");
+var jsxPlugin = require('@babel/plugin-syntax-jsx');
+var tsPreset = require('@babel/preset-typescript');
+var decorators = require('@babel/plugin-syntax-decorators');
+var babelTransform = function (code, visitor) {
+    return babel.transform(code, {
+        sourceFileName: 'file.tsx',
+        configFile: false,
+        babelrc: false,
+        presets: [[tsPreset, { isTSX: true, allExtensions: true }]],
+        plugins: __spreadArray([
+            [decorators, { legacy: true }],
+            jsxPlugin
+        ], (visitor ? [function () { return ({ visitor: visitor }); }] : []), true),
+    });
+};
+exports.babelTransform = babelTransform;
+var babelTransformCode = function (code, visitor) {
+    var _a;
+    return ((_a = (0, exports.babelTransform)(code, visitor)) === null || _a === void 0 ? void 0 : _a.code) || '';
+};
+exports.babelTransformCode = babelTransformCode;
+var babelTransformExpression = function (code, visitor, type) {
+    var _a;
+    if (type === void 0) { type = 'unknown'; }
+    if (!code) {
+        return '';
+    }
+    // match for object literal like { foo: ... }
+    if (type === 'unknown' && code.trim().match(/^\s*{\s*[a-z0-9]+:/i)) {
+        type = 'expression';
+    }
+    // For Builder content
+    if (type === 'unknown' &&
+        (code.includes('return _virtual_index') ||
+            code.trim().startsWith('return ')) &&
+        !code.trim().startsWith('function')) {
+        type = 'functionBody';
+    }
+    var useCode = code;
+    if (type === 'functionBody') {
+        useCode = "function(){".concat(useCode, "}");
+    }
+    var result = type === 'expression'
+        ? null
+        : (0, lodash_1.attempt)(function () {
+            var _a;
+            var result = ((_a = (0, exports.babelTransform)(useCode, visitor)) === null || _a === void 0 ? void 0 : _a.code) || '';
+            if (type === 'functionBody') {
+                return result.replace(/^function\(\)\{/, '').replace(/\};$/, '');
+            }
+            else {
+                // Babel addes trailing semicolons, but for expressions we need those gone
+                // TODO: maybe detect if the original code ended with one, and keep it if so, for the case
+                // of appending several fragements
+                return result.replace(/;$/, '');
+            }
+        });
+    if ((0, lodash_1.isError)(result) || type === 'expression') {
+        try {
+            // If it can't, e.g. this is an expression or code fragment, modify the code below and try again
+            // Detect method fragments. These get passed sometimes and otherwise
+            // generate compile errors. They are of the form `foo() { ... }`
+            var isMethod = Boolean(!code.startsWith('function') &&
+                code.match(/^[a-z0-9]+\s*\([^\)]*\)\s*[\{:]/i));
+            if (isMethod) {
+                useCode = "function ".concat(useCode);
+            }
+            // Parse the code as an expression (instead of the default, a block) by giving it a fake variable assignment
+            // e.g. if the code parsed is { ... } babel will treat that as a block by deafult, unless processed as an expression
+            // that is an object
+            useCode = "let _ = ".concat(useCode);
+            result = (((_a = (0, exports.babelTransform)(useCode, visitor)) === null || _a === void 0 ? void 0 : _a.code) || '')
+                // Babel addes trailing semicolons, but for expressions we need those gone
+                .replace(/;$/, '')
+                // Remove our fake variable assignment
+                .replace(/let _ =\s/, '');
+            if (isMethod) {
+                result = result.replace('function', '');
+            }
+        }
+        catch (err) {
+            console.error('Error parsing code:\n', code, '\n', result);
+            try {
+                return (0, exports.babelTransformExpression)(code, visitor, 'functionBody');
+            }
+            catch (err) {
+                throw err;
+            }
+        }
+    }
+    if (type === 'functionBody') {
+        return result.replace(/^function\s*\(\)\s*\{/, '').replace(/\};?$/, '');
+    }
+    else {
+        // Babel addes trailing semicolons, but for expressions we need those gone
+        // TODO: maybe detect if the original code ended with one, and keep it if so, for the case
+        // of appending several fragements
+        return result.replace(/;$/, '');
+    }
+};
+exports.babelTransformExpression = babelTransformExpression;

package/dist/src/helpers/babel-transform.d.ts

@@ -1,8 +1,5 @@
 import * as babel from '@babel/core';
-declare type Visitor<ContextType = any> = {
-    [key: string]: (path: any, context: ContextType) => void;
-};
-export declare const babelTransform: <VisitorContextType = any>(code: string, visitor: Visitor<VisitorContextType>) => babel.BabelFileResult | null;
-export declare const babelTransformCode: <VisitorContextType = any>(code: string, visitor: Visitor<VisitorContextType>) => string;
-export declare const babelTransformExpression: <VisitorContextType = any>(code: string, visitor: Visitor<VisitorContextType>, type?: 'expression' | 'unknown' | 'block' | 'functionBody') => string;
-export {};
+import type { Visitor } from '@babel/traverse';
+export declare const babelTransform: <VisitorContextType = any>(code: string, visitor?: babel.Visitor<VisitorContextType> | undefined) => babel.BabelFileResult | null;
+export declare const babelTransformCode: <VisitorContextType = any>(code: string, visitor?: babel.Visitor<VisitorContextType> | undefined) => string;
+export declare const babelTransformExpression: <VisitorContextType = any>(code: string, visitor: babel.Visitor<VisitorContextType>, type?: 'expression' | 'unknown' | 'block' | 'functionBody') => string;

package/dist/src/helpers/babel-transform.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];
@@ -18,6 +22,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));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.babelTransformExpression = exports.babelTransformCode = exports.babelTransform = void 0;
 var babel = __importStar(require("@babel/core"));
@@ -31,7 +44,10 @@ var babelTransform = function (code, visitor) {
         configFile: false,
         babelrc: false,
         presets: [[tsPreset, { isTSX: true, allExtensions: true }]],
-        plugins: [[decorators, { legacy: true }], jsxPlugin, function () { return ({ visitor: visitor }); }],
+        plugins: __spreadArray([
+            [decorators, { legacy: true }],
+            jsxPlugin
+        ], (visitor ? [function () { return ({ visitor: visitor }); }] : []), true),
     });
 };
 exports.babelTransform = babelTransform;

package/dist/src/helpers/babel-transform.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/helpers/babel-transform.test.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var babel_transform_1 = require("./babel-transform");
+test('babelTransform', function () {
+    var code = "\nconst symbol = symbol;\n\nif (symbol) {\n  getContent({\n    apiKey: builderContext.apiKey!,\n  }).then(response => {\n    content = response;\n  });\n}\n";
+    expect((0, babel_transform_1.babelTransformCode)(code)).toMatchSnapshot();
+});

package/dist/src/helpers/create-mitosis-component.js

@@ -12,5 +12,5 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createMitosisComponent = void 0;
-var createMitosisComponent = function (options) { return (__assign({ '@type': '@builder.io/mitosis/component', imports: [], meta: {}, state: {}, children: [], hooks: {}, context: { get: {}, set: {} }, name: (options === null || options === void 0 ? void 0 : options.name) || 'MyComponent', subComponents: [] }, options)); };
+var createMitosisComponent = function (options) { return (__assign({ '@type': '@builder.io/mitosis/component', imports: [], inputs: [], meta: {}, state: {}, children: [], hooks: {}, context: { get: {}, set: {} }, name: (options === null || options === void 0 ? void 0 : options.name) || 'MyComponent', subComponents: [] }, options)); };
 exports.createMitosisComponent = createMitosisComponent;

package/dist/src/helpers/get-state-object-string.js

@@ -71,6 +71,7 @@ var getMemberObjectString = function (object, options) {
 exports.getMemberObjectString = getMemberObjectString;
 var getStateObjectStringFromComponent = function (component, options) {
     if (options === void 0) { options = {}; }
-    return (0, exports.getMemberObjectString)(component.state, options);
+    var stateObjectStr = (0, exports.getMemberObjectString)(component.state, options);
+    return stateObjectStr;
 };
 exports.getStateObjectStringFromComponent = getStateObjectStringFromComponent;

package/dist/src/helpers/map-refs.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];
@@ -44,10 +48,9 @@ var replaceRefsInString = function (code, refs, mapper) {
     });
 };
 var mapRefs = function (component, mapper) {
-    var _a;
     var refs = Array.from((0, get_refs_1.getRefs)(component));
-    for (var _i = 0, _b = Object.keys(component.state); _i < _b.length; _i++) {
-        var key = _b[_i];
+    for (var _i = 0, _a = Object.keys(component.state); _i < _a.length; _i++) {
+        var key = _a[_i];
         var value = component.state[key];
         if (typeof value === 'string') {
             if (value.startsWith(method_literal_prefix_1.methodLiteralPrefix)) {
@@ -76,11 +79,21 @@ var mapRefs = function (component, mapper) {
             }
         }
     });
-    for (var _c = 0, _d = Object.keys(component.hooks); _c < _d.length; _c++) {
-        var key = _d[_c];
-        var hookCode = (_a = component.hooks[key]) === null || _a === void 0 ? void 0 : _a.code;
-        if (hookCode) {
-            component.hooks[key].code = replaceRefsInString(hookCode, refs, mapper);
+    for (var _b = 0, _c = Object.keys(component.hooks); _b < _c.length; _b++) {
+        var key = _c[_b];
+        var hooks = component.hooks[key];
+        if (Array.isArray(hooks)) {
+            hooks.forEach(function (hook) {
+                if (hook.code) {
+                    hook.code = replaceRefsInString(hook.code, refs, mapper);
+                }
+            });
+        }
+        else {
+            var hookCode = hooks === null || hooks === void 0 ? void 0 : hooks.code;
+            if (hookCode) {
+                hooks.code = replaceRefsInString(hookCode, refs, mapper);
+            }
         }
     }
 };

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

@@ -0,0 +1,8 @@
+import * as babel from '@babel/core';
+export declare function parseCode(code: string): babel.types.Statement[];
+export declare const isCodeBodyExpression: (body: babel.types.Statement[]) => boolean;
+/**
+ * Returns `true` if the `code` is a valid expression. (vs a statement)
+ */
+export declare function isExpression(code: string): boolean;
+export declare const isCodeBodyIdentifier: (body: babel.types.Statement[]) => boolean;

package/dist/src/helpers/parsers.js

@@ -0,0 +1,66 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = 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];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isCodeBodyIdentifier = exports.isExpression = exports.isCodeBodyExpression = exports.parseCode = void 0;
+var babel = __importStar(require("@babel/core"));
+var jsxPlugin = require('@babel/plugin-syntax-jsx');
+var tsPreset = require('@babel/preset-typescript');
+var decorators = require('@babel/plugin-syntax-decorators');
+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;
+}
+exports.parseCode = parseCode;
+var isCodeBodyExpression = function (body) {
+    return body.length == 1 &&
+        (babel.types.isExpression(body[0]) ||
+            babel.types.isExpressionStatement(body[0]));
+};
+exports.isCodeBodyExpression = isCodeBodyExpression;
+/**
+ * Returns `true` if the `code` is a valid expression. (vs a statement)
+ */
+function isExpression(code) {
+    try {
+        var body = parseCode(code);
+        return (0, exports.isCodeBodyExpression)(body);
+    }
+    catch (e) {
+        return false;
+    }
+}
+exports.isExpression = isExpression;
+var isCodeBodyIdentifier = function (body) {
+    return body.length == 1 && babel.types.isIdentifier(body[0]);
+};
+exports.isCodeBodyIdentifier = isCodeBodyIdentifier;

package/dist/src/helpers/render-imports.d.ts

@@ -1,4 +1,2 @@
-import { MitosisComponent, MitosisImport } from '../types/mitosis-component';
-export declare const renderImport: (theImport: MitosisImport) => string;
-export declare const renderImports: (imports: MitosisImport[]) => string;
-export declare const renderPreComponent: (component: MitosisComponent) => string;
+import { MitosisComponent } from '../types/mitosis-component';
+export declare const renderPreComponent: (component: MitosisComponent, target?: "angular" | "builder" | "customElement" | "html" | "mitosis" | "liquid" | "react" | "reactNative" | "solid" | "svelte" | "swift" | "template" | "webcomponent" | "vue" | undefined) => string;

package/dist/src/helpers/render-imports.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderPreComponent = exports.renderImports = exports.renderImport = void 0;
-var getStarImport = function (theImport) {
+exports.renderPreComponent = void 0;
+var getStarImport = function (_a) {
+    var theImport = _a.theImport;
     for (var key in theImport.imports) {
         var value = theImport.imports[key];
         if (value === '*') {
@@ -10,7 +11,8 @@ var getStarImport = function (theImport) {
     }
     return null;
 };
-var getDefaultImport = function (theImport) {
+var getDefaultImport = function (_a) {
+    var theImport = _a.theImport;
     for (var key in theImport.imports) {
         var value = theImport.imports[key];
         if (value === 'default') {
@@ -19,14 +21,32 @@ var getDefaultImport = function (theImport) {
     }
     return null;
 };
-var renderImport = function (theImport) {
+var transformImportPath = function (theImport, target) {
+    // We need to drop the `.lite` from context files, because the context generator does so as well.
+    if (theImport.path.endsWith('.context.lite')) {
+        return theImport.path.replace('.lite', '');
+    }
+    switch (target) {
+        case 'svelte':
+            if (theImport.path.endsWith('.lite'))
+                // all svelte components have `.svelte` extension
+                return theImport.path.replace('.lite', '.svelte');
+            else {
+                return theImport.path;
+            }
+        default:
+            return theImport.path;
+    }
+};
+var renderImport = function (_a) {
+    var theImport = _a.theImport, target = _a.target;
     var importString = 'import ';
-    var starImport = getStarImport(theImport);
+    var starImport = getStarImport({ theImport: theImport });
     if (starImport) {
         importString += " * as ".concat(starImport, " ");
     }
     else {
-        var defaultImport = getDefaultImport(theImport);
+        var defaultImport = getDefaultImport({ theImport: theImport });
         if (defaultImport) {
             importString += " ".concat(defaultImport, ", ");
         }
@@ -50,11 +70,12 @@ var renderImport = function (theImport) {
         }
         importString += ' } ';
     }
-    importString += " from '".concat(theImport.path, "';");
+    var path = transformImportPath(theImport, target);
+    importString += " from '".concat(path, "';");
     return importString;
 };
-exports.renderImport = renderImport;
-var renderImports = function (imports) {
+var renderImports = function (_a) {
+    var imports = _a.imports, target = _a.target;
     var importString = '';
     for (var _i = 0, imports_1 = imports; _i < imports_1.length; _i++) {
         var theImport = imports_1[_i];
@@ -66,12 +87,9 @@ var renderImports = function (imports) {
         if (theImport.path.startsWith('@builder.io/mitosis')) {
             continue;
         }
-        importString += (0, exports.renderImport)(theImport) + '\n';
+        importString += renderImport({ theImport: theImport, target: target }) + '\n';
     }
     return importString;
 };
-exports.renderImports = renderImports;
-var renderPreComponent = function (component) {
-    return "\n    ".concat((0, exports.renderImports)(component.imports), "\n    ").concat(component.hooks.preComponent || '', "\n  ");
-};
+var renderPreComponent = function (component, target) { return "\n    ".concat(renderImports({ imports: component.imports, target: target }), "\n    ").concat(component.hooks.preComponent || '', "\n  "); };
 exports.renderPreComponent = renderPreComponent;

package/dist/src/index.d.ts

@@ -1,13 +1,16 @@
 export * from './flow';
+export declare type Context<T> = {};
 export declare const useState: <T>(obj: T) => T;
 export declare const useRef: () => any;
-export declare const useContext: (key: any) => any;
-export declare const createContext: (value: {
+export declare const useContext: <T = {
     [key: string]: any;
-}) => any;
-export declare const setContext: (key: any, value: {
+}>(key: Context<T>) => T;
+export declare const createContext: <T = {
     [key: string]: any;
-}) => any;
+}>(value: T) => Context<T>;
+export declare const setContext: <T = {
+    [key: string]: any;
+}>(key: Context<T>, value: Partial<T>) => void;
 export declare const onMount: (fn: () => any) => any;
 export declare const onUpdate: (fn: () => any, deps?: any[] | undefined) => any;
 export declare const onCreate: (fn: () => any) => any;
@@ -24,7 +27,9 @@ export * from './parsers/context';
 export * from './generators/vue';
 export * from './generators/angular';
 export * from './generators/context/react';
+export * from './generators/context/solid';
 export * from './generators/context/vue';
+export * from './generators/context/svelte';
 export * from './generators/react';
 export * from './generators/solid';
 export * from './generators/liquid';