@builder.io/mitosis 0.0.76 → 0.0.77

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

@@ -8,10 +8,7 @@ export interface ToAngularOptions extends BaseTranspilerOptions {
     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>;

package/dist/src/generators/angular.js

@@ -54,27 +54,30 @@ var get_custom_imports_1 = require("../helpers/get-custom-imports");
 var get_components_used_1 = require("../helpers/get-components-used");
 var is_upper_case_1 = require("../helpers/is-upper-case");
 var html_tags_1 = require("../constants/html_tags");
+var function_1 = require("fp-ts/lib/function");
+var merge_options_1 = require("../helpers/merge-options");
+var process_code_1 = require("../helpers/plugins/process-code");
 var BUILT_IN_COMPONENTS = new Set(['Show', 'For', 'Fragment']);
 var mappers = {
-    Fragment: function (json, options, blockOptions) {
-        return "<div>".concat(json.children
-            .map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); })
-            .join('\n'), "</div>");
+    Fragment: function (json, options) {
+        return "<ng-container>".concat(json.children
+            .map(function (item) { return (0, exports.blockToAngular)(item, options); })
+            .join('\n'), "</ng-container>");
     },
-    Slot: function (json, options, blockOptions) {
-        return "<ng-content ".concat(Object.keys(json.bindings)
-            .map(function (binding) {
-            var _a, _b;
-            if (binding === 'name') {
-                var selector = (0, lodash_1.kebabCase)((_b = (_a = json.bindings.name) === null || _a === void 0 ? void 0 : _a.code) === null || _b === void 0 ? void 0 : _b.replace('props.slot', ''));
+    Slot: function (json, options) {
+        return "<ng-content ".concat(Object.entries(json.bindings)
+            .map(function (_a) {
+            var binding = _a[0], value = _a[1];
+            if (value && binding === 'name') {
+                var selector = (0, function_1.pipe)(value.code, slots_1.stripSlotPrefix, lodash_1.kebabCase);
                 return "select=\"[".concat(selector, "]\"");
             }
         })
-            .join('\n'), ">").concat(Object.keys(json.bindings)
-            .map(function (binding) {
-            var _a;
-            if (binding !== 'name') {
-                return "".concat((_a = json.bindings[binding]) === null || _a === void 0 ? void 0 : _a.code);
+            .join('\n'), ">").concat(Object.entries(json.bindings)
+            .map(function (_a) {
+            var binding = _a[0], value = _a[1];
+            if (value && binding !== 'name') {
+                return value.code;
             }
         })
             .join('\n'), "</ng-content>");
@@ -89,53 +92,38 @@ var BINDINGS_MAPPER = {
     style: 'ngStyle',
 };
 var blockToAngular = function (json, options, blockOptions) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d;
     if (options === void 0) { options = {}; }
     if (blockOptions === void 0) { blockOptions = {}; }
-    var contextVars = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.contextVars) || [];
-    var outputVars = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.outputVars) || [];
     var childComponents = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.childComponents) || [];
-    var domRefs = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.domRefs) || [];
     var isValidHtmlTag = html_tags_1.VALID_HTML_TAGS.includes(json.name.trim());
     if (mappers[json.name]) {
-        return mappers[json.name](json, options, blockOptions);
+        return mappers[json.name](json, options);
     }
-    if ((0, is_children_1.default)(json)) {
+    if ((0, is_children_1.default)({ node: json })) {
         return "<ng-content></ng-content>";
     }
     if (json.properties._text) {
         return json.properties._text;
     }
-    if (/props\.slot/.test((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code)) {
-        var selector = (0, lodash_1.kebabCase)((_c = (_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code) === null || _c === void 0 ? void 0 : _c.replace('props.slot', ''));
-        return "<ng-content select=\"[".concat(selector, "]\"></ng-content>");
-    }
-    if ((_d = json.bindings._text) === null || _d === void 0 ? void 0 : _d.code) {
-        return "{{".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings._text.code, {
-            // the context is the class
-            contextVars: [],
-            outputVars: outputVars,
-            domRefs: domRefs,
-        }), "}}");
+    var textCode = (_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code;
+    if (textCode) {
+        if ((0, slots_1.isSlotProperty)(textCode)) {
+            var selector = (0, function_1.pipe)(textCode, slots_1.stripSlotPrefix, lodash_1.kebabCase);
+            return "<ng-content select=\"[".concat(selector, "]\"></ng-content>");
+        }
+        return "{{".concat(textCode, "}}");
     }
     var str = '';
     var needsToRenderSlots = [];
     if ((0, mitosis_node_1.checkIsForNode)(json)) {
         var indexName = json.scope.indexName;
-        str += "<ng-container *ngFor=\"let ".concat(json.scope.forName, " of ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_e = json.bindings.each) === null || _e === void 0 ? void 0 : _e.code, {
-            contextVars: contextVars,
-            outputVars: outputVars,
-            domRefs: domRefs,
-        })).concat(indexName ? "; let ".concat(indexName, " = index") : '', "\">");
+        str += "<ng-container *ngFor=\"let ".concat(json.scope.forName, " of ").concat((_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code).concat(indexName ? "; let ".concat(indexName, " = index") : '', "\">");
         str += json.children.map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); }).join('\n');
         str += "</ng-container>";
     }
     else if (json.name === 'Show') {
-        str += "<ng-container *ngIf=\"".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_f = json.bindings.when) === null || _f === void 0 ? void 0 : _f.code, {
-            contextVars: contextVars,
-            outputVars: outputVars,
-            domRefs: domRefs,
-        }), "\">");
+        str += "<ng-container *ngIf=\"".concat((_c = json.bindings.when) === null || _c === void 0 ? void 0 : _c.code, "\">");
         str += json.children.map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); }).join('\n');
         str += "</ng-container>";
     }
@@ -158,19 +146,14 @@ var blockToAngular = function (json, options, blockOptions) {
             str += " ".concat(key, "=\"").concat(value, "\" ");
         }
         for (var key in json.bindings) {
-            if (((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.type) === 'spread') {
+            if (((_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.type) === 'spread') {
                 continue;
             }
             if (key.startsWith('$')) {
                 continue;
             }
-            var _h = json.bindings[key], code = _h.code, _j = _h.arguments, cusArgs = _j === void 0 ? ['event'] : _j;
+            var _e = json.bindings[key], code = _e.code, _f = _e.arguments, cusArgs = _f === void 0 ? ['event'] : _f;
             // TODO: proper babel transform to replace. Util for this
-            var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
-                contextVars: contextVars,
-                outputVars: outputVars,
-                domRefs: domRefs,
-            }).replace(/"/g, '&quot;');
             if (key.startsWith('on')) {
                 var event_1 = key.replace('on', '').toLowerCase();
                 if (event_1 === 'change' && json.name === 'input' /* todo: other tags */) {
@@ -180,28 +163,28 @@ var blockToAngular = function (json, options, blockOptions) {
                 var eventName = cusArgs[0];
                 var regexp = new RegExp('(^|\\n|\\r| |;|\\(|\\[|!)' + eventName + '(\\?\\.|\\.|\\(| |;|\\)|$)', 'g');
                 var replacer = '$1$event$2';
-                var finalValue = (0, remove_surrounding_block_1.removeSurroundingBlock)(useValue.replace(regexp, replacer));
+                var finalValue = (0, remove_surrounding_block_1.removeSurroundingBlock)(code.replace(regexp, replacer));
                 str += " (".concat(event_1, ")=\"").concat(finalValue, "\" ");
             }
             else if (key === 'class') {
-                str += " [class]=\"".concat(useValue, "\" ");
+                str += " [class]=\"".concat(code, "\" ");
             }
             else if (key === 'ref') {
-                str += " #".concat(useValue, " ");
+                str += " #".concat(code, " ");
             }
             else if ((0, slots_1.isSlotProperty)(key)) {
-                var lowercaseKey = key.replace('slot', '')[0].toLowerCase() + key.replace('slot', '').substring(1);
-                needsToRenderSlots.push("".concat(useValue.replace(/(\/\>)|\>/, " ".concat(lowercaseKey, ">"))));
+                var lowercaseKey = (0, function_1.pipe)(key, slots_1.stripSlotPrefix, function (x) { return x.toLowerCase(); });
+                needsToRenderSlots.push("".concat(code.replace(/(\/\>)|\>/, " ".concat(lowercaseKey, ">"))));
             }
             else if (BINDINGS_MAPPER[key]) {
-                str += " [".concat(BINDINGS_MAPPER[key], "]=\"").concat(useValue, "\"  ");
+                str += " [".concat(BINDINGS_MAPPER[key], "]=\"").concat(code, "\"  ");
             }
             else if (isValidHtmlTag || key.includes('-')) {
                 // standard html elements need the attr to satisfy the compiler in many cases: eg: svg elements and [fill]
-                str += " [attr.".concat(key, "]=\"").concat(useValue, "\" ");
+                str += " [attr.".concat(key, "]=\"").concat(code, "\" ");
             }
             else {
-                str += "[".concat(key, "]=\"").concat(useValue, "\" ");
+                str += "[".concat(key, "]=\"").concat(code, "\" ");
             }
         }
         if (jsx_1.selfClosingTags.has(json.name)) {
@@ -228,9 +211,42 @@ var componentToAngular = function (userOptions) {
             preserveImports: false,
             preserveFileExtensions: false,
         };
-        var options = __assign(__assign({}, DEFAULT_OPTIONS), userOptions);
         // Make a copy we can safely mutate, similar to babel's toolchain
         var json = (0, fast_clone_1.fastClone)(_component);
+        var contextVars = Object.keys(((_b = json === null || json === void 0 ? void 0 : json.context) === null || _b === void 0 ? void 0 : _b.get) || {});
+        var metaOutputVars = ((_d = (_c = json.meta) === null || _c === void 0 ? void 0 : _c.useMetadata) === null || _d === void 0 ? void 0 : _d.outputs) || [];
+        var outputVars = (0, lodash_1.uniq)(__spreadArray(__spreadArray([], metaOutputVars, true), (0, get_prop_functions_1.getPropFunctions)(json), true));
+        var stateVars = Object.keys((json === null || json === void 0 ? void 0 : json.state) || {});
+        var options = (0, merge_options_1.mergeOptions)(__assign(__assign({}, DEFAULT_OPTIONS), userOptions));
+        options.plugins = __spreadArray(__spreadArray([], (options.plugins || []), true), [
+            (0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType) {
+                var domRefs = (0, get_refs_1.getRefs)(json);
+                switch (codeType) {
+                    case 'hooks':
+                        return function (code) {
+                            return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+                                replaceWith: 'this.',
+                                contextVars: contextVars,
+                                outputVars: outputVars,
+                                domRefs: Array.from(domRefs),
+                                stateVars: stateVars,
+                            });
+                        };
+                    case 'bindings':
+                        return function (code) {
+                            return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+                                contextVars: [],
+                                outputVars: outputVars,
+                                domRefs: [], // the template doesn't need the this keyword.
+                            }).replace(/"/g, '&quot;');
+                        };
+                    case 'hooks-deps':
+                    case 'state':
+                    case 'properties':
+                        return function (x) { return x; };
+                }
+            }),
+        ], false);
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
@@ -250,8 +266,6 @@ var componentToAngular = function (userOptions) {
         var localExportVars = Object.keys(localExports)
             .filter(function (key) { return localExports[key].usedInLocal; })
             .map(function (key) { return "".concat(key, " = ").concat(key, ";"); });
-        var metaOutputVars = ((_c = (_b = json.meta) === null || _b === void 0 ? void 0 : _b.useMetadata) === null || _c === void 0 ? void 0 : _c.outputs) || [];
-        var contextVars = Object.keys(((_d = json === null || json === void 0 ? void 0 : json.context) === null || _d === void 0 ? void 0 : _d.get) || {});
         var injectables = contextVars.map(function (variableName) {
             var _a, _b, _c, _d;
             var variableType = (_a = json === null || json === void 0 ? void 0 : json.context) === null || _a === void 0 ? void 0 : _a.get[variableName].name;
@@ -270,7 +284,6 @@ var componentToAngular = function (userOptions) {
             props.delete(forwardProp);
         }
         props.delete('children');
-        var outputVars = (0, lodash_1.uniq)(__spreadArray(__spreadArray([], metaOutputVars, true), (0, get_prop_functions_1.getPropFunctions)(json), true));
         // remove props for outputs
         outputVars.forEach(function (variableName) {
             props.delete(variableName);
@@ -285,7 +298,6 @@ var componentToAngular = function (userOptions) {
         var hasOnMount = Boolean((_f = json.hooks) === null || _f === void 0 ? void 0 : _f.onMount);
         var domRefs = (0, get_refs_1.getRefs)(json);
         var jsRefs = Object.keys(json.refs).filter(function (ref) { return !domRefs.has(ref); });
-        var stateVars = Object.keys((json === null || json === void 0 ? void 0 : json.state) || {});
         var componentsUsed = Array.from((0, get_components_used_1.getComponentsUsed)(json)).filter(function (item) {
             return item.length && (0, is_upper_case_1.isUpperCase)(item[0]) && !BUILT_IN_COMPONENTS.has(item);
         });
@@ -300,14 +312,8 @@ var componentToAngular = function (userOptions) {
         if (options.prettier !== false) {
             css = tryFormat(css, 'css');
         }
-        var blockOptions = {
-            contextVars: contextVars,
-            outputVars: outputVars,
-            domRefs: [],
-            childComponents: childComponents,
-        };
         var template = json.children
-            .map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); })
+            .map(function (item) { return (0, exports.blockToAngular)(item, options, { childComponents: childComponents }); })
             .join('\n');
         if (options.prettier !== false) {
             template = tryFormat(template, 'html');
@@ -384,40 +390,18 @@ var componentToAngular = function (userOptions) {
             ? ''
             : "constructor(\n".concat(injectables.join(',\n'), ") {\n            ").concat(!((_h = json.hooks) === null || _h === void 0 ? void 0 : _h.onInit)
                 ? ''
-                : "\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_j = json.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code, {
-                    replaceWith: 'this.',
-                    contextVars: contextVars,
-                    outputVars: outputVars,
-                }), "\n              "), "\n          }\n          "), !hasOnMount
+                : "\n              ".concat((_j = json.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code, "\n              "), "\n          }\n          "), !hasOnMount
             ? ''
             : "ngOnInit() {\n\n              ".concat(!((_k = json.hooks) === null || _k === void 0 ? void 0 : _k.onMount)
                 ? ''
-                : "\n                ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_l = json.hooks.onMount) === null || _l === void 0 ? void 0 : _l.code, {
-                    replaceWith: 'this.',
-                    contextVars: contextVars,
-                    outputVars: outputVars,
-                    domRefs: Array.from(domRefs),
-                    stateVars: stateVars,
-                }), "\n                "), "\n            }"), !((_m = json.hooks.onUpdate) === null || _m === void 0 ? void 0 : _m.length)
+                : "\n                ".concat((_l = json.hooks.onMount) === null || _l === void 0 ? void 0 : _l.code, "\n                "), "\n            }"), !((_m = json.hooks.onUpdate) === null || _m === void 0 ? void 0 : _m.length)
             ? ''
             : "ngAfterContentChecked() {\n              ".concat(json.hooks.onUpdate.reduce(function (code, hook) {
-                code += (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(hook.code, {
-                    replaceWith: 'this.',
-                    contextVars: contextVars,
-                    outputVars: outputVars,
-                    domRefs: Array.from(domRefs),
-                    stateVars: stateVars,
-                });
+                code += hook.code;
                 return code + '\n';
             }, ''), "\n            }"), !json.hooks.onUnMount
             ? ''
-            : "ngOnDestroy() {\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.hooks.onUnMount.code, {
-                replaceWith: 'this.',
-                contextVars: contextVars,
-                outputVars: outputVars,
-                domRefs: Array.from(domRefs),
-                stateVars: stateVars,
-            }), "\n            }"));
+            : "ngOnDestroy() {\n              ".concat(json.hooks.onUnMount.code, "\n            }"));
         str = generateNgModule(str, json.name, componentsUsed, json, options.bootstrapMapper);
         if (options.plugins) {
             str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);