Bundle and Publish #98
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@vue-reactivity/watch use tsup as its bundler, which create .mjs file as the ES module output. But webpack4 do not like .mjs extension which cause tools like create-react-app failed when using meta-ui. Even users can add some trick to let webpack4 bundle .mjs file, the watch function still not working. Refs: 1. facebook/create-react-app#10356 2. formatjs/formatjs#1395 (comment)
|
➿ Code coverage
|
|
The following code has been tested in vite and create-react-app based projects: yarn add @meta-ui/runtimeimport { initMetaUI } from "@meta-ui/runtime";
const { App: MetaApp } = initMetaUI();
const app = {
...
}
function App() {
return (
<MetaApp options={app} />
);
}
export default App; |
tanbowensg
reviewed
Oct 27, 2021
| @@ -5,7 +5,7 @@ import { getSlots } from '../_internal/Slot'; | |||
| import { Static, Type } from '@sinclair/typebox'; | |||
| import { partial } from 'lodash'; | |||
|
|
|||
| const BaseGridLayout = React.lazy(() => import('../../components/_internal/GridLayout')); | |||
| const BaseGridLayout = React.lazy(() => import('../_internal/GridLayout')); | |||
There was a problem hiding this comment.
Why do we lazy load GridLayout here?
There was a problem hiding this comment.
Previously, I think users who do not use GridLayout can have smaller code sizes by doing code splitting like this. But since most users will use @meta-ui/runtime as a library, ES module + tree shaking may be a better way.
In this commit, just change the relative path to a shorter one.
tanbowensg
approved these changes
Oct 27, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
In this PR, we add bundling tools to meta-ui packages(core and runtime) and publish npm packages that can be used by other projects.
Bundler
In the meantime, we use tsup as the bundler, which is designed for TS projects, and use esbuild under the hood.
We may switch to rollup or other bundlers in the future since tsup still has some issues with code splitting, but currently, it should work well enough and help us focus on the main features.
Fork
@vue-reactivity/watch@vue-reactivity/watch also uses tsup as its bundler, which creates the
.mjsfile as the ES module output. (We avoid this by setting the legacy flag).But webpack4 does not like the
.mjsextension which causes tools like create-react-app to fail when using meta-ui.Even users can add some tricks to let webpack4 bundle .mjs file, the watch function still not working without throwing any error/warning.
So we fork it into our codebase to avoid these issues.
Publish
Currently, we are using
lernato publish packages. Before v1.0, all the packages can be published to the stable channel. After v1.0, we may consider using the canary release channel as well.TODO
The editor package has not been tested and hopes we can finish it in the next PR.