brustjs 0.1.35-alpha → 0.1.37-alpha
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -13
- package/example/pokedex/app.css +11 -0
- package/example/pokedex/components/AppLayout.tsx +3 -1
- package/example/pokedex/components/TeamBuilder.module.css +47 -0
- package/example/pokedex/components/TeamBuilder.tsx +11 -2
- package/example/pokedex/components/ThemeToggle.tsx +7 -5
- package/example/pokedex/lib/loaders.ts +26 -11
- package/example/pokedex/lib/pokeapi.ts +45 -15
- package/example/pokedex/lib/types.ts +1 -0
- package/example/pokedex/pages/TypeChart.tsx +17 -13
- package/package.json +7 -7
- package/runtime/cli/build.ts +65 -35
- package/runtime/cli/templates/minimal/package.json.tmpl +1 -0
- package/runtime/cli/templates.ts +1 -0
- package/runtime/css/component-build.ts +13 -5
- package/runtime/css/route-deps.ts +26 -11
- package/runtime/css-modules.d.ts +17 -0
- package/runtime/index.d.ts +45 -4
- package/runtime/index.js +53 -52
- package/runtime/index.ts +89 -23
- package/runtime/islands/bootstrap.ts +16 -1
- package/runtime/islands/build.ts +46 -5
- package/runtime/islands/island.tsx +26 -11
- package/runtime/render/stream.ts +36 -18
- package/runtime/routes.ts +183 -82
package/README.md
CHANGED
|
@@ -13,10 +13,13 @@
|
|
|
13
13
|
|
|
14
14
|
</div>
|
|
15
15
|
|
|
16
|
-
React on the server, Rust everywhere else. One Bun host process; the HTTP
|
|
17
|
-
|
|
18
|
-
Renders cross into Bun Worker threads via
|
|
19
|
-
|
|
16
|
+
React on the server, Rust everywhere else. One Bun host process; the HTTP server
|
|
17
|
+
(hyper 1.x, HTTP/1.1 + HTTP/2) and worker pool are pure Rust, loaded as a `.node`
|
|
18
|
+
native module (napi-rs). Renders cross into Bun Worker threads via
|
|
19
|
+
`ThreadsafeFunction` (request as inline JSON) and return over a per-worker
|
|
20
|
+
`SharedArrayBuffer`. One worker can hold several renders in-flight
|
|
21
|
+
(`renderSlots`), overlapping I/O-bound (Suspense) renders. Multi-thread tokio
|
|
22
|
+
runtime — runs the same everywhere (no io_uring / seccomp caveat).
|
|
20
23
|
|
|
21
24
|
> Published on npm as [`brustjs`](https://www.npmjs.com/package/brustjs) (the
|
|
22
25
|
> `brust` name is taken). Alpha — see **Status**.
|
|
@@ -133,7 +136,8 @@ bun test tests/integration.test.ts # integration (real server)
|
|
|
133
136
|
```
|
|
134
137
|
|
|
135
138
|
```
|
|
136
|
-
crates/brust/
|
|
139
|
+
crates/brust-core/ Rust core (pure, zero napi): hyper server, worker pool, routing, cache
|
|
140
|
+
crates/brust/ Thin napi cdylib over brust-core (the .node)
|
|
137
141
|
crates/jsx-rust-compiler/ JSX → jinja compiler for native: true routes
|
|
138
142
|
runtime/ Bun-side: routing, render, actions, store, native directives, CLI
|
|
139
143
|
example/ pokedex native-first demo
|
|
@@ -142,14 +146,15 @@ bench/ · docs/ · architecture.md
|
|
|
142
146
|
|
|
143
147
|
## Status
|
|
144
148
|
|
|
145
|
-
Alpha, solo-developed. Linux is tier-1 (
|
|
146
|
-
binaries)
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
149
|
+
Alpha, solo-developed. Linux is tier-1 (glibc + musl, 6 prebuilt platform
|
|
150
|
+
binaries); the multi-thread tokio server runs under default container seccomp —
|
|
151
|
+
no `io_uring` exception needed. The server speaks **HTTP/1.1 + HTTP/2** with
|
|
152
|
+
optional in-process **TLS**, and a worker can hold several renders in-flight
|
|
153
|
+
(**`renderSlots`**) to overlap Suspense / loader-bound requests. Known partials:
|
|
154
|
+
`brustjs dev` reload is a full worker-respawn (not state-preserving HMR) — TS,
|
|
155
|
+
islands, and `.module.css` all reload that way. Tailwind is opt-in — the scaffold
|
|
156
|
+
adds it as a project dependency; `@import "tailwindcss"` resolves from your own
|
|
157
|
+
`node_modules`. Roadmap and limitations in [`architecture.md`](./architecture.md).
|
|
153
158
|
|
|
154
159
|
MIT.
|
|
155
160
|
|
package/example/pokedex/app.css
CHANGED
|
@@ -1,9 +1,20 @@
|
|
|
1
1
|
@import "tailwindcss";
|
|
2
2
|
@source "./**/*.{tsx,ts}";
|
|
3
3
|
@custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *));
|
|
4
|
+
|
|
5
|
+
/* Theme-toggle icons: hide the wrong icon at SSR time via the server-rendered
|
|
6
|
+
<html data-mode> ancestor, so there's no flash before x-show hydrates. After
|
|
7
|
+
mount, x-show sets inline display (which wins over these stylesheet rules). */
|
|
8
|
+
[data-mode="light"] .theme-icon-dark { display: none; }
|
|
9
|
+
[data-mode="dark"] .theme-icon-light { display: none; }
|
|
10
|
+
|
|
4
11
|
@theme {
|
|
5
12
|
--color-brand-50: oklch(0.97 0.02 264);
|
|
6
13
|
--color-brand-500: oklch(0.55 0.20 264);
|
|
7
14
|
--color-brand-600: oklch(0.49 0.20 264);
|
|
8
15
|
--color-brand-700: oklch(0.43 0.19 264);
|
|
9
16
|
}
|
|
17
|
+
|
|
18
|
+
button {
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
}
|
|
@@ -21,10 +21,12 @@ export default function AppLayout({
|
|
|
21
21
|
title,
|
|
22
22
|
teamProps,
|
|
23
23
|
mode,
|
|
24
|
+
themeLabel,
|
|
24
25
|
}: {
|
|
25
26
|
title: string
|
|
26
27
|
teamProps: { teamInitial: TeamMember[] }
|
|
27
28
|
mode: 'dark' | 'light'
|
|
29
|
+
themeLabel: string
|
|
28
30
|
}) {
|
|
29
31
|
return (
|
|
30
32
|
<BrustPage
|
|
@@ -48,7 +50,7 @@ export default function AppLayout({
|
|
|
48
50
|
<NavLink native href="/pokedex" label="Pokédex" />
|
|
49
51
|
<NavLink native href="/type-chart" label="Type chart" />
|
|
50
52
|
<div className="ml-auto flex items-center gap-2">
|
|
51
|
-
<ThemeToggle native />
|
|
53
|
+
<ThemeToggle native themeLabel={themeLabel} />
|
|
52
54
|
{/* Team dock opens via the TeamBuilder island's own floating trigger
|
|
53
55
|
(the island owns its open state). A navbar button here would be a
|
|
54
56
|
dead affordance — cross-chunk toggle wiring is out of scope. */}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/* CSS Modules use-case (dogfood).
|
|
2
|
+
*
|
|
3
|
+
* brust runs every co-located `.module.css` through Lightning CSS at build:
|
|
4
|
+
* class + @keyframes names are scoped to `<name>_<hash>` and emitted as a
|
|
5
|
+
* per-component chunk under `dist/css/components/<sha8>.css`. The chunk is
|
|
6
|
+
* linked into the page <head> via the component-CSS manifest (route → chunks),
|
|
7
|
+
* and `import styles from './TeamBuilder.module.css'` resolves to the
|
|
8
|
+
* original→hashed name map through brust's Bun.plugin — so `styles.panel`
|
|
9
|
+
* is the scoped class string at runtime.
|
|
10
|
+
*
|
|
11
|
+
* This is for things Tailwind utilities express awkwardly: keyframe entrance
|
|
12
|
+
* animations + pseudo-elements, scoped to this island. Plain CSS only — the
|
|
13
|
+
* component-CSS pass runs without Tailwind, so no `@apply` here. */
|
|
14
|
+
|
|
15
|
+
/* Roster panel: rise + fade in when the dock opens. */
|
|
16
|
+
.panel {
|
|
17
|
+
animation: rise 0.18s ease-out;
|
|
18
|
+
transform-origin: bottom right;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@keyframes rise {
|
|
22
|
+
from {
|
|
23
|
+
opacity: 0;
|
|
24
|
+
transform: translateY(0.5rem) scale(0.98);
|
|
25
|
+
}
|
|
26
|
+
to {
|
|
27
|
+
opacity: 1;
|
|
28
|
+
transform: translateY(0) scale(1);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Count badge on the floating trigger: a quick pop on (re)mount. */
|
|
33
|
+
.badge {
|
|
34
|
+
animation: pop 0.22s ease-out;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@keyframes pop {
|
|
38
|
+
0% {
|
|
39
|
+
transform: scale(0.6);
|
|
40
|
+
}
|
|
41
|
+
60% {
|
|
42
|
+
transform: scale(1.15);
|
|
43
|
+
}
|
|
44
|
+
100% {
|
|
45
|
+
transform: scale(1);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
@@ -10,6 +10,10 @@ import { client, useStore } from 'brustjs/client'
|
|
|
10
10
|
import type { Actions } from '../actions'
|
|
11
11
|
import type { TeamMember } from '../lib/types'
|
|
12
12
|
import { teamStore } from '../stores/team'
|
|
13
|
+
// CSS Modules: scoped class + keyframe names; resolves to the hashed-name map
|
|
14
|
+
// via brust's Bun.plugin. The chunk is linked per-route from the component-CSS
|
|
15
|
+
// manifest (see routes.tsx for the route→chunk linking note).
|
|
16
|
+
import styles from './TeamBuilder.module.css'
|
|
13
17
|
|
|
14
18
|
const api = client<Actions>()
|
|
15
19
|
const MAX = 6
|
|
@@ -47,7 +51,9 @@ export default function TeamBuilder({ teamInitial }: { teamInitial: TeamMember[]
|
|
|
47
51
|
return (
|
|
48
52
|
<div className="fixed bottom-5 right-5 z-[200]">
|
|
49
53
|
{open && (
|
|
50
|
-
<div
|
|
54
|
+
<div
|
|
55
|
+
className={`mb-3 w-80 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl dark:border-slate-700 dark:bg-slate-900 ${styles.panel}`}
|
|
56
|
+
>
|
|
51
57
|
<div className="h-1 bg-brand-500" />
|
|
52
58
|
<div className="flex items-center gap-2 border-b border-slate-100 px-4 py-3 dark:border-slate-800">
|
|
53
59
|
<Users size={16} className="text-brand-500" />
|
|
@@ -132,7 +138,10 @@ export default function TeamBuilder({ teamInitial }: { teamInitial: TeamMember[]
|
|
|
132
138
|
>
|
|
133
139
|
<Users size={16} />
|
|
134
140
|
My team
|
|
135
|
-
<span
|
|
141
|
+
<span
|
|
142
|
+
key={team.length}
|
|
143
|
+
className={`rounded-full bg-white/25 px-2 py-0.5 text-xs font-extrabold ${styles.badge}`}
|
|
144
|
+
>
|
|
136
145
|
{team.length}
|
|
137
146
|
</span>
|
|
138
147
|
</button>
|
|
@@ -40,8 +40,10 @@ export const behavior = () => {
|
|
|
40
40
|
|
|
41
41
|
// default → jinja (server). The x-* directives are static string attributes the
|
|
42
42
|
// native compiler passes straight through; the directive runtime binds them to
|
|
43
|
-
// the behavior instance on the client.
|
|
44
|
-
|
|
43
|
+
// the behavior instance on the client. `themeLabel` is server-stamped (the
|
|
44
|
+
// inverse of the active mode) so the x-text placeholder already shows the right
|
|
45
|
+
// word — no Dark→Light flash before the behavior hydrates.
|
|
46
|
+
export default function ThemeToggle({ themeLabel }: { themeLabel: string }) {
|
|
45
47
|
return (
|
|
46
48
|
<button
|
|
47
49
|
type="button"
|
|
@@ -49,13 +51,13 @@ export default function ThemeToggle() {
|
|
|
49
51
|
aria-label="Toggle theme"
|
|
50
52
|
className="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-100 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
|
|
51
53
|
>
|
|
52
|
-
<span x-show="isDark" className="inline-flex">
|
|
54
|
+
<span x-show="isDark" className="theme-icon-dark inline-flex">
|
|
53
55
|
<Sun size={16} />
|
|
54
56
|
</span>
|
|
55
|
-
<span x-show="isLight" className="inline-flex">
|
|
57
|
+
<span x-show="isLight" className="theme-icon-light inline-flex">
|
|
56
58
|
<Moon size={16} />
|
|
57
59
|
</span>
|
|
58
|
-
<span x-text="label">
|
|
60
|
+
<span x-text="label">{themeLabel}</span>
|
|
59
61
|
</button>
|
|
60
62
|
)
|
|
61
63
|
}
|
|
@@ -50,12 +50,17 @@ interface LoaderCtx {
|
|
|
50
50
|
req: BrustRequest
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
const chrome = (req: BrustRequest, title: string, crumb: string) =>
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
53
|
+
const chrome = (req: BrustRequest, title: string, crumb: string) => {
|
|
54
|
+
const mode = (req.cookies.mode === 'light' ? 'light' : 'dark') as 'light' | 'dark'
|
|
55
|
+
return {
|
|
56
|
+
title,
|
|
57
|
+
crumb,
|
|
58
|
+
mode,
|
|
59
|
+
// The toggle button shows what it switches TO — the inverse of the active mode.
|
|
60
|
+
themeLabel: mode === 'dark' ? 'Light' : 'Dark',
|
|
61
|
+
teamProps: { teamInitial: teamStore.list() },
|
|
62
|
+
}
|
|
63
|
+
}
|
|
59
64
|
|
|
60
65
|
export async function homeLoader({ req }: LoaderCtx): Promise<HomeData> {
|
|
61
66
|
const featured = FEATURED.map((p) => ({
|
|
@@ -251,15 +256,25 @@ const SHORT: Record<string, string> = {
|
|
|
251
256
|
// Effectiveness → static Tailwind utility class string. These are literals in a
|
|
252
257
|
// .ts file scanned by `@source`, so the scanner sees every class. The header /
|
|
253
258
|
// row-head / corner / data cells share a base sizing class.
|
|
259
|
+
// Effectiveness → static Tailwind utility class string. Every cell gets a solid
|
|
260
|
+
// fill so the `gap-px` over a slate gridline background reads as a continuous
|
|
261
|
+
// grid (the old design left 1× cells transparent → black voids you couldn't
|
|
262
|
+
// trace). `hover:` lifts a cell with an inset brand ring to pinpoint a matchup.
|
|
254
263
|
const CELL_BASE =
|
|
255
|
-
'flex items-center justify-center text-xs font-
|
|
264
|
+
'flex items-center justify-center text-xs font-bold tabular-nums aspect-square transition-colors hover:relative hover:z-10 hover:ring-2 hover:ring-inset hover:ring-brand-500'
|
|
256
265
|
const HEAD_BASE =
|
|
257
266
|
'flex items-center justify-center text-[10px] font-bold uppercase tracking-tight text-white aspect-square'
|
|
267
|
+
// Fill hierarchy so the grid reads as FULL (every cell visibly distinct from
|
|
268
|
+
// the slate gridline showing through `gap-px`):
|
|
269
|
+
// light: card white < gridline slate-200, normal slate-50, 0 slate-800
|
|
270
|
+
// dark: card slate-900 < gridline slate-700, normal slate-800, 0 slate-950
|
|
271
|
+
// (normal must NOT equal the card colour or cells vanish; 0 must differ from
|
|
272
|
+
// normal or "no effect" looks like a blank.)
|
|
258
273
|
const CELL_CLASS: Record<string, string> = {
|
|
259
|
-
super: `${CELL_BASE} bg-
|
|
260
|
-
weak: `${CELL_BASE} bg-
|
|
261
|
-
none: `${CELL_BASE} bg-slate-800
|
|
262
|
-
normal: `${CELL_BASE} text-slate-300 dark:text-slate-600`,
|
|
274
|
+
super: `${CELL_BASE} bg-emerald-500 text-white`,
|
|
275
|
+
weak: `${CELL_BASE} bg-rose-400 text-white dark:bg-rose-500`,
|
|
276
|
+
none: `${CELL_BASE} bg-slate-800 text-slate-100 dark:bg-slate-950 dark:text-slate-400`,
|
|
277
|
+
normal: `${CELL_BASE} bg-slate-50 text-slate-300 dark:bg-slate-800 dark:text-slate-600`,
|
|
263
278
|
}
|
|
264
279
|
|
|
265
280
|
export async function typeChartLoader({ req }: LoaderCtx): Promise<TypeChartData> {
|
|
@@ -8,6 +8,40 @@ import { cachedFetch } from 'brustjs'
|
|
|
8
8
|
|
|
9
9
|
export const API = 'https://pokeapi.co/api/v2'
|
|
10
10
|
|
|
11
|
+
// Process-lifetime memo of PokeAPI JSON. `cachedFetch` dedupes only WITHIN one
|
|
12
|
+
// request (it's AsyncLocalStorage-scoped), so on its own EVERY request re-hits
|
|
13
|
+
// pokeapi.co over the network (~700 ms) — at 120 conns `/pokedex` collapses to
|
|
14
|
+
// ~170 rps, bound entirely by that round-trip. PokeAPI is IMMUTABLE reference
|
|
15
|
+
// data, so the parsed JSON is cached for the process lifetime here: the first
|
|
16
|
+
// request warms it, every later request renders from memory. Only successful
|
|
17
|
+
// (2xx) responses are cached; a non-ok response or a network error resolves
|
|
18
|
+
// `null` and is NOT cached, so a transient 429/500 or a typo'd name retries.
|
|
19
|
+
// (Per-request personalization — theme cookie, team — lives in `chrome()`, not
|
|
20
|
+
// here, so it is never cached.)
|
|
21
|
+
const jsonCache = new Map<string, Promise<unknown>>()
|
|
22
|
+
|
|
23
|
+
async function getJson<T>(url: string): Promise<T | null> {
|
|
24
|
+
const hit = jsonCache.get(url) as Promise<T | null> | undefined
|
|
25
|
+
if (hit) return hit
|
|
26
|
+
const p = (async (): Promise<T | null> => {
|
|
27
|
+
const res = await cachedFetch(url)
|
|
28
|
+
if (!res.ok) return null
|
|
29
|
+
return (await res.json()) as T
|
|
30
|
+
})()
|
|
31
|
+
jsonCache.set(url, p)
|
|
32
|
+
// Evict anything that didn't yield cacheable data (null / rejected) so the
|
|
33
|
+
// next request can retry rather than memoizing a transient failure forever.
|
|
34
|
+
p.then(
|
|
35
|
+
(v) => {
|
|
36
|
+
if (v === null && jsonCache.get(url) === p) jsonCache.delete(url)
|
|
37
|
+
},
|
|
38
|
+
() => {
|
|
39
|
+
if (jsonCache.get(url) === p) jsonCache.delete(url)
|
|
40
|
+
},
|
|
41
|
+
)
|
|
42
|
+
return p
|
|
43
|
+
}
|
|
44
|
+
|
|
11
45
|
export const idFromUrl = (url: string): number => Number((url.match(/\/pokemon\/(\d+)\//) || [])[1])
|
|
12
46
|
|
|
13
47
|
/** Official-artwork PNG from the PokeAPI sprites CDN — derived from id so the
|
|
@@ -81,12 +115,11 @@ export interface RawEvolutionStage {
|
|
|
81
115
|
}
|
|
82
116
|
|
|
83
117
|
export async function fetchList(offset: number, limit: number) {
|
|
84
|
-
const
|
|
85
|
-
if (!res.ok) throw new Error(`PokeAPI list ${res.status}`)
|
|
86
|
-
const page = (await res.json()) as {
|
|
118
|
+
const page = await getJson<{
|
|
87
119
|
count: number
|
|
88
120
|
results: { name: string; url: string }[]
|
|
89
|
-
}
|
|
121
|
+
}>(`${API}/pokemon?limit=${limit}&offset=${offset}`)
|
|
122
|
+
if (!page) throw new Error('PokeAPI list fetch failed')
|
|
90
123
|
return {
|
|
91
124
|
results: page.results.map((r) => ({ id: idFromUrl(r.url), name: r.name })),
|
|
92
125
|
total: page.count,
|
|
@@ -94,9 +127,8 @@ export async function fetchList(offset: number, limit: number) {
|
|
|
94
127
|
}
|
|
95
128
|
|
|
96
129
|
export async function fetchPokemon(name: string): Promise<RawPokemon | null> {
|
|
97
|
-
const
|
|
98
|
-
if (!
|
|
99
|
-
const p = (await res.json()) as any
|
|
130
|
+
const p = await getJson<any>(`${API}/pokemon/${name}`)
|
|
131
|
+
if (!p) return null
|
|
100
132
|
return {
|
|
101
133
|
id: p.id,
|
|
102
134
|
name: p.name,
|
|
@@ -110,8 +142,8 @@ export async function fetchPokemon(name: string): Promise<RawPokemon | null> {
|
|
|
110
142
|
}
|
|
111
143
|
|
|
112
144
|
export async function fetchSpecies(id: number): Promise<RawSpecies> {
|
|
113
|
-
const
|
|
114
|
-
|
|
145
|
+
const s = await getJson<any>(`${API}/pokemon-species/${id}`)
|
|
146
|
+
if (!s) return { flavorText: '', genus: '', evolutionUrl: '' }
|
|
115
147
|
const flavor = s.flavor_text_entries?.find((e: any) => e.language.name === 'en')?.flavor_text as
|
|
116
148
|
| string
|
|
117
149
|
| undefined
|
|
@@ -126,9 +158,8 @@ export async function fetchSpecies(id: number): Promise<RawSpecies> {
|
|
|
126
158
|
* flattened to the first branch — noted as an open question in the design. */
|
|
127
159
|
export async function fetchEvolution(url: string): Promise<RawEvolutionStage[]> {
|
|
128
160
|
if (!url) return []
|
|
129
|
-
const
|
|
130
|
-
if (!
|
|
131
|
-
const data = (await res.json()) as any
|
|
161
|
+
const data = await getJson<any>(url)
|
|
162
|
+
if (!data) return []
|
|
132
163
|
const stages: RawEvolutionStage[] = []
|
|
133
164
|
let node = data.chain
|
|
134
165
|
while (node) {
|
|
@@ -164,9 +195,8 @@ export const ALL_TYPES = [
|
|
|
164
195
|
|
|
165
196
|
/** Fetch one type's damage relations → a map of defendingType → multiplier. */
|
|
166
197
|
export async function fetchTypeRelations(type: string): Promise<Record<string, number>> {
|
|
167
|
-
const
|
|
168
|
-
if (!
|
|
169
|
-
const d = (await res.json()) as any
|
|
198
|
+
const d = await getJson<any>(`${API}/type/${type}`)
|
|
199
|
+
if (!d) return {}
|
|
170
200
|
const rel = d.damage_relations
|
|
171
201
|
const out: Record<string, number> = {}
|
|
172
202
|
for (const t of rel.double_damage_to || []) out[t.name] = 2
|
|
@@ -23,6 +23,7 @@ export interface ChromeData {
|
|
|
23
23
|
title: string // dynamic <title> + nav header, via AppLayout's <BrustPage title={title}>
|
|
24
24
|
crumb: string // topbar breadcrumb leaf label
|
|
25
25
|
mode: 'dark' | 'light' // theme, read from the `mode` cookie → <html data-mode={mode}>
|
|
26
|
+
themeLabel: string // server-stamped toggle label ("Light"/"Dark"), the inverse of mode — SSR placeholder for ThemeToggle's x-text so it doesn't flash
|
|
26
27
|
teamProps: { teamInitial: TeamMember[] } // floating team-dock island initial state
|
|
27
28
|
}
|
|
28
29
|
|
|
@@ -14,39 +14,43 @@ import type { TypeChartData } from '../lib/types'
|
|
|
14
14
|
export default function TypeChart({ rows }: TypeChartData) {
|
|
15
15
|
return (
|
|
16
16
|
<section className="py-2">
|
|
17
|
-
<div className="mb-
|
|
17
|
+
<div className="mb-6">
|
|
18
18
|
<h1 className="text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white">
|
|
19
19
|
Type chart
|
|
20
20
|
</h1>
|
|
21
|
-
<p className="mt-2 max-w-2xl text-slate-500 dark:text-slate-400">
|
|
22
|
-
Damage relations —
|
|
23
|
-
(native:true · no React runtime in the payload).
|
|
21
|
+
<p className="mt-2 max-w-2xl text-sm leading-relaxed text-slate-500 dark:text-slate-400">
|
|
22
|
+
Damage relations — read a row (attacker) across to a column (defender). Rendered
|
|
23
|
+
server-side in Rust from jinja (native:true · no React runtime in the payload).
|
|
24
24
|
</p>
|
|
25
25
|
</div>
|
|
26
26
|
|
|
27
|
-
<div className="mb-
|
|
28
|
-
<span className="inline-flex items-center gap-1
|
|
29
|
-
<span className="flex h-5 w-5 items-center justify-center rounded bg-
|
|
27
|
+
<div className="mb-5 flex flex-wrap items-center gap-2.5 text-sm">
|
|
28
|
+
<span className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1 text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">
|
|
29
|
+
<span className="flex h-5 w-5 items-center justify-center rounded bg-emerald-500 text-xs font-bold text-white">
|
|
30
30
|
2
|
|
31
31
|
</span>
|
|
32
32
|
super effective
|
|
33
33
|
</span>
|
|
34
|
-
<span className="inline-flex items-center gap-1
|
|
35
|
-
<span className="flex h-5 w-5 items-center justify-center rounded bg-
|
|
34
|
+
<span className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1 text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">
|
|
35
|
+
<span className="flex h-5 w-5 items-center justify-center rounded bg-rose-400 text-xs font-bold text-white dark:bg-rose-500">
|
|
36
36
|
½
|
|
37
37
|
</span>
|
|
38
38
|
not very effective
|
|
39
39
|
</span>
|
|
40
|
-
<span className="inline-flex items-center gap-1
|
|
41
|
-
<span className="flex h-5 w-5 items-center justify-center rounded bg-slate-800
|
|
40
|
+
<span className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1 text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">
|
|
41
|
+
<span className="flex h-5 w-5 items-center justify-center rounded bg-slate-800 text-xs font-bold text-slate-100 dark:bg-slate-950 dark:text-slate-400">
|
|
42
42
|
0
|
|
43
43
|
</span>
|
|
44
44
|
no effect
|
|
45
45
|
</span>
|
|
46
|
+
<span className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1 text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">
|
|
47
|
+
<span className="h-5 w-5 rounded bg-slate-50 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700" />
|
|
48
|
+
normal (1×)
|
|
49
|
+
</span>
|
|
46
50
|
</div>
|
|
47
51
|
|
|
48
|
-
<div className="overflow-x-auto rounded-2xl border border-slate-200 bg-white p-
|
|
49
|
-
<div className="grid w-
|
|
52
|
+
<div className="overflow-x-auto rounded-2xl border border-slate-200 bg-white p-3 shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
|
53
|
+
<div className="grid w-full grid-cols-[2.75rem_repeat(18,minmax(1.75rem,1fr))] gap-px overflow-hidden rounded-xl bg-slate-200 dark:bg-slate-700">
|
|
50
54
|
{rows.map((r) => (
|
|
51
55
|
<div key={r.id} className="contents">
|
|
52
56
|
{r.cells.map((c) => (
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "brustjs",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.37-alpha",
|
|
4
4
|
"description": "Bun + Rust SSR framework — React on the server, Rust everywhere else (napi cdylib + per-worker SharedArrayBuffer).",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -40,12 +40,12 @@
|
|
|
40
40
|
"typescript": "^6.0.3"
|
|
41
41
|
},
|
|
42
42
|
"optionalDependencies": {
|
|
43
|
-
"brustjs-darwin-x64": "0.1.
|
|
44
|
-
"brustjs-darwin-arm64": "0.1.
|
|
45
|
-
"brustjs-linux-x64-gnu": "0.1.
|
|
46
|
-
"brustjs-linux-arm64-gnu": "0.1.
|
|
47
|
-
"brustjs-linux-x64-musl": "0.1.
|
|
48
|
-
"brustjs-linux-arm64-musl": "0.1.
|
|
43
|
+
"brustjs-darwin-x64": "0.1.37-alpha",
|
|
44
|
+
"brustjs-darwin-arm64": "0.1.37-alpha",
|
|
45
|
+
"brustjs-linux-x64-gnu": "0.1.37-alpha",
|
|
46
|
+
"brustjs-linux-arm64-gnu": "0.1.37-alpha",
|
|
47
|
+
"brustjs-linux-x64-musl": "0.1.37-alpha",
|
|
48
|
+
"brustjs-linux-arm64-musl": "0.1.37-alpha"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"react": "^19.2.6",
|
package/runtime/cli/build.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { existsSync } from 'node:fs'
|
|
|
2
2
|
import { copyFile, cp, mkdir, readdir, rm } from 'node:fs/promises'
|
|
3
3
|
import { createRequire } from 'node:module'
|
|
4
4
|
import path, { isAbsolute, resolve } from 'node:path'
|
|
5
|
+
import type { BunPlugin } from 'bun'
|
|
5
6
|
import { emitNativeTemplates } from './native-routes-emit.ts'
|
|
6
7
|
import { nativeShimPlugin } from './native-shim-plugin.ts'
|
|
7
8
|
|
|
@@ -223,6 +224,60 @@ export async function runBuild(args: string[]): Promise<void> {
|
|
|
223
224
|
// (S4). Computed once here and reused below.
|
|
224
225
|
const routesFile = path.join(entryDir, 'routes.tsx')
|
|
225
226
|
|
|
227
|
+
// 2.7. Component CSS — Lightning CSS + CSS Modules. MUST run BEFORE the island
|
|
228
|
+
// and directive bundles: those Bun.build passes bundle components that may
|
|
229
|
+
// `import styles from './X.module.css'`, and the cssLoaderPlugin registered
|
|
230
|
+
// here (from the freshly built manifest) resolves that import to the scoped
|
|
231
|
+
// name map. Without the plugin Bun treats the .module.css as an asset and
|
|
232
|
+
// collides on the output filename (e.g. X.module.css + X.tsx → both X.js).
|
|
233
|
+
// Mirrors brust.run's ordering (plugin registered before buildIslands).
|
|
234
|
+
// Captured here and passed explicitly to buildIslands below (global
|
|
235
|
+
// Bun.plugin() does NOT reach Bun.build).
|
|
236
|
+
const cssBuildPlugins: BunPlugin[] = []
|
|
237
|
+
{
|
|
238
|
+
const { scanCssImports } = await import('../css/scan-imports.ts')
|
|
239
|
+
const scan = await scanCssImports(entryDir)
|
|
240
|
+
if (scan.size > 0) {
|
|
241
|
+
const { buildComponentCss } = await import('../css/component-build.ts')
|
|
242
|
+
const { cssLoaderPlugin } = await import('../css/component-loader.ts')
|
|
243
|
+
let routeForCss: { fullPath: string; componentSources: string[] }[] = []
|
|
244
|
+
if (existsSync(routesFile)) {
|
|
245
|
+
try {
|
|
246
|
+
const { scanImports } = await import('./native-routes-emit.ts')
|
|
247
|
+
const { routes } = await import(routesFile)
|
|
248
|
+
// component name → source file (default imports in routes.tsx).
|
|
249
|
+
const idents = scanImports(routesFile)
|
|
250
|
+
routeForCss = (routes as any[]).map((r) => ({
|
|
251
|
+
fullPath: r.fullPath,
|
|
252
|
+
// Resolve each component in the route's chain (layout → leaf) to its
|
|
253
|
+
// source; computeRouteChunks BFS-walks each subtree for CSS deps.
|
|
254
|
+
componentSources: ((r.chain ?? []) as { Component?: { name?: string } }[])
|
|
255
|
+
.map((node) => node?.Component?.name)
|
|
256
|
+
.map((name) => (name ? idents.get(name) : undefined))
|
|
257
|
+
.filter((p): p is string => typeof p === 'string'),
|
|
258
|
+
}))
|
|
259
|
+
} catch {
|
|
260
|
+
/* if routes import fails, skip — manifest still emits modules */
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
const cssOutDir = path.join(outDir, 'css')
|
|
264
|
+
const manifest = await buildComponentCss({
|
|
265
|
+
scanRoot: entryDir,
|
|
266
|
+
outDir: cssOutDir,
|
|
267
|
+
tailwindCompile: null,
|
|
268
|
+
routes: routeForCss,
|
|
269
|
+
})
|
|
270
|
+
const plugin = cssLoaderPlugin(manifest)
|
|
271
|
+
Bun.plugin(plugin) // runtime/SSR resolution of .module.css in the worker isolate
|
|
272
|
+
cssBuildPlugins.push(plugin) // explicit Bun.build resolution for island bundling
|
|
273
|
+
console.log(
|
|
274
|
+
`[brust build] css-mod: ${Object.keys(manifest.modules).length} chunk(s) → ${cssOutDir}/components/`,
|
|
275
|
+
)
|
|
276
|
+
} else {
|
|
277
|
+
console.log(`[brust build] css-mod: skipped (no component CSS imports)`)
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
|
|
226
281
|
// 3. Build islands (if any <Island> usage is found in the routes graph).
|
|
227
282
|
const { scanIslandChunks, buildIslands } = await import('../islands/build.ts')
|
|
228
283
|
const islandMap = existsSync(routesFile)
|
|
@@ -230,7 +285,10 @@ export async function runBuild(args: string[]): Promise<void> {
|
|
|
230
285
|
: new Map<string, string>()
|
|
231
286
|
if (islandMap.size > 0) {
|
|
232
287
|
const islandsOutDir = path.join(outDir, 'islands')
|
|
233
|
-
const result = await buildIslands(islandMap, {
|
|
288
|
+
const result = await buildIslands(islandMap, {
|
|
289
|
+
outDir: islandsOutDir,
|
|
290
|
+
plugins: cssBuildPlugins,
|
|
291
|
+
})
|
|
234
292
|
console.log(`[brust build] islands: ${result.islandCount} chunk(s) → ${islandsOutDir}`)
|
|
235
293
|
|
|
236
294
|
// Mirror into cwd/.brust/islands so the NON-prebuilt source runtime
|
|
@@ -361,39 +419,8 @@ export async function runBuild(args: string[]): Promise<void> {
|
|
|
361
419
|
console.log(`[brust build] css: skipped (no app.css)`)
|
|
362
420
|
}
|
|
363
421
|
|
|
364
|
-
//
|
|
365
|
-
|
|
366
|
-
const { scanCssImports } = await import('../css/scan-imports.ts')
|
|
367
|
-
const scan = await scanCssImports(entryDir)
|
|
368
|
-
if (scan.size > 0) {
|
|
369
|
-
const { buildComponentCss } = await import('../css/component-build.ts')
|
|
370
|
-
const routesFile = path.join(entryDir, 'routes.tsx')
|
|
371
|
-
let routeForCss: { fullPath: string; componentSource: string }[] = []
|
|
372
|
-
if (existsSync(routesFile)) {
|
|
373
|
-
try {
|
|
374
|
-
const { routes } = await import(routesFile)
|
|
375
|
-
routeForCss = (routes as any[]).map((r) => ({
|
|
376
|
-
fullPath: r.fullPath,
|
|
377
|
-
componentSource: routesFile,
|
|
378
|
-
}))
|
|
379
|
-
} catch {
|
|
380
|
-
/* if routes import fails, skip — manifest still emits modules */
|
|
381
|
-
}
|
|
382
|
-
}
|
|
383
|
-
const cssOutDir = path.join(outDir, 'css')
|
|
384
|
-
const manifest = await buildComponentCss({
|
|
385
|
-
scanRoot: entryDir,
|
|
386
|
-
outDir: cssOutDir,
|
|
387
|
-
tailwindCompile: null,
|
|
388
|
-
routes: routeForCss,
|
|
389
|
-
})
|
|
390
|
-
console.log(
|
|
391
|
-
`[brust build] css-mod: ${Object.keys(manifest.modules).length} chunk(s) → ${cssOutDir}/components/`,
|
|
392
|
-
)
|
|
393
|
-
} else {
|
|
394
|
-
console.log(`[brust build] css-mod: skipped (no component CSS imports)`)
|
|
395
|
-
}
|
|
396
|
-
}
|
|
422
|
+
// (Component CSS — Lightning CSS + CSS Modules — moved up to section 2.7 so the
|
|
423
|
+
// cssLoaderPlugin is registered before the island/directive bundles.)
|
|
397
424
|
|
|
398
425
|
// Static public assets: copy <project>/public → <dist>/public so a deployed
|
|
399
426
|
// dist is self-contained. No .brust mirror — the source/dev runtime reads
|
|
@@ -436,7 +463,10 @@ export async function runBuild(args: string[]): Promise<void> {
|
|
|
436
463
|
// point at non-existent files. Whitespace + syntax minification still apply.
|
|
437
464
|
minify: { whitespace: true, syntax: true, identifiers: false },
|
|
438
465
|
banner,
|
|
439
|
-
|
|
466
|
+
// cssBuildPlugins resolves any `.module.css` reached from the entry graph
|
|
467
|
+
// (e.g. routes.tsx → a component's CSS module) to the scoped name map, so
|
|
468
|
+
// Bun doesn't emit the CSS as an asset and collide on the bundle name.
|
|
469
|
+
plugins: [nativeShimPlugin(REPO_ROOT), ...cssBuildPlugins],
|
|
440
470
|
})
|
|
441
471
|
|
|
442
472
|
if (!result.success) {
|
package/runtime/cli/templates.ts
CHANGED
|
@@ -60,7 +60,14 @@ export async function buildComponentCss(
|
|
|
60
60
|
lines.push(` readonly ${k}: string`)
|
|
61
61
|
}
|
|
62
62
|
lines.push('}', 'export default styles', '')
|
|
63
|
-
|
|
63
|
+
// Emit the per-module .d.ts into the BUILD output (under outDir/types,
|
|
64
|
+
// mirroring the source layout) instead of next to the source .module.css —
|
|
65
|
+
// generated artifacts belong in .brust/dist, not the project tree. Import
|
|
66
|
+
// resolution uses the framework-shipped ambient `*.module.css` declaration
|
|
67
|
+
// (runtime/css-modules.d.ts); these precise files are an inspectable record.
|
|
68
|
+
const dtsPath = path.join(opts.outDir, 'types', `${rel}.d.ts`)
|
|
69
|
+
await mkdir(path.dirname(dtsPath), { recursive: true })
|
|
70
|
+
await writeFile(dtsPath, lines.join('\n'), 'utf-8')
|
|
64
71
|
}
|
|
65
72
|
}
|
|
66
73
|
|
|
@@ -70,9 +77,10 @@ export async function buildComponentCss(
|
|
|
70
77
|
const routeChunks = computeRouteChunks(opts.routes, scan, lookup)
|
|
71
78
|
|
|
72
79
|
const manifest: ComponentCssManifest = { version: 1, modules, routeChunks }
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
)
|
|
80
|
+
// opts.outDir is already the css dir (chunks land in opts.outDir/components,
|
|
81
|
+
// served at /_brust/css/components/). The manifest sits beside it at
|
|
82
|
+
// opts.outDir/component-manifest.json — where both readers look
|
|
83
|
+
// (dist/css/component-manifest.json and .brust/css/component-manifest.json).
|
|
84
|
+
await writeComponentCssManifest(path.join(opts.outDir, 'component-manifest.json'), manifest)
|
|
77
85
|
return manifest
|
|
78
86
|
}
|