@builder.io/mitosis 0.0.57 → 0.0.59

package/dist/src/__tests__/data/blocks/button.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function Button(props) {
-    return (<>
+    return (<div>
       <mitosis_1.Show when={props.link}>
         <a {...props.attributes} href={props.link} target={props.openLinkInNewTab ? '_blank' : undefined}>
           {props.text}
@@ -13,6 +13,6 @@ function Button(props) {
           {props.text}
         </button>
       </mitosis_1.Show>
-    </>);
+    </div>);
 }
 exports.default = Button;

package/dist/src/__tests__/data/blocks/image.raw.jsx

@@ -45,7 +45,7 @@ function Image(props) {
             window.removeEventListener('scroll', state.scrollListener);
         }
     });
-    return (<>
+    return (<div>
       <picture ref={pictureRef}>
         <mitosis_1.Show when={!state.useLazyLoading() || load}>
           <img alt={props.altText} aria-role={props.altText ? 'presentation' : undefined} css={{
@@ -60,6 +60,6 @@ function Image(props) {
         <source srcset={props.srcset}/>
       </picture>
       {props.children}
-    </>);
+    </div>);
 }
 exports.default = Image;

package/dist/src/__tests__/data/blocks/root-fragment-multi-node.raw.d.ts

@@ -0,0 +1,7 @@
+export interface ButtonProps {
+    attributes?: any;
+    text?: string;
+    link?: string;
+    openLinkInNewTab?: boolean;
+}
+export default function Button(props: ButtonProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/root-fragment-multi-node.raw.jsx

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function Button(props) {
+    return (<>
+      <mitosis_1.Show when={props.link}>
+        <a {...props.attributes} href={props.link} target={props.openLinkInNewTab ? '_blank' : undefined}>
+          {props.text}
+        </a>
+      </mitosis_1.Show>
+      <mitosis_1.Show when={!props.link}>
+        <button {...props.attributes} type="button">
+          {props.text}
+        </button>
+      </mitosis_1.Show>
+    </>);
+}
+exports.default = Button;

package/dist/src/__tests__/data/default-props/default-props.raw.jsx

@@ -7,7 +7,7 @@ function Button(props) {
         link: 'https://builder.io/',
         openLinkInNewTab: false,
     });
-    return (<>
+    return (<div>
       <mitosis_1.Show when={props.link}>
         <a {...props.attributes} href={props.link} target={props.openLinkInNewTab ? '_blank' : undefined}>
           {props.text}
@@ -18,6 +18,6 @@ function Button(props) {
           {props.text}
         </button>
       </mitosis_1.Show>
-    </>);
+    </div>);
 }
 exports.default = Button;

package/dist/src/__tests__/shared.d.ts

@@ -1,7 +1,7 @@
-import { TranspilerGenerator } from '../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 import { Target } from '../types/config';
 export declare const runTestsForJsx: () => void;
-export declare const runTestsForTarget: <X>({ target, generator, options, }: {
+export declare const runTestsForTarget: <X extends BaseTranspilerOptions>({ target, generator, options, }: {
     target: Target;
     generator: TranspilerGenerator<X, string>;
     options: X;

package/dist/src/__tests__/shared.js

@@ -13,65 +13,67 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.runTestsForTarget = exports.runTestsForJsx = void 0;
 var jsx_1 = require("../parsers/jsx");
-var basicForShow = require('./data/basic-for-show.raw');
-var basicOnMountUpdate = require('./data/basic-onMount-update.raw');
-var basicContext = require('./data/basic-context.raw');
-var basicOutputsMeta = require('./data/basic-outputs-meta.raw');
-var basicOutputs = require('./data/basic-outputs.raw');
-var subComponent = require('./data/sub-component.lite.jsx');
-var basic = require('./data/basic.raw');
-var basicMitosis = require('./data/basic-custom-mitosis-package.raw');
-var basicChildComponent = require('./data/basic-child-component.raw');
-var basicFor = require('./data/basic-for.raw');
-var basicRef = require('./data/basic-ref.raw');
-var basicForwardRef = require('./data/basic-forwardRef.raw');
-var basicForwardRefMetadata = require('./data/basic-forwardRef-metadata.raw');
-var basicRefPrevious = require('./data/basic-ref-usePrevious.raw');
-var basicRefAssignment = require('./data/basic-ref-assignment.raw');
-var propsDestructure = require('./data/basic-props-destructure.raw');
-var nestedStyles = require('./data/nested-styles.lite');
-var preserveExportOrLocalStatement = require('./data/basic-preserve-export-or-local-statement.raw');
-var propsType = require('./data/types/component-props-type.raw');
-var propsInterface = require('./data/types/component-props-interface.raw');
-var preserveTyping = require('./data/types/preserve-typing.raw');
-var typeDependency = require('./data/types/type-dependency.raw');
-var defaultProps = require('./data/default-props/default-props.raw');
-var classRaw = require('./data/styles/class.raw');
-var className = require('./data/styles/className.raw');
-var classAndClassName = require('./data/styles/class-and-className.raw');
-var classState = require('./data/styles/classState.raw');
-var button = require('./data/blocks/button.raw');
-var classNameJsx = require('./data/blocks/classname-jsx.raw');
-var columns = require('./data/blocks/columns.raw');
-var contentSlotHtml = require('./data/blocks/content-slot-html.raw');
-var contentSlotJsx = require('./data/blocks/content-slot-jsx.raw');
-var customCode = require('./data/blocks/custom-code.raw');
-var formBlock = require('./data/blocks/form.raw');
-var image = require('./data/blocks/image.raw');
-var imageState = require('./data/blocks/img-state.raw');
-var img = require('./data/blocks/img.raw');
-var inputBlock = require('./data/blocks/input.raw');
-var multipleOnUpdate = require('./data/blocks/multiple-onUpdate.raw');
-var multipleOnUpdateWithDeps = require('./data/blocks/multiple-onUpdateWithDeps.raw');
-var onInit = require('./data/blocks/onInit.raw');
-var onInitonMount = require('./data/blocks/onInit-onMount.raw');
-var onMount = require('./data/blocks/onMount.raw');
-var onUpdate = require('./data/blocks/onUpdate.raw');
-var onUpdateWithDeps = require('./data/blocks/onUpdateWithDeps.raw');
-var rawText = require('./data/blocks/raw-text.raw');
-var section = require('./data/blocks/section.raw');
-var sectionState = require('./data/blocks/section-state.raw');
-var selectBlock = require('./data/blocks/select.raw');
-var selfRefCompWChildren = require('./data/blocks/self-referencing-component-with-children.raw');
-var selfRefComp = require('./data/blocks/self-referencing-component.raw');
-var slotHtml = require('./data/blocks/slot-html.raw');
-var slotJsx = require('./data/blocks/slot-jsx.raw');
-var stamped = require('./data/blocks/stamped-io.raw');
-var submitButtonBlock = require('./data/blocks/submit-button.raw');
-var text = require('./data/blocks/text.raw');
-var textarea = require('./data/blocks/textarea.raw');
-var video = require('./data/blocks/video.raw');
-var builderRenderContent = require('./data/blocks/builder-render-content.raw');
+var getRawFile = function (path) { return require(path); };
+var basicForShow = getRawFile('./data/basic-for-show.raw');
+var basicOnMountUpdate = getRawFile('./data/basic-onMount-update.raw');
+var basicContext = getRawFile('./data/basic-context.raw');
+var basicOutputsMeta = getRawFile('./data/basic-outputs-meta.raw');
+var basicOutputs = getRawFile('./data/basic-outputs.raw');
+var subComponent = getRawFile('./data/sub-component.lite.jsx');
+var basic = getRawFile('./data/basic.raw');
+var basicMitosis = getRawFile('./data/basic-custom-mitosis-package.raw');
+var basicChildComponent = getRawFile('./data/basic-child-component.raw');
+var basicFor = getRawFile('./data/basic-for.raw');
+var basicRef = getRawFile('./data/basic-ref.raw');
+var basicForwardRef = getRawFile('./data/basic-forwardRef.raw');
+var basicForwardRefMetadata = getRawFile('./data/basic-forwardRef-metadata.raw');
+var basicRefPrevious = getRawFile('./data/basic-ref-usePrevious.raw');
+var basicRefAssignment = getRawFile('./data/basic-ref-assignment.raw');
+var propsDestructure = getRawFile('./data/basic-props-destructure.raw');
+var nestedStyles = getRawFile('./data/nested-styles.lite');
+var preserveExportOrLocalStatement = getRawFile('./data/basic-preserve-export-or-local-statement.raw');
+var propsType = getRawFile('./data/types/component-props-type.raw');
+var propsInterface = getRawFile('./data/types/component-props-interface.raw');
+var preserveTyping = getRawFile('./data/types/preserve-typing.raw');
+var typeDependency = getRawFile('./data/types/type-dependency.raw');
+var defaultProps = getRawFile('./data/default-props/default-props.raw');
+var classRaw = getRawFile('./data/styles/class.raw');
+var className = getRawFile('./data/styles/className.raw');
+var classAndClassName = getRawFile('./data/styles/class-and-className.raw');
+var classState = getRawFile('./data/styles/classState.raw');
+var button = getRawFile('./data/blocks/button.raw');
+var classNameJsx = getRawFile('./data/blocks/classname-jsx.raw');
+var columns = getRawFile('./data/blocks/columns.raw');
+var contentSlotHtml = getRawFile('./data/blocks/content-slot-html.raw');
+var contentSlotJsx = getRawFile('./data/blocks/content-slot-jsx.raw');
+var customCode = getRawFile('./data/blocks/custom-code.raw');
+var formBlock = getRawFile('./data/blocks/form.raw');
+var image = getRawFile('./data/blocks/image.raw');
+var imageState = getRawFile('./data/blocks/img-state.raw');
+var img = getRawFile('./data/blocks/img.raw');
+var inputBlock = getRawFile('./data/blocks/input.raw');
+var multipleOnUpdate = getRawFile('./data/blocks/multiple-onUpdate.raw');
+var multipleOnUpdateWithDeps = getRawFile('./data/blocks/multiple-onUpdateWithDeps.raw');
+var onInit = getRawFile('./data/blocks/onInit.raw');
+var onInitonMount = getRawFile('./data/blocks/onInit-onMount.raw');
+var onMount = getRawFile('./data/blocks/onMount.raw');
+var onUpdate = getRawFile('./data/blocks/onUpdate.raw');
+var onUpdateWithDeps = getRawFile('./data/blocks/onUpdateWithDeps.raw');
+var rawText = getRawFile('./data/blocks/raw-text.raw');
+var section = getRawFile('./data/blocks/section.raw');
+var sectionState = getRawFile('./data/blocks/section-state.raw');
+var selectBlock = getRawFile('./data/blocks/select.raw');
+var selfRefCompWChildren = getRawFile('./data/blocks/self-referencing-component-with-children.raw');
+var selfRefComp = getRawFile('./data/blocks/self-referencing-component.raw');
+var slotHtml = getRawFile('./data/blocks/slot-html.raw');
+var slotJsx = getRawFile('./data/blocks/slot-jsx.raw');
+var stamped = getRawFile('./data/blocks/stamped-io.raw');
+var submitButtonBlock = getRawFile('./data/blocks/submit-button.raw');
+var text = getRawFile('./data/blocks/text.raw');
+var textarea = getRawFile('./data/blocks/textarea.raw');
+var video = getRawFile('./data/blocks/video.raw');
+var builderRenderContent = getRawFile('./data/blocks/builder-render-content.raw');
+var rootFragmentMultiNode = getRawFile('./data/blocks/root-fragment-multi-node.raw');
 var path = 'test-path';
 var BASIC_TESTS = {
     Basic: basic,
@@ -104,7 +106,7 @@ var BASIC_TESTS = {
     defaultProps: defaultProps,
     preserveTyping: preserveTyping,
     typeDependency: typeDependency,
-    defaultValsWithTypes: require('./data/types/component-with-default-values-types.raw'),
+    defaultValsWithTypes: getRawFile('./data/types/component-with-default-values-types.raw'),
     'import types': builderRenderContent,
     subComponent: subComponent,
     nestedStyles: nestedStyles,
@@ -122,6 +124,7 @@ var BASIC_TESTS = {
     'class + ClassName + css': classAndClassName,
     'self-referencing component with children': selfRefCompWChildren,
     'self-referencing component': selfRefComp,
+    rootFragmentMultiNode: rootFragmentMultiNode,
 };
 var SLOTS_TESTS = {
     ContentSlotJSX: contentSlotJsx,
@@ -146,15 +149,15 @@ var FORWARD_REF_TESTS = {
     basicForwardRefMetadata: basicForwardRefMetadata,
 };
 var SHOW_TESTS = {
-    rootShow: require('./data/blocks/rootShow.raw'),
-    nestedShow: require('./data/show/nested-show.raw'),
-    showWithFor: require('./data/show/show-with-for.raw'),
+    rootShow: getRawFile('./data/blocks/rootShow.raw'),
+    nestedShow: getRawFile('./data/show/nested-show.raw'),
+    showWithFor: getRawFile('./data/show/show-with-for.raw'),
 };
 var ADVANCED_REF = {
-    AdvancedRef: require('./data/advanced-ref.raw'),
+    AdvancedRef: getRawFile('./data/advanced-ref.raw'),
 };
 var ON_UPDATE_RETURN = {
-    basicOnUpdateReturn: require('./data/basic-onUpdate-return.raw'),
+    basicOnUpdateReturn: getRawFile('./data/basic-onUpdate-return.raw'),
 };
 var JSX_TESTS = [
     BASIC_TESTS,
@@ -346,14 +349,13 @@ var runTestsForTarget = function (_a) {
                 testsArray.forEach(function (tests) {
                     Object.keys(tests).forEach(function (key) {
                         test(key, function () {
+                            var component = (0, jsx_1.parseJsx)(tests[key], { typescript: options.typescript });
+                            var getOutput = function () { return generator(options)({ component: component, path: path }); };
                             try {
-                                var component = (0, jsx_1.parseJsx)(tests[key]);
-                                var output = generator(options)({ component: component, path: path });
-                                expect(output).toMatchSnapshot();
+                                expect(getOutput()).toMatchSnapshot();
                             }
                             catch (error) {
-                                console.log('failed to parse', error);
-                                throw error;
+                                expect(getOutput).toThrowErrorMatchingSnapshot();
                             }
                         });
                     });

package/dist/src/generators/angular.js

@@ -52,14 +52,20 @@ var mappers = {
     Slot: function (json, options, blockOptions) {
         return "<ng-content ".concat(Object.keys(json.bindings)
             .map(function (binding) {
-            var _a, _b, _c;
+            var _a, _b;
             if (binding === 'name') {
                 var selector = (0, lodash_1.kebabCase)((_b = (_a = json.bindings.name) === null || _a === void 0 ? void 0 : _a.code) === null || _b === void 0 ? void 0 : _b.replace('props.slot', ''));
                 return "select=\"[".concat(selector, "]\"");
             }
-            return "".concat((_c = json.bindings[binding]) === null || _c === void 0 ? void 0 : _c.code);
         })
-            .join('\n'), "></ng-content>");
+            .join('\n'), ">").concat(Object.keys(json.bindings)
+            .map(function (binding) {
+            var _a;
+            if (binding !== 'name') {
+                return "".concat((_a = json.bindings[binding]) === null || _a === void 0 ? void 0 : _a.code);
+            }
+        })
+            .join('\n'), "</ng-content>");
     },
 };
 // TODO: Maybe in the future allow defining `string | function` as values

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

@@ -6,7 +6,7 @@ var contextToQwik = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
         var context = _a.context;
-        var str = "\n  import { createContext } from '@builder.io/qwik';\n\n  export default createContext(\"".concat(context.name, "\")\n  ");
+        var str = "\n  import { createContext } from '@builder.io/qwik';\n\n  export default createContext<any>(\"".concat(context.name, "\")\n  ");
         if (options.format !== false) {
             try {
                 str = (0, standalone_1.format)(str, {

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

@@ -42,10 +42,11 @@ var componentToQwik = function (userOptions) {
         if (userOptions.plugins) {
             component = (0, plugins_1.runPostJsonPlugins)(component, userOptions.plugins);
         }
-        var file = new src_generator_1.File(component.name + '.js', {
+        var isTypeScript = !!userOptions.typescript;
+        var file = new src_generator_1.File(component.name + (isTypeScript ? '.ts' : '.js'), {
             isPretty: true,
             isJSX: true,
-            isTypeScript: false,
+            isTypeScript: isTypeScript,
             isModule: true,
             isBuilder: false,
         }, '@builder.io/qwik', '');
@@ -60,7 +61,7 @@ var componentToQwik = function (userOptions) {
             var state_2 = emitStateMethodsAndRewriteBindings(file, component, metadata);
             var hasState_1 = (0, state_1.checkHasState)(component);
             var css_1 = null;
-            var componentBody = (0, src_generator_1.arrowFnBlock)(['props'], [
+            var componentFn = (0, src_generator_1.arrowFnBlock)(['props'], [
                 function () {
                     css_1 = emitUseStyles(file, component);
                     emitUseContext(file, component);
@@ -73,14 +74,19 @@ var componentToQwik = function (userOptions) {
                     emitTagNameHack(file, component);
                     emitJSX(file, component, mutable_1);
                 },
-            ], [component.propsTypeRef || 'any']);
+            ], [component.propsTypeRef + (isLightComponent ? '&{key?:any}' : '') || 'any']);
             file.src.const(component.name, isLightComponent
-                ? componentBody
-                : (0, src_generator_1.invoke)(file.import(file.qwikModule, 'component$'), [componentBody]), true, true);
+                ? componentFn
+                : (0, src_generator_1.invoke)(file.import(file.qwikModule, 'component$'), [componentFn]), true, true);
             file.exportDefault(component.name);
             emitStyles(file, css_1);
             DEBUG && file.exportConst('COMPONENT', (0, stable_serialize_1.stableJSONserialize)(component));
-            return '// GENERATED BY MITOSIS\n\n' + file.toString();
+            var sourceFile = '// GENERATED BY MITOSIS\n\n' + file.toString();
+            if (userOptions.plugins) {
+                sourceFile = (0, plugins_1.runPreCodePlugins)(sourceFile, userOptions.plugins);
+                sourceFile = (0, plugins_1.runPostCodePlugins)(sourceFile, userOptions.plugins);
+            }
+            return sourceFile;
         }
         catch (e) {
             console.error(e);
@@ -199,13 +205,17 @@ function emitUseStore(file, stateInit) {
     var state = stateInit[0];
     var hasState = state && Object.keys(state).length > 0;
     if (hasState) {
-        file.src.emit('const state=', file.import(file.qwikModule, 'useStore').localName, '(');
+        file.src.emit('const state=', file.import(file.qwikModule, 'useStore').localName);
+        if (file.options.isTypeScript) {
+            file.src.emit('<any>');
+        }
+        file.src.emit('(');
         file.src.emit((0, stable_serialize_1.stableJSONserialize)(state));
         file.src.emit(');');
     }
     else {
         // TODO hack for now so that `state` variable is defined, even though it is never read.
-        file.src.emit('const state={};');
+        file.src.emit('const state={tagName:""' + (file.options.isTypeScript ? 'as any' : '') + '};');
     }
 }
 function emitTypes(file, component) {

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

@@ -358,6 +358,8 @@ var SrcBuilder = /** @class */ (function () {
             if (value) {
                 if (key === 'innerHTML')
                     key = 'dangerouslySetInnerHTML';
+                if (key === 'dataSet')
+                    return; // ignore
                 if (self.isJSX) {
                     self.emit(' ', key, '=');
                     if (typeof value == 'string' && value.startsWith('"') && value.endsWith('"')) {

package/dist/src/generators/vue.js

@@ -108,7 +108,10 @@ function processBinding(code, _options, json, includeProps) {
     });
 }
 var NODE_MAPPERS = {
-    Fragment: function (json, options) {
+    Fragment: function (json, options, scope) {
+        if (options.vueVersion === 2 && (scope === null || scope === void 0 ? void 0 : scope.isRootNode)) {
+            throw new Error('Vue 2 template should have a single root element');
+        }
         return json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n');
     },
     For: function (_json, options) {
@@ -133,12 +136,18 @@ var NODE_MAPPERS = {
         var _a, _b, _c, _d, _e;
         var _f, _g;
         var ifValue = (0, slots_1.replaceSlotsInString)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_f = json.bindings.when) === null || _f === void 0 ? void 0 : _f.code), function (slotName) { return "$slots.".concat(slotName); });
+        var defaultShowTemplate = "\n    <template ".concat(SPECIAL_PROPERTIES.V_IF, "=\"").concat(encodeQuotes(ifValue), "\">\n      ").concat(json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'), "\n    </template>\n    ").concat((0, is_mitosis_node_1.isMitosisNode)(json.meta.else)
+            ? "\n        <template ".concat(SPECIAL_PROPERTIES.V_ELSE, ">\n          ").concat((0, exports.blockToVue)(json.meta.else, options), "\n        </template>")
+            : '', "\n    ");
         switch (options.vueVersion) {
             case 3:
-                return "\n        <template ".concat(SPECIAL_PROPERTIES.V_IF, "=\"").concat(encodeQuotes(ifValue), "\">\n          ").concat(json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'), "\n        </template>\n        ").concat((0, is_mitosis_node_1.isMitosisNode)(json.meta.else)
-                    ? "\n            <template ".concat(SPECIAL_PROPERTIES.V_ELSE, ">\n              ").concat((0, exports.blockToVue)(json.meta.else, options), "\n            </template>")
-                    : '', "\n        ");
+                return defaultShowTemplate;
             case 2:
+                // if it is not the root node, the default show template can be used
+                // as Vue 2 only has this limitation at root level
+                if (!(scope === null || scope === void 0 ? void 0 : scope.isRootNode)) {
+                    return defaultShowTemplate;
+                }
                 // Vue 2 can only handle one root element, so we just take the first one.
                 // TO-DO: warn user of multi-children Show.
                 var firstChild = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes)[0];

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

@@ -110,7 +110,7 @@ var renderImport = function (_a) {
             console.warn('Vue: Async Component imports cannot include named imports. Dropping async import. This might break your code.');
         }
         else {
-            return "const ".concat(importValue, " = () => import('").concat(path, "').then(x => x.default)");
+            return "const ".concat(importValue, " = () => import('").concat(path, "')\n      .then(x => x.default)\n      .catch(err => { \n        console.error('Error while attempting to dynamically import component ").concat(importValue, " at ").concat(path, "', err);\n        throw err;\n      });");
         }
     }
     return importValue ? "import ".concat(importValue, " from '").concat(path, "';") : "import '".concat(path, "';");

package/dist/src/index.js

@@ -17,7 +17,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDefaultProps = exports.useMetadata = exports.onError = exports.useDynamicTag = exports.onUnMount = exports.onInit = exports.onCreate = exports.onUpdate = exports.onMount = exports.setContext = exports.createContext = exports.useContext = exports.useRef = exports.useState = exports.useStore = void 0;
 __exportStar(require("./flow"), exports);
 // These compile away
-var useStore = function (obj) { return obj; };
+var useStore = function (obj) {
+    throw new Error('useStore: Mitosis hook should have been compiled away');
+    return obj;
+};
 exports.useStore = useStore;
 var useState = function (obj) {
     throw new Error('useState: Mitosis hook should have been compiled away');

package/dist/src/parsers/jsx/jsx.d.ts

@@ -7,4 +7,4 @@ import { ParseMitosisOptions } from './types';
  * @param jsx string representation of the Mitosis component
  * @returns A JSON representation of the Mitosis component
  */
-export declare function parseJsx(jsx: string, options?: Partial<ParseMitosisOptions>): MitosisComponent;
+export declare function parseJsx(jsx: string, _options?: Partial<ParseMitosisOptions>): MitosisComponent;

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

@@ -72,10 +72,10 @@ var beforeParse = function (path) {
  * @param jsx string representation of the Mitosis component
  * @returns A JSON representation of the Mitosis component
  */
-function parseJsx(jsx, options) {
-    if (options === void 0) { options = {}; }
-    var useOptions = __assign({ format: 'react' }, options);
+function parseJsx(jsx, _options) {
+    if (_options === void 0) { _options = {}; }
     var subComponentFunctions = [];
+    var options = __assign({ typescript: false }, _options);
     var output = babel.transform(jsx, {
         configFile: false,
         babelrc: false,
@@ -89,7 +89,8 @@ function parseJsx(jsx, options) {
                     // If left to its default `false`, then this will strip away:
                     // - unused JS imports
                     // - types imports within regular JS import syntax
-                    onlyRemoveTypeImports: true,
+                    // When outputting to TS, we must set it to `true` to preserve these imports.
+                    onlyRemoveTypeImports: options.typescript,
                 },
             ],
         ],
@@ -118,7 +119,7 @@ function parseJsx(jsx, options) {
                             return !types.isExportDefaultDeclaration(node) && types.isFunctionDeclaration(node);
                         })
                             .map(function (node) { return "export default ".concat((0, generator_1.default)(node).code); });
-                        var preComponentCode = (0, function_1.pipe)(path.node.body.filter(function (statement) { return !(0, helpers_1.isImportOrDefaultExport)(statement); }), function (statements) { return (0, metadata_1.collectMetadata)(statements, context.builder.component, useOptions); }, types.program, generator_1.default, function (generatorResult) { return generatorResult.code; });
+                        var preComponentCode = (0, function_1.pipe)(path.node.body.filter(function (statement) { return !(0, helpers_1.isImportOrDefaultExport)(statement); }), function (statements) { return (0, metadata_1.collectMetadata)(statements, context.builder.component, options); }, types.program, generator_1.default, function (generatorResult) { return generatorResult.code; });
                         // TODO: support multiple? e.g. for others to add imports?
                         context.builder.component.hooks.preComponent = { code: preComponentCode };
                         path.replaceWith(types.program(keepStatements));
@@ -171,7 +172,7 @@ function parseJsx(jsx, options) {
     var parsed = (0, json_1.tryParseJson)(toParse);
     (0, state_1.mapStateIdentifiers)(parsed);
     (0, context_1.extractContextComponents)(parsed);
-    parsed.subComponents = subComponentFunctions.map(function (item) { return parseJsx(item, useOptions); });
+    parsed.subComponents = subComponentFunctions.map(function (item) { return parseJsx(item, options); });
     return parsed;
 }
 exports.parseJsx = parseJsx;

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

@@ -1,8 +1,8 @@
 import { MitosisComponent } from '../../types/mitosis-component';
 export declare type ParseMitosisOptions = {
-    format: 'react' | 'simple';
     jsonHookNames?: string[];
     compileAwayPackages?: string[];
+    typescript: boolean;
 };
 export declare type Context = {
     builder: {

package/dist/src/types/config.d.ts

@@ -59,6 +59,11 @@ export declare type MitosisConfig = {
      * Configure a custom parser function which takes a string and returns MitosisJSON
      * Defaults to the JSXParser of this project (src/parsers/jsx)
      */
-    parser?: (code: string) => MitosisComponent;
+    parser?: (code: string, path?: string) => MitosisComponent;
+    /**
+     * Configure a custom function that provides the output path for each target.
+     * If you provide this function, you must provide a value for every target yourself.
+     */
+    getTargetPath?: (target: Target) => string;
 };
 export {};