Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Elm + Webcomponents output

See original GitHub issue

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?

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:1
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

sbrowcommented, Oct 31, 2022

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.

samijabercommented, Oct 31, 2022

Updating generators to output multiple files

1- Start by updating the types used by all generators:


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:

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Custom Elements · An Introduction to Elm - Elm Guide
Here is a minimal example of how to use custom elements to do some localization and internationalization. Creating Custom Elements. Say we want...
Read more >
Interacting with Web Components - - Beginning Elm
Run elm-live from the beginning-elm directory in terminal using the following command. $ elm-live src/CustomElements.elm -- --output=elm.js.
Read more >
Elm with webcomponents - Is this a bug or am I doing ...
elm --output elm.js --debug; use a webserver (for example 'serve') to host locally; click the button 'request'. This will change the attribute ' ......
Read more >
cultureamp/stencil-elm-output-target - GitHub
Plugin for Stencil ( to output a proxy module to consume web components with type safety in Elm - GitHub ...
Read more >
[discussion] - Web Components in Elm : r/elm - Reddit
Web Components in prespective of Elm just does not makes sense. If every component the app uses is a Web Component written in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found