toiljs 0.0.72 → 0.0.74

package/examples/basic/server/models/SiteAnalytics.ts

@@ -0,0 +1,14 @@
+/** This site's own analytics, mapped from the toilscript `Analytics.self()` snapshot for the
+ *  client. Counts + usage are i64; the rate-limit caps are i64 too (0 = unlimited). */
+@data
+export class SiteAnalytics {
+    requests: i64 = 0;
+    bytesServed: i64 = 0;
+    status2xx: i64 = 0;
+    wasmDispatches: i64 = 0;
+    dbOps: i64 = 0;
+    reqMinuteUsed: i64 = 0;
+    reqMinuteCap: i64 = 0;
+    reqDayUsed: i64 = 0;
+    reqDayCap: i64 = 0;
+}

package/examples/basic/server/routes/Analytics.ts

@@ -0,0 +1,30 @@
+import { SiteAnalytics } from '../models/SiteAnalytics';
+
+/**
+ * This site's own analytics, mounted at `/analytics`. On the client:
+ *   await Server.REST.analytics.self()
+ *
+ * Reads the toilscript `Analytics.self()` snapshot (the per-domain metering counters + this
+ * site's plan limits) and maps it into a `@data` response. A site can only read ITS OWN
+ * analytics here; the privileged `dacely.com` domain additionally has `Analytics.site(domain)`
+ * / `Analytics.listSites(...)`. Under `toiljs dev` the dev server returns sample data; at the
+ * edge the SAME code reads the real metering. `Analytics` is a global (no import).
+ */
+@rest('analytics')
+class AnalyticsRoutes {
+    @get('/')
+    public self(): SiteAnalytics {
+        const s = Analytics.self();
+        const r = new SiteAnalytics();
+        r.requests = s.lifetime.has('requests') ? s.lifetime.get('requests') : 0;
+        r.bytesServed = s.lifetime.has('bytes_served') ? s.lifetime.get('bytes_served') : 0;
+        r.status2xx = s.lifetime.has('status_2xx') ? s.lifetime.get('status_2xx') : 0;
+        r.wasmDispatches = s.lifetime.has('wasm_dispatches') ? s.lifetime.get('wasm_dispatches') : 0;
+        r.dbOps = s.lifetime.has('db_ops') ? s.lifetime.get('db_ops') : 0;
+        r.reqMinuteUsed = s.reqMinuteUsed;
+        r.reqMinuteCap = <i64>s.reqMinuteCap;
+        r.reqDayUsed = s.reqDayUsed;
+        r.reqDayCap = <i64>s.reqDayCap;
+        return r;
+    }
+}

package/examples/basic/server/streams/Echo.ts

@@ -1,44 +1,47 @@
 /**
  * A `@stream` protocol handler mounted at `/echo` - the SERVER side of the Realtime feature.
  *
- * Unlike a `@rest` route (a fresh handler per request), a `@stream` runs as a RESIDENT wasm box per
- * connection: it is created on `@connect`, lives for the whole connection, and is torn down on `@close`.
- * On the Toil edge that box is distributed across the L2/L3 stream nodes and pinned to ONE worker for the
- * connection's life via QUIC connection-id steering, so its in-box state survives every event.
+ * A `@stream` box is RESIDENT for the life of ONE connection: created on `@connect`, it handles every
+ * `@message` on that connection (on the Toil edge it is pinned to one worker for the connection's life
+ * via QUIC connection-id steering), and is DESTROYED on `@close`. So in-box state persists across the
+ * messages of a SINGLE connection - but it does NOT survive the connection. The next connection (and a
+ * reconnect) gets a brand-new box that starts clean, and a box is NEVER reused across connections, so
+ * one connection's state can never leak into another.
  *
- * The `count` field below is the proof: it persists across every `@message` because the box is never
- * reset between events (a `@rest` handler's fields reset each request). Each reply carries the running
- * count, so the client can watch the SAME resident box advance.
+ * => Box fields are per-connection scratch ONLY. For state that must outlive the connection (survive a
+ *    reconnect, or be shared/durable), use `@data` / the DB - never a class field.
  *
- * Two browser clients drive this exact box (both land here in dev over a WebSocket, and on the edge over
- * WebTransport):
+ * The `count` below is exactly that per-connection scratch: it advances across THIS connection's frames
+ * and resets to 0 the next time someone connects.
+ *
+ * Two browser clients drive this box (over a WebSocket in dev, WebTransport on the edge):
  *   - the raw socket:   Toil.useChannel({ path: '/echo' })   (client/routes/features/realtime.tsx)
  *   - the typed stream: await Server.Stream.Echo.connect()    (client/routes/features/stream.tsx)
  */
 @stream('echo')
 class Echo {
-    // Resident per-connection state: survives across events (the box is never reset between them).
+    // Per-CONNECTION scratch: persists across this connection's messages, gone when it closes (the box
+    // is destroyed). NOT durable - use @data for anything that must survive a reconnect.
     private count: i32 = 0;
 
     @connect
     onConnect(): void {
-        // A fresh connection: its dedicated box starts the counter at 0.
+        // A fresh connection gets its OWN new box; the counter starts at 0.
         this.count = 0;
     }
 
     @message
     onMessage(packet: StreamPacket): StreamOutbound {
-        // Count every inbound frame - and PERSIST across them, because this is the same resident box for
-        // the whole connection - then reply with the running count so the client sees it advance.
+        // Advances on every frame of THIS connection - and persists across them, because it is the same
+        // resident box for the connection's life - then replies with the running count.
         this.count = this.count + 1;
-        // The count proves residency (the same box handled every frame); the inbound length proves the
-        // frame arrived. We avoid decoding the inbound here to keep the handler bytes-safe.
         const reply = 'pong #' + this.count.toString() + ' (' + packet.bytes().length.toString() + ' bytes in)';
         return StreamOutbound.reply(Uint8Array.wrap(String.UTF8.encode(reply)));
     }
 
     @close
     onClose(): void {
-        // Graceful close: the per-connection box is torn down after this hook.
+        // Graceful close: the box is DESTROYED after this hook, so the next connection starts clean and
+        // no state leaks across connections.
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "toiljs",
     "type": "module",
-    "version": "0.0.72",
+    "version": "0.0.74",
     "author": "Dacely",
     "description": "The modern React framework: a file-based React frontend and a ToilScript-compiled WebAssembly backend.",
     "repository": {
@@ -134,7 +134,7 @@
         "nodemailer": "^9.0.1",
         "picocolors": "^1.1.1",
         "sharp": "^0.35.2",
-        "toilscript": "^0.1.47",
+        "toilscript": "^0.1.48",
         "typescript-eslint": "^8.62.0",
         "vite": "^8.1.0",
         "vite-imagetools": "^10.0.1",
@@ -145,7 +145,7 @@
         "prettier": ">=3.0.0",
         "react": ">=18.0.0",
         "react-dom": ">=18.0.0",
-        "toilscript": ">=0.1.47",
+        "toilscript": ">=0.1.48",
         "typescript": ">=6.0.0"
     },
     "overrides": {

package/src/client/navigation/Link.tsx

@@ -29,6 +29,17 @@ function isExternalHref(href: string): boolean {
     }
 }
 
+/**
+ * Whether `href` is a usable client-navigation target. A data-driven href (`` `routeMap[key]` ``)
+ * can resolve to `undefined` / `null` / `''` at runtime when the target page doesn't exist; the
+ * resulting anchor is inert, so we must not intercept its click, calling `href.startsWith` /
+ * `navigate` on a missing href would throw. `Href` is always a string at the type level, hence the
+ * `unknown` parameter, the guard is purely a runtime safety net.
+ */
+function isNavigableHref(href: unknown): href is string {
+    return typeof href === 'string' && href !== '';
+}
+
 /**
  * Client-side navigation link. Forwards all anchor attributes to the underlying `<a>`, and
  * prefetches the target route's chunk on hover/focus. Intercepts only plain same-origin clicks ,
@@ -52,6 +63,9 @@ export function Link(props: LinkProps): ReactNode {
         onClick?.(event);
         if (
             event.defaultPrevented ||
+            // A missing href (the target page doesn't exist) makes the anchor inert: leave the click
+            // to the browser instead of intercepting it. Checked before `startsWith` so it can't throw.
+            !isNavigableHref(href) ||
             event.button !== 0 ||
             event.metaKey ||
             event.ctrlKey ||
@@ -69,7 +83,7 @@ export function Link(props: LinkProps): ReactNode {
     };
 
     const warm = (): void => {
-        if (prefetchProp) prefetch(href);
+        if (prefetchProp && isNavigableHref(href)) prefetch(href);
     };
     const handlePointerEnter = (event: PointerEvent<HTMLAnchorElement>): void => {
         onPointerEnter?.(event);

package/src/client/routing/mount.tsx

@@ -1,7 +1,5 @@
 import { createRoot, hydrateRoot } 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';
@@ -38,39 +36,48 @@ export function mount(
         />
     );
     // 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.
+    // is available. The guard is the literal `import.meta.env.DEV`, and the dev modules are pulled in
+    // with DYNAMIC `import()` INSIDE this branch. A production build dead-code-eliminates the whole
+    // branch - the `import()` calls included - so the devtools/overlay never enter the bundle, not even
+    // as an unreferenced chunk. (A static top-level import would otherwise survive into production unless
+    // the package opts into tree-shaking via a `sideEffects` declaration.)
     if ((import.meta as unknown as { env: { DEV: boolean } }).env.DEV) {
-        initDevErrorOverlay();
-        // Dev tools (error overlay + toolbar) render into their OWN body-level
-        // container, never inside `#root`, so `#root` holds only the app markup.
-        // That lets an SSR document hydrate cleanly (the server only rendered the
-        // app into `#root`), and is harmless for a plain client-rendered page.
-        const devEl = document.createElement('div');
-        devEl.id = '__toil_dev';
-        document.body.appendChild(devEl);
-        createRoot(devEl).render(
-            <>
-                <DevErrorOverlay />
-                <DevToolbar
-                    routes={routes}
-                    slots={slots}
-                />
-            </>,
-        );
-        const tree = <DevErrorBoundary>{app}</DevErrorBoundary>;
-        if (isSsrDocument()) {
-            // Edge-SSR: hydrate the server-rendered markup in place.
-            hydrateRoot(el, tree);
-            // The dev shell inlined `<style data-toil-dev-ssr>` so this server-rendered first paint was
-            // already styled (no FOUC). Vite has since injected the same CSS via the entry's imports
-            // (HMR-managed), so drop the static style to avoid a stale copy surviving a hot edit.
-            document.querySelectorAll('[data-toil-dev-ssr]').forEach((n) => {
-                n.remove();
-            });
-        } else {
-            createRoot(el).render(tree);
-        }
+        void (async () => {
+            const { DevToolbar } = await import('../dev/devtools.js');
+            const { DevErrorBoundary, DevErrorOverlay, initDevErrorOverlay } = await import(
+                '../dev/error-overlay.js'
+            );
+            initDevErrorOverlay();
+            // Dev tools (error overlay + toolbar) render into their OWN body-level container, never
+            // inside `#root`, so `#root` holds only the app markup. That lets an SSR document hydrate
+            // cleanly (the server only rendered the app into `#root`), and is harmless for a plain
+            // client-rendered page.
+            const devEl = document.createElement('div');
+            devEl.id = '__toil_dev';
+            document.body.appendChild(devEl);
+            createRoot(devEl).render(
+                <>
+                    <DevErrorOverlay />
+                    <DevToolbar
+                        routes={routes}
+                        slots={slots}
+                    />
+                </>,
+            );
+            const tree = <DevErrorBoundary>{app}</DevErrorBoundary>;
+            if (isSsrDocument()) {
+                // Edge-SSR: hydrate the server-rendered markup in place.
+                hydrateRoot(el, tree);
+                // The dev shell inlined `<style data-toil-dev-ssr>` so the server-rendered first paint
+                // was already styled (no FOUC). Vite has since injected the same CSS via the entry's
+                // imports (HMR-managed), so drop the static style to avoid a stale copy surviving a hot edit.
+                document.querySelectorAll('[data-toil-dev-ssr]').forEach((n) => {
+                    n.remove();
+                });
+            } else {
+                createRoot(el).render(tree);
+            }
+        })();
     } else if (isSsrDocument()) {
         // Edge-SSR: the document already holds server-rendered markup; hydrate it
         // (reuse the DOM) rather than client-rendering from scratch.

package/src/compiler/index.ts

@@ -880,7 +880,20 @@ export async function build(opts: ToilCommandOptions = {}): Promise<void> {
         process.stdout.write(
             pc.green('  ✓ ') + pc.dim('server built; building the client (vite)…') + '\n',
         );
-    await viteBuild(await createViteConfig(cfg));
+    // Keep dev-only tooling (the dev toolbar + error overlay mounted in `mount`) OUT of the production
+    // bundle. It lives behind `import.meta.env.DEV`, which Vite derives from NODE_ENV - and with NODE_ENV
+    // unset a `vite build` here still resolves to a DEV build (even with mode:'production'), leaving that
+    // branch live so the devtools ship in `build`. Force NODE_ENV=production for the client build so the
+    // branch is dead-code-eliminated, then restore NODE_ENV so a later in-process `dev()` (which must
+    // stay a development build, devtools on) is unaffected. `createViteConfig` is shared with `dev`.
+    const prevNodeEnv = process.env.NODE_ENV;
+    process.env.NODE_ENV = 'production';
+    try {
+        await viteBuild(mergeConfig(await createViteConfig(cfg), { mode: 'production' }));
+    } finally {
+        if (prevNodeEnv === undefined) delete process.env.NODE_ENV;
+        else process.env.NODE_ENV = prevNodeEnv;
+    }
     // SSG: bake per-URL HTML + sitemap for dynamic routes that opt in via `generateStaticParams`.
     await prerenderStaticParams(cfg);
     // Edge SSR: render `export const ssr = true` routes to template-with-holes

package/src/devserver/analytics/index.ts

@@ -0,0 +1,158 @@
+/**
+ * Dev-server stand-in for the edge `env.analytics_read` host import
+ * (toil-backend `src/wasm/host/import_functions/analytics.rs`). It returns a fixed
+ * sample `TenantStats` frame so a tenant's wasm exercises the toilscript `Analytics`
+ * API under `toiljs dev`. The frame is stashed into the SAME per-request result
+ * buffer the `data.*` ops use (`db.lastResult`), so the guest drains it with the
+ * existing `data.take_result`.
+ *
+ * Dev is intentionally PERMISSIVE: it returns sample data for ANY domain (own or
+ * named) so a dashboard can be built locally. The real `dacely.com`-only
+ * authorization is enforced host-side at the edge; the dev server has no
+ * multi-tenant host resolution to authorize against.
+ */
+import type { DbDevState } from '../db/index.js';
+import type { MemoryRef } from '../runtime/host.js';
+
+interface DevTenantStats {
+    lifetime: [string, number][];
+    reqMinuteUsed: number;
+    reqMinuteCap: number;
+    reqDayUsed: number;
+    reqDayCap: number;
+}
+
+/** A plausible sample so a guest sees non-zero analytics under `toiljs dev`. */
+function devStats(): DevTenantStats {
+    return {
+        lifetime: [
+            ['requests', 42],
+            ['bytes_served', 12345],
+            ['status_2xx', 40],
+            ['status_3xx', 0],
+            ['status_4xx', 2],
+            ['status_5xx', 0],
+            ['static_hits', 8],
+            ['wasm_dispatches', 34],
+            ['db_ops', 17],
+            ['db_reads', 12],
+            ['db_writes', 5],
+            ['db_errors', 0],
+        ],
+        reqMinuteUsed: 5,
+        reqMinuteCap: 100,
+        reqDayUsed: 42,
+        reqDayCap: 5000,
+    };
+}
+
+/**
+ * Encode the versioned little-endian frame BYTE-FOR-BYTE like the edge encoder
+ * (analytics.rs `encode_stats`) so the toilscript `DataReader` decode is identical
+ * in dev and prod:
+ *   u16 version | u32 count | (u32 nameLen, name bytes, i64 value)* |
+ *   i64 reqMinuteUsed | u64 reqMinuteCap | i64 reqDayUsed | u64 reqDayCap
+ */
+function encodeStats(s: DevTenantStats): Buffer {
+    const parts: Buffer[] = [];
+    const head = Buffer.alloc(6);
+    head.writeUInt16LE(1, 0); // frame version
+    head.writeUInt32LE(s.lifetime.length, 2);
+    parts.push(head);
+    for (const [name, value] of s.lifetime) {
+        const nb = Buffer.from(name, 'utf8');
+        const nl = Buffer.alloc(4);
+        nl.writeUInt32LE(nb.length, 0);
+        const vb = Buffer.alloc(8);
+        vb.writeBigInt64LE(BigInt(value), 0);
+        parts.push(nl, nb, vb);
+    }
+    const tail = Buffer.alloc(32);
+    tail.writeBigInt64LE(BigInt(s.reqMinuteUsed), 0);
+    tail.writeBigUInt64LE(BigInt(s.reqMinuteCap), 8);
+    tail.writeBigInt64LE(BigInt(s.reqDayUsed), 16);
+    tail.writeBigUInt64LE(BigInt(s.reqDayCap), 24);
+    parts.push(tail);
+    return Buffer.concat(parts);
+}
+
+/**
+ * Encode a site page BYTE-FOR-BYTE like the edge (analytics.rs `encode_site_list`):
+ *   count u32 | (u32 nameLen, name bytes)* | has_more u8, all little-endian.
+ */
+function encodeSiteList(names: string[], hasMore: boolean): Buffer {
+    const parts: Buffer[] = [];
+    const head = Buffer.alloc(4);
+    head.writeUInt32LE(names.length, 0);
+    parts.push(head);
+    for (const name of names) {
+        const nb = Buffer.from(name, 'utf8');
+        const nl = Buffer.alloc(4);
+        nl.writeUInt32LE(nb.length, 0);
+        parts.push(nl, nb);
+    }
+    parts.push(Buffer.from([hasMore ? 1 : 0]));
+    return Buffer.concat(parts);
+}
+
+// Mirror the edge ABI bounds (analytics.rs) so dev exercises the SAME negative-status paths as prod.
+const MAX_DOMAIN_LEN = 256;
+const MAX_CURSOR_LEN = 256;
+const ABSENT = -2; // the edge's ABSENT sentinel; the guest maps a negative status to empty stats/list.
+// Pre-sorted so cursor pagination is deterministic and matches the edge's sorted enumeration.
+const SITE_SAMPLE = ['demo.dacely.com', 'example.com', 'shop.test'];
+
+/** The `env.analytics_read` + `env.analytics_list_sites` dev imports. Mirrors `buildDatabaseImports`. */
+export function buildAnalyticsImports(
+    ref: MemoryRef,
+    db: DbDevState,
+): Record<string, (...args: number[]) => number> {
+    return {
+        analytics_read: (domainPtr: number, domainLen: number): number => {
+            // Over-long domain -> ABSENT, mirroring the edge (which returns a negative status, not a
+            // trap); the guest maps it to empty stats. domainLen 0 = the caller's own stats.
+            if (domainLen > MAX_DOMAIN_LEN) return ABSENT;
+            if (domainLen > 0) {
+                if (!ref.memory) throw new Error('analytics_read called before memory was bound');
+                const m = Buffer.from(ref.memory.buffer);
+                if (domainPtr < 0 || domainPtr + domainLen > m.length) {
+                    throw new Error('analytics_read: domain out of bounds');
+                }
+            }
+            const frame = encodeStats(devStats());
+            db.lastResult = frame;
+            db.lastResultVersion = -1;
+            return frame.length;
+        },
+
+        // The dacely dashboard enumerate-all-sites stub. Dev returns a fixed SORTED sample for any
+        // caller (the real dacely.com-only authz is the edge), but mirrors the edge ABI exactly:
+        // over-long/non-utf8 cursor -> ABSENT, cursor = strictly-after, limit cap, and a REAL has_more.
+        analytics_list_sites: (cursorPtr: number, cursorLen: number, limit: number): number => {
+            if (cursorLen > MAX_CURSOR_LEN) return ABSENT;
+            let cursor = '';
+            if (cursorLen > 0) {
+                if (!ref.memory) throw new Error('analytics_list_sites called before memory was bound');
+                const m = Buffer.from(ref.memory.buffer);
+                if (cursorPtr < 0 || cursorPtr + cursorLen > m.length) {
+                    throw new Error('analytics_list_sites: cursor out of bounds');
+                }
+                const cb = m.subarray(cursorPtr, cursorPtr + cursorLen);
+                try {
+                    cursor = new TextDecoder('utf-8', { fatal: true }).decode(cb);
+                } catch {
+                    return ABSENT; // non-utf8 cursor -> empty page, mirroring the edge
+                }
+            }
+            const start = SITE_SAMPLE.findIndex((n) => n > cursor); // strictly after the cursor
+            const from = start < 0 ? SITE_SAMPLE.length : start;
+            const lim = limit > 0 ? Math.min(limit, 256) : 256;
+            const page = SITE_SAMPLE.slice(from, from + lim);
+            const hasMore = from + page.length < SITE_SAMPLE.length;
+            const frame = encodeSiteList(page, hasMore);
+            db.lastResult = frame;
+            db.lastResultVersion = -1;
+            return frame.length;
+        },
+    };
+}

package/src/devserver/production.ts

@@ -450,7 +450,13 @@ async function startBuiltHttpServer(
         if (await dynamicHandler(request, response)) return;
 
         if (request.method === 'GET' || request.method === 'HEAD') {
-            response.sendFile(paths.indexHtml);
+            // Serve the route's OWN prerendered HTML if the build baked one
+            // (`<route>/index.html`, written by prerender.ts/ssg.ts with that route's metadata);
+            // otherwise fall back to the root shell for client-side routing. Without this per-route
+            // lookup EVERY route served the root index.html, so view-source on e.g. /login showed
+            // the home page's <head> (title/description/canonical/og) instead of the page's own.
+            const routeHtml = resolveStaticFile(paths.staticRoot, `${request.path}/index.html`);
+            response.sendFile(routeHtml ?? paths.indexHtml);
             return;
         }
 

package/src/devserver/runtime/host.ts

@@ -19,6 +19,7 @@
 
 import { devEnvGet, devEnvGetSecure } from '../config/env.js';
 import { ratelimitCheck } from '../config/ratelimit.js';
+import { buildAnalyticsImports } from '../analytics/index.js';
 import { buildDatabaseImports, type DbDevState, freshDbState } from '../db/index.js';
 import { EmailStatus, getEmailService } from '../email/index.js';
 import { parseEmailBlob } from '../email/wire.js';
@@ -405,6 +406,11 @@ export function buildHostImports(ref: MemoryRef, state: DispatchState): WebAssem
             // challenges so register/login spans requests under `toiljs dev`;
             // the production edge backs the SAME imports with ScyllaDB.
             ...buildDatabaseImports(ref, state.db),
+
+            // `env.analytics_read`: the per-domain analytics import, emulated in process (see
+            // ../analytics/index.js). Stashes a sample TenantStats frame into the same `db.lastResult`
+            // the data.* ops use; the production edge backs it with the real metering counters.
+            ...buildAnalyticsImports(ref, state.db),
         },
     };
 }

package/test/dom/Link.test.tsx

@@ -31,6 +31,26 @@ describe('Link', () => {
         expect(window.location.pathname).toBe('/');
     });
 
+    it('ignores a click when href is missing (data-driven href to a page that does not exist)', () => {
+        // A runtime-undefined href (e.g. `routeMap[missingKey]`) used to throw on `href.startsWith`
+        // inside the click handler. React reports a handler throw as an uncaught *window* error (what
+        // the dev overlay surfaces), not a synchronous throw, so assert no such error fires. The anchor
+        // is inert now: the click is left to the browser, the page stays put.
+        const errors: string[] = [];
+        const onError = (e: ErrorEvent): void => {
+            errors.push(e.message || String(e.error));
+        };
+        window.addEventListener('error', onError);
+        try {
+            const { getByText } = render(<Link href={undefined as unknown as string as never}>x</Link>);
+            fireEvent.click(getByText('x'));
+        } finally {
+            window.removeEventListener('error', onError);
+        }
+        expect(errors).toEqual([]);
+        expect(window.location.pathname).toBe('/');
+    });
+
     it('forwards anchor attributes (rel, target)', () => {
         const { getByText } = render(
             <Link