toiljs 0.0.15 → 0.0.19

package/src/client/routing/match.ts

@@ -1,47 +1,47 @@
-/** Extracted dynamic route parameters, e.g. `{ id: "42" }` for `/blog/:id` matching `/blog/42`. */
-export type RouteParams = Record<string, string>;
-
-/**
- * Matches a route pattern against a pathname, returning extracted params or `null` if no match.
- * Pure and runtime-agnostic (used by the router and unit-tested directly).
- *   matchRoute('/', '/')                  -> {}
- *   matchRoute('/blog/:id', '/blog/42')   -> { id: '42' }
- *   matchRoute('/docs/*slug', '/docs/a/b') -> { slug: 'a/b' }   (catch-all, 1+ segments)
- *   matchRoute('/docs/**slug', '/docs')   -> { slug: '' }       (optional catch-all, 0+ segments)
- *   matchRoute('/about', '/x')            -> null
- */
-export function matchRoute(pattern: string, pathname: string): RouteParams | null {
-    const patternSegs = pattern.split('/').filter(Boolean);
-    const pathSegs = pathname.split('/').filter(Boolean);
-
-    const params: RouteParams = {};
-    for (let i = 0; i < patternSegs.length; i++) {
-        const p = patternSegs[i];
-
-        // Optional catch-all (`**slug`): captures the rest of the path, matching zero or more segments.
-        if (p.startsWith('**')) {
-            params[p.slice(2)] = pathSegs
-                .slice(i)
-                .map((s) => decodeURIComponent(s))
-                .join('/');
-            return params;
-        }
-
-        if (p.startsWith('*')) {
-            const rest = pathSegs.slice(i);
-            if (rest.length === 0) return null;
-            params[p.slice(1)] = rest.map((s) => decodeURIComponent(s)).join('/');
-            return params;
-        }
-
-        if (i >= pathSegs.length) return null;
-        const value = pathSegs[i];
-        if (p.startsWith(':')) {
-            params[p.slice(1)] = decodeURIComponent(value);
-        } else if (p !== value) {
-            return null;
-        }
-    }
-
-    return patternSegs.length === pathSegs.length ? params : null;
-}
+/** Extracted dynamic route parameters, e.g. `{ id: "42" }` for `/blog/:id` matching `/blog/42`. */
+export type RouteParams = Record<string, string>;
+
+/**
+ * Matches a route pattern against a pathname, returning extracted params or `null` if no match.
+ * Pure and runtime-agnostic (used by the router and unit-tested directly).
+ *   matchRoute('/', '/')                  -> {}
+ *   matchRoute('/blog/:id', '/blog/42')   -> { id: '42' }
+ *   matchRoute('/docs/*slug', '/docs/a/b') -> { slug: 'a/b' }   (catch-all, 1+ segments)
+ *   matchRoute('/docs/**slug', '/docs')   -> { slug: '' }       (optional catch-all, 0+ segments)
+ *   matchRoute('/about', '/x')            -> null
+ */
+export function matchRoute(pattern: string, pathname: string): RouteParams | null {
+    const patternSegs = pattern.split('/').filter(Boolean);
+    const pathSegs = pathname.split('/').filter(Boolean);
+
+    const params: RouteParams = {};
+    for (let i = 0; i < patternSegs.length; i++) {
+        const p = patternSegs[i];
+
+        // Optional catch-all (`**slug`): captures the rest of the path, matching zero or more segments.
+        if (p.startsWith('**')) {
+            params[p.slice(2)] = pathSegs
+                .slice(i)
+                .map((s) => decodeURIComponent(s))
+                .join('/');
+            return params;
+        }
+
+        if (p.startsWith('*')) {
+            const rest = pathSegs.slice(i);
+            if (rest.length === 0) return null;
+            params[p.slice(1)] = rest.map((s) => decodeURIComponent(s)).join('/');
+            return params;
+        }
+
+        if (i >= pathSegs.length) return null;
+        const value = pathSegs[i];
+        if (p.startsWith(':')) {
+            params[p.slice(1)] = decodeURIComponent(value);
+        } else if (p !== value) {
+            return null;
+        }
+    }
+
+    return patternSegs.length === pathSegs.length ? params : null;
+}

package/src/client/routing/mount.tsx

@@ -1,52 +1,54 @@
-import { createRoot } from 'react-dom/client';
-
-import {
-    DevErrorBoundary,
-    DevErrorOverlay,
-    initDevErrorOverlay,
-    isDevMode,
-} from '../dev/error-overlay.js';
-import { initNavigation } from '../navigation/navigation.js';
-import { startPrefetcher } from '../navigation/prefetch.js';
-import { Router } from './Router.js';
-import type { ErrorComponentLoader, LayoutLoader, NotFoundLoader, RouteDef } from '../types.js';
-
-/**
- * Mounts the toil client app into `#root` and starts idle link prefetching. Called by the
- * compiler-generated `.toil/entry.tsx`.
- */
-export function mount(
-    routes: RouteDef[],
-    layout: LayoutLoader = null,
-    notFound: NotFoundLoader = null,
-    globalError: ErrorComponentLoader = null,
-    slots: Record<string, RouteDef[]> = {},
-): void {
-    const el = document.getElementById('root');
-    if (!el) throw new Error('toil: #root element not found');
-    initNavigation();
-    const app = (
-        <Router
-            routes={routes}
-            layout={layout}
-            notFound={notFound}
-            globalError={globalError}
-            slots={slots}
-        />
-    );
-    // In dev, wrap the app in the error overlay so uncaught render/async errors surface on screen
-    // (not a blank page). In production it's omitted entirely.
-    if (isDevMode()) {
-        initDevErrorOverlay();
-        createRoot(el).render(
-            <>
-                <DevErrorBoundary>{app}</DevErrorBoundary>
-                <DevErrorOverlay />
-            </>,
-        );
-    } else {
-        createRoot(el).render(app);
-    }
-    // Prefetch across the main tree and every slot tree (one prefetcher owns the whole table).
-    startPrefetcher([...routes, ...Object.values(slots).flat()]);
-}
+import { createRoot } from 'react-dom/client';
+
+import { DevToolbar } from '../dev/devtools.js';
+import {
+    DevErrorBoundary,
+    DevErrorOverlay,
+    initDevErrorOverlay,
+} from '../dev/error-overlay.js';
+import { initNavigation } from '../navigation/navigation.js';
+import { startPrefetcher } from '../navigation/prefetch.js';
+import { Router } from './Router.js';
+import type { ErrorComponentLoader, LayoutLoader, NotFoundLoader, RouteDef } from '../types.js';
+
+/**
+ * Mounts the toil client app into `#root` and starts idle link prefetching. Called by the
+ * compiler-generated `.toil/entry.tsx`.
+ */
+export function mount(
+    routes: RouteDef[],
+    layout: LayoutLoader = null,
+    notFound: NotFoundLoader = null,
+    globalError: ErrorComponentLoader = null,
+    slots: Record<string, RouteDef[]> = {},
+): void {
+    const el = document.getElementById('root');
+    if (!el) throw new Error('toil: #root element not found');
+    initNavigation();
+    const app = (
+        <Router
+            routes={routes}
+            layout={layout}
+            notFound={notFound}
+            globalError={globalError}
+            slots={slots}
+        />
+    );
+    // In dev, wrap the app in the error overlay + dev toolbar so uncaught errors surface and dev info
+    // is available. The guard is the literal `import.meta.env.DEV` (not `isDevMode()`) so the whole
+    // branch, and the dev-only imports, are dead-code-eliminated and tree-shaken from production.
+    if ((import.meta as unknown as { env: { DEV: boolean } }).env.DEV) {
+        initDevErrorOverlay();
+        createRoot(el).render(
+            <>
+                <DevErrorBoundary>{app}</DevErrorBoundary>
+                <DevErrorOverlay />
+                <DevToolbar routes={routes} slots={slots} />
+            </>,
+        );
+    } else {
+        createRoot(el).render(app);
+    }
+    // Prefetch across the main tree and every slot tree (one prefetcher owns the whole table).
+    startPrefetcher([...routes, ...Object.values(slots).flat()]);
+}

package/src/client/routing/params-context.ts

@@ -1,10 +1,10 @@
-/**
- * React context carrying the current route's dynamic params. The provider is set by {@link Router};
- * read it with the {@link useParams} hook rather than consuming the context directly.
- */
-import { createContext } from 'react';
-
-import type { RouteParams } from './match.js';
-
-/** Holds the params extracted from the active route (e.g. `{ id }` for `/blog/:id`). */
-export const ParamsContext = createContext<RouteParams>({});
+/**
+ * React context carrying the current route's dynamic params. The provider is set by {@link Router};
+ * read it with the {@link useParams} hook rather than consuming the context directly.
+ */
+import { createContext } from 'react';
+
+import type { RouteParams } from './match.js';
+
+/** Holds the params extracted from the active route (e.g. `{ id }` for `/blog/:id`). */
+export const ParamsContext = createContext<RouteParams>({});

package/src/client/routing/slot-context.ts

@@ -1,7 +1,7 @@
-/**
- * Context carrying the rendered element for each parallel-route slot (`@slot`), keyed by name.
- * Provided by the Router for the current URL, consumed by {@link Slot}.
- */
-import { createContext, type ReactNode } from 'react';
-
-export const SlotContext = createContext<Record<string, ReactNode>>({});
+/**
+ * Context carrying the rendered element for each parallel-route slot (`@slot`), keyed by name.
+ * Provided by the Router for the current URL, consumed by {@link Slot}.
+ */
+import { createContext, type ReactNode } from 'react';
+
+export const SlotContext = createContext<Record<string, ReactNode>>({});

package/src/client/rpc.ts

@@ -0,0 +1,64 @@
+/**
+ * The client-callable server surface (`Server`). Its TYPED shape is generated by
+ * the toilscript server build into the project's `shared/server.ts`
+ * (`declare global { const Server }`); this module is the runtime behind it.
+ *
+ * Two surfaces live under `Server`:
+ *   - `Server.REST.<controller>.<route>(args)` is a WORKING fetch client. The
+ *     generated `shared/server.ts` attaches it to `globalThis.__toilRest` when
+ *     imported; the proxy below surfaces it under `Server.REST`.
+ *   - `Server.<service>.<method>()` (RPC) is not wired yet, so any call throws.
+ *     The pipeline (tags -> generated types -> proxy) is in place; only the
+ *     network dispatch is a TODO. Build the server (`npm run build:server`) to
+ *     (re)generate the typed surface.
+ */
+
+/** A recursive proxy that throws on call, used when the REST client hasn't loaded. */
+function restMissingStub(path: string): unknown {
+    const call = (): never => {
+        throw new Error(
+            `toiljs REST: ${path}() is unavailable. The generated REST client has not loaded - ` +
+                `import a type from your 'shared/server' (so the client attaches), or run 'npm run build:server'.`,
+        );
+    };
+    return new Proxy(call, {
+        get(_target, prop) {
+            if (typeof prop === 'symbol' || prop === 'then') return undefined;
+            return restMissingStub(`${path}.${String(prop)}`);
+        },
+        apply() {
+            return call();
+        },
+    });
+}
+
+/** Builds a recursive proxy that throws on call, supporting `Server.svc.method()`. */
+function rpcStub(path: string): unknown {
+    const call = (): never => {
+        throw new Error(
+            `toiljs RPC: ${path}() is not available yet. The client<->server transport ` +
+                `is not wired; this is a generated stub. Remote calls will work once transport lands.`,
+        );
+    };
+    return new Proxy(call, {
+        get(_target, prop) {
+            // Not thenable, and ignore symbol probes (e.g. from awaiting/inspection).
+            if (typeof prop === 'symbol' || prop === 'then') return undefined;
+            // `Server.REST` surfaces the generated fetch client attached by shared/server.ts.
+            if (path === 'Server' && prop === 'REST') {
+                const rest = (globalThis as { __toilRest?: unknown }).__toilRest;
+                return rest !== undefined ? rest : restMissingStub('Server.REST');
+            }
+            return rpcStub(`${path}.${prop}`);
+        },
+        apply() {
+            return call();
+        },
+    });
+}
+
+/**
+ * Runtime value for the global `Server`. Typed as `unknown` here; the real types
+ * come from the generated `shared/server.ts`. toiljs assigns this to `globalThis`.
+ */
+export const Server: unknown = rpcStub('Server');