@mostfeatured/dbi 0.2.11 → 0.2.12

package/package.json

@@ -15,7 +15,7 @@
     "tslib": "^2.6.3"
   },
   "name": "@mostfeatured/dbi",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "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/svelteRenderer.ts

@@ -87,8 +87,8 @@ export async function renderSvelteComponent(
       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)
+    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}">`;
     });

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",