@builder.io/mitosis 0.0.81 → 0.0.83

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

@@ -165,18 +165,19 @@ var componentToAlpine = function (options) {
         if (options.plugins) {
             json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
         }
+        var componentName = (0, lodash_1.camelCase)(json.name) || 'MyComponent';
         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), "()");
+            : "".concat(componentName, "()");
         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>");
+            str += "<script>\n          ".concat((0, babel_transform_1.babelTransformCode)("document.addEventListener('alpine:init', () => {\n              Alpine.data('".concat(componentName, "', () => (").concat(stateObjectString, "))\n          })")), "\n        </script>");
         }
         if (options.plugins) {
             str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);

package/dist/src/generators/angular.js

@@ -29,7 +29,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToAngular = exports.blockToAngular = void 0;
 var dedent_1 = __importDefault(require("dedent"));
-var json5_1 = __importDefault(require("json5"));
 var standalone_1 = require("prettier/standalone");
 var collect_css_1 = require("../helpers/styles/collect-css");
 var fast_clone_1 = require("../helpers/fast-clone");
@@ -53,11 +52,12 @@ var slots_1 = require("../helpers/slots");
 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 replace_identifiers_1 = require("../helpers/replace-identifiers");
 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 BUILT_IN_COMPONENTS = new Set(['Show', 'For', 'Fragment', 'Slot']);
 var mappers = {
     Fragment: function (json, options) {
         return "<ng-container>".concat(json.children
@@ -65,11 +65,12 @@ var mappers = {
             .join('\n'), "</ng-container>");
     },
     Slot: function (json, options) {
-        return "<ng-content ".concat(Object.entries(json.bindings)
+        var renderChildren = function () { var _a; return (_a = json.children) === null || _a === void 0 ? void 0 : _a.map(function (item) { return (0, exports.blockToAngular)(item, options); }).join('\n'); };
+        return "<ng-content ".concat(Object.entries(__assign(__assign({}, json.bindings), json.properties))
             .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);
+                var selector = (0, function_1.pipe)((0, lodash_1.isString)(value) ? value : value.code, slots_1.stripSlotPrefix, lodash_1.kebabCase);
                 return "select=\"[".concat(selector, "]\"");
             }
         })
@@ -80,11 +81,11 @@ var mappers = {
                 return value.code;
             }
         })
-            .join('\n'), "</ng-content>");
+            .join('\n')).concat(renderChildren(), "</ng-content>");
     },
 };
 var generateNgModule = function (content, name, componentsUsed, component, bootstrapMapper) {
-    return "import { NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\n\n".concat(content, "\n\n@NgModule({\n  declarations: [").concat(name, "],\n  imports: [BrowserModule").concat(componentsUsed.length ? ', ' + componentsUsed.map(function (comp) { return "".concat(comp, "Module"); }).join(', ') : '', "],\n  exports: [").concat(name, "],\n  ").concat(bootstrapMapper ? bootstrapMapper(name, componentsUsed, component) : '', "\n})\nexport class ").concat(name, "Module {}");
+    return "import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\n".concat(content, "\n\n@NgModule({\n  declarations: [").concat(name, "],\n  imports: [CommonModule").concat(componentsUsed.length ? ', ' + componentsUsed.map(function (comp) { return "".concat(comp, "Module"); }).join(', ') : '', "],\n  exports: [").concat(name, "],\n  ").concat(bootstrapMapper ? bootstrapMapper(name, componentsUsed, component) : '', "\n})\nexport class ").concat(name, "Module {}");
 };
 // TODO: Maybe in the future allow defining `string | function` as values
 var BINDINGS_MAPPER = {
@@ -155,7 +156,8 @@ var blockToAngular = function (json, options, blockOptions) {
             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
             if (key.startsWith('on')) {
-                var event_1 = key.replace('on', '').toLowerCase();
+                var event_1 = key.replace('on', '');
+                event_1 = event_1.charAt(0).toLowerCase() + event_1.slice(1);
                 if (event_1 === 'change' && json.name === 'input' /* todo: other tags */) {
                     event_1 = 'input';
                 }
@@ -202,6 +204,17 @@ var blockToAngular = function (json, options, blockOptions) {
     return str;
 };
 exports.blockToAngular = blockToAngular;
+var processAngularCode = function (_a) {
+    var contextVars = _a.contextVars, outputVars = _a.outputVars, domRefs = _a.domRefs, stateVars = _a.stateVars, replaceWith = _a.replaceWith;
+    return function (code) {
+        return (0, function_1.pipe)((0, strip_state_and_props_refs_1.DO_NOT_USE_VARS_TRANSFORMS)(code, {
+            contextVars: contextVars,
+            domRefs: domRefs,
+            outputVars: outputVars,
+            stateVars: stateVars,
+        }), function (newCode) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(newCode, { replaceWith: replaceWith }); });
+    };
+};
 var componentToAngular = function (userOptions) {
     if (userOptions === void 0) { userOptions = {}; }
     return function (_a) {
@@ -220,25 +233,38 @@ var componentToAngular = function (userOptions) {
         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,
+                        return (0, function_1.flow)(processAngularCode({
+                            replaceWith: 'this',
+                            contextVars: contextVars,
+                            outputVars: outputVars,
+                            domRefs: Array.from((0, get_refs_1.getRefs)(json)),
+                            stateVars: stateVars,
+                        }), function (code) {
+                            var allMethodNames = Object.entries(json.state)
+                                .filter(function (_a) {
+                                var _ = _a[0], value = _a[1];
+                                return (value === null || value === void 0 ? void 0 : value.type) === 'function' || (value === null || value === void 0 ? void 0 : value.type) === 'method';
+                            })
+                                .map(function (_a) {
+                                var key = _a[0];
+                                return key;
                             });
-                        };
+                            return (0, replace_identifiers_1.replaceIdentifiers)({
+                                code: code,
+                                from: allMethodNames,
+                                to: function (name) { return "this.".concat(name); },
+                            });
+                        });
                     case 'bindings':
                         return function (code) {
-                            return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+                            var newLocal = processAngularCode({
                                 contextVars: [],
                                 outputVars: outputVars,
                                 domRefs: [], // the template doesn't need the this keyword.
-                            }).replace(/"/g, '&quot;');
+                            })(code);
+                            return newLocal.replace(/"/g, '&quot;');
                         };
                     case 'hooks-deps':
                     case 'state':
@@ -321,15 +347,13 @@ var componentToAngular = function (userOptions) {
         (0, strip_meta_properties_1.stripMetaProperties)(json);
         var dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
             format: 'class',
-            valueMapper: function (code) {
-                return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
-                    replaceWith: 'this.',
-                    contextVars: contextVars,
-                    outputVars: outputVars,
-                    domRefs: Array.from(domRefs),
-                    stateVars: stateVars,
-                });
-            },
+            valueMapper: processAngularCode({
+                replaceWith: 'this',
+                contextVars: contextVars,
+                outputVars: outputVars,
+                domRefs: Array.from(domRefs),
+                stateVars: stateVars,
+            }),
         });
         // Preparing built in component metadata parameters
         var componentMetadata = __assign(__assign({ selector: "'".concat((0, lodash_1.kebabCase)(json.name || 'my-component'), ", ").concat(json.name, "'"), template: "`\n        ".concat((0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${'), "\n        `") }, (css.length
@@ -348,7 +372,22 @@ var componentToAngular = function (userOptions) {
             var key = _a[0], value = _a[1];
             componentMetadata[key] = value;
         });
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n    })\n    export class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n    })\n    export class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', options.standalone ? "import { CommonModule } from '@angular/common';" : '', json.types ? json.types.join('\n') : '', !json.defaultProps ? '' : "const defaultProps = ".concat(json5_1.default.stringify(json.defaultProps), "\n"), (0, render_imports_1.renderPreComponent)({
+        var getPropsDefinition = function (_a) {
+            var json = _a.json;
+            if (!json.defaultProps)
+                return '';
+            var defalutPropsString = Object.keys(json.defaultProps)
+                .map(function (prop) {
+                var _a;
+                var value = json.defaultProps.hasOwnProperty(prop)
+                    ? (_a = json.defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code
+                    : '{}';
+                return "".concat(prop, ": ").concat(value);
+            })
+                .join(',');
+            return "const defaultProps = {".concat(defalutPropsString, "};\n");
+        };
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n    })\n    export class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n    })\n    export class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', options.standalone ? "import { CommonModule } from '@angular/common';" : '', json.types ? json.types.join('\n') : '', getPropsDefinition({ json: json }), (0, render_imports_1.renderPreComponent)({
             component: json,
             target: 'angular',
             excludeMitosisComponents: !options.standalone && !options.preserveImports,
@@ -377,13 +416,13 @@ var componentToAngular = function (userOptions) {
             var argument = json.refs[ref].argument;
             var typeParameter = json.refs[ref].typeParameter;
             return "private _".concat(ref).concat(typeParameter ? ": ".concat(typeParameter) : '').concat(argument
-                ? " = ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(argument, {
+                ? " = ".concat(processAngularCode({
                     replaceWith: 'this.',
                     contextVars: contextVars,
                     outputVars: outputVars,
                     domRefs: Array.from(domRefs),
                     stateVars: stateVars,
-                }))
+                })(argument))
                 : '', ";");
         })
             .join('\n'), !hasConstructor

package/dist/src/generators/context/helpers/context-with-symbol-key.d.ts

@@ -0,0 +1,5 @@
+import { MitosisContext } from '../../../types/mitosis-context';
+import { BaseTranspilerOptions } from '../../../types/transpiler';
+export declare const getContextWithSymbolKey: (options: Pick<BaseTranspilerOptions, 'prettier'>) => ({ context }: {
+    context: MitosisContext;
+}) => string;

package/dist/src/generators/context/helpers/context-with-symbol-key.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContextWithSymbolKey = void 0;
+var standalone_1 = require("prettier/standalone");
+var get_state_object_string_1 = require("../../../helpers/get-state-object-string");
+var getContextWithSymbolKey = function (options) {
+    return function (_a) {
+        var context = _a.context;
+        var str = "\n  const key = Symbol();  \n\n  export default {\n    ".concat(context.name, ": ").concat((0, get_state_object_string_1.stringifyContextValue)(context.value), ", \n    key \n  }\n  ");
+        if (options.prettier !== false) {
+            try {
+                str = (0, standalone_1.format)(str, {
+                    parser: 'typescript',
+                    plugins: [
+                        require('prettier/parser-typescript'), // To support running in browsers
+                    ],
+                });
+            }
+            catch (err) {
+                console.error('Format error for file:', str);
+                throw err;
+            }
+        }
+        return str;
+    };
+};
+exports.getContextWithSymbolKey = getContextWithSymbolKey;

package/dist/src/generators/context/svelte.d.ts

@@ -1,11 +1,7 @@
-import { MitosisContext } from '../../types/mitosis-context';
 import { BaseTranspilerOptions } from '../../types/transpiler';
-interface ContextToSvelteOptions extends Pick<BaseTranspilerOptions, 'prettier'> {
-}
 /**
  * TO-DO: support types
  */
-export declare const contextToSvelte: (options?: ContextToSvelteOptions) => ({ context }: {
-    context: MitosisContext;
+export declare const contextToSvelte: (options: Pick<BaseTranspilerOptions, "prettier">) => ({ context }: {
+    context: import("../../types/mitosis-context").MitosisContext;
 }) => string;
-export {};

package/dist/src/generators/context/svelte.js

@@ -1,31 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.contextToSvelte = void 0;
-var standalone_1 = require("prettier/standalone");
-var get_state_object_string_1 = require("../../helpers/get-state-object-string");
+var context_with_symbol_key_1 = require("./helpers/context-with-symbol-key");
 /**
  * TO-DO: support types
  */
-var contextToSvelte = function (options) {
-    if (options === void 0) { options = {}; }
-    return function (_a) {
-        var context = _a.context;
-        var str = "\n  const key = Symbol();  \n\n  export default {\n    ".concat(context.name, ": ").concat((0, get_state_object_string_1.stringifyContextValue)(context.value), ", \n    key \n  }\n  ");
-        if (options.prettier !== false) {
-            try {
-                str = (0, standalone_1.format)(str, {
-                    parser: 'typescript',
-                    plugins: [
-                        require('prettier/parser-typescript'), // To support running in browsers
-                    ],
-                });
-            }
-            catch (err) {
-                console.error('Format error for file:', str);
-                throw err;
-            }
-        }
-        return str;
-    };
-};
-exports.contextToSvelte = contextToSvelte;
+exports.contextToSvelte = context_with_symbol_key_1.getContextWithSymbolKey;

package/dist/src/generators/context/vue.d.ts

@@ -1,6 +1,3 @@
-import { MitosisContext } from '../../types/mitosis-context';
-declare type ContextToVueOptions = {
-    format?: boolean;
-};
-export declare function contextToVue(context: MitosisContext, options?: ContextToVueOptions): string;
-export {};
+export declare const contextToVue: (options: Pick<import("../..").BaseTranspilerOptions, "prettier">) => ({ context }: {
+    context: import("../../types/mitosis-context").MitosisContext;
+}) => string;

package/dist/src/generators/context/vue.js

@@ -1,9 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.contextToVue = void 0;
-function contextToVue(context, options) {
-    if (options === void 0) { options = {}; }
-    var str = "\n    // Noop file\n    export default {};\n  ";
-    return str;
-}
-exports.contextToVue = contextToVue;
+var context_with_symbol_key_1 = require("./helpers/context-with-symbol-key");
+exports.contextToVue = context_with_symbol_key_1.getContextWithSymbolKey;

package/dist/src/generators/html.js

@@ -55,6 +55,7 @@ var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
 var render_imports_1 = require("../helpers/render-imports");
 var for_1 = require("../helpers/nodes/for");
+var function_1 = require("fp-ts/lib/function");
 var isAttribute = function (key) {
     return /-/.test(key);
 };
@@ -157,6 +158,22 @@ var createGlobalId = function (name, options) {
     options.namesMap[name] = newNameNum;
     return "".concat(name).concat(options.prefix ? "-".concat(options.prefix) : '', "-").concat(newNameNum);
 };
+var deprecatedStripStateAndPropsRefs = function (code, _a) {
+    var context = _a.context, contextVars = _a.contextVars, domRefs = _a.domRefs, includeProps = _a.includeProps, includeState = _a.includeState, outputVars = _a.outputVars, replaceWith = _a.replaceWith, stateVars = _a.stateVars;
+    return (0, function_1.pipe)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+        includeProps: includeProps,
+        includeState: includeState,
+        replaceWith: replaceWith,
+    }), function (newCode) {
+        return (0, strip_state_and_props_refs_1.DO_NOT_USE_VARS_TRANSFORMS)(newCode, {
+            context: context,
+            contextVars: contextVars,
+            domRefs: domRefs,
+            outputVars: outputVars,
+            stateVars: stateVars,
+        });
+    });
+};
 // TODO: overloaded function
 var updateReferencesInCode = function (code, options, blockOptions) {
     var _a, _b;
@@ -165,23 +182,22 @@ var updateReferencesInCode = function (code, options, blockOptions) {
     var context = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.context) || 'this.';
     if ((_a = options === null || options === void 0 ? void 0 : options.experimental) === null || _a === void 0 ? void 0 : _a.updateReferencesInCode) {
         return (_b = options === null || options === void 0 ? void 0 : options.experimental) === null || _b === void 0 ? void 0 : _b.updateReferencesInCode(code, options, {
-            stripStateAndPropsRefs: strip_state_and_props_refs_1.stripStateAndPropsRefs,
+            stripStateAndPropsRefs: deprecatedStripStateAndPropsRefs,
         });
     }
     if (options.format === 'class') {
-        return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+        return (0, function_1.pipe)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
             includeProps: false,
             includeState: true,
             replaceWith: context + 'state.',
-            context: context,
-        }), {
-            // TODO: replace with `this.` and add setters that call this.update()
-            includeProps: true,
-            includeState: false,
-            replaceWith: context + 'props.',
-            contextVars: contextVars,
-            context: context,
-        });
+        }), function (newCode) {
+            return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(newCode, {
+                // TODO: replace with `this.` and add setters that call this.update()
+                includeProps: true,
+                includeState: false,
+                replaceWith: context + 'props.',
+            });
+        }, function (newCode) { return (0, strip_state_and_props_refs_1.DO_NOT_USE_CONTEXT_VARS_TRANSFORMS)({ code: newCode, context: context, contextVars: contextVars }); });
     }
     return code;
 };
@@ -598,19 +614,25 @@ var componentToCustomElement = function (options) {
             ? "this.context = ".concat(setContext[0].ref)
             : '', "\n\n          ").concat(!((_o = (_m = json.hooks) === null || _m === void 0 ? void 0 : _m.onInit) === null || _o === void 0 ? void 0 : _o.code) ? '' : 'this.onInitOnce = false;', "\n\n          this.state = ").concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
             valueMapper: function (value) {
-                return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(addUpdateAfterSetInCode(value, useOptions, 'self.update'), {
+                return (0, function_1.pipe)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(addUpdateAfterSetInCode(value, useOptions, 'self.update'), {
                     includeProps: false,
                     includeState: true,
                     // TODO: if it's an arrow function it's this.state.
                     replaceWith: 'self.state.',
-                }), {
-                    // TODO: replace with `this.` and add setters that call this.update()
-                    includeProps: true,
-                    includeState: false,
-                    replaceWith: 'self.props.',
-                    contextVars: contextVars,
-                    // correctly ref the class not state object
-                    context: 'self.',
+                }), function (newCode) {
+                    return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(newCode, {
+                        // TODO: replace with `this.` and add setters that call this.update()
+                        includeProps: true,
+                        includeState: false,
+                        replaceWith: 'self.props.',
+                    });
+                }, function (code) {
+                    return (0, strip_state_and_props_refs_1.DO_NOT_USE_CONTEXT_VARS_TRANSFORMS)({
+                        code: code,
+                        contextVars: contextVars,
+                        // correctly ref the class not state object
+                        context: 'self.',
+                    });
                 });
             },
         }), ";\n          if (!this.props) {\n            this.props = {};\n          }\n          ").concat(!componentHasProps

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

@@ -108,21 +108,27 @@ var blockToMarko = function (json, options) {
 };
 function processBinding(json, code, type) {
     if (type === void 0) { type = 'attribute'; }
-    return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
-        replaceWith: type === 'state' ? 'input.' : type === 'class' ? 'this.input.' : 'input.',
-        includeProps: true,
-        includeState: false,
-    }), {
-        replaceWith: function (key) {
-            var isProperty = getStatePropertyNames(json).includes(key);
-            if (isProperty) {
-                return (type === 'state' || type === 'class' ? 'this.state.' : 'state.') + key;
-            }
-            return (type === 'class' || type === 'state' ? 'this.' : 'component.') + key;
-        },
-        includeProps: false,
-        includeState: true,
-    });
+    try {
+        return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+            replaceWith: type === 'state' ? 'input.' : type === 'class' ? 'this.input.' : 'input.',
+            includeProps: true,
+            includeState: false,
+        }), {
+            replaceWith: function (key) {
+                var isProperty = getStatePropertyNames(json).includes(key);
+                if (isProperty) {
+                    return (type === 'state' || type === 'class' ? 'this.state.' : 'state.') + key;
+                }
+                return (type === 'class' || type === 'state' ? 'this.' : 'component.') + key;
+            },
+            includeProps: false,
+            includeState: true,
+        });
+    }
+    catch (error) {
+        console.error('Marko: could not process binding', code);
+        return code;
+    }
 }
 var componentToMarko = function (userOptions) {
     if (userOptions === void 0) { userOptions = {}; }

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

@@ -1,8 +1,9 @@
 import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
+import { MitosisComponent } from '../types/mitosis-component';
 import { MitosisNode } from '../types/mitosis-node';
 export interface ToMitosisOptions extends BaseTranspilerOptions {
     format: 'react' | 'legacy';
 }
 export declare const DEFAULT_FORMAT: ToMitosisOptions['format'];
-export declare const blockToMitosis: (json: MitosisNode, toMitosisOptions?: Partial<ToMitosisOptions>) => string;
+export declare const blockToMitosis: (json: MitosisNode, toMitosisOptions: Partial<ToMitosisOptions> | undefined, component: MitosisComponent) => string;
 export declare const componentToMitosis: TranspilerGenerator<Partial<ToMitosisOptions>>;

package/dist/src/generators/mitosis.js

@@ -46,7 +46,7 @@ exports.DEFAULT_FORMAT = 'legacy';
 var isValidAttributeName = function (str) {
     return Boolean(str && /^[$a-z0-9\-_:]+$/i.test(str));
 };
-var blockToMitosis = function (json, toMitosisOptions) {
+var blockToMitosis = function (json, toMitosisOptions, component) {
     var _a, _b, _c, _d, _e, _f;
     if (toMitosisOptions === void 0) { toMitosisOptions = {}; }
     var options = __assign({ format: exports.DEFAULT_FORMAT }, toMitosisOptions);
@@ -56,11 +56,11 @@ var blockToMitosis = function (json, toMitosisOptions) {
             stateType: 'useState',
             stylesType: 'emotion',
             prettier: options.prettier,
-        });
+        }, component);
     }
     if ((0, mitosis_node_1.checkIsForNode)(json)) {
         var needsWrapper = json.children.length !== 1;
-        return "<For each={".concat((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code, "}>\n    {(").concat(json.scope.forName, ", index) =>\n      ").concat(needsWrapper ? '<>' : '', "\n        ").concat(json.children.map(function (child) { return (0, exports.blockToMitosis)(child, options); }), "}\n      ").concat(needsWrapper ? '</>' : '', "\n    </For>");
+        return "<For each={".concat((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code, "}>\n    {(").concat(json.scope.forName, ", index) =>\n      ").concat(needsWrapper ? '<>' : '', "\n        ").concat(json.children.map(function (child) { return (0, exports.blockToMitosis)(child, options, component); }), "}\n      ").concat(needsWrapper ? '</>' : '', "\n    </For>");
     }
     if (json.properties._text) {
         return json.properties._text;
@@ -106,7 +106,7 @@ var blockToMitosis = function (json, toMitosisOptions) {
     }
     str += '>';
     if (json.children) {
-        str += json.children.map(function (item) { return (0, exports.blockToMitosis)(item, options); }).join('\n');
+        str += json.children.map(function (item) { return (0, exports.blockToMitosis)(item, options, component); }).join('\n');
     }
     str += "</".concat(json.name, ">");
     return str;
@@ -159,7 +159,7 @@ var componentToMitosis = function (toMitosisOptions) {
             ? ''
             : "import { ".concat(!hasState ? '' : 'useStore, ', " ").concat(!refs.length ? '' : 'useRef, ', " ").concat(mitosisComponents.join(', '), " } from '@builder.io/mitosis';"), !otherComponents.length ? '' : "import { ".concat(otherComponents.join(','), " } from '@components';"), json.types ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({ component: json, target: 'mitosis' }), stringifiedUseMetadata && stringifiedUseMetadata !== '{}'
             ? "".concat(jsx_1.METADATA_HOOK_NAME, "(").concat(stringifiedUseMetadata, ")")
-            : '', component.name, !hasState ? '' : "const state = useStore(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");"), getRefsString(json, refs), !((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? '' : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), !((_c = json.hooks.onUnMount) === null || _c === void 0 ? void 0 : _c.code) ? '' : "onUnMount(() => { ".concat(json.hooks.onUnMount.code, " })"), addWrapper ? '<>' : '', json.children.map(function (item) { return (0, exports.blockToMitosis)(item, options); }).join('\n'), addWrapper ? '</>' : '');
+            : '', component.name, !hasState ? '' : "const state = useStore(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");"), getRefsString(json, refs), !((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? '' : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), !((_c = json.hooks.onUnMount) === null || _c === void 0 ? void 0 : _c.code) ? '' : "onUnMount(() => { ".concat(json.hooks.onUnMount.code, " })"), addWrapper ? '<>' : '', json.children.map(function (item) { return (0, exports.blockToMitosis)(item, options, component); }).join('\n'), addWrapper ? '</>' : '');
         if (options.prettier !== false) {
             try {
                 str = (0, standalone_1.format)(str, {

package/dist/src/generators/qwik/src-generator.js

@@ -358,6 +358,8 @@ var SrcBuilder = /** @class */ (function () {
             if (value) {
                 if (key === 'innerHTML')
                     key = 'dangerouslySetInnerHTML';
+                if (key === 'for')
+                    key = 'htmlFor';
                 if (key === 'dataSet')
                     return; // ignore
                 if (self.isJSX) {

package/dist/src/generators/react/generator.d.ts

@@ -1,7 +1,8 @@
 import { TranspilerGenerator } from '../../types/transpiler';
+import { MitosisComponent } from '../../types/mitosis-component';
 import { MitosisNode } from '../../types/mitosis-node';
 import { ToReactOptions } from './types';
 export declare const contextPropDrillingKey = "_context";
-export declare const blockToReact: (json: MitosisNode, options: ToReactOptions, parentSlots?: any[]) => string;
+export declare const blockToReact: (json: MitosisNode, options: ToReactOptions, component: MitosisComponent, parentSlots?: any[]) => string;
 export declare const componentToPreact: TranspilerGenerator<ToReactOptions>;
 export declare const componentToReact: TranspilerGenerator<ToReactOptions>;