create-discord-https 1.0.0

package/templates/vercel/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/vercel/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/vercel/src/spawner.js

@@ -0,0 +1,18 @@
+// ------------It is recommended not to modify this spawner code------------
+
+import { spawn } from "child_process";
+import chalk from "chalk"; // npm install chalk
+
+import { tunnelLayer } from "./DevLayer";
+
+await tunnelLayer();
+console.log(chalk.greenBright("Tunnel spawned and ready!\n\n"));
+
+const vercel = spawn("vercel", ["dev"], {
+  stdio: "inherit", // we’ll handle colors ourselves
+});
+3;
+
+vercel.on("close", (code) => {
+  console.log(chalk.yellow(`Vercel dev exited with code ${code}`));
+});

package/templates/vercel-ts/.vercelignore

@@ -0,0 +1,4 @@
+/*
+!api
+!vercel.json
+!*.html

package/templates/vercel-ts/README.md

@@ -0,0 +1,32 @@
+## Discord.https
+
+Vercel’s serverless functions must be placed inside the `api` directory.
+
+By default, the URL is: `<vercel_url>/api/interactions`
+
+More details:
+
+* [Vercel](https://vercel.com)
+* [Vercel Functions Documentation](https://vercel.com/docs/functions)
+
+### How to deploy
+
+Run this command to deploy to production:
+
+```bash
+npx vercel --prod
+```
+
+### Local development
+
+Run your project locally with:
+
+```bash
+npm run dev
+```
+
+**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`
+
+You don’t need a separate TypeScript build step—Vercel handles it automatically.

package/templates/vercel-ts/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+.git
+.env
+.vercel

package/templates/vercel-ts/api/interactions.js

@@ -0,0 +1,5 @@
+import client from "../src/index.js";
+
+export default async function handler(req, res) {
+  return await client.listen("api/interactions", req, res);
+}

package/templates/vercel-ts/index.html

@@ -0,0 +1,235 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Redirecting...</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+          "Oxygen", "Ubuntu", "Cantarell", sans-serif;
+        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
+        color: #ffffff;
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 2rem;
+        overflow: hidden;
+      }
+
+      .container {
+        text-align: center;
+        max-width: 600px;
+        animation: fadeIn 0.6s ease-out;
+      }
+
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+          transform: translateY(20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      .icon {
+        width: 80px;
+        height: 80px;
+        margin: 0 auto 2rem;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 2px solid rgba(255, 255, 255, 0.1);
+        animation: pulse 2s ease-in-out infinite;
+      }
+
+      @keyframes pulse {
+        0%,
+        100% {
+          transform: scale(1);
+          opacity: 1;
+        }
+        50% {
+          transform: scale(1.05);
+          opacity: 0.8;
+        }
+      }
+
+      .icon svg {
+        width: 40px;
+        height: 40px;
+        stroke: #ffffff;
+      }
+
+      h1 {
+        font-size: 2rem;
+        font-weight: 600;
+        margin-bottom: 1rem;
+        line-height: 1.2;
+        letter-spacing: -0.02em;
+      }
+
+      .message {
+        font-size: 1.125rem;
+        color: #a0a0a0;
+        margin-bottom: 2rem;
+        line-height: 1.6;
+      }
+
+      .redirect-info {
+        display: inline-block;
+        background: rgba(255, 255, 255, 0.05);
+        padding: 1rem 1.5rem;
+        border-radius: 12px;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        margin-bottom: 2rem;
+      }
+
+      .redirect-text {
+        font-size: 0.875rem;
+        color: #808080;
+        margin-bottom: 0.5rem;
+      }
+
+      .redirect-path {
+        font-family: "Courier New", monospace;
+        font-size: 1rem;
+        color: #ffffff;
+        font-weight: 500;
+      }
+
+      .countdown-container {
+        margin-top: 2rem;
+      }
+
+      .countdown-label {
+        font-size: 0.875rem;
+        color: #808080;
+        margin-bottom: 1rem;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+      }
+
+      .countdown {
+        font-size: 4rem;
+        font-weight: 700;
+        color: #ffffff;
+        font-variant-numeric: tabular-nums;
+        animation: countdownPulse 1s ease-in-out infinite;
+      }
+
+      @keyframes countdownPulse {
+        0%,
+        100% {
+          transform: scale(1);
+        }
+        50% {
+          transform: scale(1.1);
+        }
+      }
+
+      .progress-bar {
+        width: 100%;
+        height: 4px;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 2px;
+        margin-top: 2rem;
+        overflow: hidden;
+      }
+
+      .progress-fill {
+        height: 100%;
+        background: linear-gradient(90deg, #ffffff 0%, #a0a0a0 100%);
+        border-radius: 2px;
+        animation: progress 5s linear forwards;
+      }
+
+      @keyframes progress {
+        from {
+          width: 100%;
+        }
+        to {
+          width: 0%;
+        }
+      }
+
+      @media (max-width: 640px) {
+        h1 {
+          font-size: 1.5rem;
+        }
+
+        .message {
+          font-size: 1rem;
+        }
+
+        .countdown {
+          font-size: 3rem;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="icon">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="12" cy="12" r="10"></circle>
+          <line x1="12" y1="8" x2="12" y2="12"></line>
+          <line x1="12" y1="16" x2="12.01" y2="16"></line>
+        </svg>
+      </div>
+
+      <h1>The path you visited is incorrect</h1>
+
+      <p class="message">
+        Don't worry, we're automatically redirecting you to the correct
+        location.
+      </p>
+
+      <div class="redirect-info">
+        <div class="redirect-text">Redirecting to</div>
+        <div class="redirect-path">/api/interactions</div>
+      </div>
+
+      <div class="countdown-container">
+        <div class="countdown-label">Redirecting in</div>
+        <div class="countdown" id="countdown">5</div>
+      </div>
+
+      <div class="progress-bar">
+        <div class="progress-fill"></div>
+      </div>
+    </div>
+
+    <script>
+      let count = 5;
+      const countdownElement = document.getElementById("countdown");
+
+      const timer = setInterval(() => {
+        count--;
+        countdownElement.textContent = count;
+
+        if (count === 0) {
+          clearInterval(timer);
+          window.location.href = "/api/interactions";
+        }
+      }, 1000);
+    </script>
+  </body>
+</html>

package/templates/vercel-ts/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "vercel",
+  "version": "1.0.0",
+  "description": "Discord HTTPS interaction callback bot powered by discord.https",
+  "main": "index.js",
+  "scripts": {
+    "dev": "node src/spawner.js",
+    "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",
+    "@types/node": "^24.7.0",
+    "fast-deep-equal": "^3.1.3",
+    "localtunnel": "^2.0.2"
+  }
+}

package/templates/vercel-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}/api/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/vercel-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;