@builder.io/mitosis 0.5.22 → 0.5.24

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

@@ -1,4 +1,5 @@
 import { type MitosisComponent } from '../../types/mitosis-component';
+import { MitosisNode } from '../../types/mitosis-node';
 export declare const HELPER_FUNCTIONS: (isTs?: boolean) => {
     [key: string]: string;
 };
@@ -33,3 +34,8 @@ export declare const getDefaultProps: ({ defaultProps }: MitosisComponent) => st
  * @param json The MitosisComponent.
  */
 export declare const transformState: (json: MitosisComponent) => void;
+/**
+ * Checks if the first child has a "key" attribute - used for "For" elements
+ * @param node The node which should be "For"
+ */
+export declare const hasFirstChildKeyAttribute: (node: MitosisNode) => boolean;

package/dist/src/generators/angular/helpers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transformState = exports.getDefaultProps = exports.makeReactiveState = exports.addCodeToOnInit = exports.addCodeToOnUpdate = exports.getAppropriateTemplateFunctionKeys = exports.HELPER_FUNCTIONS = void 0;
+exports.hasFirstChildKeyAttribute = exports.transformState = exports.getDefaultProps = exports.makeReactiveState = exports.addCodeToOnInit = exports.addCodeToOnUpdate = exports.getAppropriateTemplateFunctionKeys = exports.HELPER_FUNCTIONS = void 0;
 const strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 const HELPER_FUNCTIONS = (isTs) => ({
     useObjectWrapper: `useObjectWrapper(...args${isTs ? ': any[]' : ''}) {
@@ -120,3 +120,16 @@ const transformState = (json) => {
     });
 };
 exports.transformState = transformState;
+/**
+ * Checks if the first child has a "key" attribute - used for "For" elements
+ * @param node The node which should be "For"
+ */
+const hasFirstChildKeyAttribute = (node) => {
+    var _a;
+    if (!node.children || node.children.length === 0) {
+        return false;
+    }
+    const firstChildBinding = node.children[0].bindings;
+    return Boolean(firstChildBinding && ((_a = firstChildBinding.key) === null || _a === void 0 ? void 0 : _a.code));
+};
+exports.hasFirstChildKeyAttribute = hasFirstChildKeyAttribute;

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

@@ -67,6 +67,7 @@ const is_children_1 = __importDefault(require("../../helpers/is-children"));
 const on_mount_1 = require("../helpers/on-mount");
 const helpers_2 = require("./helpers");
 const types_1 = require("./types");
+const parse_selector_1 = require("./parse-selector");
 const { types } = babel;
 const mappers = {
     Fragment: (root, json, options, blockOptions) => {
@@ -268,7 +269,7 @@ const handleNgOutletBindings = (node, options) => {
 const blockToAngular = ({ root, json, options = {}, blockOptions = {
     nativeAttributes: [],
 }, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const childComponents = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.childComponents) || [];
     if (mappers[json.name]) {
         return mappers[json.name](root, json, options, blockOptions);
@@ -295,19 +296,19 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
         const indexName = json.scope.indexName;
         const forName = json.scope.forName;
         // Check if "key" is present for the first child of the for loop
-        if (json.children[0].bindings && ((_b = json.children[0].bindings.key) === null || _b === void 0 ? void 0 : _b.code)) {
-            const fnIndex = ((_c = root.meta) === null || _c === void 0 ? void 0 : _c._trackByForIndex) || 0;
+        if ((0, helpers_2.hasFirstChildKeyAttribute)(json)) {
+            const fnIndex = ((_b = root.meta) === null || _b === void 0 ? void 0 : _b._trackByForIndex) || 0;
             const trackByFnName = `trackBy${forName ? forName.charAt(0).toUpperCase() + forName.slice(1) : ''}${fnIndex}`;
             root.meta._trackByForIndex = fnIndex + 1;
-            let code = (_d = json.children[0].bindings.key) === null || _d === void 0 ? void 0 : _d.code;
+            let code = (_c = json.children[0].bindings.key) === null || _c === void 0 ? void 0 : _c.code;
             root.state[trackByFnName] = {
                 code: `${trackByFnName}(${indexName !== null && indexName !== void 0 ? indexName : '_'}, ${forName}) { return ${code}; }`,
                 type: 'method',
             };
-            str += `<ng-container *ngFor="let ${forName !== null && forName !== void 0 ? forName : '_'} of ${(_e = json.bindings.each) === null || _e === void 0 ? void 0 : _e.code}${indexName ? `; index as ${indexName}` : ''}; trackBy: ${trackByFnName}">`;
+            str += `<ng-container *ngFor="let ${forName !== null && forName !== void 0 ? forName : '_'} of ${(_d = json.bindings.each) === null || _d === void 0 ? void 0 : _d.code}${indexName ? `; index as ${indexName}` : ''}; trackBy: ${trackByFnName}">`;
         }
         else {
-            str += `<ng-container *ngFor="let ${forName !== null && forName !== void 0 ? forName : '_'} of ${(_f = json.bindings.each) === null || _f === void 0 ? void 0 : _f.code}${indexName ? `; index as ${indexName}` : ''}">`;
+            str += `<ng-container *ngFor="let ${forName !== null && forName !== void 0 ? forName : '_'} of ${(_e = json.bindings.each) === null || _e === void 0 ? void 0 : _e.code}${indexName ? `; index as ${indexName}` : ''}">`;
         }
         str += json.children
             .map((item) => (0, exports.blockToAngular)({ root, json: item, options, blockOptions }))
@@ -315,7 +316,7 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
         str += `</ng-container>`;
     }
     else if (json.name === 'Show') {
-        let condition = (_g = json.bindings.when) === null || _g === void 0 ? void 0 : _g.code;
+        let condition = (_f = json.bindings.when) === null || _f === void 0 ? void 0 : _f.code;
         if (options.state === 'inline-with-wrappers' && (condition === null || condition === void 0 ? void 0 : condition.includes('typeof'))) {
             let wordAfterTypeof = condition.split('typeof')[1].trim().split(' ')[0];
             condition = condition.replace(`typeof ${wordAfterTypeof}`, `useTypeOf(${wordAfterTypeof})`);
@@ -326,7 +327,7 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
             .join('\n');
         str += `</ng-container>`;
         // else condition
-        if ((0, is_mitosis_node_1.isMitosisNode)((_h = json.meta) === null || _h === void 0 ? void 0 : _h.else)) {
+        if ((0, is_mitosis_node_1.isMitosisNode)((_g = json.meta) === null || _g === void 0 ? void 0 : _g.else)) {
             str += `<ng-container *ngIf="!(${condition})">`;
             str += (0, exports.blockToAngular)({ root, json: json.meta.else, options, blockOptions });
             str += `</ng-container>`;
@@ -343,10 +344,10 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
                 code: '{}' + (options.typescript ? ' as any' : ''),
                 type: 'property',
             };
-            if (!((_j = root.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code.includes(inputsPropsStateName))) {
+            if (!((_h = root.hooks.onInit) === null || _h === void 0 ? void 0 : _h.code.includes(inputsPropsStateName))) {
                 (0, helpers_2.addCodeToOnInit)(root, `this.${inputsPropsStateName} = {${allProps}};`);
             }
-            if (!((_k = root.hooks.onUpdate) === null || _k === void 0 ? void 0 : _k.map((hook) => hook.code).join('').includes(inputsPropsStateName))) {
+            if (!((_j = root.hooks.onUpdate) === null || _j === void 0 ? void 0 : _j.map((hook) => hook.code).join('').includes(inputsPropsStateName))) {
                 (0, helpers_2.addCodeToOnUpdate)(root, `this.${inputsPropsStateName} = {${allProps}};`);
             }
             allProps = `${inputsPropsStateName}`;
@@ -362,10 +363,41 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
         str += `</ng-container>`;
     }
     else {
-        const elSelector = childComponents.find((impName) => impName === json.name)
-            ? (0, lodash_1.kebabCase)(json.name)
-            : json.name;
-        str += `<${elSelector} `;
+        let element, classNames = [], attributes;
+        const isComponent = childComponents.find((impName) => impName === json.name);
+        if (isComponent) {
+            const selector = json.meta.selector || (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.selector);
+            if (selector) {
+                try {
+                    ({ element, classNames, attributes } = (0, parse_selector_1.parse)(`${selector}`));
+                }
+                catch (_r) {
+                    element = (0, lodash_1.kebabCase)(json.name);
+                }
+            }
+            else {
+                element = (0, lodash_1.kebabCase)(json.name);
+            }
+        }
+        else {
+            element = json.name;
+        }
+        str += `<${element} `;
+        // TODO: merge with existing classes/bindings
+        if (classNames.length) {
+            str += `class="${classNames.join(' ')}" `;
+        }
+        // TODO: Merge with existing properties
+        if (attributes) {
+            Object.entries(attributes).forEach(([key, value]) => {
+                if (value) {
+                    str += `${key}=${JSON.stringify(value)} `;
+                }
+                else {
+                    str += `${key} `;
+                }
+            });
+        }
         for (const key in json.properties) {
             if (key.startsWith('$')) {
                 continue;
@@ -374,13 +406,13 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
             str += ` ${key}="${value}" `;
         }
         for (const key in json.bindings) {
-            if (((_l = json.bindings[key]) === null || _l === void 0 ? void 0 : _l.type) === 'spread' && html_tags_1.VALID_HTML_TAGS.includes(json.name.trim())) {
-                if (((_m = json.bindings[key]) === null || _m === void 0 ? void 0 : _m.code) === 'this') {
+            if (((_k = json.bindings[key]) === null || _k === void 0 ? void 0 : _k.type) === 'spread' && html_tags_1.VALID_HTML_TAGS.includes(json.name.trim())) {
+                if (((_l = json.bindings[key]) === null || _l === void 0 ? void 0 : _l.code) === 'this') {
                     // if its an arbitrary { ...props } spread then we skip because Angular needs a named prop to be defined
                     continue;
                 }
                 let refName = '';
-                if ((_o = json.bindings['spreadRef']) === null || _o === void 0 ? void 0 : _o.code) {
+                if ((_m = json.bindings['spreadRef']) === null || _m === void 0 ? void 0 : _m.code) {
                     refName = json.bindings['spreadRef'].code;
                 }
                 else {
@@ -395,16 +427,16 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
                 root.meta.onViewInit = (root.meta.onViewInit || { code: '' });
                 let spreadCode = '';
                 let changesCode = '';
-                if ((_p = json.bindings[key]) === null || _p === void 0 ? void 0 : _p.code.startsWith('{')) {
+                if ((_o = json.bindings[key]) === null || _o === void 0 ? void 0 : _o.code.startsWith('{')) {
                     json.meta._spreadStateRef = json.meta._spreadStateRef || 0;
                     const name = `${refName}_state_${json.meta._spreadStateRef}`;
                     json.meta._spreadStateRef = json.meta._spreadStateRef + 1;
-                    (0, helpers_2.makeReactiveState)(root, name, `this.${name} = ${(_q = json.bindings[key]) === null || _q === void 0 ? void 0 : _q.code};`);
+                    (0, helpers_2.makeReactiveState)(root, name, `this.${name} = ${(_p = json.bindings[key]) === null || _p === void 0 ? void 0 : _p.code};`);
                     spreadCode = `this.${name}`;
                     changesCode = `changes['${spreadCode.replace('this.', '')}']?.currentValue`;
                 }
                 else {
-                    spreadCode = `${(_r = json.bindings[key]) === null || _r === void 0 ? void 0 : _r.code}`;
+                    spreadCode = `${(_q = json.bindings[key]) === null || _q === void 0 ? void 0 : _q.code}`;
                     changesCode = `changes['${spreadCode.replace('this.', '')}']?.currentValue`;
                 }
                 if (!root.compileContext) {
@@ -441,7 +473,7 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
                 .map((item) => (0, exports.blockToAngular)({ root, json: item, options, blockOptions }))
                 .join('\n');
         }
-        str += `</${elSelector}>`;
+        str += `</${element}>`;
     }
     return str;
 };
@@ -655,11 +687,14 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
                         // so we need to use `this.` inside the class to access state and props
                         const isSpreadAttributeBinding = ((_a = node === null || node === void 0 ? void 0 : node.bindings[key]) === null || _a === void 0 ? void 0 : _a.type) === 'spread' &&
                             html_tags_1.VALID_HTML_TAGS.includes(node.name.trim());
+                        // If we have a For loop with "key" it will be transformed to
+                        // trackOfXXX, we need to use "this" for state properties
+                        const isKey = key === 'key';
                         const newLocal = processAngularCode({
                             contextVars: [],
                             outputVars,
                             domRefs: [], // the template doesn't need the this keyword.
-                            replaceWith: isSpreadAttributeBinding ? 'this' : undefined,
+                            replaceWith: isKey || isSpreadAttributeBinding ? 'this' : undefined,
                         })(code);
                         return newLocal.replace(/"/g, '&quot;');
                     };

package/dist/src/generators/angular/parse-selector.d.ts

@@ -0,0 +1,5 @@
+export declare function parse(selector: string): {
+    element: string | null;
+    classNames: string[];
+    attributes: Record<string, string>;
+};

package/dist/src/generators/angular/parse-selector.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parse = void 0;
+const compiler_1 = require("@angular/compiler");
+function parse(selector) {
+    const { element, classNames, attrs } = compiler_1.CssSelector.parse(selector)[0];
+    const attributes = attrs.reduce((acc, attr, i) => {
+        if (i % 2 === 0) {
+            acc[attr] = attrs[i + 1];
+        }
+        return acc;
+    }, {});
+    return {
+        element,
+        classNames,
+        attributes,
+    };
+}
+exports.parse = parse;

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

@@ -1,2 +1,2 @@
-import { Plugin } from '../../modules/plugins';
-export declare const FUNCTION_HACK_PLUGIN: Plugin;
+import { MitosisPlugin } from '../../modules/plugins';
+export declare const FUNCTION_HACK_PLUGIN: MitosisPlugin;

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

@@ -30,8 +30,9 @@ function getFragment(type, options, node) {
     let tag = '';
     if (node && node.bindings && (0, exports.isFragmentWithKey)(node)) {
         tag = options.preact ? 'Fragment' : 'React.Fragment';
-        if (type === 'open') {
-            tag += ` key={${(_a = node.bindings['key']) === null || _a === void 0 ? void 0 : _a.code}}`;
+        const keyCode = (_a = node.bindings['key']) === null || _a === void 0 ? void 0 : _a.code;
+        if (type === 'open' && keyCode) {
+            tag += ` key={${(0, exports.processBinding)(keyCode, options)}}`;
         }
     }
     else if (options.preact) {

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

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

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

@@ -19,11 +19,27 @@ exports.checkIsMitosisComponentFilePath = checkIsMitosisComponentFilePath;
  * Matches `.svelte`, `.lite.tsx`, `.lite.jsx` files (with optional `.jsx`/`.tsx` extension)
  */
 exports.INPUT_EXTENSION_REGEX = /\.(svelte|(lite(\.tsx|\.jsx)?))/g;
-const renameComponentFile = ({ path, target, options, }) => path.replace(exports.INPUT_EXTENSION_REGEX, (0, exports.getComponentFileExtensionForTarget)({
-    type: 'filename',
-    target,
-    isTypescript: (0, output_1.checkShouldOutputTypeScript)({ options, target }),
-}));
+const getExplicitFileExtension = (path, explicitBuildFileExtensions) => {
+    if (explicitBuildFileExtensions) {
+        for (const [extension, regex] of Object.entries(explicitBuildFileExtensions)) {
+            const match = path.match(regex);
+            if (match) {
+                return extension;
+            }
+        }
+    }
+    return undefined;
+};
+const renameComponentFile = ({ path, target, options, }) => {
+    var _a;
+    const explicitExtension = getExplicitFileExtension(path, (_a = options.options[target]) === null || _a === void 0 ? void 0 : _a.explicitBuildFileExtensions);
+    const extension = explicitExtension !== null && explicitExtension !== void 0 ? explicitExtension : (0, exports.getComponentFileExtensionForTarget)({
+        type: 'filename',
+        target,
+        isTypescript: (0, output_1.checkShouldOutputTypeScript)({ options, target }),
+    });
+    return path.replace(exports.INPUT_EXTENSION_REGEX, extension);
+};
 exports.renameComponentFile = renameComponentFile;
 /**
  * just like `INPUT_EXTENSION_REGEX`, but adds trailing quotes to the end of import paths.

package/dist/src/helpers/on-event.d.ts

@@ -1,4 +1,4 @@
-import { MitosisComponent, MitosisNode, OnEventHook, Plugin } from '..';
+import { MitosisComponent, MitosisNode, MitosisPlugin, OnEventHook } from '..';
 export declare const getOnEventHandlerName: (hook: OnEventHook) => string;
 export declare const getOnEventHooksForNode: ({ node, component, }: {
     node: MitosisNode;
@@ -11,4 +11,4 @@ export declare const getOnEventHooksForNode: ({ node, component, }: {
 export declare const processOnEventHooksPlugin: (args?: {
     setBindings?: boolean;
     includeRootEvents?: boolean;
-}) => Plugin;
+}) => MitosisPlugin;

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

@@ -1,5 +1,5 @@
 import { MitosisComponent } from '../../../types/mitosis-component';
-import { Plugin } from '../../../types/plugins';
+import { MitosisPlugin } from '../../../types/plugins';
 import { CodeProcessor } from './types';
 export declare const createCodeProcessorPlugin: (codeProcessor: CodeProcessor, { processProperties }?: {
     processProperties?: boolean | undefined;
@@ -9,4 +9,4 @@ export declare const createCodeProcessorPlugin: (codeProcessor: CodeProcessor, {
  */
 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;
+} | undefined) => MitosisPlugin;

package/dist/src/helpers/plugins/process-signals.d.ts

@@ -1,6 +1,6 @@
 import { Node, types } from '@babel/core';
 import { Target } from '../../types/config';
-import { Plugin } from '../../types/plugins';
+import { MitosisPlugin } from '../../types/plugins';
 export declare const replaceSignalSetters: ({ code, nodeMaps, }: {
     code: string;
     nodeMaps: {
@@ -13,10 +13,10 @@ export declare const replaceSignalSetters: ({ code, nodeMaps, }: {
  */
 export declare const getSignalTypePlugin: ({ target }: {
     target: Target;
-}) => Plugin;
+}) => MitosisPlugin;
 /**
  * Processes `mySignal.value` accessors for props, context, and state.
  */
 export declare const getSignalAccessPlugin: ({ target }: {
     target: Target;
-}) => Plugin;
+}) => MitosisPlugin;

package/dist/src/helpers/plugins/process-target-blocks.d.ts

@@ -1,6 +1,6 @@
 import { Targets } from '../../targets';
-import { Plugin } from '../../types/plugins';
+import { MitosisPlugin } from '../../types/plugins';
 /**
  * Processes `useTarget()` blocks for a given target.
  */
-export declare const processTargetBlocks: (target: Targets) => Plugin;
+export declare const processTargetBlocks: (target: Targets) => MitosisPlugin;

package/dist/src/modules/plugins.d.ts

@@ -1,25 +1,25 @@
 import { MitosisComponent } from '../types/mitosis-component';
-import { Plugin } from '../types/plugins';
-export type { Plugin };
+import { MitosisPlugin } from '../types/plugins';
+export type { MitosisPlugin };
 export declare const runPreJsonPlugins: ({ json, plugins, options, }: {
     json: MitosisComponent;
-    plugins: Plugin[];
+    plugins: MitosisPlugin[];
     options?: any;
 }) => MitosisComponent;
 export declare const runPostJsonPlugins: ({ json, plugins, options, }: {
     json: MitosisComponent;
-    plugins: Plugin[];
+    plugins: MitosisPlugin[];
     options?: any;
 }) => MitosisComponent;
 export declare const runPreCodePlugins: ({ code, plugins, options, json, }: {
     json: MitosisComponent;
     code: string;
-    plugins: Plugin[];
+    plugins: MitosisPlugin[];
     options?: any;
 }) => string;
 export declare const runPostCodePlugins: ({ code, plugins, options, json, }: {
     json: MitosisComponent;
     code: string;
-    plugins: Plugin[];
+    plugins: MitosisPlugin[];
     options?: any;
 }) => string;

package/dist/src/parsers/svelte/helpers/post-process.d.ts

@@ -7,7 +7,7 @@ type SveltosisStateValue = StateValue & {
 export declare function preventNameCollissions(json: SveltosisComponent, item: SveltosisStateValue): {
     code: string;
     typeParameter?: string | undefined;
-    type: "function" | "getter" | "method" | "property";
+    type: "function" | "method" | "property" | "getter";
     propertyType?: import("../../../types/mitosis-component").ReactivityType | undefined;
     arguments?: string[] | undefined;
 };

package/dist/src/plugins/compile-away-builder-components.d.ts

@@ -1,4 +1,4 @@
-import { type Plugin } from '..';
+import { type MitosisPlugin } from '..';
 import { TraverseContext } from 'neotraverse/legacy';
 import { MitosisComponent } from '../types/mitosis-component';
 import { MitosisNode } from '../types/mitosis-node';
@@ -11,5 +11,5 @@ type CompileAwayBuilderComponentsOptions = {
     omit?: string[];
 };
 export declare const compileAwayBuilderComponentsFromTree: (tree: MitosisNode | MitosisComponent, components: CompileAwayComponentsMap) => void;
-export declare const compileAwayBuilderComponents: (pluginOptions?: CompileAwayBuilderComponentsOptions) => Plugin;
+export declare const compileAwayBuilderComponents: (pluginOptions?: CompileAwayBuilderComponentsOptions) => MitosisPlugin;
 export {};

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

@@ -1,7 +1,7 @@
-import type { ParseMitosisOptions } from '../parsers/jsx/types';
+import type { ParseMitosisOptions } from '../parsers/jsx';
 import { targets } from '../targets';
 import type { MitosisComponent } from './mitosis-component';
-import { BaseTranspilerOptions } from './transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from './transpiler';
 export type Format = 'esm' | 'cjs';
 export type Language = 'js' | 'ts';
 interface TranspilerOptions {
@@ -17,6 +17,15 @@ export type GeneratorOptions = {
 export type generatorsOption = {
     [K in Target]: NonNullable<Targets[K]>;
 };
+export interface TargetContext {
+    target: Target;
+    generator: TranspilerGenerator<NonNullable<MitosisConfig['options'][Target]>>;
+    outputPath: string;
+}
+export interface OutputFiles {
+    outputDir: string;
+    outputFilePath: string;
+}
 export type MitosisConfig = {
     generators?: generatorsOption;
     /**

package/dist/src/types/mitosis-component.d.ts

@@ -136,6 +136,15 @@ export type MitosisComponent = {
     propsTypeRef?: string;
     defaultProps?: MitosisState;
     style?: string;
+    /**
+     * This data is filled inside cli to provide more data for plugins
+     */
+    pluginData?: {
+        target?: Target;
+        path?: string;
+        outputDir?: string;
+        outputFilePath?: string;
+    };
     /**
      * Used to store context of a component for a specific framework
      * that we need access only during compilation (for internal use only) and gets removed after compilation.

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

@@ -1,11 +1,19 @@
+import { OutputFiles, TargetContext } from '../types/config';
 import { MitosisComponent } from './mitosis-component';
-export type Plugin = (options?: any) => {
-    json?: {
-        pre?: (json: MitosisComponent) => MitosisComponent | void;
-        post?: (json: MitosisComponent) => MitosisComponent | void;
-    };
-    code?: {
-        pre?: (code: string, json: MitosisComponent) => string;
-        post?: (code: string, json: MitosisComponent) => string;
-    };
+export type MitosisBuildPlugin = (targetContext: TargetContext, files?: {
+    componentFiles: OutputFiles[];
+    nonComponentFiles: OutputFiles[];
+}) => void | Promise<void>;
+export type MitosisJsonPlugin = (json: MitosisComponent) => MitosisComponent | void;
+export type MitosisCodePlugin = (code: string, json: MitosisComponent) => string;
+export type MitosisHook<T> = {
+    pre?: T;
+    post?: T;
+};
+export type MitosisPlugin = (options?: any) => {
+    name?: string;
+    order?: number;
+    build?: MitosisHook<MitosisBuildPlugin>;
+    json?: MitosisHook<MitosisJsonPlugin>;
+    code?: MitosisHook<MitosisCodePlugin>;
 };

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

@@ -1,5 +1,5 @@
 import { MitosisComponent } from './mitosis-component';
-import { Plugin } from './plugins';
+import { MitosisPlugin } from './plugins';
 export interface TranspilerArgs {
     path?: string;
     component: MitosisComponent;
@@ -20,7 +20,7 @@ export interface BaseTranspilerOptions {
     /**
      * Mitosis Plugins to run during codegen.
      */
-    plugins?: Plugin[];
+    plugins?: MitosisPlugin[];
     /**
      * Enable `typescript` output
      */
@@ -29,4 +29,14 @@ export interface BaseTranspilerOptions {
      * Preserves explicit filename extensions in import statements.
      */
     explicitImportFileExtension?: boolean;
+    /**
+     * Can be used for cli builds. Preserves explicit filename extensions when regex matches, e.g.:
+     * {
+     *   explicitBuildFileExtension: {
+     *     ".ts":/*.figma.lite.tsx/g,
+     *     ".md":/*.docs.lite.tsx/g
+     *   }
+     * }
+     */
+    explicitBuildFileExtensions?: Record<string, RegExp>;
 }

package/package.json

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