|
1 | 1 | <p> |
2 | | - <img width="100%" src="https://assets.solidjs.com/banner?type=Ecosystem&background=tiles&project=library-name" alt="solid-create-script"> |
| 2 | + <img width="100%" src="https://assets.solidjs.com/banner?type=Ecosystem&background=tiles&project=bun-plugin-solid" alt="bun-plugin-solid"> |
3 | 3 | </p> |
4 | 4 |
|
5 | | -# Template: SolidJS Library |
| 5 | +# @dschz/bun-plugin-solid |
6 | 6 |
|
7 | | -Template for [SolidJS](https://www.solidjs.com/) library package. Bundling of the library is managed by [tsup](https://tsup.egoist.dev/). |
| 7 | +MIT Licensed |
8 | 8 |
|
9 | | -Other things configured include: |
| 9 | +> 🧩 A Bun plugin for transforming SolidJS JSX/TSX files at runtime or build time using Babel. Supports SSR and DOM output. |
10 | 10 |
|
11 | | -- Bun (for dependency management and running scripts) |
12 | | -- TypeScript |
13 | | -- ESLint / Prettier |
14 | | -- Solid Testing Library + Vitest (for testing) |
15 | | -- Playground app using library |
16 | | -- GitHub Actions (for all CI/CD) |
| 11 | +> ⚠️ **Note**: This plugin is designed specifically for use with the [Bun runtime](https://bun.sh). It will not work in Node.js, Deno, or other JavaScript environments. |
17 | 12 |
|
18 | | -## Getting Started |
| 13 | +## Features |
19 | 14 |
|
20 | | -Some pre-requisites before install dependencies: |
| 15 | +- ✅ Works in both `bun run` (runtime) and `bun build` (build-time) contexts |
| 16 | +- 🎯 Supports SSR (`generate: "ssr"`) and DOM (`generate: "dom"`) output |
| 17 | +- 💧 Hydratable output toggle for SSR |
| 18 | +- 🧱 Designed to be invoked via `preload` or build plugins |
| 19 | +- 🪄 Minimal and explicit configuration surface |
21 | 20 |
|
22 | | -- Install Node Version Manager (NVM) |
23 | | - ```bash |
24 | | - curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash |
25 | | - ``` |
26 | | -- Install Bun |
27 | | - ```bash |
28 | | - curl -fsSL https://bun.sh/install | bash |
29 | | - ``` |
30 | | - |
31 | | -### Installing Dependencies |
| 21 | +## Installation |
32 | 22 |
|
33 | 23 | ```bash |
34 | | -nvm use |
35 | | -bun install |
| 24 | +npm add -d @dschz/bun-plugin-solid @babel/core @babel/preset-typescript babel-preset-solid |
| 25 | +pnpm add -d @dschz/bun-plugin-solid @babel/core @babel/preset-typescript babel-preset-solid |
| 26 | +yarn add -d @dschz/bun-plugin-solid @babel/core @babel/preset-typescript babel-preset-solid |
| 27 | +bun add -d @dschz/bun-plugin-solid @babel/core @babel/preset-typescript babel-preset-solid |
| 28 | +``` |
| 29 | + |
| 30 | +> These are **peer dependencies**, so they must be installed manually: |
| 31 | +> |
| 32 | +> - `@babel/core` |
| 33 | +> - `@babel/preset-typescript` |
| 34 | +> - `babel-preset-solid` |
| 35 | +
|
| 36 | +## Plugin Options |
| 37 | + |
| 38 | +> Plugin options `generate` and `hydratable` are directly derived from [`babel-preset-solid`](https://github.com/solidjs/solid/blob/main/packages/babel-preset-solid/src/index.ts#L11-L18) and will be passed to it under the hood. |
| 39 | +
|
| 40 | +```ts |
| 41 | +type SolidPluginOptions = { |
| 42 | + /** |
| 43 | + * Whether to generate DOM or SSR-compatible output. |
| 44 | + * Defaults to "dom". |
| 45 | + */ |
| 46 | + generate?: "dom" | "ssr"; |
| 47 | + |
| 48 | + /** |
| 49 | + * Enables hydration code generation for SSR. |
| 50 | + * Defaults to true. |
| 51 | + */ |
| 52 | + hydratable?: boolean; |
| 53 | + |
| 54 | + /** |
| 55 | + * Controls source map generation: |
| 56 | + * - false: no source maps |
| 57 | + * - true: external .map file |
| 58 | + * - "inline": base64-encoded inline source maps |
| 59 | + * |
| 60 | + * Defaults to "inline". |
| 61 | + */ |
| 62 | + sourceMaps?: boolean | "inline"; |
| 63 | + |
| 64 | + /** |
| 65 | + * Enable verbose debug logs during transform. |
| 66 | + * Defaults to false. |
| 67 | + */ |
| 68 | + debug?: boolean; |
| 69 | +}; |
36 | 70 | ``` |
37 | 71 |
|
38 | | -### Local Development Build |
| 72 | +## Usage |
39 | 73 |
|
40 | | -```bash |
41 | | -bun start |
| 74 | +### 🔧 Runtime (Development) via Preload Script |
| 75 | + |
| 76 | +Use this for runtime-based workflows like server-side rendering (SSR) with Elysia, Bun, or other Bun-native frameworks. |
| 77 | + |
| 78 | +#### `bunPreload.ts`: |
| 79 | + |
| 80 | +```ts |
| 81 | +import { plugin } from "bun"; |
| 82 | +import { SolidPlugin } from "@dschz/bun-plugin-solid"; |
| 83 | + |
| 84 | +// The `plugin` API automatically registers a BunPlugin |
| 85 | +await plugin( |
| 86 | + SolidPlugin({ |
| 87 | + generate: "ssr", |
| 88 | + hydratable: true, |
| 89 | + debug: true, |
| 90 | + }), |
| 91 | +); |
42 | 92 | ``` |
43 | 93 |
|
44 | | -### Linting & Formatting |
| 94 | +#### `bunfig.toml`: |
45 | 95 |
|
46 | | -```bash |
47 | | -bun run lint # checks source for lint violations |
48 | | -bun run format # checks source for format violations |
| 96 | +```toml |
| 97 | +jsx = "solid" |
| 98 | +jsxFactory = "solid-js" |
| 99 | +preload = ["./bunPreload.ts"] |
| 100 | +``` |
49 | 101 |
|
50 | | -bun run lint:fix # fixes lint violations |
51 | | -bun run format:fix # fixes format violations |
| 102 | +#### Run: |
| 103 | + |
| 104 | +```bash |
| 105 | +bun run server.ts |
52 | 106 | ``` |
53 | 107 |
|
54 | | -### Contributing |
| 108 | +--- |
55 | 109 |
|
56 | | -The only requirements when contributing are: |
| 110 | +### 📦 Build-Time Compilation with `Bun.build()` |
57 | 111 |
|
58 | | -- You keep a clean git history in your branch |
59 | | - - rebasing `main` instead of making merge commits. |
60 | | -- Using proper commit message formats that adhere to [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) |
61 | | - - Additionally, squashing (via rebase) commits that are not [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) |
62 | | -- CI checks pass before merging into `main` |
| 112 | +Use this in production workflows to pre-compile `.tsx` or `.jsx` files to JavaScript. |
| 113 | + |
| 114 | +#### `build.ts`: |
| 115 | + |
| 116 | +```ts |
| 117 | +import { SolidPlugin } from "@dschz/bun-plugin-solid"; |
| 118 | + |
| 119 | +await Bun.build({ |
| 120 | + entrypoints: ["./src/index.ts"], |
| 121 | + outdir: "./dist", |
| 122 | + target: "bun", |
| 123 | + format: "esm", |
| 124 | + plugins: [ |
| 125 | + SolidPlugin({ |
| 126 | + generate: "ssr", |
| 127 | + hydratable: true, |
| 128 | + sourceMaps: false, // recommended for production |
| 129 | + }), |
| 130 | + ], |
| 131 | +}); |
| 132 | +``` |
0 commit comments