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);