Blast Launcher (aka C8763)

Update: I wrote an introduction post for Blast Launcher.

Blast is an open-source educational and experimental project that aims to utilize the extension ecosystem of Raycast Launcher

Raycast is a SaaS software, while providing paid subscription services for teams, for personal is copmletely free. You can also extend your workflow by building extensions on your own. The extensions are implemented using custom React components(@raycast/api), and each command within an extension can be thought of as a separate React application. I think that's the magic of Raycast, where everyone can easily build and integrate their own tools without much effors on top of the huge Node.js and React.js ecosystem.

While Raycast is great, it is a closed-source software and the extension ecosystem can only be used in Raycast. So here's where this project comes in.

Blast provides an open-source React renderer to render these Raycast extensions.

• Blast Launcher (aka C8763)
  • Demo
  • Architecture
  • Basic usage
    • Install
    • Usage
  • Development
  • Debugging
    • See runtime logs
    • Debugging runtime with React DevTools
  • Inspiration and related projects
  • FAQs
    • Why naming blast?
    • Why C8763?
  • Links
  • License

Demo

Architecture

Blast uses the following components:

• Node.js to write the backend and implement a custom React renderer with react-reconciler
• Electron & React.js to write the front end and render the React element tree as HTML
• Use rpc-websockets to communicate between the backend and front end

In the architecture of Blast, the backend uses Node.js and the react-reconciler package to implement a custom React renderer. The element tree created during this process is then emitted as a JSON object tree to the front end, which is an Electron app built with React.js and rendered as HTML. While the front end is built with React, it is also framework agnostic as it can accept the plain JSON element tree from the backend.

For higher performance, a custom renderer such as React-native may send operations to the host app to build a shadow element tree alongside the renderer. However, Blast was designed for educational and experimental purposes and therefore emits the entire element tree as JSON during the resetAfterCommit phase, which is called every time the component is updated. This is less performant but sufficient for the needs of this project as the component tree is not complex and high performance is not required.

You can learn more about the blast architecture in the following documents:

• @blastlauncher/renderer: The custom React renderer
• @blastlauncher/runtime: The backend and runtime application, which is also a React.js app
• @blastlauncher/api: Polyfill for the Raycast API
• @blastlauncher/cli: A CLI tool that manage to build/publish raycast extension to blast compatible module. Really much alike the ray-cli tool.

Basic usage

Install

• Download the latest version of Blast from the release page
• Unzip the downloaded file and move the Blast app to the Applications folder
• Note: On macOS, you may need to allow the app to be opened in "System Preferences"
  • or right click on the Blast app and select "Open" to open the app
  • If it doesn't show up in the context menu, do it again.

After opening the Blast app, it will ask to install Node.js runtime. Just click "Install" and wait for the installation to complete. It downloads node.js and extract it to ~/.blast/node.

Usage

The shortcut key to open the Blast window is ⌘;, Command + ;. It will be configurable in the future.

Development

# Make sure you have pnpm v7 installed, then install dependencies with pnpm
pnpm install

# Start build
pnpm run watch

# Start front end in dev mode
pnpm run start:client

Debugging

See runtime logs

tail -f ~/.blast/logs/runtime.log
tail -f ~/.blast/logs/runtime.err.log

Debugging runtime with React DevTools

Just run:

pnpm react-devtools

And start the application. It should automatically connect to the React DevTools.

Inspiration and related projects

• SunbeamLauncher: A frontend agnostic Launcher app, written in Go, and you can write extensions in any language.
• ⌘K, cmdk: A React.js Component to build Launcher app UI. The front end of Blast is based on this project. The author also provided several launcher themes, such as Linear, Raycast and Vercel,but they are only for demo purposes so you need to modify them to use.
• Sittly Launcher: Another project inspired by raycast! I discovered it while regularly searching for projects with the "raycast" keyword on GitHub. 😂 Oops, sorry for the early spoiler.

FAQs

Why naming blast?

Our Chief Marketing Officer(nickname ChatGPT) gave me this idea.

I was asking him/her/it to come up with words similar to "raycast".

Why C8763?

Blast（爆破）應該滿星爆的吧！但星爆氣流斬原文是 starburst stream。算了。

Links

• Resources to learn how to build a custom React Renderer
  • Jam Risser – Building a Custom React Renderer
    • and the example code: https://github.com/clayrisser/create-react-renderer
  • ReactDOM Reconciler Host config
• About Blast
  • Blast Launcher introduction post(Written in Chinese): Blast：一個能執行 Raycast 擴充功能的 React.js 渲染器

License

MIT