Enables ESM Modules

[vinicius73]

Context

Although We are bundling each component speared file, every file is bundled with every dependency individually.

As examples

• NcButton is bundled in 21 different files.
• NcActions is bundled in 11 different files.

Using the code below, ate least, we will have 2 NcButton registered in different moments.

import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'

We already are able to use a different approach.

import { NcButton, NcActions } from '@nextcloud/vue'

It solves the original issue, now we will have only one registered NcButton

Solution

src/index.js

Remove import * as NcComponents from './components/index.js' and install statements.

It removes possible side effects and open the way for Tree Shaking¹.

src/install.js

Create an install entry, to keep previous behaviors.

webpack.config.js

Enable module library target.
https://webpack.js.org/configuration/output/#outputlibrarytype

It improves the support for ESM builds. It will generate index.module.js.

Break Changes

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

---

This is related to #2959.

---

Footnotes

1. webpack, Roolup and parcel ↩

[vinicius73]

I do not have any ideia why Cypress tests is not passing anymore...

[juliushaertl]

Generally very nice, just a few comments/questions inline :)

[juliushaertl]

Tested with deck and main bundle size went down in dev build from 9.9 to 7.3 MB 🥳

[skjnldsv]

Is this an official naming convention?

[vinicius73]

No, it is just to keep webpack config simple

[raimund-schluessler]

@vinicius73 For Tasks the bundle size slightly increased (from 4.5 MB to 4.6 MB) when switching to global imports in nextcloud/tasks#2117. Do I do anything wrong? I never used the global import in Tasks before, though. Only ever imported via @nextcloud/vue/dist/.... Maybe then no change in bundle size is expected?

[vinicius73]

Yes @raimund-schluessler it can happen, specially if you bundle your app before we ship a new version with this PR change.

There are 3 main possible reasons

• The previous versions aren't esm compatible, so tree-shaking is impossible.
• The support of webpack to generate ESM bundle/library is not good yet, so the esm bundle is not so good yet.
• We can't use "sideEffect": false" in package.json (I don't know the reason, but cypress broke when I changed it) so the bundling process can't do the tree shaking in the better way.

So, will be some cases as the bundle will increase until we fully migrate to another solution like vite, and solve those problems.

[raimund-schluessler]

Thanks for the info. I used npm link, so it should be tree-shakeable already. I guess it's one of the other reasons then.
I will then probably stay with the imports via dist and check back once in a while whether it improved 🙂