@builder.io/mitosis 0.0.133 → 0.0.135

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/helpers/on-mount.js

@@ -14,7 +14,7 @@ var stringifySingleScopeOnMount = function (json) {
     return hooks
         .map(function (hook, i) {
         var hookFnName = "onMountHook_".concat(i);
-        return "\n    function ".concat(hookFnName, "() {\n      ").concat(hook.code, "\n    }\n    ").concat(hookFnName, "();");
+        return "\n    const ".concat(hookFnName, " = () => {\n      ").concat(hook.code, "\n    }\n    ").concat(hookFnName, "();");
     })
         .join('');
 };

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/react/generator.js

@@ -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/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/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/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/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/component-file-extensions.d.ts

@@ -12,9 +12,10 @@ 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 = {
     target: Target;
@@ -23,6 +24,7 @@ declare type Args = {
      * 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/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;
+declare 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 {};

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderExportAndLocal = exports.renderPreComponent = exports.renderImports = exports.renderImport = exports.transformImportPath = exports.checkIsComponentImport = void 0;
+exports.renderPreComponent = exports.renderImport = exports.transformImportPath = exports.checkIsComponentImport = void 0;
 var component_file_extensions_1 = require("./component-file-extensions");
 var DEFAULT_IMPORT = 'default';
 var STAR_IMPORT = '*';
@@ -34,7 +34,7 @@ var checkIsComponentImport = function (theImport) {
 };
 exports.checkIsComponentImport = checkIsComponentImport;
 var transformImportPath = function (_a) {
-    var theImport = _a.theImport, target = _a.target, preserveFileExtensions = _a.preserveFileExtensions;
+    var theImport = _a.theImport, target = _a.target, preserveFileExtensions = _a.preserveFileExtensions, explicitImportFileExtension = _a.explicitImportFileExtension;
     // We need to drop the `.lite` from context files, because the context generator does so as well.
     if (checkIsContextImport(theImport)) {
         var path_1 = theImport.path;
@@ -48,7 +48,7 @@ var transformImportPath = function (_a) {
     if (preserveFileExtensions)
         return theImport.path;
     if ((0, exports.checkIsComponentImport)(theImport)) {
-        return theImport.path.replace(component_file_extensions_1.INPUT_EXTENSION_REGEX, (0, component_file_extensions_1.getComponentFileExtensionForTarget)({ target: target, type: 'import' }));
+        return theImport.path.replace(component_file_extensions_1.INPUT_EXTENSION_REGEX, (0, component_file_extensions_1.getComponentFileExtensionForTarget)({ target: target, type: 'import', explicitImportFileExtension: explicitImportFileExtension }));
     }
     return theImport.path;
 };
@@ -88,9 +88,14 @@ var getImportValue = function (_a) {
     }
 };
 var renderImport = function (_a) {
-    var theImport = _a.theImport, target = _a.target, asyncComponentImports = _a.asyncComponentImports, _b = _a.preserveFileExtensions, preserveFileExtensions = _b === void 0 ? false : _b, _c = _a.component, component = _c === void 0 ? undefined : _c, _d = _a.componentsUsed, componentsUsed = _d === void 0 ? [] : _d, importMapper = _a.importMapper;
+    var theImport = _a.theImport, target = _a.target, asyncComponentImports = _a.asyncComponentImports, _b = _a.preserveFileExtensions, preserveFileExtensions = _b === void 0 ? false : _b, _c = _a.component, component = _c === void 0 ? undefined : _c, _d = _a.componentsUsed, componentsUsed = _d === void 0 ? [] : _d, importMapper = _a.importMapper, _e = _a.explicitImportFileExtension, explicitImportFileExtension = _e === void 0 ? false : _e;
     var importedValues = getImportedValues({ theImport: theImport });
-    var path = (0, exports.transformImportPath)({ theImport: theImport, target: target, preserveFileExtensions: preserveFileExtensions });
+    var path = (0, exports.transformImportPath)({
+        theImport: theImport,
+        target: target,
+        preserveFileExtensions: preserveFileExtensions,
+        explicitImportFileExtension: explicitImportFileExtension,
+    });
     var importValue = getImportValue(importedValues);
     var isComponentImport = (0, exports.checkIsComponentImport)(theImport);
     var shouldBeAsyncImport = asyncComponentImports && isComponentImport;
@@ -118,7 +123,7 @@ var renderImport = function (_a) {
 };
 exports.renderImport = renderImport;
 var renderImports = function (_a) {
-    var imports = _a.imports, target = _a.target, asyncComponentImports = _a.asyncComponentImports, excludeMitosisComponents = _a.excludeMitosisComponents, _b = _a.preserveFileExtensions, preserveFileExtensions = _b === void 0 ? false : _b, component = _a.component, componentsUsed = _a.componentsUsed, importMapper = _a.importMapper;
+    var imports = _a.imports, target = _a.target, asyncComponentImports = _a.asyncComponentImports, excludeMitosisComponents = _a.excludeMitosisComponents, _b = _a.preserveFileExtensions, preserveFileExtensions = _b === void 0 ? false : _b, component = _a.component, componentsUsed = _a.componentsUsed, importMapper = _a.importMapper, explicitImportFileExtension = _a.explicitImportFileExtension;
     return imports
         .filter(function (theImport) {
         if (
@@ -144,15 +149,15 @@ var renderImports = function (_a) {
             component: component,
             componentsUsed: componentsUsed,
             importMapper: importMapper,
+            explicitImportFileExtension: explicitImportFileExtension,
         });
     })
         .join('\n');
 };
-exports.renderImports = renderImports;
 var renderPreComponent = function (_a) {
     var _b;
-    var component = _a.component, target = _a.target, excludeMitosisComponents = _a.excludeMitosisComponents, _c = _a.asyncComponentImports, asyncComponentImports = _c === void 0 ? false : _c, _d = _a.preserveFileExtensions, preserveFileExtensions = _d === void 0 ? false : _d, _e = _a.componentsUsed, componentsUsed = _e === void 0 ? [] : _e, importMapper = _a.importMapper;
-    return "\n    ".concat((0, exports.renderImports)({
+    var component = _a.component, target = _a.target, excludeMitosisComponents = _a.excludeMitosisComponents, _c = _a.asyncComponentImports, asyncComponentImports = _c === void 0 ? false : _c, _d = _a.preserveFileExtensions, preserveFileExtensions = _d === void 0 ? false : _d, _e = _a.componentsUsed, componentsUsed = _e === void 0 ? [] : _e, importMapper = _a.importMapper, _f = _a.explicitImportFileExtension, explicitImportFileExtension = _f === void 0 ? false : _f;
+    return "\n    ".concat(renderImports({
         imports: component.imports,
         target: target,
         asyncComponentImports: asyncComponentImports,
@@ -161,7 +166,8 @@ var renderPreComponent = function (_a) {
         component: component,
         componentsUsed: componentsUsed,
         importMapper: importMapper,
-    }), "\n    ").concat((0, exports.renderExportAndLocal)(component), "\n    ").concat(((_b = component.hooks.preComponent) === null || _b === void 0 ? void 0 : _b.code) || '', "\n  ");
+        explicitImportFileExtension: explicitImportFileExtension,
+    }), "\n    ").concat(renderExportAndLocal(component), "\n    ").concat(((_b = component.hooks.preComponent) === null || _b === void 0 ? void 0 : _b.code) || '', "\n  ");
 };
 exports.renderPreComponent = renderPreComponent;
 var renderExportAndLocal = function (component) {
@@ -169,4 +175,3 @@ var renderExportAndLocal = function (component) {
         .map(function (key) { return component.exports[key].code; })
         .join('\n');
 };
-exports.renderExportAndLocal = renderExportAndLocal;

package/dist/src/helpers/styles/helpers.js

@@ -9,6 +9,7 @@ var lodash_1 = require("lodash");
 var traverse_1 = __importDefault(require("traverse"));
 var dash_case_1 = require("../dash-case");
 var is_mitosis_node_1 = require("../is-mitosis-node");
+var is_upper_case_1 = require("../is-upper-case");
 var nodeHasCss = function (node) {
     var _a;
     return Boolean(typeof ((_a = node.bindings.css) === null || _a === void 0 ? void 0 : _a.code) === 'string' && node.bindings.css.code.trim().length > 6);
@@ -68,12 +69,17 @@ var parseCssObject = function (css) {
     }
 };
 exports.parseCssObject = parseCssObject;
-var parseCSSKey = function (key) {
+var getCssPropertyName = function (cssObjectKey) {
     // Allow custom CSS properties
-    if (key.startsWith('--')) {
-        return key;
+    if (cssObjectKey.startsWith('--')) {
+        return cssObjectKey;
     }
-    return (0, dash_case_1.dashCase)(key);
+    var str = (0, dash_case_1.dashCase)(cssObjectKey);
+    // Convert vendor prefixes like 'WebkitFoo' to '-webkit-foo'
+    if ((0, is_upper_case_1.isUpperCase)(cssObjectKey[0])) {
+        str = "-".concat(str);
+    }
+    return str;
 };
 var styleMapToCss = function (map) {
     return Object.entries(map)
@@ -83,7 +89,7 @@ var styleMapToCss = function (map) {
     })
         .map(function (_a) {
         var key = _a[0], value = _a[1];
-        return "  ".concat(parseCSSKey(key), ": ").concat(value, ";");
+        return "  ".concat(getCssPropertyName(key), ": ").concat(value, ";");
     })
         .join('\n');
 };

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

@@ -1,5 +1,6 @@
 import type { ParseMitosisOptions } from '../parsers/jsx/types';
 import type { MitosisComponent } from './mitosis-component';
+import { BaseTranspilerOptions } from './transpiler';
 export declare type Format = 'esm' | 'cjs';
 export declare type Language = 'js' | 'ts';
 interface TranspilerOptions {
@@ -13,9 +14,7 @@ export declare type GeneratorOptions = {
     };
 };
 export declare type MitosisConfig = {
-    commonOptions?: {
-        typescript?: boolean;
-    };
+    commonOptions?: Omit<BaseTranspilerOptions, 'experimental'>;
     /**
      * List of targets to compile to.
      */

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

@@ -13,7 +13,20 @@ export interface BaseTranspilerOptions {
     experimental?: {
         [key: string]: any;
     };
+    /**
+     * Runs `prettier` on generated components
+     */
     prettier?: boolean;
+    /**
+     * Mitosis Plugins to run during codegen.
+     */
     plugins?: Plugin[];
+    /**
+     * Enable `typescript` output
+     */
     typescript?: boolean;
+    /**
+     * Preserves explicit filename extensions in import statements.
+     */
+    explicitImportFileExtension?: boolean;
 }