@builder.io/mitosis 0.0.134 → 0.0.136

package/dist/src/constants/media-sizes.d.ts

@@ -1,4 +1,4 @@
-export declare type Size = 'large' | 'medium' | 'small';
+export type Size = 'large' | 'medium' | 'small';
 export declare const sizeNames: Size[];
 export declare const sizes: {
     small: {

package/dist/src/generators/angular.js

@@ -395,6 +395,7 @@ var componentToAngular = function (userOptions) {
             return "const defaultProps = {".concat(defalutPropsString, "};\n");
         };
         var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n    })\n    export class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n    })\n    export class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_f = options === null || options === void 0 ? void 0 : options.experimental) === null || _f === void 0 ? void 0 : _f.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', options.standalone ? "import { CommonModule } from '@angular/common';" : '', json.types ? json.types.join('\n') : '', getPropsDefinition({ json: json }), (0, render_imports_1.renderPreComponent)({
+            explicitImportFileExtension: options.explicitImportFileExtension,
             component: json,
             target: 'angular',
             excludeMitosisComponents: !options.standalone && !options.preserveImports,

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

@@ -4,7 +4,7 @@ import { BaseTranspilerOptions, TranspilerArgs } from '../types/transpiler';
 export interface ToBuilderOptions extends BaseTranspilerOptions {
     includeIds?: boolean;
 }
-declare type InternalOptions = {
+type InternalOptions = {
     skipMapper?: boolean;
 };
 export declare const blockToBuilder: (json: MitosisNode, options?: ToBuilderOptions, _internalOptions?: InternalOptions) => BuilderElement;

package/dist/src/generators/context/qwik.d.ts

@@ -1,5 +1,5 @@
 import { MitosisContext } from '../../types/mitosis-context';
-declare type ContextToQwikOptions = {
+type ContextToQwikOptions = {
     format?: boolean;
 };
 export declare const contextToQwik: (options?: ContextToQwikOptions) => ({ context }: {

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

@@ -1,5 +1,5 @@
 import { MitosisContext } from '../../types/mitosis-context';
-declare type ContextToReactOptions = {
+type ContextToReactOptions = {
     format?: boolean;
     preact?: boolean;
     typescript?: boolean;

package/dist/src/generators/context/rsc.d.ts

@@ -1,5 +1,5 @@
 import { MitosisContext } from '../../types/mitosis-context';
-declare type ContextToRscOptions = {
+type ContextToRscOptions = {
     format?: boolean;
 };
 /**

package/dist/src/generators/context/solid.d.ts

@@ -1,5 +1,5 @@
 import { MitosisContext } from '../../types/mitosis-context';
-declare type ContextToSolidOptions = {
+type ContextToSolidOptions = {
     format?: boolean;
 };
 export declare const contextToSolid: (options?: ContextToSolidOptions) => ({ context }: {

package/dist/src/generators/html.js

@@ -611,7 +611,11 @@ var componentToCustomElement = function (_options) {
                 console.warn('Could not prettify', { string: html }, err);
             }
         }
-        var str = "\n      ".concat(json.types ? json.types.join('\n') : '', "\n      ").concat((0, render_imports_1.renderPreComponent)({ component: json, target: 'customElement' }), "\n      /**\n       * Usage:\n       * \n       *  <").concat(kebabName, "></").concat(kebabName, ">\n       * \n       */\n      class ").concat(ComponentName, " extends ").concat(((_j = options === null || options === void 0 ? void 0 : options.experimental) === null || _j === void 0 ? void 0 : _j.classExtends)
+        var str = "\n      ".concat(json.types ? json.types.join('\n') : '', "\n      ").concat((0, render_imports_1.renderPreComponent)({
+            explicitImportFileExtension: options.explicitImportFileExtension,
+            component: json,
+            target: 'customElement',
+        }), "\n      /**\n       * Usage:\n       * \n       *  <").concat(kebabName, "></").concat(kebabName, ">\n       * \n       */\n      class ").concat(ComponentName, " extends ").concat(((_j = options === null || options === void 0 ? void 0 : options.experimental) === null || _j === void 0 ? void 0 : _j.classExtends)
             ? (_k = options === null || options === void 0 ? void 0 : options.experimental) === null || _k === void 0 ? void 0 : _k.classExtends(json, options)
             : 'HTMLElement', " {\n        ").concat(Array.from(domRefs)
             .map(function (ref) {

package/dist/src/generators/lit/generate.js

@@ -180,7 +180,11 @@ var componentToLit = function (_options) {
                 html = html.replace(/\n{3,}/g, '\n\n');
             }
         }
-        var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state, query } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html`\n          ", "\n          ", "\n        `\n      }\n    }\n  "], ["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state, query } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html\\`\n          ", "\n          ", "\n        \\`\n      }\n    }\n  "])), (0, render_imports_1.renderPreComponent)({ component: json, target: 'lit' }), json.types ? json.types.join('\n') : '', hasSpread
+        var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state, query } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html`\n          ", "\n          ", "\n        `\n      }\n    }\n  "], ["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state, query } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html\\`\n          ", "\n          ", "\n        \\`\n      }\n    }\n  "])), (0, render_imports_1.renderPreComponent)({
+            explicitImportFileExtension: options.explicitImportFileExtension,
+            component: json,
+            target: 'lit',
+        }), json.types ? json.types.join('\n') : '', hasSpread
             ? "\n      const spread = (properties) =>\n        directive((part) => {\n          for (const property in properties) {\n            const value = properties[attr];\n            part.element[property] = value;\n          }\n        });\n    "
             : '', ((_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.tagName) || getCustomTagName(json.name, options), json.name, options.useShadowDom
             ? ''

package/dist/src/generators/marko/generate.js

@@ -182,7 +182,11 @@ var componentToMarko = function (userOptions) {
                 console.warn('Could not format css', err);
             }
         }
-        var jsString = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n\n    class {\n        ", "\n\n        ", "\n\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    }\n  "], ["\n    ", "\n\n    class {\n        ", "\n\n        ", "\n\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    }\n  "])), (0, render_imports_1.renderPreComponent)({ component: json, target: 'marko' }), methodsString, !hasState
+        var jsString = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n\n    class {\n        ", "\n\n        ", "\n\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    }\n  "], ["\n    ", "\n\n    class {\n        ", "\n\n        ", "\n\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    }\n  "])), (0, render_imports_1.renderPreComponent)({
+            explicitImportFileExtension: options.explicitImportFileExtension,
+            component: json,
+            target: 'marko',
+        }), methodsString, !hasState
             ? ''
             : "onCreate(".concat(thisHasProps ? 'input' : '', ") {\n          this.state = ").concat(dataString, "\n        }"), Array.from(domRefs)
             .map(function (refName) { return "get ".concat((0, lodash_1.camelCase)(refName), "() { \n            return this.getEl('").concat((0, lodash_1.camelCase)(refName), "')\n          }"); })

package/dist/src/generators/mitosis.js

@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToMitosis = exports.blockToMitosis = exports.DEFAULT_FORMAT = void 0;
+var plugins_1 = require("../modules/plugins");
 var json5_1 = __importDefault(require("json5"));
 var standalone_1 = require("prettier/standalone");
 var hooks_1 = require("../constants/hooks");
@@ -143,6 +144,9 @@ var componentToMitosis = function (toMitosisOptions) {
             })({ component: component });
         }
         var json = (0, fast_clone_1.fastClone)(component);
+        if (options.plugins) {
+            json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
+        }
         var domRefs = (0, get_refs_1.getRefs)(component);
         // grab refs not used for bindings
         var jsRefs = Object.keys(component.refs).filter(function (ref) { return domRefs.has(ref); });
@@ -154,15 +158,25 @@ var componentToMitosis = function (toMitosisOptions) {
         var components = Array.from((0, get_components_1.getComponents)(json));
         var mitosisComponents = components.filter(function (item) { return mitosisCoreComponents.includes(item); });
         var otherComponents = components.filter(function (item) { return !mitosisCoreComponents.includes(item); });
+        if (options.plugins) {
+            json = (0, plugins_1.runPostJsonPlugins)({ json: json, plugins: options.plugins });
+        }
         var hasState = (0, state_1.checkHasState)(component);
         var needsMitosisCoreImport = Boolean(hasState || refs.length || mitosisComponents.length);
         var stringifiedUseMetadata = json5_1.default.stringify(component.meta.useMetadata);
         // TODO: smart only pull in imports as needed
         var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "], ["\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "])), !needsMitosisCoreImport
             ? ''
-            : "import { ".concat(!hasState ? '' : 'useStore, ', " ").concat(!refs.length ? '' : 'useRef, ', " ").concat(mitosisComponents.join(', '), " } from '..';"), !otherComponents.length ? '' : "import { ".concat(otherComponents.join(','), " } from '@components';"), json.types ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({ component: json, target: 'mitosis' }), stringifiedUseMetadata && stringifiedUseMetadata !== '{}'
+            : "import { ".concat(!hasState ? '' : 'useStore, ', " ").concat(!refs.length ? '' : 'useRef, ', " ").concat(mitosisComponents.join(', '), " } from '..';"), !otherComponents.length ? '' : "import { ".concat(otherComponents.join(','), " } from '@components';"), json.types ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({
+            explicitImportFileExtension: options.explicitImportFileExtension,
+            component: json,
+            target: 'mitosis',
+        }), stringifiedUseMetadata && stringifiedUseMetadata !== '{}'
             ? "".concat(hooks_1.HOOKS.METADATA, "(").concat(stringifiedUseMetadata, ")")
             : '', component.name, !hasState ? '' : "const state = useStore(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");"), getRefsString(json, refs), json.hooks.onMount.map(function (hook) { return "onMount(() => { ".concat(hook.code, " })"); }), !((_b = json.hooks.onUnMount) === null || _b === void 0 ? void 0 : _b.code) ? '' : "onUnMount(() => { ".concat(json.hooks.onUnMount.code, " })"), addWrapper ? '<>' : '', json.children.map(function (item) { return (0, exports.blockToMitosis)(item, options, component); }).join('\n'), addWrapper ? '</>' : '');
+        if (options.plugins) {
+            str = (0, plugins_1.runPreCodePlugins)({ json: json, code: str, plugins: options.plugins });
+        }
         if (options.prettier !== false) {
             try {
                 str = (0, standalone_1.format)(str, {
@@ -177,6 +191,9 @@ var componentToMitosis = function (toMitosisOptions) {
                 throw err;
             }
         }
+        if (options.plugins) {
+            str = (0, plugins_1.runPostCodePlugins)({ json: json, code: str, plugins: options.plugins });
+        }
         return str;
     };
 };

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

@@ -306,6 +306,7 @@ function emitImports(file, component) {
             target: 'qwik',
             theImport: i,
             preserveFileExtensions: false,
+            explicitImportFileExtension: false,
         });
         Object.keys(i.imports).forEach(function (key) {
             var keyValue = i.imports[key];

package/dist/src/generators/qwik/component.d.ts

@@ -1,6 +1,6 @@
 import { MitosisComponent } from '../../types/mitosis-component';
 import { File, SrcBuilder } from './src-generator';
-export declare type QwikOptions = {
+export type QwikOptions = {
     qwikLib?: string;
     qrlPrefix?: string;
     output?: 'ts' | 'cjs' | 'mjs';

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

@@ -4,19 +4,19 @@ import { File } from '../src-generator';
 /**
  * Stores getters and initialization map.
  */
-export declare type StateInit = [
+export type StateInit = [
     StateValues,
     /**
      * Set of state initializers.
      */
     ...string[]
 ];
-export declare type PropertyName = string;
-export declare type StateValue = string;
+export type PropertyName = string;
+export type StateValue = string;
 /**
  * Map of getters that need to be rewritten to function invocations.
  */
-export declare type StateValues = Record<PropertyName, StateValue>;
+export type StateValues = Record<PropertyName, StateValue>;
 /**
  * @param file
  * @param stateInit
@@ -28,5 +28,5 @@ export declare function emitUseStore({ file, stateInit, isDeep, }: {
 }): void;
 export declare function emitStateMethodsAndRewriteBindings(file: File, component: MitosisComponent, metadata?: ComponentMetadata): StateInit;
 export declare function getLexicalScopeVars(component: MitosisComponent): string[];
-export declare type MethodMap = Record<string, 'method' | 'getter'>;
+export type MethodMap = Record<string, 'method' | 'getter'>;
 export declare function getStateMethodsAndGetters(state: MitosisComponent['state']): MethodMap;

package/dist/src/generators/qwik/helpers/styles.d.ts

@@ -1,6 +1,6 @@
 import { MitosisNode } from '../../..';
 import { SrcBuilder } from '../src-generator';
-export declare type CssStyles = {
+export type CssStyles = {
     CLASS_NAME: string;
 } & Record<string, string>;
 export declare function collectStyles(children: MitosisNode[], styleMap: Map<string, CssStyles>): Map<string, CssStyles>;

package/dist/src/generators/qwik/src-generator.d.ts

@@ -5,7 +5,7 @@ export interface SrcBuilderOptions {
     isJSX: boolean;
     isBuilder: boolean;
 }
-export declare type EmitFn = (this: SrcBuilder) => void;
+export type EmitFn = (this: SrcBuilder) => void;
 export declare class File {
     filename: string;
     imports: Imports;

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

@@ -215,7 +215,7 @@ var componentToReact = function (reactOptions) {
                 str = (0, standalone_1.format)(str, {
                     parser: 'typescript',
                     plugins: [
-                        require('prettier/parser-typescript'),
+                        require('prettier/parser-typescript'), // To support running in browsers
                         require('prettier/parser-postcss'),
                     ],
                 })
@@ -429,6 +429,7 @@ var _componentToReact = function (json, options, isSubComponent) {
                 : options.stateType === 'mobx'
                     ? "import { useLocalObservable, observer } from 'mobx-react-lite';"
                     : '', json.types && options.typescript ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({
+        explicitImportFileExtension: options.explicitImportFileExtension,
         component: json,
         target: options.type === 'native' ? 'reactNative' : 'react',
     }), isForwardRef ? "const ".concat(json.name, " = forwardRef").concat(forwardRefType, "(") : '', json.name, componentArgs, componentBody, isForwardRef ? ')' : '', getPropsDefinition({ json: json }), reactNativeStyles

package/dist/src/generators/react-native/sanitize-react-native-block-styles.d.ts

@@ -1,3 +1,3 @@
-declare type Styles = Record<string, string | number>;
+type Styles = Record<string, string | number>;
 export declare const sanitizeReactNativeBlockStyles: (styles: Styles) => Styles;
 export {};

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

@@ -1,4 +1,4 @@
 import { TranspilerGenerator } from '../types/transpiler';
 import { ToReactOptions } from './react';
-export declare type ToRscOptions = ToReactOptions;
+export type ToRscOptions = ToReactOptions;
 export declare const componentToRsc: TranspilerGenerator<Partial<ToRscOptions>>;

package/dist/src/generators/solid/index.js

@@ -191,7 +191,11 @@ var componentToSolid = function (passedOptions) {
         var propsArgs = "props".concat(options.typescript ? ":".concat(propType) : '');
         var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(", ") {\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(", ") {\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "])), solidJSImports.length > 0 ? "import { ".concat(solidJSImports.join(', '), " } from 'solid-js';") : '', !foundDynamicComponents ? '' : "import { Dynamic } from 'solid-js/web';", storeImports.length > 0 ? "import { ".concat(storeImports.join(', '), " } from 'solid-js/store';") : '', !componentHasStyles && options.stylesType === 'styled-components'
             ? ''
-            : "import { css } from \"solid-styled-components\";", json.types && options.typescript ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({ component: json, target: 'solid' }), json.name, propsArgs, (_f = state === null || state === void 0 ? void 0 : state.str) !== null && _f !== void 0 ? _f : '', getRefsString(json, options), getContextString(json, options), json.hooks.onMount.map(function (hook) { return "onMount(() => { ".concat(hook.code, " })"); }).join('\n'), json.hooks.onUpdate
+            : "import { css } from \"solid-styled-components\";", json.types && options.typescript ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({
+            explicitImportFileExtension: options.explicitImportFileExtension,
+            component: json,
+            target: 'solid',
+        }), json.name, propsArgs, (_f = state === null || state === void 0 ? void 0 : state.str) !== null && _f !== void 0 ? _f : '', getRefsString(json, options), getContextString(json, options), json.hooks.onMount.map(function (hook) { return "onMount(() => { ".concat(hook.code, " })"); }).join('\n'), json.hooks.onUpdate
             ? json.hooks.onUpdate
                 .map(function (hook, index) {
                 if (hook.deps) {

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

@@ -1,6 +1,6 @@
 import { MitosisComponent } from '../../../types/mitosis-component';
 import { ToSolidOptions } from '../types';
-declare type State = {
+type State = {
     str: string;
     import: {
         store?: string[];

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

@@ -1,5 +1,5 @@
 import { BaseTranspilerOptions } from '../../types/transpiler';
-export declare type SolidState = 'mutable' | 'signals' | 'store';
+export type SolidState = 'mutable' | 'signals' | 'store';
 export interface ToSolidOptions extends BaseTranspilerOptions {
     state: SolidState;
     stylesType?: 'styled-components' | 'style-tag';

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

@@ -142,7 +142,11 @@ var componentToStencil = function (_options) {
              *
              *    export default function ...
              */
-            , "',\n      ", "\n    })\n    export default class ", " {\n    \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return (", "\n        \n          ", "\n\n        ", ")\n      }\n    }\n  "])), (0, render_imports_1.renderPreComponent)({ component: json, target: 'stencil' }), 
+            , "',\n      ", "\n    })\n    export default class ", " {\n    \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return (", "\n        \n          ", "\n\n        ", ")\n      }\n    }\n  "])), (0, render_imports_1.renderPreComponent)({
+            explicitImportFileExtension: options.explicitImportFileExtension,
+            component: json,
+            target: 'stencil',
+        }), 
         /**
          * You can set the tagName in your Mitosis component as
          *

package/dist/src/generators/svelte/blocks.d.ts

@@ -1,7 +1,7 @@
 import { MitosisComponent } from '../../types/mitosis-component';
 import { BaseNode, MitosisNode } from '../../types/mitosis-node';
 import { ToSvelteOptions } from './types';
-declare type BlockToSvelte<T extends BaseNode = MitosisNode> = (props: {
+type BlockToSvelte<T extends BaseNode = MitosisNode> = (props: {
     json: T;
     options: ToSvelteOptions;
     parentComponent: MitosisComponent;

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

@@ -275,7 +275,11 @@ var componentToSvelte = function (userProvidedOptions) {
             // make sure this is after all other state/code is initialized
             , "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "])), tsLangAttribute, !svelteImports.length ? '' : "import { ".concat(svelteImports.sort().join(', '), " } from 'svelte'"), !svelteStoreImports.length
             ? ''
-            : "import { ".concat(svelteStoreImports.sort().join(', '), " } from 'svelte/store'"), (0, render_imports_1.renderPreComponent)({ component: json, target: 'svelte' }), !hasData || options.stateType === 'variables' ? '' : "import onChange from 'on-change'", props
+            : "import { ".concat(svelteStoreImports.sort().join(', '), " } from 'svelte/store'"), (0, render_imports_1.renderPreComponent)({
+            explicitImportFileExtension: options.explicitImportFileExtension,
+            component: json,
+            target: 'svelte',
+        }), !hasData || options.stateType === 'variables' ? '' : "import onChange from 'on-change'", props
             .map(function (name) {
             var _a, _b, _c;
             if (name === 'children') {

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

@@ -1,4 +1,4 @@
 import { BaseTranspilerOptions } from '../../types/transpiler';
-export declare type ToSvelteOptions = BaseTranspilerOptions & {
+export type ToSvelteOptions = BaseTranspilerOptions & {
     stateType?: 'proxies' | 'variables';
 };

package/dist/src/generators/swift-ui.d.ts

@@ -1,3 +1,3 @@
 import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
-export declare type ToSwiftOptions = BaseTranspilerOptions;
+export type ToSwiftOptions = BaseTranspilerOptions;
 export declare const componentToSwift: TranspilerGenerator<ToSwiftOptions>;

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

@@ -3,7 +3,7 @@ import { MitosisComponent } from '../types/mitosis-component';
 import { TranspilerGenerator } from '../types/transpiler';
 import { ToReactOptions } from './react';
 export declare const DEFAULT_Component_SET: Set<string>;
-export declare type ToTaroOptions = ToReactOptions;
+export type ToTaroOptions = ToReactOptions;
 export declare const collectTaroStyles: (json: MitosisComponent) => ClassStyleMap;
 export declare const TagMap: Record<string, string>;
 export declare const componentToTaro: TranspilerGenerator<Partial<ToTaroOptions>>;

package/dist/src/generators/vue/blocks.d.ts

@@ -1,6 +1,6 @@
 import { MitosisNode } from '../../types/mitosis-node';
 import { ToVueOptions } from './types';
-declare type BlockRenderer = (json: MitosisNode, options: ToVueOptions, scope?: Scope) => string;
+type BlockRenderer = (json: MitosisNode, options: ToVueOptions, scope?: Scope) => string;
 interface Scope {
     isRootNode?: boolean;
 }

package/dist/src/generators/vue/helpers.d.ts

@@ -10,7 +10,7 @@ export declare function encodeQuotes(string: string): string;
 export declare const mapMitosisComponentToKebabCase: (componentName: string) => string;
 export declare const renameMitosisComponentsToKebabCase: (str: string) => string;
 export declare function getContextNames(json: MitosisComponent): string[];
-declare type ProcessBinding = {
+type ProcessBinding = {
     code: string;
     options: ToVueOptions;
     json: MitosisComponent;

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

@@ -1,7 +1,7 @@
 import { OmitObj } from '../../helpers/typescript';
 import { BaseTranspilerOptions } from '../../types/transpiler';
-export declare type VueVersion = 2 | 3;
-export declare type Api = 'options' | 'composition';
+export type VueVersion = 2 | 3;
+export type Api = 'options' | 'composition';
 interface VueVersionOpt {
     vueVersion: VueVersion;
 }
@@ -12,5 +12,5 @@ export interface ToVueOptions extends BaseTranspilerOptions, VueVersionOpt {
     defineComponent?: boolean;
     api: Api;
 }
-export declare type VueOptsWithoutVersion = OmitObj<ToVueOptions, VueVersionOpt>;
+export type VueOptsWithoutVersion = OmitObj<ToVueOptions, VueVersionOpt>;
 export {};

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

@@ -220,6 +220,7 @@ var componentToVue = function (userOptions) {
         var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n\n\n    <script ", " ", ">\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n  "], ["\n    ", "\n\n\n    <script ", " ", ">\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n  "])), template.trim().length > 0
             ? "<template>\n      ".concat(template, "\n    </template>")
             : '', options.api === 'composition' ? 'setup' : '', tsLangAttribute, vueImports.length ? "import { ".concat((0, lodash_1.uniq)(vueImports).sort().join(', '), " } from \"vue\"") : '', (0, render_imports_1.renderPreComponent)({
+            explicitImportFileExtension: options.explicitImportFileExtension,
             component: component,
             target: 'vue',
             asyncComponentImports: options.asyncComponentImports,

package/dist/src/helpers/babel-transform.d.ts

@@ -1,7 +1,7 @@
 import * as babel from '@babel/core';
 import type { Visitor } from '@babel/traverse';
 export declare const babelTransformCode: <VisitorContextType = any>(code: string, visitor?: babel.Visitor<VisitorContextType> | undefined, stripTypes?: boolean) => string;
-declare type ExpressionType = 'expression' | 'unknown' | 'block' | 'functionBody';
+type ExpressionType = 'expression' | 'unknown' | 'block' | 'functionBody';
 export declare const babelTransformExpression: <VisitorContextType = any>(code: string, visitor: babel.Visitor<VisitorContextType>, initialType?: ExpressionType, stripTypes?: boolean) => string;
 export declare const convertTypeScriptToJS: (code: string) => string;
 export {};

package/dist/src/helpers/component-file-extensions.d.ts

@@ -12,17 +12,19 @@ export declare const renameComponentFile: ({ path, target, options, }: {
     target: Target;
     options: MitosisConfig;
 }) => string;
-export declare const renameImport: ({ importPath, target }: {
+export declare const renameImport: ({ importPath, target, explicitImportFileExtension, }: {
     importPath: string;
     target: Target;
+    explicitImportFileExtension: boolean;
 }) => string;
-declare type Args = {
+type Args = {
     target: Target;
 } & ({
     /**
      * Whether we are rendering an import statement or a filename.
      */
     type: 'import';
+    explicitImportFileExtension: boolean;
 } | {
     /**
      * Whether we are rendering an import statement or a filename.

package/dist/src/helpers/component-file-extensions.js

@@ -39,10 +39,11 @@ exports.renameComponentFile = renameComponentFile;
  */
 var INPUT_EXTENSION_IMPORT_REGEX = /\.(svelte|(lite(\.tsx|\.jsx)?))(?<quote>['"])/g;
 var renameImport = function (_a) {
-    var importPath = _a.importPath, target = _a.target;
+    var importPath = _a.importPath, target = _a.target, explicitImportFileExtension = _a.explicitImportFileExtension;
     return importPath.replace(INPUT_EXTENSION_IMPORT_REGEX, "".concat((0, exports.getComponentFileExtensionForTarget)({
         type: 'import',
         target: target,
+        explicitImportFileExtension: explicitImportFileExtension,
     }), "$4"));
 };
 exports.renameImport = renameImport;
@@ -87,7 +88,7 @@ var getComponentFileExtensionForTarget = function (args) {
             switch (args.type) {
                 case 'import':
                     // we can't have `.jsx`/`.tsx` extensions in the import paths, so we stick with implicit file extensions.
-                    return '';
+                    return args.explicitImportFileExtension ? '.js' : '';
                 case 'filename':
                     return args.isTypescript ? '.tsx' : '.jsx';
             }

package/dist/src/helpers/create-mitosis-component.d.ts

@@ -1,6 +1,6 @@
 import { MitosisComponent } from '../types/mitosis-component';
 import { Overwrite, Prettify } from './typescript';
-declare type PartialMitosisComponent = Prettify<Overwrite<Partial<MitosisComponent>, {
+type PartialMitosisComponent = Prettify<Overwrite<Partial<MitosisComponent>, {
     hooks: Partial<MitosisComponent['hooks']>;
 }>>;
 export declare const createMitosisComponent: (options?: PartialMitosisComponent) => MitosisComponent;

package/dist/src/helpers/get-state-object-string.d.ts

@@ -1,6 +1,6 @@
 import { MitosisComponent } from '../types/mitosis-component';
 import { MitosisContext } from '../types/mitosis-context';
-declare type ValueMapper = (code: string, type: 'data' | 'function' | 'getter', typeParameter: string | undefined, key: string | undefined) => string;
+type ValueMapper = (code: string, type: 'data' | 'function' | 'getter', typeParameter: string | undefined, key: string | undefined) => string;
 interface GetStateObjectStringOptions {
     data?: boolean;
     functions?: boolean;

package/dist/src/helpers/json.d.ts

@@ -1,3 +1,3 @@
-declare type ParsedJson = any;
+type ParsedJson = any;
 export declare const tryParseJson: (jsonStr: string) => ParsedJson;
 export {};

package/dist/src/helpers/map-refs.d.ts

@@ -1,3 +1,3 @@
 import { MitosisComponent } from '../types/mitosis-component';
-export declare type RefMapper = (refName: string) => string;
+export type RefMapper = (refName: string) => string;
 export declare const mapRefs: (component: MitosisComponent, mapper: RefMapper) => void;

package/dist/src/helpers/nullable.d.ts

@@ -1,2 +1,2 @@
-export declare type Nullable<X> = X | null | undefined;
+export type Nullable<X> = X | null | undefined;
 export declare const checkIsDefined: <T>(value: Nullable<T>) => value is NonNullable<T>;

package/dist/src/helpers/plugins/process-code/index.d.ts

@@ -7,6 +7,6 @@ export declare const createCodeProcessorPlugin: (codeProcessor: CodeProcessor, {
 /**
  * Given a `codeProcessor` function, processes all code expressions within a Mitosis component.
  */
-export declare const CODE_PROCESSOR_PLUGIN: (a_0: (codeType: import("./types").CodeType, json: MitosisComponent, node?: import("../../..").MitosisNode | undefined) => (code: string, hookType: string) => string | (() => void), a_1?: {
+export declare const CODE_PROCESSOR_PLUGIN: (codeProcessor: (codeType: import("./types").CodeType, json: MitosisComponent, node?: import("../../..").MitosisNode | undefined) => (code: string, hookType: string) => string | (() => void), a_1?: {
     processProperties?: boolean | undefined;
 } | undefined) => Plugin;

package/dist/src/helpers/plugins/process-code/types.d.ts

@@ -1,6 +1,6 @@
 import { MitosisComponent } from '../../../types/mitosis-component';
 import { MitosisNode } from '../../../types/mitosis-node';
-export declare type CodeType = 'hooks' | 'hooks-deps' | 'bindings' | 'properties' | 'state' | 'types' | 'context-set' | 'dynamic-jsx-elements';
+export type CodeType = 'hooks' | 'hooks-deps' | 'bindings' | 'properties' | 'state' | 'types' | 'context-set' | 'dynamic-jsx-elements';
 declare function codeProcessor(codeType: CodeType, json: MitosisComponent, node?: MitosisNode): (code: string, hookType: string) => string | (() => void);
-export declare type CodeProcessor = typeof codeProcessor;
+export type CodeProcessor = typeof codeProcessor;
 export {};

package/dist/src/helpers/plugins/process-signals.js

@@ -103,6 +103,8 @@ var getSignalMapperForTarget = function (target) {
             return {
                 getter: function (name) { return core_1.types.identifier('$' + name); },
             };
+        case 'preact':
+        case 'reactNative':
         case 'react':
         case 'solid':
             return {

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

@@ -1,37 +1,36 @@
 import { Target } from '../types/config';
 import { MitosisComponent, MitosisImport } from '../types/mitosis-component';
 export declare const checkIsComponentImport: (theImport: MitosisImport) => boolean;
-export declare const transformImportPath: ({ theImport, target, preserveFileExtensions, }: {
+export declare const transformImportPath: ({ theImport, target, preserveFileExtensions, explicitImportFileExtension, }: {
     theImport: MitosisImport;
     target: Target;
     preserveFileExtensions: boolean;
+    explicitImportFileExtension: boolean;
 }) => string;
-export declare const renderImport: ({ theImport, target, asyncComponentImports, preserveFileExtensions, component, componentsUsed, importMapper, }: {
-    theImport: MitosisImport;
+type ImportArgs = {
     target: Target;
     asyncComponentImports: boolean;
-    preserveFileExtensions?: boolean | undefined;
+    preserveFileExtensions?: boolean;
     component?: MitosisComponent | null | undefined;
-    componentsUsed?: string[] | undefined;
-    importMapper?: Function | null | undefined;
-}) => string;
-export declare const renderImports: ({ imports, target, asyncComponentImports, excludeMitosisComponents, preserveFileExtensions, component, componentsUsed, importMapper, }: {
-    imports: MitosisImport[];
-    target: Target;
-    asyncComponentImports: boolean;
-    excludeMitosisComponents?: boolean | undefined;
-    preserveFileExtensions?: boolean | undefined;
-    component: MitosisComponent;
-    componentsUsed?: string[] | undefined;
+    /**
+     * This is only used by Angular generator, and will be deprecated in the future.
+     */
     importMapper?: Function | null | undefined;
+    /**
+     * This is only used by Angular generator, and will be deprecated in the future.
+     */
+    explicitImportFileExtension?: boolean;
+    /**
+     * This is only used by Angular generator, and will be deprecated in the future.
+     */
+    componentsUsed?: string[];
+};
+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, }: {
+export declare const renderPreComponent: ({ component, target, excludeMitosisComponents, asyncComponentImports, preserveFileExtensions, componentsUsed, importMapper, explicitImportFileExtension, }: Omit<ImportArgs, "asyncComponentImports" | "explicitImportFileExtension"> & Partial<Pick<ImportArgs, "asyncComponentImports" | "explicitImportFileExtension">> & {
     component: MitosisComponent;
     target: Target;
-    asyncComponentImports?: boolean | undefined;
     excludeMitosisComponents?: boolean | undefined;
-    preserveFileExtensions?: boolean | undefined;
-    componentsUsed?: string[] | undefined;
-    importMapper?: Function | null | undefined;
 }) => string;
-export declare const renderExportAndLocal: (component: MitosisComponent) => string;
+export {};