@builder.io/mitosis 0.0.48 → 0.0.49

package/dist/src/helpers/create-jsx-lite-component.js

@@ -0,0 +1,16 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createJSXLiteComponent = void 0;
+var createJSXLiteComponent = function (options) { return (__assign({ '@type': '@jsx-lite/component', imports: [], meta: {}, state: {}, children: [], hooks: {}, context: { get: {}, set: {} }, name: (options === null || options === void 0 ? void 0 : options.name) || 'MyComponent', subComponents: [] }, options)); };
+exports.createJSXLiteComponent = createJSXLiteComponent;

package/dist/src/helpers/create-jsx-lite-context.d.ts

@@ -0,0 +1,4 @@
+import { JSXLiteContext } from '../types/jsx-lite-context';
+export declare function createJsxLiteContext(options: Partial<JSXLiteContext> & {
+    name: string;
+}): JSXLiteContext;

package/dist/src/helpers/create-jsx-lite-context.js

@@ -0,0 +1,18 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createJsxLiteContext = void 0;
+function createJsxLiteContext(options) {
+    return __assign({ '@type': '@jsx-lite/context', value: {} }, options);
+}
+exports.createJsxLiteContext = createJsxLiteContext;

package/dist/src/helpers/create-jsx-lite-node.d.ts

@@ -0,0 +1,2 @@
+import { JSXLiteNode } from '../types/jsx-lite-node';
+export declare const createJSXLiteNode: (options: Partial<JSXLiteNode>) => JSXLiteNode;

package/dist/src/helpers/create-jsx-lite-node.js

@@ -0,0 +1,16 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createJSXLiteNode = void 0;
+var createJSXLiteNode = function (options) { return (__assign({ '@type': '@jsx-lite/node', name: 'div', meta: {}, properties: {}, bindings: {}, children: [] }, options)); };
+exports.createJSXLiteNode = createJSXLiteNode;

package/dist/src/helpers/is-jsx-lite-node.d.ts

@@ -0,0 +1,2 @@
+import { JSXLiteNode } from '../types/jsx-lite-node';
+export declare const isJsxLiteNode: (thing: unknown) => thing is JSXLiteNode;

package/dist/src/helpers/is-jsx-lite-node.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isJsxLiteNode = void 0;
+var isJsxLiteNode = function (thing) {
+    return Boolean(thing && thing['@type'] === '@jsx-lite/node');
+};
+exports.isJsxLiteNode = isJsxLiteNode;

package/dist/src/helpers/map-refs.js

@@ -44,9 +44,10 @@ 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, _a = Object.keys(component.state); _i < _a.length; _i++) {
-        var key = _a[_i];
+    for (var _i = 0, _b = Object.keys(component.state); _i < _b.length; _i++) {
+        var key = _b[_i];
         var value = component.state[key];
         if (typeof value === 'string') {
             if (value.startsWith(method_literal_prefix_1.methodLiteralPrefix)) {
@@ -75,11 +76,11 @@ var mapRefs = function (component, mapper) {
             }
         }
     });
-    for (var _b = 0, _c = Object.keys(component.hooks); _b < _c.length; _b++) {
-        var key = _c[_b];
-        var hookCode = component.hooks[key];
+    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] = replaceRefsInString(hookCode, refs, mapper);
+            component.hooks[key].code = replaceRefsInString(hookCode, refs, mapper);
         }
     }
 };

package/dist/src/helpers/process-http-requests.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.processHttpRequests = void 0;
 function processHttpRequests(json) {
-    var _a;
+    var _a, _b;
     var httpRequests = (_a = json.meta
         .useMetadata) === null || _a === void 0 ? void 0 : _a.httpRequests;
-    var onMount = json.hooks.onMount || '';
+    var onMount = ((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? json.hooks.onMount : { code: '' };
     if (httpRequests) {
         for (var key in httpRequests) {
             if (!json.state[key]) {
@@ -14,7 +14,7 @@ function processHttpRequests(json) {
             var value = httpRequests[key];
             // TODO: unravel our proxy. aka parse out methods, header, etc
             // and remove our proxy from being used anymore
-            onMount += "\n        fetch(\"".concat(value, "\").then(res => res.json()).then(result => {\n          state.").concat(key, " = result;\n        })\n      ");
+            onMount.code += "\n        fetch(\"".concat(value, "\").then(res => res.json()).then(result => {\n          state.").concat(key, " = result;\n        })\n      ");
         }
     }
     json.hooks.onMount = onMount;

package/dist/src/helpers/process-tag-references.js

@@ -13,14 +13,15 @@ function getRefName(path) {
 function processTagReferences(json) {
     var namesFound = new Set();
     (0, traverse_1.default)(json).forEach(function (el) {
+        var _a;
         if ((0, is_mitosis_node_1.isMitosisNode)(el)) {
             if (el.name.includes('.')) {
                 if (!namesFound.has(el.name)) {
                     namesFound.add(el.name);
-                    if (typeof json.hooks.init !== 'string') {
-                        json.hooks.init = '';
+                    if (typeof ((_a = json.hooks.init) === null || _a === void 0 ? void 0 : _a.code) !== 'string') {
+                        json.hooks.init = { code: '' };
                     }
-                    json.hooks.init += "\n            const ".concat(getRefName(el.name), " = ").concat(el.name, ";\n          ");
+                    json.hooks.init.code += "\n            const ".concat(getRefName(el.name), " = ").concat(el.name, ";\n          ");
                 }
                 el.name = getRefName(el.name);
             }

package/dist/src/index.d.ts

@@ -9,10 +9,10 @@ export declare const setContext: (key: any, value: {
     [key: string]: any;
 }) => any;
 export declare const onMount: (fn: () => any) => any;
+export declare const onUpdate: (fn: () => any, deps?: any[] | undefined) => 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 afterUnmount: (fn: () => any) => any;
 export declare const useDynamicTag: (fn: () => any) => any;
 export declare const onError: (fn: () => any) => any;
 export declare const useMetadata: (obj: object) => null;
@@ -30,6 +30,7 @@ export * from './generators/solid';
 export * from './generators/liquid';
 export * from './generators/builder';
 export * from './generators/qwik/index';
+export * from './symbols/symbol-processor';
 export * from './generators/html';
 export * from './generators/svelte';
 export * from './generators/mitosis';

package/dist/src/index.js

@@ -10,7 +10,7 @@ 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.afterUnmount = exports.onUnMount = exports.onInit = exports.onCreate = 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 = void 0;
 __exportStar(require("./flow"), exports);
 // These compile away
 var useState = function (obj) { return obj; };
@@ -27,14 +27,14 @@ var setContext = function (key, value) {
 exports.setContext = setContext;
 var onMount = function (fn) { return null; };
 exports.onMount = onMount;
+var onUpdate = function (fn, deps) { return null; };
+exports.onUpdate = onUpdate;
 var onCreate = function (fn) { return null; };
 exports.onCreate = onCreate;
 var onInit = function (fn) { return null; };
 exports.onInit = onInit;
 var onUnMount = function (fn) { return null; };
 exports.onUnMount = onUnMount;
-var afterUnmount = function (fn) { return null; };
-exports.afterUnmount = afterUnmount;
 var useDynamicTag = function (fn) { return null; };
 exports.useDynamicTag = useDynamicTag;
 var onError = function (fn) { return null; };
@@ -55,6 +55,7 @@ __exportStar(require("./generators/solid"), exports);
 __exportStar(require("./generators/liquid"), exports);
 __exportStar(require("./generators/builder"), exports);
 __exportStar(require("./generators/qwik/index"), exports);
+__exportStar(require("./symbols/symbol-processor"), exports);
 __exportStar(require("./generators/html"), exports);
 __exportStar(require("./generators/svelte"), exports);
 __exportStar(require("./generators/mitosis"), exports);

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

@@ -26,6 +26,8 @@ export declare function extractStateHook(code: string): {
     code: string;
     state: any;
 };
+export declare function convertExportDefaultToReturn(code: string): string;
+export declare const createBuilderElement: (options?: Partial<BuilderElement> | undefined) => BuilderElement;
 export declare const isBuilderElement: (el: unknown) => el is BuilderElement;
 export declare const builderContentToMitosisComponent: (builderContent: BuilderContent, options?: BuilderToMitosisOptions) => {
     subComponents: {
@@ -51,11 +53,30 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
             };
         };
         hooks: {
-            init?: string | undefined;
-            onMount?: string | undefined;
-            onUnMount?: string | undefined;
-            preComponent?: string | undefined;
-            postComponent?: string | undefined;
+            init?: {
+                code: string;
+                deps?: string | undefined;
+            } | undefined;
+            onMount?: {
+                code: string;
+                deps?: string | undefined;
+            } | undefined;
+            onUnMount?: {
+                code: string;
+                deps?: string | undefined;
+            } | undefined;
+            preComponent?: {
+                code: string;
+                deps?: string | undefined;
+            } | undefined;
+            postComponent?: {
+                code: string;
+                deps?: string | undefined;
+            } | undefined;
+            onUpdate?: {
+                code: string;
+                deps?: string | undefined;
+            } | undefined;
         };
         children: MitosisNode[];
         subComponents: import("..").MitosisComponent[];
@@ -82,11 +103,30 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
         };
     };
     hooks: {
-        init?: string | undefined;
-        onMount?: string | undefined;
-        onUnMount?: string | undefined;
-        preComponent?: string | undefined;
-        postComponent?: string | undefined;
+        init?: {
+            code: string;
+            deps?: string | undefined;
+        } | undefined;
+        onMount?: {
+            code: string;
+            deps?: string | undefined;
+        } | undefined;
+        onUnMount?: {
+            code: string;
+            deps?: string | undefined;
+        } | undefined;
+        preComponent?: {
+            code: string;
+            deps?: string | undefined;
+        } | undefined;
+        postComponent?: {
+            code: string;
+            deps?: string | undefined;
+        } | undefined;
+        onUpdate?: {
+            code: string;
+            deps?: string | undefined;
+        } | undefined;
     };
     children: MitosisNode[];
 };

package/dist/src/parsers/builder.js

@@ -33,7 +33,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.builderContentToMitosisComponent = exports.isBuilderElement = exports.extractStateHook = exports.builderElementToMitosisNode = exports.symbolBlocksAsChildren = void 0;
+exports.builderContentToMitosisComponent = exports.isBuilderElement = exports.createBuilderElement = exports.convertExportDefaultToReturn = exports.extractStateHook = exports.builderElementToMitosisNode = exports.symbolBlocksAsChildren = void 0;
 var babel = __importStar(require("@babel/core"));
 var generator_1 = __importDefault(require("@babel/generator"));
 var json5_1 = __importDefault(require("json5"));
@@ -533,7 +533,7 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
 exports.builderElementToMitosisNode = builderElementToMitosisNode;
 var getHooks = function (content) {
     var _a, _b;
-    var code = ((_a = content.data) === null || _a === void 0 ? void 0 : _a.tsCode) || ((_b = content.data) === null || _b === void 0 ? void 0 : _b.jsCode) || '';
+    var code = convertExportDefaultToReturn(((_a = content.data) === null || _a === void 0 ? void 0 : _a.tsCode) || ((_b = content.data) === null || _b === void 0 ? void 0 : _b.jsCode) || '');
     try {
         return (0, jsx_1.parseJsx)("\n    export default function TemporaryComponent() {\n      ".concat(
         // Mitosis parser looks for useState to be a variable assignment,
@@ -598,6 +598,29 @@ function extractStateHook(code) {
     return { code: newCode, state: state };
 }
 exports.extractStateHook = extractStateHook;
+function convertExportDefaultToReturn(code) {
+    var types = babel.types;
+    var ast = babel.parse(code, {
+        presets: [[tsPreset, { isTSX: true, allExtensions: true }]],
+        plugins: [[decorators, { legacy: true }], jsxPlugin],
+    });
+    var body = types.isFile(ast)
+        ? ast.program.body
+        : types.isProgram(ast)
+            ? ast.body
+            : [];
+    var newBody = body.slice();
+    for (var i = 0; i < body.length; i++) {
+        var statement = body[i];
+        if (types.isExportDefaultDeclaration(statement)) {
+            if (types.isCallExpression(statement.declaration)) {
+                newBody[i] = types.returnStatement(statement.declaration);
+            }
+        }
+    }
+    return (0, generator_1.default)(types.program(newBody)).code || '';
+}
+exports.convertExportDefaultToReturn = convertExportDefaultToReturn;
 // TODO: maybe this should be part of the builder -> Mitosis part
 function extractSymbols(json) {
     var _a, _b, _c, _d;
@@ -637,10 +660,15 @@ function extractSymbols(json) {
         subComponents: subComponents,
     };
 }
+var createBuilderElement = function (options) { return (__assign({ '@type': '@builder.io/sdk:Element', id: 'builder-' +
+        Math.random()
+            .toString(36)
+            .split('.')[1] }, options)); };
+exports.createBuilderElement = createBuilderElement;
 var isBuilderElement = function (el) { var _a; return ((_a = el) === null || _a === void 0 ? void 0 : _a['@type']) === '@builder.io/sdk:Element'; };
 exports.isBuilderElement = isBuilderElement;
 var builderContentPartToMitosisComponent = function (builderContent, options) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     if (options === void 0) { options = {}; }
     builderContent = (0, fast_clone_1.fastClone)(builderContent);
     (0, traverse_1.default)(builderContent).forEach(function (elem) {
@@ -669,7 +697,8 @@ var builderContentPartToMitosisComponent = function (builderContent, options) {
             }
         }
     });
-    var _f = extractStateHook(((_a = builderContent === null || builderContent === void 0 ? void 0 : builderContent.data) === null || _a === void 0 ? void 0 : _a.tsCode) || ((_b = builderContent === null || builderContent === void 0 ? void 0 : builderContent.data) === null || _b === void 0 ? void 0 : _b.jsCode) || ''), state = _f.state, customCode = _f.code;
+    var _g = extractStateHook(((_a = builderContent === null || builderContent === void 0 ? void 0 : builderContent.data) === null || _a === void 0 ? void 0 : _a.tsCode) || ((_b = builderContent === null || builderContent === void 0 ? void 0 : builderContent.data) === null || _b === void 0 ? void 0 : _b.jsCode) || ''), state = _g.state, code = _g.code;
+    var customCode = convertExportDefaultToReturn(code);
     var parsed = getHooks(builderContent);
     var componentJson = (0, create_mitosis_component_1.createMitosisComponent)({
         meta: {
@@ -678,10 +707,11 @@ var builderContentPartToMitosisComponent = function (builderContent, options) {
             },
         },
         state: (parsed === null || parsed === void 0 ? void 0 : parsed.state) || __assign(__assign({}, state), (_d = builderContent.data) === null || _d === void 0 ? void 0 : _d.state),
-        hooks: __assign({}, (((parsed === null || parsed === void 0 ? void 0 : parsed.hooks.onMount) || customCode) && {
-            onMount: (parsed === null || parsed === void 0 ? void 0 : parsed.hooks.onMount) || customCode,
+        hooks: __assign({}, ((((_e = parsed === null || parsed === void 0 ? void 0 : parsed.hooks.onMount) === null || _e === void 0 ? void 0 : _e.code) ||
+            (customCode && { code: customCode })) && {
+            onMount: (parsed === null || parsed === void 0 ? void 0 : parsed.hooks.onMount) || { code: customCode },
         })),
-        children: (((_e = builderContent.data) === null || _e === void 0 ? void 0 : _e.blocks) || [])
+        children: (((_f = builderContent.data) === null || _f === void 0 ? void 0 : _f.blocks) || [])
             .filter(function (item) {
             var _a, _b;
             if ((_b = (_a = item.properties) === null || _a === void 0 ? void 0 : _a.src) === null || _b === void 0 ? void 0 : _b.includes('/api/v1/pixel')) {

package/dist/src/parsers/jsx.js

@@ -191,13 +191,51 @@ var componentFunctionToJson = function (node, context) {
                         var firstArg = expression.arguments[0];
                         if (types.isFunctionExpression(firstArg) ||
                             types.isArrowFunctionExpression(firstArg)) {
-                            hooks.onMount = (0, generator_1.default)(firstArg.body)
+                            var code = (0, generator_1.default)(firstArg.body)
                                 .code.trim()
-                                // Remove abtrary block wrapping if any
+                                // Remove arbitrary block wrapping if any
                                 // AKA
                                 //  { console.log('hi') } -> console.log('hi')
                                 .replace(/^{/, '')
                                 .replace(/}$/, '');
+                            hooks.onMount = { code: code };
+                        }
+                    }
+                    else if (expression.callee.name === 'onUpdate') {
+                        var firstArg = expression.arguments[0];
+                        var secondArg = expression.arguments[1];
+                        if (types.isFunctionExpression(firstArg) ||
+                            types.isArrowFunctionExpression(firstArg)) {
+                            var code = (0, generator_1.default)(firstArg.body)
+                                .code.trim()
+                                // Remove arbitrary block wrapping if any
+                                // AKA
+                                //  { console.log('hi') } -> console.log('hi')
+                                .replace(/^{/, '')
+                                .replace(/}$/, '');
+                            if (!secondArg ||
+                                (types.isArrayExpression(secondArg) &&
+                                    secondArg.elements.length > 0)) {
+                                var depsCode = secondArg ? (0, generator_1.default)(secondArg).code : '';
+                                hooks.onUpdate = {
+                                    code: code,
+                                };
+                                hooks.onUpdate.deps = depsCode;
+                            }
+                        }
+                    }
+                    else if (expression.callee.name === 'onUnMount') {
+                        var firstArg = expression.arguments[0];
+                        if (types.isFunctionExpression(firstArg) ||
+                            types.isArrowFunctionExpression(firstArg)) {
+                            var code = (0, generator_1.default)(firstArg.body)
+                                .code.trim()
+                                // Remove arbitrary block wrapping if any
+                                // AKA
+                                //  { console.log('hi') } -> console.log('hi')
+                                .replace(/^{/, '')
+                                .replace(/}$/, '');
+                            hooks.onUnMount = { code: code };
                         }
                     }
                 }
@@ -605,7 +643,9 @@ function parseJsx(jsx, options) {
                             .map(function (node) { return "export default ".concat((0, generator_1.default)(node).code); });
                         cutStatements = collectMetadata(cutStatements, context.builder.component, useOptions);
                         // TODO: support multiple? e.g. for others to add imports?
-                        context.builder.component.hooks.preComponent = (0, generator_1.default)(types.program(cutStatements)).code;
+                        context.builder.component.hooks.preComponent = {
+                            code: (0, generator_1.default)(types.program(cutStatements)).code,
+                        };
                         path.replaceWith(types.program(keepStatements));
                     },
                     FunctionDeclaration: function (path, context) {

package/dist/src/parsers/liquid.js

@@ -91,6 +91,7 @@ var fast_clone_1 = require("../helpers/fast-clone");
 var liquid_1 = require("../generators/liquid");
 var map_to_attributes_1 = require("../helpers/map-to-attributes");
 var map_to_css_1 = require("../helpers/map-to-css");
+var __1 = require("..");
 var voidElements = new Set([
     'area',
     'base',
@@ -1250,10 +1251,9 @@ function processInnerTemplates(templates, options, priorConditions, overrideHash
         });
     });
 }
-var el = function (options) { return (__assign({ '@type': '@builder.io/sdk:Element', id: 'builder-' +
-        Math.random()
-            .toString(36)
-            .split('.')[1], meta: __assign({ importedFrom: 'liquid' }, options === null || options === void 0 ? void 0 : options.meta) }, options)); };
+var el = function (options) {
+    return (0, __1.createBuilderElement)(__assign({ meta: __assign({ importedFrom: 'liquid' }, options === null || options === void 0 ? void 0 : options.meta) }, options));
+};
 var tagRe = /\[([a-z]+)\](='([^']+)')?/;
 var tagReAll = /\[([^\]]+)\](='([^']+)')?/g;
 var parseTags = function (tag) {

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

@@ -56,15 +56,6 @@ function getComponentInputNames(componentName) {
     var componentInfo = react_1.Builder.components.find(function (item) { return item.name === componentName; });
     return ((_a = componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.inputs) === null || _a === void 0 ? void 0 : _a.map(function (item) { return item.name; })) || [];
 }
-function updateQueryParam(uri, key, value) {
-    if (uri === void 0) { uri = ''; }
-    var re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
-    var separator = uri.indexOf('?') !== -1 ? '&' : '?';
-    if (uri.match(re)) {
-        return uri.replace(re, '$1' + key + '=' + encodeURIComponent(value) + '$2');
-    }
-    return uri + separator + key + '=' + encodeURIComponent(value);
-}
 var wrapOutput = function (node, child, components) {
     var inputNames = getComponentInputNames(node.name);
     (0, exports.compileAwayBuilderComponentsFromTree)(child, components);
@@ -257,22 +248,14 @@ exports.components = {
     Image: function (node, context, components) {
         var _a = node.properties, backgroundSize = _a.backgroundSize, backgroundPosition = _a.backgroundPosition;
         var srcset = node.properties.srcset;
-        var widths = [100, 200, 400, 800, 1200, 1600, 2000];
         var aspectRatio = node.bindings.aspectRatio
             ? parseFloat(node.bindings.aspectRatio)
             : null;
         if (typeof aspectRatio === 'number' && isNaN(aspectRatio)) {
             aspectRatio = null;
         }
-        var srcSet = srcset ||
-            "".concat((node.properties.image || '').match(/builder\.io/)
-                ? widths
-                    .map(function (size) {
-                    return "".concat(updateQueryParam(node.properties.image, 'width', String(size)), " ").concat(size, "w");
-                })
-                    .concat([node.properties.image])
-                    .join(', ')
-                : '');
+        var image = node.properties.image;
+        var srcSet = srcset || generateBuilderIoSrcSet(image);
         var source = node.bindings.noWebp !== 'true' &&
             (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'source',
@@ -349,7 +332,24 @@ exports.components = {
         var imageNodes = [picture];
         imgSizer && imageNodes.push(imgSizer);
         children && imageNodes.push(children);
-        return wrapOutput(node, imageNodes, components);
+        var href = node.properties.href;
+        var hrefBinding = node.bindings.href;
+        if (href || hrefBinding) {
+            var aHref = (0, create_mitosis_node_1.createMitosisNode)({
+                name: 'a',
+                properties: {
+                    href: href,
+                },
+                bindings: {
+                    href: hrefBinding,
+                },
+                children: imageNodes,
+            });
+            return wrapOutput(node, aHref, components);
+        }
+        else {
+            return wrapOutput(node, imageNodes, components);
+        }
     },
     Video: function (node, context, components) {
         var aspectRatio = node.bindings.aspectRatio
@@ -481,6 +481,26 @@ var compileAwayBuilderComponents = function (pluginOptions) {
     }); };
 };
 exports.compileAwayBuilderComponents = compileAwayBuilderComponents;
+function updateQueryParam(uri, key, value) {
+    if (uri === void 0) { uri = ''; }
+    var re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
+    var separator = uri.indexOf('?') !== -1 ? '&' : '?';
+    if (uri.match(re)) {
+        return uri.replace(re, '$1' + key + '=' + encodeURIComponent(value) + '$2');
+    }
+    return uri + separator + key + '=' + encodeURIComponent(value);
+}
+function generateBuilderIoSrcSet(image) {
+    var isBuilderIo = !!(image || '').match(/builder\.io/);
+    return isBuilderIo
+        ? [100, 200, 400, 800, 1200, 1600, 2000]
+            .map(function (size) {
+            return "".concat(updateQueryParam(image, 'width', String(size)), " ").concat(size, "w");
+        })
+            .concat([image])
+            .join(', ')
+        : '';
+}
 function noUndefined(obj) {
     var cleanObj = {};
     for (var key in obj) {

package/dist/src/symbols/symbol-processor.d.ts

@@ -0,0 +1,18 @@
+import { BuilderContent, BuilderElement } from '@builder.io/sdk';
+import { MitosisComponent } from '../types/mitosis-component';
+export declare type SymbolHierarchy = {
+    depthFirstSymbols: BuilderElement[];
+} & {
+    [id: string]: string[];
+};
+/**
+ * Ensure every symbol in a BuilderContent tree has a unique ID.
+ * Mutates the data tree directly.
+ */
+export declare function ensureAllSymbolsHaveIds(content: BuilderContent): void;
+export declare function convertBuilderContentToSymbolHierarchy(content: BuilderContent, { collectComponentStyles, collectComponentState, }?: {
+    collectComponentStyles?: string[];
+    collectComponentState?: Record<string, any>;
+}): SymbolHierarchy;
+export declare function convertBuilderElementToMitosisComponent(element: BuilderElement): MitosisComponent | null;
+export declare function getJsxSymbolComponentName(id: string): string;