@enfyra/sdk-nuxt 0.2.4 → 0.3.1

package/README.md

@@ -6,6 +6,7 @@ Nuxt SDK for Enfyra CMS - A powerful composable-based API client with full SSR s
 
 ✅ **SSR & Client-Side Support** - Automatic server-side rendering with `useFetch` or client-side with `$fetch`  
 ✅ **Authentication Integration** - Built-in auth composables with automatic header forwarding  
+✅ **Asset Proxy** - Automatic `/assets/**` proxy to backend with no configuration needed  
 ✅ **TypeScript Support** - Full type safety with auto-generated declarations  
 ✅ **Batch Operations** - Efficient bulk operations with real-time progress tracking (client-side)  
 ✅ **Error Handling** - Automatic error management with console logging  
@@ -107,6 +108,28 @@ await logout();
 </script>
 ```
 
+### Asset URLs - Automatic Proxy
+
+The SDK automatically proxies all asset requests to your backend. Simply use `/assets/**` paths directly:
+
+```vue
+<template>
+  <!-- ✅ Assets are automatically proxied to your backend -->
+  <img src="/assets/images/logo.svg" alt="Logo" />
+  <img :src="`/assets/images/users/${user.id}/avatar.jpg`" alt="Avatar" />
+  
+  <!-- Works with any asset type -->
+  <video src="/assets/videos/intro.mp4" controls />
+  <a :href="`/assets/documents/${doc.filename}`" download>Download PDF</a>
+</template>
+```
+
+**How it works:**
+- All requests to `/assets/**` are automatically proxied to `{apiUrl}/enfyra/api/assets/**`
+- No configuration needed - works out of the box
+- Supports all asset types: images, videos, documents, etc.
+- Maintains proper authentication headers
+
 ## Core Composables
 
 ### `useEnfyraApi<T>(path, options)`
@@ -505,13 +528,47 @@ const { execute } = useEnfyraApi<CreateUserResponse>('/users', {
 - Implement proper cache keys to avoid over-caching
 - Group related operations with batch APIs
 
+## Development
+
+### Testing
+
+The SDK includes a comprehensive test suite using Vitest:
+
+```bash
+# Run tests once
+npm run test:run
+
+# Run tests in watch mode
+npm test
+
+# Run tests with UI
+npm run test:ui
+```
+
+**Test Coverage:**
+- ✅ **Extension naming utilities** - UUID generation and validation
+- ✅ **Vue SFC validation** - Syntax and structure validation  
+- ✅ **JS bundle validation** - Syntax and export validation
+- ✅ **Extension processing** - Complete workflow testing
+- ✅ **35 test cases** covering all edge cases and error handling
+
+### Building
+
+```bash
+# Build the module
+npm run build
+
+# Development mode
+npm run dev
+```
+
 ## License
 
 MIT
 
 ## Contributing
 
-Pull requests are welcome! Please read our contributing guidelines and ensure tests pass.
+Pull requests are welcome! Please read our contributing guidelines and ensure tests pass before submitting.
 
 ## Changelog
 

package/dist/module.cjs

@@ -26,7 +26,6 @@ enfyraSDK: {
       );
     }
     nuxt.options.runtimeConfig.public.enfyraSDK = {
-      ...nuxt.options.runtimeConfig.public.enfyraSDK,
       ...options,
       apiPrefix: config_mjs.ENFYRA_API_PREFIX
     };
@@ -45,6 +44,20 @@ enfyraSDK: {
       handler: resolve("./runtime/server/api/logout.post"),
       method: "post"
     });
+    kit.addServerHandler({
+      route: `${config_mjs.ENFYRA_API_PREFIX}/extension_definition`,
+      handler: resolve("./runtime/server/api/extension_definition.post"),
+      method: "post"
+    });
+    kit.addServerHandler({
+      route: `${config_mjs.ENFYRA_API_PREFIX}/extension_definition/**`,
+      handler: resolve("./runtime/server/api/extension_definition/[id].patch"),
+      method: "patch"
+    });
+    kit.addServerHandler({
+      route: "/assets/**",
+      handler: resolve("./runtime/server/api/all")
+    });
     kit.addServerHandler({
       route: `${config_mjs.ENFYRA_API_PREFIX}/**`,
       handler: resolve("./runtime/server/api/all")

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@enfyra/sdk-nuxt",
   "configKey": "enfyraSDK",
-  "version": "0.2.4",
+  "version": "0.3.1",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -23,7 +23,6 @@ enfyraSDK: {
       );
     }
     nuxt.options.runtimeConfig.public.enfyraSDK = {
-      ...nuxt.options.runtimeConfig.public.enfyraSDK,
       ...options,
       apiPrefix: ENFYRA_API_PREFIX
     };
@@ -42,6 +41,20 @@ enfyraSDK: {
       handler: resolve("./runtime/server/api/logout.post"),
       method: "post"
     });
+    addServerHandler({
+      route: `${ENFYRA_API_PREFIX}/extension_definition`,
+      handler: resolve("./runtime/server/api/extension_definition.post"),
+      method: "post"
+    });
+    addServerHandler({
+      route: `${ENFYRA_API_PREFIX}/extension_definition/**`,
+      handler: resolve("./runtime/server/api/extension_definition/[id].patch"),
+      method: "patch"
+    });
+    addServerHandler({
+      route: "/assets/**",
+      handler: resolve("./runtime/server/api/all")
+    });
     addServerHandler({
       route: `${ENFYRA_API_PREFIX}/**`,
       handler: resolve("./runtime/server/api/all")

package/dist/runtime/server/api/extension_definition/[id].patch.js

@@ -0,0 +1,40 @@
+import {
+  defineEventHandler,
+  readBody,
+  getHeader,
+  createError
+} from "h3";
+import { useRuntimeConfig } from "#imports";
+import { $fetch } from "ofetch";
+import {
+  processExtensionDefinition
+} from "../../../../utils/server/extension";
+export default defineEventHandler(async (event) => {
+  const method = event.method;
+  try {
+    let body = await readBody(event);
+    const { processedBody, compiledCode } = await processExtensionDefinition(body, method);
+    body = processedBody;
+    const config = useRuntimeConfig();
+    const apiPath = event.path.replace("/enfyra/api", "");
+    const targetUrl = `${config.public.enfyraSDK.apiUrl}${apiPath}`;
+    const response = await $fetch(targetUrl, {
+      method: "PATCH",
+      headers: {
+        cookie: getHeader(event, "cookie") || "",
+        authorization: event.context.proxyHeaders?.authorization || "",
+        "Content-Type": "application/json"
+      },
+      body: body || void 0
+    });
+    return response;
+  } catch (error) {
+    if (error.statusCode) {
+      throw error;
+    }
+    throw createError({
+      statusCode: 500,
+      statusMessage: error.message || `Failed to process extension definition ${method}`
+    });
+  }
+});

package/dist/runtime/server/api/extension_definition/[id].patch.mjs

@@ -0,0 +1,40 @@
+import {
+  defineEventHandler,
+  readBody,
+  getHeader,
+  createError
+} from "h3";
+import { useRuntimeConfig } from "#imports";
+import { $fetch } from "ofetch";
+import {
+  processExtensionDefinition
+} from "../../../../utils/server/extension";
+export default defineEventHandler(async (event) => {
+  const method = event.method;
+  try {
+    let body = await readBody(event);
+    const { processedBody, compiledCode } = await processExtensionDefinition(body, method);
+    body = processedBody;
+    const config = useRuntimeConfig();
+    const apiPath = event.path.replace("/enfyra/api", "");
+    const targetUrl = `${config.public.enfyraSDK.apiUrl}${apiPath}`;
+    const response = await $fetch(targetUrl, {
+      method: "PATCH",
+      headers: {
+        cookie: getHeader(event, "cookie") || "",
+        authorization: event.context.proxyHeaders?.authorization || "",
+        "Content-Type": "application/json"
+      },
+      body: body || void 0
+    });
+    return response;
+  } catch (error) {
+    if (error.statusCode) {
+      throw error;
+    }
+    throw createError({
+      statusCode: 500,
+      statusMessage: error.message || `Failed to process extension definition ${method}`
+    });
+  }
+});

package/dist/runtime/server/api/extension_definition.post.js

@@ -0,0 +1,40 @@
+import {
+  defineEventHandler,
+  readBody,
+  getHeader,
+  createError
+} from "h3";
+import { useRuntimeConfig } from "#imports";
+import { $fetch } from "ofetch";
+import {
+  processExtensionDefinition
+} from "../../../utils/server/extension";
+export default defineEventHandler(async (event) => {
+  const method = event.method;
+  try {
+    let body = await readBody(event);
+    const { processedBody, compiledCode } = await processExtensionDefinition(body, method);
+    body = processedBody;
+    const config = useRuntimeConfig();
+    const apiPath = event.path.replace("/enfyra/api", "");
+    const targetUrl = `${config.public.enfyraSDK.apiUrl}${apiPath}`;
+    const response = await $fetch(targetUrl, {
+      method,
+      headers: {
+        cookie: getHeader(event, "cookie") || "",
+        authorization: event.context.proxyHeaders?.authorization || "",
+        "Content-Type": "application/json"
+      },
+      body: body || void 0
+    });
+    return response;
+  } catch (error) {
+    if (error.statusCode) {
+      throw error;
+    }
+    throw createError({
+      statusCode: 500,
+      statusMessage: error.message || `Failed to process extension definition ${method}`
+    });
+  }
+});

package/dist/runtime/server/api/extension_definition.post.mjs

@@ -0,0 +1,40 @@
+import {
+  defineEventHandler,
+  readBody,
+  getHeader,
+  createError
+} from "h3";
+import { useRuntimeConfig } from "#imports";
+import { $fetch } from "ofetch";
+import {
+  processExtensionDefinition
+} from "../../../utils/server/extension";
+export default defineEventHandler(async (event) => {
+  const method = event.method;
+  try {
+    let body = await readBody(event);
+    const { processedBody, compiledCode } = await processExtensionDefinition(body, method);
+    body = processedBody;
+    const config = useRuntimeConfig();
+    const apiPath = event.path.replace("/enfyra/api", "");
+    const targetUrl = `${config.public.enfyraSDK.apiUrl}${apiPath}`;
+    const response = await $fetch(targetUrl, {
+      method,
+      headers: {
+        cookie: getHeader(event, "cookie") || "",
+        authorization: event.context.proxyHeaders?.authorization || "",
+        "Content-Type": "application/json"
+      },
+      body: body || void 0
+    });
+    return response;
+  } catch (error) {
+    if (error.statusCode) {
+      throw error;
+    }
+    throw createError({
+      statusCode: 500,
+      statusMessage: error.message || `Failed to process extension definition ${method}`
+    });
+  }
+});

package/dist/utils/server/extension/compiler.mjs

@@ -0,0 +1,64 @@
+import { randomUUID } from "crypto";
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from "fs";
+import { join } from "path";
+import { build } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { createError } from "h3";
+export async function buildExtensionWithVite(vueContent, extensionId) {
+  const buildId = `${extensionId}-${Date.now()}-${randomUUID()}`;
+  const tempDir = join(process.cwd(), ".temp-extension-builds", buildId);
+  const tempExtensionFile = join(tempDir, "extension.vue");
+  const tempEntryFile = join(tempDir, "entry.js");
+  try {
+    if (!existsSync(tempDir)) {
+      mkdirSync(tempDir, { recursive: true });
+    }
+    writeFileSync(tempExtensionFile, vueContent);
+    writeFileSync(tempEntryFile, `
+import ExtensionComponent from './extension.vue'
+export default ExtensionComponent
+`);
+    await build({
+      root: tempDir,
+      build: {
+        lib: {
+          entry: tempEntryFile,
+          name: extensionId,
+          fileName: () => "extension.js",
+          formats: ["umd"]
+        },
+        outDir: join(tempDir, "dist"),
+        emptyOutDir: true,
+        write: true,
+        rollupOptions: {
+          external: ["vue"],
+          output: {
+            globals: {
+              vue: "Vue"
+            }
+          }
+        }
+      },
+      plugins: [vue()]
+    });
+    const compiledFile = join(tempDir, "dist", "extension.js");
+    const compiledCode = readFileSync(compiledFile, "utf-8");
+    return compiledCode;
+  } catch (error) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: `Failed to build extension: ${error.message || "Unknown error"}`
+    });
+  } finally {
+    await cleanupTempDirectory(tempDir);
+  }
+}
+async function cleanupTempDirectory(tempDir) {
+  try {
+    if (existsSync(tempDir)) {
+      const fs = await import("fs/promises");
+      await fs.rm(tempDir, { recursive: true, force: true });
+    }
+  } catch (cleanupError) {
+  }
+}

package/dist/utils/server/extension/index.mjs

@@ -0,0 +1,4 @@
+export * from "./naming.mjs";
+export * from "./validation.mjs";
+export * from "./compiler.mjs";
+export * from "./processor.mjs";

package/dist/utils/server/extension/naming.mjs

@@ -0,0 +1,13 @@
+import { randomUUID } from "crypto";
+const EXTENSION_UUID_PATTERN = /^extension_[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+export function autoAssignExtensionName(body) {
+  const currentExtensionId = body.extensionId || "";
+  if (!currentExtensionId || !EXTENSION_UUID_PATTERN.test(currentExtensionId)) {
+    const uuid = randomUUID();
+    body.extensionId = `extension_${uuid}`;
+  }
+  return body;
+}
+export function isValidExtensionId(extensionId) {
+  return EXTENSION_UUID_PATTERN.test(extensionId);
+}

package/dist/utils/server/extension/processor.mjs

@@ -0,0 +1,34 @@
+import { createError } from "h3";
+import { autoAssignExtensionName } from "./naming.mjs";
+import { isProbablyVueSFC, assertValidVueSFC, assertValidJsBundleSyntax } from "./validation.mjs";
+import { buildExtensionWithVite } from "./compiler.mjs";
+export function isExtensionDefinitionPath(path) {
+  return path.includes("/extension_definition");
+}
+export async function processExtensionDefinition(body, method) {
+  if (method !== "POST" && method !== "PATCH") {
+    return { processedBody: body };
+  }
+  if (!body || typeof body.code !== "string") {
+    return { processedBody: body };
+  }
+  body = autoAssignExtensionName(body);
+  const code = body.code;
+  const extensionId = body.id || body.name || "extension_" + Date.now();
+  if (isProbablyVueSFC(code)) {
+    assertValidVueSFC(code);
+    try {
+      const compiledCode = await buildExtensionWithVite(code, body.extensionId);
+      body.compiledCode = compiledCode;
+      return { processedBody: body, compiledCode };
+    } catch (compileError) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: compileError?.statusMessage || `Failed to build Vue SFC for ${extensionId}: ${compileError?.message || "Unknown error"}`
+      });
+    }
+  } else {
+    assertValidJsBundleSyntax(code);
+    return { processedBody: body };
+  }
+}

package/dist/utils/server/extension/validation.mjs

@@ -0,0 +1,67 @@
+import { createError } from "h3";
+export function isProbablyVueSFC(content) {
+  if (typeof content !== "string") return false;
+  const trimmed = content.trim();
+  if (!trimmed) return false;
+  const hasSfcTags = /<template[\s>]|<script[\s>]|<style[\s>]/i.test(trimmed);
+  const hasClosing = /<\/template>|<\/script>|<\/style>/i.test(trimmed);
+  return hasSfcTags && hasClosing;
+}
+export function assertValidVueSFC(content) {
+  const templateOpen = (content.match(/<template[^>]*>/g) || []).length;
+  const templateClose = (content.match(/<\/template>/g) || []).length;
+  const scriptOpen = (content.match(/<script[^>]*>/g) || []).length;
+  const scriptClose = (content.match(/<\/script>/g) || []).length;
+  const styleOpen = (content.match(/<style[^>]*>/g) || []).length;
+  const styleClose = (content.match(/<\/style>/g) || []).length;
+  if (templateOpen !== templateClose || scriptOpen !== scriptClose || styleOpen !== styleClose) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Invalid Vue SFC: unbalanced tags"
+    });
+  }
+  if (templateOpen === 0 && scriptOpen === 0) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Invalid Vue SFC: must have at least <template> or <script>"
+    });
+  }
+  if (scriptOpen > 0) {
+    const scriptContent = content.match(/<script[^>]*>([\s\S]*?)<\/script>/i);
+    if (scriptContent && scriptContent[1]) {
+      const script = scriptContent[1];
+      if (script.includes("export default") && !script.includes("{")) {
+        throw createError({
+          statusCode: 400,
+          statusMessage: "Invalid Vue SFC: script must have proper export default syntax"
+        });
+      }
+    }
+  }
+}
+export function assertValidJsBundleSyntax(code) {
+  const brackets = { "(": 0, ")": 0, "{": 0, "}": 0, "[": 0, "]": 0 };
+  for (const char of code) {
+    if (char in brackets) {
+      brackets[char]++;
+    }
+  }
+  if (brackets["("] !== brackets[")"] || brackets["{"] !== brackets["}"] || brackets["["] !== brackets["]"]) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Invalid JS syntax: unbalanced brackets"
+    });
+  }
+  if (!code.includes("export") && !code.includes("module.exports") && !code.includes("window.")) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Invalid JS bundle: must have export statement or module.exports"
+    });
+  }
+  if (code.includes("function(") && !code.includes(")")) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Invalid JS syntax: incomplete function declaration"
+    });
+  }
+}

package/dist/utils/server/extension.mjs

@@ -0,0 +1 @@
+export * from "./extension/index.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enfyra/sdk-nuxt",
-  "version": "0.2.4",
+  "version": "0.3.1",
   "description": "Nuxt SDK for Enfyra CMS",
   "repository": {
     "type": "git",
@@ -37,26 +37,31 @@
   "scripts": {
     "dev": "nuxi dev playground",
     "build": "nuxt-module-build build && npx tsc -p tsconfig.build.json && node scripts/copy-composables-types.js",
-    "prepack": "nuxt-module-build build && npx tsc -p tsconfig.build.json && node scripts/copy-composables-types.js"
+    "prepack": "nuxt-module-build build && npx tsc -p tsconfig.build.json && node scripts/copy-composables-types.js",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run"
   },
   "peerDependencies": {
     "@nuxt/kit": "^3.18.1",
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@enfyra/sdk-nuxt": "^0.1.8",
+    "@vitejs/plugin-vue": "^5.2.0",
     "cookie": "^0.6.0",
     "glob": "^8.1.0",
     "h3": "^1.15.4",
     "jwt-decode": "^4.0.0",
     "nuxt": "^3.18.1",
-    "ofetch": "^1.3.3"
+    "ofetch": "^1.3.3",
+    "vite": "^6.0.7"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.8.4",
     "@types/cookie": "^0.6.0",
+    "@vitest/ui": "^3.2.4",
     "typescript": "^5.0.0",
-    "vite": "^6.0.3",
-    "vite-plugin-dts": "^4.3.0"
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^3.2.4"
   }
 }

package/src/module.ts

@@ -22,19 +22,18 @@ export default defineNuxtModule({
     if (!options.apiUrl || !options.appUrl) {
       throw new Error(
         `[Enfyra SDK Nuxt] Missing required configuration:\n` +
-        `${!options.apiUrl ? '- apiUrl is required\n' : ''}` +
-        `${!options.appUrl ? '- appUrl is required\n' : ''}` +
-        `Please configure both in your nuxt.config.ts:\n` +
-        `enfyraSDK: {\n` +
-        `  apiUrl: 'https://your-api-url',\n` +
-        `  appUrl: 'https://your-app-url'\n` +
-        `}`
+          `${!options.apiUrl ? "- apiUrl is required\n" : ""}` +
+          `${!options.appUrl ? "- appUrl is required\n" : ""}` +
+          `Please configure both in your nuxt.config.ts:\n` +
+          `enfyraSDK: {\n` +
+          `  apiUrl: 'https://your-api-url',\n` +
+          `  appUrl: 'https://your-app-url'\n` +
+          `}`
       );
     }
 
     // Make module options available at runtime with hardcoded apiPrefix
     nuxt.options.runtimeConfig.public.enfyraSDK = {
-      ...nuxt.options.runtimeConfig.public.enfyraSDK,
       ...options,
       apiPrefix: ENFYRA_API_PREFIX,
     };
@@ -61,6 +60,26 @@ export default defineNuxtModule({
       method: "post",
     });
 
+    // Register extension_definition specific handlers
+    addServerHandler({
+      route: `${ENFYRA_API_PREFIX}/extension_definition`,
+      handler: resolve("./runtime/server/api/extension_definition.post"),
+      method: "post",
+    });
+
+    addServerHandler({
+      route: `${ENFYRA_API_PREFIX}/extension_definition/**`,
+      handler: resolve("./runtime/server/api/extension_definition/[id].patch"),
+      method: "patch",
+    });
+
+    // Assets proxy handler - catch all assets requests
+    addServerHandler({
+      route: "/assets/**",
+      handler: resolve("./runtime/server/api/all"),
+    });
+
+    // Catch-all handler for other routes
     addServerHandler({
       route: `${ENFYRA_API_PREFIX}/**`,
       handler: resolve("./runtime/server/api/all"),

package/src/runtime/server/api/extension_definition/[id].patch.ts

@@ -0,0 +1,50 @@
+import {
+  defineEventHandler,
+  readBody,
+  getHeader,
+  createError,
+} from "h3";
+import { useRuntimeConfig } from "#imports";
+import { $fetch } from "ofetch";
+import {
+  processExtensionDefinition,
+} from "../../../../utils/server/extension";
+
+export default defineEventHandler(async (event) => {
+  const method = event.method;
+
+  try {
+    let body = await readBody(event);
+    
+    // Process extension definition logic
+    const { processedBody, compiledCode } = await processExtensionDefinition(body, method);
+    body = processedBody;
+
+    // Make API call to backend
+    const config = useRuntimeConfig();
+    const apiPath = event.path.replace("/enfyra/api", "");
+    const targetUrl = `${config.public.enfyraSDK.apiUrl}${apiPath}`;
+
+    const response = await $fetch(targetUrl, {
+      method: "PATCH",
+      headers: {
+        cookie: getHeader(event, "cookie") || "",
+        authorization: event.context.proxyHeaders?.authorization || "",
+        "Content-Type": "application/json",
+      },
+      body: body || undefined,
+    });
+
+    return response;
+  } catch (error: any) {
+    if (error.statusCode) {
+      throw error;
+    }
+
+    throw createError({
+      statusCode: 500,
+      statusMessage:
+        error.message || `Failed to process extension definition ${method}`,
+    });
+  }
+});

package/src/runtime/server/api/extension_definition.post.ts

@@ -0,0 +1,50 @@
+import {
+  defineEventHandler,
+  readBody,
+  getHeader,
+  createError,
+} from "h3";
+import { useRuntimeConfig } from "#imports";
+import { $fetch } from "ofetch";
+import {
+  processExtensionDefinition,
+} from "../../../utils/server/extension";
+
+export default defineEventHandler(async (event) => {
+  const method = event.method;
+
+  try {
+    let body = await readBody(event);
+    
+    // Process extension definition logic
+    const { processedBody, compiledCode } = await processExtensionDefinition(body, method);
+    body = processedBody;
+
+    // Make API call to backend
+    const config = useRuntimeConfig();
+    const apiPath = event.path.replace("/enfyra/api", "");
+    const targetUrl = `${config.public.enfyraSDK.apiUrl}${apiPath}`;
+
+    const response = await $fetch(targetUrl, {
+      method: method as any,
+      headers: {
+        cookie: getHeader(event, "cookie") || "",
+        authorization: event.context.proxyHeaders?.authorization || "",
+        "Content-Type": "application/json",
+      },
+      body: body || undefined,
+    });
+
+    return response;
+  } catch (error: any) {
+    if (error.statusCode) {
+      throw error;
+    }
+
+    throw createError({
+      statusCode: 500,
+      statusMessage:
+        error.message || `Failed to process extension definition ${method}`,
+    });
+  }
+});

package/src/utils/server/extension/compiler.ts

@@ -0,0 +1,78 @@
+import { randomUUID } from "crypto";
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from "fs";
+import { join } from "path";
+import { build } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { createError } from "h3";
+
+export async function buildExtensionWithVite(
+  vueContent: string,
+  extensionId: string
+): Promise<string> {
+  // Generate unique temp directory name for each build to avoid conflicts
+  const buildId = `${extensionId}-${Date.now()}-${randomUUID()}`;
+  const tempDir = join(process.cwd(), ".temp-extension-builds", buildId);
+  const tempExtensionFile = join(tempDir, "extension.vue");
+  const tempEntryFile = join(tempDir, "entry.js");
+
+  try {
+    if (!existsSync(tempDir)) {
+      mkdirSync(tempDir, { recursive: true });
+    }
+
+    writeFileSync(tempExtensionFile, vueContent);
+    writeFileSync(tempEntryFile, `
+import ExtensionComponent from './extension.vue'
+export default ExtensionComponent
+`);
+
+    await build({
+      root: tempDir,
+      build: {
+        lib: {
+          entry: tempEntryFile,
+          name: extensionId,
+          fileName: () => "extension.js",
+          formats: ["umd"],
+        },
+        outDir: join(tempDir, "dist"),
+        emptyOutDir: true,
+        write: true,
+        rollupOptions: {
+          external: ["vue"],
+          output: {
+            globals: {
+              vue: "Vue",
+            },
+          },
+        },
+      },
+      plugins: [vue()],
+    });
+
+    const compiledFile = join(tempDir, "dist", "extension.js");
+    const compiledCode = readFileSync(compiledFile, "utf-8");
+
+    return compiledCode;
+  } catch (error: any) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: `Failed to build extension: ${
+        error.message || "Unknown error"
+      }`,
+    });
+  } finally {
+    await cleanupTempDirectory(tempDir);
+  }
+}
+
+async function cleanupTempDirectory(tempDir: string): Promise<void> {
+  try {
+    if (existsSync(tempDir)) {
+      const fs = await import("fs/promises");
+      await fs.rm(tempDir, { recursive: true, force: true });
+    }
+  } catch (cleanupError) {
+    // Silent cleanup failure - not critical
+  }
+}

package/src/utils/server/extension/index.ts

@@ -0,0 +1,4 @@
+export * from "./naming";
+export * from "./validation";
+export * from "./compiler";
+export * from "./processor";

package/src/utils/server/extension/naming.ts

@@ -0,0 +1,18 @@
+import { randomUUID } from "crypto";
+
+const EXTENSION_UUID_PATTERN = /^extension_[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+export function autoAssignExtensionName(body: any): any {
+  const currentExtensionId = body.extensionId || "";
+
+  if (!currentExtensionId || !EXTENSION_UUID_PATTERN.test(currentExtensionId)) {
+    const uuid = randomUUID();
+    body.extensionId = `extension_${uuid}`;
+  }
+
+  return body;
+}
+
+export function isValidExtensionId(extensionId: string): boolean {
+  return EXTENSION_UUID_PATTERN.test(extensionId);
+}

package/src/utils/server/extension/processor.ts

@@ -0,0 +1,51 @@
+import { createError } from "h3";
+import { autoAssignExtensionName } from "./naming";
+import { isProbablyVueSFC, assertValidVueSFC, assertValidJsBundleSyntax } from "./validation";
+import { buildExtensionWithVite } from "./compiler";
+
+export function isExtensionDefinitionPath(path: string): boolean {
+  return path.includes('/extension_definition');
+}
+
+export async function processExtensionDefinition(
+  body: any,
+  method: string
+): Promise<{ processedBody: any; compiledCode?: string }> {
+  if (method !== "POST" && method !== "PATCH") {
+    return { processedBody: body };
+  }
+
+  if (!body || typeof body.code !== "string") {
+    return { processedBody: body };
+  }
+
+  // Auto-assign extension name
+  body = autoAssignExtensionName(body);
+
+  const code: string = body.code;
+  const extensionId = body.id || body.name || "extension_" + Date.now();
+
+  if (isProbablyVueSFC(code)) {
+    // Validate SFC syntax before building
+    assertValidVueSFC(code);
+
+    try {
+      const compiledCode = await buildExtensionWithVite(code, body.extensionId);
+      body.compiledCode = compiledCode;
+      return { processedBody: body, compiledCode };
+    } catch (compileError: any) {
+      throw createError({
+        statusCode: 400,
+        statusMessage:
+          compileError?.statusMessage ||
+          `Failed to build Vue SFC for ${extensionId}: ${
+            compileError?.message || "Unknown error"
+          }`,
+      });
+    }
+  } else {
+    // Treat as compiled bundle; validate syntax first
+    assertValidJsBundleSyntax(code);
+    return { processedBody: body };
+  }
+}

package/src/utils/server/extension/validation.ts

@@ -0,0 +1,91 @@
+import { createError } from "h3";
+
+export function isProbablyVueSFC(content: string): boolean {
+  if (typeof content !== "string") return false;
+  const trimmed = content.trim();
+  if (!trimmed) return false;
+
+  const hasSfcTags = /<template[\s>]|<script[\s>]|<style[\s>]/i.test(trimmed);
+  const hasClosing = /<\/template>|<\/script>|<\/style>/i.test(trimmed);
+
+  return hasSfcTags && hasClosing;
+}
+
+export function assertValidVueSFC(content: string): void {
+  const templateOpen = (content.match(/<template[^>]*>/g) || []).length;
+  const templateClose = (content.match(/<\/template>/g) || []).length;
+  const scriptOpen = (content.match(/<script[^>]*>/g) || []).length;
+  const scriptClose = (content.match(/<\/script>/g) || []).length;
+  const styleOpen = (content.match(/<style[^>]*>/g) || []).length;
+  const styleClose = (content.match(/<\/style>/g) || []).length;
+
+  if (
+    templateOpen !== templateClose ||
+    scriptOpen !== scriptClose ||
+    styleOpen !== styleClose
+  ) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Invalid Vue SFC: unbalanced tags",
+    });
+  }
+
+  if (templateOpen === 0 && scriptOpen === 0) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Invalid Vue SFC: must have at least <template> or <script>",
+    });
+  }
+
+  if (scriptOpen > 0) {
+    const scriptContent = content.match(/<script[^>]*>([\s\S]*?)<\/script>/i);
+    if (scriptContent && scriptContent[1]) {
+      const script = scriptContent[1];
+      if (script.includes("export default") && !script.includes("{")) {
+        throw createError({
+          statusCode: 400,
+          statusMessage: "Invalid Vue SFC: script must have proper export default syntax",
+        });
+      }
+    }
+  }
+}
+
+export function assertValidJsBundleSyntax(code: string): void {
+  const brackets = { "(": 0, ")": 0, "{": 0, "}": 0, "[": 0, "]": 0 };
+
+  for (const char of code) {
+    if (char in brackets) {
+      brackets[char as keyof typeof brackets]++;
+    }
+  }
+
+  if (
+    brackets["("] !== brackets[")"] ||
+    brackets["{"] !== brackets["}"] ||
+    brackets["["] !== brackets["]"]
+  ) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Invalid JS syntax: unbalanced brackets",
+    });
+  }
+
+  if (
+    !code.includes("export") &&
+    !code.includes("module.exports") &&
+    !code.includes("window.")
+  ) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Invalid JS bundle: must have export statement or module.exports",
+    });
+  }
+
+  if (code.includes("function(") && !code.includes(")")) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Invalid JS syntax: incomplete function declaration",
+    });
+  }
+}

package/src/utils/server/extension.ts

@@ -0,0 +1,2 @@
+// Re-export all extension utilities from modular structure
+export * from "./extension";