chore!: Migrate build of single entry points from webpack to vite

This is a breaking change as this also introduces ESM entry points for all components etc
and therfor changed the files from `.js` to `.cjs` and `.mjs` respective.

Instead of `import NcButton from '@nextcloud/vue/dist/Components/NcButton.js` use `import NcButton from '@nextcloud/vue/components/NcButton'`.

* Also fix docs for component import pattern

Co-authored-by: John Molakvoæ <[email protected]>

Signed-off-by: Ferdinand Thiessen <[email protected]>

Author: susnux

package-lock.json

@@ -13,12 +13,9 @@
   "author": "John Molakvoæ (skjnldsv) <[email protected]>",
   "license": "AGPL-3.0",
   "scripts": {
-    "dev": "webpack --node-env development --progress && npm run dev:module",
-    "dev:module": "vite build --mode development",
-    "watch": "webpack --node-env development --progress --watch",
-    "watch:module": "vite build --mode development --watch",
-    "build": "webpack --node-env production --progress && npm run build:module",
-    "build:module": "vite --mode production build",
+    "build": "vite build --mode production ",
+    "dev": "vite build --mode development",
+    "dev:watch": "vite build --mode development --watch",
     "l10n:extract": "node build/extract-l10n.js",
     "lint": "eslint --ext .js,.vue src",
     "lint:fix": "eslint --ext .js,.vue src --fix",
@@ -38,7 +35,22 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     },
-    "./dist/*": "./dist/*"
+    "./dist/Components/*.js": {
+      "import": "./dist/Components/*.mjs",
+      "require": "./dist/Components/*.cjs"
+    },
+    "./dist/Directives/*.js": {
+      "import": "./dist/Directives/*.mjs",
+      "require": "./dist/Directives/*.cjs"
+    },
+    "./dist/Functions/*.js": {
+      "import": "./dist/Functions/*.mjs",
+      "require": "./dist/Functions/*.cjs"
+    },
+    "./dist/Mixins/*.js": {
+      "import": "./dist/Mixins/*.mjs",
+      "require": "./dist/Mixins/*.cjs"
+    }
   },
   "files": [
     "CHANGELOG.md",
@@ -104,7 +116,7 @@
     "@nextcloud/browserslist-config": "^3.0.0",
     "@nextcloud/eslint-config": "^8.3.0-beta.0",
     "@nextcloud/stylelint-config": "^2.3.1",
-    "@nextcloud/vite-config": "^1.0.0-beta.17",
+    "@nextcloud/vite-config": "^1.0.0-beta.18",
     "@nextcloud/webpack-vue-config": "github:nextcloud/webpack-vue-config#master",
     "@vue/test-utils": "^1.3.0",
     "@vue/tsconfig": "^0.4.0",
@@ -132,8 +144,7 @@
     "vue-styleguidist": "~4.72.0",
     "vue-template-compiler": "^2.7.14",
     "webpack": "^5.88.1",
-    "webpack-merge": "^5.9.0",
-    "webpack-node-externals": "^3.0.0"
+    "webpack-merge": "^5.9.0"
   },
   "browserslist": [
     "extends @nextcloud/browserslist-config"

package.json

@@ -56,7 +56,7 @@ module.exports = async () => {
 		components: 'src/components/*/*.vue',
 		getComponentPathLine(componentPath) {
 			const name = path.basename(componentPath, '.vue')
-			return `import ${name} from '@nextcloud/vue/dist/Components/${name}'`
+			return `import ${name} from '@nextcloud/vue/dist/Components/${name}.js'`
 		},
 
 		sections: [

styleguide.config.js

@@ -1,6 +1,7 @@
 import type { Plugin } from 'vite'
 import { createLibConfig } from '@nextcloud/vite-config'
-import { resolve } from 'path'
+import { globSync } from 'glob'
+import { join, resolve } from 'node:path'
 import { defineConfig } from 'vite'
 
 import md5 from 'md5'
@@ -17,6 +18,38 @@ const TRANSLATIONS = await loadTranslations(resolve(__dirname, './l10n'))
 
 // Entry points which we build using vite
 const entryPoints = {
+	...globSync('src/components/*/index.js').reduce((acc, item) => {
+		const name = item
+			.replace('/index.js', '')
+			.replace('src/components/', 'Components/')
+		acc[name] = join(__dirname, item)
+		return acc
+	}, {}),
+
+	...globSync('src/directives/*/index.js').reduce((acc, item) => {
+		const name = item
+			.replace('/index.js', '')
+			.replace('src/directives/', 'Directives/')
+		acc[name] = join(__dirname, item)
+		return acc
+	}, {}),
+
+	...globSync('src/functions/*/index.js').reduce((acc, item) => {
+		const name = item
+			.replace('/index.js', '')
+			.replace('src/functions/', 'Functions/')
+		acc[name] = join(__dirname, item)
+		return acc
+	}, {}),
+
+	...globSync('src/mixins/*/index.js').reduce((acc, item) => {
+		const name = item
+			.replace('/index.js', '')
+			.replace('src/mixins/', 'Mixins/')
+		acc[name] = join(__dirname, item)
+		return acc
+	}, {}),
+
 	index: resolve(__dirname, 'src/index.js'),
 }
 
@@ -33,10 +66,6 @@ const vueDocsPlugin: Plugin = {
 
 // Customizations for the vite config
 const overrides = defineConfig({
-	build: {
-		// Vite is run second so do not remove webpack files
-		emptyOutDir: false,
-	},
 	plugins: [
 		vueDocsPlugin,
 	],

vite.config.mts

@@ -1,13 +1,13 @@
+// config for the styleguide
+
 const webpackConfig = require('@nextcloud/webpack-vue-config')
 const webpackRules = require('@nextcloud/webpack-vue-config/rules')
 
-const { globSync } = require('glob')
 const md5 = require('md5')
 const path = require('path')
 
 const { DefinePlugin } = require('webpack')
 const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
-const nodeExternals = require('webpack-node-externals')
 const { loadTranslations } = require('./build/translations.js')
 
 const buildMode = process.env.NODE_ENV
@@ -19,55 +19,7 @@ const appVersion = JSON.stringify(process.env.npm_package_version || 'nextcloud-
 const versionHash = md5(appVersion).slice(0, 7)
 const SCOPE_VERSION = JSON.stringify(versionHash)
 
-console.info('This build version hash is', versionHash, '\n')
-
-webpackConfig.entry = {
-	...globSync('src/components/*/index.js').reduce((acc, item) => {
-		const name = item
-			.replace('/index.js', '')
-			.replace('src/components/', 'Components/')
-		acc[name] = path.join(__dirname, item)
-		return acc
-	}, {}),
-
-	...globSync('src/directives/*/index.js').reduce((acc, item) => {
-		const name = item
-			.replace('/index.js', '')
-			.replace('src/directives/', 'Directives/')
-		acc[name] = path.join(__dirname, item)
-		return acc
-	}, {}),
-
-	...globSync('src/functions/*/index.js').reduce((acc, item) => {
-		const name = item
-			.replace('/index.js', '')
-			.replace('src/functions/', 'Functions/')
-		acc[name] = path.join(__dirname, item)
-		return acc
-	}, {}),
-
-	...globSync('src/mixins/*/index.js').reduce((acc, item) => {
-		const name = item
-			.replace('/index.js', '')
-			.replace('src/mixins/', 'Mixins/')
-		acc[name] = path.join(__dirname, item)
-		return acc
-	}, {}),
-}
-
 webpackConfig.devtool = isDev ? false : 'source-map'
-webpackConfig.output = {
-	path: path.resolve(__dirname, './dist'),
-	publicPath: '/dist/',
-	filename: '[name].js',
-	library: {
-		type: 'umd',
-		name: ['NextcloudVue', '[name]'],
-	},
-	umdNamedDefine: true,
-}
-
-webpackConfig.externals = [nodeExternals()]
 
 webpackRules.RULE_SCSS = {
 	test: /\.scss$/,