Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from

Conversation

sbrow
Copy link
Contributor

@sbrow sbrow commented Nov 2, 2022

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

BREAKING CHANGE: Generators no longer return a string.
@vercel
Copy link

vercel bot commented Nov 2, 2022

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)

@sbrow sbrow changed the title feat: Generators can now export more than one output file. feat: Generators can now emit more than one output file. Nov 13, 2022
@kingzez
Copy link
Contributor

kingzez commented Mar 23, 2023

Excuse me, is there any progress on this currently?

@sbrow
Copy link
Contributor Author

sbrow commented Mar 27, 2023

Excuse me, is there any progress on this currently?

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

@samijaber
Copy link
Contributor

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants