@heshammesalam/heshjs 0.0.0-stage → 0.2.0

package/src/router/index.ts

@@ -0,0 +1,171 @@
+import { signal, batch, type Disposer } from '../reactivity/index.js';
+import type { AppModule, MountedModule, RouteLocation } from '../hmvc/index.js';
+export type { RouteLocation } from '../hmvc/index.js';
+export interface RouteRecord { path: string; module: AppModule; children?: readonly RouteRecord[] }
+export interface RouterOptions {
+  routes: readonly RouteRecord[];
+  window?: Window;
+  notFound?: AppModule;
+  onError?: (error: unknown) => void;
+}
+interface Entry { record: RouteRecord; params: Record<string, string> }
+interface Active extends Entry { instance: MountedModule }
+
+function segments(path: string): string[] { return path.split('/').filter(Boolean); }
+function validate(routes: readonly RouteRecord[], ancestors = new Set<string>()): void {
+  const siblings = new Set<string>();
+  for (const route of routes) {
+    if (/[?#]/.test(route.path)) throw new Error(`Route paths cannot contain query/hash: ${route.path}`);
+    const parts = segments(route.path);
+    const signature = parts.map(p => p.startsWith(':') ? ':' : p).join('/');
+    if (siblings.has(signature)) throw new Error(`Duplicate sibling route: ${route.path}`);
+    siblings.add(signature);
+    const names = new Set(ancestors);
+    parts.forEach((p, i) => {
+      if (p === '*' && (i !== parts.length - 1 || route.children?.length)) throw new Error('Wildcard must end a leaf route');
+      if (p.startsWith(':')) {
+        const name = p.slice(1);
+        if (!/^[a-zA-Z_][a-zA-Z\d_]*$/.test(name) || names.has(name) || ['__proto__', 'prototype', 'constructor'].includes(name)) throw new Error(`Invalid or duplicate route param: ${name}`);
+        names.add(name);
+      }
+    });
+    validate(route.children ?? [], names);
+  }
+}
+function find(routes: readonly RouteRecord[], parts: string[], at = 0, params: Record<string, string> = {}): Entry[] | undefined {
+  const ordered = [...routes].sort((a, b) => {
+    const aa = segments(a.path), bb = segments(b.path);
+    for (let i = 0; i < Math.max(aa.length, bb.length); i++) {
+      const rank = (p?: string) => p === '*' ? 0 : p?.startsWith(':') ? 1 : p ? 2 : 0.5;
+      const diff = rank(bb[i]) - rank(aa[i]); if (diff) return diff;
+    }
+    return 0;
+  });
+  for (const record of ordered) {
+    const own = { ...params }; let cursor = at, matched = true;
+    for (const part of segments(record.path)) {
+      if (part === '*') { own['wildcard'] = parts.slice(cursor).join('/'); cursor = parts.length; break; }
+      const actual = parts[cursor++];
+      if (actual === undefined) { matched = false; break; }
+      if (part.startsWith(':')) own[part.slice(1)] = actual;
+      else if (part !== actual) { matched = false; break; }
+    }
+    if (!matched) continue;
+    const entry = { record, params: own };
+    const children = find(record.children ?? [], parts, cursor, own);
+    if (children) return [entry, ...children];
+    if (cursor === parts.length) return [entry];
+  }
+  return undefined;
+}
+
+export function createRouter(options: RouterOptions) {
+  validate(options.routes);
+  const browser = options.window ?? (typeof window !== 'undefined' ? window : undefined);
+  if (!browser) throw new Error('createRouter requires a browser Window');
+  const report = options.onError ?? ((error: unknown) => console.error(error));
+  const location = signal<RouteLocation>(makeLocation(new URL(browser.location.href), {}));
+  let root: Node | undefined, active: Active[] = [], fallback: HTMLElement | undefined;
+  let transitioning = false;
+  let generation = 0;
+  const notFoundRecord: RouteRecord | undefined = options.notFound ? { path: '*', module: options.notFound } : undefined;
+  function makeLocation(url: URL, params: Record<string, string>): RouteLocation {
+    return Object.freeze({ url: new URL(url), pathname: url.pathname, params: Object.freeze({ ...params }), query: new URLSearchParams(url.search), hash: url.hash });
+  }
+  function render(url: URL): void {
+    if (!root) throw new Error('Start the router before navigating');
+    if (transitioning) throw new Error('Navigation during module mounting is not supported');
+    transitioning = true;
+    try {
+      let entries: Entry[] | undefined;
+      try { entries = find(options.routes, segments(url.pathname).map(decodeURIComponent)); }
+      catch (error) { if (!(error instanceof URIError)) throw error; }
+      if (!entries && notFoundRecord) entries = [{ record: notFoundRecord, params: {} }];
+      entries ??= [];
+      let keep = 0;
+      while (keep < active.length && keep < entries.length && active[keep]!.record === entries[keep]!.record && JSON.stringify(active[keep]!.params) === JSON.stringify(entries[keep]!.params)) keep++;
+      const removed = active.splice(keep);
+      const errors: unknown[] = [];
+      for (const item of removed.reverse()) { try { item.instance.dispose(); } catch (error) { errors.push(error); } }
+      fallback?.remove(); fallback = undefined;
+      if (errors.length) throw new AggregateError(errors, 'Route cleanup failed');
+      const added: Active[] = [];
+      try {
+        for (let i = keep; i < entries.length; i++) {
+          const entry = entries[i]!;
+          const parent = active.at(-1);
+          const outlet = parent ? parent.instance.outlet : root;
+          if (!outlet) throw new Error(`Parent module ${parent!.record.path} must render Outlet()`);
+          const instance = entry.record.module.attach(outlet, makeLocation(url, entry.params), parent?.instance.context, { onError: report });
+          const item = { ...entry, instance };
+          active.push(item); added.push(item);
+        }
+      } catch (error) {
+        active.splice(keep);
+        for (const item of added.reverse()) { try { item.instance.dispose(); } catch (cleanupError) { report(cleanupError); } }
+        throw error;
+      }
+      if (!entries.length) {
+        fallback = root.ownerDocument!.createElement('p');
+        fallback.setAttribute('role', 'status'); fallback.textContent = 'Page not found'; root.appendChild(fallback);
+      }
+      batch(() => {
+        for (const item of active) item.instance.update(makeLocation(url, item.params));
+        location.set(makeLocation(url, entries.at(-1)?.params ?? {}));
+      });
+    } finally { transitioning = false; }
+  }
+  function navigate(to: string, navigation: { replace?: boolean } = {}): void {
+    if (!root) throw new Error('Start the router before navigating');
+    const url = new URL(to, browser!.location.href);
+    if (!['http:', 'https:'].includes(url.protocol) || url.origin !== browser!.location.origin) throw new Error('Router navigation requires a same-origin HTTP(S) URL');
+    if (url.href === browser!.location.href) return;
+    render(url);
+    browser!.history[navigation.replace ? 'replaceState' : 'pushState'](null, '', url.href);
+  }
+  const popstate = () => {
+    try { if (location.get().url.href !== browser!.location.href) render(new URL(browser!.location.href)); }
+    catch (error) { report(error); }
+  };
+  const click = (event: MouseEvent) => {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+    const target = event.target as Element | null;
+    const anchor = target?.closest?.('a[href]');
+    if (!anchor || anchor.hasAttribute('download') || anchor.hasAttribute('data-hesh-reload') || (anchor.getAttribute('target') && anchor.getAttribute('target')!.toLowerCase() !== '_self')) return;
+    const href = anchor.getAttribute('href')!;
+    if (href.startsWith('#')) return;
+    let url: URL;
+    try { url = new URL(href, browser!.document.baseURI); } catch { return; }
+    if (!['http:', 'https:'].includes(url.protocol) || url.origin !== browser!.location.origin) return;
+    if (url.pathname === browser!.location.pathname && url.search === browser!.location.search && url.hash) return;
+    event.preventDefault();
+    try { navigate(url.href); } catch (error) { report(error); }
+  };
+  function stop(): void {
+    if (transitioning) throw new Error('Cannot stop the router during module mounting');
+    browser!.document.removeEventListener('click', click);
+    browser!.removeEventListener('popstate', popstate);
+    browser!.removeEventListener('hashchange', popstate);
+    const old = active; active = []; root = undefined;
+    generation++;
+    fallback?.remove(); fallback = undefined;
+    const errors: unknown[] = [];
+    for (const item of old.reverse()) { try { item.instance.dispose(); } catch (error) { errors.push(error); } }
+    if (errors.length) throw new AggregateError(errors, 'Router cleanup failed');
+  }
+  return {
+    location: { get: location.get }, navigate, stop,
+    start(parent: Node): Disposer {
+      if (root) throw new Error('Router is already started');
+      if (parent.ownerDocument !== browser!.document) throw new Error('Router root must belong to its Window');
+      const started = ++generation;
+      root = parent;
+      try { render(new URL(browser!.location.href)); }
+      catch (error) { stop(); throw error; }
+      browser!.document.addEventListener('click', click);
+      browser!.addEventListener('popstate', popstate);
+      browser!.addEventListener('hashchange', popstate);
+      return () => { if (generation === started) stop(); };
+    }
+  };
+}

package/src/vite/index.ts

@@ -0,0 +1,18 @@
+import type { Plugin } from 'vite';
+import { compile } from '../compiler/index.js';
+export function hesh(): Plugin {
+  let production = false;
+  return {
+    name: 'heshjs', enforce: 'pre',
+    config() { return { appType: 'spa' }; },
+    configResolved(config) { production = config.command === 'build'; },
+    transform(source, id) {
+      if (!id.endsWith('.hesh')) return;
+      const result = compile(source, { filename: id, development: !production });
+      return { code: result.code, map: null };
+    },
+    handleHotUpdate(context) {
+      if (context.file.endsWith('.hesh')) { context.server.ws.send({ type: 'full-reload' }); return []; }
+    }
+  };
+}