From b4eb26b2f10e41887ae37620ee7cbc75daa82b0c Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Fri, 21 Feb 2020 15:20:00 +0000 Subject: [PATCH] fix rooting to be able to handle appRootPath --- packages/client/src/createApp.js | 6 +++- packages/client/src/index.js | 6 ++-- packages/client/src/render/screenRouter.js | 9 +++--- packages/client/tests/screenRouting.spec.js | 34 +++++++++++++++++++++ packages/client/tests/testAppDef.js | 10 ++++-- 5 files changed, 54 insertions(+), 11 deletions(-) diff --git a/packages/client/src/createApp.js b/packages/client/src/createApp.js index 0a6e8fa380..9cf6757c3b 100644 --- a/packages/client/src/createApp.js +++ b/packages/client/src/createApp.js @@ -45,7 +45,11 @@ export const createApp = ( currentUrl = url } - routeTo = screenRouter(frontendDefinition.screens, onScreenSelected) + routeTo = screenRouter( + frontendDefinition.screens, + onScreenSelected, + frontendDefinition.appRootPath + ) routeTo(currentUrl || window.location.pathname) } diff --git a/packages/client/src/index.js b/packages/client/src/index.js index 54b5aecacc..da1c6ca91e 100644 --- a/packages/client/src/index.js +++ b/packages/client/src/index.js @@ -23,14 +23,14 @@ export const loadBudibase = async (opts) => { temp: false, } - const rootPath = + frontendDefinition.appRootPath = frontendDefinition.appRootPath === "" ? "" : "/" + trimSlash(frontendDefinition.appRootPath) if (!componentLibraries) { - const componentLibraryUrl = lib => rootPath + "/" + trimSlash(lib) + const componentLibraryUrl = lib => frontendDefinition.appRootPath + "/" + trimSlash(lib) componentLibraries = {} for (let lib of frontendDefinition.componentLibraries) { @@ -52,7 +52,7 @@ export const loadBudibase = async (opts) => { ) const route = _window.location - ? _window.location.pathname.replace(rootPath, "") + ? _window.location.pathname.replace(frontendDefinition.appRootPath, "") : ""; return { diff --git a/packages/client/src/render/screenRouter.js b/packages/client/src/render/screenRouter.js index ac999e94fe..7feb12b8c0 100644 --- a/packages/client/src/render/screenRouter.js +++ b/packages/client/src/render/screenRouter.js @@ -1,16 +1,17 @@ import regexparam from "regexparam" import { writable } from "svelte/store" -export const screenRouter = (screens, onScreenSelected) => { - const routes = screens.map(s => s.route) +export const screenRouter = (screens, onScreenSelected, appRootPath) => { + const makeRootedPath = url => (appRootPath ? `${appRootPath}/${url}` : url) + + const routes = screens.map(s => makeRootedPath(s.route)) let fallback = routes.findIndex(([p]) => p === "*") if (fallback < 0) fallback = 0 let current function route(url) { - - const _url = url.state || url + const _url = makeRootedPath(url.state || url) current = routes.findIndex( p => p !== "*" && new RegExp("^" + p + "$").test(_url) ) diff --git a/packages/client/tests/screenRouting.spec.js b/packages/client/tests/screenRouting.spec.js index c8d821b815..bb4380196f 100644 --- a/packages/client/tests/screenRouting.spec.js +++ b/packages/client/tests/screenRouting.spec.js @@ -16,6 +16,20 @@ describe("screenRouting", () => { expect(screenRoot.children[0].children[0].innerText).toBe("screen 2") }) + it("should load correct screen, for initial URL, when appRootPath is something", async () => { + const { page, screens } = pageWith3Screens() + const { dom } = await load(page, screens, "/testApp/screen2", "/testApp") + + const rootDiv = dom.window.document.body.children[0] + expect(rootDiv.children.length).toBe(1) + + const screenRoot = rootDiv.children[0] + + expect(screenRoot.children.length).toBe(1) + expect(screenRoot.children[0].children.length).toBe(1) + expect(screenRoot.children[0].children[0].innerText).toBe("screen 2") + }) + it("should be able to route to the correct screen", async () => { const { page, screens } = pageWith3Screens() const { dom, app } = await load(page, screens, "/screen2") @@ -31,6 +45,26 @@ describe("screenRouting", () => { expect(screenRoot.children[0].children[0].innerText).toBe("screen 3") }) + it("should be able to route to the correct screen, when appRootPath is something", async () => { + const { page, screens } = pageWith3Screens() + const { dom, app } = await load( + page, + screens, + "/testApp/screen2", + "/testApp" + ) + + app.routeTo()("/screen3") + const rootDiv = dom.window.document.body.children[0] + expect(rootDiv.children.length).toBe(1) + + const screenRoot = rootDiv.children[0] + + expect(screenRoot.children.length).toBe(1) + expect(screenRoot.children[0].children.length).toBe(1) + expect(screenRoot.children[0].children[0].innerText).toBe("screen 3") + }) + it("should destroy and unsubscribe all components on a screen whe screen is changed", async () => { const { page, screens } = pageWith3Screens() const { app } = await load(page, screens, "/screen2") diff --git a/packages/client/tests/testAppDef.js b/packages/client/tests/testAppDef.js index b9409f0653..0b4e95164c 100644 --- a/packages/client/tests/testAppDef.js +++ b/packages/client/tests/testAppDef.js @@ -1,7 +1,10 @@ import { JSDOM } from "jsdom" import { loadBudibase } from "../src/index" -export const load = async (page, screens = [], url = "/") => { +export const load = async (page, screens, url, appRootPath) => { + screens = screens || [] + url = url || "/" + appRootPath = appRootPath || "" const dom = new JSDOM("", { url: `http://test${url}`, }) @@ -10,7 +13,7 @@ export const load = async (page, screens = [], url = "/") => { autoAssignIds(s.props) } setAppDef(dom.window, page, screens) - addWindowGlobals(dom.window, page, screens, uiFunctions, { + addWindowGlobals(dom.window, page, screens, appRootPath, uiFunctions, { hierarchy: {}, actions: [], triggers: [], @@ -28,6 +31,7 @@ const addWindowGlobals = ( window, page, screens, + appRootPath, uiFunctions, appDefinition ) => { @@ -35,7 +39,7 @@ const addWindowGlobals = ( window["##BUDIBASE_FRONTEND_DEFINITION##"] = { page, screens, - appRootPath: "", + appRootPath, } window["##BUDIBASE_FRONTEND_FUNCTIONS##"] = uiFunctions }