create-discord-https 1.0.0

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

package/templates/vercel-ts/src/index.ts

@@ -0,0 +1,48 @@
+import Client from "discord.https";
+import VercelAdapter from "@discordhttps/vercel-adapter";
+
+import commands from "./commands/index.js";
+
+const adapter = new VercelAdapter();
+
+const client = new Client({
+  token: "PUT_YOUR_TOKEN_HERE",
+  publicKey: "PUT_YOUR_PUBLIC_KEY_HERE",
+  httpAdapter: adapter,
+});
+
+// client.middleware() creates a global middleware, which is always executed before
+// route middleware/handlers.
+
+// https://discordhttps.js.org/classes/index.default.html#middleware
+client.middleware(async (interaction) => {
+  const username = interaction.inGuild()
+    ? interaction.member.user.username
+    : interaction.user.username;
+  console.log("[Global Middleware]: A command has been invoked by: ", username);
+});
+
+// Everything here is middleware. A middleware can be defined as a function that takes a parameter
+// and transforms the output in our case.
+
+// client.register() mounts a middleware. This means that if the client receives a request from Discord
+// and the corresponding middleware exists, the client will pass it to the appropriate middleware
+// one by one in the order they were registered.
+
+// simply, .register() lets the client know that these are the handlers.
+client.register(commands);
+
+if (process.env.NODE_ENV !== "production") {
+  const { commandRegistrarLayer } = await import("./DevLayer.js");
+
+  // if (!(globalThis as any).__TUNNEL_LAYER__)
+  //   (globalThis as any).__TUNNEL_LAYER__ = await tunnelLayer();
+
+  // automatic command registration to discord.
+  // The second parameter is the guild ID. If a guild ID is provided, the command will be registered for that guild; otherwise, it will be registered globally.
+  await commandRegistrarLayer(client, undefined);
+}
+
+// Only api/<file.js/ts> can be serverless function, exporting it for api/interaction
+// so, it cloud be imported from api/interaction.js and use there due to vercel way of serverless
+export default client;

package/templates/vercel-ts/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}`));
+});