@builder.io/mitosis 0.0.56-77 → 0.0.56-78

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

@@ -1,7 +1,7 @@
 import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
 import { MitosisNode } from '../types/mitosis-node';
 export interface ToReactOptions extends BaseTranspilerOptions {
-    stylesType?: 'emotion' | 'styled-components' | 'styled-jsx' | 'react-native';
+    stylesType?: 'emotion' | 'styled-components' | 'styled-jsx' | 'react-native' | 'style-tag';
     stateType?: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder';
     format?: 'lite' | 'safe';
     type?: 'dom' | 'native';

package/dist/src/generators/react.js

@@ -55,6 +55,7 @@ var collect_styled_components_1 = require("../helpers/styles/collect-styled-comp
 var helpers_1 = require("../helpers/styles/helpers");
 var slots_1 = require("../helpers/slots");
 var state_1 = require("../helpers/state");
+var hash_sum_1 = __importDefault(require("hash-sum"));
 var openFrag = function (options) { return getFragment('open', options); };
 var closeFrag = function (options) { return getFragment('close', options); };
 function getFragment(type, options) {
@@ -463,7 +464,13 @@ var _componentToReact = function (json, options, isSubComponent) {
     if (options.plugins) {
         json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
     }
-    var css = stylesType === 'styled-jsx' && (0, collect_css_1.collectCss)(json);
+    var css = stylesType === 'styled-jsx'
+        ? (0, collect_css_1.collectCss)(json)
+        : stylesType === 'style-tag'
+            ? (0, collect_css_1.collectCss)(json, {
+                prefix: (0, hash_sum_1.default)(json),
+            })
+            : null;
     var styledComponentsCode = stylesType === 'styled-components' && componentHasStyles && (0, collect_styled_components_1.collectStyledComponents)(json);
     if (options.format !== 'lite') {
         (0, strip_meta_properties_1.stripMetaProperties)(json);
@@ -488,7 +495,7 @@ var _componentToReact = function (json, options, isSubComponent) {
         reactLibImports.add('useEffect');
     }
     var wrap = wrapInFragment(json) ||
-        (componentHasStyles && stylesType === 'styled-jsx') ||
+        (componentHasStyles && (stylesType === 'styled-jsx' || stylesType === 'style-tag')) ||
         isRootSpecialNode(json);
     var _p = getRefsString(json, allRefs, options), hasStateArgument = _p[0], refsString = _p[1];
     var nativeStyles = stylesType === 'react-native' && componentHasStyles && (0, react_native_1.collectReactNativeStyles)(json);
@@ -522,7 +529,11 @@ var _componentToReact = function (json, options, isSubComponent) {
         ? "useEffect(() => {\n            ".concat(processBinding(updateStateSettersInCode(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(processBinding(updateStateSettersInCode(hook.code, options), options), "\n          }, \n          ").concat(hook.deps ? processBinding(updateStateSettersInCode(hook.deps, options), options) : '', ")"); }).join(';')) !== null && _l !== void 0 ? _l : '', ((_m = json.hooks.onUnMount) === null || _m === void 0 ? void 0 : _m.code)
         ? "useEffect(() => {\n            return () => {\n              ".concat(processBinding(updateStateSettersInCode(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' ? "<style jsx>{`".concat(css, "`}</style>") : '', wrap ? closeFrag(options) : '', isForwardRef ? ')' : '', !nativeStyles
+        : '', wrap ? openFrag(options) : '', json.children.map(function (item) { return (0, exports.blockToReact)(item, options); }).join('\n'), componentHasStyles && stylesType === 'styled-jsx'
+        ? "<style jsx>{`".concat(css, "`}</style>")
+        : componentHasStyles && stylesType === 'style-tag'
+            ? "<style>{`".concat(css, "`}</style>")
+            : '', wrap ? closeFrag(options) : '', isForwardRef ? ')' : '', !nativeStyles
         ? ''
         : "\n      const styles = StyleSheet.create(".concat(json5_1.default.stringify(nativeStyles), ");\n    "), styledComponentsCode ? styledComponentsCode : '');
     str = (0, replace_new_lines_in_strings_1.stripNewlinesInStrings)(str);

package/dist/src/parsers/jsx/component-types.d.ts

@@ -2,7 +2,6 @@ import * as babel from '@babel/core';
 import { Context } from './types';
 export declare const getPropsTypeRef: (node: babel.types.FunctionDeclaration, context: Context) => string | undefined;
 export declare const isTypeImport: (node: babel.Node) => boolean;
-export declare const isTypeExport: (node: babel.Node) => boolean;
 export declare const isTypeOrInterface: (node: babel.Node) => boolean;
 export declare const collectTypes: (node: babel.Node, context: Context) => void;
 export declare const collectInterfaces: (node: babel.Node, context: Context) => void;

package/dist/src/parsers/jsx/component-types.js

@@ -35,7 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.collectInterfaces = exports.collectTypes = exports.isTypeOrInterface = exports.isTypeExport = exports.isTypeImport = exports.getPropsTypeRef = void 0;
+exports.collectInterfaces = exports.collectTypes = exports.isTypeOrInterface = exports.isTypeImport = exports.getPropsTypeRef = void 0;
 var babel = __importStar(require("@babel/core"));
 var generator_1 = __importDefault(require("@babel/generator"));
 var types = babel.types;
@@ -72,10 +72,6 @@ var isTypeImport = function (node) {
         ((_a = node.specifiers[0]) === null || _a === void 0 ? void 0 : _a.local.name) !== 'JSX';
 };
 exports.isTypeImport = isTypeImport;
-var isTypeExport = function (node) {
-    return types.isExportDeclaration(node) && node.exportKind === 'type';
-};
-exports.isTypeExport = isTypeExport;
 var isTypeOrInterface = function (node) {
     return types.isTSTypeAliasDeclaration(node) ||
         types.isTSInterfaceDeclaration(node) ||

package/dist/src/parsers/jsx/jsx.js

@@ -517,9 +517,6 @@ function parseJsx(jsx, options) {
                                 }
                                 (0, component_types_1.collectTypes)(statement, context);
                             }
-                            if ((0, component_types_1.isTypeExport)(statement)) {
-                                (0, component_types_1.collectTypes)(statement, context);
-                            }
                         }
                         var exportsOrLocalVariables = path.node.body.filter(function (statement) {
                             return !isImportOrDefaultExport(statement) &&