brustjs 0.1.36-alpha → 0.1.38-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/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/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/native-routes-emit.ts +22 -1
- 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.js +52 -52
- package/runtime/index.ts +68 -12
- package/runtime/islands/bootstrap.ts +16 -1
- package/runtime/islands/build.ts +68 -17
- package/runtime/islands/chunk-id.ts +17 -0
- package/runtime/islands/island.tsx +18 -1
- package/runtime/routes.ts +16 -0
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> {
|
|
@@ -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.38-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.38-alpha",
|
|
44
|
+
"brustjs-darwin-arm64": "0.1.38-alpha",
|
|
45
|
+
"brustjs-linux-x64-gnu": "0.1.38-alpha",
|
|
46
|
+
"brustjs-linux-arm64-gnu": "0.1.38-alpha",
|
|
47
|
+
"brustjs-linux-x64-musl": "0.1.38-alpha",
|
|
48
|
+
"brustjs-linux-arm64-musl": "0.1.38-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) {
|
|
@@ -2,6 +2,7 @@ import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from 'node
|
|
|
2
2
|
import { createRequire } from 'node:module'
|
|
3
3
|
import { dirname, relative, resolve } from 'node:path'
|
|
4
4
|
import { buildDevClientTag } from '../dev/client.ts'
|
|
5
|
+
import { islandChunkBasename } from '../islands/chunk-id.ts'
|
|
5
6
|
import { DIRECTIVES_BOOTSTRAP, ISLANDS_IMPORTMAP_AND_BOOTSTRAP } from '../islands/importmap.ts'
|
|
6
7
|
|
|
7
8
|
/** Gather transitive component sources starting from a page source file.
|
|
@@ -920,6 +921,26 @@ export function reconcileIslandManifest(
|
|
|
920
921
|
|
|
921
922
|
writeFileSync(islandsJsonPath, JSON.stringify(enriched))
|
|
922
923
|
|
|
924
|
+
// Rewrite each marker's id from the plain component name to the
|
|
925
|
+
// content-addressed unique id (`<Name>_<hash(sourcePath)>`) — same id the
|
|
926
|
+
// chunk filename + the bootstrap use — so two same-name islands from different
|
|
927
|
+
// files get distinct markers → distinct chunks. Keyed by instance (the
|
|
928
|
+
// data-brust-props var carries it); the marker format is compiler-emitted and
|
|
929
|
+
// stable (see emit_jinja.rs).
|
|
930
|
+
const idByInstance = new Map<number, string>()
|
|
931
|
+
for (const e of enriched) {
|
|
932
|
+
const ref = pageImports.get(e.component)
|
|
933
|
+
if (ref) idByInstance.set(e.instance, islandChunkBasename(e.component, ref.spec))
|
|
934
|
+
}
|
|
935
|
+
let jinja = readFileSync(jinjaPath, 'utf8')
|
|
936
|
+
jinja = jinja.replace(
|
|
937
|
+
/data-brust-island="[^"]*"(\s+data-brust-props="\{\{ island_(\d+)_props \}\}")/g,
|
|
938
|
+
(whole, rest: string, nStr: string) => {
|
|
939
|
+
const id = idByInstance.get(Number(nStr))
|
|
940
|
+
return id ? `data-brust-island="${id}"${rest}` : whole
|
|
941
|
+
},
|
|
942
|
+
)
|
|
943
|
+
|
|
923
944
|
const baked = `{% raw %}${ISLANDS_IMPORTMAP_AND_BOOTSTRAP}{% endraw %}`
|
|
924
|
-
writeFileSync(jinjaPath,
|
|
945
|
+
writeFileSync(jinjaPath, jinja + baked)
|
|
925
946
|
}
|
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
|
}
|
|
@@ -1,19 +1,24 @@
|
|
|
1
|
+
import { existsSync } from 'node:fs'
|
|
2
|
+
import { scanImports } from '../cli/native-routes-emit.ts'
|
|
1
3
|
import type { CssDep } from './scan-imports.ts'
|
|
2
4
|
|
|
3
5
|
export interface RouteForCss {
|
|
4
6
|
/** Route.fullPath (e.g. '/' or '/blog/{slug}'). */
|
|
5
7
|
fullPath: string
|
|
6
|
-
/** Absolute
|
|
7
|
-
|
|
8
|
+
/** Absolute source files of the route's component CHAIN (root layout → leaf).
|
|
9
|
+
* computeRouteChunks walks the local import graph from each and unions the
|
|
10
|
+
* CSS deps it finds — so a layout's co-located `.module.css` links to every
|
|
11
|
+
* route under it, and a leaf's links only to that route. */
|
|
12
|
+
componentSources: string[]
|
|
8
13
|
}
|
|
9
14
|
|
|
10
15
|
/** Build the route → CSS chunk hrefs map.
|
|
11
16
|
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
+
* For each route, BFS the LOCAL import graph rooted at the route's component
|
|
18
|
+
* chain (via {@link scanImports}, same default-import walk islands use) and
|
|
19
|
+
* collect the CSS deps of every reachable file. This means a `.module.css`
|
|
20
|
+
* co-located with the component that imports it is enough — no need to also
|
|
21
|
+
* import it in routes.tsx. Chunks are deduplicated and sorted per route. */
|
|
17
22
|
export function computeRouteChunks(
|
|
18
23
|
routes: RouteForCss[],
|
|
19
24
|
scan: Map<string, CssDep[]>,
|
|
@@ -21,11 +26,21 @@ export function computeRouteChunks(
|
|
|
21
26
|
): Record<string, string[]> {
|
|
22
27
|
const out: Record<string, string[]> = {}
|
|
23
28
|
for (const r of routes) {
|
|
24
|
-
const deps = scan.get(r.componentSource) ?? []
|
|
25
29
|
const chunks = new Set<string>()
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
30
|
+
const seen = new Set<string>()
|
|
31
|
+
const queue = [...r.componentSources]
|
|
32
|
+
while (queue.length > 0) {
|
|
33
|
+
const file = queue.shift()!
|
|
34
|
+
if (seen.has(file) || !existsSync(file)) continue
|
|
35
|
+
seen.add(file)
|
|
36
|
+
for (const d of scan.get(file) ?? []) {
|
|
37
|
+
const mod = modules[d.path]
|
|
38
|
+
if (mod) chunks.add(mod.chunk)
|
|
39
|
+
}
|
|
40
|
+
// Follow this file's local (relative) default imports transitively.
|
|
41
|
+
for (const dep of scanImports(file).values()) {
|
|
42
|
+
if (!seen.has(dep)) queue.push(dep)
|
|
43
|
+
}
|
|
29
44
|
}
|
|
30
45
|
out[r.fullPath] = Array.from(chunks).sort()
|
|
31
46
|
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// Ambient declarations for component CSS imports, so `import styles from
|
|
2
|
+
// './X.module.css'` and side-effect `import './globals.css'` typecheck without a
|
|
3
|
+
// generated per-file .d.ts in the source tree. The precise key map is resolved
|
|
4
|
+
// at runtime by brust's Bun.plugin (built from the component-CSS manifest); the
|
|
5
|
+
// per-module precise .d.ts is emitted into the build output (<outDir>/types) for
|
|
6
|
+
// reference, not for resolution. This file is a global script (no import/export),
|
|
7
|
+
// so the declarations apply across the program.
|
|
8
|
+
|
|
9
|
+
declare module '*.module.css' {
|
|
10
|
+
const classes: { readonly [key: string]: string }
|
|
11
|
+
export default classes
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
declare module '*.css' {
|
|
15
|
+
const css: string
|
|
16
|
+
export default css
|
|
17
|
+
}
|