@bakery-framework/plugin-vue 2.5.0-alpha.0 → 2.5.0-alpha.1

package/package.json

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

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.
  *
@@ -153,7 +181,7 @@ async function compileScriptBlock(
     hoistStatic: true,
   })
   return {
-    code: await compileText(result.content),
+    code: await compileText(result.content, { file: descriptor.filename }),
     bindings: result.bindings || {},
   }
 }
@@ -238,7 +266,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 }
 }
 

package/src/handler.ts

@@ -30,6 +30,7 @@ import { serveVueChunk, VUE_CHUNK_PREFIX } from './chunks'
 import {
   compileStyleBlock,
   compileVueFile,
+  loadExpressionCheck,
   parseVue,
   vueBuildVariant,
 } from './compile'
@@ -495,6 +496,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(
@@ -502,7 +516,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