@bakery-framework/plugin-vue 1.0.0

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2026 Kyle Cyrus Santos Obille
+
+The Software is provided subject to the standard MIT License, as detailed below, with the addition of the Commons Clause v1.0.
+
+The Commons Clause v1.0
+
+The Software is provided to you by the Licensor under the License, as defined below, subject to the following condition.
+
+Without limiting other conditions in the License, the grant of rights under the License will not include, and the License does not grant to you, the right to Sell the Software.
+
+For purposes of the foregoing, “Sell” means practicing any or all of the rights granted to you under the License to provide to third parties, for a fee or other consideration (including without limitation fees for hosting or consulting/support services related to the Software), a product or service whose value derives, entirely or substantially, from the functionality of the Software. Any license notice or attribution required by the License must also include this Commons Clause License Condition notice.
+
+Standard MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software (subject to the Commons Clause condition above), and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,38 @@
+# @bakery-framework/plugin-vue
+
+Vue single-file components for
+[Bakery](https://github.com/obillekyle/bakery).
+
+```bash
+bun add @bakery-framework/plugin-vue vue
+```
+
+`vue` and `@vue/compiler-sfc` are peer dependencies — installing `vue` brings
+the compiler with it.
+
+## Usage
+
+```ts
+// server.config.ts
+import { defineConfig } from '@bakery-framework/core'
+import vuePlugin from '@bakery-framework/plugin-vue'
+
+export default defineConfig({
+  root: 'src',
+  plugins: [vuePlugin()],
+})
+```
+
+A `.vue` file under `root` then serves as a route, alongside `.tsx` pages.
+Options are typed as `VuePluginOptions`.
+
+## License
+
+MIT with the Commons Clause v1.0 — see [LICENSE](./LICENSE).
+
+**Not an OSI-approved licence.** The Commons Clause removes the right to *sell*
+the software — meaning to charge for a product or service whose value derives
+substantially from it, hosting and support included. Everything else the MIT
+licence grants is unchanged: use it, modify it, ship it inside your own product.
+If your organisation only permits OSI-approved dependencies, this will not pass
+that check.

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@bakery-framework/plugin-vue",
+  "version": "1.0.0",
+  "description": "Bakery vue plugin.",
+  "keywords": [
+    "bakery",
+    "bun",
+    "vue",
+    "sfc",
+    "plugin"
+  ],
+  "author": "obillekyle",
+  "license": "SEE LICENSE IN LICENSE",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/obillekyle/bakery.git",
+    "directory": "packages/plugins/vue"
+  },
+  "homepage": "https://github.com/obillekyle/bakery#readme",
+  "bugs": "https://github.com/obillekyle/bakery/issues",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "!src/**/*.test.ts",
+    "!src/tests"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "@vue/compiler-sfc": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.5.38",
+    "vue": "^3.5.38"
+  },
+  "dependencies": {
+    "@bakery-framework/core": "^1.0.0"
+  },
+  "engines": {
+    "bun": ">=1.3.14"
+  }
+}

package/src/actions.ts

@@ -0,0 +1,118 @@
+import { Bakery, hostKey } from '@bakery-framework/core/core/bakery'
+import { fs, response, toHash } from '@bakery-framework/core/utils'
+import type { VueMeta } from './types'
+import { collectExportedFunctionNames } from './utils'
+
+export interface ActionTarget {
+  id: string
+  lastMod: number
+  filePath: string
+  diskFile: Bun.BunFile
+}
+
+/** The parts of a parsed component this gate reads. */
+export interface ActionTargetInfo {
+  id: string
+  meta: VueMeta
+  serverScript: string
+}
+
+/**
+ * Server actions are state-changing and run with the caller's session, so they
+ * must not be reachable from a cross-site navigation or a simple form/image
+ * request. Requiring POST + JSON puts them outside the set of CORS-simple
+ * requests a foreign page can issue without a preflight.
+ */
+export function validateActionRequest(req: Request, url: URL): Response | null {
+  if (req.method !== 'POST') {
+    return response.error('Server actions require POST', 405)
+  }
+
+  const contentType = req.headers.get('content-type') || ''
+  if (!contentType.includes('application/json')) {
+    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)
+  }
+
+  return null
+}
+
+/**
+ * Gate the component a `__vue_action` request will actually execute.
+ *
+ * `__vue_file` replaces the whole execution target — id, path and server
+ * script — so every check that ran against the *route's* descriptor stopped
+ * describing the code that runs. The route was gated; the target was not, and
+ * `POST /any-public-page?__vue_action=x&__vue_file=admin/Panel.vue` ran
+ * `admin/Panel.vue`'s top-level server code with nothing to justify it.
+ *
+ * A guard: it returns the rejection rather than throwing, and it fails closed
+ * on anything it cannot resolve (convention 2).
+ */
+export function validateActionTarget(
+  target: ActionTargetInfo,
+  routeId: string,
+  actionName: string,
+): Response | null {
+  // A `page-only` component is a page: reachable at its own route and nowhere
+  // else. Naming one in `__vue_file` from a *different* route is the bypass in
+  // its clearest form. `module-only` is deliberately not gated the same way —
+  // a module exists to be embedded in someone else's page, so its actions are
+  // invoked from that page's route by design, and the generated stub does
+  // exactly that.
+  if (target.meta.pageOnly && target.id !== routeId) {
+    return response.error('Not Found', 404)
+  }
+
+  // Resolve the name against the *target's* own exports before a line of it
+  // runs. The generated wrapper checks this too, but the check reached only
+  // after the component's top-level statements had already executed.
+  const actions = collectExportedFunctionNames(target.serverScript).filter(
+    name => name !== 'middleware' && name !== 'default',
+  )
+
+  if (!actions.includes(actionName)) {
+    return response.error('Not Found', 404)
+  }
+
+  return null
+}
+
+/**
+ * Resolve the `__vue_file` parameter to a component inside the serve root.
+ * The value is attacker-controlled, so containment is checked after resolution
+ * rather than by inspecting the raw string.
+ */
+export async function resolveActionTarget(
+  actionFile: string,
+): Promise<ActionTarget | null> {
+  if (!actionFile.endsWith('.vue')) return null
+
+  const root = fs.resolve(Bakery.serveRoot)
+  const resolvedPath = fs.resolve(root, actionFile)
+
+  if (resolvedPath !== root && !resolvedPath.startsWith(`${root}/`)) return null
+  if (fs.isForbidden(resolvedPath, root)) return null
+
+  const diskFile = Bun.file(resolvedPath)
+  if (!(await diskFile.exists())) return null
+
+  // Same derivation as the page path, so one file never gets two cache ids.
+  const relativePath = fs.relative(root, resolvedPath)
+
+  return {
+    id: toHash(hostKey(relativePath)),
+    lastMod: diskFile.lastModified,
+    filePath: resolvedPath,
+    diskFile,
+  }
+}

package/src/chunks.ts

@@ -0,0 +1,66 @@
+import { Bakery } from '@bakery-framework/core/core/bakery'
+import { Logger } from '@bakery-framework/core/logger'
+import { fs, response } from '@bakery-framework/core/utils'
+import { ETag } from '@bakery-framework/core/utils/http'
+import { VUE_VERSION } from './utils'
+
+const logger = new Logger('vue')
+
+export const VUE_CHUNK_PREFIX = '/_vue/'
+
+const BUNDLE_DEFINES = {
+  __VUE_OPTIONS_API__: 'true',
+  __VUE_PROD_DEVTOOLS__: 'false',
+  __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
+}
+
+/** Serves the self-hosted Vue runtime that `Bakery.config.importMap` points at. */
+export async function serveVueChunk(
+  path: string,
+  req: Request,
+): Promise<Response> {
+  if (path !== `${VUE_CHUNK_PREFIX}${VUE_VERSION}.js`) {
+    return response.error('Not Found', 404)
+  }
+
+  const dir = fs.resolve(Bakery.cacheDir, 'vue-official', 'chunks')
+  const fileName = `${VUE_VERSION}.js`
+
+  let sourcePath = ''
+  try {
+    sourcePath = Bun.resolveSync('vue/dist/vue.esm-bundler.js', Bakery.root)
+  } catch {
+    return response.error('Vue not found', 404)
+  }
+  const sourceMtime = Bun.file(sourcePath).lastModified
+
+  const file = await fs.getOrCreateCachedFile(
+    dir,
+    fileName,
+    sourceMtime,
+    async () => {
+      const result = await Bun.build({
+        entrypoints: [sourcePath],
+        target: 'browser',
+        format: 'esm',
+        minify: import.meta.env.PROD,
+        define: BUNDLE_DEFINES,
+      })
+
+      if (!result.success) {
+        logger.log(
+          `Build failed: ${result.logs.map(l => l.message).join('; ')}`,
+          'error',
+        )
+        return null
+      }
+      return result.outputs[0].arrayBuffer()
+    },
+  )
+
+  if (!file) return response.error('Vue chunk not built', 500)
+
+  const res = await ETag.sendFile(file, req)
+  res.headers.set('Cache-Control', 'public, max-age=31536000, immutable')
+  return res
+}

package/src/compile.ts

@@ -0,0 +1,247 @@
+import { compileText } from '@bakery-framework/core/compiler'
+import { Logger } from '@bakery-framework/core/logger'
+import type { SFCStyleCompileResults } from '@vue/compiler-sfc'
+
+const logger = new Logger('vue')
+
+import type {
+  AssembleComponentOptions,
+  CompileScriptOptions,
+  CompileScriptResult,
+  CompileStyleOptions,
+  CompileTemplateOptions,
+  CompileVueFileOptions,
+  CompileVueFileResult,
+  ParseVueOptions,
+  ParseVueResult,
+  VuePluginOptions,
+} from './types'
+
+let compiler: typeof import('@vue/compiler-sfc')
+
+async function loadCompiler() {
+  if (!compiler) {
+    try {
+      compiler = await import('@vue/compiler-sfc')
+    } catch {
+      throw new Error('compiler-sfc not available. Run `bun add vue`.')
+    }
+  }
+  return compiler
+}
+
+let vuePluginOptions: VuePluginOptions = {}
+
+export function setVuePluginOptions(opts?: VuePluginOptions) {
+  if (opts) vuePluginOptions = opts
+}
+
+export function resolveIsCustomElement(tag: string): boolean {
+  const ce = vuePluginOptions?.customElements
+  const userFn = vuePluginOptions?.compilerOptions?.isCustomElement
+
+  if (Array.isArray(ce)) {
+    if (ce.includes(tag)) return true
+  } else if (typeof ce === 'function') {
+    if (ce(tag)) return true
+  }
+
+  if (typeof userFn === 'function') {
+    if (userFn(tag)) return true
+  }
+
+  if (tag === 'iconify-icon') return true
+
+  return false
+}
+
+export async function parseVue(
+  options: ParseVueOptions,
+): Promise<ParseVueResult> {
+  const { content, filename } = options
+  const { parse } = await loadCompiler()
+  const result = parse(content, { filename })
+  return {
+    descriptor: result.descriptor,
+    errors: result.errors.map(e => e.message || String(e)),
+  }
+}
+
+export async function compileScriptBlock(
+  options: CompileScriptOptions,
+): Promise<CompileScriptResult> {
+  const { descriptor, id } = options
+
+  if (!descriptor.script && !descriptor.scriptSetup) {
+    return {
+      code: 'export default {}',
+      bindings: {},
+    }
+  }
+
+  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
+    }
+  }
+
+  const { compileScript } = await loadCompiler()
+  const result = compileScript(descriptor, {
+    id,
+    isProd: !import.meta.env.DEV,
+    hoistStatic: true,
+  })
+  return {
+    code: await compileText(result.content),
+    bindings: result.bindings || {},
+  }
+}
+
+export async function compileTemplateBlock(
+  options: CompileTemplateOptions,
+): Promise<string | null> {
+  const { descriptor, id, filename, bindings } = options
+  if (!descriptor.template) return null
+  const { compileTemplate } = await loadCompiler()
+  const userCompilerOptions = vuePluginOptions.compilerOptions || {}
+  const result = compileTemplate({
+    source: descriptor.template.content,
+    filename,
+    id,
+    scoped: descriptor.styles.some(s => s.scoped),
+    compilerOptions: {
+      isCustomElement: resolveIsCustomElement,
+      ...userCompilerOptions,
+      ...(bindings ? { bindingMetadata: bindings } : {}),
+      nodeTransforms: [
+        ...((userCompilerOptions.nodeTransforms as any[]) || []),
+        (node: any) => {
+          if (node.type !== 5) return
+          const content = node.content
+
+          // Simple expression: `{{ value }}`
+          if (content.type === 4) {
+            const rawContent = content.content.trim()
+            if (rawContent && !rawContent.startsWith('_ctx.$fmt(')) {
+              content.content = `_ctx.$fmt(${rawContent})`
+            }
+            return
+          }
+
+          // Compound expression: `{{ a + b }}`, `{{ cond ? x : y }}`. These are
+          // rewritten into child arrays by the built-in transformExpression, so
+          // they need wrapping at the children level rather than as a string.
+          if (content.type === 8 && !content.__fmtWrapped) {
+            content.children = ['_ctx.$fmt(', ...content.children, ')']
+            content.__fmtWrapped = true
+          }
+        },
+      ],
+    },
+  })
+
+  if (result.errors?.length) {
+    logger.log(`Template compile errors: ${result.errors.join(', ')}`, 'error')
+  }
+
+  let code = result.code
+  code = code.replace(/^export\s+/m, '')
+  code = await compileText(code)
+  return code
+}
+
+export async function compileStyleBlock(
+  options: CompileStyleOptions,
+): Promise<SFCStyleCompileResults> {
+  await loadCompiler()
+  return compiler.compileStyle({
+    source: options.style.content,
+    filename: 'style.css',
+    id: options.id,
+    scoped: !!options.style.scoped,
+    trim: true,
+  })
+}
+
+export function assembleComponent(options: AssembleComponentOptions): string {
+  const { scriptCode, renderCode, isRoot, scopeId } = options
+  const COMPONENT_VAR = '__sfc__'
+  let output = scriptCode.replace(
+    /\bexport\s+default\s*/,
+    `const ${COMPONENT_VAR} = `,
+  )
+
+  if (renderCode) {
+    const renderFn = renderCode.replace(/^export\s+/m, '')
+    output += `\n${renderFn}\n${COMPONENT_VAR}.render = render;`
+  }
+
+  if (scopeId) {
+    output += `\n${COMPONENT_VAR}.__scopeId = ${JSON.stringify(scopeId)};`
+  }
+
+  output += `\nexport default ${COMPONENT_VAR};`
+
+  if (isRoot) {
+    output +=
+      `\nimport { createApp } from 'vue';` +
+      `\nconst __app = createApp(${COMPONENT_VAR});` +
+      `\n__app.config.compilerOptions.isCustomElement = ${buildRuntimeCustomElementCheck()};` +
+      `\n__app.config.globalProperties.$fmt = (v) => globalThis.$fmt ? globalThis.$fmt(v) : v;` +
+      `\n__app.mount('#app');`
+  }
+
+  return output
+}
+
+/**
+ * Mirror `resolveIsCustomElement` in the browser, so runtime-compiled templates
+ * agree with what the SFC compiler did. A predicate that closes over server-side
+ * state cannot be serialized — it falls back to the built-in tag.
+ */
+function buildRuntimeCustomElementCheck(): string {
+  const ce = vuePluginOptions.customElements
+
+  if (typeof ce === 'function') {
+    return `(tag) => { try { return (${ce.toString()})(tag) || tag === 'iconify-icon' } catch { return tag === 'iconify-icon' } }`
+  }
+
+  const tags = [...new Set([...(Array.isArray(ce) ? ce : []), 'iconify-icon'])]
+  return `(tag) => ${JSON.stringify(tags)}.includes(tag)`
+}
+
+export async function compileVueFile(
+  options: CompileVueFileOptions,
+): Promise<CompileVueFileResult> {
+  const { content, filename, id, isRootScript } = options
+  const { descriptor, errors: parseErrors } = await parseVue({
+    content,
+    filename,
+  })
+  const hasScoped = descriptor.styles.some(s => s.scoped)
+  const { code: scriptCode, bindings } = await compileScriptBlock({
+    descriptor,
+    id,
+  })
+  const renderCode = await compileTemplateBlock({
+    descriptor,
+    id,
+    filename,
+    bindings,
+  })
+  const code = assembleComponent({
+    scriptCode,
+    renderCode,
+    isRoot: isRootScript,
+    scopeId: hasScoped ? id : undefined,
+  })
+
+  const styles = await Promise.all(
+    descriptor.styles.map(style => compileStyleBlock({ style, id })),
+  )
+
+  return { code, styles, errors: parseErrors }
+}