![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
bunsai
Advanced tools
Readme
Bonsai is a japanese art of growing and shaping miniature trees in containers.
Bun + Bonsai = BunSai
BunSai is The SSR Engine for Bun.
It leverages some of the powers of Bun (like Bundler, preloading and plugin system) to create a fast, DX friendly library.
NOTE: the full documentation is coming soon...
bun add bunsai@2 <the optional deps you are gonna use>
Framework/API | Example |
---|---|
Elysia | adapters/elysia.ts |
Hono | adapters/hono.ts |
Bun.serve | adapters/manifest.ts |
Bun.write | adapters/file.ts |
Byte | Coming soon... |
Static Build | Coming soon... |
Currently BunSai supports Svelte and React. Check examples
.
Svelte is a framework and has a compiler, thus having a higher level DX. That means you have to use plugins, write "Svelte code" and you have access to global injected variables.
On the other hand, React is a library and have a much lower level DX. Its just Typescript (or Javascript, but who uses plain JS these days?).
To avoid having a README full of information and difficult to understand, I will put all the information on the (coming soon) BunSai documentation web page.
To run on dev mode, just use Bun --hot
flag and add:
# .env
DEBUG=on
NOTE: Browser HMR is not yet supported
BunSai has an entrypoint (a function) that must be called after all modules are imported and before begining the use of those modules.
import A from "./module-a";
import B from "./module-b";
import C from "./module-c";
import bunsai from "bunsai";
// or
import { bunsai } from "bunsai/<adapter>";
const result = await bunsai(/* config here */);
/* your code here */
BunSai also offers a convenience tool:
import "bunsai/with-config"; // WRONG
import A from "./module-a";
import B from "./module-b";
import "bunsai/with-config"; // WRONG
import C from "./module-c";
import "bunsai/with-config"; // RIGHT
/* your code here */
// bunsai.config.ts
import type { BunsaiConfig } from "bunsai";
const config: BunsaiConfig = {
/* ... */
};
export default config;
BunSai has (currently) 1 helper: asset
.
No big deal, just a helper function to allow you to use Bun asset import across BunSai (both server and client side):
NOTE: Svelte plugin automatically injects it and makes it available module scope as
asset
. You can opt out by settingSvelteConfig.bunsai2.useAsset
tofalse
.
import createAssetGetter from "bunsai/asset";
import myPng from "./asset.png";
const asset = createAssetGetter(import.meta);
asset(myPng);
BunSai is divided in 3 parts: Plugin, Adapter and Module.
A Plugin is the part of BunSai that converts things like Svelte code into a BunSai Module.
Let's take the builtin Svelte Plugin as an example:
# bunfig.toml
preload = ["bunsai/svelte/preload.ts"]
// tsconfig.json
{
// Svelte global references 'bunsai/global.d.ts',
// so if you are not using Svelte, you should include it yourself
"types": ["bunsai/svelte/global.d.ts"]
}
NOTE: if you use the Svelte Extension for VSCode, make sure the
Enable-TS-plugin
option is disabled
NOTE: The Svelte plugin uses config file (
svelte.config.ts
). For proper typing, please use the globalSvelteConfig
type
NOTE: React, being a library, has an library approach. That means no plugin.
As the name implies, an adapter adapts the BunSai Result (a.k.a. build) to be consumed by another Framework/API.
This time we'll take the Elysia adapter:
import { plug, plugged, bunsai, Elysia } from "bunsai/elysia";
import { render } from "./module.svelte";
const result = await bunsai();
// or
import "bunsai/with-config";
/*
If you are going to use 'bunsai/with-config',
the adapter will try to get the result from the global scope.
You dont even need to store the 'bunsai()' returned value,
nor pass it to the adapter entrypoint ('plug' in this case).
*/
/*
Or you can use 'plugged' and "ignore" both 'bunsai()' and 'bunsai/with-config'
*/
await plugged();
// as plugin
const app = new Elysia().use(plug(result)).get("/", render).listen(3000);
// as the main instance
const app = plug(result).get("/", render).listen(3000);
console.log("Elysia Ready!");
The module is just an Svelte file (in our case). It is the plugin's sole responsibility to transpile/adapt the source code into a BunSai Module.
The Svelte plugin uses svelte/compiler
to transpile our source code into vanilla javascript, then it injects BunSai's register
function and makes changes to exports so it can be consumed as an out-of-the-box BunSai Module.
Check the StandaloneModule interface
FAQs
SSR Engine for Bun
The npm package bunsai receives a total of 0 weekly downloads. As such, bunsai popularity was classified as not popular.
We found that bunsai demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.