feat: add fish.ts & bash.ts (#19)

* feat: add fish.ts & bash.ts

* fix: format

* cleanup: remove unused type definition

* apply suggestions from @43081j review

* fix: format

* moar cleanup

* fix: add missing serve command to demo.cac.ts to correct CLI test snapshots

* fix: add serve command and use snapshot testing for shells

- Add missing serve command to demo.cac.ts to correct CLI test snapshots

- Implement suggestion to use toMatchSnapshot() for fish shell tests

- Update snapshots to include proper completions

Author: dreyfus92

README.md

@@ -6,6 +6,16 @@ Shell autocompletions are largely missing in the javascript cli ecosystem. This
 
 Tools like git and their autocompletion experience inspired us to build this tool and make the same ability available for any javascript cli project. Developers love hitting the tab key, hence why they prefer tabs over spaces.
 
+## Examples
+
+Check out the [examples directory](./examples) for complete examples of using Tab with different command-line frameworks:
+
+- [CAC](./examples/demo.cac.ts)
+- [Citty](./examples/demo.citty.ts)
+- [Commander.js](./examples/demo.commander.ts)
+
+## Usage
+
 ```ts
 import { Completion, script } from '@bombsh/tab';
 
@@ -146,6 +156,47 @@ const cli = createMain(main);
 cli();
 ```
 
+### `@bombsh/tab/commander`
+
+```ts
+import { Command } from 'commander';
+import tab from '@bombsh/tab/commander';
+
+const program = new Command('my-cli');
+program.version('1.0.0');
+
+// Add commands
+program
+  .command('serve')
+  .description('Start the server')
+  .option('-p, --port <number>', 'port to use', '3000')
+  .option('-H, --host <host>', 'host to use', 'localhost')
+  .action((options) => {
+    console.log('Starting server...');
+  });
+
+// Initialize tab completion
+const completion = tab(program);
+
+// Configure custom completions
+for (const command of completion.commands.values()) {
+  if (command.name === 'serve') {
+    for (const [option, config] of command.options.entries()) {
+      if (option === '--port') {
+        config.handler = () => {
+          return [
+            { value: '3000', description: 'Default port' },
+            { value: '8080', description: 'Alternative port' },
+          ];
+        };
+      }
+    }
+  }
+}
+
+program.parse();
+```
+
 ## Recipe
 
 `source <(my-cli complete zsh)` won't be enough since the user would have to run this command each time they spin up a new shell instance.
@@ -157,6 +208,20 @@ my-cli completion zsh > ~/completion-for-my-cli.zsh
 echo 'source ~/completion-for-my-cli.zsh' >> ~/.zshrc
 ```
 
+For other shells:
+
+```bash
+# Bash
+my-cli complete bash > ~/.bash_completion.d/my-cli
+echo 'source ~/.bash_completion.d/my-cli' >> ~/.bashrc
+
+# Fish
+my-cli complete fish > ~/.config/fish/completions/my-cli.fish
+
+# PowerShell
+my-cli complete powershell > $PROFILE.CurrentUserAllHosts
+```
+
 ## Autocompletion Server
 
 By integrating tab into your cli, your cli would have a new command called `complete`. This is where all the magic happens. And the shell would contact this command to get completions. That's why we call it the autocompletion server.
@@ -181,8 +246,3 @@ Other package managers like `npm` and `yarn` can decide whether to support this
 
 - git
 - [cobra](https://github.com/spf13/cobra/blob/main/shell_completions.go), without cobra, tab would have took 10x longer to build
-
-## TODO
-
-- [] fish
-- [] bash

demo.citty.ts

@@ -1,5 +1,5 @@
 import cac from 'cac';
-import tab from './src/cac';
+import tab from '../src/cac';
 
 const cli = cac('vite');
 
@@ -14,6 +14,12 @@ cli
   .option('-p, --port <port>', `Specify port`)
   .action((options) => {});
 
+cli
+  .command('serve', 'Start the server')
+  .option('-H, --host [host]', `Specify hostname`)
+  .option('-p, --port <port>', `Specify port`)
+  .action((options) => {});
+
 cli.command('dev build', 'Build project').action((options) => {});
 
 cli.command('lint [...files]', 'Lint project').action((files, options) => {});

demo.cac.ts examples/demo.cac.tsdemo.cac.ts renamed to examples/demo.cac.ts

@@ -0,0 +1,132 @@
+import { defineCommand, createMain, CommandDef, ArgsDef } from 'citty';
+import tab from '../src/citty';
+
+const main = defineCommand({
+  meta: {
+    name: 'vite',
+    version: '0.0.0',
+    description: 'Vite CLI',
+  },
+  args: {
+    config: {
+      type: 'string',
+      description: 'Use specified config file',
+      alias: 'c',
+    },
+    mode: {
+      type: 'string',
+      description: 'Set env mode',
+      alias: 'm',
+    },
+    logLevel: {
+      type: 'string',
+      description: 'info | warn | error | silent',
+      alias: 'l',
+    },
+  },
+  run: (_ctx) => {},
+});
+
+const devCommand = defineCommand({
+  meta: {
+    name: 'dev',
+    description: 'Start dev server',
+  },
+  args: {
+    host: {
+      type: 'string',
+      description: 'Specify hostname',
+      alias: 'H',
+    },
+    port: {
+      type: 'string',
+      description: 'Specify port',
+      alias: 'p',
+    },
+  },
+  run: () => {},
+});
+
+const buildCommand = defineCommand({
+  meta: {
+    name: 'build',
+    description: 'Build project',
+  },
+  run: () => {},
+});
+
+const lintCommand = defineCommand({
+  meta: {
+    name: 'lint',
+    description: 'Lint project',
+  },
+  args: {
+    files: {
+      type: 'positional',
+      description: 'Files to lint',
+      required: false,
+    },
+  },
+  run: () => {},
+});
+
+main.subCommands = {
+  dev: devCommand,
+  build: buildCommand,
+  lint: lintCommand,
+} as Record<string, CommandDef<ArgsDef>>;
+
+const completion = await tab(main, {
+  options: {
+    config: {
+      handler: () => [
+        { value: 'vite.config.ts', description: 'Vite config file' },
+        { value: 'vite.config.js', description: 'Vite config file' },
+      ],
+    },
+    mode: {
+      handler: () => [
+        { value: 'development', description: 'Development mode' },
+        { value: 'production', description: 'Production mode' },
+      ],
+    },
+    logLevel: {
+      handler: () => [
+        { value: 'info', description: 'Info level' },
+        { value: 'warn', description: 'Warn level' },
+        { value: 'error', description: 'Error level' },
+        { value: 'silent', description: 'Silent level' },
+      ],
+    },
+  },
+
+  subCommands: {
+    lint: {
+      handler: () => [
+        { value: 'main.ts', description: 'Main file' },
+        { value: 'index.ts', description: 'Index file' },
+      ],
+    },
+    dev: {
+      options: {
+        port: {
+          handler: () => [
+            { value: '3000', description: 'Development server port' },
+            { value: '8080', description: 'Alternative port' },
+          ],
+        },
+        host: {
+          handler: () => [
+            { value: 'localhost', description: 'Localhost' },
+            { value: '0.0.0.0', description: 'All interfaces' },
+          ],
+        },
+      },
+    },
+  },
+});
+
+void completion;
+
+const cli = createMain(main);
+cli();