@mostfeatured/dbi 0.2.14 → 0.2.16

package/src/types/Components/HTMLComponentsV2/svelteRenderer.ts

@@ -1,20 +1,33 @@
 import { compile } from "svelte/compiler";
 import { DBI } from "../../../DBI";
 import { NamespaceEnums } from "../../../../generated/namespaceData";
-import { parseHTMLComponentsV2 } from "./parser";
-import { parseSvelteComponent, createHandlerContext, SvelteComponentInfo, HandlerContextResult } from "./svelteParser";
+import { parseHTMLComponentsV2, parseHTMLComponentsV2Multi } from "./parser";
+import { parseSvelteComponent, createHandlerContext, SvelteComponentInfo, HandlerContextResult, validateSvelteComponent, logValidationWarnings } from "./svelteParser";
 import * as stuffs from "stuffs";
 import * as vm from "vm";
 
 export interface SvelteRenderOptions {
   data?: Record<string, any>;
   ttl?: number;
+  /** If true, skips validation warnings (useful for production) */
+  skipValidation?: boolean;
+  /** The file path of the Svelte component (used for resolving relative imports) */
+  filePath?: string;
+}
+
+export interface ModalDefinition {
+  title: string;
+  customId: string;
+  components: any[];
+  modalId: string;
 }
 
 export interface SvelteRenderResult {
   components: any[];
   handlers: Map<string, { handlerFn: Function, context: any }>;
   componentInfo: SvelteComponentInfo;
+  /** Modal definitions parsed from <components type="modal"> elements */
+  modals: Map<string, ModalDefinition>;
 }
 
 /**
@@ -26,35 +39,99 @@ export async function renderSvelteComponent(
   dbiName: string,
   options: SvelteRenderOptions = {}
 ): Promise<SvelteRenderResult> {
-  const { data = {}, ttl = 0 } = options;
+  const { data = {}, ttl = 0, skipValidation = false, filePath } = options;
 
   // Parse the Svelte component to extract handlers
   // This also injects auto-generated names into elements without name attribute
   const componentInfo = await parseSvelteComponent(source, data);
 
+  // Validate the component and log warnings (only on first render, not re-renders)
+  if (!skipValidation && !data.$ref) {
+    const warnings = validateSvelteComponent(componentInfo, data, dbiName);
+    if (warnings.length > 0) {
+      logValidationWarnings(warnings);
+    }
+  }
+
   // Use the processed source (with auto-generated names injected)
   const processedSource = componentInfo.processedSource;
 
   // Compile the Svelte component for SSR (Svelte 5)
-  const compiled = compile(processedSource, {
-    generate: "server",
-    css: "injected",
-    dev: false,
-  } as any);
+  let compiled;
+  try {
+    compiled = compile(processedSource, {
+      generate: "server",
+      css: "injected",
+      dev: false,
+    } as any);
+  } catch (compileError: any) {
+    // Format Svelte compile error with helpful details
+    const errorMessage = compileError.message || 'Unknown compile error';
+    const location = compileError.start || compileError.loc || compileError.position;
+    let details = errorMessage;
+
+    if (location) {
+      const lines = processedSource.split('\n');
+      const lineNum = location.line || 1;
+      const column = location.column || 0;
+      const errorLine = lines[lineNum - 1] || '';
+      const prevLine = lines[lineNum - 2] || '';
+      const nextLine = lines[lineNum] || '';
+
+      details = `
+Svelte Compile Error at line ${lineNum}, column ${column}:
+${errorMessage}
+
+${lineNum > 1 ? `${lineNum - 1} | ${prevLine}\n` : ''}${lineNum} | ${errorLine}
+${' '.repeat(String(lineNum).length + 3 + column)}^
+${nextLine ? `${lineNum + 1} | ${nextLine}` : ''}
+`.trim();
+    }
+
+    // Check for common mistakes and add hints
+    let hint = '';
+    if (errorMessage.includes('Unexpected token')) {
+      hint = '\n\n💡 Hint: Check for missing closing tags, unclosed braces, or invalid JavaScript syntax.';
+    } else if (errorMessage.includes('is not defined')) {
+      hint = '\n\n💡 Hint: Make sure all variables are declared in $props() or as local variables.';
+    } else if (errorMessage.includes('Expected')) {
+      hint = '\n\n💡 Hint: There might be a syntax error in your template or script.';
+    }
+
+    const enhancedError = new Error(`[DBI-Svelte] Failed to compile component "${dbiName}":\n${details}${hint}`);
+    (enhancedError as any).originalError = compileError;
+    (enhancedError as any).type = 'svelte-compile-error';
+    throw enhancedError;
+  }
 
   // Create a module context for the compiled code
   let html = "";
   try {
     const moduleContext = createModuleContext(dbi, data, ttl);
-    const Component = evaluateCompiledComponent(compiled.js.code, moduleContext);
+    const Component = evaluateCompiledComponent(compiled.js.code, moduleContext, filePath);
 
     // Svelte 5 SSR: Use render from svelte/server
     const { render } = require("svelte/server");
     // Pass data properties as top-level props (Svelte 5 expects flat props object)
     const renderResult = render(Component, { props: data });
     html = renderResult.body || "";
-  } catch (error) {
-    throw error;
+  } catch (runtimeError: any) {
+    // Format runtime error with helpful details
+    const errorMessage = runtimeError.message || 'Unknown runtime error';
+    let hint = '';
+
+    if (errorMessage.includes('is not a function')) {
+      hint = '\n\n💡 Hint: A function you are trying to call is undefined. Check handler names.';
+    } else if (errorMessage.includes('Cannot read properties of undefined') || errorMessage.includes('undefined is not an object')) {
+      hint = '\n\n💡 Hint: You are trying to access a property of an undefined value. Check your data object.';
+    } else if (errorMessage.includes('is not defined')) {
+      hint = '\n\n💡 Hint: A variable is used but not declared. Make sure it is in $props() or declared locally.';
+    }
+
+    const enhancedError = new Error(`[DBI-Svelte] Runtime error in component "${dbiName}":\n${errorMessage}${hint}`);
+    (enhancedError as any).originalError = runtimeError;
+    (enhancedError as any).type = 'svelte-runtime-error';
+    throw enhancedError;
   }
 
   // For Svelte mode, inject state into interactive elements as a ref
@@ -102,11 +179,17 @@ export async function renderSvelteComponent(
     });
   }
 
-  // Parse the rendered HTML to Discord components
-  const components = parseHTMLComponentsV2(dbi, html, dbiName, { data, ttl });
+  // Parse the rendered HTML to Discord components (with modal support)
+  const parseResult = parseHTMLComponentsV2Multi(dbi, html, dbiName, { data, ttl });
+  const components = parseResult.components;
+  const modals = parseResult.modals;
+
+  // Get source directory for resolving relative imports
+  const path = require("path");
+  const sourceDir = filePath ? path.dirname(path.resolve(filePath)) : undefined;
 
   // Create handler context (also captures $effect callbacks)
-  const handlerContext = createHandlerContext(componentInfo.scriptContent, data);
+  const handlerContext = createHandlerContext(componentInfo.scriptContent, data, undefined, undefined, sourceDir);
   const handlers = new Map<string, { handlerFn: Function, context: any }>();
 
   // Run effects on initial render
@@ -126,7 +209,8 @@ export async function renderSvelteComponent(
   return {
     components,
     handlers,
-    componentInfo
+    componentInfo,
+    modals
   };
 }
 
@@ -155,10 +239,14 @@ function createModuleContext(dbi: DBI<NamespaceEnums>, data: Record<string, any>
 /**
  * Evaluate the compiled Svelte component code
  */
-function evaluateCompiledComponent(code: string, context: Record<string, any>): any {
+function evaluateCompiledComponent(code: string, context: Record<string, any>, filePath?: string): any {
   try {
     // Load Svelte 5 internal runtime
     const svelteInternal = require("svelte/internal/server");
+    const path = require("path");
+
+    // Get the directory of the source file for resolving relative imports
+    const sourceDir = filePath ? path.dirname(path.resolve(filePath)) : process.cwd();
 
     // Process the code to work in our context
     let processedCode = code;
@@ -186,7 +274,11 @@ function evaluateCompiledComponent(code: string, context: Record<string, any>):
         // Skip svelte imports
         if (modulePath.startsWith('svelte')) return '';
         try {
-          const mod = require(modulePath);
+          // Resolve relative paths from source file directory
+          const resolvedPath = modulePath.startsWith('.')
+            ? path.resolve(sourceDir, modulePath)
+            : modulePath;
+          const mod = require(resolvedPath);
           externalModules[varName] = mod.default || mod;
           return `const ${varName} = __externalModules.${varName};`;
         } catch (e) {
@@ -202,7 +294,11 @@ function evaluateCompiledComponent(code: string, context: Record<string, any>):
         // Skip svelte imports
         if (modulePath.startsWith('svelte')) return '';
         try {
-          const mod = require(modulePath);
+          // Resolve relative paths from source file directory
+          const resolvedPath = modulePath.startsWith('.')
+            ? path.resolve(sourceDir, modulePath)
+            : modulePath;
+          const mod = require(resolvedPath);
           const importList = imports.split(',').map((i: string) => i.trim());
           importList.forEach((importName: string) => {
             const [name, alias] = importName.split(' as ').map(s => s.trim());
@@ -225,7 +321,11 @@ function evaluateCompiledComponent(code: string, context: Record<string, any>):
         // Skip svelte imports
         if (modulePath.startsWith('svelte')) return '';
         try {
-          const mod = require(modulePath);
+          // Resolve relative paths from source file directory
+          const resolvedPath = modulePath.startsWith('.')
+            ? path.resolve(sourceDir, modulePath)
+            : modulePath;
+          const mod = require(resolvedPath);
           externalModules[varName] = mod;
           return `const ${varName} = __externalModules.${varName};`;
         } catch (e) {
@@ -311,5 +411,6 @@ export async function renderSvelteComponentFromFile(
 ): Promise<SvelteRenderResult> {
   const fs = require("fs");
   const source = fs.readFileSync(filePath, "utf-8");
-  return await renderSvelteComponent(dbi, source, dbiName, options);
+  // Pass filePath to options for resolving relative imports
+  return await renderSvelteComponent(dbi, source, dbiName, { ...options, filePath });
 }

package/test/index.ts

@@ -26,8 +26,7 @@ dbi.register(({ ChatInput, HTMLComponentsV2 }) => {
   HTMLComponentsV2({
     name: "product-showcase",
     mode: 'svelte',
-    file: path.join(__dirname, "product-showcase.svelte"),
-    onExecute(ctx) {}
+    file: path.join(__dirname, "product-showcase.svelte")
   });
 
   // Test command
@@ -73,6 +72,78 @@ dbi.register(({ ChatInput, HTMLComponentsV2 }) => {
           category: "Furniture",
           rating: 4.6,
           stock: 31
+        },
+        {
+          name: "Webcam 4K",
+          description: "Ultra HD webcam with autofocus and noise-canceling mic",
+          price: 129,
+          image: "https://cdn.discordapp.com/embed/avatars/4.png",
+          category: "Electronics",
+          rating: 4.7,
+          stock: 15
+        },
+        {
+          name: "Desk Lamp",
+          description: "LED desk lamp with adjustable brightness and color temperature",
+          price: 45,
+          image: "https://cdn.discordapp.com/embed/avatars/0.png",
+          category: "Furniture",
+          rating: 4.4,
+          stock: 60
+        },
+        {
+          name: "Headphone Stand",
+          description: "Aluminum headphone stand with cable holder",
+          price: 35,
+          image: "https://cdn.discordapp.com/embed/avatars/1.png",
+          category: "Accessories",
+          rating: 4.2,
+          stock: 28
+        },
+        {
+          name: "Gaming Headset",
+          description: "7.1 surround sound gaming headset with RGB lighting",
+          price: 99,
+          image: "https://cdn.discordapp.com/embed/avatars/2.png",
+          category: "Electronics",
+          rating: 4.6,
+          stock: 35
+        },
+        {
+          name: "Mouse Pad XL",
+          description: "Extended mouse pad with stitched edges, 900x400mm",
+          price: 25,
+          image: "https://cdn.discordapp.com/embed/avatars/3.png",
+          category: "Accessories",
+          rating: 4.8,
+          stock: 100
+        },
+        {
+          name: "Ergonomic Chair",
+          description: "Mesh office chair with lumbar support and adjustable armrests",
+          price: 299,
+          image: "https://cdn.discordapp.com/embed/avatars/4.png",
+          category: "Furniture",
+          rating: 4.9,
+          stock: 8
+        },
+        {
+          name: "Cable Management Kit",
+          description: "Complete kit with cable clips, ties, and sleeve",
+          price: 19,
+          image: "https://cdn.discordapp.com/embed/avatars/0.png",
+          category: "Accessories",
+          rating: 4.1,
+          stock: 75
+        },
+        {
+          name: "Portable SSD 1TB",
+          description: "Ultra-fast portable SSD with USB 3.2 Gen 2",
+          price: 109,
+          image: "https://cdn.discordapp.com/embed/avatars/1.png",
+          category: "Electronics",
+          rating: 4.7,
+          stock: 22
         }
       ];
 
@@ -84,7 +155,9 @@ dbi.register(({ ChatInput, HTMLComponentsV2 }) => {
           currentIndex: 0,
           cart: [],
           view: 'browse',
-          elapsedTime: 0
+          elapsedTime: 0,
+          reviews: [],
+          editingProduct: null
         }
       });
     }