@bakery-framework/plugin-vue 2.2.1 → 2.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakery-framework/plugin-vue",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "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.2.2"
   },
   "engines": {
     "bun": ">=1.4.0"

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>