Elm + Webcomponents output

Hi this looks like a super useful project!

I would be interested in working on an output target aimed at integrating in Elm. This is somewhat challenging as Elm has a fairly radically different model than most of the existing targets for mitosis.

The ideal outcome is that most components could be compiled to pure Elm. To do this, there needs to be a reasonably good transpiration story from Typescript to Elm. I’ve started prototyping this and it seems like it could work for a decent amount of relatively simple components.

The fallback would then be to generate 2 files: a web component using the existing web component output + an Elm “interface” file that would reference and wrap that component. I would foresee this happening in 3 scenarios:

1. Basically whenever ref is used, as Elm has no such concept.
2. When the JS/TS code uses concepts that aren’t well suited to compiling into Elm:
   • heavy mutation
   • DOM APIs
   • importing random library code
3. When the typescript type information isn’t good enough to allow sufficient analysis to transpile into Elm. This could alternatively throw an error. I suspect this wouldn’t happen if compiling on the strictest TS settings (like forbidding any), but not sure how that’s setup in Mitosis projects…

---

So, are there any docs for contributing code emitters? Also, looking at the JSON output, the code seems to get transformed into an imperative form. Is it possible to emit full on typescript AST with type information included?

[sbrow]

If you’re interested in making the change to our infra such that it supports 1:many generators, I’ll write up a guide here shortly on how to make this migration. If not, anyone else is welcome to grab it!

Awesome guide! I opened an issue on this very subject #818. Might take a whack at it if I have the time.

[samijaber]

Updating generators to output multiple files

1- Start by updating the types used by all generators: https://github.com/BuilderIO/mitosis/blob/084de1af31f1181772fd73dcbfd20382e1508d47/packages/core/src/types/transpiler.ts#L9-L16

to:

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 
  */ 
 export type TranspilerGenerator<X extends BaseTranspilerOptions, Y = string> = ( 
   args?: X, 
 ) => Transpiler<Y>; 

2- At that point, Typescript will point all the places containing errors. Easiest thing to do is to change the return statements in generators from return src to return [{ content: src, type: 'component' }]

3- In the CLI, change this to grab the first element of the array: https://github.com/BuilderIO/mitosis/blob/084de1af31f1181772fd73dcbfd20382e1508d47/packages/cli/src/build/build.ts#L310

transpiled = overrideFile ?? generator(options.options[target])({ path, component })[0].content; 

This is good enough for a first pass. When we actually start generating multiple files, and adding different types of content/type, we will need to improve our CLI to adequately process those. But this can come later