@bakery-framework/plugin-vue 2.1.0 → 2.1.2

package/package.json

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

package/src/handler.ts

@@ -15,6 +15,7 @@ import {
   JsonResponseData,
   response,
   toHash,
+  Try,
 } from '@bakery-framework/core/utils'
 import { ETag, injectIfHtml } from '@bakery-framework/core/utils/http'
 
@@ -44,6 +45,7 @@ import {
   parseVueMeta,
   RX_EXPORT_BRACE,
   RX_EXPORT_HANGING,
+  absolutizeRelativeImports,
   rewriteVueImports,
   VUE_SERVER_DATA_TOKEN,
 } from './utils'
@@ -52,6 +54,16 @@ function normalizePath(path: string) {
   return path.endsWith('.js') ? path.slice(0, -3) : path
 }
 
+/**
+ * Whether a request names the route's file itself, rather than reaching it
+ * through a route parameter. Decoded, because an import of a bracketed file
+ * arrives percent-encoded (`absolutizeRelativeImports`).
+ */
+function requestNamesFile(path: string, routePath: string): boolean {
+  const requested = Try.return(() => decodeURIComponent(path), path)
+  return requested === routePath.replace(/\\/g, '/')
+}
+
 const RX_SERVER_DATA_TOKEN = new RegExp(`\\b${VUE_SERVER_DATA_TOKEN}\\b`, 'g')
 
 /**
@@ -434,6 +446,10 @@ export class VueHandler extends DynamicHandler {
     if (code.includes('.vue"') || code.includes(".vue'")) {
       code = rewriteVueImports(code)
     }
+    // After the `.vue` rewrite, which only appends a query and leaves the
+    // specifier relative. See `absolutizeRelativeImports` for why relative
+    // imports cannot survive into the browser.
+    code = absolutizeRelativeImports(code, routePath)
 
     if (serverDataReplacement !== undefined) {
       code = code.replace(RX_SERVER_DATA_TOKEN, () => serverDataReplacement)
@@ -726,6 +742,19 @@ async function sharedHandler(
     accept.includes('text/javascript') ||
     req.headers.get('sec-fetch-dest') === 'script'
 
+  // An import of some other file that reached this page only through a route
+  // parameter: `/admin/faculty/pages/dashboard.vue?__vue_script=module`
+  // matched by `admin/[...slug].vue`. It was answered with this page's own
+  // script, a 200 the browser took for the module it asked for, and that is
+  // what kept a whole class of wrong import URLs out of sight. Refused now.
+  // The page's own root script and stylesheet still answer at its URL: that
+  // is where 2.0.4 links them (`__vue_script=root`, `__vue_css`).
+  const isImport =
+    vueScriptParam === 'module' || (vueScriptParam === null && isScript)
+  if (isImport && !requestNamesFile(path, routePath)) {
+    return response.error('Not Found', 404)
+  }
+
   const parsed = await VueHandler.parseVueFile(
     id,
     diskFile,

package/src/utils.ts

@@ -635,6 +635,35 @@ export async function getServerResponse(options: ServerResponseOptions) {
   }
 }
 
+/** A relative specifier in a static import, an export-from or a dynamic import. */
+const RX_RELATIVE_SPECIFIER =
+  /((?:\bfrom|\bimport)\s*\(?\s*)(['"])(\.{1,2}\/[^'"]*)\2/g
+
+/**
+ * Relative specifiers made absolute from the file's own place under the
+ * serve root, so a script resolves the same however deep the URL it was
+ * served from.
+ *
+ * A browser resolves a relative import against the importing script's URL.
+ * Since 2.0.4 a dynamic page's root script is served at the page's URL, which
+ * shares the source file's directory only one segment deep: at
+ * `/admin/faculty/add` the root script of `admin/[...slug].vue` resolved
+ * `../shared/usePath` to `/admin/shared/usePath`. Absolute, every file has one
+ * URL, which is also what keeps a module from loading twice under two names.
+ *
+ * Brackets are percent-encoded: a requested name is read as a glob, where a
+ * bare `[id]` is a character class and never matches the file of that name.
+ */
+export function absolutizeRelativeImports(code: string, routePath: string): string {
+  const base = `http://bakery.invalid${routePath.replace(/\\/g, '/')}`
+  return code.replace(RX_RELATIVE_SPECIFIER, (match, lead: string, quote: string, spec: string) => {
+    const url = Try.return(() => new URL(spec, base), null)
+    if (!url) return match
+    const path = url.pathname.replaceAll('[', '%5B').replaceAll(']', '%5D')
+    return `${lead}${quote}${path}${url.search}${url.hash}${quote}`
+  })
+}
+
 export function rewriteVueImports(code: string): string {
   return code.replace(
     RX_IMPORT_VUE_FILE,