-
Notifications
You must be signed in to change notification settings - Fork 85
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
[WIP] Migrate build to Vite #2959
Conversation
18c87f0
to
9554cd8
Compare
// eslint-disable-next-line no-lone-blocks | ||
{ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm curious why you added this lone block. Does it have any effect? I don't see any scoped variables in there. They are all in the TRANSLATIONS.forEach
loop anyway.
Is it related to the last example with the source type module here: https://eslint.org/docs/latest/rules/no-lone-blocks ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just to avoid some inconsistencies when replace this entry with an array.
My idea is remove part of this code and avoid some unnecessary computations.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just a brief code review for now. Have not tried building / using this myself.
I also wonder about the timeline... will we ship this with a new major release that we then start using for NC 26?
I don't know, the main block is styleguidist. I will try https://histoire.dev/, but it is a large refactoring. |
23f82f6
to
e477db9
Compare
I've been playing a bit with https://histoire.dev/
|
e477db9
to
e40635c
Compare
Seems like very important features, so let's not move away from it yet I'd say |
1a55d06
to
c517f05
Compare
c517f05
to
d89073e
Compare
2cfb435
to
5ce47f6
Compare
efd55c1
to
72c8374
Compare
cd7c6e4
to
263dfdc
Compare
Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
263dfdc
to
2ad6b37
Compare
Does that means we now have one big css instead of tiny ones? |
@vinicius73 about styleguideist, long story short: I overlooked your work here and also created a vite branch including API documentation using vue-doc-gen and vitepress. Besides switching from webpack to vite I also switched from jest to vitest and from styleguidist to doc-gen + vitepress. Maybe you can get some inspiration from my branch: https://github.com/nextcloud/nextcloud-vue/compare/enh/vite?expand=1 |
@susnux can you open a PR from it? |
Closing in favor of #3565 |
A proof of concept to use Vite instead Webpack.
https://vitejs.dev/guide/why.html
This change works as expected without any specific errors (regards problems from
v6-alfa
version whom this PR is based)nextcloud/text#2779
ESM Build
ECMAScript Modules and Tree Shaking1 are largely used nowadays.
We do not need to target our packages as CommonJS modules only.
Webpack, Vite, Rollup, Parcel and Skypack are able to detect what kind of module we need to use.
Also, we have a good compatibility layer.
ESM Native support
The main browsers are already compatible with ECMAScript Modules2. Also, Node.js is natively compatible.
Bundlers like Vite target ESM as default for browsers and node environments.
This change improves the performance and bundle's size of our packages, since a lot of transpiration can be removed from the final bundle.
Break Changes
No changes in any component have made. But, the import of components and functions had changes.
All components and functions are exposed directly in the main file. We do not need any more import each component or function file.
It not mean what an unused component will be bundled in the final application.
The Tree Shaking1 process take care of this and remove any dead code.
Emoji functions
As all functions are directly expose, the function
addRecent
fromsrc/functions/emoji
have chanced to make clear what kind of function it is.Now
addRecent
is calledemojiAddRecent
CSS
Vite generate CSS file separated from JavaScript files. We need to import it in or applications manually.
Footnotes
webpack, Roolup and parcel ↩ ↩2
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules ↩