Migrate build of single entry points from webpack to vite

[susnux]

With this PR all dist files will be built using Vite, see todo for rest of webpack.

☑️ Resolves

• Final step for building with Vite.
• Follow up on Migrate building CommonJS module entrypoint to vite #4329 and Fix module entry point by migrating to vite for ESM building #4276

(previously this PR was breaking, but this is changed):

⚠️ This is a breaking change! This simply adds more entry points, which is good as now code can be shared between the entry points which allows for smaller app bundles. But as this also introduces ESM entry points for all components it changes the file extensions from `.js` to `.cjs` and `.mjs` respective.

Because of this I think we should take the opportunity and move from /dist/Components/... to simply /components/....
This will also make it easier when we decide to provide Typescript definitions as then the same layout of dist as of src is used.

So this means you will now need to change the imports:

// Instead of this:
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'

// Use now
import NcButton from '@nextcloud/vue/components/NcButton.js'

Benchmark

If you need a reason why this is useful:
text js bundle size decreases by 4% (not much because text mostly imports from main entry point)
but
logreader js bundle size decreases by 27% (-600KiB!).

Migration guide

sed -Ei \
    -e 's|@nextcloud/vue/dist/Components/([^\.]+)\.js|@nextcloud/vue/components/\1|' \
    -e 's|@nextcloud/vue/dist/Directives/([^\.]+)\.js|@nextcloud/vue/directives/\1|' \
    -e 's|@nextcloud/vue/dist/Functions/([^\.]+)\.js|@nextcloud/vue/functions/\1|' \
    -e 's|@nextcloud/vue/dist/Mixins/([^\.]+)\.js|@nextcloud/vue/mixins/\1|' \
    src/**/*.js src/**/*.vue

🚧 Tasks

Webpack is still used by:

• styleguide (either use vue-docgen + vitepress or consider moving to industry standard storybook)
• Cypress (would do a follow up)

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable

[skjnldsv]

Wrong button.....

@susnux can you fix the docs import pattern too? :)

EDIT: I can do it myself, that should be faster 🙈, sorry for the ping!

[susnux]

PR for rollup: rollup/plugins#1549

Currently I think only the nextcloud-upload library uses rollup? Maybe just migrate to vite there and use the js extension here.

[susnux]

@skjnldsv @ShGKme I pushed a commit making it non breaking, what do you think?

[skjnldsv]

@skjnldsv @ShGKme I pushed a commit making it non breaking, what do you think?

Also good from me :)

[susnux]

@ShGKme what do you think? Would be good for #4415

[susnux]

ping @ShGKme @raimund-schluessler

[ShGKme]

Seems to work fine and looks fine by configs.

Am I right that now styles are not loaded from .js but loaded by require('path-to.css') inside modules?

var r=require("../assets/index45.css");const a=require("../chunks/actionText-bef01778.cjs"),

I'm a bit afraid of it because it is not a correct import/require for module systems, and works only with bundlers. Won't it be broken when dependencies (/node_modules/) are ignored for css rules or in unit testing (except Vitest)?

P.S. I'm also not fun of putting CSS inside JS as it was before, because it is much worse from a performance perspective. An alternative could be to bundle css in separate, but it would be a breaking change requiring developers to import css implicitly with the component.

[Antreesy]

Am I right that now styles are not loaded from .js but loaded by require('path-to.css') inside modules?

Might be related to it?

• with import of NcRichContenteditable to the project also the component NcMentionBubble is bundled with id '357e6d0e' (which will be used for styles scope in [data-v-357e6d0e])
• NcRichContenteditable is using mixin richEditor under the hood, which is in charge of rendering NcMentionBubble. It is also bundled in the project with id '8a961b36'
• dist/assets/NcMentionBubble-<hash>.css contains styles for scope data-v-357e6d0e, same as source webpack://./node_modules/@nextcloud/vue/dist/assets/index.css in production code
• dev environment seems to use mjs, where styles applied only for [data-v-8a961b36]

That causes the styles for rendered mentions to be broken, if lib is used in Talk, for example:

Content in a bundled app:

1. NcMentionBundle with id '357e6d0e'
2. Styles for id '8a961b36'
3. NcMentionBundle with id '8a961b36'
   

[ShGKme]

A small note about the problem: NcMentionBubble is the only Vue component that is imported from a .js file.

The css chunk is created in development mode, but for some reason is not imported by the mixin chunk.