feat: Generators can now emit more than one output file.

packages/cli/src/build/build.ts

@@ -338,7 +338,9 @@ async function buildAndOutputComponentFiles({
     try {
       const component = shouldOutputTypescript ? typescriptMitosisJson : javascriptMitosisJson;
 
-      transpiled = overrideFile ?? generator(options.options[target])({ path, component });
+      // TODO: this fix is only temporary.
+      transpiled =
+        overrideFile ?? generator(options.options[target])({ path, component })[0].content;
       debugTarget(`Success: transpiled ${path}. Output length: ${transpiled.length}`);
     } catch (error) {
       debugTarget(`Failure: transpiled ${path}.`);

packages/cli/src/commands/compile.ts

@@ -12,6 +12,7 @@ import { GluegunCommand } from 'gluegun';
 import { join } from 'path';
 import { UnionToIntersection } from '../types';
 import { getMitosisConfig } from '../helpers/get-mitosis-config';
+import { flow } from 'fp-ts/lib/function';
 
 type GeneratorOpts = GeneratorOptions[Target];
 
@@ -102,8 +103,6 @@ const command: GluegunCommand = {
     }
 
     for await (const { data, path } of readFiles()) {
-      let output: any;
-
       if (outDir) {
         out = join(outDir, path!);
       }
@@ -132,7 +131,28 @@ const command: GluegunCommand = {
         }
 
         // TODO validate generator options
-        output = generator(generatorOpts as any)({ component: json, path });
+        const outputFiles = generator(generatorOpts as any)({ component: json, path });
+
+        const withHeader = (str: string | object) => {
+          return header && !isJSON(str) ? `${header}\n${str}` : str;
+        };
+        const prettyPrint = (str: string | object): string => {
+          return isJSON(str) ? JSON.stringify(str, null, 2) : str;
+        };
+        const formattedOutput = flow(withHeader, prettyPrint);
+
+        outputFiles.map((output) => {
+          if (!out) {
+            console.log(formattedOutput(output.content));
+            return;
+          }
+
+          print.info(out);
+
+          if (!dryRun) {
+            filesystem.write(out, formattedOutput(output.content));
+          }
+        });
       } catch (e) {
         print.divider();
         print.info(`Path: ${path}`);
@@ -141,27 +161,6 @@ const command: GluegunCommand = {
         print.error(e);
         process.exit(1);
       }
-
-      const isJSON = typeof output === 'object';
-
-      if (!isJSON) {
-        output = header ? `${header}\n${output}` : output;
-      }
-
-      if (!out) {
-        if (isJSON) {
-          console.log(JSON.stringify(output, null, 2));
-          return;
-        }
-        console.log(output);
-        return;
-      }
-
-      print.info(out);
-
-      if (!dryRun) {
-        filesystem.write(out, output);
-      }
     }
   },
 };
@@ -183,6 +182,10 @@ function isTarget(term: string): term is Target {
   return typeof targets[term as keyof typeof targets] !== 'undefined';
 }
 
+function isJSON(obj: any): obj is object {
+  return typeof obj === 'object';
+}
+
 async function readStdin() {
   const chunks: Buffer[] = [];
 

packages/core/src/generators/alpine/generate.ts

@@ -243,5 +243,5 @@ export const componentToAlpine: TranspilerGenerator<ToAlpineOptions> =
     if (options.plugins) {
       str = runPostCodePlugins(str, options.plugins);
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };

packages/core/src/generators/angular.ts

@@ -25,7 +25,12 @@ import { getPropFunctions } from '../helpers/get-prop-functions';
 import { isString, kebabCase, uniq } from 'lodash';
 import { stripMetaProperties } from '../helpers/strip-meta-properties';
 import { removeSurroundingBlock } from '../helpers/remove-surrounding-block';
-import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
+import {
+  BaseTranspilerOptions,
+  GeneratorOutput,
+  Transpiler,
+  TranspilerGenerator,
+} from '../types/transpiler';
 import { indent } from '../helpers/indent';
 import { isSlotProperty, stripSlotPrefix } from '../helpers/slots';
 import { getCustomImports } from '../helpers/get-custom-imports';
@@ -580,7 +585,7 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
       str = runPostCodePlugins(str, options.plugins);
     }
 
-    return str;
+    return [{ content: str, type: 'component' }];
   };
 
 const tryFormat = (str: string, parser: string) => {

packages/core/src/generators/html.ts

@@ -863,7 +863,7 @@ export const componentToHtml: TranspilerGenerator<ToHtmlOptions> =
     if (options.plugins) {
       str = runPostCodePlugins(str, options.plugins);
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };
 
 // TODO: props support via custom elements
@@ -1514,5 +1514,5 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
       str = runPostCodePlugins(str, options.plugins);
     }
 
-    return str;
+    return [{ content: str, type: 'component' }];
   };

packages/core/src/generators/liquid.ts

@@ -187,5 +187,5 @@ export const componentToLiquid: TranspilerGenerator<ToLiquidOptions> =
     if (options.plugins) {
       str = runPostCodePlugins(str, options.plugins);
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };

packages/core/src/generators/lit/generate.ts

@@ -296,5 +296,5 @@ export const componentToLit: TranspilerGenerator<ToLitOptions> =
     if (options.plugins) {
       str = runPostCodePlugins(str, options.plugins);
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };

packages/core/src/generators/marko/generate.ts

@@ -296,7 +296,7 @@ ${htmlString}
     if (options.plugins) {
       finalStr = runPostCodePlugins(finalStr, options.plugins);
     }
-    return finalStr;
+    return [{ content: finalStr, type: 'component' }];
   };
 
 /**

packages/core/src/generators/mitosis.ts

@@ -216,5 +216,5 @@ export const componentToMitosis: TranspilerGenerator<Partial<ToMitosisOptions>>
         throw err;
       }
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };

packages/core/src/generators/qwik/component-generator.ts

@@ -48,7 +48,7 @@ type StateValues = Record<
 
 export const componentToQwik: TranspilerGenerator<ToQwikOptions> =
   (userOptions = {}) =>
-  ({ component: _component, path }): string => {
+  ({ component: _component, path }) => {
     // Make a copy we can safely mutate, similar to babel's toolchain
     let component = fastClone(_component);
     if (userOptions.plugins) {
@@ -120,10 +120,10 @@ export const componentToQwik: TranspilerGenerator<ToQwikOptions> =
         sourceFile = runPreCodePlugins(sourceFile, userOptions.plugins);
         sourceFile = runPostCodePlugins(sourceFile, userOptions.plugins);
       }
-      return sourceFile;
+      return [{ content: sourceFile, type: 'component' }];
     } catch (e) {
       console.error(e);
-      return (e as Error).stack || String(e);
+      return [{ content: (e as Error).stack || String(e), type: 'component' }];
     }
   };
 

packages/core/src/generators/react/generator.ts

@@ -468,7 +468,7 @@ export const componentToReact: TranspilerGenerator<ToReactOptions> =
     if (options.plugins) {
       str = runPostCodePlugins(str, options.plugins);
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };
 
 const _componentToReact = (

packages/core/src/generators/solid/index.ts

@@ -417,5 +417,5 @@ export const componentToSolid: TranspilerGenerator<Partial<ToSolidOptions>> =
     if (options.plugins) {
       str = runPostCodePlugins(str, options.plugins);
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };

packages/core/src/generators/stencil/generate.ts

@@ -217,5 +217,6 @@ export const componentToStencil: TranspilerGenerator<ToStencilOptions> =
     if (options.plugins) {
       str = runPostCodePlugins(str, options.plugins);
     }
-    return str;
+
+    return [{ content: str, type: 'component' }];
   };

packages/core/src/generators/svelte/svelte.ts

@@ -357,5 +357,5 @@ export const componentToSvelte: TranspilerGenerator<ToSvelteOptions> =
 
     str = runPostCodePlugins(str, options.plugins);
 
-    return str;
+    return [{ content: str, type: 'component' }];
   };

packages/core/src/generators/swift-ui.ts

@@ -383,5 +383,5 @@ export const componentToSwift: TranspilerGenerator<ToSwiftOptions> =
       str = format(str);
     }
 
-    return str;
+    return [{ content: str, type: 'component' }];
   };

packages/core/src/generators/template.ts

@@ -147,5 +147,5 @@ export const componentToTemplate: TranspilerGenerator<ToTemplateOptions> =
     if (options.plugins) {
       str = runPostCodePlugins(str, options.plugins);
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };

packages/core/src/generators/vue/vue.ts

@@ -269,7 +269,7 @@ const componentToVue: TranspilerGenerator<Partial<ToVueOptions>> =
     }
     str = str.replace(/<script(.*)>\n?<\/script>/g, '').trim();
 
-    return str;
+    return [{ content: str, type: 'component' }];
   };
 
 export const componentToVue2 = (vueOptions?: VueOptsWithoutVersion) =>

packages/core/src/types/transpiler.ts

@@ -6,7 +6,14 @@ export interface TranspilerArgs {
   component: MitosisComponent;
 }
 
-export type Transpiler<R = string> = (args: TranspilerArgs) => R;
+export type GeneratorOutput<R = string> = {
+  // content of output. Currently either a component string or a builder component JSON.
+  content: R;
+  // in the future, we will add more types like 'styles' for CSS Modules, etc.
+  type: 'component';
+};
+
+export type Transpiler<R = string> = (args: TranspilerArgs) => GeneratorOutput<R>[];
 
 /**
  * This type guarantees that all code generators receive the same base options

packages/fiddle/src/components/Fiddle/Fiddle.tsx

@@ -282,7 +282,7 @@ export default function Fiddle() {
       }
       mitosisCore().then((mitosis) => {
         const jsxJson = mitosis.builderContentToMitosisComponent(builderJson);
-        state.code = mitosis.componentToMitosis()({ component: jsxJson });
+        state.code = mitosis.componentToMitosis()({ component: jsxJson })[0].content;
         state.pendingBuilderChange = null;
       });
     },
@@ -343,6 +343,8 @@ export default function Fiddle() {
           })
         )({ component: json, path: '' });
 
+        state.output = output[0].content;
+
         const { componentToBuilder } = await mitosisCore();
         const newBuilderData = await componentToBuilder()({ component: json });
         setBuilderData(newBuilderData);