Routing seems to work. Needs more testing.

src/Main.svelte

@@ -6,7 +6,6 @@
   import { isLoading } from "svelte-i18n";
 
   import Empty from "./pages/home/Empty.svelte";
-  import NotFound from "./pages/NotFound.svelte";
 
   import { currentUrl, resolvedRoute } from "./router/router.js";
   import { getCurrentUrl } from "./util/url.js";
@@ -19,6 +18,7 @@
     ($resolvedRoute || { component: Empty }).component || Empty;
   $: routeProps = ($resolvedRoute || { props: [] }).props || {};
 
+  $: console.log($currentUrl);
   $: console.log($resolvedRoute);
 
   onMount(() => {

src/manager/documents.js

@@ -1,4 +1,5 @@
 import { Svue } from "svue";
+import { get } from "svelte/store";
 
 import {
   getDocumentsWithIds,
@@ -71,7 +72,7 @@ export const documents = new Svue({
   computed: {
     staticMode(resolvedRoute) {
       // Applies when in embed or dialog
-      const route = resolvedRoute;
+      const route = get(resolvedRoute);
       if (route == null) return true;
       if (route.name == "project") return true; // project embeds are static
       if (route.props != null && truthyParamValue(route.props.embed))

src/router/router.js

@@ -34,6 +34,9 @@ const mapping = Object.entries(routes).reduce((map, [name, route]) => {
 // internal
 const router = rlite(() => ({ component: NotFound }), mapping);
 
+// debug
+window.router = router;
+
 export const currentUrl = writable("");
 export const backNav = writable(false);
 
@@ -42,9 +45,11 @@ const pastUrl = writable("");
 export const resolvedRoute = derived(currentUrl, async ($currentUrl, set) => {
   // if ($currentUrl == null) return null;
   const resolved = resolve($currentUrl);
-  if (resolved.component == null && resolved.get != null) {
-    await Promise.resolve(resolved.get());
+
+  if (!resolved.component) {
+    resolved.component = await resolved.get();
   }
+
   set(resolved);
 });
 

src/router/routes.js

@@ -1,72 +1,89 @@
-import {
-  loadDefault,
-  loadHome,
-  loadApp,
-  loadViewer,
-  loadNote,
-  loadPage,
-  loadProject,
-  loadLegacyRedirect,
-  loadEntities,
-} from "./lazyComponent.js";
+import Empty from "../pages/home/Empty.svelte";
 
 export default function route(lazyComponent) {
   return {
     default: {
       path: "/",
-      component: lazyComponent.default,
-      get: loadDefault,
+      component: Empty,
     },
     home: {
       path: "/home",
-      component: lazyComponent.home,
-      get: loadHome,
+      get() {
+        return import("../pages/home/Home.svelte").then(
+          (module) => module.default,
+        );
+      },
+      component: null, // set by get
     },
     app: {
       path: "/app",
-      component: lazyComponent.app,
-      get: loadApp,
+      get() {
+        return import("../pages/app/App.svelte").then(
+          (module) => module.default,
+        );
+      },
     },
 
     viewer: {
       path: "/documents/:id",
-      component: lazyComponent.viewer,
-      get: loadViewer,
+      get() {
+        return import("../pages/viewer/Viewer.svelte").then(
+          (module) => module.default,
+        );
+      },
     },
     entity: {
       path: "/entities/:id",
-      component: lazyComponent.entities,
-      get: loadEntities,
+      get() {
+        return import("../pages/entities/Entities.svelte").then(
+          (module) => module.default,
+        );
+      },
     },
 
     // Embeds
     note: {
       path: "/documents/:id/annotations/:noteId",
-      component: lazyComponent.note,
-      get: loadNote,
+      get() {
+        return import("../pages/embed/note/Note.svelte").then(
+          (module) => module.default,
+        );
+      },
     },
     page: {
       path: "/documents/:id/pages/:page",
-      component: lazyComponent.page,
-      get: loadPage,
+      get() {
+        return import("../pages/embed/page/Page.svelte").then(
+          (module) => module.default,
+        );
+      },
     },
     project: {
       path: "/projects/:projectEmbedId",
-      component: lazyComponent.project,
-      get: loadProject,
+      get() {
+        return import("../pages/embed/project/Project.svelte").then(
+          (module) => module.default,
+        );
+      },
     },
 
     // Legacy
     search: {
       path: "/search/*query",
-      component: lazyComponent.legacyRedirect,
-      get: loadLegacyRedirect,
+      get() {
+        return import("@/pages/legacy/Redirect.svelte").then(
+          (module) => module.default,
+        );
+      },
     },
 
     publicSearch: {
       path: "/public/search/*query",
-      component: lazyComponent.legacyRedirect,
-      get: loadLegacyRedirect,
+      get() {
+        return import("@/pages/legacy/Redirect.svelte").then(
+          (module) => module.default,
+        );
+      },
     },
   };
 }

src/viewer/layout.js

@@ -233,11 +233,12 @@ export const layout = new Svue({
 });
 
 resolvedRoute.subscribe((route) => {
+  if (!layout) return;
   if (route != null && route.name != "viewer") {
     reset();
   } else if (route != null && route.name == "viewer") {
-    layout.embed = inIframe() || truthyParamValue(route.props.embed);
-    layout.title = !this.embed || truthyParamValue(route.props.title);
+    layout.embed = inIframe() || truthyParamValue(route?.props?.embed);
+    layout.title = !layout.embed || truthyParamValue(route.props.title);
     layout.hideTextOption = falsyParamValue(route.props.text);
     layout.hidePdfLink = falsyParamValue(route.props.pdf);
     layout.showOrg = truthyParamValue(route.props.onlyshoworg);

src/viewer/viewer.js

@@ -43,27 +43,6 @@ export const viewer = new Svue({
     };
   },
   watch: {
-    resolvedRoute() {
-      const route = get(resolvedRoute);
-      if (route != null && route.name == "viewer" && route.props != null) {
-        this.id = extractId(route.props.id);
-        if (route.props.embed == "1") {
-          this.embed = true;
-        } else {
-          this.embed = inIframe();
-        }
-        if (viewerInitCache[this.id] == null) {
-          initViewer(this.id);
-          viewerInitCache[this.id] = true;
-        }
-        return;
-      }
-      if (route != null && route.name != "viewer") {
-        // Reset cache and document
-        viewerInitCache = {};
-        this.document = null;
-      }
-    },
     document() {
       if (this.document != null && this.document.editAccess) {
         loadViewerEditDialogs();
@@ -179,6 +158,27 @@ export const viewer = new Svue({
   },
 });
 
+resolvedRoute.subscribe((route) => {
+  if (route != null && route.name == "viewer" && route.props != null) {
+    viewer.id = extractId(route.props.id);
+    if (route.props.embed == "1") {
+      viewer.embed = true;
+    } else {
+      viewer.embed = inIframe();
+    }
+    if (viewerInitCache[viewer.id] == null) {
+      initViewer(viewer.id);
+      viewerInitCache[viewer.id] = true;
+    }
+    return;
+  }
+  if (route != null && route.name != "viewer") {
+    // Reset cache and document
+    viewerInitCache = {};
+    viewer.document = null;
+  }
+});
+
 export function updateNote(note) {
   viewer.notes = viewer.notes.map((oldNote) => {
     if (oldNote.id == note.id) return note;