From 1001d5662a2aa3e35154e503246fc8cb5a5af477 Mon Sep 17 00:00:00 2001
From: Spencer Brower <brower.spencer@gmail.com>
Date: Wed, 2 Nov 2022 13:04:30 -0400
Subject: [PATCH 1/4] refactor: Generators can now export more than one output
 file.

BREAKING CHANGE: Generators no longer return a string.
---
 packages/cli/src/build/build.ts                          | 4 +++-
 packages/core/src/generators/angular.ts                  | 9 +++++++--
 packages/core/src/generators/html.ts                     | 4 ++--
 packages/core/src/generators/liquid.ts                   | 2 +-
 packages/core/src/generators/lit/generate.ts             | 2 +-
 packages/core/src/generators/marko/generate.ts           | 2 +-
 packages/core/src/generators/mitosis.ts                  | 2 +-
 packages/core/src/generators/qwik/component-generator.ts | 6 +++---
 packages/core/src/generators/react/generator.ts          | 2 +-
 packages/core/src/generators/solid/index.ts              | 2 +-
 packages/core/src/generators/stencil/generate.ts         | 3 ++-
 packages/core/src/generators/svelte/svelte.ts            | 2 +-
 packages/core/src/generators/swift-ui.ts                 | 2 +-
 packages/core/src/generators/template.ts                 | 2 +-
 packages/core/src/generators/vue/vue.ts                  | 2 +-
 packages/core/src/types/transpiler.ts                    | 9 ++++++++-
 packages/fiddle/src/components/Fiddle.tsx                | 6 ++++--
 17 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/packages/cli/src/build/build.ts b/packages/cli/src/build/build.ts
index a10397e28e..11226178a1 100644
--- a/packages/cli/src/build/build.ts
+++ b/packages/cli/src/build/build.ts
@@ -307,7 +307,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}.`);
diff --git a/packages/core/src/generators/angular.ts b/packages/core/src/generators/angular.ts
index 80e122aa27..dc5727cc1b 100644
--- a/packages/core/src/generators/angular.ts
+++ b/packages/core/src/generators/angular.ts
@@ -23,7 +23,12 @@ import { getPropFunctions } from '../helpers/get-prop-functions';
 import { 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 } from '../helpers/slots';
 import { getCustomImports } from '../helpers/get-custom-imports';
@@ -548,7 +553,7 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
       str = runPostCodePlugins(str, options.plugins);
     }
 
-    return str;
+    return [{ content: str, type: 'component' }];
   };
 
 const tryFormat = (str: string, parser: string) => {
diff --git a/packages/core/src/generators/html.ts b/packages/core/src/generators/html.ts
index 5a75bfe5d3..4d84a3d5ba 100644
--- a/packages/core/src/generators/html.ts
+++ b/packages/core/src/generators/html.ts
@@ -825,7 +825,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
@@ -1472,5 +1472,5 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
       str = runPostCodePlugins(str, options.plugins);
     }
 
-    return str;
+    return [{ content: str, type: 'component' }];
   };
diff --git a/packages/core/src/generators/liquid.ts b/packages/core/src/generators/liquid.ts
index b6e2e8b733..8136eec151 100644
--- a/packages/core/src/generators/liquid.ts
+++ b/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' }];
   };
diff --git a/packages/core/src/generators/lit/generate.ts b/packages/core/src/generators/lit/generate.ts
index 1ce9a06a63..08a676b9cd 100644
--- a/packages/core/src/generators/lit/generate.ts
+++ b/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' }];
   };
diff --git a/packages/core/src/generators/marko/generate.ts b/packages/core/src/generators/marko/generate.ts
index 46c15624e8..62175343a7 100644
--- a/packages/core/src/generators/marko/generate.ts
+++ b/packages/core/src/generators/marko/generate.ts
@@ -291,7 +291,7 @@ ${htmlString}
     if (options.plugins) {
       finalStr = runPostCodePlugins(finalStr, options.plugins);
     }
-    return finalStr;
+    return [{ content: finalStr, type: 'component' }];
   };
 
 /**
diff --git a/packages/core/src/generators/mitosis.ts b/packages/core/src/generators/mitosis.ts
index 22721fde0a..be5ade13f0 100644
--- a/packages/core/src/generators/mitosis.ts
+++ b/packages/core/src/generators/mitosis.ts
@@ -211,5 +211,5 @@ export const componentToMitosis: TranspilerGenerator<Partial<ToMitosisOptions>>
         throw err;
       }
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };
diff --git a/packages/core/src/generators/qwik/component-generator.ts b/packages/core/src/generators/qwik/component-generator.ts
index bc1ba25bd7..2950198ae7 100644
--- a/packages/core/src/generators/qwik/component-generator.ts
+++ b/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) {
@@ -119,10 +119,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: 'error' }];
     }
   };
 
diff --git a/packages/core/src/generators/react/generator.ts b/packages/core/src/generators/react/generator.ts
index f47330ff2d..3d9bf7aa29 100644
--- a/packages/core/src/generators/react/generator.ts
+++ b/packages/core/src/generators/react/generator.ts
@@ -407,7 +407,7 @@ export const componentToReact: TranspilerGenerator<ToReactOptions> =
     if (options.plugins) {
       str = runPostCodePlugins(str, options.plugins);
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };
 
 const _componentToReact = (
diff --git a/packages/core/src/generators/solid/index.ts b/packages/core/src/generators/solid/index.ts
index b4a8469abd..2da7f457c4 100644
--- a/packages/core/src/generators/solid/index.ts
+++ b/packages/core/src/generators/solid/index.ts
@@ -406,5 +406,5 @@ export const componentToSolid: TranspilerGenerator<Partial<ToSolidOptions>> =
     if (options.plugins) {
       str = runPostCodePlugins(str, options.plugins);
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };
diff --git a/packages/core/src/generators/stencil/generate.ts b/packages/core/src/generators/stencil/generate.ts
index 0f3f53d885..27696e55cb 100644
--- a/packages/core/src/generators/stencil/generate.ts
+++ b/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' }];
   };
diff --git a/packages/core/src/generators/svelte/svelte.ts b/packages/core/src/generators/svelte/svelte.ts
index f6c1550f6d..b7f645431b 100644
--- a/packages/core/src/generators/svelte/svelte.ts
+++ b/packages/core/src/generators/svelte/svelte.ts
@@ -340,5 +340,5 @@ export const componentToSvelte: TranspilerGenerator<ToSvelteOptions> =
     }
     str = runPostCodePlugins(str, options.plugins);
 
-    return str;
+    return [{ content: str, type: 'component' }];
   };
diff --git a/packages/core/src/generators/swift-ui.ts b/packages/core/src/generators/swift-ui.ts
index ae02ad0734..546375f335 100644
--- a/packages/core/src/generators/swift-ui.ts
+++ b/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' }];
   };
diff --git a/packages/core/src/generators/template.ts b/packages/core/src/generators/template.ts
index cf327482f2..5a5861e527 100644
--- a/packages/core/src/generators/template.ts
+++ b/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' }];
   };
diff --git a/packages/core/src/generators/vue/vue.ts b/packages/core/src/generators/vue/vue.ts
index f16908b9a5..3d4fe367ea 100644
--- a/packages/core/src/generators/vue/vue.ts
+++ b/packages/core/src/generators/vue/vue.ts
@@ -285,7 +285,7 @@ const componentToVue: TranspilerGenerator<Partial<ToVueOptions>> =
       str = str.replace(pattern, '');
     }
 
-    return str;
+    return [{ content: str, type: 'component' }];
   };
 
 export const componentToVue2 = (vueOptions?: VueOptsWithoutVersion) =>
diff --git a/packages/core/src/types/transpiler.ts b/packages/core/src/types/transpiler.ts
index 2ace4362bb..ed2c84a8db 100644
--- a/packages/core/src/types/transpiler.ts
+++ b/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: 'css' | 'html' | 'js' | 'jsx' | 'component' | 'error';
+};
+
+export type Transpiler<R = string> = (args: TranspilerArgs) => GeneratorOutput<R>[];
 
 /**
  * This type guarantees that all code generators receive the same base options
diff --git a/packages/fiddle/src/components/Fiddle.tsx b/packages/fiddle/src/components/Fiddle.tsx
index ce85bfe08e..1f11c918a8 100644
--- a/packages/fiddle/src/components/Fiddle.tsx
+++ b/packages/fiddle/src/components/Fiddle.tsx
@@ -307,7 +307,7 @@ export default function Fiddle() {
         return;
       }
       const jsxJson = builderContentToMitosisComponent(builderJson);
-      state.code = componentToMitosis()({ component: jsxJson });
+      state.code = componentToMitosis()({ component: jsxJson })[0].content;
       state.pendingBuilderChange = null;
     },
 
@@ -324,7 +324,7 @@ export default function Fiddle() {
           typescript: hasBothTsAndJsSupport(state.outputTab) && state.options.typescript === 'true',
         };
 
-        state.output =
+        const output =
           state.outputTab === 'liquid'
             ? componentToLiquid({ plugins, ...commonOptions })({ component: json })
             : state.outputTab === 'html'
@@ -410,6 +410,8 @@ export default function Fiddle() {
                 path: '',
               });
 
+        state.output = output[0].content;
+
         const newBuilderData = componentToBuilder()({ component: json });
         setBuilderData(newBuilderData);
       } catch (err) {

From 04067272deeb666e2dbadc7859ab2da9233e5504 Mon Sep 17 00:00:00 2001
From: Spencer Brower <brower.spencer@gmail.com>
Date: Wed, 2 Nov 2022 14:57:53 -0400
Subject: [PATCH 2/4] fix: Removed presently unused types.

---
 packages/core/src/generators/qwik/component-generator.ts | 2 +-
 packages/core/src/types/transpiler.ts                    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/generators/qwik/component-generator.ts b/packages/core/src/generators/qwik/component-generator.ts
index 2950198ae7..105cb0da9c 100644
--- a/packages/core/src/generators/qwik/component-generator.ts
+++ b/packages/core/src/generators/qwik/component-generator.ts
@@ -122,7 +122,7 @@ export const componentToQwik: TranspilerGenerator<ToQwikOptions> =
       return [{ content: sourceFile, type: 'component' }];
     } catch (e) {
       console.error(e);
-      return [{ content: (e as Error).stack || String(e), type: 'error' }];
+      return [{ content: (e as Error).stack || String(e), type: 'component' }];
     }
   };
 
diff --git a/packages/core/src/types/transpiler.ts b/packages/core/src/types/transpiler.ts
index ed2c84a8db..5ec8400c51 100644
--- a/packages/core/src/types/transpiler.ts
+++ b/packages/core/src/types/transpiler.ts
@@ -10,7 +10,7 @@ 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: 'css' | 'html' | 'js' | 'jsx' | 'component' | 'error';
+  type: 'component';
 };
 
 export type Transpiler<R = string> = (args: TranspilerArgs) => GeneratorOutput<R>[];

From 4e9a1617711f96bf05ccd6d2427610128eb5f0cd Mon Sep 17 00:00:00 2001
From: Spencer Brower <brower.spencer@gmail.com>
Date: Wed, 9 Nov 2022 20:01:18 -0500
Subject: [PATCH 3/4] fix: Updated Alpine.js to output an object.

---
 packages/core/src/generators/alpine/generate.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/generators/alpine/generate.ts b/packages/core/src/generators/alpine/generate.ts
index 72a7cffae2..11c1c4f842 100644
--- a/packages/core/src/generators/alpine/generate.ts
+++ b/packages/core/src/generators/alpine/generate.ts
@@ -241,5 +241,5 @@ export const componentToAlpine: TranspilerGenerator<ToAlpineOptions> =
     if (options.plugins) {
       str = runPostCodePlugins(str, options.plugins);
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };

From 0a2958210f39b967189c5c881780d80fa79c35fb Mon Sep 17 00:00:00 2001
From: Spencer Brower <brower.spencer@gmail.com>
Date: Thu, 10 Nov 2022 10:53:50 -0500
Subject: [PATCH 4/4] feat(cli/compile): Can now ouput more than one file.

Works when outputting to console, not so much with files.
---
 packages/cli/src/commands/compile.ts | 51 +++++++++++++++-------------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/packages/cli/src/commands/compile.ts b/packages/cli/src/commands/compile.ts
index 2c41d9d79a..c8a2600150 100644
--- a/packages/cli/src/commands/compile.ts
+++ b/packages/cli/src/commands/compile.ts
@@ -11,6 +11,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];
 
@@ -101,8 +102,6 @@ const command: GluegunCommand = {
     }
 
     for await (const { data, path } of readFiles()) {
-      let output: any;
-
       if (outDir) {
         out = join(outDir, path);
       }
@@ -131,7 +130,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}`);
@@ -140,27 +160,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);
-      }
     }
   },
 };
@@ -182,6 +181,10 @@ function isTarget(term: string): term is Target {
   return typeof targets[term] !== 'undefined';
 }
 
+function isJSON(obj: any): obj is object {
+  return typeof obj === 'object';
+}
+
 async function readStdin() {
   const chunks = [];