create-discord-https 1.0.0

package/templates/node/src/commands/utility/help.js

@@ -0,0 +1,73 @@
+import {
+  MessageFlags,
+  MediaGalleryBuilder,
+  MediaGalleryItemBuilder,
+  TextDisplayBuilder,
+  SeparatorBuilder,
+  SeparatorSpacingSize,
+  ButtonBuilder,
+  ButtonStyle,
+  ActionRowBuilder,
+} from "discord.https";
+
+// https://discordhttps.js.org/classes/interactionRouter.InteractionRouter.html
+import { InteractionRouter } from "discord.https/router";
+
+const router = new InteractionRouter();
+
+// https://discord.com/developers/docs/change-log/2025-04-22-components-v2
+const components = [
+  new MediaGalleryBuilder().addItems(
+    new MediaGalleryItemBuilder().setURL(
+      "https://raw.githubusercontent.com/discordhttps/discord.https/refs/heads/main/assets/logo.png"
+    )
+  ),
+  new TextDisplayBuilder().setContent(
+    "**Discord.https** is a robust, modular library for implementing Discord HTTP interactions."
+  ),
+  new SeparatorBuilder()
+    .setSpacing(SeparatorSpacingSize.Large)
+    .setDivider(true),
+  new TextDisplayBuilder().setContent(
+    "## Commands Available in This Template\n- /help\n- /index\n- /info\n- Context User Command: Profile (right-click a user and select Apps > Profile)"
+  ),
+  new TextDisplayBuilder().setContent("Related Links"),
+  new ActionRowBuilder().addComponents(
+    new ButtonBuilder()
+      .setStyle(ButtonStyle.Link)
+      .setLabel("Github")
+      .setEmoji({
+        name: "⭐",
+      })
+      .setURL("https://google.com"),
+    new ButtonBuilder()
+      .setStyle(ButtonStyle.Link)
+      .setLabel("Node Package")
+      .setEmoji({
+        name: "📦",
+      })
+      .setURL("https://www.npmjs.com/package/discord.https"),
+    new ButtonBuilder()
+      .setStyle(ButtonStyle.Link)
+      .setLabel("Documentation")
+      .setEmoji({
+        name: "📘",
+      })
+      .setURL("https://discordhttps.js.org/")
+  ),
+];
+
+// https://discordhttps.js.org/classes/interactionRouter.InteractionRouter.html#command
+router.command(
+  (builder) =>
+    builder
+      .setName("help")
+      .setDescription("Gives you information about discord.https"),
+  async (interaction) =>
+    await interaction.reply({
+      flags: MessageFlags.IsComponentsV2,
+      components: components,
+    })
+);
+
+export default router;

package/templates/node/src/commands/utility/info.js

@@ -0,0 +1,60 @@
+import {
+  MessageFlags,
+  MediaGalleryBuilder,
+  MediaGalleryItemBuilder,
+  TextDisplayBuilder,
+  SeparatorBuilder,
+  SeparatorSpacingSize,
+  ButtonBuilder,
+  ButtonStyle,
+  ActionRowBuilder,
+} from "discord.https";
+
+// https://discordhttps.js.org/classes/interactionRouter.InteractionRouter.html
+import { InteractionRouter } from "discord.https/router";
+
+const router = new InteractionRouter();
+
+// https://discord.com/developers/docs/change-log/2025-04-22-components-v2
+const components = [
+  new TextDisplayBuilder().setContent("Served via `src/utility/info.js`"),
+  new TextDisplayBuilder().setContent("Related Links"),
+  new ActionRowBuilder().addComponents(
+    new ButtonBuilder()
+      .setStyle(ButtonStyle.Link)
+      .setLabel("Github")
+      .setEmoji({
+        name: "⭐",
+      })
+      .setURL("https://google.com"),
+    new ButtonBuilder()
+      .setStyle(ButtonStyle.Link)
+      .setLabel("Node Package")
+      .setEmoji({
+        name: "📦",
+      })
+      .setURL("https://www.npmjs.com/package/discord.https"),
+    new ButtonBuilder()
+      .setStyle(ButtonStyle.Link)
+      .setLabel("Documentation")
+      .setEmoji({
+        name: "📘",
+      })
+      .setURL("https://discordhttps.js.org/")
+  ),
+];
+
+// https://discordhttps.js.org/classes/interactionRouter.InteractionRouter.html#command
+router.command(
+  (builder) =>
+    builder
+      .setName("info")
+      .setDescription("Gives you information about discord.https"),
+  async (interaction) =>
+    await interaction.reply({
+      flags: MessageFlags.IsComponentsV2,
+      components: components,
+    })
+);
+
+export default router;

package/templates/node/src/commands/utility/profile.js

@@ -0,0 +1,36 @@
+// https://discordhttps.js.org/classes/interactionRouter.InteractionRouter.html
+import { InteractionRouter } from "discord.https/router";
+
+const router = new InteractionRouter();
+
+// // https://discordhttps.js.org/classes/interactionRouter.InteractionRouter.html#usercontextmenu
+
+// https://discord.com/developers/docs/reference#image-formatting
+
+router.userContextMenu(
+  (builder) => builder.setName("profile"),
+  async (interaction) => {
+    const user = interaction.targetUser;
+
+    // In the case of endpoints that support GIFs, the hash will begin with a_ if it is available in GIF format.
+    const avatarFormat =
+      user.avatar && user.avatar.startsWith("a_") ? "gif" : "png";
+
+    const avatarUrl = user.avatar
+      ? `/avatars/${user.id}/${user.avatar}.${avatarFormat}`
+      
+      : // In the case of the Default User Avatar endpoint, the value for index depends on whether the user is migrated to the new username system.
+        // For users on the new username system, index will be (user_id >> 22) % 6.
+        // For users on the legacy username system, index will be discriminator % 5.
+        `/embed/avatars/${
+          Number(user.discriminator)
+            ? Number(user.discriminator) % 5
+            : (BigInt(user.id) >> 22n) % 6n
+        }.png`;
+
+    // https://discord.com/developers/docs/reference#image-formatting
+    await interaction.reply(`https://cdn.discordapp.com/${avatarUrl}`);
+  }
+);
+
+export default router;

package/templates/node-ts/README.md

@@ -0,0 +1,10 @@
+## Discord.https
+
+By default, the URL is: `<URL>/interactions`
+
+note: You need to initialize the TypeScript build.
+
+**A layer of local tunnel is embedded into the code for easier development**. This means requests pass through multiple layers: Discord → local tunnel → local Vercel server on your computer → your functions. The Induced latency is usually just a few milliseconds and depends on your internet connection. **This local tunneling layer only runs on your machine during development and can be removed if desired.**
+
+For more information, view `DevLayer.ts` or, `DevLayer.js`
+

package/templates/node-ts/_gitignore

@@ -0,0 +1,3 @@
+node_modules
+.git
+.env

package/templates/node-ts/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "vercel",
+  "version": "1.0.0",
+  "description": "Discord HTTPS interaction callback bot powered by discord.https",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@discordhttps/vercel-adapter": "^1.0.4",
+    "@vercel/functions": "^3.1.1",
+    "chalk": "^5.6.2",
+    "discord.https": "^3.0.15"
+  },
+  "devDependencies": {
+    "@types/localtunnel": "^2.0.4",
+    "fast-deep-equal": "^3.1.3",
+    "localtunnel": "^2.0.2",
+    "@types/node": "^24.7.0"
+  }
+}

package/templates/node-ts/src/DevLayer.ts

@@ -0,0 +1,135 @@
+/*
+
+------------It is recommended not to modify this layer of code without proper knowledge------------
+
+
+For Info:
+
+Summary: This code is a development layer designed to ease development, with automation features such as auto local tunnel and automatic command registration.
+
+
+1. Automatic command registration
+
+This layer provides support for automatic command registration by storing the last run command definitions in a file.
+Later, these definitions are read and compared with the current command definitions.
+If they are the same, there is no need to re-register, as nothing has changed.
+If they are different, the command definitions have changed and require re-registration.
+
+
+2.Local Tunnel
+
+Local tunnels establish secure pathways between your localhost and the Internet, making it possible to expose web applications for access from anywhere.
+
+What LocalTunnel does:
+
+- Imagine you’re running a website on your computer at http://localhost:3000.
+- Normally, only you can see it because it’s “local” — it is only on your computer.
+- LocalTunnel gives it a public URL, like https://awesome-name.domain.com, so discord can send a request to your computer.
+
+
+Why this matters for Discord:
+
+- Normally, when you open Discord, your computer sends requests to Discord’s servers — everything works because Discord is public.
+- But if you want Discord to **send data to your computer** (like a webhook), your computer needs a public address.
+- LocalTunnel provides that public URL, so Discord knows where to send the requests.
+
+Why it’s useful:
+
+- Testing webhooks (like Discord)
+- Debugging APIs without deploying to a server
+*/
+
+export async function tunnelLayer() {
+  if (process.env.NODE_ENV !== "production") {
+    const chalk = await import("chalk");
+    const localtunnel = (await import("localtunnel")).default;
+    const tunnel = await localtunnel({
+      port: 3000,
+      subdomain: "discord-https",
+    });
+    console.log(
+      chalk.default.yellow(
+        "[DevLayer] Warning: This URL is intended only for testing and developing your bot.\n" +
+          "Never use it in production or hosting.\n" +
+          "1. It may be slower, but this is not an issue for bot development.\n" +
+          "2. This message should not appear in a production/hosting environment. If it does, your environment variables are incorrect and need to be fixed.\n" +
+          "For more information, visit https://discord.com/invite/pSgfJ4K5ej\n\n"
+      )
+    );
+    console.log(
+      chalk.default.blue(
+        `[DevLayer] Interactions Endpoint URL: ${tunnel.url}/interactions\n`
+      )
+    );
+
+    console.log(
+      chalk.default.yellow(
+        `[DevLayer] Modify your interaction url with the above\n`
+      )
+    );
+
+    process.on("SIGINT", async () => {
+      tunnel.close();
+      console.log("[DevLayer] Tunnel has been shut down");
+      process.exit();
+    });
+  }
+}
+
+export async function commandRegistrarLayer(client: any, guildId?: string) {
+  if (process.env.NODE_ENV !== "production") {
+    const FILENAME = "__dev_layer_cache__";
+    const chalk = (await import("chalk")).default;
+    const isEqual = (await import("fast-deep-equal")).default;
+    const { writeFile, access, readFile, constants } = await import(
+      "node:fs/promises"
+    );
+    const { join } = await import("node:path");
+
+    let localDump = [];
+    const filePath = join(import.meta.dirname, FILENAME);
+
+    try {
+      await access(filePath, constants.F_OK);
+      const contains = await readFile(filePath, {
+        encoding: "utf-8",
+      });
+      const json = JSON.parse(contains);
+      localDump = json;
+    } catch {
+      await writeFile(filePath, "[]");
+    }
+
+    try {
+      // https://github.com/discordhttps/discord.https/blob/main/src/interactionRouter/internal.ts#L271
+      if (
+        !isEqual(
+          localDump,
+          // To remove undefined properties
+          JSON.parse(JSON.stringify(client.router.CommandDefinitions))
+        )
+      ) {
+        console.log(
+          chalk.yellowBright(
+            `[DevLayer] Command change detected, re-registering with discord in ${
+              guildId ? `Guild - ${guildId}` : "Global"
+            }...`
+          )
+        );
+        const registar = await client.getRegistar();
+
+        if (guildId) {
+          await registar.localSlashRegistar(guildId);
+        } else {
+          await registar.globalSlashRegistar();
+        }
+        writeFile(filePath, JSON.stringify(client.router.CommandDefinitions));
+        console.log(
+          chalk.greenBright("[DevLayer] Commands synced successfully!")
+        );
+      }
+    } catch (err) {
+      console.error("[DevLayer] Failed to sync commands:", err);
+    }
+  }
+}

package/templates/node-ts/src/commands/fun/joke.ts

@@ -0,0 +1,125 @@
+// This code includes some upper-basic level concepts. If you are an absolute beginner, you may struggle to understand it.
+
+import {
+  MessageFlags,
+  MediaGalleryBuilder,
+  MediaGalleryItemBuilder,
+  TextDisplayBuilder,
+  SeparatorBuilder,
+  SeparatorSpacingSize,
+  ButtonBuilder,
+  ButtonStyle,
+  ActionRowBuilder,
+} from "discord.https";
+
+// https://discordhttps.js.org/classes/interactionRouter.InteractionRouter.html
+import { InteractionRouter } from "discord.https/router";
+
+const router = new InteractionRouter();
+
+// https://discord.com/developers/docs/change-log/2025-04-22-components-v2
+const header = [
+  new MediaGalleryBuilder().addItems(
+    new MediaGalleryItemBuilder().setURL(
+      "https://raw.githubusercontent.com/discordhttps/discord.https/refs/heads/main/assets/logo.png"
+    )
+  ),
+  new TextDisplayBuilder().setContent(
+    "**Discord.https** is a robust, modular library for implementing Discord HTTP interactions."
+  ),
+  new SeparatorBuilder()
+    .setSpacing(SeparatorSpacingSize.Large)
+    .setDivider(true),
+];
+
+const footer = [
+  new SeparatorBuilder()
+    .setSpacing(SeparatorSpacingSize.Large)
+    .setDivider(true),
+  new ActionRowBuilder().addComponents(
+    new ButtonBuilder()
+      .setStyle(ButtonStyle.Link)
+      .setLabel("Github")
+      .setEmoji({
+        name: "⭐",
+      })
+      .setURL("https://google.com"),
+    new ButtonBuilder()
+      .setStyle(ButtonStyle.Link)
+      .setLabel("Node Package")
+      .setEmoji({
+        name: "📦",
+      })
+      .setURL("https://www.npmjs.com/package/discord.https"),
+    new ButtonBuilder()
+      .setStyle(ButtonStyle.Link)
+      .setLabel("Documentation")
+      .setEmoji({
+        name: "📘",
+      })
+      .setURL("https://discordhttps.js.org/")
+  ),
+];
+// https://discordhttps.js.org/classes/interactionRouter.InteractionRouter.html#command
+router.command(
+  (builder) =>
+    builder
+      .setName("jokes")
+      .setDescription("Gives you random joke")
+      .addStringOption((option) =>
+        option
+          .setName("type")
+          .setDescription("Type of joke")
+          .addChoices(
+            { name: "general", value: "general" },
+            { name: "knock-knock", value: "knock-knock" },
+            { name: "programming", value: "programming" },
+            { name: "dad", value: "dad" }
+          )
+          .setRequired(true)
+      ),
+  async (interaction) => {
+    // Get the value of the "type" option from the slash command.
+    // The 'true' argument makes this required; if it's missing, an error is thrown.
+    const option = interaction.options.getString("type", true);
+
+    // Fetch a joke from the API based on the type (e.g., "general", "programming", etc.)
+    // This returns a Promise, so we await it to get the response.
+    // Simplest explanation for beginners, https://www.geeksforgeeks.org/node-js/rest-api-introduction
+    const response = await fetch(
+      `https://official-joke-api.appspot.com/jokes/${option}/random`
+    );
+
+    // Convert the response into JSON format.
+    // This allows us to access the joke's content as JavaScript objects.
+    // This process is called deserilization,
+
+    // The received data is in the format of an array: [{ setup: "", punchline: "" }]
+    // [body] uses array destructuring. A simple equivalent would be:
+    // var body = await response.json();
+    // body = body[0];
+
+    const [body] = (await response.json()) as [
+      {
+        type: string;
+        setup: string;
+        punchline: string;
+        id: number;
+      }
+    ];
+
+    // Create a message component (or text display) with the joke content.
+    const middlePart = new TextDisplayBuilder().setContent(
+      `**Joke**: ${body.setup}\n**Punchline**: ${body.punchline}`
+    );
+    // send the joke to the user.
+    await interaction.reply({
+      // - flags: special options for the message (e.g., IsComponentsV2 indicate newer component handling)
+      flags: MessageFlags.IsComponentsV2,
+      //   Here we spread the arrays with `...` to flatten them into a single array.
+      components: [...header, middlePart, ...footer],
+    });
+  }
+);
+
+export default router;

package/templates/node-ts/src/commands/index.ts

@@ -0,0 +1,14 @@
+import { InteractionRouterCollector } from "discord.https/router";
+
+// Recommend using PascalCase and ending with the 'Route' suffix
+// for variable naming convention
+
+import JokeRoute from "./fun/joke.js";
+import PingRoute from "./reply/ping.js";
+import UtilityRoute from "./utility/index.js";
+
+export default new InteractionRouterCollector().register(
+  JokeRoute,
+  PingRoute,
+  UtilityRoute
+);

package/templates/node-ts/src/commands/reply/ping.ts

@@ -0,0 +1,12 @@
+// https://discordhttps.js.org/classes/interactionRouter.InteractionRouter.html
+import { InteractionRouter } from "discord.https/router";
+
+const router = new InteractionRouter();
+
+// https://discordhttps.js.org/classes/interactionRouter.InteractionRouter.html#command
+router.command(
+  (builder) => builder.setName("ping").setDescription("says pong!"),
+  async (interaction) => await interaction.reply("Pong! 🏓")
+);
+
+export default router;

package/templates/node-ts/src/commands/utility/help.ts

@@ -0,0 +1,73 @@
+import {
+  MessageFlags,
+  MediaGalleryBuilder,
+  MediaGalleryItemBuilder,
+  TextDisplayBuilder,
+  SeparatorBuilder,
+  SeparatorSpacingSize,
+  ButtonBuilder,
+  ButtonStyle,
+  ActionRowBuilder,
+} from "discord.https";
+
+// https://discordhttps.js.org/classes/interactionRouter.InteractionRouter.html
+import { InteractionRouter } from "discord.https/router";
+
+const router = new InteractionRouter();
+
+// https://discord.com/developers/docs/change-log/2025-04-22-components-v2
+const components = [
+  new MediaGalleryBuilder().addItems(
+    new MediaGalleryItemBuilder().setURL(
+      "https://raw.githubusercontent.com/discordhttps/discord.https/refs/heads/main/assets/logo.png"
+    )
+  ),
+  new TextDisplayBuilder().setContent(
+    "**Discord.https** is a robust, modular library for implementing Discord HTTP interactions."
+  ),
+  new SeparatorBuilder()
+    .setSpacing(SeparatorSpacingSize.Large)
+    .setDivider(true),
+  new TextDisplayBuilder().setContent(
+    "## Commands Available in This Template\n- /help\n- /index\n- /info\n- Context User Command: Profile (right-click a user and select Apps > Profile)"
+  ),
+  new TextDisplayBuilder().setContent("Related Links"),
+  new ActionRowBuilder().addComponents(
+    new ButtonBuilder()
+      .setStyle(ButtonStyle.Link)
+      .setLabel("Github")
+      .setEmoji({
+        name: "⭐",
+      })
+      .setURL("https://google.com"),
+    new ButtonBuilder()
+      .setStyle(ButtonStyle.Link)
+      .setLabel("Node Package")
+      .setEmoji({
+        name: "📦",
+      })
+      .setURL("https://www.npmjs.com/package/discord.https"),
+    new ButtonBuilder()
+      .setStyle(ButtonStyle.Link)
+      .setLabel("Documentation")
+      .setEmoji({
+        name: "📘",
+      })
+      .setURL("https://discordhttps.js.org/")
+  ),
+];
+
+// https://discordhttps.js.org/classes/interactionRouter.InteractionRouter.html#command
+router.command(
+  (builder) =>
+    builder
+      .setName("help")
+      .setDescription("Gives you information about discord.https"),
+  async (interaction) =>
+    await interaction.reply({
+      flags: MessageFlags.IsComponentsV2,
+      components: components,
+    })
+);
+
+export default router;

package/templates/node-ts/src/commands/utility/index.ts

@@ -0,0 +1,14 @@
+import { InteractionRouterCollector } from "discord.https/router";
+
+// Recommend using PascalCase and ending with the 'Route' suffix
+// for variable naming convention
+
+import HelpRoute from "./help.js";
+import InfoRoute from "./info.js";
+import ProfileRoute from "./profile.js";
+
+export default new InteractionRouterCollector().register(
+  HelpRoute,
+  InfoRoute,
+  ProfileRoute
+);

package/templates/node-ts/src/commands/utility/info.ts

@@ -0,0 +1,56 @@
+import {
+  MessageFlags,
+  TextDisplayBuilder,
+  ButtonBuilder,
+  ButtonStyle,
+  ActionRowBuilder,
+} from "discord.https";
+
+// https://discordhttps.js.org/classes/interactionRouter.InteractionRouter.html
+import { InteractionRouter } from "discord.https/router";
+
+const router = new InteractionRouter();
+
+// https://discord.com/developers/docs/change-log/2025-04-22-components-v2
+const components = [
+  new TextDisplayBuilder().setContent("Served via `src/utility/info.js`"),
+  new TextDisplayBuilder().setContent("Related Links"),
+  new ActionRowBuilder().addComponents(
+    new ButtonBuilder()
+      .setStyle(ButtonStyle.Link)
+      .setLabel("Github")
+      .setEmoji({
+        name: "⭐",
+      })
+      .setURL("https://google.com"),
+    new ButtonBuilder()
+      .setStyle(ButtonStyle.Link)
+      .setLabel("Node Package")
+      .setEmoji({
+        name: "📦",
+      })
+      .setURL("https://www.npmjs.com/package/discord.https"),
+    new ButtonBuilder()
+      .setStyle(ButtonStyle.Link)
+      .setLabel("Documentation")
+      .setEmoji({
+        name: "📘",
+      })
+      .setURL("https://discordhttps.js.org/")
+  ),
+];
+
+// https://discordhttps.js.org/classes/interactionRouter.InteractionRouter.html#command
+router.command(
+  (builder) =>
+    builder
+      .setName("info")
+      .setDescription("Gives you information about discord.https"),
+  async (interaction) =>
+    await interaction.reply({
+      flags: MessageFlags.IsComponentsV2,
+      components: components,
+    })
+);
+
+export default router;

package/templates/node-ts/src/commands/utility/profile.ts

@@ -0,0 +1,35 @@
+// https://discordhttps.js.org/classes/interactionRouter.InteractionRouter.html
+import { InteractionRouter } from "discord.https/router";
+
+const router = new InteractionRouter();
+
+// https://discordhttps.js.org/classes/interactionRouter.InteractionRouter.html#usercontextmenu
+
+// https://discord.com/developers/docs/reference#image-formatting
+
+router.userContextMenu(
+  (builder) => builder.setName("profile"),
+  async (interaction) => {
+    const user = interaction.targetUser;
+
+    // In the case of endpoints that support GIFs, the hash will begin with a_ if it is available in GIF format.
+    const avatarFormat =
+      user.avatar && user.avatar!.startsWith("a_") ? "gif" : "png";
+
+    const avatarUrl = user.avatar
+      ? `/avatars/${user.id}/${user.avatar}.${avatarFormat}`
+      : // In the case of the Default User Avatar endpoint, the value for index depends on whether the user is migrated to the new username system.
+        // For users on the new username system, index will be (user_id >> 22) % 6.
+        // For users on the legacy username system, index will be discriminator % 5.
+        `/embed/avatars/${
+          Number(user.discriminator)
+            ? Number(user.discriminator) % 5
+            : (BigInt(user.id) >> 22n) % 6n
+        }.png`;
+
+    // https://discord.com/developers/docs/reference#image-formatting
+    await interaction.reply(`https://cdn.discordapp.com/${avatarUrl}`);
+  }
+);
+
+export default router;