fix rooting to be able to handle appRootPath

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)
   }
 

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 {

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)
     )

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")

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("<!DOCTYPE html><html><body></body><html>", {
     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
 }