@mostfeatured/dbi 0.2.29-dev.1 → 0.2.30

package/dist/src/types/Components/HTMLComponentsV2/svelteParser.js

@@ -13,53 +13,90 @@ async function ensureImports() {
     }
 }
 /**
- * Simple AST walker for Svelte AST nodes
+ * Simple AST walker for Svelte AST nodes with parent tracking
  */
-function walkSvelteAst(node, callback) {
+function walkSvelteAst(node, callback, context) {
     if (!node || typeof node !== 'object')
         return;
-    callback(node);
+    // Initialize context if not provided
+    const ctx = context || { parents: [], eachBlocks: [] };
+    callback(node, ctx);
+    // Create new context for children with this node as parent
+    const childContext = {
+        parents: [...ctx.parents, node],
+        eachBlocks: [...ctx.eachBlocks]
+    };
+    // If this is an EachBlock, add it to the context for children
+    if (node.type === 'EachBlock') {
+        const iterVar = node.context?.name || node.context?.type === 'Identifier' ? node.context.name : 'item';
+        const indexVar = node.index;
+        // Determine best key expression for unique naming
+        // Priority: explicit key > iter.id > iter.name > index > counter
+        let keyExpr = indexVar || `__idx_${ctx.eachBlocks.length}`;
+        childContext.eachBlocks = [...ctx.eachBlocks, {
+                node,
+                iterVar,
+                indexVar,
+                keyExpr
+            }];
+    }
     // Walk children based on node type
     if (node.children && Array.isArray(node.children)) {
         for (const child of node.children) {
-            walkSvelteAst(child, callback);
+            walkSvelteAst(child, callback, childContext);
         }
     }
     if (node.fragment && node.fragment.nodes) {
         for (const child of node.fragment.nodes) {
-            walkSvelteAst(child, callback);
+            walkSvelteAst(child, callback, childContext);
         }
     }
     if (node.nodes && Array.isArray(node.nodes)) {
         for (const child of node.nodes) {
-            walkSvelteAst(child, callback);
+            walkSvelteAst(child, callback, childContext);
+        }
+    }
+    // Handle {#each} body
+    if (node.body && node.type === 'EachBlock') {
+        if (node.body.nodes) {
+            for (const child of node.body.nodes) {
+                walkSvelteAst(child, callback, childContext);
+            }
+        }
+        else if (Array.isArray(node.body)) {
+            for (const child of node.body) {
+                walkSvelteAst(child, callback, childContext);
+            }
+        }
+        else {
+            walkSvelteAst(node.body, callback, childContext);
+        }
+    }
+    else if (node.body) {
+        if (Array.isArray(node.body)) {
+            for (const child of node.body) {
+                walkSvelteAst(child, callback, childContext);
+            }
+        }
+        else {
+            walkSvelteAst(node.body, callback, childContext);
         }
     }
     // Handle other potential child properties
     if (node.else) {
-        walkSvelteAst(node.else, callback);
+        walkSvelteAst(node.else, callback, childContext);
     }
     if (node.consequent) {
-        walkSvelteAst(node.consequent, callback);
+        walkSvelteAst(node.consequent, callback, childContext);
     }
     if (node.alternate) {
-        walkSvelteAst(node.alternate, callback);
+        walkSvelteAst(node.alternate, callback, childContext);
     }
     if (node.then) {
-        walkSvelteAst(node.then, callback);
+        walkSvelteAst(node.then, callback, childContext);
     }
     if (node.catch) {
-        walkSvelteAst(node.catch, callback);
-    }
-    if (node.body) {
-        if (Array.isArray(node.body)) {
-            for (const child of node.body) {
-                walkSvelteAst(child, callback);
-            }
-        }
-        else {
-            walkSvelteAst(node.body, callback);
-        }
+        walkSvelteAst(node.catch, callback, childContext);
     }
 }
 /**
@@ -113,7 +150,7 @@ ${nextLine ? `${lineNum + 1} | ${nextLine}` : ''}
     const inlineHandlers = new Map();
     let inlineHandlerCounter = 0;
     // Walk through HTML nodes to find event handlers
-    walkSvelteAst(ast.html || ast.fragment, (node) => {
+    walkSvelteAst(ast.html || ast.fragment, (node, walkContext) => {
         if (node.type === "Element" || node.type === "InlineComponent" || node.type === "RegularElement" || node.type === "Component") {
             const attributes = node.attributes || [];
             const nodeName = node.name.toLowerCase();
@@ -245,26 +282,34 @@ ${nextLine ? `${lineNum + 1} | ${nextLine}` : ''}
             if (!foundHandler)
                 return; // No handler found, skip
             let componentName;
+            const isInsideEach = walkContext.eachBlocks.length > 0;
             if (nameAttr) {
                 componentName = getAttributeValue(nameAttr);
             }
             else {
-                // No name attribute - generate a deterministic one based on position
-                // Use the handler name and counter for deterministic naming
+                // No name attribute - generate one
+                // If inside {#each}, we need a DYNAMIC name using the loop variable
                 const positionKey = `${node.name.toLowerCase()}_${autoNameCounter++}`;
-                // If data is provided, use/store in $autoNames for persistence across re-renders
-                if (data) {
-                    if (!data.$autoNames) {
-                        data.$autoNames = {};
-                    }
-                    if (!data.$autoNames[positionKey]) {
-                        data.$autoNames[positionKey] = `__auto_${positionKey}`;
-                    }
-                    componentName = data.$autoNames[positionKey];
+                if (isInsideEach) {
+                    // Inside {#each} - we'll inject a dynamic name expression
+                    // The actual name will be generated at runtime using loop variables
+                    componentName = `__auto_${positionKey}`;
                 }
                 else {
-                    // No data - use deterministic name based on position
-                    componentName = `__auto_${positionKey}`;
+                    // Not in loop - use static deterministic name
+                    // If data is provided, use/store in $autoNames for persistence across re-renders
+                    if (data) {
+                        if (!data.$autoNames) {
+                            data.$autoNames = {};
+                        }
+                        if (!data.$autoNames[positionKey]) {
+                            data.$autoNames[positionKey] = `__auto_${positionKey}`;
+                        }
+                        componentName = data.$autoNames[positionKey];
+                    }
+                    else {
+                        componentName = `__auto_${positionKey}`;
+                    }
                 }
                 // Track this element for source injection
                 elementsNeedingNames.push({
@@ -272,7 +317,12 @@ ${nextLine ? `${lineNum + 1} | ${nextLine}` : ''}
                     name: componentName,
                     handlerName: foundHandler.handlerName,
                     eventType: foundHandler.eventType,
-                    element: node.name.toLowerCase()
+                    element: node.name.toLowerCase(),
+                    eachContext: isInsideEach ? walkContext.eachBlocks.map(b => ({
+                        iterVar: b.iterVar,
+                        indexVar: b.indexVar,
+                        keyExpr: b.keyExpr
+                    })) : undefined
                 });
             }
             // Add to handlers map
@@ -290,11 +340,36 @@ ${nextLine ? `${lineNum + 1} | ${nextLine}` : ''}
     // Sort by position descending so we don't mess up offsets
     let processedSource = source;
     const sortedElements = [...elementsNeedingNames].sort((a, b) => b.node.start - a.node.start);
-    for (const { node, name } of sortedElements) {
+    for (const { node, name, eachContext } of sortedElements) {
         // Find the position right after the opening tag name
         // e.g., <button ...> -> insert after "button"
         const tagEnd = node.start + 1 + node.name.length; // +1 for '<'
-        processedSource = processedSource.slice(0, tagEnd) + ` name="${name}"` + processedSource.slice(tagEnd);
+        let nameAttrValue;
+        if (eachContext && eachContext.length > 0) {
+            // Inside {#each} - generate dynamic name expression using loop variables
+            // Build a unique key from all nested loop contexts
+            // Priority: item.id > item.name > index
+            const keyParts = [name];
+            for (let i = 0; i < eachContext.length; i++) {
+                const ctx = eachContext[i];
+                // Use index variable if available, otherwise use a property from iter var
+                if (ctx.indexVar) {
+                    keyParts.push(`\${${ctx.indexVar}}`);
+                }
+                else {
+                    // Try common unique identifiers: id, name, key, value
+                    // Using the iter var directly as fallback
+                    keyParts.push(`\${${ctx.iterVar}?.id ?? ${ctx.iterVar}?.name ?? ${ctx.iterVar}?.key ?? ${ctx.iterVar}?.value ?? JSON.stringify(${ctx.iterVar}).slice(0,20)}`);
+                }
+            }
+            // Use backtick template literal for dynamic name
+            nameAttrValue = `{\`${keyParts.join('_')}\`}`;
+        }
+        else {
+            // Static name - use quotes
+            nameAttrValue = `"${name}"`;
+        }
+        processedSource = processedSource.slice(0, tagEnd) + ` name=${nameAttrValue}` + processedSource.slice(tagEnd);
     }
     // Extract declared props from $props() destructuring
     const declaredProps = [];
@@ -917,16 +992,14 @@ function createHandlerContext(scriptContent, initialData = {}, component, ctx, s
           });
         }
         
-        // Rate-limit aware edit function with retry
-        function __safeEdit__(editFn, retryCount) {
+        // Rate-limit aware edit function with retry and enhanced error handling
+        function __safeEdit__(editFn, retryCount, componentsForError) {
           retryCount = retryCount || 0;
           var maxRetries = 3;
           
           return editFn().then(function(result) {
-            console.log("[DBI-Svelte DEBUG] __safeEdit__ success");
             return result;
           }).catch(function(err) {
-            console.error("[DBI-Svelte DEBUG] __safeEdit__ error:", err.message || err);
             // Check for rate limit (429)
             if (err.status === 429 || (err.message && err.message.includes('rate limit'))) {
               var retryAfter = err.retry_after || err.retryAfter || 1;
@@ -937,14 +1010,59 @@ function createHandlerContext(scriptContent, initialData = {}, component, ctx, s
                 setTimeout(function() {
                   __isRateLimited__ = false;
                   if (retryCount < maxRetries) {
-                    resolve(__safeEdit__(editFn, retryCount + 1));
+                    resolve(__safeEdit__(editFn, retryCount + 1, componentsForError));
                   } else {
                     resolve();
                   }
                 }, retryAfter * 1000);
               });
             }
-            // Log and re-throw non-rate-limit errors
+            
+            // Check if it's a component validation error and enhance it
+            if (err.code === 50035 || err.rawError?.code === 50035 || 
+                (err.message && (err.message.includes('Invalid Form Body') || err.message.includes('BASE_TYPE')))) {
+              // Create enhanced error message
+              var errorMsg = err.message || '';
+              var enhancedMsg = '\\n╔══════════════════════════════════════════════════════════════╗\\n';
+              enhancedMsg += '║           Discord Components V2 Validation Error             ║\\n';
+              enhancedMsg += '╠══════════════════════════════════════════════════════════════╣\\n';
+              
+              // Parse error paths from message
+              var errorLines = errorMsg.split('\\n');
+              for (var i = 0; i < errorLines.length; i++) {
+                var line = errorLines[i];
+                var match = line.match(/([\\w\\[\\]\\.]+)\\[([A-Z_]+)\\]:\\s*(.+)/);
+                if (match) {
+                  var path = match[1];
+                  var code = match[2];
+                  var msg = match[3];
+                  
+                  enhancedMsg += '║\\n';
+                  enhancedMsg += '║ ❌ Path: ' + path + '\\n';
+                  enhancedMsg += '║ ├─ Code: ' + code + '\\n';
+                  enhancedMsg += '║ ├─ Message: ' + msg + '\\n';
+                  
+                  // Add helpful hints based on error code
+                  if (code === 'BASE_TYPE_REQUIRED') {
+                    enhancedMsg += '║ └─ Fix: This field is required - check if the element has all required attributes\\n';
+                  } else if (code === 'BASE_TYPE_BAD_LENGTH') {
+                    enhancedMsg += '║ └─ Fix: Wrong number of items - Discord has min/max limits for components\\n';
+                  } else if (code.includes('MAX_LENGTH') || code.includes('MIN_LENGTH')) {
+                    enhancedMsg += '║ └─ Fix: Content length issue - adjust text or number of items\\n';
+                  }
+                }
+              }
+              
+              enhancedMsg += '║\\n';
+              enhancedMsg += '╚══════════════════════════════════════════════════════════════╝';
+              
+              var enhancedError = new Error('[DBI-Svelte] Component validation error:\\n' + enhancedMsg + '\\n\\nOriginal: ' + errorMsg);
+              enhancedError.originalError = err;
+              enhancedError.type = 'discord-component-validation';
+              throw enhancedError;
+            }
+            
+            // Re-throw other errors
             throw err;
           });
         }
@@ -987,28 +1105,16 @@ function createHandlerContext(scriptContent, initialData = {}, component, ctx, s
         
         // Actual render execution
         async function __executeRender__() {
-          console.log("[DBI-Svelte DEBUG] __executeRender__ called");
           // Run pre-render callbacks (async, awaited)
           await __runPreRender__();
           
-          console.log("[DBI-Svelte DEBUG] Calling toJSON with data:", JSON.stringify(__data__).substring(0, 200));
           var components = await __component__.toJSON({ data: __data__ });
-          console.log("[DBI-Svelte DEBUG] toJSON returned", components ? "components" : "null");
           var result;
           
           // Try to use current interaction if available
           if (__ctx__ && __ctx__.interaction) {
             try {
               var i = __ctx__.interaction;
-              console.log("[DBI-Svelte DEBUG] interaction available, replied:", i.replied, "deferred:", i.deferred, "__interactionDeferred__:", __interactionDeferred__);
-              console.log("[DBI-Svelte DEBUG] components count:", components ? components.length : 0);
-              if (components && components[0]) {
-                console.log("[DBI-Svelte DEBUG] first component type:", components[0].type);
-                // Log first text content if it's a text_display
-                if (components[0].type === 10 && components[0].content) {
-                  console.log("[DBI-Svelte DEBUG] first text content:", components[0].content.substring(0, 100));
-                }
-              }
               
               // Update last message reference
               if (i.message) {
@@ -1017,23 +1123,21 @@ function createHandlerContext(scriptContent, initialData = {}, component, ctx, s
               
               // Check if interaction was deferred (our flag) or Discord.js flags
               if (i.replied || i.deferred || __interactionDeferred__) {
-                console.log("[DBI-Svelte DEBUG] Using message.edit (deferred path)");
                 // Already replied/deferred, use message.edit with rate limit handling
                 result = await __safeEdit__(function() {
                   return i.message.edit({
                     components: components,
                     flags: ["IsComponentsV2"],
                   });
-                });
+                }, 0, components);
               } else {
-                console.log("[DBI-Svelte DEBUG] Using interaction.update");
                 // Not replied yet, use update with rate limit handling
                 result = await __safeEdit__(function() {
                   return i.update({
                     components: components,
                     flags: ["IsComponentsV2"],
                   });
-                });
+                }, 0, components);
               }
               
               // Run after-render callbacks
@@ -1052,7 +1156,7 @@ function createHandlerContext(scriptContent, initialData = {}, component, ctx, s
                 components: components,
                 flags: ["IsComponentsV2"],
               });
-            });
+            }, 0, components);
             
             // Run after-render callbacks
             __runAfterRender__();
@@ -1185,10 +1289,8 @@ function createHandlerContext(scriptContent, initialData = {}, component, ctx, s
                   // After the reply completes, flush any pending renders using throttled render
                   if (result && typeof result.then === 'function') {
                     result.then(function() {
-                      console.log("[DBI-Svelte DEBUG] " + prop + " completed, hasDataChanges:", __hasDataChanges__, "autoRenderEnabled:", __autoRenderEnabled__);
                       if (__hasDataChanges__ && __autoRenderEnabled__) {
                         __hasDataChanges__ = false;
-                        console.log("[DBI-Svelte DEBUG] Triggering render after " + prop);
                         // Use throttled render which handles rate limits
                         __throttledRender__(false);
                       }