September 2022 Release (version 1.30.8) - Postfix Snippets, UI Shortcuts, VS Code Extension, and Much, much more!

Script Kit 1.30.8 Released 🎉

Download here: https://www.scriptkit.com/

This is our first release after a couple of busy summer months, and it's slam-packed full of new features and UX!

Postfix Snippets

Postfix snippets are snippets that are triggered by typing a postfix after a "variable" of text. The variable is represented by a * at the beginning of snippet. In the *html,, example below, typing divhtml,, would treat div as the variable and render out <div>Hello world</div>.

Postfix Snippet Hello World

// Name: Example Postfix Snippet
// Snippet: *html,,

import "@johnlindquist/kit"

let value = await arg("I'm the '*' content")

setSelectedText(`<${value}>Hello world</${value}>`)

Postfix Snippet Query API

The snippet can also take the content of the * and post it to an API for more complex scripts.

In this example, the content is used to query google and create a markdown link from the word you typed.

// Name: Markdown Link from Google Snippet
// Snippet: *,.

import "@johnlindquist/kit"

let google  = await npm("googlethis")

const options = {
  page: 0, 
  safe: false,
  additional_params: { 
    hl: 'en' 
  }
}

let value = await arg("I'm the asterisk content")
let response = await google.search(value, options);

let url = response.results[0].url

setSelectedText(`[${value}](${url})`)

template()

The template prompt will present the editor populated by your template. You can then tab through each variable in your template and edit it.

Templates pair really, really nicely with Snippets!

Template Hello World

let text = await template(`Hello $1!`)

Standard Usage

let text = await template(`
Dear \${1:name},

Please meet me at \${2:address}

    Sincerely, John`)

await docs()

docs() takes the file path of a markdown file and displays it as a list of choices.

Each h2 is displayed as a choice while the content of the h2 is displayed in the preview.

Selected the choice will return current h2.

Submitting a docs() value

If you'd rather submit a value instead of the h2, then use an HTML comment to specify the value under the h2's content:

## I'm the Choice Header
<!-- value: This will be returned -->

docs() Example

// Name: Example Docs

import "@johnlindquist/kit"

let buffer = await download(`https://raw.githubusercontent.com/BuilderIO/qwik/main/README.md`)

let filePath = tmpPath("README.md")
await writeFile(filePath, buffer)


let selectedDoc = await docs(filePath)

dev({selectedDoc})

UI Shortcuts in the "Action Bar"

The September 2022 release adds a new "Action Bar" at the bottom of the UI which supports custom shortcuts.

A shortcut has a name, key, onPress and bar property. When you press the shortcut, it will trigger the onPress function. You can also click on the shortcut to trigger the onPress function.

let clearInput = {
            name: "Clear",
            key: "cmd+u",            
            onPress: async () => { 
                setInput("")
            },
            // optional, but will only display when set
            bar: "right",
}

Add each shortcuts to a shortcuts array which is passed to the prompt config (most commonly, the first argument of arg()).

UI Shortcuts Example

// Name: Shortcuts Example

import "@johnlindquist/kit"

let clearInput = {
            name: "Clear",
            key: "cmd+u",            
            onPress: async () => { 
                setInput("")
            },
            // optional, but will only display when set
            bar: "right",
}

let reloadChoices = {
            name: "Reload",
            key: "cmd+l",
            bar: "right",
            onPress: async () => { 
                setChoices(["one","two","three"])
            }
}      

let submitInputNotChoice = {
            name: "Submit Input",
            key: "cmd+i",
            bar: "right",
            onPress: async (input) => { 
                submit(input)
            }
}                

let runAppLauncher = {
            name: "Launch App",
            key: "cmd+a",
            bar: "left",
            onPress: async () => { 
                await run(kitPath("main", "app-launcher.js"))
            }
}

let result = await arg({
    placeholder: "Shortcut demo",
    shortcuts: [        
        clearInput,
        reloadChoices,
        submitInputNotChoice,
        runAppLauncher
    ]
}, ["apple", "banana", "cherry"])

await div(md(`## ${result}`))

Recent Script Moved to Top

The most recently run script is now moved to the top of the list so that the next time you open the main prompt, you can quickly run it again.

VS Code Extension

We now have a VS Code extension which allows you to run scripts directly from VS Code:

https://marketplace.visualstudio.com/items?itemName=johnlindquist.kit-extension

More features are coming soon!

Menubar Updates

The menubar menu now has a "Dev Tools" menu which allows you to perform some common commands that might not be obvious from the main UI.

The menu also lists all of the running processes so that you can easily terminate them without having to hunt around from process ids.

cmd+tab to Widgets and dev

When the main prompt is open, a widget is open, or a dev window is open, the Script Kit icon will be added to the doc to allow you to cmd+tab back to widgets/editor/dev/etc. Since Script Kit is a combination of a temporary prompt (like Alfred) but also can host long-running widgets, we had to work through various scenarios of when cmd+tab can be available. Hopefully we've landed on a solution that works for everyone.

Main Menu API and Guide

The Main Menu of Script Kit now hosts API and Guide tabs which allow you to easily copy code snippets or create new scripts from the examples. They're also both easy to update, so you can expect more samples and explanations to play with in the future!

await emoji()

A brand new emoji picker

let e = await emoji()
setSelectedText(e.emoji)

await fields()

let [first, last] = await fields(["First name", "Last name"])

dev({
    first,
    last
})

beep()

And the most exciting announcement of all, beep() is now available!

beep() plays a beep sound.

beep() Example

beep()