@builder.io/mitosis 0.9.0 → 0.9.2

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

@@ -79,6 +79,12 @@ const componentMappers = {
         block.children = [];
         return block;
     },
+    Fragment(node, options) {
+        const block = (0, exports.blockToBuilder)(node, options, { skipMapper: true });
+        block.component = { name: 'Core:Fragment' };
+        block.tagName = undefined;
+        return block;
+    },
     PersonalizationContainer(node, options) {
         const block = (0, exports.blockToBuilder)(node, options, { skipMapper: true });
         const variants = [];

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

@@ -149,6 +149,7 @@ const componentToReact = (reactOptions = {}) => ({ component, path }) => {
         addUseClientDirectiveIfNeeded: true,
         stateType,
         stylesType: 'styled-jsx',
+        styleTagsPlacement: 'bottom',
         type: 'dom',
         plugins: [
             (0, on_event_1.processOnEventHooksPlugin)({ setBindings: false }),
@@ -236,6 +237,17 @@ const checkShouldAddUseClientDirective = (json, options) => {
         return false;
     return !isRSC(json, options);
 };
+const generateStyleTags = (placement, json, options, componentHasStyles, css, shouldInjectCustomStyles) => {
+    if (placement !== options.styleTagsPlacement)
+        return '';
+    return (0, dedent_1.dedent) `
+  ${componentHasStyles && options.stylesType === 'styled-jsx'
+        ? `<style jsx>{\`${css}\`}</style>`
+        : ''}
+  ${componentHasStyles && options.stylesType === 'style-tag' ? `<style>{\`${css}\`}</style>` : ''}
+  ${shouldInjectCustomStyles ? `<style>{\`${json.style}\`}</style>` : ''}
+  `;
+};
 const _componentToReact = (json, options, isSubComponent = false) => {
     var _a, _b, _c, _d, _e, _f;
     (0, process_http_requests_1.processHttpRequests)(json);
@@ -338,14 +350,9 @@ const _componentToReact = (json, options, isSubComponent = false) => {
 
     return (
       ${wrap ? (0, helpers_2.openFrag)(options) : ''}
+      ${generateStyleTags('top', json, options, componentHasStyles, css, shouldInjectCustomStyles)}
       ${json.children.map((item) => (0, blocks_1.blockToReact)(item, options, json, wrap, [])).join('\n')}
-      ${componentHasStyles && options.stylesType === 'styled-jsx'
-        ? `<style jsx>{\`${css}\`}</style>`
-        : ''}
-      ${componentHasStyles && options.stylesType === 'style-tag'
-        ? `<style>{\`${css}\`}</style>`
-        : ''}
-      ${shouldInjectCustomStyles ? `<style>{\`${json.style}\`}</style>` : ''}
+      ${generateStyleTags('bottom', json, options, componentHasStyles, css, shouldInjectCustomStyles)}
       ${wrap ? (0, helpers_2.closeFrag)(options) : ''}
     );
   `;

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

@@ -1,6 +1,7 @@
 import { BaseTranspilerOptions } from '../../types/transpiler';
 export interface ToReactOptions extends BaseTranspilerOptions {
     stylesType: 'emotion' | 'styled-components' | 'styled-jsx' | 'react-native' | 'style-tag' | 'twrnc' | 'native-wind';
+    styleTagsPlacement?: 'top' | 'bottom';
     stateType: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder' | 'variables';
     format?: 'lite' | 'safe';
     type: 'dom' | 'native' | 'taro';

package/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.9.0",
+  "version": "0.9.2",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {