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 uses the following components:
react-reconciler
rpc-websockets
to communicate between the backend and front endIn 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.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
.
The shortcut key to open the Blast window is ⌘;
, Command + ;. It will be configurable in the future.
# 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
tail -f ~/.blast/logs/runtime.log
tail -f ~/.blast/logs/runtime.err.log
Just run:
pnpm react-devtools
Then start the application(The devtool must be run before the application started). It should automatically connect to the React DevTools.
Our Chief Marketing Officer(nickname ChatGPT) gave me this idea.
I was asking him/her/it to come up with words similar to "raycast".
Blast(爆破)應該滿星爆的吧!但星爆氣流斬原文是 starburst stream。算了。
MIT