8642d4acf6
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.
66 lines
2.6 KiB
JavaScript
66 lines
2.6 KiB
JavaScript
// esbuild build for @hive/swarm-ui (project-bootstrap scope). Output
|
|
// layout (`dist/`):
|
|
//
|
|
// dist/index.html served at GET /
|
|
// dist/static/main.js served at /static/main.js (ESM bundle,
|
|
// Preact + wouter-preact)
|
|
// 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/theme.css served at /static/theme.css
|
|
// dist/static/swarm-ui.css served at /static/swarm-ui.css — just the
|
|
// shared base reset now (@import resolved
|
|
// from @hive/shared), NOT component styles
|
|
//
|
|
// Not yet wired into any Rust binary's `ServeDir` — swarm-controller
|
|
// only serves `/health` today (see swarm-controller/README.md); this
|
|
// just makes `dist/` buildable so nix/packages/swarm-ui.nix has
|
|
// something to package. `.tsx` → JS: esbuild transpiles TypeScript
|
|
// natively (types stripped, not checked) — run `npm run typecheck`
|
|
// (plain `tsc --noEmit`) separately for real type errors; not yet
|
|
// wired into CI.
|
|
|
|
import { build } from 'esbuild';
|
|
import { mkdirSync, copyFileSync, rmSync } from 'node:fs';
|
|
import { dirname, resolve } from 'node:path';
|
|
import { fileURLToPath } from 'node:url';
|
|
|
|
const here = dirname(fileURLToPath(import.meta.url));
|
|
const src = (p) => resolve(here, 'src', p);
|
|
const dist = (p) => resolve(here, 'dist', p);
|
|
const staticDir = (p) => resolve(here, 'dist', 'static', p);
|
|
|
|
rmSync(dist(''), { recursive: true, force: true });
|
|
mkdirSync(staticDir(''), { recursive: true });
|
|
|
|
await build({
|
|
entryPoints: [src('main.tsx')],
|
|
outfile: staticDir('main.js'),
|
|
bundle: true,
|
|
format: 'esm',
|
|
platform: 'browser',
|
|
target: ['es2022'],
|
|
sourcemap: true,
|
|
logLevel: 'info',
|
|
jsx: 'automatic',
|
|
jsxImportSource: 'preact',
|
|
});
|
|
|
|
for (const entry of ['colors.css', 'theme.css', 'swarm-ui.css']) {
|
|
await build({
|
|
entryPoints: [src(entry)],
|
|
outfile: staticDir(entry),
|
|
bundle: true,
|
|
loader: { '.css': 'css' },
|
|
logLevel: 'info',
|
|
});
|
|
}
|
|
|
|
copyFileSync(src('index.html'), dist('index.html'));
|
|
|
|
console.log('swarm-ui build ok →', dist(''));
|