svelte

Svelte plugin for BunSai

Quick start

Install it:

bun add @bunsai/svelte

And add it to the plugins array:

import sveltePlugin from "@bunsai/svelte";

const config: BunSaiArgs = {
  plugins: [
    sveltePlugin([
      /* optional: svelte preprocessors */
    ]),
  ],
};

How it works?

This plugin enables Svelte files to be used in a BunSai project.

<script lang="ts">
  import { type Context } from "@bunsai/svelte";

  export let context: Context;

  // you can check if it is running server-side or client-side
  context.isServer;

  // Elysia handler context.
  // NOTE: on server-side this is a full context object, but on client-side this is a JSON object
  context.elysia;

  // You can add attributes to tags like html's lang attribute
  context.attrs;
</script>

Builtin Preprocessors

Any Svelte Preprocessor can be used, but @bunsai/svelte has some builtin preprocessors:

Typescript

The Typescript preprocessor uses Bun.Transpiler, so it is faster than the widely used svelte typescript preprocessor. It transpiles script tags containing lang="ts" or lang="typescript" attribute.

Usage:

import typescript from "@bunsai/svelte/preprocessors/typescript";

sveltePlugin([typescript(/* optional: transpiler options */)]);

PostCSS

This plugin requires postcss and postcss-load-config to be installed. It also depends on postcss.config.js existing at cwd. It works on style tags containing lang="postcss" attribute.

Usage:

import postcss from "@bunsai/svelte/preprocessors/postcss";

sveltePlugin([postcss()]);