From 59040a959636be6f03094659d9222df3403f52f7 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Wed, 2 Aug 2023 00:39:56 +0200 Subject: [PATCH] chore!: Migrate build of single entry points from webpack to vite MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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æ Signed-off-by: Ferdinand Thiessen --- package-lock.json | 14 ++---------- package.json | 31 +++++++++++++++++--------- styleguide.config.js | 2 +- vite.config.mts | 39 ++++++++++++++++++++++++++++----- webpack.config.js | 52 ++------------------------------------------ 5 files changed, 60 insertions(+), 78 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4e31cbf81e..e4ab46f06b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -62,7 +62,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", @@ -90,8 +90,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" }, "engines": { "node": "^20.0.0", @@ -29759,15 +29758,6 @@ "node": ">=10.0.0" } }, - "node_modules/webpack-node-externals": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/webpack-node-externals/-/webpack-node-externals-3.0.0.tgz", - "integrity": "sha512-LnL6Z3GGDPht/AigwRh2dvL9PQPFQ8skEpVrWZXLWBYmqcaojHNN0onvHzie6rq7EWKrrBfPYqNEzTJgiwEQDQ==", - "dev": true, - "engines": { - "node": ">=6" - } - }, "node_modules/webpack-sources": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.3.1.tgz", diff --git a/package.json b/package.json index eb44e7086e..4aa6cd0b76 100644 --- a/package.json +++ b/package.json @@ -13,12 +13,9 @@ "author": "John Molakvoæ (skjnldsv) ", "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" diff --git a/styleguide.config.js b/styleguide.config.js index a28a22deee..49d110cc43 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -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: [ diff --git a/vite.config.mts b/vite.config.mts index d90f83c376..72edc252b8 100644 --- a/vite.config.mts +++ b/vite.config.mts @@ -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, ], diff --git a/webpack.config.js b/webpack.config.js index bae3ec7a18..369db54ad3 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -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$/,