@builder.io/mitosis 0.6.6 → 0.6.8

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

@@ -461,7 +461,7 @@ function isGlobalStyle(key) {
         key.startsWith('@'));
 }
 const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const mapper = !_internalOptions.skipMapper && componentMappers[json.name];
     if (mapper) {
         const element = mapper(json, options);
@@ -562,13 +562,6 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
         }
         delete json.bindings.css;
     }
-    if (thisIsComponent) {
-        for (const key in json.bindings) {
-            if (!((_o = json.slots) === null || _o === void 0 ? void 0 : _o[key])) {
-                builderBindings[`component.options.${key}`] = json.bindings[key].code;
-            }
-        }
-    }
     const element = el({
         tagName: thisIsComponent ? undefined : json.name,
         ...(hasCss && {

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

@@ -14,7 +14,7 @@ const slots_1 = require("../../helpers/slots");
 const mitosis_node_1 = require("../../types/mitosis-node");
 const html_tags_1 = require("../../constants/html_tags");
 const helpers_1 = require("./helpers");
-const state_1 = require("./state");
+const state_1 = require("./helpers/state");
 const NODE_MAPPERS = {
     Slot(json, options, component, _insideJsx, parentSlots) {
         var _a, _b;

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

@@ -4,6 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToReact = exports.componentToPreact = exports.contextPropDrillingKey = void 0;
+const default_props_1 = require("../../generators/react/helpers/default-props");
+const hooks_1 = require("../../generators/react/helpers/hooks");
 const bindings_1 = require("../../helpers/bindings");
 const create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
 const dedent_1 = require("../../helpers/dedent");
@@ -28,17 +30,17 @@ const strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
 const collect_css_1 = require("../../helpers/styles/collect-css");
 const collect_styled_components_1 = require("../../helpers/styles/collect-styled-components");
 const helpers_1 = require("../../helpers/styles/helpers");
+const plugins_1 = require("../../modules/plugins");
 const core_1 = require("@babel/core");
 const hash_sum_1 = __importDefault(require("hash-sum"));
 const json5_1 = __importDefault(require("json5"));
 const standalone_1 = require("prettier/standalone");
-const plugins_1 = require("../../modules/plugins");
 const context_1 = require("../helpers/context");
 const rsc_1 = require("../helpers/rsc");
 const react_native_1 = require("../react-native");
 const blocks_1 = require("./blocks");
 const helpers_2 = require("./helpers");
-const state_2 = require("./state");
+const state_2 = require("./helpers/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.
@@ -216,42 +218,6 @@ const componentToReact = (reactOptions = {}) => ({ component, path }) => {
     return str;
 };
 exports.componentToReact = componentToReact;
-// TODO: import target components when they are required
-const getDefaultImport = (json, options) => {
-    const { preact, type } = options;
-    if (preact) {
-        return `
-    /** @jsx h */
-    import { h, Fragment } from 'preact';
-    `;
-    }
-    if (type === 'native') {
-        return `
-    import * as React from 'react';
-    import { FlatList, ScrollView, View, StyleSheet, Image, Text, Pressable, TextInput, TouchableOpacity, Button, Linking } from 'react-native';
-    `;
-    }
-    if (type === 'taro') {
-        return `
-    import * as React from 'react';
-    `;
-    }
-    return "import * as React from 'react';";
-};
-const getPropsDefinition = ({ json }) => {
-    if (!json.defaultProps)
-        return '';
-    const defaultPropsString = Object.keys(json.defaultProps)
-        .map((prop) => {
-        var _a;
-        const value = json.defaultProps.hasOwnProperty(prop)
-            ? (_a = json.defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code
-            : 'undefined';
-        return `${prop}: ${value}`;
-    })
-        .join(',');
-    return `${json.name}.defaultProps = {${defaultPropsString}};`;
-};
 const isRSC = (json, options) => {
     var _a, _b;
     // When using RSC generator, we check `componentType` field in metadata to determine if it's a server component
@@ -271,7 +237,7 @@ const checkShouldAddUseClientDirective = (json, options) => {
     return !isRSC(json, options);
 };
 const _componentToReact = (json, options, isSubComponent = false) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var _a, _b, _c, _d, _e, _f;
     (0, process_http_requests_1.processHttpRequests)(json);
     (0, handle_missing_state_1.handleMissingState)(json);
     (0, helpers_2.processTagReferences)(json, options);
@@ -290,11 +256,9 @@ const _componentToReact = (json, options, isSubComponent = false) => {
     // Always use state if we are generate Builder react code
     const hasState = options.stateType === 'builder' || (0, state_1.checkHasState)(json);
     const [forwardRef, hasPropRef] = (0, get_props_ref_1.getPropsRef)(json);
-    const isForwardRef = !options.preact &&
-        Boolean(((_a = json.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.forwardRef) || ((_c = (_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.react) === null || _c === void 0 ? void 0 : _c.forwardRef) || hasPropRef);
+    const isForwardRef = !options.preact && Boolean((0, helpers_2.isReactForwardRef)(json) || hasPropRef);
     if (isForwardRef) {
-        const meta = (((_d = json.meta.useMetadata) === null || _d === void 0 ? void 0 : _d.forwardRef) ||
-            ((_f = (_e = json.meta.useMetadata) === null || _e === void 0 ? void 0 : _e.react) === null || _f === void 0 ? void 0 : _f.forwardRef));
+        const meta = (0, helpers_2.isReactForwardRef)(json);
         options.forwardRef = meta || forwardRef;
     }
     const forwardRefType = options.typescript && json.propsTypeRef && forwardRef && json.propsTypeRef !== 'any'
@@ -327,16 +291,16 @@ const _componentToReact = (json, options, isSubComponent = false) => {
     }
     const shouldAddUseClientDirective = checkShouldAddUseClientDirective(json, options);
     const shouldInlineOnInitHook = !shouldAddUseClientDirective && options.rsc && isRSC(json, options);
-    if (allRefs.length || (((_g = json.hooks.onInit) === null || _g === void 0 ? void 0 : _g.code) && !shouldInlineOnInitHook)) {
+    if (allRefs.length || (((_a = json.hooks.onInit) === null || _a === void 0 ? void 0 : _a.code) && !shouldInlineOnInitHook)) {
         reactLibImports.add('useRef');
     }
     if (!options.preact && hasPropRef) {
         reactLibImports.add('forwardRef');
     }
-    if (json.hooks.onMount.length || ((_h = json.hooks.onUnMount) === null || _h === void 0 ? void 0 : _h.code) || ((_j = json.hooks.onUpdate) === null || _j === void 0 ? void 0 : _j.length)) {
+    if (json.hooks.onMount.length || ((_b = json.hooks.onUnMount) === null || _b === void 0 ? void 0 : _b.code) || ((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length)) {
         reactLibImports.add('useEffect');
     }
-    const hasCustomStyles = !!((_k = json.style) === null || _k === void 0 ? void 0 : _k.length);
+    const hasCustomStyles = !!((_d = json.style) === null || _d === void 0 ? void 0 : _d.length);
     const shouldInjectCustomStyles = hasCustomStyles &&
         (options.stylesType === 'styled-components' || options.stylesType === 'emotion');
     const wrap = (0, helpers_2.wrapInFragment)(json) ||
@@ -360,86 +324,17 @@ const _componentToReact = (json, options, isSubComponent = false) => {
         ? `const ${exports.contextPropDrillingKey} = { ...props['${exports.contextPropDrillingKey}'] };`
         : ''}
     ${hasStateArgument ? '' : refsString}
-    ${hasState
-        ? options.stateType === 'mobx'
-            ? `const state = useLocalObservable(() => (${(0, get_state_object_string_1.getStateObjectStringFromComponent)(json)}));`
-            : options.stateType === 'useState'
-                ? useStateCode
-                : options.stateType === 'solid'
-                    ? `const state = useMutable(${(0, get_state_object_string_1.getStateObjectStringFromComponent)(json)});`
-                    : options.stateType === 'builder'
-                        ? `const state = useBuilderState(${(0, get_state_object_string_1.getStateObjectStringFromComponent)(json)});`
-                        : options.stateType === 'variables'
-                            ? (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
-                                format: 'variables',
-                                keyPrefix: 'const',
-                                valueMapper: (code, type, _, key) => {
-                                    if (type === 'getter')
-                                        return `${key} = function ${code.replace('get ', '')}`;
-                                    if (type === 'function')
-                                        return code.startsWith('async') ? code : `${key} = function ${code}`;
-                                    return code;
-                                },
-                            })
-                            : `const state = useLocalProxy(${(0, get_state_object_string_1.getStateObjectStringFromComponent)(json)});`
-        : ''}
+    ${(0, state_2.getReactVariantStateString)({ hasState, useStateCode, json, options })}
     ${hasStateArgument ? refsString : ''}
     ${getContextString(json, options)}
-    ${((_l = json.hooks.init) === null || _l === void 0 ? void 0 : _l.code) ? (0, state_2.processHookCode)({ str: (_m = json.hooks.init) === null || _m === void 0 ? void 0 : _m.code, options }) : ''}
+    ${((_e = json.hooks.init) === null || _e === void 0 ? void 0 : _e.code) ? (0, state_2.processHookCode)({ str: (_f = json.hooks.init) === null || _f === void 0 ? void 0 : _f.code, options }) : ''}
     ${contextStr || ''}
 
-    ${((_o = json.hooks.onInit) === null || _o === void 0 ? void 0 : _o.code)
-        ? shouldInlineOnInitHook
-            ? (0, state_2.processHookCode)({ str: json.hooks.onInit.code, options })
-            : `
-        const hasInitialized = useRef(false);
-        if (!hasInitialized.current) {
-          ${(0, state_2.processHookCode)({
-                str: json.hooks.onInit.code,
-                options,
-            })}
-          hasInitialized.current = true;
-        }
-        `
-        : ''}
-
-    ${json.hooks.onEvent
-        .map((hook) => {
-        const eventName = `"${hook.eventName}"`;
-        const handlerName = (0, on_event_1.getOnEventHandlerName)(hook);
-        return `
-      useEffect(() => {
-        ${hook.refName}.current?.addEventListener(${eventName}, ${handlerName});
-        return () => ${hook.refName}.current?.removeEventListener(${eventName}, ${handlerName});
-      }, []);
-      `;
-    })
-        .join('\n')}
-
-    ${json.hooks.onMount
-        .map((hook) => `useEffect(() => {
-          ${(0, state_2.processHookCode)({
-        str: hook.code,
-        options,
-    })}
-        }, [])`)
-        .join('\n')}
-
-    ${(_q = (_p = json.hooks.onUpdate) === null || _p === void 0 ? void 0 : _p.map((hook) => `useEffect(() => {
-          ${(0, state_2.processHookCode)({ str: hook.code, options })}
-        },
-        ${hook.deps ? (0, state_2.processHookCode)({ str: hook.deps, options }) : ''})`).join(';')) !== null && _q !== void 0 ? _q : ''}
-
-    ${((_r = json.hooks.onUnMount) === null || _r === void 0 ? void 0 : _r.code)
-        ? `useEffect(() => {
-          return () => {
-            ${(0, state_2.processHookCode)({
-            str: json.hooks.onUnMount.code,
-            options,
-        })}
-          }
-        }, [])`
-        : ''}
+    ${(0, hooks_1.getOnInitHookComponentBody)({ shouldInlineOnInitHook, json, options })}
+    ${(0, hooks_1.getOnEventHookComponentBody)(json)}
+    ${(0, hooks_1.getOnMountComponentBody)({ json, options })}
+    ${(0, hooks_1.getOnUpdateComponentBody)({ json, options })}
+    ${(0, hooks_1.getOnUnMountComponentBody)({ json, options })}
 
     return (
       ${wrap ? (0, helpers_2.openFrag)(options) : ''}
@@ -456,7 +351,7 @@ const _componentToReact = (json, options, isSubComponent = false) => {
   `;
     const str = (0, dedent_1.dedent) `
   ${shouldAddUseClientDirective ? `'use client';` : ''}
-  ${getDefaultImport(json, options)}
+  ${(0, state_2.getDefaultImport)(options)}
   ${styledComponentsCode ? `import styled from 'styled-components';\n` : ''}
   ${reactLibImports.size
         ? `import { ${Array.from(reactLibImports).join(', ')} } from '${options.preact ? 'preact/hooks' : 'react'}'`
@@ -466,15 +361,7 @@ const _componentToReact = (json, options, isSubComponent = false) => {
         ? `/** @jsx jsx */
     import { jsx } from '@emotion/react'`.trim()
         : ''}
-    ${!hasState
-        ? ''
-        : options.stateType === 'valtio'
-            ? `import { useLocalProxy } from 'valtio/utils';`
-            : options.stateType === 'solid'
-                ? `import { useMutable } from 'react-solid-state';`
-                : options.stateType === 'mobx'
-                    ? `import { useLocalObservable, observer } from 'mobx-react-lite';`
-                    : ''}
+    ${(0, state_2.getReactVariantStateImportString)(hasState, options)}
     ${json.types && options.typescript ? json.types.join('\n') : ''}
     ${(0, render_imports_1.renderPreComponent)({
         explicitImportFileExtension: options.explicitImportFileExtension,
@@ -482,11 +369,10 @@ const _componentToReact = (json, options, isSubComponent = false) => {
         target: options.type === 'native' ? 'reactNative' : 'react',
     })}
     ${isForwardRef ? `const ${json.name} = forwardRef${forwardRefType}(` : ''}function ${json.name}(${componentArgs}) {
+  ${(0, default_props_1.getDefaultProps)(json)}
     ${componentBody}
   }${isForwardRef ? ')' : ''}
 
-    ${getPropsDefinition({ json })}
-
     ${reactNativeStyles
         ? `const styles = StyleSheet.create(${json5_1.default.stringify(reactNativeStyles)});`
         : ''}

package/dist/src/generators/react/helpers/default-props.d.ts

@@ -0,0 +1,2 @@
+import { MitosisComponent } from '../../../types/mitosis-component';
+export declare const getDefaultProps: (json: MitosisComponent) => string;

package/dist/src/generators/react/helpers/default-props.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultProps = void 0;
+const getDefaultProps = (json) => {
+    if (!json.defaultProps)
+        return '';
+    const defaultPropsString = Object.keys(json.defaultProps)
+        .map((prop) => {
+        var _a;
+        const value = json.defaultProps.hasOwnProperty(prop)
+            ? (_a = json.defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code
+            : 'undefined';
+        return `${prop}: ${value}`;
+    })
+        .join(',');
+    if (defaultPropsString) {
+        return `props = {${defaultPropsString}, ...props}`;
+    }
+    return '';
+};
+exports.getDefaultProps = getDefaultProps;

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

@@ -0,0 +1,20 @@
+import { ToReactOptions } from '../../../generators/react';
+import { MitosisComponent } from '../../../types/mitosis-component';
+export declare const getOnInitHookComponentBody: ({ shouldInlineOnInitHook, options, json, }: {
+    json: MitosisComponent;
+    options: ToReactOptions;
+    shouldInlineOnInitHook?: boolean | undefined;
+}) => string;
+export declare const getOnEventHookComponentBody: (json: MitosisComponent) => string;
+export declare const getOnMountComponentBody: ({ options, json, }: {
+    json: MitosisComponent;
+    options: ToReactOptions;
+}) => string;
+export declare const getOnUpdateComponentBody: ({ options, json, }: {
+    json: MitosisComponent;
+    options: ToReactOptions;
+}) => string;
+export declare const getOnUnMountComponentBody: ({ options, json, }: {
+    json: MitosisComponent;
+    options: ToReactOptions;
+}) => string;

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

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOnUnMountComponentBody = exports.getOnUpdateComponentBody = exports.getOnMountComponentBody = exports.getOnEventHookComponentBody = exports.getOnInitHookComponentBody = void 0;
+const state_1 = require("../../../generators/react/helpers/state");
+const on_event_1 = require("../../../helpers/on-event");
+const getOnInitHookComponentBody = ({ shouldInlineOnInitHook, options, json, }) => {
+    var _a;
+    return ((_a = json.hooks.onInit) === null || _a === void 0 ? void 0 : _a.code)
+        ? shouldInlineOnInitHook
+            ? (0, state_1.processHookCode)({ str: json.hooks.onInit.code, options })
+            : `
+        const hasInitialized = useRef(false);
+        if (!hasInitialized.current) {
+          ${(0, state_1.processHookCode)({
+                str: json.hooks.onInit.code,
+                options,
+            })}
+          hasInitialized.current = true;
+        }
+        `
+        : '';
+};
+exports.getOnInitHookComponentBody = getOnInitHookComponentBody;
+const getOnEventHookComponentBody = (json) => json.hooks.onEvent
+    .map((hook) => {
+    const eventName = `"${hook.eventName}"`;
+    const handlerName = (0, on_event_1.getOnEventHandlerName)(hook);
+    return `
+      useEffect(() => {
+        ${hook.refName}.current?.addEventListener(${eventName}, ${handlerName});
+        return () => ${hook.refName}.current?.removeEventListener(${eventName}, ${handlerName});
+      }, []);
+      `;
+})
+    .join('\n');
+exports.getOnEventHookComponentBody = getOnEventHookComponentBody;
+const getOnMountComponentBody = ({ options, json, }) => json.hooks.onMount
+    .map((hook) => `useEffect(() => {
+          ${(0, state_1.processHookCode)({
+    str: hook.code,
+    options,
+})}
+        }, [])`)
+    .join('\n');
+exports.getOnMountComponentBody = getOnMountComponentBody;
+const getOnUpdateComponentBody = ({ options, json, }) => {
+    var _a, _b;
+    return (_b = (_a = json.hooks.onUpdate) === null || _a === void 0 ? void 0 : _a.map((hook) => `useEffect(() => {
+          ${(0, state_1.processHookCode)({ str: hook.code, options })}
+        },
+        ${hook.deps ? (0, state_1.processHookCode)({ str: hook.deps, options }) : ''})`).join(';')) !== null && _b !== void 0 ? _b : '';
+};
+exports.getOnUpdateComponentBody = getOnUpdateComponentBody;
+const getOnUnMountComponentBody = ({ options, json, }) => {
+    var _a;
+    return ((_a = json.hooks.onUnMount) === null || _a === void 0 ? void 0 : _a.code)
+        ? `useEffect(() => {
+          return () => {
+            ${(0, state_1.processHookCode)({
+            str: json.hooks.onUnMount.code,
+            options,
+        })}
+          }
+        }, [])`
+        : '';
+};
+exports.getOnUnMountComponentBody = getOnUnMountComponentBody;

package/dist/src/generators/react/{helpers.d.ts → helpers/index.d.ts}

@@ -1,6 +1,6 @@
-import { MitosisComponent } from '../../types/mitosis-component';
-import { MitosisNode } from '../../types/mitosis-node';
-import { ToReactOptions } from './types';
+import { MitosisComponent } from '../../../types/mitosis-component';
+import { MitosisNode } from '../../../types/mitosis-node';
+import { ToReactOptions } from '../types';
 export declare const processBinding: (str: string, options: ToReactOptions) => string;
 export declare const openFrag: (options: ToReactOptions) => string;
 export declare const closeFrag: (options: ToReactOptions) => string;
@@ -8,3 +8,4 @@ export declare const isFragmentWithKey: (node?: MitosisNode) => boolean;
 export declare function getFragment(type: 'open' | 'close', options: ToReactOptions, node?: MitosisNode): string;
 export declare const wrapInFragment: (json: MitosisComponent | MitosisNode) => boolean;
 export declare function processTagReferences(json: MitosisComponent, options: ToReactOptions): void;
+export declare const isReactForwardRef: (json: MitosisComponent) => string | undefined;

package/dist/src/generators/react/{helpers.js → helpers/index.js}

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.processTagReferences = exports.wrapInFragment = exports.getFragment = exports.isFragmentWithKey = exports.closeFrag = exports.openFrag = exports.processBinding = void 0;
-const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
-const strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+exports.isReactForwardRef = exports.processTagReferences = exports.wrapInFragment = exports.getFragment = exports.isFragmentWithKey = exports.closeFrag = exports.openFrag = exports.processBinding = void 0;
+const is_mitosis_node_1 = require("../../../helpers/is-mitosis-node");
+const strip_state_and_props_refs_1 = require("../../../helpers/strip-state-and-props-refs");
 const lodash_1 = require("lodash");
 const legacy_1 = __importDefault(require("neotraverse/legacy"));
 const processBinding = (str, options) => {
@@ -93,3 +93,5 @@ function processTagReferences(json, options) {
     });
 }
 exports.processTagReferences = processTagReferences;
+const isReactForwardRef = (json) => { var _a, _b, _c; return ((_a = json.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.forwardRef) || ((_c = (_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.react) === null || _c === void 0 ? void 0 : _c.forwardRef); };
+exports.isReactForwardRef = isReactForwardRef;

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

@@ -0,0 +1,17 @@
+import { MitosisComponent } from '../../../types/mitosis-component';
+import { ToReactOptions } from '../types';
+export declare const processHookCode: ({ str, options }: {
+    str: string;
+    options: ToReactOptions;
+}) => string;
+export declare const getUseStateCode: (json: MitosisComponent, options: ToReactOptions) => string;
+export declare const updateStateSetters: (json: MitosisComponent, options: ToReactOptions) => void;
+export declare const updateStateSettersInCode: (value: string, options: ToReactOptions) => string;
+export declare const getReactVariantStateImportString: (hasState: boolean, options: ToReactOptions) => "" | "import { useLocalProxy } from 'valtio/utils';" | "import { useMutable } from 'react-solid-state';" | "import { useLocalObservable, observer } from 'mobx-react-lite';";
+export declare const getReactVariantStateString: ({ hasState, options, json, useStateCode, }: {
+    useStateCode: string;
+    hasState: boolean;
+    json: MitosisComponent;
+    options: ToReactOptions;
+}) => string;
+export declare const getDefaultImport: (options: ToReactOptions) => string;

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

@@ -0,0 +1,156 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultImport = exports.getReactVariantStateString = exports.getReactVariantStateImportString = exports.updateStateSettersInCode = exports.updateStateSetters = exports.getUseStateCode = exports.processHookCode = void 0;
+const capitalize_1 = require("../../../helpers/capitalize");
+const get_function_string_1 = require("../../../helpers/get-function-string");
+const get_state_object_string_1 = require("../../../helpers/get-state-object-string");
+const get_typed_function_1 = require("../../../helpers/get-typed-function");
+const is_mitosis_node_1 = require("../../../helpers/is-mitosis-node");
+const patterns_1 = require("../../../helpers/patterns");
+const transform_state_setters_1 = require("../../../helpers/transform-state-setters");
+const core_1 = require("@babel/core");
+const function_1 = require("fp-ts/lib/function");
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const helpers_1 = require("../helpers");
+/**
+ * Removes all `this.` references.
+ */
+const stripThisRefs = (str, options) => {
+    if (options.stateType !== 'useState') {
+        return str;
+    }
+    return str.replace(/this\.([a-zA-Z_\$0-9]+)/g, '$1');
+};
+const processHookCode = ({ str, options }) => (0, helpers_1.processBinding)((0, exports.updateStateSettersInCode)(str, options), options);
+exports.processHookCode = processHookCode;
+const valueMapper = (options) => (val) => {
+    const x = (0, exports.processHookCode)({ str: val, options });
+    return stripThisRefs(x, options);
+};
+const getSetStateFnName = (stateName) => `set${(0, capitalize_1.capitalize)(stateName)}`;
+const processStateValue = (options) => {
+    const mapValue = valueMapper(options);
+    return ([key, stateVal]) => {
+        if (!stateVal) {
+            return '';
+        }
+        let value = stateVal.code || '';
+        const type = stateVal.type;
+        const typeParameter = stateVal.typeParameter;
+        const stateType = options.typescript && stateVal.typeParameter ? `<${stateVal.typeParameter}>` : '';
+        let result = '';
+        if (type === 'getter') {
+            result = (0, function_1.pipe)(value, patterns_1.replaceGetterWithFunction, mapValue);
+        }
+        else if (type === 'function') {
+            result = mapValue(value);
+        }
+        else if (type === 'method') {
+            result = (0, function_1.pipe)(value, patterns_1.prefixWithFunction, mapValue);
+        }
+        else {
+            return `const [${key}, ${getSetStateFnName(key)}] = useState${stateType}(() => (${mapValue(value)}))`;
+        }
+        return (0, get_typed_function_1.getTypedFunction)(result, options.typescript, typeParameter);
+    };
+};
+const getUseStateCode = (json, options) => {
+    const lineItemDelimiter = '\n\n\n';
+    const stringifiedState = Object.entries(json.state).map(processStateValue(options));
+    return stringifiedState.join(lineItemDelimiter);
+};
+exports.getUseStateCode = getUseStateCode;
+const updateStateSetters = (json, options) => {
+    if (options.stateType !== 'useState') {
+        return;
+    }
+    (0, legacy_1.default)(json).forEach(function (item) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+            for (const key in item.bindings) {
+                let values = item.bindings[key];
+                const newValue = (0, exports.updateStateSettersInCode)(values === null || values === void 0 ? void 0 : values.code, options);
+                if (newValue !== (values === null || values === void 0 ? void 0 : values.code)) {
+                    item.bindings[key] = {
+                        ...values,
+                        code: newValue,
+                    };
+                }
+            }
+        }
+    });
+};
+exports.updateStateSetters = updateStateSetters;
+const updateStateSettersInCode = (value, options) => {
+    if (options.stateType !== 'useState') {
+        return value;
+    }
+    return (0, transform_state_setters_1.transformStateSetters)({
+        value,
+        transformer: ({ path, propertyName }) => core_1.types.callExpression(core_1.types.identifier(getSetStateFnName(propertyName)), [path.node.right]),
+    });
+};
+exports.updateStateSettersInCode = updateStateSettersInCode;
+const getReactVariantStateImportString = (hasState, options) => {
+    return !hasState
+        ? ''
+        : options.stateType === 'valtio'
+            ? `import { useLocalProxy } from 'valtio/utils';`
+            : options.stateType === 'solid'
+                ? `import { useMutable } from 'react-solid-state';`
+                : options.stateType === 'mobx'
+                    ? `import { useLocalObservable, observer } from 'mobx-react-lite';`
+                    : '';
+};
+exports.getReactVariantStateImportString = getReactVariantStateImportString;
+const getReactVariantStateString = ({ hasState, options, json, useStateCode, }) => hasState
+    ? options.stateType === 'mobx'
+        ? `const state = useLocalObservable(() => (${(0, get_state_object_string_1.getStateObjectStringFromComponent)(json)}));`
+        : options.stateType === 'useState'
+            ? useStateCode
+            : options.stateType === 'solid'
+                ? `const state = useMutable(${(0, get_state_object_string_1.getStateObjectStringFromComponent)(json)});`
+                : options.stateType === 'builder'
+                    ? `const state = useBuilderState(${(0, get_state_object_string_1.getStateObjectStringFromComponent)(json)});`
+                    : options.stateType === 'variables'
+                        ? (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+                            format: 'variables',
+                            keyPrefix: 'const',
+                            valueMapper: (code, type, _, key) => {
+                                if (key) {
+                                    const constPrefix = !code.startsWith('function') ? `${key} = ` : '';
+                                    if (type === 'getter')
+                                        return `${constPrefix}${(0, get_function_string_1.getFunctionString)(code.replace('get ', ''))}`;
+                                    if (type === 'function')
+                                        return code.startsWith('async') ? code : `${constPrefix}${(0, get_function_string_1.getFunctionString)(code)}`;
+                                }
+                                return code;
+                            },
+                        })
+                        : `const state = useLocalProxy(${(0, get_state_object_string_1.getStateObjectStringFromComponent)(json)});`
+    : '';
+exports.getReactVariantStateString = getReactVariantStateString;
+const getDefaultImport = (options) => {
+    const { preact, type } = options;
+    if (preact) {
+        return `
+    /** @jsx h */
+    import { h, Fragment } from 'preact';
+    `;
+    }
+    if (type === 'native') {
+        return `
+    import * as React from 'react';
+    import { FlatList, ScrollView, View, StyleSheet, Image, Text, Pressable, TextInput, TouchableOpacity, Button, Linking } from 'react-native';
+    `;
+    }
+    if (type === 'taro') {
+        return `
+    import * as React from 'react';
+    `;
+    }
+    return "import * as React from 'react';";
+};
+exports.getDefaultImport = getDefaultImport;

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

@@ -39,7 +39,7 @@ const componentToStencil = (_options = {
     const defaultProps = json.defaultProps;
     const childComponents = (0, get_child_components_1.getChildComponents)(json);
     const processBindingOptions = { events };
-    options.plugins = (0, get_code_processor_plugins_1.getCodeProcessorPlugins)(options, processBindingOptions);
+    options.plugins = (0, get_code_processor_plugins_1.getCodeProcessorPlugins)(json, options, processBindingOptions);
     if (options.plugins) {
         json = (0, plugins_1.runPostJsonPlugins)({ json, plugins: options.plugins });
     }
@@ -102,8 +102,6 @@ const componentToStencil = (_options = {
     ${(0, helpers_1.getImports)(json, options, childComponents)}
     
     import { ${coreImports} } from '@stencil/core';
-        
-    ${json.types ? json.types.join('\n') : ''}
     
     @Component({
       tag: '${tagName}',
@@ -115,10 +113,10 @@ const componentToStencil = (_options = {
     })
     export class ${json.name} {
         ${refs}
-        ${(0, helpers_1.getPropsAsCode)(props, defaultProps, json.propsTypeRef)}
+        ${(0, helpers_1.getPropsAsCode)(props, json, defaultProps)}
         ${dataString}
         ${methodsString}
-        
+        ${(0, helpers_1.getExportsAndLocal)(json)}
         ${withAttributePassing ? (0, attribute_passing_1.getAttributePassingString)(true) : ''}
         
         ${dependencyOnUpdateHooks

package/dist/src/generators/stencil/helpers/index.d.ts

@@ -5,9 +5,9 @@ export declare const isEvent: (key: string) => boolean;
 export type ProcessBindingOptions = {
     events: string[];
 };
-export declare const processBinding: (code: string, { events }: ProcessBindingOptions) => string;
+export declare const processBinding: (json: MitosisComponent, code: string, { events }: ProcessBindingOptions) => string;
 export declare const getTagName: (name: string, { prefix }: ToStencilOptions) => string;
-export declare const getPropsAsCode: (props: string[], defaultProps?: MitosisState | undefined, propsTypeRef?: string) => string;
+export declare const getPropsAsCode: (props: string[], json: MitosisComponent, defaultProps?: MitosisState | undefined) => string;
 /**
  * Check for root element if it needs a wrapping <Host>
  * @param children
@@ -34,3 +34,4 @@ export declare const getImports: (json: MitosisComponent, options: ToStencilOpti
  * @param deps The hook dependencies as string e.g.: "[this.a,this.b]"
  */
 export declare const getDepsAsArray: (deps: string) => string[];
+export declare const getExportsAndLocal: (json: MitosisComponent) => string;

package/dist/src/generators/stencil/helpers/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDepsAsArray = exports.getImports = exports.getStencilCoreImportsAsString = exports.needsWrap = exports.getPropsAsCode = exports.getTagName = exports.processBinding = exports.isEvent = void 0;
+exports.getExportsAndLocal = exports.getDepsAsArray = exports.getImports = exports.getStencilCoreImportsAsString = exports.needsWrap = exports.getPropsAsCode = exports.getTagName = exports.processBinding = exports.isEvent = void 0;
 const dash_case_1 = require("../../../helpers/dash-case");
 const event_handlers_1 = require("../../../helpers/event-handlers");
 const render_imports_1 = require("../../../helpers/render-imports");
@@ -19,8 +19,17 @@ const appendEmits = (str, events) => {
     }
     return code;
 };
-const processBinding = (code, { events }) => {
-    return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(appendEmits(code, events), { replaceWith: 'this.' });
+const processBinding = (json, code, { events }) => {
+    let resolvedCode = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(appendEmits(code, events), { replaceWith: 'this.' });
+    if (json.exports) {
+        // We need to use local exports with `this.` in stencil
+        Object.entries(json.exports)
+            .filter(([, value]) => value.usedInLocal)
+            .forEach(([key]) => {
+            resolvedCode = resolvedCode.replaceAll(key, `this.${key}`);
+        });
+    }
+    return resolvedCode;
 };
 exports.processBinding = processBinding;
 const getTagName = (name, { prefix }) => {
@@ -34,7 +43,10 @@ const getTagName = (name, { prefix }) => {
     return dashName;
 };
 exports.getTagName = getTagName;
-const getPropsAsCode = (props, defaultProps, propsTypeRef) => {
+const getPropsAsCode = (props, json, defaultProps) => {
+    const propsTypeRef = json.propsTypeRef;
+    const internalTypes = json.types;
+    const isInternalType = propsTypeRef && internalTypes && internalTypes.find((iType) => iType.includes(propsTypeRef));
     return props
         .map((item) => {
         var _a;
@@ -46,7 +58,8 @@ const getPropsAsCode = (props, defaultProps, propsTypeRef) => {
         const type = propsTypeRef &&
             propsTypeRef !== 'any' &&
             propsTypeRef !== 'unknown' &&
-            propsTypeRef !== 'never'
+            propsTypeRef !== 'never' &&
+            !isInternalType
             ? `${propsTypeRef}["${item}"]`
             : 'any';
         return `@Prop() ${item}: ${type}${defaultPropString}`;
@@ -101,6 +114,7 @@ const getImports = (json, options, childComponents) => {
         explicitImportFileExtension: options.explicitImportFileExtension,
         component: json,
         target: 'stencil',
+        excludeExportAndLocal: true,
         importMapper: (_, theImport, importedValues) => {
             const childImport = importedValues.defaultImport;
             if (childImport && childComponents.includes(childImport)) {
@@ -124,3 +138,14 @@ const getDepsAsArray = (deps) => {
         .map((dep) => dep.trim());
 };
 exports.getDepsAsArray = getDepsAsArray;
+const getExportsAndLocal = (json) => {
+    return Object.entries(json.exports || {})
+        .map(([key, { usedInLocal, code }]) => {
+        if (usedInLocal) {
+            return `${key} = ${code.substring(code.indexOf('=') + 1)}`;
+        }
+        return '';
+    })
+        .join('\n');
+};
+exports.getExportsAndLocal = getExportsAndLocal;

package/dist/src/generators/stencil/plugins/get-code-processor-plugins.d.ts

@@ -1,3 +1,4 @@
 import { ProcessBindingOptions } from '../../../generators/stencil/helpers/index';
 import { ToStencilOptions } from '../../../generators/stencil/types';
-export declare const getCodeProcessorPlugins: (options: ToStencilOptions, processBindingOptions: ProcessBindingOptions) => import("../../..").MitosisPlugin[];
+import { MitosisComponent } from '../../../types/mitosis-component';
+export declare const getCodeProcessorPlugins: (json: MitosisComponent, options: ToStencilOptions, processBindingOptions: ProcessBindingOptions) => import("../../..").MitosisPlugin[];

package/dist/src/generators/stencil/plugins/get-code-processor-plugins.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCodeProcessorPlugins = void 0;
 const index_1 = require("../../../generators/stencil/helpers/index");
 const process_code_1 = require("../../../helpers/plugins/process-code");
-const getCodeProcessorPlugins = (options, processBindingOptions) => {
+const getCodeProcessorPlugins = (json, options, processBindingOptions) => {
     return [
         ...(options.plugins || []),
         (0, process_code_1.CODE_PROCESSOR_PLUGIN)((codeType) => {
@@ -16,7 +16,7 @@ const getCodeProcessorPlugins = (options, processBindingOptions) => {
                 case 'context-set':
                 case 'dynamic-jsx-elements':
                 case 'types':
-                    return (code) => (0, index_1.processBinding)(code, processBindingOptions);
+                    return (code) => (0, index_1.processBinding)(json, code, processBindingOptions);
             }
         }),
     ];

package/dist/src/generators/svelte/svelte.js

@@ -286,11 +286,11 @@ const componentToSvelte = (userProvidedOptions) => ({ component }) => {
         if (options.typescript && json.propsTypeRef && json.propsTypeRef !== 'any') {
             propDeclaration += `: ${json.propsTypeRef.split(' |')[0]}['${name}']`;
         }
-        if ((_b = (_a = json.props) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b.optional) {
-            propDeclaration += `= undefined`;
-        }
         if (json.defaultProps && json.defaultProps.hasOwnProperty(name)) {
-            propDeclaration += `=${(_c = json.defaultProps[name]) === null || _c === void 0 ? void 0 : _c.code}`;
+            propDeclaration += `=${(_a = json.defaultProps[name]) === null || _a === void 0 ? void 0 : _a.code}`;
+        }
+        else if ((_c = (_b = json.props) === null || _b === void 0 ? void 0 : _b[name]) === null || _c === void 0 ? void 0 : _c.optional) {
+            propDeclaration += `= undefined`;
         }
         propDeclaration += ';';
         return propDeclaration;

package/dist/src/generators/vue/compositionApi.js

@@ -14,7 +14,7 @@ const getCompositionPropDefinition = ({ options, component, props, }) => {
     const isTs = options.typescript;
     let str = 'const props = ';
     if (component.defaultProps) {
-        const generic = isTs ? `<${component.propsTypeRef}>` : '';
+        const generic = isTs && component.propsTypeRef !== 'any' ? `<${component.propsTypeRef}>` : '';
         const defalutPropsString = props
             .map((prop) => {
             var _a;

package/dist/src/helpers/get-function-string.d.ts

@@ -0,0 +1 @@
+export declare const getFunctionString: (code: string) => string;

package/dist/src/helpers/get-function-string.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFunctionString = void 0;
+const getFunctionString = (code) => code.startsWith('function') ? code : `function ${code}`;
+exports.getFunctionString = getFunctionString;

package/dist/src/helpers/render-imports.d.ts

@@ -28,9 +28,10 @@ type ImportArgs = {
 export declare const renderImport: ({ theImport, target, asyncComponentImports, preserveFileExtensions, component, componentsUsed, importMapper, explicitImportFileExtension, }: ImportArgs & {
     theImport: MitosisImport;
 }) => string;
-export declare const renderPreComponent: ({ component, target, excludeMitosisComponents, asyncComponentImports, preserveFileExtensions, componentsUsed, importMapper, explicitImportFileExtension, }: Omit<ImportArgs, "explicitImportFileExtension" | "asyncComponentImports"> & Partial<Pick<ImportArgs, "explicitImportFileExtension" | "asyncComponentImports">> & {
+export declare const renderPreComponent: ({ component, target, excludeMitosisComponents, asyncComponentImports, preserveFileExtensions, componentsUsed, importMapper, explicitImportFileExtension, excludeExportAndLocal, }: Omit<ImportArgs, "explicitImportFileExtension" | "asyncComponentImports"> & Partial<Pick<ImportArgs, "explicitImportFileExtension" | "asyncComponentImports">> & {
     component: MitosisComponent;
     target: Target;
     excludeMitosisComponents?: boolean | undefined;
+    excludeExportAndLocal?: boolean | undefined;
 }) => string;
 export {};

package/dist/src/helpers/render-imports.js

@@ -143,7 +143,7 @@ const renderImports = ({ imports, target, asyncComponentImports, excludeMitosisC
     explicitImportFileExtension,
 }))
     .join('\n');
-const renderPreComponent = ({ component, target, excludeMitosisComponents, asyncComponentImports = false, preserveFileExtensions = false, componentsUsed = [], importMapper, explicitImportFileExtension = false, }) => {
+const renderPreComponent = ({ component, target, excludeMitosisComponents, asyncComponentImports = false, preserveFileExtensions = false, componentsUsed = [], importMapper, explicitImportFileExtension = false, excludeExportAndLocal = false, }) => {
     var _a;
     return `
     ${renderImports({
@@ -157,7 +157,7 @@ const renderPreComponent = ({ component, target, excludeMitosisComponents, async
         importMapper,
         explicitImportFileExtension,
     })}
-    ${renderExportAndLocal(component)}
+    ${excludeExportAndLocal ? '' : renderExportAndLocal(component)}
     ${((_a = component.hooks.preComponent) === null || _a === void 0 ? void 0 : _a.code) || ''}
   `;
 };

package/package.json

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

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

@@ -1,9 +0,0 @@
-import { MitosisComponent } from '../../types/mitosis-component';
-import { ToReactOptions } from './types';
-export declare const processHookCode: ({ str, options }: {
-    str: string;
-    options: ToReactOptions;
-}) => string;
-export declare const getUseStateCode: (json: MitosisComponent, options: ToReactOptions) => string;
-export declare const updateStateSetters: (json: MitosisComponent, options: ToReactOptions) => void;
-export declare const updateStateSettersInCode: (value: string, options: ToReactOptions) => string;

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

@@ -1,93 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateStateSettersInCode = exports.updateStateSetters = exports.getUseStateCode = exports.processHookCode = void 0;
-const capitalize_1 = require("../../helpers/capitalize");
-const get_typed_function_1 = require("../../helpers/get-typed-function");
-const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
-const patterns_1 = require("../../helpers/patterns");
-const transform_state_setters_1 = require("../../helpers/transform-state-setters");
-const core_1 = require("@babel/core");
-const function_1 = require("fp-ts/lib/function");
-const legacy_1 = __importDefault(require("neotraverse/legacy"));
-const helpers_1 = require("./helpers");
-/**
- * Removes all `this.` references.
- */
-const stripThisRefs = (str, options) => {
-    if (options.stateType !== 'useState') {
-        return str;
-    }
-    return str.replace(/this\.([a-zA-Z_\$0-9]+)/g, '$1');
-};
-const processHookCode = ({ str, options }) => (0, helpers_1.processBinding)((0, exports.updateStateSettersInCode)(str, options), options);
-exports.processHookCode = processHookCode;
-const valueMapper = (options) => (val) => {
-    const x = (0, exports.processHookCode)({ str: val, options });
-    return stripThisRefs(x, options);
-};
-const getSetStateFnName = (stateName) => `set${(0, capitalize_1.capitalize)(stateName)}`;
-const processStateValue = (options) => {
-    const mapValue = valueMapper(options);
-    return ([key, stateVal]) => {
-        if (!stateVal) {
-            return '';
-        }
-        let value = stateVal.code || '';
-        const type = stateVal.type;
-        const typeParameter = stateVal.typeParameter;
-        const stateType = options.typescript && stateVal.typeParameter ? `<${stateVal.typeParameter}>` : '';
-        let result = '';
-        if (type === 'getter') {
-            result = (0, function_1.pipe)(value, patterns_1.replaceGetterWithFunction, mapValue);
-        }
-        else if (type === 'function') {
-            result = mapValue(value);
-        }
-        else if (type === 'method') {
-            result = (0, function_1.pipe)(value, patterns_1.prefixWithFunction, mapValue);
-        }
-        else {
-            return `const [${key}, ${getSetStateFnName(key)}] = useState${stateType}(() => (${mapValue(value)}))`;
-        }
-        return (0, get_typed_function_1.getTypedFunction)(result, options.typescript, typeParameter);
-    };
-};
-const getUseStateCode = (json, options) => {
-    const lineItemDelimiter = '\n\n\n';
-    const stringifiedState = Object.entries(json.state).map(processStateValue(options));
-    return stringifiedState.join(lineItemDelimiter);
-};
-exports.getUseStateCode = getUseStateCode;
-const updateStateSetters = (json, options) => {
-    if (options.stateType !== 'useState') {
-        return;
-    }
-    (0, legacy_1.default)(json).forEach(function (item) {
-        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
-            for (const key in item.bindings) {
-                let values = item.bindings[key];
-                const newValue = (0, exports.updateStateSettersInCode)(values === null || values === void 0 ? void 0 : values.code, options);
-                if (newValue !== (values === null || values === void 0 ? void 0 : values.code)) {
-                    item.bindings[key] = {
-                        ...values,
-                        code: newValue,
-                    };
-                }
-            }
-        }
-    });
-};
-exports.updateStateSetters = updateStateSetters;
-const updateStateSettersInCode = (value, options) => {
-    if (options.stateType !== 'useState') {
-        return value;
-    }
-    return (0, transform_state_setters_1.transformStateSetters)({
-        value,
-        transformer: ({ path, propertyName }) => core_1.types.callExpression(core_1.types.identifier(getSetStateFnName(propertyName)), [path.node.right]),
-    });
-};
-exports.updateStateSettersInCode = updateStateSettersInCode;