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

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

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderPreComponent = void 0;
+exports.renderExportAndLocal = exports.renderPreComponent = exports.renderImports = exports.renderImport = void 0;
+var DEFAULT_IMPORT = 'default';
+var STAR_IMPORT = '*';
 var getStarImport = function (_a) {
     var theImport = _a.theImport;
     for (var key in theImport.imports) {
         var value = theImport.imports[key];
-        if (value === '*') {
+        if (value === STAR_IMPORT) {
             return key;
         }
     }
@@ -15,7 +17,7 @@ var getDefaultImport = function (_a) {
     var theImport = _a.theImport;
     for (var key in theImport.imports) {
         var value = theImport.imports[key];
-        if (value === 'default') {
+        if (value === DEFAULT_IMPORT) {
             return key;
         }
     }
@@ -27,74 +29,113 @@ var getFileExtensionForTarget = function (target) {
             return '.svelte';
         case 'solid':
             return '.jsx';
+        case 'vue':
+        case 'vue2':
+        case 'vue3':
+            return '.vue';
         // these `.lite` extensions are handled in the `transpile` step of the CLI.
         // TO-DO: consolidate file-extension renaming to one place.
         default:
             return '.lite';
     }
 };
+var checkIsComponentImport = function (theImport) {
+    return theImport.path.endsWith('.lite') && !theImport.path.endsWith('.context.lite');
+};
 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', '');
     }
-    if (theImport.path.endsWith('.lite')) {
+    if (checkIsComponentImport(theImport)) {
         return theImport.path.replace('.lite', getFileExtensionForTarget(target));
     }
     return theImport.path;
 };
-var renderImport = function (_a) {
-    var theImport = _a.theImport, target = _a.target;
-    var importString = 'import ';
+var getNamedImports = function (_a) {
+    var theImport = _a.theImport;
+    var namedImports = Object.entries(theImport.imports)
+        .filter(function (_a) {
+        var value = _a[1];
+        return ![DEFAULT_IMPORT, STAR_IMPORT].includes(value);
+    })
+        .map(function (_a) {
+        var key = _a[0], value = _a[1];
+        return key !== value ? "".concat(value, " as ").concat(key) : value;
+    });
+    if (namedImports.length > 0) {
+        return "{ ".concat(namedImports.join(', '), " }");
+    }
+    else {
+        return null;
+    }
+};
+var getImportedValues = function (_a) {
+    var theImport = _a.theImport;
     var starImport = getStarImport({ theImport: theImport });
+    var defaultImport = getDefaultImport({ theImport: theImport });
+    var namedImports = getNamedImports({ theImport: theImport });
+    return { starImport: starImport, defaultImport: defaultImport, namedImports: namedImports };
+};
+var getImportValue = function (_a) {
+    var defaultImport = _a.defaultImport, namedImports = _a.namedImports, starImport = _a.starImport;
     if (starImport) {
-        importString += " * as ".concat(starImport, " ");
+        return " * as ".concat(starImport, " ");
     }
     else {
-        var defaultImport = getDefaultImport({ theImport: theImport });
-        if (defaultImport) {
-            importString += " ".concat(defaultImport, ", ");
+        return [defaultImport, namedImports].filter(Boolean).join(', ');
+    }
+};
+var renderImport = function (_a) {
+    var theImport = _a.theImport, target = _a.target, asyncComponentImports = _a.asyncComponentImports;
+    var importedValues = getImportedValues({ theImport: theImport });
+    var path = transformImportPath(theImport, target);
+    var importValue = getImportValue(importedValues);
+    var isComponentImport = checkIsComponentImport(theImport);
+    var shouldBeAsyncImport = asyncComponentImports && isComponentImport;
+    if (shouldBeAsyncImport) {
+        var isVueImport = target === 'vue';
+        if (isVueImport && importedValues.namedImports) {
+            console.warn('Vue: Async Component imports cannot include named imports. Dropping async import. This might break your code.');
         }
-        importString += ' { ';
-        var firstAdded = false;
-        for (var key in theImport.imports) {
-            var value = theImport.imports[key];
-            if (['default', '*'].includes(value)) {
-                continue;
-            }
-            if (firstAdded) {
-                importString += ' , ';
-            }
-            else {
-                firstAdded = true;
-            }
-            importString += " ".concat(value, " ");
-            if (key !== value) {
-                importString += " as ".concat(key, " ");
-            }
+        else {
+            return "const ".concat(importValue, " = () => import('").concat(path, "')");
         }
-        importString += ' } ';
     }
-    var path = transformImportPath(theImport, target);
-    importString += " from '".concat(path, "';");
-    return importString;
+    return "import ".concat(importValue, " from '").concat(path, "';");
 };
+exports.renderImport = renderImport;
 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];
+    var imports = _a.imports, target = _a.target, asyncComponentImports = _a.asyncComponentImports;
+    return imports
+        .filter(function (theImport) {
+        if (
         // Remove compile away components
-        if (theImport.path === '@builder.io/components') {
-            continue;
+        theImport.path === '@builder.io/components' ||
+            // TODO: Mitosis output needs this
+            theImport.path.startsWith('@builder.io/mitosis')) {
+            return false;
         }
-        // TODO: Mitosis output needs this
-        if (theImport.path.startsWith('@builder.io/mitosis')) {
-            continue;
+        else {
+            return true;
         }
-        importString += renderImport({ theImport: theImport, target: target }) + '\n';
-    }
-    return importString;
+    })
+        .map(function (theImport) { return (0, exports.renderImport)({ theImport: theImport, target: target, asyncComponentImports: asyncComponentImports }); })
+        .join('\n');
+};
+exports.renderImports = renderImports;
+var renderPreComponent = function (_a) {
+    var component = _a.component, target = _a.target, _b = _a.asyncComponentImports, asyncComponentImports = _b === void 0 ? false : _b;
+    return "\n    ".concat((0, exports.renderImports)({
+        imports: component.imports,
+        target: target,
+        asyncComponentImports: asyncComponentImports,
+    }), "\n    ").concat((0, exports.renderExportAndLocal)(component), "\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;
+var renderExportAndLocal = function (component) {
+    return Object.keys(component.exports || {})
+        .map(function (key) { return component.exports[key].code; })
+        .join('\n');
+};
+exports.renderExportAndLocal = renderExportAndLocal;

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

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

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var render_imports_1 = require("./render-imports");
+describe('renderImport', function () {
+    test('Adds correct extension to component import', function () {
+        var data = [
+            {
+                imports: { RenderBlocks: 'default' },
+                path: '../render-blocks.lite',
+            },
+        ];
+        var output = (0, render_imports_1.renderImport)({
+            theImport: data[0],
+            target: 'vue',
+            asyncComponentImports: false,
+        });
+        expect(output).toMatchSnapshot();
+    });
+});

package/dist/src/helpers/replace-idenifiers.js

@@ -12,11 +12,8 @@ var replaceIdentifiers = function (code, from, to) {
                 core_1.types.isOptionalMemberExpression(path.parent)) &&
                 path.parent.property === path.node) &&
                 // This is no the function name - like `foo` in `function foo() {}`
-                !(core_1.types.isFunctionDeclaration(path.parent) &&
-                    path.parent.id === path.node) &&
-                (Array.isArray(from)
-                    ? from.includes(path.node.name)
-                    : path.node.name === from)) {
+                !(core_1.types.isFunctionDeclaration(path.parent) && path.parent.id === path.node) &&
+                (Array.isArray(from) ? from.includes(path.node.name) : path.node.name === from)) {
                 path.replaceWith(core_1.types.identifier(typeof to === 'string' ? to : to(path.node.name)));
             }
         },

package/dist/src/helpers/strip-state-and-props-refs.d.ts

@@ -4,6 +4,7 @@ export declare type StripStateAndPropsRefsOptions = {
     includeState?: boolean;
     contextVars?: string[];
     outputVars?: string[];
+    context?: string;
 };
 /**
  * Remove state. and props. from expressions, e.g.
@@ -13,4 +14,4 @@ export declare type StripStateAndPropsRefsOptions = {
  *
  * @todo proper ref replacement with babel
  */
-export declare const stripStateAndPropsRefs: (code?: string | undefined, options?: StripStateAndPropsRefsOptions) => string;
+export declare const stripStateAndPropsRefs: (code?: string, options?: StripStateAndPropsRefsOptions) => string;

package/dist/src/helpers/strip-state-and-props-refs.js

@@ -15,18 +15,19 @@ var stripStateAndPropsRefs = function (code, options) {
     var replacer = options.replaceWith || '';
     var contextVars = (options === null || options === void 0 ? void 0 : options.contextVars) || [];
     var outputVars = (options === null || options === void 0 ? void 0 : options.outputVars) || [];
+    var context = (options === null || options === void 0 ? void 0 : options.context) || 'this.';
     if (contextVars.length) {
         contextVars.forEach(function (_var) {
             newCode = newCode.replace(
             // determine expression edge cases
-            new RegExp('( |;|(\\())' + _var, 'g'), '$1this.' + _var);
+            new RegExp('(^|\\n|\\r| |;|\\(|\\[|!)' + _var + '(\\?\\.|\\.|\\(| |;|\\)|$)', 'g'), '$1' + context + _var + '$2');
         });
     }
     if (outputVars.length) {
         outputVars.forEach(function (_var) {
             // determine expression edge cases onMessage( to this.onMessage.emit(
             var regexp = '( |;|\\()(props\\.?)' + _var + '\\(';
-            var replacer = '$1this.' + _var + '.emit(';
+            var replacer = '$1' + context + _var + '.emit(';
             newCode = newCode.replace(new RegExp(regexp, 'g'), replacer);
         });
     }
@@ -35,9 +36,7 @@ var stripStateAndPropsRefs = function (code, options) {
             newCode = newCode.replace(/props\./g, replacer);
         }
         else {
-            newCode = newCode.replace(/props\.([\$a-z0-9_]+)/gi, function (memo, name) {
-                return replacer(name);
-            });
+            newCode = newCode.replace(/props\.([\$a-z0-9_]+)/gi, function (memo, name) { return replacer(name); });
         }
         // TODO: webcomponent edge-case
         if (/el\.this\.props/.test(newCode)) {
@@ -49,9 +48,7 @@ var stripStateAndPropsRefs = function (code, options) {
             newCode = newCode.replace(/state\./g, replacer);
         }
         else {
-            newCode = newCode.replace(/state\.([\$a-z0-9_]+)/gi, function (memo, name) {
-                return replacer(name);
-            });
+            newCode = newCode.replace(/state\.([\$a-z0-9_]+)/gi, function (memo, name) { return replacer(name); });
         }
     }
     return newCode;

package/dist/src/helpers/styles/collect-css.d.ts

@@ -0,0 +1,6 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+declare type CollectStyleOptions = {
+    prefix?: string;
+};
+export declare const collectCss: (json: MitosisComponent, options?: CollectStyleOptions) => string;
+export {};

package/dist/src/helpers/styles/collect-css.js

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collectCss = void 0;
+var traverse_1 = __importDefault(require("traverse"));
+var dash_case_1 = require("../dash-case");
+var is_mitosis_node_1 = require("../is-mitosis-node");
+var object_hash_1 = __importDefault(require("object-hash"));
+var helpers_1 = require("./helpers");
+var trimClassStr = function (classStr) { return classStr.trim().replace(/\s{2,}/g, ' '); };
+var updateClassForNode = function (item, className) {
+    if (item.bindings.class) {
+        // combine className with existing binding. We use single quotes because in Vue, bindings are wrapped in double quotes
+        // e.g. <div :class="_classStringToObject(this.className + 'div-21azgz5avex')" />
+        item.bindings.class.code = trimClassStr("".concat(item.bindings.class.code, " + '").concat(className, "'"));
+    }
+    else {
+        item.properties.class = trimClassStr("".concat(item.properties.class || '', " ").concat(className));
+    }
+};
+var collectStyles = function (json, options) {
+    if (options === void 0) { options = {}; }
+    var styleMap = {};
+    var componentIndexes = {};
+    var componentHashes = {};
+    (0, traverse_1.default)(json).forEach(function (item) {
+        var _a;
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+            if ((0, helpers_1.nodeHasStyles)(item)) {
+                var value = (0, helpers_1.parseCssObject)((_a = item.bindings.css) === null || _a === void 0 ? void 0 : _a.code);
+                delete item.bindings.css;
+                var componentName = item.properties.$name
+                    ? (0, dash_case_1.dashCase)(item.properties.$name)
+                    : /^h\d$/.test(item.name || '') // don't dashcase h1 into h-1
+                        ? item.name
+                        : (0, dash_case_1.dashCase)(item.name || 'div');
+                var classNameWPrefix = "".concat(componentName).concat(options.prefix ? "-".concat(options.prefix) : '');
+                var stylesHash = (0, object_hash_1.default)(value);
+                if (componentHashes[componentName] === stylesHash) {
+                    var className_1 = classNameWPrefix;
+                    updateClassForNode(item, className_1);
+                    return;
+                }
+                if (!componentHashes[componentName]) {
+                    componentHashes[componentName] = stylesHash;
+                }
+                var index = (componentIndexes[componentName] =
+                    (componentIndexes[componentName] || 0) + 1);
+                var className = "".concat(classNameWPrefix).concat(index === 1 ? '' : "-".concat(index));
+                updateClassForNode(item, className);
+                styleMap[className] = value;
+            }
+            delete item.bindings.css;
+        }
+    });
+    return styleMap;
+};
+var collectCss = function (json, options) {
+    if (options === void 0) { options = {}; }
+    var styles = collectStyles(json, options);
+    // TODO create and use a root selector
+    return classStyleMapToCss(styles);
+};
+exports.collectCss = collectCss;
+var classStyleMapToCss = function (map) {
+    var str = '';
+    for (var key in map) {
+        var styles = (0, helpers_1.getStylesOnly)(map[key]);
+        str += ".".concat(key, " { ").concat((0, helpers_1.styleMapToCss)(styles), " }");
+        var nestedSelectors = (0, helpers_1.getNestedSelectors)(map[key]);
+        for (var nestedSelector in nestedSelectors) {
+            var value = nestedSelectors[nestedSelector];
+            if (nestedSelector.startsWith('@')) {
+                str += "".concat(nestedSelector, " { .").concat(key, " { ").concat((0, helpers_1.styleMapToCss)(value), " } }");
+            }
+            else {
+                var useSelector = nestedSelector.includes('&')
+                    ? nestedSelector.replace(/&/g, ".".concat(key))
+                    : ".".concat(key, " ").concat(nestedSelector);
+                str += "".concat(useSelector, " { ").concat((0, helpers_1.styleMapToCss)(value), " }");
+            }
+        }
+    }
+    return str;
+};

package/dist/src/helpers/styles/collect-css.test.d.ts

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

package/dist/src/helpers/styles/collect-css.test.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var collect_css_1 = require("./collect-css");
+var jsx_1 = require("../../parsers/jsx");
+var classRaw = require('../../__tests__/data/styles/class.raw');
+var classState = require('../../__tests__/data/styles/classState.raw');
+describe('Styles', function () {
+    test('class property and CSS are merged', function () {
+        var component = (0, jsx_1.parseJsx)(classRaw);
+        var output = (0, collect_css_1.collectCss)(component);
+        expect({ component: component, output: output }).toMatchSnapshot();
+    });
+    test('class binding and CSS are merged', function () {
+        var component = (0, jsx_1.parseJsx)(classState);
+        var output = (0, collect_css_1.collectCss)(component);
+        expect({ component: component, output: output }).toMatchSnapshot();
+    });
+});

package/dist/src/helpers/styles/collect-styled-components.d.ts

@@ -0,0 +1,2 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+export declare const collectStyledComponents: (json: MitosisComponent) => string;

package/dist/src/helpers/styles/collect-styled-components.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collectStyledComponents = void 0;
+var lodash_1 = require("lodash");
+var traverse_1 = __importDefault(require("traverse"));
+var capitalize_1 = require("../capitalize");
+var is_mitosis_node_1 = require("../is-mitosis-node");
+var is_upper_case_1 = require("../is-upper-case");
+var object_hash_1 = __importDefault(require("object-hash"));
+var helpers_1 = require("./helpers");
+var collectStyledComponents = function (json) {
+    var styledComponentsCode = '';
+    var componentIndexes = {};
+    var componentHashes = {};
+    (0, traverse_1.default)(json).forEach(function (item) {
+        var _a;
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+            if ((0, helpers_1.nodeHasStyles)(item)) {
+                var value = (0, helpers_1.parseCssObject)((_a = item.bindings.css) === null || _a === void 0 ? void 0 : _a.code);
+                delete item.bindings.css;
+                var normalizedNameProperty = item.properties.$name
+                    ? (0, capitalize_1.capitalize)((0, lodash_1.camelCase)(item.properties.$name.replace(/[^a-z]/gi, '')))
+                    : null;
+                var componentName = normalizedNameProperty
+                    ? normalizedNameProperty
+                    : /^h\d$/.test(item.name || '')
+                        ? item.name
+                        : (0, capitalize_1.capitalize)((0, lodash_1.camelCase)(item.name || 'div'));
+                var index = (componentIndexes[componentName] =
+                    (componentIndexes[componentName] || 0) + 1);
+                var className = "".concat(componentName).concat(componentName !== item.name && index === 1 ? '' : index);
+                var str = '';
+                var styles = (0, helpers_1.getStylesOnly)(value);
+                var stylesHash = (0, object_hash_1.default)(styles);
+                if (stylesHash === componentHashes[componentName]) {
+                    return;
+                }
+                if (!componentHashes[componentName]) {
+                    componentHashes[componentName] = stylesHash;
+                }
+                str += "".concat((0, helpers_1.styleMapToCss)(styles), "\n");
+                var nestedSelectors = (0, helpers_1.getNestedSelectors)(value);
+                for (var nestedSelector in nestedSelectors) {
+                    var value_1 = nestedSelectors[nestedSelector];
+                    str += "".concat(nestedSelector, " { ").concat((0, helpers_1.styleMapToCss)(value_1), " }");
+                }
+                var prefix = (0, is_upper_case_1.isUpperCase)(item.name[0])
+                    ? "styled(".concat(item.name, ")`")
+                    : "styled.".concat(item.name, "`");
+                item.name = className;
+                styledComponentsCode += "\n          const ".concat(className, " = ").concat(prefix).concat(str, "`\n        ");
+            }
+            delete item.bindings.css;
+        }
+    });
+    return styledComponentsCode;
+};
+exports.collectStyledComponents = collectStyledComponents;

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

@@ -0,0 +1,30 @@
+/// <reference types="lodash" />
+import * as CSS from 'csstype';
+import { MitosisNode } from '../../types/mitosis-node';
+import { MitosisComponent } from '../../types/mitosis-component';
+export declare const nodeHasStyles: (node: MitosisNode) => boolean;
+export declare const hasStyles: (component: MitosisComponent) => boolean;
+/**
+ * e.g.:
+ * {
+ *  display: 'none',
+ *  '@media (max-width: 500px)': {
+ *    '& .sub-class': {
+ *      display: 'block'
+ *    }
+ *  }
+ * }
+ */
+export declare type StyleMap = {
+    [className: string]: CSS.Properties | StyleMap;
+};
+export declare const getNestedSelectors: (map: StyleMap) => import("lodash").Dictionary<CSS.Properties<0 | (string & {}), string & {}> | StyleMap>;
+export declare const getStylesOnly: (map: StyleMap) => import("lodash").Dictionary<CSS.Properties<0 | (string & {}), string & {}> | StyleMap>;
+/**
+ * { 'my-class': { display: 'block', '&.foo': { display: 'none' } }}
+ */
+export declare type ClassStyleMap = {
+    [key: string]: StyleMap;
+};
+export declare const parseCssObject: (css: string) => any;
+export declare const styleMapToCss: (map: StyleMap) => string;

package/dist/src/helpers/styles/helpers.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styleMapToCss = exports.parseCssObject = exports.getStylesOnly = exports.getNestedSelectors = exports.hasStyles = exports.nodeHasStyles = void 0;
+var traverse_1 = __importDefault(require("traverse"));
+var is_mitosis_node_1 = require("../is-mitosis-node");
+var json5_1 = __importDefault(require("json5"));
+var lodash_1 = require("lodash");
+var dash_case_1 = require("../dash-case");
+var nodeHasStyles = function (node) {
+    var _a;
+    return Boolean(typeof ((_a = node.bindings.css) === null || _a === void 0 ? void 0 : _a.code) === 'string' && node.bindings.css.code.trim().length > 6);
+};
+exports.nodeHasStyles = nodeHasStyles;
+var hasStyles = function (component) {
+    var hasStyles = false;
+    (0, traverse_1.default)(component).forEach(function (item) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+            if ((0, exports.nodeHasStyles)(item)) {
+                hasStyles = true;
+                this.stop();
+            }
+        }
+    });
+    return hasStyles;
+};
+exports.hasStyles = hasStyles;
+var getNestedSelectors = function (map) {
+    return (0, lodash_1.pickBy)(map, function (value) { return typeof value === 'object'; });
+};
+exports.getNestedSelectors = getNestedSelectors;
+var getStylesOnly = function (map) {
+    return (0, lodash_1.pickBy)(map, function (value) { return typeof value === 'string'; });
+};
+exports.getStylesOnly = getStylesOnly;
+var parseCssObject = function (css) {
+    try {
+        return json5_1.default.parse(css);
+    }
+    catch (e) {
+        console.warn('Could not parse CSS object', css);
+        throw e;
+    }
+};
+exports.parseCssObject = parseCssObject;
+var styleMapToCss = function (map) {
+    var str = '';
+    for (var key in map) {
+        var value = map[key];
+        if (typeof value === 'string') {
+            str += "\n".concat((0, dash_case_1.dashCase)(key), ": ").concat(value, ";");
+        }
+        else {
+            // TODO: do nothing
+        }
+    }
+    return str;
+};
+exports.styleMapToCss = styleMapToCss;

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

@@ -0,0 +1,2 @@
+export declare type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;
+export declare type OmitObj<T, U> = U extends T ? Omit<T, keyof U> : never;

package/dist/src/helpers/typescript.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/index.d.ts

@@ -1,7 +1,8 @@
 export * from './flow';
 export declare type Context<T> = {};
-export declare const useState: <T>(obj: T) => T;
-export declare const useRef: () => any;
+export declare const useStore: <T>(obj: T) => T;
+export declare const useState: <T>(obj: T) => [T, (value: T) => void];
+export declare const useRef: <T>(obj?: void | T | null | undefined) => T;
 export declare const useContext: <T = {
     [key: string]: any;
 }>(key: Context<T>) => T;
@@ -12,13 +13,13 @@ 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 onUpdate: (fn: () => any, deps?: any[]) => any;
 export declare const onCreate: (fn: () => any) => any;
 export declare const onInit: (fn: () => any) => any;
 export declare const onUnMount: (fn: () => any) => any;
 export declare const useDynamicTag: (fn: () => any) => any;
 export declare const onError: (fn: () => any) => any;
-export declare const useMetadata: (obj: object) => null;
+export declare const useMetadata: (obj: object) => any;
 export * from './parsers/jsx';
 export * from './parsers/builder';
 export * from './parsers/angular';
@@ -27,6 +28,7 @@ export * from './parsers/context';
 export * from './generators/vue';
 export * from './generators/angular';
 export * from './generators/context/react';
+export * from './generators/context/qwik';
 export * from './generators/context/solid';
 export * from './generators/context/vue';
 export * from './generators/context/svelte';
@@ -48,6 +50,7 @@ export * from './helpers/is-mitosis-node';
 export * from './types/mitosis-node';
 export * from './types/mitosis-component';
 export * from './types/config';
+export * from './types/transpiler';
 export * from './plugins/compile-away-builder-components';
 export * from './plugins/compile-away-components';
 export * from './plugins/map-styles';