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

[sbrow]

BREAKING CHANGE: Generators no longer return a string.

Description

This PR makes the changes discussed in #808, and (when completed) will also close issue #818. The basic premise is to allow generators to output to more than one file, allowing Mitosis to output Multi-file components as well as Single-file components.

Status: RFC

This will involve a relatively large refactor of all current and future generators, and so it must be thought out very carefully.

Questions

1. Do we split chunks nominally or by file extension?

• file extension examples: html, css, js, jsx, scss, etc.
• nominally (by conceptual element) : component, dom, styles, state

Defininitions of above terms:

component: Emits the entire component, as output by mitosis currently.

dom: Emits only the html elements of the component, including any event handlers and templating therein. Possible output extensions: .html, .vue, .jsx, .tsx, etc.

styles: Emits only the css and inline style data. Possible output extensions: .css, .scss, .pcss, etc.

state: Emits only the state object of the component. Output extensions limited to .js, .ts. (JSX isn't needed, because all the html is getting piped to the dom file).

2. How will generators know what chunks (if any) to split components into?

This sounds like a job for generator options. Does this mean we need a unifying interface for configuring code chunks, or should it be up to the generators to decide their API?

Example shared options interface:

type SubcomponentType = 'component' | 'dom' | 'styles';

interface CodeSplittingOptions {
  bundles: SubcomponentType[];
}


const ExampleSingleFileOptions = {
  bundles: ['component']
}

const ExampleMultiFileOptions = {
  bundles: ['dom', 'styles']
}

3. How will file extensions be determined during compilation?

At time of writing, file extensions for output files are hard-coded in packages/cli/src/helpers/extensions.ts. What if we want to split an Angular component into MyComponent.component.js and MyComponent.css? We could hard-code css in as an option, but what if someone wants to use sass or postcss?

Maybe we need a stylesLanguage or stylesExtension option for such cases, to tell mitosis how we want it to treat the styles.

4. How will multiple output files be displayed in the Fiddle?

To-Dos

Core

• Change the output of existing generators from string to array
• Enumerate the types of outputs a component should have

CLI

• save more than one file

Fiddle

• Display multiple files

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
mitosis-fiddle	❌ Failed (Inspect)		Jan 11, 2023 at 5:31PM (UTC)

[kingzez]

Excuse me, is there any progress on this currently?

[sbrow]

Excuse me, is there any progress on this currently?

Not that I know of. Still waiting on input from sami to proceed.

[samijaber]

@sbrow Sorry, I did not realize this was blocked on me. The PR certainly looks great to me, and is good to go on my end if you can rebase and fix any outstanding CI issues. 🙏🏽

Thank you for your patience, it's been a hectic couple of months.