vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

swarm-ui: colocate component CSS as JS-side-effect imports

Browse source 
Per mara's review question on PR#3219 ('shouldnt the jsx files import
their css?'): each component now does its own import ('./Shell.css',
'./Panel.css', ...) instead of swarm-ui.css centrally @import-ing
every component's stylesheet. esbuild folds every .css reachable from
main.tsx's import graph into one main.css companion output next to
main.js — no separate build step, this is bundle:true's existing
behavior, just not exercised until now.

swarm-ui.css keeps only the shared base reset (@hive/shared/base.css)
since that isn't any one component's concern. Added src/css.d.ts
(ambient '*.css' module) since tsc otherwise rejects a side-effect
import of a non-JS/TS specifier.

Side benefit: a component nothing imports (yet) no longer ships its
CSS either — StatusChip/Table aren't referenced from App.tsx today,
and main.css correctly only carries Shell.css + Panel.css. The old
central-import approach shipped all four unconditionally.

npm run build + typecheck clean. Re-screenshotted the real dist —
pixel-identical to before this change.
This commit is contained in:
iris 2026-08-12 21:26:44 +02:00 • committed by mara
commit 8642d4acf6
8 changed files with 32 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

11
frontend/packages/swarm-ui/build.mjs
View file

@ -5,10 +5,17 @@
// dist/static/main.js served at /static/main.js (ESM bundle, // dist/static/main.js served at /static/main.js (ESM bundle,
// Preact + wouter-preact) // Preact + wouter-preact)
// dist/static/main.js.map source map sibling // dist/static/main.js.map source map sibling
// dist/static/main.css every component's own `import
// './Foo.css'` (Shell.css, Panel.css, …),
// folded by esbuild into one companion
// output alongside main.js — no separate
// build step, this falls out of bundling
// main.tsx with `bundle: true`
// dist/static/colors.css served at /static/colors.css // dist/static/colors.css served at /static/colors.css
// dist/static/theme.css served at /static/theme.css // dist/static/theme.css served at /static/theme.css
// dist/static/swarm-ui.css served at /static/swarm-ui.css (@import // dist/static/swarm-ui.css served at /static/swarm-ui.css — just the
// resolved from @hive/shared) // shared base reset now (@import resolved
// from @hive/shared), NOT component styles
// //
// Not yet wired into any Rust binary's `ServeDir` — swarm-controller // Not yet wired into any Rust binary's `ServeDir` — swarm-controller
// only serves `/health` today (see swarm-controller/README.md); this // only serves `/health` today (see swarm-controller/README.md); this

4
frontend/packages/swarm-ui/src/css.d.ts vendored Normal file
View file

@ -0,0 +1,4 @@
// Ambient module for `import './Foo.css'` side-effect imports (esbuild
// resolves these directly, see build.mjs; tsc otherwise has no idea what
// a `.css` specifier is and refuses the whole side-effect import).
declare module '*.css';

1
frontend/packages/swarm-ui/src/index.html
View file

@ -7,6 +7,7 @@
<link rel="stylesheet" href="static/colors.css"> <link rel="stylesheet" href="static/colors.css">
<link rel="stylesheet" href="static/theme.css"> <link rel="stylesheet" href="static/theme.css">
<link rel="stylesheet" href="static/swarm-ui.css"> <link rel="stylesheet" href="static/swarm-ui.css">
<link rel="stylesheet" href="static/main.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

13
frontend/packages/swarm-ui/src/shell/Shell.tsx
View file

@ -1,10 +1,12 @@
// <Shell> — page chrome every swarm-ui route mounts inside: a header // <Shell> — page chrome every swarm-ui route mounts inside: a header
// bar (swarm branding) plus a nav row linking the app's real routes. // bar (swarm branding) plus a nav row linking the app's real routes.
// Preact-native styling (shell/Shell.css, imported globally via // Preact-native styling — `./Shell.css` imported right here, not
// ../swarm-ui.css) — deliberately not @hive/shared's chrome.css // wired centrally, so the component and its styles travel together
// page-header pattern, which is the per-hive MPA dashboard's visual // (esbuild folds every imported `.css` reachable from `main.tsx` into
// language. This package is a clean field, not an inheritor of that // one `main.css` companion output, see build.mjs) — deliberately not
// look. // @hive/shared's chrome.css page-header pattern, which is the per-hive
// MPA dashboard's visual language. This package is a clean field, not
// an inheritor of that look.
// //
// Route list lives here, not prop-drilled from App — one small SPA // Route list lives here, not prop-drilled from App — one small SPA
// has exactly one place that needs to know its own nav, and this is // has exactly one place that needs to know its own nav, and this is
@ -12,6 +14,7 @@
// is next); no speculative entries. // is next); no speculative entries.
import type { ComponentChildren } from 'preact'; import type { ComponentChildren } from 'preact';
import { Link, useRoute } from 'wouter-preact'; import { Link, useRoute } from 'wouter-preact';
import './Shell.css';
const NAV_ITEMS: { href: string; label: string }[] = [{ href: '/', label: 'overview' }]; const NAV_ITEMS: { href: string; label: string }[] = [{ href: '/', label: 'overview' }];

10
frontend/packages/swarm-ui/src/swarm-ui.css
View file

@ -1,5 +1,7 @@
/* Page-level base only — component styles are colocated with their
component (`./Shell.css` imported by shell/Shell.tsx, etc.) and
land in the `main.css` companion esbuild emits alongside `main.js`
(see build.mjs), not here. This file stays just the shared reset
every page needs regardless of which components a route happens to
use. */
@import "@hive/shared/base.css"; @import "@hive/shared/base.css";
@import "./shell/Shell.css";
@import "./ui/panel/Panel.css";
@import "./ui/status-chip/StatusChip.css";
@import "./ui/table/Table.css";

1
frontend/packages/swarm-ui/src/ui/panel/Panel.tsx
View file

@ -3,6 +3,7 @@
// card-with-actions/footer/whatever kit — those get added the first // card-with-actions/footer/whatever kit — those get added the first
// time a real page actually needs one, not speculatively ahead of it. // time a real page actually needs one, not speculatively ahead of it.
import type { ComponentChildren } from 'preact'; import type { ComponentChildren } from 'preact';
import './Panel.css';
export function Panel({ title, children }: { title?: string; children: ComponentChildren }) { export function Panel({ title, children }: { title?: string; children: ComponentChildren }) {
return ( return (

2
frontend/packages/swarm-ui/src/ui/status-chip/StatusChip.tsx
View file

@ -4,6 +4,8 @@
// single static "configured" tone and grows real online/stale/offline // single static "configured" tone and grows real online/stale/offline
// states once a status rollup lands server-side — same component, // states once a status rollup lands server-side — same component,
// richer data later, no rebuild. // richer data later, no rebuild.
import './StatusChip.css';
export type ChipTone = 'neutral' | 'positive' | 'warning' | 'negative'; export type ChipTone = 'neutral' | 'positive' | 'warning' | 'negative';
export function StatusChip({ tone = 'neutral', label }: { tone?: ChipTone; label: string }) { export function StatusChip({ tone = 'neutral', label }: { tone?: ChipTone; label: string }) {

1
frontend/packages/swarm-ui/src/ui/table/Table.tsx
View file

@ -4,6 +4,7 @@
// any particular row shape, so it stays reusable for the swarm-wide // any particular row shape, so it stays reusable for the swarm-wide
// agent roster later without a rewrite. // agent roster later without a rewrite.
import type { ComponentChildren } from 'preact'; import type { ComponentChildren } from 'preact';
import './Table.css';
export interface TableColumn<T> { export interface TableColumn<T> {
key: string; key: string;