60 lines
2.6 KiB
TypeScript
60 lines
2.6 KiB
TypeScript
// SPA entry for the Kjøl JS Web section (/js/*).
|
|
//
|
|
// This file is .ts and NOT .tsx on purpose — it is not a style choice. The bundler
|
|
// resolves the SPA entry as src/app.ts (falling back to src/app.js) and nothing
|
|
// else, so the entry cannot contain JSX. Hence createComponent() here, and JSX in
|
|
// the pages it points at.
|
|
//
|
|
// The section is mounted under a base path rather than at the root: the front page
|
|
// and the whole /wasm section are served by Kjøl Wasm Web, a different binary, which
|
|
// this bundle knows nothing about. `base: "/js"` keeps every route in here relative
|
|
// to that, so a link to "/components" resolves to /js/components and the two SPAs
|
|
// never fight over a URL.
|
|
//
|
|
// Crossing OUT of /js (to the front page, or into /wasm) is a plain <a href> and a
|
|
// real page load — the rest of the site is a different binary. That is the
|
|
// honest cost of running two front-ends behind one server, and it is one navigation.
|
|
|
|
import { render, createComponent } from "solid-js/web";
|
|
import { Router } from "@solidjs/router";
|
|
import type { RouteDefinition } from "@solidjs/router";
|
|
|
|
import { Shell } from "./layout/Shell.tsx";
|
|
import { Overview } from "./pages/Overview.tsx";
|
|
import { Components } from "./pages/Components.tsx";
|
|
import { NotFound } from "./pages/NotFound.tsx";
|
|
|
|
// Routes as plain data: solid-router accepts RouteDefinition[] as `children`, which
|
|
// is what lets a JSX-free entry declare a full route tree.
|
|
//
|
|
// There are only two. The kit used to be spread across /kit, /forms, /table and
|
|
// /theming — a split along the lines of the SOURCE FILES rather than along anything a
|
|
// reader wants: a person looking for a date picker does not know, and should not have
|
|
// to guess, whether it was filed under forms or under overlays. It is one page now,
|
|
// and the sidebar jumps you down it.
|
|
const routes: RouteDefinition[] = [
|
|
{ path: "/", component: Overview },
|
|
{ path: "/components", component: Components },
|
|
|
|
// The catch-all, and it is not optional. The SERVER answers every /js/* URL with this
|
|
// shell — it has no idea which paths the router knows about — so without a fallback an
|
|
// unknown one renders the chrome around an empty <main>: a blank page, with a 200, and
|
|
// nothing to tell you why. Kjøl Wasm Web has the same catch-all for the same reason.
|
|
{ path: "*", component: NotFound },
|
|
];
|
|
|
|
const root = document.getElementById("app");
|
|
if (root) {
|
|
render(
|
|
() =>
|
|
createComponent(Router, {
|
|
base: "/js",
|
|
root: Shell,
|
|
get children() {
|
|
return routes;
|
|
},
|
|
}),
|
|
root,
|
|
);
|
|
}
|