@mostfeatured/dbi 0.2.11 → 0.2.13

package/package.json

@@ -15,7 +15,7 @@
     "tslib": "^2.6.3"
   },
   "name": "@mostfeatured/dbi",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
   "typesVersions": {

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

@@ -100,9 +100,10 @@ function parseStringSelect(dbi: DBI<NamespaceEnums>, dbiName: string, stringSele
   let minValues = parseInt(stringSelect.getAttribute("min-values"));
   let maxValues = parseInt(stringSelect.getAttribute("max-values"));
 
-  let options = Array.from(stringSelect.querySelectorAll("option")).map(option => {
+  // Support both <option> and <select-option> elements (Svelte may output either)
+  let options = Array.from(stringSelect.querySelectorAll("option, select-option")).map(option => {
     return {
-      label: getCleanTextContent(option),
+      label: option.getAttribute("label") || getCleanTextContent(option),
       value: option.getAttribute("value"),
       description: option.getAttribute("description"),
       emoji: option.getAttribute("emoji"),
@@ -125,7 +126,8 @@ function parseNonStringSelect(dbi: DBI<NamespaceEnums>, dbiName: string, userSel
   let minValues = parseInt(userSelect.getAttribute("min-values"));
   let maxValues = parseInt(userSelect.getAttribute("max-values"));
 
-  let options = Array.from(userSelect.querySelectorAll("option")).map(option => {
+  // Support both <option> and <select-option> elements (Svelte may output either)
+  let options = Array.from(userSelect.querySelectorAll("option, select-option")).map(option => {
     return {
       id: getCleanTextContent(option) || option.getAttribute("id"),
       type: option.getAttribute("type")
@@ -264,14 +266,19 @@ function parseElement(dbi: DBI<NamespaceEnums>, dbiName: string, element: Elemen
     case "BUTTON":
       return parseButton(dbi, dbiName, element);
     case "STRING-SELECT":
+    case "STRING-SELECT-MENU":
       return parseStringSelect(dbi, dbiName, element);
     case "USER-SELECT":
+    case "USER-SELECT-MENU":
       return parseNonStringSelect(dbi, dbiName, element, ComponentType.UserSelect);
     case "ROLE-SELECT":
+    case "ROLE-SELECT-MENU":
       return parseNonStringSelect(dbi, dbiName, element, ComponentType.RoleSelect);
     case "MENTIONABLE-SELECT":
+    case "MENTIONABLE-SELECT-MENU":
       return parseNonStringSelect(dbi, dbiName, element, ComponentType.MentionableSelect);
     case "CHANNEL-SELECT":
+    case "CHANNEL-SELECT-MENU":
       return parseNonStringSelect(dbi, dbiName, element, ComponentType.ChannelSelect);
     case "SECTION":
       return parseSection(dbi, dbiName, element);

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

@@ -104,15 +104,28 @@ export async function parseSvelteComponent(source: string, data?: Record<string,
         attr.type === "Attribute" && attr.name === "name"
       );
 
-      // Check if element has an onclick/onchange handler and get the handler info
+      // Check if element has an onclick/onchange/handler and get the handler info
       let foundHandler: { eventType: string; handlerName: string } | null = null;
 
       for (const attr of attributes) {
         const isEventHandler = attr.type === "EventHandler";
         const isOnAttribute = attr.type === "Attribute" && attr.name && attr.name.startsWith("on");
-
-        if (isEventHandler || isOnAttribute) {
-          const eventType = attr.name;
+        const isHandlerAttribute = attr.type === "Attribute" && attr.name === "handler";
+
+        if (isEventHandler || isOnAttribute || isHandlerAttribute) {
+          // For "handler" attribute, use the element type to determine eventType
+          // button -> onclick, select -> onchange
+          let eventType = attr.name;
+          if (isHandlerAttribute) {
+            const elementName = node.name.toLowerCase();
+            if (elementName === "button") {
+              eventType = "onclick";
+            } else if (elementName.includes("select")) {
+              eventType = "onchange";
+            } else {
+              eventType = "handler"; // fallback
+            }
+          }
           let handlerName = "";
 
           if (attr.type === "Attribute" && Array.isArray(attr.value)) {

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

@@ -82,16 +82,24 @@ export async function renderSvelteComponent(
     }
 
     // Add state ref to all elements with name attribute (buttons, selects)
+    // This includes both manual names and auto-generated names from svelteParser
     html = html.replace(/<button([^>]*name="[^"]*"[^>]*)>/g, (match, attrs) => {
       // Check if it already has data attributes
       if (attrs.includes('data-1:')) return match;
       return `<button${attrs} data-1:ref="${stateRefId}">`;
     });
-    // Also handle select elements
-    html = html.replace(/<(string-select|user-select|role-select|channel-select|mentionable-select)([^>]*name="[^"]*"[^>]*)>/g, (match, tag, attrs) => {
+    // Also handle select elements (with optional -menu suffix for Svelte compatibility)
+    // Supports: string-select, user-select, role-select, channel-select, mentionable-select
+    // Both with and without -menu suffix (e.g., string-select-menu or string-select)
+    html = html.replace(/<(string-select(?:-menu)?|user-select(?:-menu)?|role-select(?:-menu)?|channel-select(?:-menu)?|mentionable-select(?:-menu)?)([^>]*name="[^"]*"[^>]*)>/g, (match, tag, attrs) => {
       if (attrs.includes('data-1:')) return match;
       return `<${tag}${attrs} data-1:ref="${stateRefId}">`;
     });
+    // Handle modal elements with name attribute
+    html = html.replace(/<modal([^>]*name="[^"]*"[^>]*)>/g, (match, attrs) => {
+      if (attrs.includes('data-1:')) return match;
+      return `<modal${attrs} data-1:ref="${stateRefId}">`;
+    });
   }
 
   // Parse the rendered HTML to Discord components

package/test/index.ts

@@ -3,7 +3,7 @@ import path from "path";
 
 const dbi = createDBI("svelte", {
   discord: {
-    token: "YOUR_BOT_TOKEN_HERE",
+    token: process.env.DISCORD_TOKEN || "",
     options: {
       intents: [
         "GuildMessages",
@@ -26,7 +26,8 @@ dbi.register(({ ChatInput, HTMLComponentsV2 }) => {
   HTMLComponentsV2({
     name: "product-showcase",
     mode: 'svelte',
-    file: path.join(__dirname, "product-showcase.svelte")
+    file: path.join(__dirname, "product-showcase.svelte"),
+    onExecute(ctx) {}
   });
 
   // Test command