@bakery-framework/plugin-vue 2.2.2 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakery-framework/plugin-vue",
-  "version": "2.2.2",
+  "version": "2.4.0",
   "description": "Bakery vue plugin.",
   "keywords": [
     "bakery",
@@ -43,7 +43,7 @@
     "vue": "^3.5.38"
   },
   "dependencies": {
-    "@bakery-framework/core": "^2.2.2"
+    "@bakery-framework/core": "^2.4.0"
   },
   "engines": {
     "bun": ">=1.4.0"

package/src/client.ts

@@ -45,6 +45,12 @@ type StampedRoute = {
 export type LayoutNavigation = {
   /** Path segments under the base: `[]` on the bare directory. */
   readonly segments: Ref<string[]>
+  /**
+   * The query string, as `location.search` spells it: `''`, or `?` and the
+   * pairs. Updated with every navigation, a query-only one included, which
+   * changes no segment.
+   */
+  readonly search: Ref<string>
   /** The URL prefix this page owns. */
   readonly base: string
   /** Navigate within the subtree; segments or a path, `/`-prefixed or not. */
@@ -63,18 +69,39 @@ export type LayoutListener = (
   cause: 'click' | 'navigate' | 'history',
 ) => boolean | undefined | void
 
+/**
+ * `path` without its query and hash: the part a route is matched on. A link
+ * to `/campus/ma/students?standing=pending` used to keep its query in the
+ * last segment and render a page named `students?standing=pending`.
+ */
+function pathOnly(path: string): string {
+  const cut = path.search(/[?#]/)
+  return cut < 0 ? path : path.slice(0, cut)
+}
+
 /** Is `path` the base itself or inside it? Prefix-safe: `/admin` ≠ `/admini`. */
 export function isUnderBase(base: string, path: string): boolean {
-  if (base === '') return path.startsWith('/')
-  return path === base || path.startsWith(`${base}/`)
+  const pathname = pathOnly(path)
+  if (base === '') return pathname.startsWith('/')
+  return pathname === base || pathname.startsWith(`${base}/`)
 }
 
 /** The segments of `path` below `base`: `[]` for the base itself. */
 export function segmentsUnder(base: string, path: string): string[] {
-  const rest = base === '' ? path : path.slice(base.length)
+  const pathname = pathOnly(path)
+  const rest = base === '' ? pathname : pathname.slice(base.length)
   return rest.split('/').filter(Boolean)
 }
 
+/** The query of `path`, `''` when it has none, as `location.search` has it. */
+function searchOf(path: string): string {
+  const hash = path.indexOf('#')
+  const head = hash < 0 ? path : path.slice(0, hash)
+  const query = head.indexOf('?')
+  // A bare `?` is no query: `location.search` reads `''` for it.
+  return query < 0 || query === head.length - 1 ? '' : head.slice(query)
+}
+
 function pathFor(base: string, to: string | string[]): string {
   if (Array.isArray(to)) {
     const joined = to.filter(Boolean).join('/')
@@ -110,11 +137,11 @@ export function defineLayout(): LayoutNavigation {
     return next.length > 0 && claimed.has(next[0])
   }
 
-  const initial =
-    typeof location !== 'undefined'
-      ? segmentsUnder(base, location.pathname)
-      : []
-  const segments = ref<string[]>(initial)
+  const here = typeof location !== 'undefined'
+  const segments = ref<string[]>(
+    here ? segmentsUnder(base, location.pathname) : [],
+  )
+  const search = ref(here ? location.search : '')
 
   function fire(next: string[], cause: Parameters<LayoutListener>[2]): boolean {
     const prev = segments.value
@@ -141,8 +168,11 @@ export function defineLayout(): LayoutNavigation {
       return
     }
     if (!fire(next, cause)) return
+    // The whole path goes into history, query and hash included: a reload
+    // has to land on the same view.
     if (typeof history !== 'undefined') history.pushState(null, '', path)
     segments.value = next
+    search.value = searchOf(path)
   }
 
   if (typeof document !== 'undefined') {
@@ -167,12 +197,14 @@ export function defineLayout(): LayoutNavigation {
         url.pathname === location.pathname &&
         url.search === location.search
       ) {
+        // Only the hash differs: the browser's own same-document scroll.
+        if (url.hash && url.hash !== location.hash) return
         event.preventDefault()
         return
       }
 
       event.preventDefault()
-      go(url.pathname + url.search, 'click')
+      go(url.pathname + url.search + url.hash, 'click')
     })
 
     window.addEventListener('popstate', () => {
@@ -190,11 +222,13 @@ export function defineLayout(): LayoutNavigation {
       }
       fire(next, 'history') // observable, not cancellable. See `on`
       segments.value = next
+      search.value = location.search
     })
   }
 
   return {
     segments,
+    search,
     base,
     navigate: to => go(to, 'navigate'),
     on(listener) {

package/src/handler.ts

@@ -2,6 +2,7 @@ import { readdirSync } from 'node:fs'
 import { LRUCache } from '@bakery-framework/core/cache/lru'
 import { Bakery, hostKey } from '@bakery-framework/core/core/bakery'
 import type { Handler } from '@bakery-framework/core/handlers'
+import { routeOf } from '@bakery-framework/core/router'
 import {
   beginPageRoute,
   DynamicErrorHandler,
@@ -991,8 +992,11 @@ async function sharedHandler(
 
   // `base` is the URL prefix the page owns: the file's directory. For
   // `wiki/[...page!].vue` that is `/wiki`; for a root-level catch-all it is
-  // the empty string, which `defineLayout` treats as "everything".
+  // the empty string, which `defineLayout` treats as "everything". On a host
+  // that serves `/wiki` at its root, it is spelled the way that host's URLs
+  // are: see `baseOnHost`.
   const catchAll = Boolean(info.catchAll)
+  const routed = routeOf(req)
   return VueHandler.handleHtml(
     id,
     finalParams,
@@ -1001,7 +1005,10 @@ async function sharedHandler(
     parsed,
     {
       catchAll,
-      base: routePath.slice(0, routePath.lastIndexOf('/')),
+      base: baseOnHost(
+        routePath.slice(0, routePath.lastIndexOf('/')),
+        routed.mount,
+      ),
       param: info.params.length ? info.params[info.params.length - 1] : null,
       // Catch-all pages only: `defineLayout()` refuses every other page, so
       // on those the claims would be sibling names published in the HTML with
@@ -1011,11 +1018,29 @@ async function sharedHandler(
     // The page's own URL routes back to this component; see `assetPath`. An
     // error render is the exception: its URL is the one that failed, and it
     // would route to the error, not to the error page's component.
-    errorData ? routePath : url.pathname,
+    //
+    // The URL as the app names it, which on a mounted host is not the one in
+    // the address bar: `/kit/forms` for a page at `/forms`. The stylesheet and
+    // root script requests are not page requests, so the router serves them
+    // from the app's root, where only the app's spelling reaches the page.
+    errorData ? routePath : routed.path,
     built,
   )
 }
 
+/**
+ * `base` as a host serving `mount` at its root spells it: `/kit/forms` is
+ * `/forms` there, and `/kit` itself is `''`, which `defineLayout()` reads as
+ * the whole host. A base outside the mount (a catch-all above it, answering a
+ * path the subtree has no page for) has no spelling without the prefix, and
+ * is left as it is.
+ */
+function baseOnHost(base: string, mount: string | null): string {
+  if (!mount) return base
+  if (base === mount) return ''
+  return base.startsWith(`${mount}/`) ? base.slice(mount.length) : base
+}
+
 /**
  * The exports of the server blocks of the components a built page reaches,
  * keyed by route path, for the page's HTML.