@builder.io/mitosis 0.9.1 → 0.9.3

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/dist/src/parsers/builder/builder.js

@@ -299,15 +299,14 @@ const getBlockBindings = (block, options) => {
 exports.symbolBlocksAsChildren = false;
 const componentMappers = {
     Symbol(block, options) {
-        var _a, _b;
+        var _a;
         let css = getCssFromBlock(block);
         const styleString = getStyleStringFromBlock(block, options);
         const actionBindings = getActionBindingsFromBlock(block, options);
         const bindings = {
             symbol: (0, bindings_1.createSingleBinding)({
                 code: JSON.stringify({
-                    data: (_a = block.component) === null || _a === void 0 ? void 0 : _a.options.symbol.data,
-                    content: (_b = block.component) === null || _b === void 0 ? void 0 : _b.options.symbol.content,
+                    ...(_a = block.component) === null || _a === void 0 ? void 0 : _a.options.symbol,
                 }),
             }),
             ...actionBindings,

package/dist/src/parsers/jsx/element-parser.js

@@ -284,6 +284,15 @@ const jsxElementToJson = (node) => {
                     bindingType: 'function',
                 });
             }
+            else if (/^on[A-Z]/.test(key) && types.isExpression(expression)) {
+                // regex ignores props that happen to start with "on" but are not handlers
+                // <Foo onClick={state.handler} />
+                const call = types.callExpression(expression, []);
+                memo.bindings[key] = (0, bindings_1.createSingleBinding)({
+                    code: (0, generator_1.default)(call, { compact: true }).code,
+                    bindingType: 'function',
+                });
+            }
             else if (types.isJSXElement(expression) || types.isJSXFragment(expression)) {
                 // <Foo myProp={<MoreMitosisNode><div /></MoreMitosisNode>} />
                 // <Foo myProp={<><Node /><Node /></>} />

package/jsx-runtime.d.ts

@@ -393,6 +393,9 @@ export declare namespace JSX {
   }
 
   interface DetailsHtmlAttributes<T> extends HTMLAttributes<T> {
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLDetailsElement/name) */
+    name?: string;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLDetailsElement/open) */
     open?: boolean;
   }
 
@@ -500,6 +503,8 @@ export declare namespace JSX {
     // camelcase
     crossOrigin?: HTMLCrossorigin;
     formAction?: string;
+    autoComplete?: string;
+    autoFocus?: boolean;
     formEnctype?: HTMLFormEncType;
     formMethod?: HTMLFormMethod;
     formNoValidate?: boolean;

package/package.json

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