@@ -31,8 +31,8 @@ Add autocompletions to your CLI tool:
3131import t from ' @bomb.sh/tab' ;
3232
3333// Define your CLI structure
34- t .command (' dev' , ' Start development server' );
35- t .option (' port' , ' Specify port' , (complete ) => {
34+ const devCmd = t .command (' dev' , ' Start development server' );
35+ devCmd .option (' port' , ' Specify port' , (complete ) => {
3636 complete (' 3000' , ' Development port' );
3737 complete (' 8080' , ' Production port' );
3838});
@@ -60,20 +60,24 @@ node my-cli.js complete -- dev --port=<TAB>
6060Install for users:
6161
6262``` bash
63- source <( my-cli complete zsh) # One-time setup
64- my-cli complete zsh >> ~ /.zshrc # Permanent setup
63+ # One-time setup
64+ source <( my-cli complete zsh)
65+
66+ # Permanent setup
67+ my-cli complete zsh > ~ /.my-cli-completion.zsh
68+ echo ' source ~/.my-cli-completion.zsh' >> ~ /.zshrc
6569```
6670
6771## Package Manager Completions
6872
6973As mentioned earlier, tab provides completions for package managers as well:
7074
7175``` bash
72- # this generates a completion script for your shell
73- npx @bomb.sh/tab pnpm zsh >> ~ /.zshrc
74- npx @bomb.sh/tab npm bash >> ~ /.bashrc
76+ # Generate and install completion scripts
77+ npx @bomb.sh/tab pnpm zsh > ~ /.pnpm-completion.zsh && echo ' source ~/.pnpm-completion.zsh ' > > ~ /.zshrc
78+ npx @bomb.sh/tab npm bash > ~ /.npm-completion.bash && echo ' source ~/.npm-completion.bash ' > > ~ /.bashrc
7579npx @bomb.sh/tab yarn fish > ~ /.config/fish/completions/yarn.fish
76- npx @bomb.sh/tab bun powershell >> $PROFILE
80+ npx @bomb.sh/tab bun powershell > ~ /.bun-completion.ps1 && echo ' . ~/.bun-completion.ps1 ' > > $PROFILE
7781```
7882
7983Example in action:
@@ -86,56 +90,6 @@ yarn add --emoji=<TAB>
8690# Shows: true, false
8791```
8892
89- ## Framework Integration
90-
91- Tab includes adapters for popular JavaScript CLI frameworks:
92-
93- #### Using the Core API
94-
95- ``` typescript
96- import t from ' @bomb.sh/tab' ;
97-
98- t .command (' dev' , ' Start development server' );
99- t .option (' port' , ' Specify port' , (complete ) => {
100- complete (' 3000' , ' Development port' );
101- complete (' 8080' , ' Production port' );
102- });
103-
104- // handle completion requests
105- if (process .argv [2 ] === ' complete' ) {
106- const shell = process .argv [3 ];
107- if (shell === ' --' ) {
108- // parse completion arguments
109- const args = process .argv .slice (4 );
110- t .parse (args );
111- } else {
112- // generate shell script
113- t .setup (' my-cli' , ' node my-cli.js' , shell );
114- }
115- }
116- ```
117-
118- ** Test your completions:**
119-
120- ``` bash
121- node my-cli.js complete -- dev --p< TAB>
122- # Output: --port Specify port
123-
124- node my-cli.js complete -- dev --port=< TAB>
125- # Output: --port=3000 Development port
126- # --port=8080 Production port
127- ```
128-
129- ** Install for users:**
130-
131- ``` bash
132- # One-time setup
133- source <( my-cli complete zsh)
134-
135- # Permanent setup
136- my-cli complete zsh >> ~ /.zshrc
137- ```
138-
13993## Framework Adapters
14094
14195Tab provides adapters for popular JavaScript CLI frameworks.
@@ -158,14 +112,10 @@ cli
158112const completion = tab (cli );
159113
160114// Add custom completions for option values
161- const devCommand = completion .commands .get (' dev' );
162- const portOption = devCommand ?.options .get (' --port' );
163- if (portOption ) {
164- portOption .handler = async () => [
165- { value: ' 3000' , description: ' Development port' },
166- { value: ' 8080' , description: ' Production port' },
167- ];
168- }
115+ completion .commands .get (' dev' )?.options .get (' --port' )! .handler = async () => [
116+ { value: ' 3000' , description: ' Development port' },
117+ { value: ' 8080' , description: ' Production port' },
118+ ];
169119
170120cli .parse ();
171121```
@@ -193,14 +143,10 @@ const main = defineCommand({
193143const completion = await tab (main );
194144
195145// Add custom completions
196- const devCommand = completion .commands .get (' dev' );
197- const portOption = devCommand ?.options .get (' --port' );
198- if (portOption ) {
199- portOption .handler = async () => [
200- { value: ' 3000' , description: ' Development port' },
201- { value: ' 8080' , description: ' Production port' },
202- ];
203- }
146+ completion .commands .get (' dev' )?.options .get (' --port' )! .handler = async () => [
147+ { value: ' 3000' , description: ' Development port' },
148+ { value: ' 8080' , description: ' Production port' },
149+ ];
204150
205151const cli = createMain (main );
206152cli ();
@@ -229,17 +175,10 @@ program
229175const completion = tab (program );
230176
231177// Add custom completions
232- for (const command of completion .commands .values ()) {
233- if (command .value === ' serve' ) {
234- const portOption = command .options .get (' --port' );
235- if (portOption ) {
236- portOption .handler = async () => [
237- { value: ' 3000' , description: ' Default port' },
238- { value: ' 8080' , description: ' Alternative port' },
239- ];
240- }
241- }
242- }
178+ completion .commands .get (' serve' )?.options .get (' --port' )! .handler = async () => [
179+ { value: ' 3000' , description: ' Default port' },
180+ { value: ' 8080' , description: ' Alternative port' },
181+ ];
243182
244183program .parse ();
245184```
@@ -262,9 +201,9 @@ my-cli complete -- install --port=""
262201:4
263202```
264203
265- ## Docs
204+ ## Documentation
266205
267- For more detailed documentation, please visit [ bombshell docs] ( https://bomb.sh/docs/tab/ ) !
206+ See [ bombshell docs] ( https://bomb.sh/docs/tab/ ) .
268207
269208## Contributing
270209
0 commit comments