@bakery-framework/plugin-vue 2.2.0 → 2.2.2

package/package.json

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

package/src/compile.ts

@@ -138,15 +138,14 @@ export async function compileScriptBlock(
     }
   }
 
-  if (descriptor.script && descriptor.scriptSetup) {
-    const scriptLang = descriptor.script.lang || descriptor.script.attrs?.lang
-    if (scriptLang === 'ts') {
-      // If the script block is TypeScript, we need to compile it first before passing it to the Vue compiler
-      const compiledScript = await compileText(descriptor.script.content)
-      descriptor.script.content = compiledScript
-    }
-  }
-
+  // The blocks go to Vue as written, TypeScript included: `compileScript`
+  // reads TypeScript, and `compileText` below takes the types out of what it
+  // returns. A plain `<script lang="ts">` beside `<script setup>` used to be
+  // transpiled first and written back into `descriptor.script.content`, but
+  // Vue edits the whole file by the block's original offsets, so a rewritten
+  // block put its edits in the wrong places: an `export default` of options
+  // came out as `returnconst __default__ = MIT)` over the lines around it,
+  // and the module failed to parse.
   const { compileScript } = await loadCompiler()
   const result = compileScript(descriptor, {
     id,

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,
@@ -351,11 +351,17 @@ export async function componentScript(options: {
     code = code.replace(RX_SERVER_DATA_TOKEN, () => serverData)
   }
 
+  // One element per component, holding every block, joined as `componentCss`
+  // joins them for a page. The element is per component so a module evaluated
+  // again replaces its styles rather than stacking a second copy; writing each
+  // block into it in turn, as this did, kept only the last block.
   if (!isRootScript) {
-    for (const style of compiled.styles) {
-      if (style.code) {
-        code += `;\n(function(){var k='__vu_css_${id}';var s=document.getElementById(k)||(function(){var el=document.createElement('style');el.id=k;document.head.appendChild(el);return el})();s.textContent=${JSON.stringify(style.code)}})()`
-      }
+    const css = compiled.styles
+      .map(style => style.code)
+      .filter(Boolean)
+      .join('\n\n')
+    if (css) {
+      code += `;\n(function(){var k='__vu_css_${id}';var s=document.getElementById(k)||(function(){var el=document.createElement('style');el.id=k;document.head.appendChild(el);return el})();s.textContent=${JSON.stringify(css)}})()`
     }
   }
 
@@ -703,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>