build: remove babel

Signed-off-by: Varun Patil <radialapps@gmail.com>

babel.config.js

@@ -1,15 +0,0 @@
-module.exports = {
-    plugins: [
-        '@babel/plugin-syntax-dynamic-import',
-    ],
-    presets: [
-        [
-            '@babel/preset-env',
-            {
-                "targets": "> 5%, not dead",
-                useBuiltIns: false,
-                modules: 'auto',
-            },
-        ],
-    ],
-}

package.json

@@ -46,7 +46,7 @@
     "plyr": "^3.7.8",
     "react-filerobot-image-editor": "^4.5.2",
     "reflect-metadata": "^0.1.13",
-    "video.js": "^8.5.2",
+    "video.js": "^8.6.0",
     "vue": "^2.7.14",
     "vue-material-design-icons": "^5.2.0",
     "vue-router": "^3.6.5",
@@ -54,26 +54,31 @@
     "vue2-leaflet": "^2.7.1",
     "webdav": "^4.11.2"
   },
-  "browserslist": [
-    "extends @nextcloud/browserslist-config"
-  ],
   "engines": {
     "node": ">=18.2.0",
     "npm": ">=8.0.0"
   },
   "devDependencies": {
-    "@nextcloud/browserslist-config": "^3.0.0",
-    "@nextcloud/webpack-vue-config": "^6.0.0",
     "@playwright/test": "^1.39.0",
-    "@types/hammerjs": "^2.0.42",
-    "@types/justified-layout": "^4.1.1",
-    "@types/luxon": "^3.3.2",
-    "@types/url-parse": "^1.4.9",
-    "@types/videojs-contrib-quality-levels": "^2.0.2",
+    "@types/hammerjs": "^2.0.43",
+    "@types/justified-layout": "^4.1.2",
+    "@types/luxon": "^3.3.3",
+    "@types/url-parse": "^1.4.10",
+    "@types/videojs-contrib-quality-levels": "^2.0.3",
+    "css-loader": "^6.8.1",
+    "node-polyfill-webpack-plugin": "2.0.1",
     "playwright": "^1.39.0",
     "prettier": "^3.0.3",
+    "sass": "^1.69.4",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3",
+    "ts-loader": "^9.5.0",
     "typescript": "^5.2.2",
+    "vue-loader": "^15.11.1",
+    "vue-template-compiler": "^2.7.14",
     "vue-tsc": "^1.8.19",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
     "workbox-webpack-plugin": "^7.0.0"
   }
 }

webpack.js

@@ -1,74 +1,140 @@
 const webpack = require('webpack');
 const path = require('path');
-const webpackConfig = require('@nextcloud/webpack-vue-config');
+
 const WorkboxPlugin = require('workbox-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
+const { VueLoaderPlugin } = require('vue-loader');
 
+const appName = process.env.npm_package_name;
+const appVersion = process.env.npm_package_version;
 const buildMode = process.env.NODE_ENV;
 const isDev = buildMode === 'development';
+console.info('Building', appName, appVersion, '\n');
 
-// Entry points
-webpackConfig.entry = {
-  main: path.resolve(path.join('src', 'main')),
-  admin: path.resolve(path.join('src', 'admin')),
-  'hooks-clear-cache': path.resolve(path.join('src', 'hooks', 'clear-cache')),
-};
+module.exports = {
+  target: 'web',
+  mode: buildMode,
+  devtool: isDev ? 'cheap-source-map' : false,
+  cache: isDev,
 
-// Enable TypeScript for Vue
-const tsRule = webpackConfig.module.rules.find((rule) => rule.use?.includes('ts-loader'));
-console.assert(tsRule, 'Could not find ts-loader rule');
-tsRule.use = [
-  { loader: 'babel-loader' },
-  {
-    loader: 'ts-loader',
-    options: {
-      appendTsSuffixTo: [/\.vue$/],
+  entry: {
+    main: path.resolve(path.join(__dirname, 'src', 'main')),
+    admin: path.resolve(path.join(__dirname, 'src', 'admin')),
+    'hooks-clear-cache': path.resolve(path.join(__dirname, 'src', 'hooks', 'clear-cache')),
+  },
+
+  output: {
+    path: path.resolve(__dirname, 'js'),
+    publicPath: path.join('/apps/', appName, '/js/'),
+
+    // Output file names
+    filename: `${appName}-[name].js?v=[contenthash]`,
+    chunkFilename: `${appName}-[name].js?v=[contenthash]`,
+
+    // Clean output before each build
+    clean: true,
+
+    // Make sure sourcemaps have a proper path and do not
+    // leak local paths https://github.com/webpack/webpack/issues/3603
+    devtoolNamespace: appName,
+    devtoolModuleFilenameTemplate(info) {
+      const rootDir = process.cwd();
+      const rel = path.relative(rootDir, info.absoluteResourcePath);
+      return `webpack:///${appName}/${rel}`;
     },
   },
-];
 
-// Exclude node_modules from watch
-webpackConfig.watchOptions = {
-  ignored: /node_modules/,
-  aggregateTimeout: 300,
-};
+  watchOptions: {
+    ignored: /node_modules/,
+    aggregateTimeout: 300,
+  },
 
-// Bundle service worker
-webpackConfig.plugins.push(
-  new WorkboxPlugin.InjectManifest({
-    swSrc: path.resolve(path.join('src', 'service-worker.js')),
-    swDest: 'memories-service-worker.js',
-  }),
-);
-
-// Minification
-webpackConfig.optimization.minimizer = [
-  new TerserPlugin({
-    exclude: [/filerobot-image-editor/],
-    terserOptions: {
-      output: {
-        comments: false,
-      },
+  optimization: {
+    chunkIds: 'named',
+    splitChunks: {
+      automaticNameDelimiter: '-',
     },
-    extractComments: true,
-  }),
-];
+    minimize: !isDev,
+    minimizer: [
+      new TerserPlugin({
+        exclude: [/filerobot-image-editor/],
+        terserOptions: {
+          output: {
+            comments: false,
+          },
+        },
+        extractComments: true,
+      }),
+    ],
+  },
 
-// Disable source maps in production
-webpackConfig.devtool = isDev ? 'cheap-source-map' : false;
+  module: {
+    rules: [
+      {
+        test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf)$/,
+        type: 'asset/inline',
+      },
+      {
+        test: /\.s?css$/,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+      },
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              appendTsSuffixTo: [/\.vue$/],
+            },
+          },
+        ],
+        exclude: /node_modules/,
+      },
+    ],
+  },
 
-// Configure source map public path
-webpackConfig.plugins.push(
-  new webpack.SourceMapDevToolPlugin({
-    filename: '[file].map',
-    publicPath: path.join('/apps/', process.env.npm_package_name, '/js/'),
-  }),
-);
+  plugins: [
+    new VueLoaderPlugin(),
 
-// Enable caching
-webpackConfig.cache = true;
+    // Make sure we auto-inject node polyfills on demand
+    // https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-nodejs-polyfills-removed
+    new NodePolyfillPlugin({
+      includeAliases: ['stream', 'process'], // webdav
+    }),
 
-// Bundle analyzer (npm i --no-save webpack-bundle-analyzer)
-// webpackConfig.plugins.push(new (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)());
+    // Configure source map public path
+    new webpack.SourceMapDevToolPlugin({
+      filename: '[file].map',
+      publicPath: path.join('/apps/', process.env.npm_package_name, '/js/'),
+    }),
 
-module.exports = webpackConfig;
+    // Bundle service worker
+    new WorkboxPlugin.InjectManifest({
+      swSrc: path.resolve(path.join('src', 'service-worker.js')),
+      swDest: 'memories-service-worker.js',
+    }),
+
+    // Make appName & appVersion available as a constant
+    new webpack.DefinePlugin({ appName: JSON.stringify(appName) }),
+    new webpack.DefinePlugin({ appVersion: JSON.stringify(appVersion) }),
+
+    // Bundle analyzer (npm i --no-save webpack-bundle-analyzer)
+    // new (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)()
+  ],
+
+  resolve: {
+    extensions: ['.ts', '.js', '.vue'],
+    symlinks: false,
+    // Ensure npm does not duplicate vue dependency, and that npm link works for vue 3
+    // See https://github.com/vuejs/core/issues/1503
+    // See https://github.com/nextcloud/nextcloud-vue/issues/3281
+    alias: {
+      vue$: path.resolve('./node_modules/vue'),
+    },
+  },
+};