Basically it helps with creating messages that dynamically change their contents based on how ppl react on it. Aka, the message content acts as a screen, and the reactions act as input buttons.
License: MIT License
export class Foo extends DynamicMessage {
private messages = ['one', 'two', 'three'];
private index = 0;
@OnReaction(':arrow_left:', {
hidden: () => this.index > 0
})
public previous() {
this.index = clamp(this.index - 1, 0, this.embeds.length - 1);
}
@OnReaction(':arrow_right:', {
hidden: () => this.index < this.messages.length-1
})
public next() {
this.index = clamp(this.index + 1, 0, this.embeds.length - 1);
}
public render() {
return this.messages[this.index];
}
}import { DynamicMessage, OnReaction, OnReactionRemoved } from 'discord-dynamic-messages';
class Foo extends DynamicMessage {
private toggle = false;
@OnReaction(':heavy_check_mark:', {
removeWhenDone: false,
})
public setTrue() {
this.toggle = true;
}
@OnReactionRemoved(':heavy_check_mark:')
public setFalse() {
this.toggle = false;
}
public render() {
return `Toggle: ${this.toggle}`;
}
}type attachTo = (message: Discord.Message) => DynamicMessageWill attach an existing message to the DynamicMessage instance, then call render on the instance and overwrite the content of the existing message.
const Foo = class extends DynamicMessage {
public render() {
return 'stuff';
}
}
client.on('message', (msg) => {
const reply = msg.reply('tmp');
new Foo().attachTo(reply);
})This is useful when reviving messages after rebooting the bot.
Perhaps an official revive function could be included? However I don't think this should be the responsibility of the library.
Provide a hooks based API alternative (possibly replace the implementation of the class api with a hooks implementation, while keeping the actual api the same).
import { dynamicMessage, useReaction, useState } from 'discord-dynamic-messages';
const ToggleMessage = dynamicMessage(() => {
const state = useState({
toggle: false,
});
const reaction = useReaction(':white_check_mark:');
reaction.show();
reaction.on('added', () => {
state.toggle = true;
});
reaction.on('removed', () => {
state.toggle = false;
});
return `Toggle: ${state.toggle}`;
});
/*
ToggleMessage().sendTo(message.channel);
*/import { dynamicMessage, useReaction, useState } from 'discord-dynamic-messages';
interface CountMessageParams {
initialCount: number;
}
interface State {
count: number;
}
const CountMessage = dynamicMessage<CountMessageParams>(({ initialCount }) => {
const state = useState<State>({
count: initialCount,
});
const reaction = useReaction(':thumbsup:');
reaction.show();
reaction.on('added', ({ user }) => {
state.count += 1;
reaction.remove(user);
});
return `Counter: ${state.count}`;
});
/*
CountMessage({
initialCount: 3,
}).sendTo(message.channel);
*/import { dynamicMessage, onAttached, onDetached } from 'discord-dynamic-messages';
const LifeCycleEvents = dynamicMessage(() => {
onAttached((message) => {
// Will trigger both when sending a new message
// as well as when attaching to an existing message.
console.log(`Attached to message: ${message.id}`);
});
onDetached(() => {
// Will trigger when a the attached message is no longer available.
// either when the message is deleted, or when the dynamicMessage
// is purposefully detached.
console.log(`Detached from message: ${message.id}`);
});
return `Logging....`;
});
/*
LifeCycleEvents().sendTo(message.channel);
*/import { dynamicMessage, useSelf, useState } from 'discord-dynamic-messages';
const MetaManimulationMessage = dynamicMessage(() => {
const self = useSelf();
// self === MetaManimulationMessage
const state = useState({
timeLeft: 10,
});
setInterval(() => {
state.timeLeft -= 1;
}, 1000);
if (state.timeLeft <= 0) {
self.delete();
return `Goodbye!`;
}
return `Message will self destruct in ${state.timeLeft}`;
});
/*
MetaManimulationMessage().sendTo(message.channel);
*/Lets assume we have a message like the following:
import { dynamicMessage } from 'discord-dynamic-messages';
const HelloWorldMessage = dynamicMessage(() => {
return `Hello World`;
});
/*
HelloWorldMessage().sendTo(message.channel);
*/It doesn't use any reactive hooks and can there for be optimized heavily. We will only need to call the setup function once. We can then store the result in a cache and re-use the cached value whenever an instance of HelloWorldMessage is created or attached.
Consider a slightly more complex case:
import { dynamicMessage, useReaction } from 'discord-dynamic-messages';
const ReactionMessage = dynamicMessage(() => {
const reaction = useReaction(':thumbsup:');
reaction.on('added', () => {
console.log('Reaction made');
});
reaction.show();
return `Log`;
});This message adds a reaction handler, however since no state is being kept in the message, this setup function can be optimized to only run once per instance of ReactionMessage.
Now lets introduce instance specific state:
import { dynamicMessage, useState, useReaction } from 'discord-dynamic-messages';
const ReactionMessage = dynamicMessage(() => {
const state = useState({
count: 0,
});
const reaction = useReaction(':thumbsup:');
reaction.on('added', () => {
state.count += 1;
});
reaction.show();
return `Count: ${state.count}`;
});In this case the setup function is going to have to run again every time a property on the state object changes. This introduces two possible performance bottlenecks, 1) since not all state changes necessarily ends up result in a new message body, we are going to keep a local cash of the previous message body, and compare it to the new message body. Then we will update the underlying discord message, If and only if the previous and the new message body are different. 2) since we are calling reaction.show() every time we run the setup function, we need to keep track of if the reaction was "showed" in the last update or not. If it was then we don't have to update the message, however if it wasn't we need to update it. (grammar.... wow... I'll go through this later)
const fakeCTX = ({
commit: (transaction) => {
console.log(transaction);
}
});
const getContext = () => fakeCTX;
const internalState = new WeakMap();
// Pseudo code for the useReaction logic
const useReaction = (emoji) => {
const ctx = getContext();
if (!internalState.has(ctx)) {
internalState.set(ctx, {
visable: false,
});
}
const state = internalState.get(ctx);
const api = {
show: () => {
if (state.visable) {
// Already visable
return;
}
internalState.set(ctx, {
...state,
visable: true,
});
ctx.commit({
subject: 'reacton',
operation: 'add',
arguments: [ emoji ]
});
}
};
return api;
}
const setup = () => {
const reaction = useReaction(':thumbsup:');
reaction.show();
}
setup();
setup();
setup();
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.