It builds but it doesn't work

src/Main.svelte

@@ -6,40 +6,35 @@
   import { isLoading } from "svelte-i18n";
 
   import Empty from "./pages/home/Empty.svelte";
+  import NotFound from "./pages/NotFound.svelte";
 
-  import { router } from "./router/router.js";
-  import { routes } from "./routes.js";
-  import { currentUrl } from "./util/url.js";
+  import { currentUrl, resolvedRoute } from "./router/router.js";
+  import { getCurrentUrl } from "./util/url.js";
   import "./langs/i18n.js";
 
   // Patch poll events
   import "./ticker/ticker.js";
 
-  // Set up routes
-  router.notFound = routes[0];
-  router.routeFunc = routes[1];
-
   $: routeComponent =
-    ($router.resolvedRoute || { component: Empty }).component || Empty;
-  $: routeProps = ($router.resolvedRoute || { props: [] }).props || {};
+    ($resolvedRoute || { component: Empty }).component || Empty;
+  $: routeProps = ($resolvedRoute || { props: [] }).props || {};
+
+  $: console.log($resolvedRoute);
 
   onMount(() => {
-    router.currentUrl = currentUrl();
+    $currentUrl = getCurrentUrl();
     if (!history.state) {
       window.history.replaceState(
-        { path: currentUrl() },
+        { path: getCurrentUrl() },
         "",
         window.location.href,
       );
     }
-
-    // debug
-    window.router = router;
   });
 
   function handleBackNav(e) {
     if (e.state == null) return;
-    router.currentUrl = e.state.path;
+    $currentUrl = e.state.path;
   }
 </script>
 
@@ -48,7 +43,7 @@
 <div>
   {#if $isLoading}
     Please wait...
-  {:else if $router.resolvedRoute != null}
+  {:else if $resolvedRoute != null}
     <svelte:component this={routeComponent} {...routeProps} />
   {/if}
 </div>

src/common/Dropdown.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount, tick, afterUpdate } from "svelte";
-  import { router } from "@/router/router.js";
+  import { resolvedRoute } from "@/router/router.js";
   import emitter from "@/emit.js";
 
   const emit = emitter({
@@ -66,7 +66,7 @@
 
   onMount(async () => {
     await computeSizes();
-    router.writables.resolvedRoute.subscribe(async () => {
+    $resolvedRoute.subscribe(async () => {
       await computeSizes();
     });
 

src/common/HtmlField.svelte

@@ -1,6 +1,6 @@
 <script>
   import { domPurify, loadDompurify } from "@/util/domPurify.js";
-  import { router } from "@/router/router.js";
+  import { resolvedRoute } from "@/router/router.js";
   import { showAnnotation } from "@/viewer/document.js";
   import { viewer } from "@/viewer/viewer.js";
   loadDompurify();
@@ -23,7 +23,7 @@
       $viewer.notes != null &&
       $viewer.notes.length > 0
     ) {
-      const route = router.resolvedRoute;
+      const route = $resolvedRoute;
       if (route != null && route.name == "viewer") {
         // Only inject on viewer routes
         const links = elem.querySelectorAll("a");
@@ -54,7 +54,10 @@
 
     .content {
       margin: 4px $subpadding;
-      font: 13px/18px Georgia, Times, serif;
+      font:
+        13px/18px Georgia,
+        Times,
+        serif;
       cursor: text;
       color: #3c3c3c;
       max-height: 300px;

src/manager/documents.js

@@ -17,7 +17,7 @@ import {
 import { layout, hideAccess } from "./layout.js";
 import { wrapLoad, wrapSeparate } from "@/util/wrapLoad.js";
 import { showConfirm } from "./confirmDialog.js";
-import { router } from "@/router/router.js";
+import { resolvedRoute } from "@/router/router.js";
 import { search, handleUpload, setDocuments } from "@/search/search.js";
 import { removeFromArray, addToArrayIfUnique } from "@/util/array.js";
 import { modifications } from "./modifications.js";
@@ -44,7 +44,7 @@ const PENDING_DOC_ID = "doc_id";
 export const documents = new Svue({
   data() {
     return {
-      router,
+      resolvedRoute,
       search,
       hasInited: false,
       processingChangeTimeout: null,
@@ -54,9 +54,6 @@ export const documents = new Svue({
     };
   },
   watch: {
-    "router.resolvedRoute"() {
-      checkForInit();
-    },
     inDocumentPickerDialog() {
       checkForInit();
     },
@@ -72,9 +69,9 @@ export const documents = new Svue({
     },
   },
   computed: {
-    staticMode(router) {
+    staticMode(resolvedRoute) {
       // Applies when in embed or dialog
-      const route = router.resolvedRoute;
+      const route = resolvedRoute;
       if (route == null) return true;
       if (route.name == "project") return true; // project embeds are static
       if (route.props != null && truthyParamValue(route.props.embed))
@@ -219,8 +216,7 @@ export const documents = new Svue({
   },
 });
 
-function checkForInit() {
-  const route = router.resolvedRoute;
+function checkForInit(route) {
   if (
     route != null &&
     (documents.inDocumentPickerDialog ||
@@ -234,6 +230,9 @@ function checkForInit() {
   }
 }
 
+// side-effect
+resolvedRoute.subscribe(checkForInit);
+
 function getDocumentsByCondition(condition, documents) {
   return documents.filter(condition);
 }

src/manager/layout.js

@@ -1,5 +1,5 @@
 import { Svue } from "svue";
-import { router, setHash, setQS } from "@/router/router.js";
+import { resolvedRoute, setHash, setQS } from "@/router/router.js";
 import { truthyParamValue } from "@/util/url.js";
 import { sameProp } from "@/util/array.js";
 
@@ -14,7 +14,7 @@ const ACCESS_LEVELS = {
 export const layout = new Svue({
   data() {
     return {
-      router,
+      resolvedRoute,
       sidebarExpanded: false,
       loading: true,
       error: false,
@@ -58,11 +58,6 @@ export const layout = new Svue({
       ownerEditDocuments: [],
     };
   },
-  watch: {
-    "router.resolvedRoute"() {
-      this.sidebarExpanded = false;
-    },
-  },
   computed: {
     selected(selectedMap) {
       return Object.values(selectedMap);
@@ -141,15 +136,15 @@ export const layout = new Svue({
     },
 
     // Project embed settings
-    projectEmbedTitle(router) {
-      const route = router.resolvedRoute;
+    projectEmbedTitle(resolvedRoute) {
+      const route = resolvedRoute;
       if (route == null) return null;
       if (route.name != "project") return null;
       if (route.props == null) return null;
       return route.props.title;
     },
-    projectEmbedSearchBar(router) {
-      const route = router.resolvedRoute;
+    projectEmbedSearchBar(resolvedRoute) {
+      const route = resolvedRoute;
       if (route == null) return true;
       if (route.name != "project") return true;
       if (route.props == null) return true;
@@ -158,6 +153,10 @@ export const layout = new Svue({
   },
 });
 
+resolvedRoute.subscribe(() => {
+  layout.sidebarExpanded = false;
+});
+
 /*
  * TODO: Rethink the way layout works and all the exported functions here
  */

src/manager/orgsAndUsers.js

@@ -1,8 +1,8 @@
 import { Svue } from "svue";
-
+import { get } from "svelte/store";
 import { pushToast } from "../common/Toast.svelte";
 
-import { router, pushUrl, nav } from "../router/router.js";
+import { resolvedRoute, pushUrl, nav } from "../router/router.js";
 import {
   getMe,
   changeActiveOrg,
@@ -25,42 +25,16 @@ export const orgsAndUsers = new Svue({
       usersById: {},
       orgsById: {},
       projects,
-      router,
+      resolvedRoute,
       hasInited: false,
       hasInitedProjects: false,
       sameOrgUsers: [],
     };
   },
   watch: {
     // Don't re-request
-    "router.resolvedRoute"() {
-      const route = router.resolvedRoute;
-      if (
-        route != null &&
-        (route.name == "app" || route.name == "home" || route.name == "default")
-      ) {
-        // Initiate orgs and users in the app
-        if (!this.hasInited) {
-          this.hasInited = true;
-          initOrgsAndUsers(() => reroute(route));
-        } else {
-          reroute(route);
-        }
-
-        initProjectsIfNecessary(route);
-        if (
-          route != null &&
-          route.name == "app" &&
-          this.me != null &&
-          !this.hasInitedProjects
-        ) {
-          this.hasInitedProjects = true;
-          initProjects(this.me);
-        }
-      }
-    },
     me() {
-      const route = router.resolvedRoute;
+      const route = get(resolvedRoute);
       initProjectsIfNecessary(route);
     },
   },
@@ -83,6 +57,32 @@ export const orgsAndUsers = new Svue({
   },
 });
 
+resolvedRoute.subscribe((route) => {
+  if (
+    route != null &&
+    (route.name == "app" || route.name == "home" || route.name == "default")
+  ) {
+    // Initiate orgs and users in the app
+    if (!layout.hasInited) {
+      layout.hasInited = true;
+      initOrgsAndUsers(() => reroute(route));
+    } else {
+      reroute(route);
+    }
+
+    initProjectsIfNecessary(route);
+    if (
+      route != null &&
+      route.name == "app" &&
+      layout.me != null &&
+      !layout.hasInitedProjects
+    ) {
+      layout.hasInitedProjects = true;
+      initProjects(layout.me);
+    }
+  }
+});
+
 function reroute(route) {
   if (route == null) return;
   if (route.name == "app" && route.props.q == null) {

src/pages/NotFound.svelte

@@ -5,7 +5,7 @@
   import Link from "../router/Link.svelte";
   import FlatPage from "./FlatPage.svelte";
 
-  import { router } from "../router/router.js";
+  import { currentUrl, resolvedRoute } from "../router/router.js";
   import { baseApiUrl } from "../api/base.js";
 
   export let title = "";
@@ -14,7 +14,7 @@
   let notFound = false;
   let loading;
 
-  $: endpoint = getEndpoint($router.currentUrl);
+  $: endpoint = getEndpoint($currentUrl);
 
   function getEndpoint(currentUrl) {
     const url = new URL("/api/flatpages" + currentUrl, baseApiUrl);
@@ -43,7 +43,7 @@
   }
 
   onMount(async () => {
-    if (router.resolvedRoute.name) {
+    if ($resolvedRoute.name) {
       // Don't try to fetch flat page if it should resolve to a route
       notFound = true;
       return;

src/pages/app/App.svelte

@@ -11,7 +11,7 @@
   import Dispatch from "../../addons/dispatch/Dispatch.svelte";
   import Runs from "../../addons/runs/Runs.svelte";
 
-  import { setHash, router } from "../../router/router.js";
+  import { setHash } from "../../router/router.js";
   import { layout } from "../../manager/layout.js";
   import { orgsAndUsers } from "../../manager/orgsAndUsers.js";
 

src/pages/app/SearchBar.svelte

@@ -9,7 +9,7 @@
     userSearchQuery,
   } from "@/search/search";
   import { showSearchTips } from "@/manager/layout.js";
-  import { router } from "@/router/router.js";
+  import { resolvedRoute } from "@/router/router.js";
   import { _ } from "svelte-i18n";
 
   export let search = "";
@@ -31,9 +31,8 @@
         search = userSearchQuery(searchData.filePickerUser);
       } else {
         unsubscribe = [
-          router.subscribe((router) => {
+          resolvedRoute.subscribe((route) => {
             // Set query from URL if applicable
-            const route = router.resolvedRoute;
             if (route != null && route.name == "app") {
               // Try to fill in regular query if not present
               if (route.props.q != null && route.props.q.length > 0) {

src/pages/entities/Entities.svelte

@@ -5,7 +5,7 @@
   import Link from "@/router/Link.svelte";
   import Progress from "@/common/Progress.svelte";
 
-  import { router } from "@/router/router.js";
+  import { resolvedRoute } from "@/router/router.js";
   import { getDocument } from "@/api/document.js";
   import { extractEntities } from "@/api/entity.js";
   import { jsonUrl } from "@/api/viewer.js";
@@ -108,7 +108,7 @@
   }
 
   onMount(async () => {
-    const id = parseInt(router.resolvedRoute.props.id.split("-")[0]);
+    const id = parseInt($resolvedRoute.props.id.split("-")[0]);
     entities.document = await getDocument(id);
     try {
       entities.entities = await getE(id);
@@ -123,7 +123,7 @@
 
   async function pushPage(url) {
     pagePushed = true;
-    const id = parseInt(router.resolvedRoute.props.id.split("-")[0]);
+    const id = parseInt($resolvedRoute.props.id.split("-")[0]);
     selectedEntity = null;
     entities.entities = await getE(id, url, filter);
   }