@builder.io/mitosis 0.0.75 → 0.0.77-0

package/dist/src/generators/alpine/generate.d.ts

@@ -0,0 +1,20 @@
+import { MitosisNode } from '../../types/mitosis-node';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../../types/transpiler';
+export interface ToAlpineOptions extends BaseTranspilerOptions {
+    /**
+     * use @on and : instead of `x-on` and `x-bind`
+     */
+    useShorthandSyntax?: boolean;
+    /**
+     * If true, the javascript won't be extracted into a separate script block.
+     */
+    inlineState?: boolean;
+}
+export declare const checkIsComponentNode: (node: MitosisNode) => boolean;
+/**
+ * Test if the binding expression would be likely to generate
+ * valid or invalid liquid. If we generate invalid liquid tags
+ * Shopify will reject our PUT to update the template
+ */
+export declare const isValidAlpineBinding: (str?: string) => boolean;
+export declare const componentToAlpine: TranspilerGenerator<ToAlpineOptions>;

package/dist/src/generators/alpine/generate.js

@@ -0,0 +1,207 @@
+"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.componentToAlpine = exports.isValidAlpineBinding = exports.checkIsComponentNode = void 0;
+var standalone_1 = require("prettier/standalone");
+var collect_css_1 = require("../../helpers/styles/collect-css");
+var fast_clone_1 = require("../../helpers/fast-clone");
+var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+var jsx_1 = require("../../parsers/jsx");
+var mitosis_node_1 = require("../../types/mitosis-node");
+var plugins_1 = require("../../modules/plugins");
+var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
+var get_state_object_string_1 = require("../../helpers/get-state-object-string");
+var dash_case_1 = require("../../helpers/dash-case");
+var remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
+var lodash_1 = require("lodash");
+var get_refs_1 = require("../../helpers/get-refs");
+var render_update_hooks_1 = require("./render-update-hooks");
+var render_mount_hook_1 = require("./render-mount-hook");
+var babel_transform_1 = require("../../helpers/babel-transform");
+var checkIsComponentNode = function (node) {
+    return node.name === '@builder.io/mitosis/component';
+};
+exports.checkIsComponentNode = checkIsComponentNode;
+/**
+ * Test if the binding expression would be likely to generate
+ * valid or invalid liquid. If we generate invalid liquid tags
+ * Shopify will reject our PUT to update the template
+ */
+var isValidAlpineBinding = function (str) {
+    if (str === void 0) { str = ''; }
+    return true;
+    /*
+    const strictMatches = Boolean(
+      // Test for our `context.shopify.liquid.*(expression), which
+      // we regex out later to transform back into valid liquid expressions
+      str.match(/(context|ctx)\s*(\.shopify\s*)?\.liquid\s*\./),
+    );
+  
+    return (
+      strictMatches ||
+      // Test is the expression is simple and would map to Shopify bindings	    // Test for our `context.shopify.liquid.*(expression), which
+      // e.g. `state.product.price` -> `{{product.price}}	    // we regex out later to transform back into valid liquid expressions
+      Boolean(str.match(/^[a-z0-9_\.\s]+$/i))
+    );
+    */
+};
+exports.isValidAlpineBinding = isValidAlpineBinding;
+var removeOnFromEventName = function (str) { return str.replace(/^on/, ''); };
+var prefixEvent = function (str) { return str.replace(/(?<=[\s]|^)event/gm, '$event'); };
+var removeTrailingSemicolon = function (str) { return str.replace(/;$/, ''); };
+var trim = function (str) { return str.trim(); };
+var replaceInputRefs = (0, lodash_1.curry)(function (json, str) {
+    (0, get_refs_1.getRefs)(json).forEach(function (value) {
+        str = str.replaceAll(value, "this.$refs.".concat(value));
+    });
+    return str;
+});
+var replaceStateWithThis = function (str) { return str.replaceAll('state.', 'this.'); };
+var getStateObjectString = function (json) {
+    return (0, lodash_1.flow)(get_state_object_string_1.getStateObjectStringFromComponent, trim, replaceInputRefs(json), (0, render_mount_hook_1.renderMountHook)(json), (0, render_update_hooks_1.renderUpdateHooks)(json), replaceStateWithThis)(json);
+};
+var bindEventHandlerKey = (0, lodash_1.flowRight)(dash_case_1.dashCase, removeOnFromEventName);
+var bindEventHandlerValue = (0, lodash_1.flowRight)(prefixEvent, removeTrailingSemicolon, trim, remove_surrounding_block_1.removeSurroundingBlock, strip_state_and_props_refs_1.stripStateAndPropsRefs);
+var bindEventHandler = function (_a) {
+    var useShorthandSyntax = _a.useShorthandSyntax;
+    return function (eventName, code) {
+        var bind = useShorthandSyntax ? '@' : 'x-on:';
+        return " ".concat(bind).concat(bindEventHandlerKey(eventName), "=\"").concat(bindEventHandlerValue(code).trim(), "\"");
+    };
+};
+var mappers = {
+    For: function (json, options) {
+        var _a, _b, _c;
+        return !((0, mitosis_node_1.checkIsForNode)(json) &&
+            (0, exports.isValidAlpineBinding)((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code) &&
+            (0, exports.isValidAlpineBinding)(json.scope.forName))
+            ? ''
+            : "<template x-for=\"".concat(json.scope.forName, " in ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code), "\">\n    ").concat(((_c = json.children) !== null && _c !== void 0 ? _c : []).map(function (item) { return blockToAlpine(item, options); }).join('\n'), "\n    </template>");
+    },
+    Fragment: function (json, options) { return blockToAlpine(__assign(__assign({}, json), { name: 'div' }), options); },
+    Show: function (json, options) {
+        var _a, _b, _c;
+        return !(0, exports.isValidAlpineBinding)((_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code)
+            ? ''
+            : "<template x-if=\"".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_b = json.bindings.when) === null || _b === void 0 ? void 0 : _b.code), "\">\n    ").concat(((_c = json.children) !== null && _c !== void 0 ? _c : []).map(function (item) { return blockToAlpine(item, options); }).join('\n'), "\n    </template>");
+    },
+};
+// TODO: spread support
+var blockToAlpine = function (json, options) {
+    var _a, _b;
+    if (options === void 0) { options = {}; }
+    if (mappers[json.name]) {
+        return mappers[json.name](json, options);
+    }
+    // TODO: Add support for `{props.children}` bindings
+    if (json.properties._text) {
+        return json.properties._text;
+    }
+    if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
+        return (0, exports.isValidAlpineBinding)(json.bindings._text.code)
+            ? "<span x-html=\"".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings._text.code), "\"></span>")
+            : '';
+    }
+    var str = "<".concat(json.name, " ");
+    /*
+    // Copied from the liquid generator. Not sure what it does.
+    if (
+      json.bindings._spread?.code === '_spread' &&
+      isValidAlpineBinding(json.bindings._spread.code)
+    ) {
+      str += `
+            <template x-for="_attr in ${json.bindings._spread.code}">
+              {{ _attr[0] }}="{{ _attr[1] }}"
+            </template>
+          `;
+    }
+    */
+    for (var key in json.properties) {
+        var value = json.properties[key];
+        str += " ".concat(key, "=\"").concat(value, "\" ");
+    }
+    for (var key in json.bindings) {
+        if (key === '_spread' || key === 'css') {
+            continue;
+        }
+        var _c = json.bindings[key], value = _c.code, bindingType = _c.type;
+        // TODO: proper babel transform to replace. Util for this
+        var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value);
+        if (key.startsWith('on')) {
+            str += bindEventHandler(options)(key, value);
+        }
+        else if (key === 'ref') {
+            str += " x-ref=\"".concat(useValue, "\"");
+        }
+        else if ((0, exports.isValidAlpineBinding)(useValue)) {
+            var bind = options.useShorthandSyntax && bindingType !== 'spread' ? ':' : 'x-bind:';
+            str += " ".concat(bind).concat(bindingType === 'spread' ? '' : key, "=\"").concat(useValue, "\" ").replace(':=', '=');
+        }
+    }
+    return jsx_1.selfClosingTags.has(json.name)
+        ? "".concat(str, " />")
+        : "".concat(str, ">").concat(((_b = json.children) !== null && _b !== void 0 ? _b : []).map(function (item) { return blockToAlpine(item, options); }).join('\n'), "</").concat(json.name, ">");
+};
+var componentToAlpine = function (options) {
+    if (options === void 0) { options = {}; }
+    return function (_a) {
+        var component = _a.component;
+        var json = (0, fast_clone_1.fastClone)(component);
+        if (options.plugins) {
+            json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
+        }
+        var css = (0, collect_css_1.collectCss)(json);
+        (0, strip_meta_properties_1.stripMetaProperties)(json);
+        if (options.plugins) {
+            json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
+        }
+        var stateObjectString = getStateObjectString(json);
+        // Set x-data on root element
+        json.children[0].properties['x-data'] = options.inlineState
+            ? stateObjectString
+            : "".concat((0, lodash_1.camelCase)(json.name), "()");
+        if ((0, render_update_hooks_1.hasRootUpdateHook)(json)) {
+            json.children[0].properties['x-effect'] = 'onUpdate';
+        }
+        var str = css.trim().length ? "<style>".concat(css, "</style>") : '';
+        str += json.children.map(function (item) { return blockToAlpine(item, options); }).join('\n');
+        if (!options.inlineState) {
+            str += "<script>\n          ".concat((0, babel_transform_1.babelTransformCode)("document.addEventListener('alpine:init', () => {\n              Alpine.data('".concat((0, lodash_1.camelCase)(json.name), "', () => (").concat(stateObjectString, "))\n          })")), "\n        </script>");
+        }
+        if (options.plugins) {
+            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
+        }
+        if (options.prettier !== false) {
+            try {
+                str = (0, standalone_1.format)(str, {
+                    parser: 'html',
+                    htmlWhitespaceSensitivity: 'ignore',
+                    plugins: [
+                        // To support running in browsers
+                        require('prettier/parser-html'),
+                        require('prettier/parser-postcss'),
+                        require('prettier/parser-babel'),
+                    ],
+                });
+            }
+            catch (err) {
+                console.warn('Could not prettify', { string: str }, err);
+            }
+        }
+        if (options.plugins) {
+            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
+        }
+        return str;
+    };
+};
+exports.componentToAlpine = componentToAlpine;

package/dist/src/generators/alpine/index.d.ts

@@ -0,0 +1 @@
+export * from './generate';

package/dist/src/generators/alpine/index.js

@@ -0,0 +1,17 @@
+"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 __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 });
+__exportStar(require("./generate"), exports);

package/dist/src/generators/alpine/render-mount-hook.d.ts

@@ -0,0 +1,2 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+export declare const renderMountHook: import("lodash").CurriedFunction2<MitosisComponent, string, string>;

package/dist/src/generators/alpine/render-mount-hook.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderMountHook = void 0;
+var lodash_1 = require("lodash");
+var render_update_hooks_1 = require("./render-update-hooks");
+function shouldRenderMountHook(json) {
+    return json.hooks.onMount !== undefined || (0, render_update_hooks_1.hasWatchHooks)(json);
+}
+exports.renderMountHook = (0, lodash_1.curry)(function (json, objectString) {
+    var _a, _b;
+    return shouldRenderMountHook(json)
+        ? objectString.replace(/(?:,)?(\s*)(}\s*)$/, ", init() {\n      ".concat((0, render_update_hooks_1.renderWatchHooks)(json), "\n      ").concat((_b = (_a = json.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code) !== null && _b !== void 0 ? _b : '', "\n    }$1$2"))
+        : objectString;
+});

package/dist/src/generators/alpine/render-update-hooks.d.ts

@@ -0,0 +1,5 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+export declare function hasRootUpdateHook(json: MitosisComponent): boolean;
+export declare const renderUpdateHooks: import("lodash").CurriedFunction2<MitosisComponent, string, string>;
+export declare const hasWatchHooks: (json: MitosisComponent) => boolean;
+export declare const renderWatchHooks: (json: MitosisComponent) => string;

package/dist/src/generators/alpine/render-update-hooks.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderWatchHooks = exports.hasWatchHooks = exports.renderUpdateHooks = exports.hasRootUpdateHook = void 0;
+var lodash_1 = require("lodash");
+var extractCode = function (hook) { return hook.code; };
+function renderRootUpdateHook(hooks, output) {
+    if (hooks.length === 0) {
+        return output;
+    }
+    var str = "onUpdate() {\n        ".concat(hooks.map(extractCode).join('\n'), "\n    }");
+    return output.replace(/,?(\s*})$/, ",\n".concat(str, "$1"));
+}
+function getRootUpdateHooks(json) {
+    var _a;
+    return ((_a = json.hooks.onUpdate) !== null && _a !== void 0 ? _a : []).filter(function (hook) { return hook.deps == ''; });
+}
+function hasRootUpdateHook(json) {
+    return getRootUpdateHooks(json).length > 0;
+}
+exports.hasRootUpdateHook = hasRootUpdateHook;
+exports.renderUpdateHooks = (0, lodash_1.curry)(function (json, output) {
+    return renderRootUpdateHook(getRootUpdateHooks(json), output);
+});
+function getWatchHooks(json) {
+    var _a;
+    return ((_a = json.hooks.onUpdate) !== null && _a !== void 0 ? _a : []).filter(function (hook) { var _a; return (_a = hook.deps) === null || _a === void 0 ? void 0 : _a.match(/state|this/); });
+}
+var hasWatchHooks = function (json) {
+    return getWatchHooks(json).length > 0;
+};
+exports.hasWatchHooks = hasWatchHooks;
+function renderWatchHook(hook) {
+    var _a, _b;
+    var deps = (_b = ((_a = hook.deps) !== null && _a !== void 0 ? _a : '')) === null || _b === void 0 ? void 0 : _b.slice(1).slice(0, -1).split(', ').filter(function (dep) { return dep.match(/state|this/); });
+    return deps
+        .map(function (dep) {
+        return "this.$watch('".concat(dep.replace(/(state|this)\./, ''), "', (value, oldValue) => { ").concat(hook.code, " });");
+    })
+        .join('\n');
+}
+var renderWatchHooks = function (json) {
+    return (0, exports.hasWatchHooks)(json) ? getWatchHooks(json).map(renderWatchHook).join('\n') : '';
+};
+exports.renderWatchHooks = renderWatchHooks;

package/dist/src/generators/angular.d.ts

@@ -4,12 +4,11 @@ export interface ToAngularOptions extends BaseTranspilerOptions {
     standalone?: boolean;
     preserveImports?: boolean;
     preserveFileExtensions?: boolean;
+    importMapper?: Function;
+    bootstrapMapper?: Function;
 }
 interface AngularBlockOptions {
-    contextVars?: string[];
-    outputVars?: string[];
     childComponents?: string[];
-    domRefs?: string[];
 }
 export declare const blockToAngular: (json: MitosisNode, options?: ToAngularOptions, blockOptions?: AngularBlockOptions) => string;
 export declare const componentToAngular: TranspilerGenerator<ToAngularOptions>;