@forgebook/sveltekit 0.0.0-stage → 0.2.1

package/dist/src/loadFetch.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The `fetch` a story's `load` gets: in a page, the frame's own, which the catalogue's mocks answer; on a server, the
+ * story's mock handlers run in place of the network for an address on the story's page's origin.
+ *
+ * @remarks
+ * SvelteKit's `fetch` on a server reads a path from the page's address, so a server render (the generated server
+ * tests) would ask `http://localhost` for it: whatever answers on that machine, or nothing, would decide what the page
+ * draws. A server render never reaches the network for the page's own origin: the story's handlers
+ * (`parameters.msw.handlers`, the ones the frame's worker serves) answer it through MSW's `getResponse`, a plain call
+ * with no interception, so concurrent renders never see each other's handlers. A request no handler answers, or one
+ * a handler sends on to the network (`passthrough()`), fails the render with what to give instead. An address on
+ * another origin is fetched as it is. A handler's `HttpResponse.error()` rejects the fetch and its redirect is followed,
+ * as in the frame.
+ *
+ * @module
+ */
+/** A load's `fetch`. */
+export type LoadFetch = (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>;
+/**
+ * The fetch a load gets.
+ *
+ * @param pageUrl - the address of the page being loaded, which a path is read from.
+ * @param handlers - the story's mock handlers.
+ * @param onUnanswered - told of a request on the page's origin that no handler answered on a server, so the render
+ *   fails even when the load catches the error and draws something else.
+ */
+export declare const loadFetch: (pageUrl: URL, handlers: readonly unknown[], onUnanswered: (error: Error) => void) => LoadFetch;
+/**
+ * The handlers a story's parameters declare, flat: a list, or a record of lists as MSW's Storybook addon writes them.
+ *
+ * @param parameters - the story's parameters.
+ */
+export declare const mockHandlersOf: (parameters: Readonly<Record<string, unknown>>) => readonly unknown[];

package/dist/src/loadFetch.js

@@ -0,0 +1,171 @@
+/**
+ * The `fetch` a story's `load` gets: in a page, the frame's own, which the catalogue's mocks answer; on a server, the
+ * story's mock handlers run in place of the network for an address on the story's page's origin.
+ *
+ * @remarks
+ * SvelteKit's `fetch` on a server reads a path from the page's address, so a server render (the generated server
+ * tests) would ask `http://localhost` for it: whatever answers on that machine, or nothing, would decide what the page
+ * draws. A server render never reaches the network for the page's own origin: the story's handlers
+ * (`parameters.msw.handlers`, the ones the frame's worker serves) answer it through MSW's `getResponse`, a plain call
+ * with no interception, so concurrent renders never see each other's handlers. A request no handler answers, or one
+ * a handler sends on to the network (`passthrough()`), fails the render with what to give instead. An address on
+ * another origin is fetched as it is. A handler's `HttpResponse.error()` rejects the fetch and its redirect is followed,
+ * as in the frame.
+ *
+ * @module
+ */
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
+/** The module MSW's request handling is imported from, by the project that installs it. */
+const MSW_MODULE = "msw";
+/**
+ * The fetch a load gets.
+ *
+ * @param pageUrl - the address of the page being loaded, which a path is read from.
+ * @param handlers - the story's mock handlers.
+ * @param onUnanswered - told of a request on the page's origin that no handler answered on a server, so the render
+ *   fails even when the load catches the error and draws something else.
+ */
+export const loadFetch = (pageUrl, handlers, onUnanswered) => {
+    // in a page, a path is read from the frame's address, where the catalogue's mocks answer it
+    if (typeof location !== "undefined")
+        return (input, init) => globalThis.fetch(input, init);
+    restoreHandlers(handlers);
+    const send = async (request, redirects) => {
+        if (new URL(request.url).origin !== pageUrl.origin)
+            return globalThis.fetch(request);
+        // kept for a redirect that sends the request again, body included, after a handler read it
+        const kept = request.clone();
+        const answer = await mockAnswer(handlers, request, pageUrl.origin);
+        if (answer === undefined) {
+            const error = unansweredError(request);
+            onUnanswered(error);
+            throw error;
+        }
+        // MSW's mocked network error: `fetch` rejects, as it does in the frame
+        if (answer.type === "error")
+            throw new TypeError("Failed to fetch", { cause: answer });
+        const next = redirectOf(answer, kept);
+        if (next === undefined)
+            return answer;
+        if (redirects >= MOST_REDIRECTS)
+            throw new TypeError(`Too many redirects, the last to ${next.url}`);
+        return send(next, redirects + 1);
+    };
+    return (input, init) => send(new Request(typeof input === "string" ? new URL(input, pageUrl) : input, init), 0);
+};
+/** How many redirects a fetch follows, as browsers and Node's `fetch` do. */
+const MOST_REDIRECTS = 20;
+/**
+ * The request a mocked redirect leads to, as `fetch` follows it: the same method and body for a 307 or a 308, a GET
+ * for a 303 and for a POST's 301 or 302; none when the answer is no redirect or the request does not follow one.
+ *
+ * @param answer - a handler's answer.
+ * @param request - the request it answered, its body unread.
+ * @throws a `TypeError` for a redirect a request with `redirect: "error"` gets, as `fetch` does.
+ */
+const redirectOf = (answer, request) => {
+    const location = answer.headers.get("location");
+    if (![301, 302, 303, 307, 308].includes(answer.status) || location === null)
+        return undefined;
+    if (request.redirect === "manual")
+        return undefined;
+    if (request.redirect === "error")
+        throw new TypeError(`Redirected to ${location}, which the request refuses`);
+    const target = new URL(location, request.url);
+    const isGet = answer.status === 303 || (request.method === "POST" && answer.status !== 307 && answer.status !== 308);
+    if (!isGet)
+        return new Request(target, request);
+    return new Request(target, {
+        method: request.method === "HEAD" ? "HEAD" : "GET",
+        headers: request.headers
+    });
+};
+/**
+ * The handlers a story's parameters declare, flat: a list, or a record of lists as MSW's Storybook addon writes them.
+ *
+ * @param parameters - the story's parameters.
+ */
+export const mockHandlersOf = (parameters) => {
+    const msw = parameters["msw"];
+    const handlers = isRecord(msw) ? msw["handlers"] : undefined;
+    if (Array.isArray(handlers))
+        return handlers;
+    return isRecord(handlers) ? Object.values(handlers).flat() : [];
+};
+/**
+ * Makes a story's `{ once: true }` handlers answer again, as MSW's `restoreHandlers` does: each page load on a server is
+ * a page of its own, as each frame is, while the handler objects outlive it in the test process.
+ *
+ * @param handlers - the story's handlers.
+ */
+const restoreHandlers = (handlers) => {
+    for (const handler of handlers)
+        if (isRecord(handler) && typeof handler["isUsed"] === "boolean")
+            Reflect.set(handler, "isUsed", false);
+};
+/** Whether a value is an object with named fields. */
+const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+/**
+ * What the story's handlers answer: none when they do not, or when the one that does sends the request on to the
+ * network, which a server render never reaches.
+ *
+ * @param handlers - the story's handlers.
+ * @param request - the request.
+ * @param origin - the page's origin, which a handler's path (`/api/users`) is read from, as the frame reads it.
+ */
+const mockAnswer = async (handlers, request, origin) => {
+    if (handlers.length === 0)
+        return undefined;
+    const { getResponse } = await mswCore();
+    const answer = await getResponse([...handlers], request, { baseUrl: origin });
+    return answer === undefined || isPassthrough(answer) ? undefined : answer;
+};
+/**
+ * Whether an answer is MSW's `passthrough()`: MSW marks it with this status and header, which its own
+ * `isPassthroughResponse` reads (exported from MSW 3 only).
+ *
+ * @param answer - a handler's answer.
+ */
+const isPassthrough = (answer) => answer.status === 302 && answer.headers.get("x-msw-intention") === "passthrough";
+/**
+ * Whether a module is MSW's, as much as a server render uses.
+ *
+ * @param module - the module, as `import()` gave it.
+ */
+const isMswCore = (module) => typeof module === "object" &&
+    module !== null &&
+    "getResponse" in module &&
+    typeof module.getResponse === "function";
+/**
+ * Loads MSW, which only a story with handlers needs on a server.
+ *
+ * @throws when MSW is not installed, or is older than its `getResponse`.
+ */
+const mswCore = async () => {
+    let module;
+    try {
+        // named by a variable, so a frame's build never resolves MSW: the frame fetches through the page
+        module = await import(__rewriteRelativeImportExtension(/* @vite-ignore */ MSW_MODULE));
+    }
+    catch (error) {
+        throw new Error("Answering a load's fetch with the story's mocks on a server needs MSW: npm install --save-dev msw", { cause: error });
+    }
+    if (!isMswCore(module))
+        throw new Error("The installed MSW has no getResponse: MSW 2.11 or later is needed");
+    return module;
+};
+/**
+ * The error of a request on the page's origin that no handler answered: what was asked, and what to give.
+ *
+ * @param request - the request.
+ */
+const unansweredError = (request) => new Error(`A load fetched ${request.method} ${request.url} on a server, and no mock of the story answers it: a server render ` +
+    "never reaches the network. Answer it with a handler in parameters.msw.handlers, or give the page's data " +
+    "with parameters.sveltekit.serverData or parameters.sveltekit.page.data.");

package/dist/src/mountFrame.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The frame page of a SvelteKit catalogue: Forgebook's frame, drawing its stories with Svelte and each story's
+ * SvelteKit page. Called by the page the plugin generates from the catalogue's configuration.
+ *
+ * @module
+ */
+import { type FrameConfig } from "forgebook/frame";
+/**
+ * Shows the story the address names in the given element, drawn with Svelte for a SvelteKit project.
+ *
+ * @param container - the element the story renders into.
+ * @param config - the sources and the languages, as the shell's configuration gives them.
+ */
+export declare const mountFrame: (container: HTMLElement, config: Omit<FrameConfig, "renderer">) => Promise<void>;

package/dist/src/mountFrame.js

@@ -0,0 +1,15 @@
+/**
+ * The frame page of a SvelteKit catalogue: Forgebook's frame, drawing its stories with Svelte and each story's
+ * SvelteKit page. Called by the page the plugin generates from the catalogue's configuration.
+ *
+ * @module
+ */
+import { mountFrame as mountForgebookFrame } from "forgebook/frame";
+import { kitRenderer } from "./kitRenderer.js";
+/**
+ * Shows the story the address names in the given element, drawn with Svelte for a SvelteKit project.
+ *
+ * @param container - the element the story renders into.
+ * @param config - the sources and the languages, as the shell's configuration gives them.
+ */
+export const mountFrame = (container, config) => mountForgebookFrame(container, { ...config, renderer: kitRenderer });

package/dist/src/routeIds.d.ts

@@ -0,0 +1,44 @@
+/**
+ * SvelteKit's route ids, read as SvelteKit reads them: which route a path matches and with which params, and the path a
+ * route id gives with its params filled in.
+ *
+ * @remarks
+ * Pure: ids and paths in, matches out, so it is tested without a page. The ids are the project's own, listed from its
+ * `src/routes` by the Vite plugin, so a story's links and `goto` calls land on the route SvelteKit would choose:
+ * `/blog/[slug]` for `/blog/hello`, with `{ slug: "hello" }`. A param's matcher (`[id=integer]`) is not run, since the
+ * catalogue does not load the project's matchers: any value matches it.
+ *
+ * @module
+ */
+/** A route's params, by name: SvelteKit gives each as one text, a rest param's slashes included. */
+export type RouteParams = Readonly<Record<string, string>>;
+/** A route a path matched: its id and its params. */
+export type RouteMatch = {
+    /** The route's id (`/blog/[slug]`). */
+    readonly id: string;
+    /** The params read from the path. */
+    readonly params: RouteParams;
+};
+/**
+ * The route a path matches among a project's routes, and its params.
+ *
+ * @param routes - the project's route ids.
+ * @param pathname - the path, without the base path (`/blog/hello`).
+ * @returns the match, or none when no route matches.
+ */
+export declare const matchRoute: (routes: readonly string[], pathname: string) => RouteMatch | undefined;
+/**
+ * The path a route id gives with its params filled in, as `resolve` from `$app/paths` writes it: the layout groups
+ * left out, an optional or rest param with no value dropped with its slash.
+ *
+ * @param id - the route's id (`/blog/[slug]`).
+ * @param params - the params, by name.
+ * @returns the path (`/blog/hello`).
+ */
+export declare const filledRoute: (id: string, params: RouteParams) => string;
+/**
+ * Whether a text is a route id rather than a path: it names a param or a layout group.
+ *
+ * @param text - the text.
+ */
+export declare const isRouteId: (text: string) => boolean;

package/dist/src/routeIds.js

@@ -0,0 +1,150 @@
+/**
+ * SvelteKit's route ids, read as SvelteKit reads them: which route a path matches and with which params, and the path a
+ * route id gives with its params filled in.
+ *
+ * @remarks
+ * Pure: ids and paths in, matches out, so it is tested without a page. The ids are the project's own, listed from its
+ * `src/routes` by the Vite plugin, so a story's links and `goto` calls land on the route SvelteKit would choose:
+ * `/blog/[slug]` for `/blog/hello`, with `{ slug: "hello" }`. A param's matcher (`[id=integer]`) is not run, since the
+ * catalogue does not load the project's matchers: any value matches it.
+ *
+ * @module
+ */
+import { byRouteOrder } from "./routeOrder.js";
+/** A param in a route id: `[name]`, `[[name]]`, `[...name]`, each with an optional `=matcher`. */
+const PARAM = /\[(\[)?(\.\.\.)?([A-Za-z_$][\w$]*)(?:=[\w$]+)?\]?\]/g;
+/** A layout group, `(app)`: a folder that is not a segment of the path. */
+const GROUP = /^\(.+\)$/;
+/**
+ * The segments of a route id that are in its paths: its layout groups left out.
+ *
+ * @param id - the route's id (`/(app)/blog/[slug]`).
+ */
+const pathSegments = (id) => id.split("/").filter((segment) => segment !== "" && !GROUP.test(segment));
+/**
+ * A segment's parts: its texts and its params.
+ *
+ * @param segment - a segment of a route id (`[a]-[b]`).
+ */
+const segmentParts = (segment) => {
+    const parts = [];
+    let index = 0;
+    for (const match of segment.matchAll(PARAM)) {
+        if (match.index > index)
+            parts.push({ kind: "text", text: segment.slice(index, match.index) });
+        parts.push({
+            kind: "param",
+            name: match[3] ?? "",
+            isRest: match[2] !== undefined,
+            isOptional: match[1] !== undefined
+        });
+        index = match.index + match[0].length;
+    }
+    if (index < segment.length)
+        parts.push({ kind: "text", text: segment.slice(index) });
+    return parts;
+};
+/**
+ * A text written so a regular expression reads it as itself.
+ *
+ * @param text - the text.
+ */
+const escaped = (text) => text.replace(/[.*+?^${}()|[\]\\/]/g, "\\$&");
+/**
+ * The regular expression one segment of a route id matches, its slash included.
+ *
+ * @param parts - the segment's parts.
+ * @param names - where its params' names are added, in order.
+ */
+const segmentSource = (parts, names) => {
+    const only = parts.length === 1 ? parts[0] : undefined;
+    // a segment that is a rest or optional param alone may be absent from the path, its slash with it
+    if (only?.kind === "param" && (only.isRest || only.isOptional)) {
+        names.push(only.name);
+        return only.isRest ? "(?:/(.*))?" : "(?:/([^/]+))?";
+    }
+    const written = parts.map((part) => {
+        if (part.kind === "text")
+            return escaped(part.text);
+        names.push(part.name);
+        return part.isRest ? "(.*?)" : "([^/]+?)";
+    });
+    return `/${written.join("")}`;
+};
+/**
+ * The regular expression a route id matches paths with, and its params' names in order.
+ *
+ * @param id - the route's id.
+ */
+const routePattern = (id) => {
+    const names = [];
+    const source = pathSegments(id)
+        .map((segment) => segmentSource(segmentParts(segment), names))
+        .join("");
+    return { pattern: new RegExp(`^${source}/?$`), names };
+};
+/**
+ * A path's parts decoded, as SvelteKit decodes a param: a malformed escape left as it is.
+ *
+ * @param value - the text.
+ */
+const decoded = (value) => {
+    try {
+        return decodeURIComponent(value);
+    }
+    catch {
+        return value;
+    }
+};
+/**
+ * The route a path matches among a project's routes, and its params.
+ *
+ * @param routes - the project's route ids.
+ * @param pathname - the path, without the base path (`/blog/hello`).
+ * @returns the match, or none when no route matches.
+ */
+export const matchRoute = (routes, pathname) => {
+    for (const id of [...routes].sort(byRouteOrder)) {
+        const { pattern, names } = routePattern(id);
+        const found = pattern.exec(pathname);
+        if (found === null)
+            continue;
+        const params = {};
+        names.forEach((name, index) => {
+            params[name] = decoded(found[index + 1] ?? "");
+        });
+        return { id, params };
+    }
+    return undefined;
+};
+/**
+ * The path a route id gives with its params filled in, as `resolve` from `$app/paths` writes it: the layout groups
+ * left out, an optional or rest param with no value dropped with its slash.
+ *
+ * @param id - the route's id (`/blog/[slug]`).
+ * @param params - the params, by name.
+ * @returns the path (`/blog/hello`).
+ */
+export const filledRoute = (id, params) => {
+    const segments = pathSegments(id).flatMap((segment) => {
+        const parts = segmentParts(segment);
+        const text = parts
+            .map((part) => {
+            if (part.kind === "text")
+                return part.text;
+            // inserted as given, as SvelteKit's `resolve` does: the address the page builds from it encodes what it must
+            return params[part.name] ?? "";
+        })
+            .join("");
+        return text === "" ? [] : [text];
+    });
+    return `/${segments.join("/")}`;
+};
+/**
+ * Whether a text is a route id rather than a path: it names a param or a layout group.
+ *
+ * @param text - the text.
+ */
+export const isRouteId = (text) => text
+    .split("/")
+    .some((segment) => GROUP.test(segment) || segmentParts(segment).some((part) => part.kind === "param"));

package/dist/src/routeOrder.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The order SvelteKit tries its routes in, so a path two routes match lands on the one SvelteKit would choose.
+ *
+ * @remarks
+ * SvelteKit's own `sort_routes` (MIT), written again in this package's TypeScript: the rules are SvelteKit's to the
+ * letter, since a route chosen otherwise gives a component other params than the app would. A text segment outranks a
+ * param, a param with a matcher one without, a required param an optional one, `[...rest]/x` a plain param; a shallower
+ * path a deeper one; an optional param that is not last is left out of the comparison.
+ *
+ * @module
+ */
+/**
+ * Orders two routes, the one SvelteKit tries first first.
+ *
+ * @param first - a route id.
+ * @param second - another.
+ */
+export declare const byRouteOrder: (first: string, second: string) => number;

package/dist/src/routeOrder.js

@@ -0,0 +1,187 @@
+/**
+ * The order SvelteKit tries its routes in, so a path two routes match lands on the one SvelteKit would choose.
+ *
+ * @remarks
+ * SvelteKit's own `sort_routes` (MIT), written again in this package's TypeScript: the rules are SvelteKit's to the
+ * letter, since a route chosen otherwise gives a component other params than the app would. A text segment outranks a
+ * param, a param with a matcher one without, a required param an optional one, `[...rest]/x` a plain param; a shallower
+ * path a deeper one; an optional param that is not last is left out of the comparison.
+ *
+ * @module
+ */
+/** The part a segment past a route's end compares as. */
+const EMPTY = { type: "static", content: "", isMatched: false };
+/** A param's type, by the character after its `[`: `[[optional]]`, `[...rest]`, any other `[required]`. */
+const PARAM_TYPES = { "[": "optional", ".": "rest" };
+/** A layout group, `(app)`: a folder that is not a segment of the path. */
+const GROUP = /^\(.+\)$/;
+/**
+ * A segment's parts: a text first (empty when the segment opens with a param), then params and texts in turn.
+ *
+ * @param segment - the segment.
+ */
+const partsOf = (segment) => {
+    const parts = [];
+    let index = 0;
+    while (index <= segment.length) {
+        const start = segment.indexOf("[", index);
+        if (start === -1) {
+            parts.push({ type: "static", content: segment.slice(index), isMatched: false });
+            break;
+        }
+        parts.push({ type: "static", content: segment.slice(index, start), isMatched: false });
+        const type = PARAM_TYPES[segment[start + 1] ?? ""] ?? "required";
+        const delimiter = type === "optional" ? "]]" : "]";
+        const end = segment.indexOf(delimiter, start);
+        if (end === -1)
+            return [{ type: "static", content: segment, isMatched: false }];
+        index = end + delimiter.length;
+        const content = segment.slice(start, index);
+        parts.push({ type, content, isMatched: content.includes("=") });
+    }
+    return parts;
+};
+/**
+ * A route id's segments as the sort compares them: an optional param that is not at the end left out, groups too.
+ *
+ * @param id - the route id.
+ */
+const sortedSegments = (id) => id
+    .replace(/\[\[[^\]]+\]\](?!(?:\/\([^/]+\))*$)/g, "")
+    .slice(1)
+    .split("/")
+    .filter((segment) => segment !== "" && !GROUP.test(segment))
+    .map(partsOf);
+/**
+ * Orders two texts as SvelteKit does: by their characters, except that `foobar` outranks `foo`.
+ *
+ * @param first - a text.
+ * @param second - another.
+ */
+const byText = (first, second) => {
+    for (let index = 0;; index += 1) {
+        const a = first[index];
+        const b = second[index];
+        if (a === b) {
+            if (a === undefined)
+                return 0;
+            continue;
+        }
+        if (a === undefined)
+            return 1;
+        if (b === undefined)
+            return -1;
+        return a < b ? -1 : 1;
+    }
+};
+/**
+ * Orders two params at the same place of two routes, or none when they rank the same.
+ *
+ * @param a - the first route's param.
+ * @param b - the second's.
+ * @param nextA - the text after the first's, in its segment or the next.
+ * @param nextB - the text after the second's.
+ */
+const byParam = (a, b, nextA, nextB) => {
+    if (a.type === "rest" || b.type === "rest")
+        return byRest(a, b, nextA, nextB);
+    if (a.isMatched !== b.isMatched)
+        return a.isMatched ? -1 : 1;
+    if (a.type !== b.type) {
+        if (a.type === "required")
+            return -1;
+        if (b.type === "required")
+            return 1;
+    }
+    return undefined;
+};
+/**
+ * Orders two params at the same place when one is a rest param: `[...rest]/x` outranks a plain param, which outranks
+ * a bare `[...rest]`.
+ *
+ * @param a - the first route's param.
+ * @param b - the second's.
+ * @param nextA - the text after the first's.
+ * @param nextB - the text after the second's.
+ */
+const byRest = (a, b, nextA, nextB) => {
+    if (a.type === "rest" && b.type === "rest") {
+        if (nextA !== "" && nextB !== "")
+            return undefined;
+        if (nextA !== "")
+            return -1;
+        return nextB !== "" ? 1 : undefined;
+    }
+    if (a.type === "rest")
+        return nextA !== "" && nextB === "" ? -1 : 1;
+    return nextB !== "" && nextA === "" ? 1 : -1;
+};
+/**
+ * The text that follows a part: the next part of its segment, or the first of the next segment.
+ *
+ * @param segments - the route's segments.
+ * @param segment - the part's segment.
+ * @param part - the part.
+ */
+const nextText = (segments, segment, part) => segments[segment]?.[part + 1]?.content || segments[segment + 1]?.[0]?.content || "";
+/**
+ * Orders two segments at the same place of two routes, or none when they rank the same.
+ *
+ * @param segmentsA - the first route's segments.
+ * @param segmentsB - the second's.
+ * @param index - the segments' place.
+ */
+const bySegment = (segmentsA, segmentsB, index) => {
+    const segmentA = segmentsA[index] ?? [EMPTY];
+    const segmentB = segmentsB[index] ?? [EMPTY];
+    for (let part = 0; part < Math.max(segmentA.length, segmentB.length); part += 1) {
+        const order = byPart(segmentA[part], segmentB[part], part % 2 === 1, () => [
+            nextText(segmentsA, index, part),
+            nextText(segmentsB, index, part)
+        ]);
+        if (order !== undefined)
+            return order;
+    }
+    return undefined;
+};
+/**
+ * Orders two parts at the same place of two segments, or none when they rank the same.
+ *
+ * @param a - the first segment's part, or none past its end.
+ * @param b - the second's.
+ * @param isParam - whether the place holds params: a segment starts with a text, maybe empty, then alternates.
+ * @param nextTexts - the texts after each param.
+ */
+const byPart = (a, b, isParam, nextTexts) => {
+    if (isParam) {
+        if (a === undefined)
+            return -1;
+        if (b === undefined)
+            return 1;
+        const [nextA, nextB] = nextTexts();
+        return byParam(a, b, nextA, nextB);
+    }
+    if (a?.content === b?.content)
+        return undefined;
+    if (a === undefined || a === EMPTY)
+        return -1;
+    if (b === undefined || b === EMPTY)
+        return 1;
+    return byText(a.content, b.content);
+};
+/**
+ * Orders two routes, the one SvelteKit tries first first.
+ *
+ * @param first - a route id.
+ * @param second - another.
+ */
+export const byRouteOrder = (first, second) => {
+    const segmentsA = sortedSegments(first);
+    const segmentsB = sortedSegments(second);
+    for (let index = 0; index < Math.max(segmentsA.length, segmentsB.length); index += 1) {
+        const order = bySegment(segmentsA, segmentsB, index);
+        if (order !== undefined)
+            return order;
+    }
+    return first < second ? 1 : -1;
+};