@bakery-framework/plugin-vue 2.2.1 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakery-framework/plugin-vue",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Bakery vue plugin.",
   "keywords": [
     "bakery",
@@ -43,7 +43,7 @@
     "vue": "^3.5.38"
   },
   "dependencies": {
-    "@bakery-framework/core": "^2.2.1"
+    "@bakery-framework/core": "^2.3.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

@@ -32,7 +32,7 @@ import {
   parseVue,
   vueBuildVariant,
 } from './compile'
-import { VUE_HTML_SHELL } from './shell'
+import { declaresViewport, VIEWPORT_META, VUE_HTML_SHELL } from './shell'
 import type { ParsedCacheEntry, VueMeta } from './types'
 import {
   cacheDir,
@@ -709,6 +709,12 @@ export class VueHandler extends DynamicHandler {
       () => serverDecl + moduleDecl + routeDecl,
     )
 
+    // An app's own viewport, through `head`, would lose to the shell's: see
+    // `declaresViewport`.
+    if (declaresViewport(Bakery.config.head)) {
+      hydrated = hydrated.replace(VIEWPORT_META, '')
+    }
+
     // Static markup, injected verbatim. See parseSkeleton for why it is
     // never rendered. mount() replaces the container children, so it
     // disappears the moment the real component is up.

package/src/shell.ts

@@ -1,9 +1,30 @@
+/**
+ * The page's default viewport. Without one a phone lays the page out 980 px
+ * wide and no `max-width` media query applies (measured in Chrome under 390 px
+ * emulation: `innerWidth` 980, and 390 with this tag).
+ */
+export const VIEWPORT_META =
+  '<meta name="viewport" content="width=device-width, initial-scale=1">'
+
+/**
+ * Whether `head` markup declares a viewport of its own.
+ *
+ * The host's `head` is spliced in right after `<head>`, ahead of the shell's
+ * own tags, and of two viewport metas Chrome honors the later one (measured:
+ * `width=600` after `device-width` reads 600, before it 390). So the default
+ * above would override an app's own, and the handler drops it instead.
+ */
+export function declaresViewport(head: string | undefined): boolean {
+  return !!head && /<meta\b[^>]*\sname\s*=\s*["']?viewport\b/i.test(head)
+}
+
 export const VUE_HTML_SHELL = `
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
   <meta charset="UTF-8">
+  ${VIEWPORT_META}
   <title>Vue App</title>
   /*__SERVER_VARIABLES__*/
 </head>