From be0f8f55a51f9149e716f81a1c369bc32988bc46 Mon Sep 17 00:00:00 2001 From: Chris Amico Date: Thu, 7 Dec 2023 18:05:13 -0500 Subject: [PATCH] Routing seems to work. Needs more testing. --- src/Main.svelte | 2 +- src/manager/documents.js | 3 +- src/router/router.js | 9 ++++- src/router/routes.js | 79 ++++++++++++++++++++++++---------------- src/viewer/layout.js | 5 ++- src/viewer/viewer.js | 42 ++++++++++----------- 6 files changed, 82 insertions(+), 58 deletions(-) diff --git a/src/Main.svelte b/src/Main.svelte index 83e120efb..17fc5114e 100644 --- a/src/Main.svelte +++ b/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(() => { diff --git a/src/manager/documents.js b/src/manager/documents.js index 2054e71fe..6bd0ec6e5 100644 --- a/src/manager/documents.js +++ b/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)) diff --git a/src/router/router.js b/src/router/router.js index d556480c1..71a11cf1e 100644 --- a/src/router/router.js +++ b/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); }); diff --git a/src/router/routes.js b/src/router/routes.js index f84996fc8..7eeb9d6c8 100644 --- a/src/router/routes.js +++ b/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, + ); + }, }, }; } diff --git a/src/viewer/layout.js b/src/viewer/layout.js index 6c2dd73bc..86e89f661 100644 --- a/src/viewer/layout.js +++ b/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); diff --git a/src/viewer/viewer.js b/src/viewer/viewer.js index fe831f557..039d70ab7 100644 --- a/src/viewer/viewer.js +++ b/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;