npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@discord-fp/djs

v4.0.1

Published

A Beautiful Application Command Framework based on Discord.js

Downloads

14

Readme

Discord-FP for Discord.js

Install

npm install @discord-fp/djs

Getting Started

Try our template which includes everything you need

Create Discord.js client

utils/discord.ts

import { Client, GatewayIntentBits } from "discord.js";

export const client = new Client({ intents: [GatewayIntentBits.Guilds] });

Init Discord-FP

utils/dfp.ts

import { initDiscordFP } from "@discord-fp/djs";
import { client } from "./discord";

export const dfp = initDiscordFP();
export const command = dfp.command;

Start Discord-FP after the bot is ready

index.ts

import { client } from "./utils/discord";
import { dfp } from "./utils/dfp";

client.on("ready", () => {
    dfp.start({
        //the discord.js client
        client,
        //where to load commands
        load: ["./commands"],
    });
});

client.login("token");

Create Slash command

Create a file inside the folder Since it's file-system based, command name is same as its file name

commands/hello.ts

import { command } from "@/utils/dfp";

export default command.slash({
    description: "Say Hello World",
    execute: async ({ event }) => {
        await event.reply(`Hello World`);
    },
});

Run your bot

Start your bot, and run the slash command in Discord

Then you should see the bot replied "Hello World"!

Command Group & Sub commands

You may use command group & sub command for grouping tons of commands

  1. Create a folder

  2. Create a _meta.ts / meta.js file

  3. Define information for the command group in the _meta file

    import { command } from "@/utils/dfp";
    
    export default command.group({
        description: "My Command group",
    });
  4. Create commands inside the folder Inside the folder, Only slash commands are supported

    import { command } from "@/utils/dfp";
    import { options } from "@discord-fp/djs";
    
    export default command.slash({
        description: "Say Hello World",
        execute: async ({ event, options }) => {
            await event.reply(`Hello World`);
        },
    });

What is _meta.ts & _meta.js ?

You may create a _meta file for controling how the folder being loaded

For example, Command group is just a type of loader

import { command } from "@/utils/dfp";

//loader
export default command.group({
    description: "My Command group",
});

Middleware

Discord-FP provides type-safe middlewares & context with high code quality

On the Discord-FP init script:

utils/dfp.ts

import { initDiscordFP } from "@discord-fp/djs";
import { client } from "./discord.js";

export const dfp = initDiscordFP({
    client,
});

export const command = dfp.command;

//new middleware
export const protectedCommand = dfp.command.middleware(({ event, next }) => {
    //check permissions

    return next({
        ctx: {
            message: "hello world",
        },
        event,
    });
});

Now create a slash command with the middleware enabled:

import { protectedCommand } from "@/utils/dfp";

export default protectedCommand.slash({ ... })

Reject events

You can prevent calling the event handler by returning nothing

dfp.command.middleware(({ event, next }) => {
    if (isInvalid(event)) return;

    return next({
        ctx: {
            message: "context here",
        },
        event,
    });
});

Nested Middlewares

Discord-FP also allows you to create nested middlewares

export const memberCommand = dfp.command.middleware(({ event, next }) => {
    return next({
        event,
        ctx: "Hello World",
    });
});

export const adminCommand = memberCommand.middleware(({ event, next, ctx }) => {
    //ctx === "Hello World"
    //...
});

Command Options

We provides type-safe options out-of-the-box

import { options } from "@discord-fp/djs";

options.string({
    description: "Your name",
    required: false,
});

Auto-complete

Enable auto-complete easily

options.string({
    description: "Your name",
    required: false,
    autoComplete(e) {
        const items = ["hello", "world"];
        const v = e.options.getFocused();

        e.respond(result);
    },
});

Transform

Make your code even better with transform

options.string({
    description: "Your name",
    require: true,
}).transform((v) => {
   return `Mr.${v}`;
}),
//Transform "Henry" -> "Mr.Henry"