An often overlooked terminal shortcut is history search. Pressing control
+r
, let's you quickly search over all of your previously used terminal commands. We would like you to implement this history search functionality, similar to how it is done in fzf, but as a Fig app.
Framework | Language |
---|---|
Vue2 | Typescript |
- Create a standard Vue/TS development environment, with transpilation, module bundling, linting, etc
- Load command history, accounting for different shells (
bash
,zsh
,fish
), terminals, and history saving formats - Update list of commands to include new commands run by the user
- Display and filter a list of suggestions based on what the user has typed
- Implement fuzzy searching
- Highlight fuzzy search matches
- Implement virtualized scrolling (this should make the app much more performant)
-
Run
python3 -m http.server 3000
in the root project folder -
Switch to development build using
fig util:build dev
-
When using a
dev
build, the Fig app will load a file fromlocalhost:3000/autocomplete/v6
in the popup window. -
You can switch builds by running
fig util:build <BUILD>
- To switch to
dev
, runfig util:build dev
. To switch back toprod
, runfig util:build prod
- To switch to
-
We've included a very barebones starter (
./autocomplete/v6/index.html
), so you can get a sense for the Fig APIs and sanity check that everything is working.
==You should set up a more standard Vue/TS development environment, with transpilation, module bundling, linting, etc.==
-
You can press
escape
at anytime to hide the popup window. This is helpful if you need to run a command in the terminal. -
You can right click on the popup window to force it to reload and open the web inspector.
-
If you want to force the popup window to appear (for instance, so that you can click on it to show the JS console), go to the Fig menubar icon > Settings > Developer and then toggle "Debug Mode" on.
-
If the some of the parameters in the fig.autocomplete hook are coming out as null, you need to run
fig source
in the terminal you are testing your app in
See ./autocomplete/v6/index.html
for sample implementation.
Running fig.js commands before fig.init
has been called results in undefined behavior. You should overwrite fig.init
with your own function, that serves as the entry point for application logic.
fig.init = () => {
console.log("fig.js has loaded and you can run fig commands")
// you might initialize the pty here as well
fig.pty.init()
}
fig.autocomplete = (buffer, cursorIndex, windowID, tty, cwd, processUserIsIn) => {
}
- buffer: what the user has typed on a given line
- cursorIndex: index of cursor in the line
- windowID: the macOS window ID of the terminal emulator (you won't need)
- tty: the tty of the terminal the user is in (you won't need)
- processUserIsIn: whether the user is in
bash
,zsh
,fish
etc. Note, it could also be something like/bin/bash
or-zsh
While the Fig popup window is visible, it will intercept certain keystrokes.
- Enter (
36
) - Tab (
48
) - Up arrow (
126
) - Down arrow (
125
)
Note: Fig will only send events for the keystrokes above, not every key stroke
fig.keypress = (appleKeyCode) => {
}
await fwrite("~/path/to/file")
This will write the file at ~/path/to/file
or throw an error. It is an async wrapper over fig.fwrite
.
await fread("~/path/to/file")
This will read the file at ~/path/to/file
or throw an error if the file does not exist. It is an async wrapper over fig.fread
.
await ptyexecute("git")
This will execute the command in a background pseudo terminal. It is an async wrapper over fig.pty.execute
.
fig.maxheight = `${100}`
Note that the value assigned to
maxheight
must be a string.