@builder.io/mitosis 0.0.104-0 → 0.0.105

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

@@ -12,23 +12,23 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToAlpine = exports.isValidAlpineBinding = exports.checkIsComponentNode = void 0;
+var lodash_1 = require("lodash");
 var standalone_1 = require("prettier/standalone");
-var collect_css_1 = require("../../helpers/styles/collect-css");
+var babel_transform_1 = require("../../helpers/babel-transform");
+var dash_case_1 = require("../../helpers/dash-case");
 var fast_clone_1 = require("../../helpers/fast-clone");
+var get_refs_1 = require("../../helpers/get-refs");
+var get_state_object_string_1 = require("../../helpers/get-state-object-string");
+var remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
+var replace_identifiers_1 = require("../../helpers/replace-identifiers");
+var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
 var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+var collect_css_1 = require("../../helpers/styles/collect-css");
+var plugins_1 = require("../../modules/plugins");
 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 replace_identifiers_1 = require("../../helpers/replace-identifiers");
+var render_update_hooks_1 = require("./render-update-hooks");
 var checkIsComponentNode = function (node) {
     return node.name === '@builder.io/mitosis/component';
 };

package/dist/src/generators/angular.js

@@ -28,33 +28,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToAngular = exports.blockToAngular = void 0;
+var function_1 = require("fp-ts/lib/function");
+var lodash_1 = require("lodash");
 var standalone_1 = require("prettier/standalone");
+var html_tags_1 = require("../constants/html_tags");
 var dedent_1 = require("../helpers/dedent");
-var collect_css_1 = require("../helpers/styles/collect-css");
 var fast_clone_1 = require("../helpers/fast-clone");
+var get_components_used_1 = require("../helpers/get-components-used");
+var get_custom_imports_1 = require("../helpers/get-custom-imports");
+var get_prop_functions_1 = require("../helpers/get-prop-functions");
+var get_props_1 = require("../helpers/get-props");
+var get_props_ref_1 = require("../helpers/get-props-ref");
 var get_refs_1 = require("../helpers/get-refs");
 var get_state_object_string_1 = require("../helpers/get-state-object-string");
+var indent_1 = require("../helpers/indent");
+var is_children_1 = __importDefault(require("../helpers/is-children"));
+var is_upper_case_1 = require("../helpers/is-upper-case");
 var map_refs_1 = require("../helpers/map-refs");
+var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
 var render_imports_1 = require("../helpers/render-imports");
+var replace_identifiers_1 = require("../helpers/replace-identifiers");
+var slots_1 = require("../helpers/slots");
+var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
+var collect_css_1 = require("../helpers/styles/collect-css");
+var plugins_1 = require("../modules/plugins");
 var jsx_1 = require("../parsers/jsx");
 var mitosis_node_1 = require("../types/mitosis-node");
-var plugins_1 = require("../modules/plugins");
-var is_children_1 = __importDefault(require("../helpers/is-children"));
-var get_props_1 = require("../helpers/get-props");
-var get_props_ref_1 = require("../helpers/get-props-ref");
-var get_prop_functions_1 = require("../helpers/get-prop-functions");
-var lodash_1 = require("lodash");
-var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
-var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
-var indent_1 = require("../helpers/indent");
-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', 'Slot']);

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

@@ -1,5 +1,5 @@
-import { MitosisNode } from '../types/mitosis-node';
 import { BuilderContent, BuilderElement } from '@builder.io/sdk';
+import { MitosisNode } from '../types/mitosis-node';
 import { BaseTranspilerOptions, TranspilerArgs } from '../types/transpiler';
 export interface ToBuilderOptions extends BaseTranspilerOptions {
     includeIds?: boolean;

package/dist/src/generators/builder.js

@@ -19,22 +19,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToBuilder = exports.blockToBuilder = void 0;
-var get_state_object_string_1 = require("../helpers/get-state-object-string");
-var fast_clone_1 = require("../helpers/fast-clone");
-var dedent_1 = require("../helpers/dedent");
-var standalone_1 = require("prettier/standalone");
 var json5_1 = __importDefault(require("json5"));
-var is_upper_case_1 = require("../helpers/is-upper-case");
+var lodash_1 = require("lodash");
+var standalone_1 = require("prettier/standalone");
+var traverse_1 = __importDefault(require("traverse"));
 var media_sizes_1 = require("../constants/media-sizes");
+var dedent_1 = require("../helpers/dedent");
+var fast_clone_1 = require("../helpers/fast-clone");
 var filter_empty_text_nodes_1 = require("../helpers/filter-empty-text-nodes");
-var is_component_1 = require("../helpers/is-component");
+var get_state_object_string_1 = require("../helpers/get-state-object-string");
 var has_props_1 = require("../helpers/has-props");
-var lodash_1 = require("lodash");
-var builder_1 = require("../parsers/builder");
+var is_component_1 = require("../helpers/is-component");
+var is_upper_case_1 = require("../helpers/is-upper-case");
 var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
-var traverse_1 = __importDefault(require("traverse"));
-var symbol_processor_1 = require("../symbols/symbol-processor");
 var state_1 = require("../helpers/state");
+var builder_1 = require("../parsers/builder");
+var symbol_processor_1 = require("../symbols/symbol-processor");
 var omitMetaProperties = function (obj) {
     return (0, lodash_1.omitBy)(obj, function (_value, key) { return key.startsWith('$'); });
 };

package/dist/src/generators/html.js

@@ -26,36 +26,35 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToCustomElement = exports.componentToHtml = void 0;
 var core_1 = require("@babel/core");
 var lodash_1 = require("lodash");
-var lodash_2 = require("lodash");
 var standalone_1 = require("prettier/standalone");
-var has_props_1 = require("../helpers/has-props");
-var has_stateful_dom_1 = require("../helpers/has-stateful-dom");
-var get_refs_1 = require("../helpers/get-refs");
-var map_refs_1 = require("../helpers/map-refs");
 var traverse_1 = __importDefault(require("traverse"));
 var babel_transform_1 = require("../helpers/babel-transform");
-var collect_css_1 = require("../helpers/styles/collect-css");
 var dash_case_1 = require("../helpers/dash-case");
 var fast_clone_1 = require("../helpers/fast-clone");
+var get_prop_functions_1 = require("../helpers/get-prop-functions");
+var get_props_1 = require("../helpers/get-props");
+var get_props_ref_1 = require("../helpers/get-props-ref");
+var get_refs_1 = require("../helpers/get-refs");
 var get_state_object_string_1 = require("../helpers/get-state-object-string");
-var has_component_1 = require("../helpers/has-component");
 var has_bindings_text_1 = require("../helpers/has-bindings-text");
+var has_component_1 = require("../helpers/has-component");
+var has_props_1 = require("../helpers/has-props");
+var has_stateful_dom_1 = require("../helpers/has-stateful-dom");
+var is_children_1 = __importDefault(require("../helpers/is-children"));
 var is_component_1 = require("../helpers/is-component");
-var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
 var is_html_attribute_1 = require("../helpers/is-html-attribute");
-var get_props_1 = require("../helpers/get-props");
-var get_props_ref_1 = require("../helpers/get-props-ref");
-var get_prop_functions_1 = require("../helpers/get-prop-functions");
-var jsx_1 = require("../parsers/jsx");
-var mitosis_node_1 = require("../types/mitosis-node");
-var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
-var plugins_1 = require("../modules/plugins");
-var is_children_1 = __importDefault(require("../helpers/is-children"));
-var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
+var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
+var map_refs_1 = require("../helpers/map-refs");
 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 strip_meta_properties_1 = require("../helpers/strip-meta-properties");
+var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
+var collect_css_1 = require("../helpers/styles/collect-css");
+var plugins_1 = require("../modules/plugins");
+var jsx_1 = require("../parsers/jsx");
+var mitosis_node_1 = require("../types/mitosis-node");
 var function_1 = require("fp-ts/lib/function");
+var for_1 = require("../helpers/nodes/for");
 var isAttribute = function (key) {
     return /-/.test(key);
 };
@@ -273,7 +272,7 @@ var blockToHtml = function (json, options, blockOptions) {
     }
     else {
         var component = childComponents.find(function (impName) { return impName === json.name; });
-        var elSelector = component ? (0, lodash_2.kebabCase)(json.name) : json.name;
+        var elSelector = component ? (0, lodash_1.kebabCase)(json.name) : json.name;
         str += "<".concat(elSelector, " ");
         // For now, spread is not supported
         // if (json.bindings._spread === '_spread') {
@@ -509,7 +508,7 @@ var componentToCustomElement = function (options) {
         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14;
         var component = _a.component;
         var ComponentName = component.name;
-        var kebabName = (0, lodash_2.kebabCase)(ComponentName);
+        var kebabName = (0, lodash_1.kebabCase)(ComponentName);
         var useOptions = __assign(__assign({ prefix: kebabName }, options), { onChangeJsById: {}, js: '', namesMap: {}, format: 'class' });
         var json = (0, fast_clone_1.fastClone)(component);
         if (options.plugins) {

package/dist/src/generators/liquid.js

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToLiquid = exports.isValidLiquidBinding = 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 get_state_object_string_1 = require("../helpers/get-state-object-string");
+var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
+var collect_css_1 = require("../helpers/styles/collect-css");
+var plugins_1 = require("../modules/plugins");
 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");
 /**
  * Test if the binding expression would be likely to generate
  * valid or invalid liquid. If we generate invalid liquid tags

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

@@ -5,27 +5,27 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToLit = void 0;
+var lodash_1 = require("lodash");
 var standalone_1 = require("prettier/standalone");
+var dash_case_1 = require("../../helpers/dash-case");
 var dedent_1 = require("../../helpers/dedent");
+var fast_clone_1 = require("../../helpers/fast-clone");
+var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
+var get_props_1 = require("../../helpers/get-props");
+var get_refs_1 = require("../../helpers/get-refs");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
+var has_1 = require("../../helpers/has");
+var indent_1 = require("../../helpers/indent");
+var is_upper_case_1 = require("../../helpers/is-upper-case");
+var map_refs_1 = require("../../helpers/map-refs");
 var render_imports_1 = require("../../helpers/render-imports");
-var jsx_1 = require("../../parsers/jsx");
-var mitosis_node_1 = require("../../types/mitosis-node");
-var plugins_1 = require("../../modules/plugins");
-var fast_clone_1 = require("../../helpers/fast-clone");
 var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
-var collect_class_string_1 = require("./collect-class-string");
-var get_props_1 = require("../../helpers/get-props");
 var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
-var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
-var dash_case_1 = require("../../helpers/dash-case");
 var collect_css_1 = require("../../helpers/styles/collect-css");
-var indent_1 = require("../../helpers/indent");
-var map_refs_1 = require("../../helpers/map-refs");
-var get_refs_1 = require("../../helpers/get-refs");
-var lodash_1 = require("lodash");
-var is_upper_case_1 = require("../../helpers/is-upper-case");
-var has_1 = require("../../helpers/has");
+var plugins_1 = require("../../modules/plugins");
+var jsx_1 = require("../../parsers/jsx");
+var mitosis_node_1 = require("../../types/mitosis-node");
+var collect_class_string_1 = require("./collect-class-string");
 var getCustomTagName = function (name, options) {
     if (!name || !(0, is_upper_case_1.isUpperCase)(name[0])) {
         return name;

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

@@ -19,26 +19,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.markoFormatHtml = exports.postprocessHtml = exports.preprocessHtml = exports.componentToMarko = void 0;
+var hash_sum_1 = __importDefault(require("hash-sum"));
+var lodash_1 = require("lodash");
 var standalone_1 = require("prettier/standalone");
+var dash_case_1 = require("../../helpers/dash-case");
 var dedent_1 = require("../../helpers/dedent");
-var get_state_object_string_1 = require("../../helpers/get-state-object-string");
-var render_imports_1 = require("../../helpers/render-imports");
-var jsx_1 = require("../../parsers/jsx");
-var mitosis_node_1 = require("../../types/mitosis-node");
-var plugins_1 = require("../../modules/plugins");
 var fast_clone_1 = require("../../helpers/fast-clone");
-var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
-var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
-var collect_css_1 = require("../../helpers/styles/collect-css");
+var get_refs_1 = require("../../helpers/get-refs");
+var get_state_object_string_1 = require("../../helpers/get-state-object-string");
+var has_props_1 = require("../../helpers/has-props");
 var indent_1 = require("../../helpers/indent");
 var map_refs_1 = require("../../helpers/map-refs");
-var dash_case_1 = require("../../helpers/dash-case");
-var has_props_1 = require("../../helpers/has-props");
-var get_refs_1 = require("../../helpers/get-refs");
-var lodash_1 = require("lodash");
-var hash_sum_1 = __importDefault(require("hash-sum"));
 var for_1 = require("../../helpers/nodes/for");
+var render_imports_1 = require("../../helpers/render-imports");
+var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
+var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+var collect_css_1 = require("../../helpers/styles/collect-css");
+var plugins_1 = require("../../modules/plugins");
+var jsx_1 = require("../../parsers/jsx");
+var mitosis_node_1 = require("../../types/mitosis-node");
 // Having issues with this, so off for now
 var USE_MARKO_PRETTIER = false;
 /**

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

@@ -1,6 +1,6 @@
-import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 import { MitosisComponent } from '../types/mitosis-component';
 import { MitosisNode } from '../types/mitosis-node';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 export interface ToMitosisOptions extends BaseTranspilerOptions {
     format: 'react' | 'legacy';
 }

package/dist/src/generators/mitosis.js

@@ -35,13 +35,13 @@ var fast_clone_1 = require("../helpers/fast-clone");
 var get_components_1 = require("../helpers/get-components");
 var get_refs_1 = require("../helpers/get-refs");
 var get_state_object_string_1 = require("../helpers/get-state-object-string");
+var is_root_text_node_1 = require("../helpers/is-root-text-node");
 var map_refs_1 = require("../helpers/map-refs");
 var render_imports_1 = require("../helpers/render-imports");
+var state_1 = require("../helpers/state");
 var jsx_1 = require("../parsers/jsx");
 var mitosis_node_1 = require("../types/mitosis-node");
 var react_1 = require("./react");
-var state_1 = require("../helpers/state");
-var is_root_text_node_1 = require("../helpers/is-root-text-node");
 exports.DEFAULT_FORMAT = 'legacy';
 // Special isValidAttributeName for Mitosis so we can allow for $ in names
 var isValidAttributeName = function (str) {

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

@@ -2,19 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToQwik = void 0;
 var standalone_1 = require("prettier/standalone");
+var babel_transform_1 = require("../../helpers/babel-transform");
 var fast_clone_1 = require("../../helpers/fast-clone");
-var collect_css_1 = require("../../helpers/styles/collect-css");
+var merge_options_1 = require("../../helpers/merge-options");
+var process_code_1 = require("../../helpers/plugins/process-code");
+var replace_identifiers_1 = require("../../helpers/replace-identifiers");
 var state_1 = require("../../helpers/state");
-var add_prevent_default_1 = require("./helpers/add-prevent-default");
-var jsx_1 = require("./jsx");
-var src_generator_1 = require("./src-generator");
+var collect_css_1 = require("../../helpers/styles/collect-css");
 var plugins_1 = require("../../modules/plugins");
+var add_prevent_default_1 = require("./helpers/add-prevent-default");
 var stable_inject_1 = require("./helpers/stable-inject");
-var merge_options_1 = require("../../helpers/merge-options");
 var state_2 = require("./helpers/state");
-var process_code_1 = require("../../helpers/plugins/process-code");
-var replace_identifiers_1 = require("../../helpers/replace-identifiers");
-var babel_transform_1 = require("../../helpers/babel-transform");
+var jsx_1 = require("./jsx");
+var src_generator_1 = require("./src-generator");
 Error.stackTraceLimit = 9999;
 var DEBUG = false;
 var PLUGINS = [

package/dist/src/generators/qwik/component.js

@@ -22,12 +22,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addCommonStyles = exports.renderUseLexicalScope = exports.addComponent = exports.createFileSet = void 0;
 var compile_away_builder_components_1 = require("../../plugins/compile-away-builder-components");
+var directives_1 = require("./directives");
 var handlers_1 = require("./helpers/handlers");
-var jsx_1 = require("./jsx");
-var src_generator_1 = require("./src-generator");
 var stable_serialize_1 = require("./helpers/stable-serialize");
 var styles_1 = require("./helpers/styles");
-var directives_1 = require("./directives");
+var jsx_1 = require("./jsx");
+var src_generator_1 = require("./src-generator");
 function createFileSet(options) {
     if (options === void 0) { options = {}; }
     var opts = __assign({ qwikLib: '@builder.io/qwik', qrlPrefix: './', output: 'ts', minify: false, jsx: true }, options);

package/dist/src/generators/qwik/helpers/state.js

@@ -14,9 +14,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStateMethodsAndGetters = exports.getLexicalScopeVars = exports.emitStateMethodsAndRewriteBindings = exports.emitUseStore = void 0;
 var traverse_1 = __importDefault(require("traverse"));
+var babel_transform_1 = require("../../../helpers/babel-transform");
 var convert_method_to_function_1 = require("./convert-method-to-function");
 var stable_inject_1 = require("./stable-inject");
-var babel_transform_1 = require("../../../helpers/babel-transform");
 /**
  * @param file
  * @param stateInit

package/dist/src/generators/qwik/jsx.d.ts

@@ -1,6 +1,6 @@
 import { MitosisNode } from '../../types/mitosis-node';
-import { File } from './src-generator';
 import { CssStyles } from './helpers/styles';
+import { File } from './src-generator';
 /**
  * Convert a Mitosis nodes to a JSX nodes.
  *

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.iteratorProperty = exports.lastProperty = exports.isStatement = exports.iif = exports.arrowFnValue = exports.arrowFnBlock = exports.invoke = exports.quote = exports.Imports = exports.Symbol = exports.SrcBuilder = exports.File = void 0;
 var standalone_1 = require("prettier/standalone");
-var jsx_1 = require("../../parsers/jsx");
 var builder_1 = require("../../parsers/builder");
+var jsx_1 = require("../../parsers/jsx");
 var stable_serialize_1 = require("./helpers/stable-serialize");
 var File = /** @class */ (function () {
     function File(filename, options, qwikModule, qrlPrefix) {

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

@@ -16,12 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToReact = void 0;
 var lodash_1 = require("lodash");
-var is_children_1 = __importDefault(require("../../helpers/is-children"));
-var slots_1 = require("../../helpers/slots");
 var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
-var is_valid_attribute_name_1 = require("../../helpers/is-valid-attribute-name");
+var is_children_1 = __importDefault(require("../../helpers/is-children"));
 var is_root_text_node_1 = require("../../helpers/is-root-text-node");
+var is_valid_attribute_name_1 = require("../../helpers/is-valid-attribute-name");
 var for_1 = require("../../helpers/nodes/for");
+var slots_1 = require("../../helpers/slots");
 var jsx_1 = require("../../parsers/jsx");
 var mitosis_node_1 = require("../../types/mitosis-node");
 var helpers_1 = require("./helpers");

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

@@ -19,35 +19,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToReact = exports.componentToPreact = exports.contextPropDrillingKey = void 0;
+var hash_sum_1 = __importDefault(require("hash-sum"));
 var json5_1 = __importDefault(require("json5"));
 var standalone_1 = require("prettier/standalone");
-var collect_css_1 = require("../../helpers/styles/collect-css");
+var bindings_1 = require("../../helpers/bindings");
 var create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
 var dedent_1 = require("../../helpers/dedent");
 var fast_clone_1 = require("../../helpers/fast-clone");
-var get_refs_1 = require("../../helpers/get-refs");
 var get_props_ref_1 = require("../../helpers/get-props-ref");
+var get_refs_1 = require("../../helpers/get-refs");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
 var getters_to_functions_1 = require("../../helpers/getters-to-functions");
 var handle_missing_state_1 = require("../../helpers/handle-missing-state");
+var is_root_text_node_1 = require("../../helpers/is-root-text-node");
 var map_refs_1 = require("../../helpers/map-refs");
+var merge_options_1 = require("../../helpers/merge-options");
 var process_http_requests_1 = require("../../helpers/process-http-requests");
 var render_imports_1 = require("../../helpers/render-imports");
+var replace_new_lines_in_strings_1 = require("../../helpers/replace-new-lines-in-strings");
+var state_1 = require("../../helpers/state");
 var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
+var collect_css_1 = require("../../helpers/styles/collect-css");
+var collect_styled_components_1 = require("../../helpers/styles/collect-styled-components");
+var helpers_1 = require("../../helpers/styles/helpers");
 var plugins_1 = require("../../modules/plugins");
 var context_1 = require("../helpers/context");
 var react_native_1 = require("../react-native");
-var collect_styled_components_1 = require("../../helpers/styles/collect-styled-components");
-var helpers_1 = require("../../helpers/styles/helpers");
-var state_1 = require("../../helpers/state");
-var state_2 = require("./state");
-var helpers_2 = require("./helpers");
-var hash_sum_1 = __importDefault(require("hash-sum"));
-var bindings_1 = require("../../helpers/bindings");
 var blocks_1 = require("./blocks");
-var merge_options_1 = require("../../helpers/merge-options");
-var replace_new_lines_in_strings_1 = require("../../helpers/replace-new-lines-in-strings");
-var is_root_text_node_1 = require("../../helpers/is-root-text-node");
+var helpers_2 = require("./helpers");
+var state_2 = require("./state");
 exports.contextPropDrillingKey = '_context';
 /**
  * If the root Mitosis component only has 1 child, and it is a `Show`/`For` node, then we need to wrap it in a fragment.
@@ -204,7 +204,7 @@ var getPropsDefinition = function (_a) {
     return "".concat(json.name, ".defaultProps = {").concat(defaultPropsString, "};");
 };
 var _componentToReact = function (json, options, isSubComponent) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     if (isSubComponent === void 0) { isSubComponent = false; }
     (0, process_http_requests_1.processHttpRequests)(json);
     (0, handle_missing_state_1.handleMissingState)(json);
@@ -222,7 +222,7 @@ var _componentToReact = function (json, options, isSubComponent) {
     var allRefs = Object.keys(json.refs);
     (0, map_refs_1.mapRefs)(json, function (refName) { return "".concat(refName, ".current"); });
     var hasState = (0, state_1.checkHasState)(json);
-    var _o = (0, get_props_ref_1.getPropsRef)(json), forwardRef = _o[0], hasPropRef = _o[1];
+    var _p = (0, get_props_ref_1.getPropsRef)(json), forwardRef = _p[0], hasPropRef = _p[1];
     var isForwardRef = !options.preact && Boolean(((_a = json.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.forwardRef) || hasPropRef);
     if (isForwardRef) {
         var meta = (_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.forwardRef;
@@ -272,12 +272,16 @@ var _componentToReact = function (json, options, isSubComponent) {
         ((_f = json.hooks.onInit) === null || _f === void 0 ? void 0 : _f.code)) {
         reactLibImports.add('useEffect');
     }
+    var hasCustomStyles = !!((_g = json.style) === null || _g === void 0 ? void 0 : _g.length);
+    var shouldInjectCustomStyles = hasCustomStyles &&
+        (options.stylesType === 'styled-components' || options.stylesType === 'emotion');
     var wrap = (0, helpers_2.wrapInFragment)(json) ||
         (0, is_root_text_node_1.isRootTextNode)(json) ||
         (componentHasStyles &&
             (options.stylesType === 'styled-jsx' || options.stylesType === 'style-tag')) ||
+        shouldInjectCustomStyles ||
         isRootSpecialNode(json);
-    var _p = getRefsString(json, allRefs, options), hasStateArgument = _p[0], refsString = _p[1];
+    var _q = getRefsString(json, allRefs, options), hasStateArgument = _q[0], refsString = _q[1];
     // NOTE: `collectReactNativeStyles` must run before style generation in the component generation body, as it has
     // side effects that delete styles bindings from the JSON.
     var reactNativeStyles = options.stylesType === 'react-native' && componentHasStyles
@@ -287,7 +291,7 @@ var _componentToReact = function (json, options, isSubComponent) {
     var componentArgs = ["props".concat(options.typescript ? ":".concat(propType) : ''), options.forwardRef]
         .filter(Boolean)
         .join(',');
-    var componentBody = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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    return (\n      ", "\n      ", "\n      ", "\n      ", "\n    );\n  "])), options.contextType === 'prop-drill'
+    var componentBody = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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    return (\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    );\n  "])), options.contextType === 'prop-drill'
         ? "const ".concat(exports.contextPropDrillingKey, " = { ...props['").concat(exports.contextPropDrillingKey, "'] };")
         : '', hasStateArgument ? '' : refsString, hasState
         ? options.stateType === 'mobx'
@@ -301,26 +305,26 @@ var _componentToReact = function (json, options, isSubComponent) {
                         : options.stateType === 'variables'
                             ? "const state = ".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ";")
                             : "const state = useLocalProxy(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
-        : '', hasStateArgument ? refsString : '', getContextString(json, options), (0, helpers_2.getCode)((_g = json.hooks.init) === null || _g === void 0 ? void 0 : _g.code, options), contextStr || '', ((_h = json.hooks.onInit) === null || _h === void 0 ? void 0 : _h.code)
+        : '', hasStateArgument ? refsString : '', getContextString(json, options), (0, helpers_2.getCode)((_h = json.hooks.init) === null || _h === void 0 ? void 0 : _h.code, options), contextStr || '', ((_j = json.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code)
         ? "\n        useEffect(() => {\n          ".concat((0, state_2.processHookCode)({
             str: json.hooks.onInit.code,
             options: options,
         }), "\n        }, [])\n        ")
-        : '', ((_j = json.hooks.onMount) === null || _j === void 0 ? void 0 : _j.code)
+        : '', ((_k = json.hooks.onMount) === null || _k === void 0 ? void 0 : _k.code)
         ? "useEffect(() => {\n          ".concat((0, state_2.processHookCode)({
             str: json.hooks.onMount.code,
             options: options,
         }), "\n        }, [])")
-        : '', (_l = (_k = json.hooks.onUpdate) === null || _k === void 0 ? void 0 : _k.map(function (hook) { return "useEffect(() => {\n          ".concat((0, state_2.processHookCode)({ str: hook.code, options: options }), "\n        },\n        ").concat(hook.deps ? (0, state_2.processHookCode)({ str: hook.deps, options: options }) : '', ")"); }).join(';')) !== null && _l !== void 0 ? _l : '', ((_m = json.hooks.onUnMount) === null || _m === void 0 ? void 0 : _m.code)
+        : '', (_m = (_l = json.hooks.onUpdate) === null || _l === void 0 ? void 0 : _l.map(function (hook) { return "useEffect(() => {\n          ".concat((0, state_2.processHookCode)({ str: hook.code, options: options }), "\n        },\n        ").concat(hook.deps ? (0, state_2.processHookCode)({ str: hook.deps, options: options }) : '', ")"); }).join(';')) !== null && _m !== void 0 ? _m : '', ((_o = json.hooks.onUnMount) === null || _o === void 0 ? void 0 : _o.code)
         ? "useEffect(() => {\n          return () => {\n            ".concat((0, state_2.processHookCode)({
             str: json.hooks.onUnMount.code,
             options: options,
         }), "\n          }\n        }, [])")
         : '', wrap ? (0, helpers_2.openFrag)(options) : '', json.children.map(function (item) { return (0, blocks_1.blockToReact)(item, options, json, []); }).join('\n'), componentHasStyles && options.stylesType === 'styled-jsx'
         ? "<style jsx>{`".concat(css, "`}</style>")
-        : componentHasStyles && options.stylesType === 'style-tag'
-            ? "<style>{`".concat(css, "`}</style>")
-            : '', wrap ? (0, helpers_2.closeFrag)(options) : '');
+        : '', componentHasStyles && options.stylesType === 'style-tag'
+        ? "<style>{`".concat(css, "`}</style>")
+        : '', shouldInjectCustomStyles ? "<style>{`".concat(json.style, "`}</style>") : '', wrap ? (0, helpers_2.closeFrag)(options) : '');
     var str = (0, dedent_1.dedent)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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    ", "\n    ", "\n    ", "\n    ", "function ", "(", ") {\n    ", "\n  }", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n\n  "])), getDefaultImport(json, options), styledComponentsCode ? "import styled from 'styled-components';\n" : '', reactLibImports.size
         ? "import { ".concat(Array.from(reactLibImports).join(', '), " } from '").concat(options.preact ? 'preact/hooks' : 'react', "'")
         : '', componentHasStyles && options.stylesType === 'emotion' && options.format !== 'lite'

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

@@ -17,8 +17,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.processTagReferences = exports.getCode = exports.wrapInFragment = exports.getFragment = exports.closeFrag = exports.openFrag = exports.processBinding = void 0;
 var lodash_1 = require("lodash");
 var traverse_1 = __importDefault(require("traverse"));
-var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
+var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 var processBinding = function (str, options) {
     if (options.stateType !== 'useState') {
         return str;
@@ -49,22 +49,20 @@ function getCode(str, options) {
 }
 exports.getCode = getCode;
 function processTagReferences(json, options) {
-    var processedTagRefs = new Set();
-    var capitalizedTagRefs = new Set();
+    var namesFound = new Set();
     (0, traverse_1.default)(json).forEach(function (el) {
-        var _a;
+        var _a, _b;
         if (!(0, is_mitosis_node_1.isMitosisNode)(el)) {
             return;
         }
         var processedRefName = (0, exports.processBinding)(el.name, options);
         if (el.name.includes('state.')) {
-            var stateVal = json.state[processedRefName] || json.state[(0, lodash_1.upperFirst)(processedRefName)];
-            switch (stateVal === null || stateVal === void 0 ? void 0 : stateVal.type) {
+            switch ((_a = json.state[processedRefName]) === null || _a === void 0 ? void 0 : _a.type) {
                 case 'getter':
                     var refName = getRefName(processedRefName);
-                    if (!processedTagRefs.has(el.name)) {
-                        processedTagRefs.add(el.name);
-                        json.hooks.init = __assign(__assign({}, json.hooks.init), { code: "\n            ".concat(((_a = json.hooks.init) === null || _a === void 0 ? void 0 : _a.code) || '', "\n            const ").concat(refName, " = ").concat(el.name, ";\n            ") });
+                    if (!namesFound.has(el.name)) {
+                        namesFound.add(el.name);
+                        json.hooks.init = __assign(__assign({}, json.hooks.init), { code: "\n            ".concat(((_b = json.hooks.init) === null || _b === void 0 ? void 0 : _b.code) || '', "\n            const ").concat(refName, " = ").concat(el.name, ";\n            ") });
                     }
                     el.name = refName;
                     break;
@@ -76,11 +74,8 @@ function processTagReferences(json, options) {
                     var capitalizedName = (0, lodash_1.upperFirst)(processedRefName);
                     if (capitalizedName !== processedRefName) {
                         el.name = capitalizedName;
-                        if (!capitalizedTagRefs.has(capitalizedName)) {
-                            capitalizedTagRefs.add(capitalizedName);
-                            json.state[capitalizedName] = __assign({}, json.state[processedRefName]);
-                            delete json.state[processedRefName];
-                        }
+                        json.state[capitalizedName] = __assign({}, json.state[processedRefName]);
+                        delete json.state[processedRefName];
                     }
                     else {
                         el.name = processedRefName;