@builder.io/mitosis 0.0.56-1 → 0.0.56-101

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

@@ -88,7 +88,9 @@ exports.components = {
         }
         var omitFields = ['link', 'openInNewTab', 'text'];
         var hasLink = node.properties.link || node.bindings.link;
-        return (0, create_mitosis_node_1.createMitosisNode)(__assign(__assign({}, node), { name: hasLink ? 'a' : node.properties.$tagName || 'span', properties: __assign(__assign({}, (0, lodash_1.omit)(node.properties, omitFields)), properties), bindings: __assign(__assign({}, (0, lodash_1.omit)(node.bindings, omitFields)), bindings) }));
+        return (0, create_mitosis_node_1.createMitosisNode)(__assign(__assign({}, node), { 
+            // TODO: use 'button' tag for no link, and add `all: unset` to CSS string only then
+            name: hasLink ? 'a' : node.properties.$tagName || 'span', properties: __assign(__assign({}, (0, lodash_1.omit)(node.properties, omitFields)), properties), bindings: __assign(__assign({}, (0, lodash_1.omit)(node.bindings, omitFields)), bindings) }));
     },
     Embed: function (node, context, components) {
         return wrapOutput(node, (0, create_mitosis_node_1.createMitosisNode)({
@@ -99,7 +101,8 @@ exports.components = {
         }), components);
     },
     BuilderAccordion: function (node, context, components) {
-        var itemsJSON = node.bindings.items || '[]';
+        var _a;
+        var itemsJSON = ((_a = node.bindings.items) === null || _a === void 0 ? void 0 : _a.code) || '[]';
         var accordionItems = JSON5.parse(itemsJSON);
         var children = accordionItems.map(function (accordionItem) {
             var titleChildren = accordionItem.title.map(function (element) {
@@ -169,36 +172,41 @@ exports.components = {
         }), components);
     },
     CoreSection: function (node, context, components) {
+        var _a, _b;
         return wrapOutput(node, (0, create_mitosis_node_1.createMitosisNode)({
             name: 'section',
-            properties: __assign(__assign(__assign({}, node.properties), { $name: 'section' }), (node.bindings.lazyLoad === 'true' && {
+            properties: __assign(__assign(__assign({}, node.properties), { $name: 'section' }), (((_a = node.bindings.lazyLoad) === null || _a === void 0 ? void 0 : _a.code) === 'true' && {
                 lazyLoad: 'true',
             })),
             bindings: {
-                css: JSON.stringify({
-                    width: '100%',
-                    alignSelf: 'stretch',
-                    flexGrow: '1',
-                    boxSizing: 'border-box',
-                    maxWidth: "".concat((node.bindings.maxWidth && Number(node.bindings.maxWidth)) || 1200, "px"),
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'stretch',
-                    marginLeft: 'auto',
-                    marginRight: 'auto',
-                }),
+                css: {
+                    code: JSON.stringify({
+                        width: '100%',
+                        alignSelf: 'stretch',
+                        flexGrow: '1',
+                        boxSizing: 'border-box',
+                        maxWidth: "".concat((((_b = node.bindings.maxWidth) === null || _b === void 0 ? void 0 : _b.code) && Number(node.bindings.maxWidth.code)) || 1200, "px"),
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'stretch',
+                        marginLeft: 'auto',
+                        marginRight: 'auto',
+                    }),
+                },
             },
             children: node.children,
         }), components);
     },
     Columns: function (node, context, components) {
         var _a;
-        var columns = node.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes).map(function (item) { return ({
-            width: parseFloat(item.properties.width || item.bindings.width || '0') || 0,
-            children: item.children,
-        }); });
-        var gutterSize = (node.properties.getterSize && parseFloat(node.properties.getterSize)) ||
-            20;
+        var columns = node.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes).map(function (item) {
+            var _a;
+            return ({
+                width: parseFloat(item.properties.width || ((_a = item.bindings.width) === null || _a === void 0 ? void 0 : _a.code) || '0') || 0,
+                children: item.children,
+            });
+        });
+        var gutterSize = (node.properties.getterSize && parseFloat(node.properties.getterSize)) || 20;
         function getWidth(index) {
             return (columns[index] && columns[index].width) || 100 / columns.length;
         }
@@ -213,16 +221,18 @@ exports.components = {
                 class: 'builder-columns',
             },
             bindings: {
-                css: JSON.stringify(__assign({ display: 'flex' }, (properties.stackColumnsAt === 'never'
-                    ? {}
-                    : (_a = {},
-                        _a["@media (max-width: ".concat(properties.stackColumnsAt !== 'tablet' ? 639 : 999, "px)")] = {
-                            flexDirection: properties.reverseColumnsWhenStacked === 'true'
-                                ? 'column-reverse'
-                                : 'column',
-                            alignItems: 'stretch',
-                        },
-                        _a)))),
+                css: {
+                    code: JSON.stringify(__assign({ display: 'flex' }, (properties.stackColumnsAt === 'never'
+                        ? {}
+                        : (_a = {},
+                            _a["@media (max-width: ".concat(properties.stackColumnsAt !== 'tablet' ? 639 : 999, "px)")] = {
+                                flexDirection: properties.reverseColumnsWhenStacked === 'true'
+                                    ? 'column-reverse'
+                                    : 'column',
+                                alignItems: 'stretch',
+                            },
+                            _a)))),
+                },
             },
             children: columns.map(function (col, index) {
                 var _a;
@@ -233,14 +243,16 @@ exports.components = {
                         class: 'builder-column',
                     },
                     bindings: {
-                        css: JSON.stringify(__assign({ display: 'flex', flexDirection: 'column', alignItems: 'stretch', lineHeight: 'normal', width: "".concat(getColumnWidth(index)), marginLeft: "".concat(index === 0 ? 0 : gutterSize, "px") }, (properties.stackColumnsAt === 'never'
-                            ? {}
-                            : (_a = {},
-                                _a["@media (max-width: ".concat(properties.stackColumnsAt !== 'tablet' ? 639 : 999, "px)")] = {
-                                    width: '100%',
-                                    marginLeft: 0,
-                                },
-                                _a)))),
+                        css: {
+                            code: JSON.stringify(__assign({ display: 'flex', flexDirection: 'column', alignItems: 'stretch', lineHeight: 'normal', width: "".concat(getColumnWidth(index)), marginLeft: "".concat(index === 0 ? 0 : gutterSize, "px") }, (properties.stackColumnsAt === 'never'
+                                ? {}
+                                : (_a = {},
+                                    _a["@media (max-width: ".concat(properties.stackColumnsAt !== 'tablet' ? 639 : 999, "px)")] = {
+                                        width: '100%',
+                                        marginLeft: 0,
+                                    },
+                                    _a)))),
+                        },
                     },
                     children: col.children,
                 });
@@ -248,17 +260,18 @@ exports.components = {
         }), components);
     },
     Image: function (node, context, components) {
-        var _a = node.properties, backgroundSize = _a.backgroundSize, backgroundPosition = _a.backgroundPosition;
+        var _a, _b, _c, _d, _e, _f, _g;
+        var _h = node.properties, backgroundSize = _h.backgroundSize, backgroundPosition = _h.backgroundPosition;
         var srcset = node.properties.srcset;
-        var aspectRatio = node.bindings.aspectRatio
-            ? parseFloat(node.bindings.aspectRatio)
+        var aspectRatio = ((_a = node.bindings.aspectRatio) === null || _a === void 0 ? void 0 : _a.code)
+            ? parseFloat(node.bindings.aspectRatio.code)
             : null;
         if (typeof aspectRatio === 'number' && isNaN(aspectRatio)) {
             aspectRatio = null;
         }
         var image = node.properties.image;
         var srcSet = srcset || generateBuilderIoSrcSet(image);
-        var source = node.bindings.noWebp !== 'true' &&
+        var source = ((_b = node.bindings.noWebp) === null || _b === void 0 ? void 0 : _b.code) !== 'true' &&
             (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'source',
                 properties: {
@@ -270,24 +283,25 @@ exports.components = {
             name: 'img',
             properties: noUndefined({
                 $name: 'image',
-                loading: node.properties.lazy ? 'lazy' : undefined,
+                loading: 'lazy',
                 src: node.properties.image,
                 sizes: node.properties.sizes,
                 srcset: srcSet || null,
             }),
             bindings: noUndefined({
-                loading: node.bindings.lazy ? '"lazy"' : undefined,
-                src: node.bindings.image,
-                sizes: node.bindings.sizes,
-                css: JSON.stringify(__assign({ objectFit: backgroundSize || 'cover', objectPosition: backgroundPosition || 'cover' }, (aspectRatio
-                    ? {
-                        position: 'absolute',
-                        height: '100%',
-                        width: '100%',
-                        top: '0',
-                        left: '0',
-                    }
-                    : {}))),
+                src: ((_c = node.bindings.image) === null || _c === void 0 ? void 0 : _c.code) && { code: (_d = node.bindings.image) === null || _d === void 0 ? void 0 : _d.code },
+                sizes: ((_e = node.bindings.sizes) === null || _e === void 0 ? void 0 : _e.code) && { code: (_f = node.bindings.sizes) === null || _f === void 0 ? void 0 : _f.code },
+                css: {
+                    code: JSON.stringify(__assign({ objectFit: backgroundSize || 'cover', objectPosition: backgroundPosition || 'cover' }, (aspectRatio
+                        ? {
+                            position: 'absolute',
+                            height: '100%',
+                            width: '100%',
+                            top: '0',
+                            left: '0',
+                        }
+                        : {}))),
+                },
             }),
         });
         var picture = (0, create_mitosis_node_1.createMitosisNode)({
@@ -302,12 +316,14 @@ exports.components = {
                     class: 'builder-image-sizer',
                 },
                 bindings: {
-                    css: JSON.stringify({
-                        width: '100%',
-                        paddingTop: aspectRatio * 100 + '%',
-                        pointerEvents: 'none',
-                        fontSize: '0',
-                    }),
+                    css: {
+                        code: JSON.stringify({
+                            width: '100%',
+                            paddingTop: aspectRatio * 100 + '%',
+                            pointerEvents: 'none',
+                            fontSize: '0',
+                        }),
+                    },
                 },
             });
         var children = node.children &&
@@ -318,16 +334,18 @@ exports.components = {
                     $name: 'image-contents',
                 },
                 bindings: {
-                    css: JSON.stringify({
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'stretch',
-                        position: 'absolute',
-                        top: '0',
-                        left: '0',
-                        width: '100%',
-                        height: '100%',
-                    }),
+                    css: {
+                        code: JSON.stringify({
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'stretch',
+                            position: 'absolute',
+                            top: '0',
+                            left: '0',
+                            width: '100%',
+                            height: '100%',
+                        }),
+                    },
                 },
                 children: node.children,
             });
@@ -335,16 +353,18 @@ exports.components = {
         imgSizer && imageNodes.push(imgSizer);
         children && imageNodes.push(children);
         var href = node.properties.href;
-        var hrefBinding = node.bindings.href;
+        var hrefBinding = (_g = node.bindings.href) === null || _g === void 0 ? void 0 : _g.code;
         if (href || hrefBinding) {
             var aHref = (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'a',
                 properties: {
                     href: href,
                 },
-                bindings: {
-                    href: hrefBinding,
-                },
+                bindings: hrefBinding
+                    ? {
+                        href: { code: hrefBinding },
+                    }
+                    : undefined,
                 children: imageNodes,
             });
             return wrapOutput(node, aHref, components);
@@ -354,8 +374,9 @@ exports.components = {
         }
     },
     Video: function (node, context, components) {
-        var aspectRatio = node.bindings.aspectRatio
-            ? parseFloat(node.bindings.aspectRatio)
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var aspectRatio = ((_a = node.bindings.aspectRatio) === null || _a === void 0 ? void 0 : _a.code)
+            ? parseFloat(node.bindings.aspectRatio.code)
             : null;
         if (typeof aspectRatio === 'number' && isNaN(aspectRatio)) {
             aspectRatio = null;
@@ -374,20 +395,32 @@ exports.components = {
                 preload: node.properties.lazy ? 'none' : undefined,
             }),
             bindings: noUndefined({
-                poster: node.bindings.posterImage,
-                autoplay: node.bindings.autoPlay,
-                muted: node.bindings.muted,
-                controls: node.bindings.controls,
-                playsinline: node.bindings.playsInline,
-                loop: node.bindings.loop,
-                css: JSON.stringify({
-                    width: '100%',
-                    height: '100%',
-                    objectFit: node.properties.fit,
-                    objectPosition: node.properties.position,
-                    borderRadius: '1',
-                    position: aspectRatio ? 'absolute' : '',
-                }),
+                poster: ((_b = node.bindings.posterImage) === null || _b === void 0 ? void 0 : _b.code) && {
+                    code: (_c = node.bindings.posterImage) === null || _c === void 0 ? void 0 : _c.code,
+                },
+                autoplay: ((_d = node.bindings.autoPlay) === null || _d === void 0 ? void 0 : _d.code) && {
+                    code: (_e = node.bindings.autoPlay) === null || _e === void 0 ? void 0 : _e.code,
+                },
+                muted: ((_f = node.bindings.muted) === null || _f === void 0 ? void 0 : _f.code) && {
+                    code: (_g = node.bindings.muted) === null || _g === void 0 ? void 0 : _g.code,
+                },
+                controls: ((_h = node.bindings.controls) === null || _h === void 0 ? void 0 : _h.code) && {
+                    code: (_j = node.bindings.controls) === null || _j === void 0 ? void 0 : _j.code,
+                },
+                playsinline: ((_k = node.bindings.playsInline) === null || _k === void 0 ? void 0 : _k.code) && {
+                    code: (_l = node.bindings.playsInline) === null || _l === void 0 ? void 0 : _l.code,
+                },
+                loop: ((_m = node.bindings.loop) === null || _m === void 0 ? void 0 : _m.code) && { code: (_o = node.bindings.loop) === null || _o === void 0 ? void 0 : _o.code },
+                css: {
+                    code: JSON.stringify({
+                        width: '100%',
+                        height: '100%',
+                        objectFit: node.properties.fit,
+                        objectPosition: node.properties.position,
+                        borderRadius: '1',
+                        position: aspectRatio ? 'absolute' : '',
+                    }),
+                },
             }),
             children: [
                 (0, create_mitosis_node_1.createMitosisNode)({
@@ -396,9 +429,11 @@ exports.components = {
                         type: 'video/mp4',
                         src: node.properties.video,
                     },
-                    bindings: {
-                        src: node.bindings.video,
-                    },
+                    bindings: noUndefined({
+                        src: ((_p = node.bindings.video) === null || _p === void 0 ? void 0 : _p.code) && {
+                            code: (_q = node.bindings.video) === null || _q === void 0 ? void 0 : _q.code,
+                        },
+                    }),
                 }),
             ],
         }));
@@ -409,12 +444,14 @@ exports.components = {
                     $name: 'builder-video-sizer',
                 },
                 bindings: {
-                    css: JSON.stringify({
-                        width: '100%',
-                        paddingTop: aspectRatio * 100 + '%',
-                        pointerEvents: 'none',
-                        fontSize: '0',
-                    }),
+                    css: {
+                        code: JSON.stringify({
+                            width: '100%',
+                            paddingTop: aspectRatio * 100 + '%',
+                            pointerEvents: 'none',
+                            fontSize: '0',
+                        }),
+                    },
                 },
             }));
         node.children &&
@@ -425,16 +462,18 @@ exports.components = {
                     $name: 'image-contents',
                 },
                 bindings: {
-                    css: JSON.stringify({
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'stretch',
-                        position: 'absolute',
-                        top: '0',
-                        left: '0',
-                        width: '100%',
-                        height: '100%',
-                    }),
+                    css: {
+                        code: JSON.stringify({
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'stretch',
+                            position: 'absolute',
+                            top: '0',
+                            left: '0',
+                            width: '100%',
+                            height: '100%',
+                        }),
+                    },
                 },
                 children: node.children,
             }));
@@ -444,7 +483,7 @@ exports.components = {
                 $name: 'video-container',
             },
             bindings: {
-                css: JSON.stringify({ position: 'relative' }),
+                css: { code: JSON.stringify({ position: 'relative' }) },
             },
             children: videoContainerNodes,
         });
@@ -496,9 +535,7 @@ 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");
-        })
+            .map(function (size) { return "".concat(updateQueryParam(image, 'width', String(size)), " ").concat(size, "w"); })
             .concat([image])
             .join(', ')
         : '';
@@ -509,7 +546,15 @@ function noUndefined(obj) {
         if (Object.prototype.hasOwnProperty.call(obj, key)) {
             var value = obj[key];
             if (value != null) {
-                cleanObj[key] = value;
+                if (typeof value == 'object') {
+                    var ret = noUndefined(value);
+                    if (Object.keys(ret).length) {
+                        cleanObj[key] = ret;
+                    }
+                }
+                else {
+                    cleanObj[key] = value;
+                }
             }
         }
     }

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

@@ -16,3 +16,5 @@ export declare function convertBuilderContentToSymbolHierarchy(content: BuilderC
 }): SymbolHierarchy;
 export declare function convertBuilderElementToMitosisComponent(element: BuilderElement): MitosisComponent | null;
 export declare function getJsxSymbolComponentName(id: string): string;
+export declare function hashCodeAsString(obj: any): string;
+export declare function hashCode(obj: any, hash?: number): number;

package/dist/src/symbols/symbol-processor.js

@@ -15,7 +15,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getJsxSymbolComponentName = exports.convertBuilderElementToMitosisComponent = exports.convertBuilderContentToSymbolHierarchy = exports.ensureAllSymbolsHaveIds = void 0;
+exports.hashCode = exports.hashCodeAsString = exports.getJsxSymbolComponentName = exports.convertBuilderElementToMitosisComponent = exports.convertBuilderContentToSymbolHierarchy = exports.ensureAllSymbolsHaveIds = void 0;
 var traverse_1 = require("traverse");
 var builder_1 = require("../parsers/builder");
 var minify_1 = require("../generators/minify");
@@ -28,9 +28,7 @@ function ensureAllSymbolsHaveIds(content) {
     var ids = new Set();
     (0, traverse_1.forEach)(content, function (el) {
         var _a, _b, _c;
-        if (this.key === 'jsCode' &&
-            isString(el) &&
-            el.endsWith('return _virtual_index')) {
+        if (this.key === 'jsCode' && isString(el) && el.endsWith('return _virtual_index')) {
             // Sometimes rollup adds a final `return _virtual_index` but that causes VM evaluation to fail.
             // Instead of a return on the last line, it needs a plain expression on the last line. Luckily
             // because the rollup compile behavior is consistent this works pretty reliably
@@ -63,7 +61,12 @@ exports.ensureAllSymbolsHaveIds = ensureAllSymbolsHaveIds;
 //TODO(misko): needs test
 function convertBuilderContentToSymbolHierarchy(content, _a) {
     var _b;
-    var _c = _a === void 0 ? {} : _a, collectComponentStyles = _c.collectComponentStyles, collectComponentState = _c.collectComponentState;
+    var _c, _d;
+    var _e = _a === void 0 ? {} : _a, collectComponentStyles = _e.collectComponentStyles, collectComponentState = _e.collectComponentState;
+    if (collectComponentState && ((_c = content.data) === null || _c === void 0 ? void 0 : _c.state)) {
+        var state = (_d = content.data) === null || _d === void 0 ? void 0 : _d.state;
+        collectComponentState['ROOT_COMPONENT_STATE'] = state;
+    }
     var path = [-1, content.id];
     var hierarchy = (_b = {
             depthFirstSymbols: []
@@ -76,7 +79,7 @@ function convertBuilderContentToSymbolHierarchy(content, _a) {
         if (cssCode) {
             collectComponentStyles && collectComponentStyles.push((0, minify_1.minify)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", ""], ["", ""])), cssCode));
         }
-        while (path[0 /* DEPTH */] >= this.path.length) {
+        while (path[0 /* Path.DEPTH */] >= this.path.length) {
             path.shift();
             path.shift();
         }
@@ -87,15 +90,15 @@ function convertBuilderContentToSymbolHierarchy(content, _a) {
                     var props = symbol.data;
                     var state = (_c = (_b = symbol.content) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.state;
                     if (state) {
-                        var id = toHash(state);
+                        var id = hashCodeAsString(state);
                         props['serverStateId'] = id;
                         collectComponentState[id] = state;
                     }
                 }
-                if (path[0 /* DEPTH */] < this.path.length) {
+                if (path[0 /* Path.DEPTH */] < this.path.length) {
                     var id = getIdFromSymbol(el);
                     hierarchy[id] = [];
-                    addIfMissing(hierarchy[path[1 /* ID */]], id);
+                    addIfMissing(hierarchy[path[1 /* Path.ID */]], id);
                     path.unshift(this.path.length, id);
                 }
                 // TODO(misko): This should be `el.content` not `el`
@@ -154,19 +157,54 @@ function addIfMissing(array, value) {
 function isString(value) {
     return typeof value == 'string';
 }
-function toHash(obj) {
-    return hashCode(JSON.stringify(obj));
+function hashCodeAsString(obj) {
+    return Number(Math.abs(hashCode(obj))).toString(36);
 }
-function hashCode(text) {
-    var hash = 0, i, chr;
-    if (text.length === 0)
-        return String(hash);
-    for (i = 0; i < text.length; i++) {
-        chr = text.charCodeAt(i);
-        hash = (hash << 5) - hash + chr;
-        hash |= 0; // Convert to 32bit integer
+exports.hashCodeAsString = hashCodeAsString;
+function hashCode(obj, hash) {
+    if (hash === void 0) { hash = 0; }
+    var value = 0;
+    switch (typeof obj) {
+        case 'number':
+            value = obj;
+            break;
+        case 'undefined':
+            value = Number.MIN_SAFE_INTEGER;
+            break;
+        case 'string':
+            for (var i = 0; i < obj.length; i++) {
+                hash = hashCodeApply(hash, obj.charCodeAt(i));
+            }
+            value = obj.length;
+        case 'boolean':
+            value = obj ? 1 : 0;
+            break;
+        case 'object':
+            if (obj === null) {
+                value = Number.MAX_SAFE_INTEGER;
+            }
+            else if (Array.isArray(obj)) {
+                for (var i = 0; i < obj.length; i++) {
+                    hash = hashCode(obj[i], hash);
+                }
+            }
+            else {
+                for (var _i = 0, _a = Object.keys(obj).sort(); _i < _a.length; _i++) {
+                    var key = _a[_i];
+                    if (obj.hasOwnProperty(key)) {
+                        hash = hashCode(obj[key], hash);
+                    }
+                }
+            }
+            break;
     }
-    return Number(Math.abs(hash)).toString(36);
+    return hashCodeApply(hash, value);
+}
+exports.hashCode = hashCode;
+function hashCodeApply(hash, value) {
+    hash = (hash << 5) - hash + value;
+    hash |= 0; // Convert to 32bit integer
+    return hash;
 }
 function pad(value) {
     var padding = '000000';

package/dist/src/targets.d.ts

@@ -2,7 +2,7 @@ export declare const targets: {
     angular: (options?: import("./generators/angular").ToAngularOptions) => import(".").Transpiler;
     builder: (options?: import("./generators/builder").ToBuilderOptions) => ({ component }: import(".").TranspilerArgs) => {
         data: {
-            httpRequests: any;
+            httpRequests: import("./types/json")._JSON;
             jsCode: string;
             tsCode: string;
             blocks: import("@builder.io/sdk").BuilderElement[];
@@ -14,12 +14,17 @@ export declare const targets: {
     liquid: (options?: import("./generators/liquid").ToLiquidOptions) => import(".").Transpiler;
     react: (reactOptions?: import("./generators/react").ToReactOptions) => import(".").Transpiler;
     reactNative: (options?: import("./generators/react-native").ToReactNativeOptions) => import(".").Transpiler;
-    solid: (options?: import("./generators/solid").ToSolidOptions) => import(".").Transpiler;
-    svelte: (options?: import("./generators/svelte").ToSvelteOptions) => import(".").Transpiler;
+    solid: (passedOptions?: Partial<import("./generators/solid/types").ToSolidOptions>) => import(".").Transpiler;
+    svelte: ({ plugins, ...userProvidedOptions }?: import("./generators/svelte").ToSvelteOptions) => import(".").Transpiler;
     swift: (options?: import("./generators/swift-ui").ToSwiftOptions) => import(".").Transpiler;
     template: (options?: import("./generators/template").ToTemplateOptions) => import(".").Transpiler;
     webcomponent: (options?: import("./generators/html").ToHtmlOptions) => import(".").Transpiler;
-    vue: (userOptions?: import("./generators/vue").ToVueOptions) => ({ component, path }: import(".").TranspilerArgs & {
-        path: string;
-    }) => string;
+    vue: (vueOptions?: Omit<import("./generators/vue").ToVueOptions, "vueVersion"> | undefined) => import(".").Transpiler;
+    vue2: (vueOptions?: Omit<import("./generators/vue").ToVueOptions, "vueVersion"> | undefined) => import(".").Transpiler;
+    vue3: (vueOptions?: Omit<import("./generators/vue").ToVueOptions, "vueVersion"> | undefined) => import(".").Transpiler;
+    stencil: (options?: import("./generators/stencil").ToStencilOptions) => import(".").Transpiler;
+    qwik: (userOptions?: import("./generators/qwik/component-generator").ToQwikOptions) => import(".").Transpiler;
+    marko: (userOptions?: import("./generators/marko").ToMarkoOptions) => import(".").Transpiler;
+    preact: (reactOptions?: import("./generators/react").ToReactOptions) => import(".").Transpiler;
+    lit: (options?: import("./generators/lit").ToLitOptions) => import(".").Transpiler;
 };

package/dist/src/targets.js

@@ -7,12 +7,17 @@ var html_1 = require("./generators/html");
 var mitosis_1 = require("./generators/mitosis");
 var liquid_1 = require("./generators/liquid");
 var react_1 = require("./generators/react");
+var react_2 = require("./generators/react");
 var react_native_1 = require("./generators/react-native");
 var solid_1 = require("./generators/solid");
 var svelte_1 = require("./generators/svelte");
 var swift_ui_1 = require("./generators/swift-ui");
 var template_1 = require("./generators/template");
 var vue_1 = require("./generators/vue");
+var stencil_1 = require("./generators/stencil");
+var qwik_1 = require("./generators/qwik");
+var marko_1 = require("./generators/marko");
+var lit_1 = require("./generators/lit");
 exports.targets = {
     angular: angular_1.componentToAngular,
     builder: builder_1.componentToBuilder,
@@ -27,5 +32,12 @@ exports.targets = {
     swift: swift_ui_1.componentToSwift,
     template: template_1.componentToTemplate,
     webcomponent: html_1.componentToCustomElement,
-    vue: vue_1.componentToVue,
+    vue: vue_1.componentToVue3,
+    vue2: vue_1.componentToVue2,
+    vue3: vue_1.componentToVue3,
+    stencil: stencil_1.componentToStencil,
+    qwik: qwik_1.componentToQwik,
+    marko: marko_1.componentToMarko,
+    preact: react_2.componentToPreact,
+    lit: lit_1.componentToLit,
 };