|
| 1 | +/** |
| 2 | + * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors |
| 3 | + * SPDX-License-Identifier: AGPL-3.0-or-later |
| 4 | + */ |
| 5 | + |
| 6 | +import browserslistConfig from '@nextcloud/browserslist-config' |
| 7 | +import { defineConfig } from '@rspack/cli' |
| 8 | +import { |
| 9 | + CssExtractRspackPlugin, |
| 10 | + LightningCssMinimizerRspackPlugin, |
| 11 | + DefinePlugin, |
| 12 | + ProgressPlugin, |
| 13 | + SwcJsMinimizerRspackPlugin, |
| 14 | +} from '@rspack/core' |
| 15 | +import NodePolyfillPlugin from '@rspack/plugin-node-polyfill' |
| 16 | +import browserslist from 'browserslist' |
| 17 | +import path from 'node:path' |
| 18 | +import { fileURLToPath } from 'node:url' |
| 19 | +import { VueLoaderPlugin } from 'vue-loader' |
| 20 | + |
| 21 | +const __filename = fileURLToPath(import.meta.url) |
| 22 | +const __dirname = path.dirname(__filename) |
| 23 | + |
| 24 | +// browserslist-rs does not support baseline queries yet |
| 25 | +// Manually resolving the browserslist config to the list of browsers with minimal versions |
| 26 | +// See: https://github.com/browserslist/browserslist-rs/issues/40 |
| 27 | +const browsers = browserslist(browserslistConfig) |
| 28 | +const minBrowserVersion = browsers |
| 29 | + .map((str) => str.split(' ')) |
| 30 | + .reduce((minVersion, [browser, version]) => { |
| 31 | + minVersion[browser] = minVersion[browser] |
| 32 | + ? Math.min(minVersion[browser], parseFloat(version)) |
| 33 | + : parseFloat(version) |
| 34 | + return minVersion |
| 35 | + }, {}) |
| 36 | +const targets = Object.entries(minBrowserVersion) |
| 37 | + .map(([browser, version]) => `${browser} >=${version}`) |
| 38 | + .join(',') |
| 39 | + |
| 40 | +/** @type {import('@rspack/cli').RspackConfigFn} */ |
| 41 | +const config = (env) => { |
| 42 | + const appName = process.env.npm_package_name |
| 43 | + const appVersion = process.env.npm_package_version |
| 44 | + |
| 45 | + const mode = |
| 46 | + (env.development && 'development') |
| 47 | + || (env.production && 'production') |
| 48 | + || process.env.NODE_ENV |
| 49 | + || 'production' |
| 50 | + const isDev = mode === 'development' |
| 51 | + process.env.NODE_ENV = mode |
| 52 | + |
| 53 | + console.info('Building', appName, appVersion, '\n') |
| 54 | + |
| 55 | + return { |
| 56 | + target: 'web', |
| 57 | + mode, |
| 58 | + devtool: isDev ? 'cheap-source-map' : 'source-map', |
| 59 | + |
| 60 | + entry: { |
| 61 | + text: path.join(__dirname, 'src', 'main.js'), |
| 62 | + files: path.join(__dirname, 'src', 'files.ts'), |
| 63 | + public: path.join(__dirname, 'src', 'public.js'), |
| 64 | + viewer: path.join(__dirname, 'src', 'viewer.js'), |
| 65 | + editor: path.join(__dirname, 'src', 'editor.js'), |
| 66 | + init: path.join(__dirname, 'src', 'init.js'), |
| 67 | + }, |
| 68 | + |
| 69 | + output: { |
| 70 | + path: path.resolve('./js'), |
| 71 | + filename: `${appName}-[name].js?v=[contenthash]`, |
| 72 | + chunkFilename: `${appName}-[name].js?v=[contenthash]`, |
| 73 | + // Set publicPath via __webpack_public_path__ |
| 74 | + publicPath: 'auto', |
| 75 | + assetModuleFilename: '[name][ext]?v=[contenthash]', |
| 76 | + clean: true, |
| 77 | + devtoolNamespace: appName, |
| 78 | + // Make sure sourcemaps have a proper path and do not leak local paths |
| 79 | + devtoolModuleFilenameTemplate(info) { |
| 80 | + const rootDir = process.cwd() |
| 81 | + const rel = path.relative(rootDir, info.absoluteResourcePath) |
| 82 | + return `webpack:///${appName}/${rel}` |
| 83 | + }, |
| 84 | + }, |
| 85 | + |
| 86 | + devServer: { |
| 87 | + hot: true, |
| 88 | + host: '127.0.0.1', |
| 89 | + port: 3000, |
| 90 | + allowedHosts: ['host.docker.internal', 'localhost', 'nextcloud.local'], |
| 91 | + client: { |
| 92 | + overlay: false, |
| 93 | + }, |
| 94 | + devMiddleware: { |
| 95 | + writeToDisk: true, |
| 96 | + }, |
| 97 | + headers: { |
| 98 | + 'Access-Control-Allow-Origin': '*', |
| 99 | + }, |
| 100 | + }, |
| 101 | + |
| 102 | + optimization: { |
| 103 | + chunkIds: 'named', |
| 104 | + splitChunks: { |
| 105 | + automaticNameDelimiter: '-', |
| 106 | + cacheGroups: { |
| 107 | + defaultVendors: { |
| 108 | + reuseExistingChunk: true, |
| 109 | + }, |
| 110 | + // Make the emoji related dependencies a custom chunk |
| 111 | + 'emoji-picker': { |
| 112 | + test: /[\\/]node_modules[\\/](emoji-mart-vue|emoji-datasource)/, |
| 113 | + name: 'emoji-picker', |
| 114 | + chunks: 'all', |
| 115 | + priority: 20, |
| 116 | + }, |
| 117 | + }, |
| 118 | + }, |
| 119 | + minimize: !isDev, |
| 120 | + minimizer: [ |
| 121 | + new SwcJsMinimizerRspackPlugin({ |
| 122 | + minimizerOptions: { |
| 123 | + targets, |
| 124 | + }, |
| 125 | + }), |
| 126 | + new LightningCssMinimizerRspackPlugin({ |
| 127 | + minimizerOptions: { |
| 128 | + targets, |
| 129 | + }, |
| 130 | + }), |
| 131 | + ], |
| 132 | + }, |
| 133 | + |
| 134 | + module: { |
| 135 | + rules: [ |
| 136 | + { |
| 137 | + test: /\.vue$/, |
| 138 | + loader: 'vue-loader', |
| 139 | + options: { |
| 140 | + experimentalInlineMatchResource: true, |
| 141 | + }, |
| 142 | + }, |
| 143 | + { |
| 144 | + test: /\.css$/, |
| 145 | + use: [ |
| 146 | + { |
| 147 | + loader: CssExtractRspackPlugin.loader, |
| 148 | + }, |
| 149 | + { |
| 150 | + loader: 'css-loader', |
| 151 | + options: { |
| 152 | + modules: { |
| 153 | + auto: true, |
| 154 | + localIdentName: isDev |
| 155 | + ? '[path][name]__[local]' |
| 156 | + : '[hash:base64]', |
| 157 | + exportLocalsConvention: 'camelCase', |
| 158 | + }, |
| 159 | + url: { |
| 160 | + filter: (url) => { |
| 161 | + // Let rspack handle absolute paths and data URLs |
| 162 | + return ( |
| 163 | + !url.startsWith('/') |
| 164 | + && !url.startsWith('data:') |
| 165 | + ) |
| 166 | + }, |
| 167 | + }, |
| 168 | + }, |
| 169 | + }, |
| 170 | + ], |
| 171 | + }, |
| 172 | + { |
| 173 | + test: /\.scss$/, |
| 174 | + use: [ |
| 175 | + { |
| 176 | + loader: CssExtractRspackPlugin.loader, |
| 177 | + }, |
| 178 | + { |
| 179 | + loader: 'css-loader', |
| 180 | + options: { |
| 181 | + modules: { |
| 182 | + auto: true, |
| 183 | + localIdentName: isDev |
| 184 | + ? '[path][name]__[local]' |
| 185 | + : '[hash:base64]', |
| 186 | + exportLocalsConvention: 'camelCase', |
| 187 | + }, |
| 188 | + url: { |
| 189 | + filter: (url) => { |
| 190 | + // Let rspack handle absolute paths and data URLs |
| 191 | + return ( |
| 192 | + !url.startsWith('/') |
| 193 | + && !url.startsWith('data:') |
| 194 | + ) |
| 195 | + }, |
| 196 | + }, |
| 197 | + }, |
| 198 | + }, |
| 199 | + { |
| 200 | + loader: 'resolve-url-loader', |
| 201 | + options: { |
| 202 | + sourceMap: true, |
| 203 | + }, |
| 204 | + }, |
| 205 | + { |
| 206 | + loader: 'sass-loader', |
| 207 | + options: { |
| 208 | + sourceMap: true, |
| 209 | + sassOptions: { |
| 210 | + includePaths: [path.resolve(__dirname)], |
| 211 | + }, |
| 212 | + }, |
| 213 | + }, |
| 214 | + ], |
| 215 | + }, |
| 216 | + { |
| 217 | + test: /\.ts$/, |
| 218 | + exclude: [/node_modules/], |
| 219 | + loader: 'builtin:swc-loader', |
| 220 | + options: { |
| 221 | + jsc: { |
| 222 | + parser: { |
| 223 | + syntax: 'typescript', |
| 224 | + }, |
| 225 | + }, |
| 226 | + env: { |
| 227 | + targets, |
| 228 | + }, |
| 229 | + }, |
| 230 | + type: 'javascript/auto', |
| 231 | + }, |
| 232 | + { |
| 233 | + test: /\.(png|jpe?g|gif|svg|webp)$/i, |
| 234 | + type: 'asset', |
| 235 | + }, |
| 236 | + { |
| 237 | + test: /\.(woff2?|eot|ttf|otf)$/i, |
| 238 | + type: 'asset/resource', |
| 239 | + }, |
| 240 | + { |
| 241 | + resourceQuery: /raw/, |
| 242 | + type: 'asset/source', |
| 243 | + }, |
| 244 | + ], |
| 245 | + }, |
| 246 | + |
| 247 | + plugins: [ |
| 248 | + new ProgressPlugin(), |
| 249 | + |
| 250 | + new VueLoaderPlugin(), |
| 251 | + |
| 252 | + new NodePolyfillPlugin(), |
| 253 | + |
| 254 | + new DefinePlugin({ |
| 255 | + appName: JSON.stringify(appName), |
| 256 | + appVersion: JSON.stringify(appVersion), |
| 257 | + // Vue 2 compile time flags |
| 258 | + __VUE_OPTIONS_API__: true, |
| 259 | + __VUE_PROD_DEVTOOLS__: false, |
| 260 | + }), |
| 261 | + |
| 262 | + new CssExtractRspackPlugin({ |
| 263 | + filename: `../css/${appName}-[name].css?v=[contenthash]`, |
| 264 | + chunkFilename: `../css/${appName}-[name].css?v=[contenthash]`, |
| 265 | + ignoreOrder: true, |
| 266 | + }), |
| 267 | + ], |
| 268 | + |
| 269 | + resolve: { |
| 270 | + extensions: ['*', '.ts', '.js', '.vue', '.json'], |
| 271 | + symlinks: false, |
| 272 | + extensionAlias: { |
| 273 | + '.js': ['.js', '.ts'], |
| 274 | + }, |
| 275 | + alias: { |
| 276 | + vue$: 'vue/dist/vue.runtime.esm.js', |
| 277 | + '@': path.resolve(__dirname, 'src'), |
| 278 | + }, |
| 279 | + fallback: { |
| 280 | + fs: false, |
| 281 | + }, |
| 282 | + }, |
| 283 | + |
| 284 | + cache: true, |
| 285 | + } |
| 286 | +} |
| 287 | + |
| 288 | +export default defineConfig(config) |
0 commit comments