@bakery-framework/plugin-vue 2.4.1 → 2.4.3

package/package.json

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

package/src/actions.ts

@@ -1,5 +1,10 @@
 import { Bakery, hostKey } from '@bakery-framework/core/core/bakery'
-import { fs, response, toHash } from '@bakery-framework/core/utils'
+import {
+  fs,
+  requestOrigin,
+  response,
+  toHash,
+} from '@bakery-framework/core/utils'
 import type { VueMeta } from './types'
 import { collectExportedFunctionNames } from './utils'
 
@@ -33,15 +38,18 @@ export function validateActionRequest(req: Request, url: URL): Response | null {
     return response.error('Server actions require a JSON body', 415)
   }
 
-  const origin = req.headers.get('origin')
-  if (origin && origin !== url.origin) {
-    return response.error('Cross-origin server action rejected', 403)
-  }
-
   const fetchSite = req.headers.get('sec-fetch-site')
   if (fetchSite && fetchSite !== 'same-origin' && fetchSite !== 'none') {
     return response.error('Cross-site server action rejected', 403)
   }
+  // Settled, as in `checkSameOrigin`: behind a proxy that ends TLS, `Origin`
+  // names a scheme this server never saw.
+  if (fetchSite) return null
+
+  const origin = req.headers.get('origin')
+  if (origin && origin !== requestOrigin(req, url)) {
+    return response.error('Cross-origin server action rejected', 403)
+  }
 
   return null
 }

package/src/compile.ts

@@ -1,4 +1,5 @@
 import { compileText } from '@bakery-framework/core/compiler'
+import { Try } from '@bakery-framework/core/utils'
 import type { SFCStyleCompileResults } from '@vue/compiler-sfc'
 
 import type {
@@ -65,6 +66,33 @@ export function setVuePluginOptions(opts?: VuePluginOptions) {
   if (opts) vuePluginOptions = opts
 }
 
+/**
+ * A test of whether an event attribute's value is one JavaScript expression,
+ * asked the way Vue's template compiler asks it: Babel over the value in
+ * parentheses, with the app's `expressionPlugins` and the `typescript` plugin
+ * Vue always adds.
+ *
+ * Vue compiles such a value as written. A function or a member path becomes
+ * the handler itself, and any other expression is wrapped as
+ * `$event => (value)`. `parseVueFile` asks before it appends a `;` to a
+ * multi-line attribute, because the `;` makes Vue compile the value as
+ * statements instead.
+ */
+export async function loadExpressionCheck(): Promise<
+  (value: string) => boolean
+> {
+  const { babelParse } = await loadCompiler()
+  const plugins = [
+    ...(vuePluginOptions.compilerOptions?.expressionPlugins ?? []),
+    'typescript',
+  ]
+  return value =>
+    Try.return(() => {
+      const { body } = babelParse(`(${value})`, { plugins }).program
+      return body.length === 1 && body[0].type === 'ExpressionStatement'
+    }, false)
+}
+
 /**
  * `'runtime'` unless the app opted into the full build.
  *
@@ -95,6 +123,13 @@ export function vuePluginOptionsFingerprint(): string {
   )
 }
 
+/**
+ * Elements no component resolves. `selectedcontent` belongs to the customizable
+ * `<select>`, and Vue's list of HTML tags predates it: compiled as a component,
+ * every page holding one warned in development.
+ */
+const BUILT_IN_ELEMENTS = ['iconify-icon', 'selectedcontent']
+
 export function resolveIsCustomElement(tag: string): boolean {
   const ce = vuePluginOptions?.customElements
   const userFn = vuePluginOptions?.compilerOptions?.isCustomElement
@@ -109,9 +144,7 @@ export function resolveIsCustomElement(tag: string): boolean {
     if (userFn(tag)) return true
   }
 
-  if (tag === 'iconify-icon') return true
-
-  return false
+  return BUILT_IN_ELEMENTS.includes(tag)
 }
 
 export async function parseVue(
@@ -153,7 +186,7 @@ export async function compileScriptBlock(
     hoistStatic: true,
   })
   return {
-    code: await compileText(result.content),
+    code: await compileText(result.content, { file: descriptor.filename }),
     bindings: result.bindings || {},
   }
 }
@@ -238,7 +271,7 @@ export async function compileTemplateBlock(
   // guarantee, so it is the one written down.
   let code = result.code
   code = code.replace(/^export\s+/m, '')
-  code = await compileText(code)
+  code = await compileText(code, { file: filename })
   return { code, errors }
 }
 
@@ -258,10 +291,13 @@ export async function compileStyleBlock(
 export function assembleComponent(options: AssembleComponentOptions): string {
   const { scriptCode, renderCode, isRoot, scopeId, layoutRoute } = options
   const COMPONENT_VAR = '__sfc__'
-  let output = scriptCode.replace(
-    /\bexport\s+default\s*/,
-    `const ${COMPONENT_VAR} = `,
-  )
+  // A plain `<script>` with no `export default` has nothing to rewrite, and
+  // everything below hangs off the variable all the same. Measured: the module
+  // answered 200 and died with `ReferenceError: __sfc__ is not defined`, on a
+  // blank page, with `--build` exiting 0.
+  let output = /\bexport\s+default\b/.test(scriptCode)
+    ? scriptCode.replace(/\bexport\s+default\s*/, `const ${COMPONENT_VAR} = `)
+    : `${scriptCode}\nconst ${COMPONENT_VAR} = {};`
 
   if (renderCode) {
     // No export strip here, deliberately. `compileTemplateBlock` has already
@@ -325,12 +361,15 @@ export function assembleComponent(options: AssembleComponentOptions): string {
  */
 function buildRuntimeCustomElementCheck(): string {
   const ce = vuePluginOptions.customElements
+  const builtIn = JSON.stringify(BUILT_IN_ELEMENTS)
 
   if (typeof ce === 'function') {
-    return `(tag) => { try { return (${ce.toString()})(tag) || tag === 'iconify-icon' } catch { return tag === 'iconify-icon' } }`
+    return `(tag) => { try { return (${ce.toString()})(tag) || ${builtIn}.includes(tag) } catch { return ${builtIn}.includes(tag) } }`
   }
 
-  const tags = [...new Set([...(Array.isArray(ce) ? ce : []), 'iconify-icon'])]
+  const tags = [
+    ...new Set([...(Array.isArray(ce) ? ce : []), ...BUILT_IN_ELEMENTS]),
+  ]
   return `(tag) => ${JSON.stringify(tags)}.includes(tag)`
 }
 

package/src/handler.ts

@@ -30,6 +30,7 @@ import { serveVueChunk, VUE_CHUNK_PREFIX } from './chunks'
 import {
   compileStyleBlock,
   compileVueFile,
+  loadExpressionCheck,
   parseVue,
   vueBuildVariant,
 } from './compile'
@@ -496,6 +497,19 @@ export class VueHandler extends DynamicHandler {
       }
     }
 
+    // A multi-line event attribute with no `;` gets one. Vue reads a value
+    // with no `;` as one expression, so two statements on two lines (as a
+    // formatter with `semi: false` writes them) came out wrapped in
+    // parentheses and failed to compile; with the `;`, Vue compiles the value
+    // as statements.
+    //
+    // Only when the value is not already one expression, which Vue compiles
+    // as written. With a `;` appended, an arrow handler broken across lines
+    // was emitted as `(d) => {…};` inside the render function's props and
+    // the module did not parse, a `function (e) {…}` failed Vue's own
+    // compile, and a member path (`saveDraft`) compiled to a statement that
+    // reads the function and never calls it.
+    const isExpression = await loadExpressionCheck()
     const rxEventAttr =
       /(@[\w.-]+|v-on:[\w.-]+)=("([^"\n]*\n[^"]*)"|'([^'\n]*\n[^']*)')/g
     cleanContent = cleanContent.replace(
@@ -503,7 +517,7 @@ export class VueHandler extends DynamicHandler {
       (match, attr, doubleMatch, innerDouble, innerSingle) => {
         const quote = doubleMatch.startsWith('"') ? '"' : "'"
         const val = innerDouble !== undefined ? innerDouble : innerSingle
-        if (!val.includes(';')) {
+        if (!val.includes(';') && !isExpression(val)) {
           return `${attr}=${quote}${val};${quote}`
         }
         return match