Unofficial Library for using Discord.JS with JSX Syntax.

Overview

@chooks22/discord.jsx

WARNING!

This project is in very early stage of development. And while I do have plans to finish it to completion, consider this project as highly experimental.

About

discord.jsx is a powerful Node.js module that allows you to easily interact with Discord.js.

  • JSX
  • Declarative abstractions

Installation

Node.js 16.6.0 or newer, Discord.js 13.8.0 or newer, and Typescript 4.7.2 or newer is required.

npm install @chooks22/discord.jsx discord.js
npm install -D typescript

yarn add @chooks22/discord.jsx discord.js
yarn add -D typescript

pnpm add @chooks22/discord.jsx discord.js
pnpm add -D typescript

To be able to emit proper JavaScript, the following tsconfig options are required.

{
  "compilerOptions": {
    "skipLibCheck": true,
    "esModuleInterop": true,
    "target": "ES2021",
    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "jsx": "react-jsx",
    "jsxImportSource": "@chooks22/discord.jsx"
  }
}

Example usage

Define a slash command:

// commands.tsx
import { CommandList, Reply, SlashCommand } from '@chooks22/discord.jsx'

function PingCommand() {
  return <SlashCommand
    name="ping"
    description="Replies with Pong!"
    onExecute={() => <Reply>Pong!</Reply>}
  />
}

function Commands() {
  return (
    <CommandList>
      <PingCommand />
    </CommandList>
  )
}

export default Commands

Register a slash command against the Discord API:

import { createApp } from '@chooks22/discord.jsx'
import Commands from './commands.js'

const app = createApp('token')

console.log('Started refreshing application (/) commands.')
await app.register(<Commands />, GUILD_ID)
console.log('Successfully reloaded application (/) commands.')

Afterwards we can create a quite simple example bot:

import { Intents } from 'discord.js'
import { createApp, Client } from '@chooks22/discord.jsx'
import Commands from './commands.js'

function App() {
  return <Client
    intents={[Intents.FLAGS.GUILDS]}
    onReady={client => {
      console.log(`Logged in as ${client.user.tag}!`)
    }}
    commands={<Commands />}
  />
}

const app = createApp('token')
await app.login(<App />)
You might also like...

Create a html response with JSX.

Htm Create a text/html response with JSX, powered by Preact and UnoCSS. Usage To use Htm, create a server.tsx file like this: /** @jsx h */ import {

Dec 9, 2022

Converts JSX to HTML strings at compile time.

unplugin-jsx-string Converts JSX to HTML strings at compile time. Installation npm i unplugin-jsx-string Vite // vite.config.ts import JsxString from

Sep 3, 2022

Add the `className` to all JSX elements in your project

Babel Plugin Transform JSX Classes This babel plugin adds the className in each JSX element. Before After function FancyComponent () { return (

Jul 15, 2022

Use jsx to make scriptable's layout.

scriptable-jsx This project helps you to write Scriptable widgets with JSX syntax. And add some useful tools by the way. you can check demos in demo f

Oct 10, 2022

🖼️ Tiny JSX helper function for high-DPI (Retina Display) images.

🖼️ Tiny JSX helper function for high-DPI (Retina Display) images.

img-srcx Tiny JSX helper function for high-DPI (Retina Display) images. 394 bytes minified and gzipped for ESM (830 bytes for ES5). Installation npm i

Oct 6, 2022

A JSX transformer with extra hints around interpolations and outer templates.

@ungap/babel-plugin-transform-hinted-jsx This plugin is a follow up of this post and it can be used together with @babel/plugin-transform-react-jsx. A

Nov 12, 2022

A small javascript DOM manipulation library based on Jquery's syntax. Acts as a small utility library with the most common functions.

Quantdom JS Quantdom is a very small (about 600 bytes when ran through terser & gzipped) dom danipulation library that uuses a Jquery like syntax and

Aug 16, 2022

this project is an online library application that enables users to keep track of books in their library by adding to and removing books from a list. Built with JavaScript ES6 syntax, HTML, and CSS

Awesome-Book1 The aim of this project is to restructure the Awesome books app code by using ES6 syntax and organising the workspace using modules. The

Jul 17, 2022

Small library to create classes without using class syntax.

Clazz.js Small library to create classes without using class syntax. Compatibility For internet explorer 11 or higher. Example script src="Clazz.js"

Dec 25, 2021
Comments
  • feat: component support

    feat: component support

    Apart from embeds which just accepts all the available options imaginable under the sun, the other components should be more or less the perfect use case for using JSX.

    Todo

    • [x] Embeds
    • [x] Buttons
    • [x] Modals
    • [x] Select Menus
    • [x] Component Rows
    opened by Chooks22 0
Releases(v0.5.0)
  • v0.5.0(Jun 19, 2022)

    What's Changed

    • refactor!: use props naming scheme for all props
    • feat!: standardize choice props
    • fix: prop uses constant value
    • refactor: simplified component tree

    Full Changelog: https://github.com/Choooks22/discord.jsx/compare/v0.4.0...v0.5.0

    Source code(tar.gz)
    Source code(zip)
  • v0.4.0(Jun 19, 2022)

    What's Changed

    • feat: add file attachment definition
    • feat: add support for creating custom responses
    • feat: implement custom reply response component
    • feat: change reply response to accept child props
    • feat: implement show modal response component

    Full Changelog: https://github.com/Choooks22/discord.jsx/compare/v0.3.0...v0.4.0

    Source code(tar.gz)
    Source code(zip)
  • v0.3.0(Jun 18, 2022)

    What's Changed

    • feat: message components by @Choooks22 in https://github.com/Choooks22/discord.jsx/pull/2

    Full Changelog: https://github.com/Choooks22/discord.jsx/compare/v0.2.0...v0.3.0

    Source code(tar.gz)
    Source code(zip)
  • v0.2.0(Jun 17, 2022)

Owner
Chooks22
Chooks22
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
An unofficial, simplified version of the @Shopify/koa-shopify-auth middleware library.

simple-koa-shopify-auth https://www.npmjs.com/package/simple-koa-shopify-auth NOTE: This package is not maintained by or affiliated with Shopify. Desc

David 20 Nov 7, 2022
Solid component and library for LiveKit (unofficial)

This package provides Solid components that makes it easier to use LiveKit in a Solid app. Inspired completely by https://github.com/livekit/livekit-r

Prince Neil Cedrick Castro 6 Mar 8, 2022
A unofficial Node.js library for HoYoWiki API, can get the details of Genshin Impact items!

HoYoWiki API (Node.js Library) English | 繁體中文 | 简体中文 A unofficial Node.js library for HoYoWiki API, can get the details of Genshin Impact items! Repor

張文相 Wenxiang Zhang (旋風之音 GoneTone) 5 Jul 17, 2022
An unofficial wrapper for the Bloxlink API using Node.js

Bloxlink API wrapper ?? Bloxlink-sdk is a simple, easy to use API wrapper for Bloxlinks API using Node.js. Anyone who can use code should be fairly co

Callum Sequoia 3 Oct 21, 2022
Web Components engine based on JSX & TypeScript

WebCell Web Components engine based on JSX & TypeScript Usage Demo & GitHub template: https://web-cell.dev/scaffold/ Project bootstrap Command npm ini

null 162 Nov 17, 2022
High performance JSX web views for S.js applications

Surplus const name = S.data("world"), view = <h1>Hello {name()}!</h1>; document.body.appendChild(view); Surplus is a compiler and runtime to all

Adam Haile 587 Dec 30, 2022
Like JSX, but native and fast

esx High throughput React Server Side Rendering For a simplified example of esx in action, check out esx-demo. esx is designed to be a high speed SSR

ESX 645 Jan 2, 2023