Update vue version

package.json

@@ -43,10 +43,10 @@
     "reflect-metadata": "^0.1.13",
     "video.js": "^7.21.1",
     "videojs-contrib-quality-levels": "^2.2.1",
-    "vue": "^2.7.14",
+    "vue": "^3.2.45",
     "vue-material-design-icons": "^5.1.2",
-    "vue-router": "^3.6.5",
-    "vue-virtual-scroller": "1.1.2",
+    "vue-router": "^4.1.6",
+    "vue-virtual-scroller": "2.0.0-beta.5",
     "webdav": "^4.11.2"
   },
   "browserslist": [
@@ -57,15 +57,20 @@
     "npm": ">=7.0.0"
   },
   "devDependencies": {
-    "@nextcloud/babel-config": "^1.0.0",
     "@nextcloud/browserslist-config": "^2.3.0",
-    "@nextcloud/webpack-vue-config": "^5.4.0",
     "@playwright/test": "^1.28.1",
-    "@types/url-parse": "^1.4.8",
     "@types/video.js": "^7.3.50",
+    "babel-loader": "^9.1.0",
+    "css-loader": "^6.7.2",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "playwright": "^1.28.1",
+    "sass": "^1.56.2",
+    "sass-loader": "^13.2.0",
+    "style-loader": "^3.3.1",
     "ts-loader": "^9.4.2",
     "typescript": "^4.9.4",
+    "vue-loader": "^17.0.1",
+    "webpack-cli": "^5.0.1",
     "workbox-webpack-plugin": "^6.5.4"
   }
 }

src/App.vue

@@ -3,7 +3,7 @@
 
   <NcContent
     app-name="memories"
-    v-else
+    v-else-if="false"
     :class="{
       'remove-gap': removeOuterGap,
     }"
@@ -35,10 +35,14 @@
       </div>
     </NcAppContent>
   </NcContent>
+
+  <div class="outer" v-else>
+    <router-view />
+  </div>
 </template>
 
 <script lang="ts">
-import Vue, { defineComponent } from "vue";
+import { defineComponent } from "vue";
 
 import NcContent from "@nextcloud/vue/dist/Components/NcContent";
 import NcAppContent from "@nextcloud/vue/dist/Components/NcAppContent";
@@ -178,7 +182,7 @@ export default defineComponent({
             if (this.metadataComponent) {
               this.metadataComponent.$destroy();
             }
-            this.metadataComponent = new Vue(Metadata as any);
+            this.metadataComponent = new Metadata();
             // Only mount after we have all the info we need
             await this.metadataComponent.update(fileInfo);
             this.metadataComponent.$mount(el);

src/components/Timeline.vue

@@ -8,7 +8,7 @@
     <TopMatter ref="topmatter" />
 
     <!-- No content found and nothing is loading -->
-    <NcEmptyContent
+    <!-- <NcEmptyContent
       title="Nothing to show here"
       :description="emptyViewDescription"
       v-if="loading === 0 && list.length === 0"
@@ -18,7 +18,7 @@
         <ArchiveIcon v-else-if="routeIsArchive" />
         <ImageMultipleIcon v-else />
       </template>
-    </NcEmptyContent>
+    </NcEmptyContent> -->
 
     <!-- Main recycler view for rows -->
     <RecycleScroller
@@ -39,7 +39,10 @@
       <template #before>
         <!-- Show dynamic top matter, name of the view -->
         <div class="recycler-before" ref="recyclerBefore">
-          <div class="text" v-show="!$refs.topmatter.type && list.length > 0">
+          <div
+            class="text"
+            v-show="!(<any>$refs.topmatter)?.type && list.length > 0"
+          >
             {{ viewName }}
           </div>
 

src/main.ts

@@ -1,7 +1,7 @@
 /// <reference types="@nextcloud/typings" />
 
 import "reflect-metadata";
-import Vue from "vue";
+import { createApp } from "vue";
 import VueVirtualScroller from "vue-virtual-scroller";
 import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
 import GlobalMixin from "./mixins/GlobalMixin";
@@ -9,14 +9,14 @@ import UserConfig from "./mixins/UserConfig";
 
 import App from "./App.vue";
 import router from "./router";
-import { Route } from "vue-router";
 import { generateFilePath } from "@nextcloud/router";
 import { getRequestToken } from "@nextcloud/auth";
-import { IPhoto } from "./types";
+import type { IPhoto } from "./types";
+import type { RouteLocationNormalizedLoaded } from "vue-router";
 
 // Global exposed variables
 declare global {
-  var vueroute: () => Route;
+  var vueroute: () => RouteLocationNormalizedLoaded;
   var OC: Nextcloud.v24.OC;
   var OCP: Nextcloud.v24.OCP;
 
@@ -36,7 +36,7 @@ declare global {
 }
 
 // Allow global access to the router
-globalThis.vueroute = () => router.currentRoute;
+globalThis.vueroute = () => router.currentRoute.value;
 
 // Cache these for better performance
 globalThis.windowInnerWidth = window.innerWidth;
@@ -67,10 +67,6 @@ if (!globalThis.videoClientIdPersistent) {
   );
 }
 
-Vue.mixin(GlobalMixin);
-Vue.mixin(UserConfig);
-Vue.use(VueVirtualScroller);
-
 // https://github.com/nextcloud/photos/blob/156f280c0476c483cb9ce81769ccb0c1c6500a4e/src/main.js
 // TODO: remove when we have a proper fileinfo standalone library
 // original scripts are loaded from
@@ -91,8 +87,12 @@ window.addEventListener("DOMContentLoaded", () => {
   );
 });
 
-export default new Vue({
-  el: "#content",
-  router,
-  render: (h) => h(App),
-});
+const Vue = createApp(App);
+Vue.use(router);
+Vue.use(VueVirtualScroller);
+
+Vue.mixin(GlobalMixin);
+Vue.mixin(UserConfig);
+
+Vue.mount("#content");
+export default Vue;

src/router.ts

@@ -1,16 +1,13 @@
 import { generateUrl } from "@nextcloud/router";
 import { translate as t, translatePlural as n } from "@nextcloud/l10n";
-import Router from "vue-router";
-import Vue from "vue";
+import { createRouter, createWebHistory } from "vue-router";
 import Timeline from "./components/Timeline.vue";
 
-Vue.use(Router);
-
-export default new Router({
-  mode: "history",
+export default createRouter({
   // if index.php is in the url AND we got this far, then it's working:
   // let's keep using index.php in the url
-  base: generateUrl("/apps/memories"),
+  history: createWebHistory(generateUrl("/apps/memories")),
+
   linkActiveClass: "active",
   routes: [
     {
@@ -107,8 +104,8 @@ export default new Router({
       path: "/maps",
       name: "maps",
       // router-link doesn't support external url, let's force the redirect
-      beforeEnter() {
-        window.open(generateUrl("/apps/maps"), "_blank");
+      redirect() {
+        return generateUrl("/apps/maps");
       },
     },
 

tsconfig.json

@@ -12,6 +12,6 @@
     "esModuleInterop": true
   },
   "vueCompilerOptions": {
-    "target": 2.7
+    "target": 3
   }
 }

webpack-base.js

@@ -0,0 +1,144 @@
+/**
+ * @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+const path = require("path");
+const webpack = require("webpack");
+
+const { VueLoaderPlugin } = require("vue-loader");
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+
+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");
+
+const rules = {
+  RULE_CSS: {
+    test: /\.css$/,
+    use: ["style-loader", "css-loader"],
+  },
+  RULE_SCSS: {
+    test: /\.scss$/,
+    use: ["style-loader", "css-loader", "sass-loader"],
+  },
+  RULE_VUE: {
+    test: /\.vue$/,
+    loader: "vue-loader",
+  },
+  RULE_JS: {
+    test: /\.js$/,
+    loader: "babel-loader",
+    exclude: /node_modules/,
+  },
+  RULE_ASSETS: {
+    test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf)$/,
+    type: "asset/inline",
+  },
+};
+
+module.exports = {
+  target: "web",
+  mode: buildMode,
+  devtool: isDev ? "cheap-source-map" : "source-map",
+
+  entry: {
+    main: path.resolve(path.join("src", "main.js")),
+  },
+  output: {
+    path: path.resolve("./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}`;
+    },
+  },
+
+  devServer: {
+    hot: true,
+    host: "127.0.0.1",
+    port: 3000,
+    client: {
+      overlay: false,
+    },
+    devMiddleware: {
+      writeToDisk: true,
+    },
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+  },
+
+  cache: !isDev,
+
+  optimization: {
+    chunkIds: "named",
+    splitChunks: {
+      automaticNameDelimiter: "-",
+    },
+    minimize: !isDev,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          output: {
+            comments: false,
+          },
+        },
+        extractComments: true,
+      }),
+    ],
+  },
+
+  module: {
+    rules: Object.values(rules),
+  },
+
+  plugins: [
+    new VueLoaderPlugin(),
+
+    // 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(),
+
+    // Make appName & appVersion available as a constant
+    new webpack.DefinePlugin({ appName: JSON.stringify(appName) }),
+    new webpack.DefinePlugin({ appVersion: JSON.stringify(appVersion) }),
+  ],
+
+  resolve: {
+    extensions: ["*", ".js", ".vue"],
+    symlinks: false,
+  },
+};

webpack.js

@@ -1,4 +1,4 @@
-const webpackConfig = require('@nextcloud/webpack-vue-config')
+const webpackConfig = require('./webpack-base')
 const WorkboxPlugin = require('workbox-webpack-plugin')
 const path = require('path')
 
@@ -14,9 +14,6 @@ webpackConfig.module.rules.push({
     },
 });
 webpackConfig.resolve.extensions.push('.ts');
-webpackConfig.resolve.alias = {
-    'vue$': 'vue/dist/vue.esm.js',
-}
 webpackConfig.entry.main = path.resolve(path.join('src', 'main'));
 
 webpackConfig.watchOptions = {
@@ -24,11 +21,13 @@ webpackConfig.watchOptions = {
     aggregateTimeout: 300,
 };
 
-webpackConfig.plugins.push(
-    new WorkboxPlugin.InjectManifest({
-        swSrc: path.resolve(path.join('src', 'service-worker.js')),
-        swDest: 'memories-service-worker.js',
-    })
-);
+if (!isDev) {
+    webpackConfig.plugins.push(
+        new WorkboxPlugin.InjectManifest({
+            swSrc: path.resolve(path.join('src', 'service-worker.js')),
+            swDest: 'memories-service-worker.js',
+        })
+    );
+}
 
 module.exports = webpackConfig