@flow.os/router 0.0.1-dev.1771665310

package/index.ts

@@ -0,0 +1,139 @@
+export const APP_ID = 'flow-app';
+
+/** Contenitore dove il router monta la pagina corrente. In root: <App /> (da @flow.os/router). */
+export function App(): HTMLDivElement {
+  const el = document.createElement('div');
+  el.id = APP_ID;
+  el.setAttribute('role', 'main');
+  return el;
+}
+
+export type RouteModule = {
+  default: (() => Node) | ((params: Record<string, string>) => Node) | (() => string) | string;
+};
+
+export type RunOptions = {
+  /** Nodo (o factory) mostrato mentre la route lazy viene caricata. */
+  fallback?: Node | (() => Node);
+};
+
+function pathToPattern(key: string): string {
+  const afterRoutes = key.replace(/^.*[/\\]routes[/\\]?/i, '').replace(/\.tsx?$/i, '');
+  const s = afterRoutes.split(/[/\\]/).filter(Boolean).join('/');
+  if (s === 'index' || s === '') return '';
+  return s
+    .split('/')
+    .map((x) => (x.startsWith('[') && x.endsWith(']') ? `:${x.slice(1, -1)}` : x))
+    .join('/');
+}
+
+function match(pattern: string, path: string): Record<string, string> | null {
+  const pa = pattern ? pattern.split('/').filter(Boolean) : [];
+  const ph = path.replace(/^\//, '').split('/').filter(Boolean);
+  if (pa.length !== ph.length) return null;
+  const params: Record<string, string> = {};
+  for (let i = 0; i < pa.length; i++) {
+    if (pa[i]!.startsWith(':')) params[pa[i]!.slice(1)] = ph[i] ?? '';
+    else if (pa[i] !== ph[i]) return null;
+  }
+  return params;
+}
+
+function setContent(container: HTMLElement, content: Node | string): void {
+  container.innerHTML = '';
+  if (typeof content === 'string') container.textContent = content;
+  else container.appendChild(content);
+}
+
+function defaultNotFound(path: string): Node {
+  const wrap = document.createElement('div');
+  wrap.setAttribute('role', 'alert');
+  const h = document.createElement('h1');
+  h.textContent = '404';
+  const p = document.createElement('p');
+  p.textContent = `Pagina non trovata: ${path || '/'}`;
+  wrap.append(h, p);
+  return wrap;
+}
+
+export function createRouter(
+  modules: Record<string, () => Promise<RouteModule>>,
+  container: HTMLElement,
+  options: { fallback?: Node | (() => Node); notFound?: Node | ((path: string) => Node) } = {}
+) {
+  const routes = Object.entries(modules).map(([key, loader]) => ({
+    pattern: pathToPattern(key),
+    loader,
+  }));
+  routes.sort(
+    (a, b) =>
+      b.pattern.split('/').filter(Boolean).length - a.pattern.split('/').filter(Boolean).length
+  );
+  const notFound = options.notFound ?? defaultNotFound;
+
+  async function render(pathname: string): Promise<boolean> {
+    const path = pathname === '/' ? '' : pathname.slice(1);
+    for (const { pattern, loader } of routes) {
+      const params = match(pattern, path);
+      if (params === null) continue;
+      const fallbackNode =
+        options.fallback != null
+          ? typeof options.fallback === 'function'
+            ? options.fallback()
+            : options.fallback
+          : null;
+      if (fallbackNode) setContent(container, fallbackNode);
+      const mod = await loader();
+      const def = mod.default;
+      if (typeof def === 'function') {
+        const out = def.length
+          ? (def as (p: Record<string, string>) => Node)(params)
+          : (def as () => Node | string)();
+        if (out instanceof Node) setContent(container, out);
+        else if (typeof out === 'string') container.innerHTML = out;
+        else container.innerHTML = '';
+      } else setContent(container, typeof def === 'string' ? def : (def as unknown as Node));
+      return true;
+    }
+    const nfNode = typeof notFound === 'function' ? notFound(pathname) : notFound;
+    setContent(container, nfNode);
+    return false;
+  }
+
+  function go(path: string, replace = false): void {
+    const p = path.startsWith('/') ? path : `/${path}`;
+    render(p).then((ok) => {
+      if (ok) (replace ? history.replaceState : history.pushState).call(history, null, '', p);
+    });
+  }
+
+  function start(): void {
+    render(location.pathname || '/');
+    window.addEventListener('popstate', () => render(location.pathname || '/'));
+    document.addEventListener('click', (e) => {
+      const a = (e.target as Element).closest('a');
+      if (a?.getAttribute('href')?.startsWith('/') && !a.href.startsWith('//')) {
+        e.preventDefault();
+        go(a.getAttribute('href')!);
+      }
+    });
+  }
+
+  return { go, start };
+}
+
+/** Monta App e avvia il router. Da usare nell'entry virtuale. */
+export function run(
+  App: () => Node,
+  modules: Record<string, () => Promise<RouteModule>>,
+  options?: RunOptions
+): void {
+  const app = document.getElementById('app')!;
+  app.appendChild(App());
+  const appContainer = document.getElementById(APP_ID);
+  if (!appContainer)
+    throw new Error(
+      `#${APP_ID} not found: use <App /> from @flow.os/router in your root layout.`
+    );
+  createRouter(modules, appContainer as HTMLElement, options).start();
+}

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@flow.os/router",
+  "version": "0.0.1-dev.1771665310",
+  "type": "module",
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "exports": {
+    ".": {
+      "types": "./index.ts",
+      "import": "./index.ts",
+      "default": "./index.ts"
+    }
+  }
+}