@builder.io/mitosis 0.0.81 → 0.0.82

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,6 +52,7 @@ 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");
@@ -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,7 +81,7 @@ var mappers = {
                 return value.code;
             }
         })
-            .join('\n'), "</ng-content>");
+            .join('\n')).concat(renderChildren(), "</ng-content>");
     },
 };
 var generateNgModule = function (content, name, componentsUsed, component, bootstrapMapper) {
@@ -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/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>;

package/dist/src/generators/react/generator.js

@@ -67,50 +67,90 @@ var isRootSpecialNode = function (json) {
 };
 var wrapInFragment = function (json) { return json.children.length !== 1; };
 var NODE_MAPPERS = {
-    Slot: function (json, options, parentSlots) {
+    Slot: function (json, options, component, parentSlots) {
         var _a;
-        if (!json.bindings.name) {
+        var _b, _c;
+        var slotName = ((_b = json.bindings.name) === null || _b === void 0 ? void 0 : _b.code) || json.properties.name;
+        var hasChildren = json.children.length;
+        var renderChildren = function () {
+            var _a;
+            var childrenStr = (_a = json.children) === null || _a === void 0 ? void 0 : _a.map(function (item) { return (0, exports.blockToReact)(item, options, component); }).join('\n').trim();
+            /**
+             * Ad-hoc way of figuring out if the children defaultProp is:
+             * - a JSX element, e.g. `<div>foo</div>`
+             * - a JS expression, e.g. `true`, `false`
+             * - a string, e.g. `'Default text'`
+             *
+             * and correctly wrapping it in quotes when appropriate.
+             */
+            if (childrenStr.startsWith("<") && childrenStr.endsWith(">")) {
+                return childrenStr;
+            }
+            else if (['false', 'true', 'null', 'undefined'].includes(childrenStr)) {
+                return childrenStr;
+            }
+            else {
+                return "\"".concat(childrenStr, "\"");
+            }
+        };
+        if (!slotName) {
             // TODO: update MitosisNode for simple code
             var key = Object.keys(json.bindings).find(Boolean);
             if (key && parentSlots) {
                 var propKey = (0, lodash_1.camelCase)('Slot' + key[0].toUpperCase() + key.substring(1));
-                parentSlots.push({ key: propKey, value: (_a = json.bindings[key]) === null || _a === void 0 ? void 0 : _a.code });
+                parentSlots.push({ key: propKey, value: (_c = json.bindings[key]) === null || _c === void 0 ? void 0 : _c.code });
                 return '';
             }
+            if (hasChildren) {
+                component.defaultProps = __assign(__assign({}, (component.defaultProps || {})), { children: {
+                        code: renderChildren(),
+                        type: 'property',
+                    } });
+            }
             return "{".concat((0, helpers_2.processBinding)('props.children', options), "}");
         }
-        var slotProp = (0, helpers_2.processBinding)(json.bindings.name.code, options).replace('name=', '');
+        var slotProp = (0, helpers_2.processBinding)(slotName, options).replace('name=', '');
+        if (!slotProp.startsWith('props.slot')) {
+            slotProp = "props.slot".concat((0, lodash_1.upperFirst)((0, lodash_1.camelCase)(slotProp)));
+        }
+        if (hasChildren) {
+            component.defaultProps = __assign(__assign({}, (component.defaultProps || {})), (_a = {}, _a[slotProp.replace('props.', '')] = {
+                code: renderChildren(),
+                type: 'property',
+            }, _a));
+        }
         return "{".concat(slotProp, "}");
     },
-    Fragment: function (json, options) {
+    Fragment: function (json, options, component) {
         var wrap = wrapInFragment(json);
         return "".concat(wrap ? getFragment('open', options) : '').concat(json.children
-            .map(function (item) { return (0, exports.blockToReact)(item, options); })
+            .map(function (item) { return (0, exports.blockToReact)(item, options, component); })
             .join('\n')).concat(wrap ? getFragment('close', options) : '');
     },
-    For: function (_json, options) {
+    For: function (_json, options, component) {
         var _a;
         var json = _json;
         var wrap = wrapInFragment(json);
         var forArguments = (0, for_1.getForArguments)(json).join(', ');
         return "{".concat((0, helpers_2.processBinding)((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code, options), "?.map((").concat(forArguments, ") => (\n      ").concat(wrap ? openFrag(options) : '').concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (item) { return (0, exports.blockToReact)(item, options); })
+            .map(function (item) { return (0, exports.blockToReact)(item, options, component); })
             .join('\n')).concat(wrap ? closeFrag(options) : '', "\n    ))}");
     },
-    Show: function (json, options) {
+    Show: function (json, options, component) {
         var _a;
         var wrap = wrapInFragment(json);
         return "{".concat((0, helpers_2.processBinding)((_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code, options), " ? (\n      ").concat(wrap ? openFrag(options) : '').concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (item) { return (0, exports.blockToReact)(item, options); })
-            .join('\n')).concat(wrap ? closeFrag(options) : '', "\n    ) : ").concat(!json.meta.else ? 'null' : (0, exports.blockToReact)(json.meta.else, options), "}");
+            .map(function (item) { return (0, exports.blockToReact)(item, options, component); })
+            .join('\n')).concat(wrap ? closeFrag(options) : '', "\n    ) : ").concat(!json.meta.else ? 'null' : (0, exports.blockToReact)(json.meta.else, options, component), "}");
     },
 };
 var ATTTRIBUTE_MAPPERS = {
     spellcheck: 'spellCheck',
     autocapitalize: 'autoCapitalize',
     autocomplete: 'autoComplete',
+    for: 'htmlFor',
 };
 // TODO: Maybe in the future allow defining `string | function` as values
 var BINDING_MAPPERS = __assign({ ref: function (ref, value, options) {
@@ -126,10 +166,10 @@ var BINDING_MAPPERS = __assign({ ref: function (ref, value, options) {
     }, innerHTML: function (_key, value) {
         return ['dangerouslySetInnerHTML', "{__html: ".concat(value.replace(/\s+/g, ' '), "}")];
     } }, ATTTRIBUTE_MAPPERS);
-var blockToReact = function (json, options, parentSlots) {
+var blockToReact = function (json, options, component, parentSlots) {
     var _a, _b, _c;
     if (NODE_MAPPERS[json.name]) {
-        return NODE_MAPPERS[json.name](json, options, parentSlots);
+        return NODE_MAPPERS[json.name](json, options, component, parentSlots);
     }
     if (json.properties._text) {
         var text = json.properties._text;
@@ -150,7 +190,7 @@ var blockToReact = function (json, options, parentSlots) {
     for (var key in json.properties) {
         var value = (json.properties[key] || '').replace(/"/g, '&quot;').replace(/\n/g, '\\n');
         if (key === 'class') {
-            str += " className=\"".concat(value, "\" ");
+            str = "".concat(str.trim(), " className=\"").concat(value, "\" ");
         }
         else if (BINDING_MAPPERS[key]) {
             var mapper = BINDING_MAPPERS[key];
@@ -217,7 +257,7 @@ var blockToReact = function (json, options, parentSlots) {
     var childrenNodes = '';
     if (json.children) {
         childrenNodes = json.children
-            .map(function (item) { return (0, exports.blockToReact)(item, options, needsToRenderSlots); })
+            .map(function (item) { return (0, exports.blockToReact)(item, options, component, needsToRenderSlots); })
             .join('\n');
     }
     if (needsToRenderSlots.length) {
@@ -226,7 +266,7 @@ var blockToReact = function (json, options, parentSlots) {
             str += " ".concat(key, "={").concat(value, "} ");
         });
     }
-    str += '>';
+    str = str.trim() + '>';
     if (json.children) {
         str += childrenNodes;
     }
@@ -428,6 +468,21 @@ var _componentToReact = function (json, options, isSubComponent) {
     var nativeStyles = stylesType === 'react-native' && componentHasStyles && (0, react_native_1.collectReactNativeStyles)(json);
     var propType = json.propsTypeRef || 'any';
     var propsArgs = "props".concat(options.typescript ? ":".concat(propType) : '');
+    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 "".concat(json.name || 'MyComponent', ".defaultProps = {").concat(defalutPropsString, "};");
+    };
     var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "", "function ", "(", "", ") {\n    ", "\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n\n  "], ["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "", "function ", "(", "", ") {\n    ", "\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n\n  "])), options.preact
         ? "\n    /** @jsx h */\n    import { h, Fragment } from 'preact';\n    "
         : options.type !== 'native'
@@ -472,13 +527,11 @@ var _componentToReact = function (json, options, isSubComponent) {
             str: json.hooks.onUnMount.code,
             options: options,
         }), "\n            }\n          }, [])")
-        : '', wrap ? openFrag(options) : '', json.children.map(function (item) { return (0, exports.blockToReact)(item, options); }).join('\n'), componentHasStyles && stylesType === 'styled-jsx'
+        : '', wrap ? openFrag(options) : '', json.children.map(function (item) { return (0, exports.blockToReact)(item, options, json, []); }).join('\n'), componentHasStyles && stylesType === 'styled-jsx'
         ? "<style jsx>{`".concat(css, "`}</style>")
         : componentHasStyles && stylesType === 'style-tag'
             ? "<style>{`".concat(css, "`}</style>")
-            : '', wrap ? closeFrag(options) : '', isForwardRef ? ')' : '', !json.defaultProps
-        ? ''
-        : "".concat(json.name || 'MyComponent', ".defaultProps = ").concat(json5_1.default.stringify(json.defaultProps), ";"), !nativeStyles
+            : '', wrap ? closeFrag(options) : '', isForwardRef ? ')' : '', getPropsDefinition({ json: json }), !nativeStyles
         ? ''
         : "\n      const styles = StyleSheet.create(".concat(json5_1.default.stringify(nativeStyles), ");\n    "), styledComponentsCode ? styledComponentsCode : '', stateType === 'mobx'
         ? "\n      const observed".concat(json.name || 'MyComponent', " = observer(").concat(json.name || 'MyComponent', ");\n      export default observed").concat(json.name || 'MyComponent', ";\n    ")