[WIP] Migrate build to Vite

[vinicius73]

A proof of concept to use Vite instead Webpack.

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.

https://vitejs.dev/guide/why.html

• Add Vite build process
• Remove webpack from build
  • Migrate from styleguidist to another tool

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 Shaking¹ 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.

• https://webpack.js.org/guides/package-exports/
• https://rollupjs.org/guide/en/#publishing-es-modules

Also, we have a good compatibility layer.

• https://www.npmjs.com/package/@rollup/plugin-commonjs
• https://www.npmjs.com/package/@originjs/vite-plugin-commonjs
• https://webpack.js.org/concepts/modules/

ESM Native support

The main browsers are already compatible with ECMAScript Modules². Also, Node.js is natively compatible.

• Chrome >=87
• Firefox >=78
• Safari >=13
• Edge >=88

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.

- import Actions from '@nextcloud/vue/dist/Components/Actions'
- import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+ import { Actions, ActionButton } from '@nextcloud/vue' 

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 Shaking¹ process take care of this and remove any dead code.

Emoji functions

As all functions are directly expose, the function addRecent from src/functions/emoji have chanced to make clear what kind of function it is.

Now addRecent is called emojiAddRecent

CSS

Vite generate CSS file separated from JavaScript files. We need to import it in or applications manually.

import '@nextcloud/vue/style.css'

Footnotes

1. webpack, Roolup and parcel ↩ ↩²

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules ↩

[max-nextcloud]

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 ?

[vinicius73]

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.

[max-nextcloud]

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?

[vinicius73]

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.
The build its self is working perfectly, but to make send migrate to Vite, keep webpack just for styleguidist do not look reasonable to me.

I will try https://histoire.dev/, but it is a large refactoring.

[vinicius73]

I've been playing a bit with https://histoire.dev/
Works well, but some features are missing.

• It is not working with Vite v3 yet Upgrade to Vite 3 histoire-dev/histoire#189
• Auto doc is not available Extract props/slots/events documentation from source code histoire-dev/histoire#126

[skjnldsv]

Works well, but some features are missing.

Seems like very important features, so let's not move away from it yet I'd say

[skjnldsv]

Vite generate CSS file separated from JavaScript files. We need to import it in or applications manually.

Does that means we now have one big css instead of tiny ones?
If so, maybe consider this https://www.npmjs.com/package/vite-plugin-css-injected-by-js

[susnux]

@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.
The only feature missing is the live preview of the components, because it is really a pain to have vue2 and vue3 installed in parallel (vitepress using vue3 and @nextcloud/vue components working with vue2).
Locally I could get it work, but only using experimental node functions (import maps).

Maybe you can get some inspiration from my branch: https://github.com/nextcloud/nextcloud-vue/compare/enh/vite?expand=1

[skjnldsv]

@susnux can you open a PR from it?
So we can have a look?

[susnux]

can you open a PR from it? So we can have a look?

@skjnldsv of cause, #3529

[raimund-schluessler]

Closing in favor of #3565