March 2022 Release (version 1.7.3) - Widgets! Built-in Terminal, Menu, and Built-in Editor Types

March 2022 Release (version 1.7.3)

Script Kit should auto-update or you can grab the downloads here: https://www.scriptkit.com/

Widgets - `await widget()`

A widget is a detached UI window that can control and listen to a script.


// Name: Widget Hello World

import "@johnlindquist/kit"

let message = await arg("Hello what?")
await widget(`<h1 class="p-4 text-4xl">Hello ${message}</h1>`)

Widget Events

Open widget-events in Script Kit


// Name: Widget Events

import "@johnlindquist/kit"

let text = ""
let count = 0

let w = await widget(`
<div class="p-5">
    <h1>Widget Events</h1>
    <input autofocus type="text" class="border dark:bg-black"/>
    <button id="myButton" class="border px-2 py-1">+</button>
    <span>{{count}}</span>    
</div>
`)

w.onClick((event) => {
    if (event.targetId === "myButton") {
        w.setState({count: count++})
    }
})

w.onClose(async () => {
    await widget(`
<div class="p-5">
    <h1>You closed the other widget</h1>
    <p>${text}</p>
</div>
`)
})

w.onInput((event) => {
    text = event.value
})

w.onMoved(({ x, y}) => {
    // e.g., save position
})

w.onResized(({ width, height }) => {
    // e.g., save size
})

Closing a Widget

There are 3 ways to close a widget:

Hit "escape" with the widget focused
End the process of the widget. Hit cmd+p with the main menu focused to see the running processes or exit() anywhere in the script.
Use a ttl (time to live) in the options when creating a widget

"Always on Top" and Locking the Widget

Open widget-always-on-top in Script Kit


// Name: Widget Always on Top

import "@johnlindquist/kit"

await widget(`<h1 class="text-9xl">🇺🇦</h1>`, {
    alwaysOnTop: true,
    transparent: true
})

With a widget focused, press cmd+l to "Lock" the widget. This will disable any possible mouse interactions (including moving, resizing, etc) and allow you to click through the widget to any windows underneath.

To "Unlock":

three-fingered swipe up on OSX
focus the widget
hit cmd+l

You can now hit move, escape, etc the widget.

Built-in Terminal - `await term()`

term is Script Kit's built-in terminal.

From the Main Menu

Type > into the main menu to open term

From a Script

Use the await term() API to switch to the terminal.

Open term-hello-world in Script Kit


// Name: Term Hello World

import "@johnlindquist/kit"

await term(`echo 'Hello World!'`)

Note: If you want spawn a new Mac terminal, use await terminal()

Pass Terminal Output to Script

If you end the terminal with cmd+enter, the script will continue and you can grab the latest text output from the terminal.

🐞: ctrl+any key will also end the terminal. This is a bug (it was only meant to be ctrl+c) which I'll fix soon. I'm also open to ideas for other shortcuts to "end" a terminal that aren't taken by vim/emacs/etc, because I know I'll be missing some. 🐞: term doesn't grab keyboard focus when opening. I'll get that fixed ASAP!

Open term-returns in Script Kit


// Name: Term Returns

import "@johnlindquist/kit"

let text = await term(`ls ~/.kit`)
await editor(text)

Menubar - `menu()`

menu allows you to customize the menubar for Script Kit.

Open menu-hello-world in Script Kit


// Name: Menu Hello World

import "@johnlindquist/kit"

menu(`Hello 🌎`)

Menu with Scripts

The second arg of menu can be an array of scripts you wish to present in a drop-down menu. This way, on left-click, you'll get a list of scripts to pick from from the menubar rather than opening the main Script Kit UI.

Open menu-with-scripts in Script Kit


// Name: Menu with Scripts

import "@johnlindquist/kit"

// An empty string means "Use default Script Kit icon"
menu(``, [
    "app-launcher"
])

Built-in Editor Types

Script Kit's built-in editor now loads all of Script Kit's types! This was a huge undertaking that everyone just expects to work. You all know how that feels 😇

🐞: Please let me know if you see any missing. I noticed that I missed the types for terminal and iterm when putting this post together 🤦‍♂️.

March Plans

I'm dedicating March to DOCUMENTATION!!! (and bug-fixes)... I have a lot of script requests to follow-up on and work around the newsletter and other non-app stuff. I'm also moving this month, so y'all know how stressful that can be. So expect the April build to be extremely light feature-wise, but I will be set up in the new house ready to much more live-streaming and communication. Can't wait to share more! 🙂

Questions?

I'm happy to help with any questions you may have!

Discuss Post