Merge pull request #7 from ianeli1/feature/similar-triggers

New onTypo callback

README.md

@@ -146,6 +146,36 @@ bot.registerAction("test", ({ args, createEmbed }) =>
 );
 ```
 
+### Handling typos
+
+Your users can be overwhelmed and confused by your bot's syntax. To aid them in the process, djs-diy offers a way to immediately point out which options they might have meant to type instead.
+
+```ts
+const bot = new Bot("<token>", { prefix: "!", embed });
+bot.on("test", "hi there!");
+bot.onTypo(
+  ({ author }, [first, ...rest]) =>
+    `Hey there, ${
+      author.username
+    }! Did you mean to type !${first}? Other options: ${rest.join(", ")}`
+);
+```
+
+`Bot#onTypo` can set a callback for an scenario where an user types "tsst" or something similar as any other trigger.
+Should be noted that onTypo is available router-wise and will always attempt to fetch a callback from any parent router (incluiding the Bot object's)
+
+`onTypo` can take a second argument in the form of an object
+```ts
+{
+  maxDistance: number 
+  maxSuggestions: number
+}
+```
+
+`maxDistance`: Maximum [Levenshtein distance](https://en.wikipedia.org/wiki/Levenshtein_distance) allowed
+`maxSuggestions`: Max amount of suggestions to be provided to the callback
+
+
 ### Routing
 
 Sometimes you may want a command to contain a subcommand. This is where routers come in. To use them, create a new Router object then assign commands to it. Finally assign it as an action in your main `Bot` object. Don't worry about the constructor parameters, they'll be filled in for you.

docs/assets/highlight.css

@@ -21,6 +21,8 @@
     --dark-hl-9: #D4D4D4;
     --light-hl-10: #098658;
     --dark-hl-10: #B5CEA8;
+    --light-hl-11: #000000;
+    --dark-hl-11: #C8C8C8;
     --light-code-background: #F5F5F5;
     --dark-code-background: #1E1E1E;
 }
@@ -37,6 +39,7 @@
     --hl-8: var(--light-hl-8);
     --hl-9: var(--light-hl-9);
     --hl-10: var(--light-hl-10);
+    --hl-11: var(--light-hl-11);
     --code-background: var(--light-code-background);
 } }
 
@@ -52,6 +55,7 @@
     --hl-8: var(--dark-hl-8);
     --hl-9: var(--dark-hl-9);
     --hl-10: var(--dark-hl-10);
+    --hl-11: var(--dark-hl-11);
     --code-background: var(--dark-code-background);
 } }
 
@@ -67,6 +71,7 @@ body.light {
     --hl-8: var(--light-hl-8);
     --hl-9: var(--light-hl-9);
     --hl-10: var(--light-hl-10);
+    --hl-11: var(--light-hl-11);
     --code-background: var(--light-code-background);
 }
 
@@ -82,6 +87,7 @@ body.dark {
     --hl-8: var(--dark-hl-8);
     --hl-9: var(--dark-hl-9);
     --hl-10: var(--dark-hl-10);
+    --hl-11: var(--dark-hl-11);
     --code-background: var(--dark-code-background);
 }
 
@@ -96,4 +102,5 @@ body.dark {
 .hl-8 { color: var(--hl-8); }
 .hl-9 { color: var(--hl-9); }
 .hl-10 { color: var(--hl-10); }
+.hl-11 { color: var(--hl-11); }
 pre, code { background: var(--code-background); }

docs/index.html

@@ -2,6 +2,7 @@
 <a href="#discordjs---diy" id="discordjs---diy" style="color: inherit; text-decoration: none;">
   <h1>Discord.js - DIY</h1>
 </a>
+<p><a href=""><img src="https://img.shields.io/npm/v/discordjs-diy" alt="npm"></a></p>
 <p>Easy to use, do-it-yourself Discord.js mini-framework</p>
 <p>You can find <a href="https://ianeli1.github.io/discordjs-diy/">the full reference wiki here.</a></p>
 
@@ -60,6 +61,31 @@ <h3>Using embeds</h3>
 <pre><code class="language-ts"><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">embed</span><span class="hl-1"> = </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-6">Embed</span><span class="hl-1">({</span><br/><span class="hl-1">  </span><span class="hl-2">author:</span><span class="hl-1"> </span><span class="hl-2">bot</span><span class="hl-1">.</span><span class="hl-2">user</span><span class="hl-1">,</span><br/><span class="hl-1">});</span><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">bot</span><span class="hl-1"> = </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-6">Bot</span><span class="hl-1">(</span><span class="hl-3">&quot;&lt;token&gt;&quot;</span><span class="hl-1">, { </span><span class="hl-2">prefix:</span><span class="hl-1"> </span><span class="hl-3">&quot;!&quot;</span><span class="hl-1">, </span><span class="hl-2">embed</span><span class="hl-1"> });</span><br/><span class="hl-2">bot</span><span class="hl-1">.</span><span class="hl-6">registerAction</span><span class="hl-1">(</span><span class="hl-3">&quot;test&quot;</span><span class="hl-1">, ({ </span><span class="hl-2">args</span><span class="hl-1">, </span><span class="hl-2">createEmbed</span><span class="hl-1"> }) </span><span class="hl-4">=&gt;</span><br/><span class="hl-1">  </span><span class="hl-6">createEmbed</span><span class="hl-1">({ </span><span class="hl-2">desc:</span><span class="hl-1"> </span><span class="hl-2">args</span><span class="hl-1"> })</span><br/><span class="hl-1">);</span>
 </code></pre>
 
+<a href="#handling-typos" id="handling-typos" style="color: inherit; text-decoration: none;">
+  <h3>Handling typos</h3>
+</a>
+<p>Your users can be overwhelmed and confused by your bot&#39;s syntax. To aid them in the process, djs-diy offers a way to immediately point out which options they might have meant to type instead.</p>
+<pre><code class="language-ts"><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">bot</span><span class="hl-1"> = </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-6">Bot</span><span class="hl-1">(</span><span class="hl-3">&quot;&lt;token&gt;&quot;</span><span class="hl-1">, { </span><span class="hl-2">prefix:</span><span class="hl-1"> </span><span class="hl-3">&quot;!&quot;</span><span class="hl-1">, </span><span class="hl-2">embed</span><span class="hl-1"> });</span><br/><span class="hl-2">bot</span><span class="hl-1">.</span><span class="hl-6">on</span><span class="hl-1">(</span><span class="hl-3">&quot;test&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;hi there!&quot;</span><span class="hl-1">);</span><br/><span class="hl-2">bot</span><span class="hl-1">.</span><span class="hl-6">onTypo</span><span class="hl-1">(</span><br/><span class="hl-1">  ({ </span><span class="hl-2">author</span><span class="hl-1"> }, [</span><span class="hl-2">first</span><span class="hl-1">, ...</span><span class="hl-2">rest</span><span class="hl-1">]) </span><span class="hl-4">=&gt;</span><br/><span class="hl-1">    </span><span class="hl-3">`Hey there, </span><span class="hl-4">${</span><br/><span class="hl-9">      </span><span class="hl-2">author</span><span class="hl-9">.</span><span class="hl-2">username</span><br/><span class="hl-9">    </span><span class="hl-4">}</span><span class="hl-3">! Did you mean to type !</span><span class="hl-4">${</span><span class="hl-2">first</span><span class="hl-4">}</span><span class="hl-3">? Other options: </span><span class="hl-4">${</span><span class="hl-2">rest</span><span class="hl-9">.</span><span class="hl-6">join</span><span class="hl-9">(</span><span class="hl-3">&quot;, &quot;</span><span class="hl-9">)</span><span class="hl-4">}</span><span class="hl-3">`</span><br/><span class="hl-1">);</span>
+</code></pre>
+<p><code>Bot#onTypo</code> can set a callback for an scenario where an user types &quot;tsst&quot; or something similar as any other trigger.
+Should be noted that onTypo is available router-wise and will always attempt to fetch a callback from any parent router (incluiding the Bot object&#39;s)</p>
+<p><code>onTypo</code> can take a second argument in the form of an object</p>
+<pre><code class="language-ts"><span class="hl-1">{</span><br/><span class="hl-1">  </span><span class="hl-11">maxDistance</span><span class="hl-1">: </span><span class="hl-2">number</span><span class="hl-1"> </span><br/><span class="hl-1">  </span><span class="hl-11">maxSuggestions</span><span class="hl-1">: </span><span class="hl-2">number</span><br/><span class="hl-1">}</span>
+</code></pre>
+<p><code>maxDistance</code>: Maximum <a href="https://en.wikipedia.org/wiki/Levenshtein_distance">Levenshtein distance</a> allowed
+<code>maxSuggestions</code>: Max amount of suggestions to be provided to the callback</p>
+
+<a href="#routing" id="routing" style="color: inherit; text-decoration: none;">
+  <h3>Routing</h3>
+</a>
+<p>Sometimes you may want a command to contain a subcommand. This is where routers come in. To use them, create a new Router object then assign commands to it. Finally assign it as an action in your main <code>Bot</code> object. Don&#39;t worry about the constructor parameters, they&#39;ll be filled in for you.</p>
+<pre><code class="language-ts"><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">bot</span><span class="hl-1"> = </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-6">Bot</span><span class="hl-1">(</span><span class="hl-3">&quot;&lt;token&gt;&quot;</span><span class="hl-1">, { </span><span class="hl-2">prefix:</span><span class="hl-1"> </span><span class="hl-3">&quot;!&quot;</span><span class="hl-1"> });</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">helpRouter</span><span class="hl-1"> = </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-6">Router</span><span class="hl-1">();</span><br/><span class="hl-2">helpRouter</span><span class="hl-1">.</span><span class="hl-6">on</span><span class="hl-1">(</span><span class="hl-3">&quot;info&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;lorem ipsum&quot;</span><span class="hl-1">);</span><br/><br/><span class="hl-2">bot</span><span class="hl-1">.</span><span class="hl-6">on</span><span class="hl-1">(</span><span class="hl-3">&quot;help&quot;</span><span class="hl-1">, </span><span class="hl-2">helpRouter</span><span class="hl-1">);</span><br/><span class="hl-7">//Bot will now respond to `!help info` with &quot;lorem ipsum&quot;</span>
+</code></pre>
+<p>Routers have their own error handling too.</p>
+<pre><code class="language-ts"><span class="hl-2">helpRouter</span><span class="hl-1">.</span><span class="hl-6">onError</span><span class="hl-1">(</span><span class="hl-3">&quot;Oh no!&quot;</span><span class="hl-1">);</span><br/><span class="hl-7">//if any of the commands under help router fail, &quot;Oh no!&quot; will be sent instead</span>
+</code></pre>
+<p>Routers also have full support for slash commands.</p>
+
 <a href="#expecting-replies" id="expecting-replies" style="color: inherit; text-decoration: none;">
   <h3>Expecting replies</h3>
 </a>