feat: Generators can now emit more than one output file. #865
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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?
html
,css
,js
,jsx
,scss
, etc.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 thedom
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:
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 intoMyComponent.component.js
andMyComponent.css
? We could hard-codecss
in as an option, but what if someone wants to use sass or postcss?Maybe we need a
stylesLanguage
orstylesExtension
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
CLI
Fiddle