@shuvi/router 2.0.0-dev.30 → 2.0.0-dev.32

package/esm/index.d.ts

@@ -1,6 +1,6 @@
 export { createRoutesFromArray } from './createRoutesFromArray';
 export { matchPathname, matchStringify } from './matchPathname';
-export { matchRoutes, IRouteBaseObject, rankRouteBranches } from './matchRoutes';
+export { matchRoutes, IRouteBaseObject, rankRouteBranches, IMatchRoutesOptions, getTrailingSlashRedirectPath } from './matchRoutes';
 export { pathToString, parseQuery, resolvePath, joinPaths, createLocation } from './utils';
 export * from './types';
 export * from './history';

package/esm/index.js

@@ -1,6 +1,6 @@
 export { createRoutesFromArray } from './createRoutesFromArray';
 export { matchPathname, matchStringify } from './matchPathname';
-export { matchRoutes, rankRouteBranches } from './matchRoutes';
+export { matchRoutes, rankRouteBranches, getTrailingSlashRedirectPath } from './matchRoutes';
 export { pathToString, parseQuery, resolvePath, joinPaths, createLocation } from './utils';
 export * from './types';
 export * from './history';

package/esm/matchPathname.js

@@ -27,9 +27,9 @@ export function matchPathname(pattern, pathname) {
     if (typeof pattern === 'string') {
         pattern = { path: pattern };
     }
-    const { path, caseSensitive = false, end = true } = pattern;
+    const { path, caseSensitive = false, end = true, strict = false } = pattern;
     const pathParser = tokensToParser(tokenizePath(path), {
-        strict: false,
+        strict,
         end,
         sensitive: caseSensitive
     });

package/esm/matchRoutes.d.ts

@@ -3,4 +3,16 @@ export interface IRouteBaseObject<Element = any> extends Omit<IRouteRecord<Eleme
     children?: IRouteBaseObject<Element>[];
 }
 export declare function rankRouteBranches<T extends [string, ...any[]]>(branches: T[]): T[];
-export declare function matchRoutes<T extends IRouteBaseObject>(routes: T[], location: string | PartialLocation, basename?: string): IRouteMatch<T>[] | null;
+export interface IMatchRoutesOptions {
+    strict?: boolean;
+}
+export declare function matchRoutes<T extends IRouteBaseObject>(routes: T[], location: string | PartialLocation, basename?: string, options?: IMatchRoutesOptions): IRouteMatch<T>[] | null;
+/**
+ * When strict trailing-slash routing is enabled, a pathname that does not
+ * match any route may be a non-canonical variant (e.g. `/foo/` for a route
+ * declared as `/foo`). This computes the canonical alternative by stripping
+ * a single trailing slash (or adding one when the route is slash-suffixed) and
+ * returns it so the caller can issue a redirect. Returns `null` when the
+ * pathname is already canonical (`/` or no trailing slash to strip).
+ */
+export declare function getTrailingSlashRedirectPath(pathname: string): string | null;

package/esm/matchRoutes.js

@@ -2,7 +2,7 @@ import { matchPathname } from './matchPathname';
 import { joinPaths, normalizeBase, resolvePath, stripBase } from './utils';
 import { tokensToParser, comparePathParserScore } from './pathParserRanker';
 import { tokenizePath } from './pathTokenizer';
-function matchRouteBranch(branch, pathname) {
+function matchRouteBranch(branch, pathname, strict = false) {
     let routes = branch[1];
     let matchedPathname = '/';
     let matchedParams = {};
@@ -15,7 +15,8 @@ function matchRouteBranch(branch, pathname) {
         let routeMatch = matchPathname({
             path: route.path,
             caseSensitive: route.caseSensitive,
-            end: i === routes.length - 1
+            end: i === routes.length - 1,
+            strict
         }, remainingPathname);
         if (!routeMatch)
             return null;
@@ -70,7 +71,8 @@ function flattenRoutes(routes, branches = [], parentPath = '', parentRoutes = []
     });
     return branches;
 }
-export function matchRoutes(routes, location, basename = '') {
+export function matchRoutes(routes, location, basename = '', options = {}) {
+    const { strict = false } = options;
     if (typeof location === 'string') {
         location = resolvePath(location);
     }
@@ -90,7 +92,26 @@ export function matchRoutes(routes, location, basename = '') {
     let matches = null;
     for (let i = 0; matches == null && i < branches.length; ++i) {
         // TODO: Match on search, state too?
-        matches = matchRouteBranch(branches[i], pathname);
+        matches = matchRouteBranch(branches[i], pathname, strict);
     }
     return matches;
 }
+/**
+ * When strict trailing-slash routing is enabled, a pathname that does not
+ * match any route may be a non-canonical variant (e.g. `/foo/` for a route
+ * declared as `/foo`). This computes the canonical alternative by stripping
+ * a single trailing slash (or adding one when the route is slash-suffixed) and
+ * returns it so the caller can issue a redirect. Returns `null` when the
+ * pathname is already canonical (`/` or no trailing slash to strip).
+ */
+export function getTrailingSlashRedirectPath(pathname) {
+    if (pathname === '/' || pathname === '') {
+        return null;
+    }
+    // strip a single trailing slash
+    if (pathname.length > 1 && pathname.endsWith('/')) {
+        return pathname.slice(0, -1);
+    }
+    // otherwise the non-canonical variant is the slash-suffixed form
+    return pathname + '/';
+}

package/esm/router.d.ts

@@ -4,6 +4,13 @@ interface IRouterOptions<RouteRecord extends IPartialRouteRecord> {
     history: History;
     routes: RouteRecord[];
     caseSensitive?: boolean;
+    /**
+     * When enabled, path matching treats trailing slashes as significant.
+    * A request whose pathname does not match any route but differs only by a
+    * trailing slash from a route that does match will be redirected (308) to
+    * the canonical URL. Defaults to false (legacy loose matching).
+     */
+    strictTrailingSlash?: boolean;
 }
 export declare const createRouter: <RouteRecord extends IRouteRecord>(options: IRouterOptions<RouteRecord>) => IRouter<RouteRecord>;
 export {};

package/esm/router.js

@@ -1,5 +1,5 @@
 import { createDefer } from '@shuvi/utils/defer';
-import { matchRoutes } from './matchRoutes';
+import { matchRoutes, getTrailingSlashRedirectPath } from './matchRoutes';
 import { createRoutesFromArray } from './createRoutesFromArray';
 import { createEvents, resolvePath } from './utils';
 import { isError, isFunction } from './utils/error';
@@ -17,7 +17,7 @@ const START = {
     redirected: false
 };
 class Router {
-    constructor({ history, routes }) {
+    constructor({ history, routes, strictTrailingSlash = false }) {
         this._pending = null;
         this._cancleHandler = null;
         this._ready = false;
@@ -73,8 +73,8 @@ class Router {
             return this._history.resolve(to, from);
         };
         this.match = (to) => {
-            const { _routes: routes } = this;
-            const matches = matchRoutes(routes, to);
+            const { _routes: routes, _strictTrailingSlash: strict } = this;
+            const matches = matchRoutes(routes, to, undefined, { strict });
             return matches || [];
         };
         this.replaceRoutes = (routes) => {
@@ -101,6 +101,7 @@ class Router {
         };
         this._history = history;
         this._routes = createRoutesFromArray(routes);
+        this._strictTrailingSlash = strictTrailingSlash;
         this._current = START;
         this._history.doTransition = this._doTransition.bind(this);
     }
@@ -119,6 +120,9 @@ class Router {
     get basename() {
         return this._history.basename;
     }
+    get strictTrailingSlash() {
+        return this._strictTrailingSlash;
+    }
     /*
       The Full Navigation Resolution Flow for shuvi/router
       1. Navigation triggered.
@@ -140,6 +144,16 @@ class Router {
                 redirectedFrom: redirectedFrom || nextRoute
             });
         }
+        // Strict trailing-slash routing: redirect to the canonical URL when the
+        // current pathname only differs by a trailing slash from a real route.
+        const trailingSlashRedirect = nextRoute.redirect;
+        if (trailingSlashRedirect) {
+            const transitionMethod = isReplace || isInitialNavigation ? 'replace' : 'push';
+            return this._history[transitionMethod](trailingSlashRedirect.path, {
+                redirectedFrom: redirectedFrom || nextRoute,
+                state: { status: trailingSlashRedirect.status }
+            });
+        }
         const routeContext = new Map();
         const queue = skipGuards
             ? []
@@ -270,8 +284,21 @@ class Router {
         const matches = this.match(to);
         const params = matches.length ? matches[matches.length - 1].params : {};
         const parsedPath = resolvePath(to);
-        return Object.assign(Object.assign({ matches,
+        const route = Object.assign(Object.assign({ matches,
             params }, parsedPath), { key: '', state: null });
+        // Strict trailing-slash routing: when the pathname does not match but a
+        // canonical variant (differing only by a trailing slash) does, surface a
+        // redirect so the transition layer can redirect to the canonical URL.
+        if (this._strictTrailingSlash && !matches.length) {
+            const canonical = getTrailingSlashRedirectPath(parsedPath.pathname || '/');
+            if (canonical) {
+                const rematched = matchRoutes(this._routes, Object.assign(Object.assign({}, parsedPath), { pathname: canonical }), undefined, { strict: true });
+                if (rematched && rematched.length) {
+                    route.redirect = { path: canonical, status: 308 };
+                }
+            }
+        }
+        return route;
     }
 }
 export const createRouter = (options) => {

package/esm/types/router.d.ts

@@ -44,6 +44,7 @@ export type IPathPattern = string | {
     path: string;
     caseSensitive?: boolean;
     end?: boolean;
+    strict?: boolean;
 };
 export interface IPathMatch {
     path: string;
@@ -57,6 +58,16 @@ export interface IRoute<RouteRecord extends IRouteRecord = IRouteRecord> extends
     matches: IRouteMatch<RouteRecord>[];
     redirected?: boolean;
     key: string;
+    /**
+     * Set when strict trailing-slash routing resolves a canonical URL for the
+     * current (non-matching) pathname. Carries the redirect target + status so
+     * the transition layer can issue a redirect instead of falling through to
+     * the not-found page.
+     */
+    redirect?: {
+        path: string;
+        status: number;
+    };
 }
 export interface IRouter<RouteRecord extends {
     path: string;
@@ -64,6 +75,7 @@ export interface IRouter<RouteRecord extends {
     current: IRoute<RouteRecord>;
     action: History['action'];
     basename: string;
+    strictTrailingSlash: boolean;
     push(to: PathRecord, state?: any): void;
     replace(to: PathRecord, state?: any): void;
     go: History['go'];

package/lib/index.d.ts

@@ -1,6 +1,6 @@
 export { createRoutesFromArray } from './createRoutesFromArray';
 export { matchPathname, matchStringify } from './matchPathname';
-export { matchRoutes, IRouteBaseObject, rankRouteBranches } from './matchRoutes';
+export { matchRoutes, IRouteBaseObject, rankRouteBranches, IMatchRoutesOptions, getTrailingSlashRedirectPath } from './matchRoutes';
 export { pathToString, parseQuery, resolvePath, joinPaths, createLocation } from './utils';
 export * from './types';
 export * from './history';

package/lib/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createLocation = exports.joinPaths = exports.resolvePath = exports.parseQuery = exports.pathToString = exports.rankRouteBranches = exports.matchRoutes = exports.matchStringify = exports.matchPathname = exports.createRoutesFromArray = void 0;
+exports.createLocation = exports.joinPaths = exports.resolvePath = exports.parseQuery = exports.pathToString = exports.getTrailingSlashRedirectPath = exports.rankRouteBranches = exports.matchRoutes = exports.matchStringify = exports.matchPathname = exports.createRoutesFromArray = void 0;
 var createRoutesFromArray_1 = require("./createRoutesFromArray");
 Object.defineProperty(exports, "createRoutesFromArray", { enumerable: true, get: function () { return createRoutesFromArray_1.createRoutesFromArray; } });
 var matchPathname_1 = require("./matchPathname");
@@ -23,6 +23,7 @@ Object.defineProperty(exports, "matchStringify", { enumerable: true, get: functi
 var matchRoutes_1 = require("./matchRoutes");
 Object.defineProperty(exports, "matchRoutes", { enumerable: true, get: function () { return matchRoutes_1.matchRoutes; } });
 Object.defineProperty(exports, "rankRouteBranches", { enumerable: true, get: function () { return matchRoutes_1.rankRouteBranches; } });
+Object.defineProperty(exports, "getTrailingSlashRedirectPath", { enumerable: true, get: function () { return matchRoutes_1.getTrailingSlashRedirectPath; } });
 var utils_1 = require("./utils");
 Object.defineProperty(exports, "pathToString", { enumerable: true, get: function () { return utils_1.pathToString; } });
 Object.defineProperty(exports, "parseQuery", { enumerable: true, get: function () { return utils_1.parseQuery; } });

package/lib/matchPathname.js

@@ -31,9 +31,9 @@ function matchPathname(pattern, pathname) {
     if (typeof pattern === 'string') {
         pattern = { path: pattern };
     }
-    const { path, caseSensitive = false, end = true } = pattern;
+    const { path, caseSensitive = false, end = true, strict = false } = pattern;
     const pathParser = (0, pathParserRanker_1.tokensToParser)((0, pathTokenizer_1.tokenizePath)(path), {
-        strict: false,
+        strict,
         end,
         sensitive: caseSensitive
     });

package/lib/matchRoutes.d.ts

@@ -3,4 +3,16 @@ export interface IRouteBaseObject<Element = any> extends Omit<IRouteRecord<Eleme
     children?: IRouteBaseObject<Element>[];
 }
 export declare function rankRouteBranches<T extends [string, ...any[]]>(branches: T[]): T[];
-export declare function matchRoutes<T extends IRouteBaseObject>(routes: T[], location: string | PartialLocation, basename?: string): IRouteMatch<T>[] | null;
+export interface IMatchRoutesOptions {
+    strict?: boolean;
+}
+export declare function matchRoutes<T extends IRouteBaseObject>(routes: T[], location: string | PartialLocation, basename?: string, options?: IMatchRoutesOptions): IRouteMatch<T>[] | null;
+/**
+ * When strict trailing-slash routing is enabled, a pathname that does not
+ * match any route may be a non-canonical variant (e.g. `/foo/` for a route
+ * declared as `/foo`). This computes the canonical alternative by stripping
+ * a single trailing slash (or adding one when the route is slash-suffixed) and
+ * returns it so the caller can issue a redirect. Returns `null` when the
+ * pathname is already canonical (`/` or no trailing slash to strip).
+ */
+export declare function getTrailingSlashRedirectPath(pathname: string): string | null;

package/lib/matchRoutes.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.rankRouteBranches = rankRouteBranches;
 exports.matchRoutes = matchRoutes;
+exports.getTrailingSlashRedirectPath = getTrailingSlashRedirectPath;
 const matchPathname_1 = require("./matchPathname");
 const utils_1 = require("./utils");
 const pathParserRanker_1 = require("./pathParserRanker");
 const pathTokenizer_1 = require("./pathTokenizer");
-function matchRouteBranch(branch, pathname) {
+function matchRouteBranch(branch, pathname, strict = false) {
     let routes = branch[1];
     let matchedPathname = '/';
     let matchedParams = {};
@@ -19,7 +20,8 @@ function matchRouteBranch(branch, pathname) {
         let routeMatch = (0, matchPathname_1.matchPathname)({
             path: route.path,
             caseSensitive: route.caseSensitive,
-            end: i === routes.length - 1
+            end: i === routes.length - 1,
+            strict
         }, remainingPathname);
         if (!routeMatch)
             return null;
@@ -74,7 +76,8 @@ function flattenRoutes(routes, branches = [], parentPath = '', parentRoutes = []
     });
     return branches;
 }
-function matchRoutes(routes, location, basename = '') {
+function matchRoutes(routes, location, basename = '', options = {}) {
+    const { strict = false } = options;
     if (typeof location === 'string') {
         location = (0, utils_1.resolvePath)(location);
     }
@@ -94,7 +97,26 @@ function matchRoutes(routes, location, basename = '') {
     let matches = null;
     for (let i = 0; matches == null && i < branches.length; ++i) {
         // TODO: Match on search, state too?
-        matches = matchRouteBranch(branches[i], pathname);
+        matches = matchRouteBranch(branches[i], pathname, strict);
     }
     return matches;
 }
+/**
+ * When strict trailing-slash routing is enabled, a pathname that does not
+ * match any route may be a non-canonical variant (e.g. `/foo/` for a route
+ * declared as `/foo`). This computes the canonical alternative by stripping
+ * a single trailing slash (or adding one when the route is slash-suffixed) and
+ * returns it so the caller can issue a redirect. Returns `null` when the
+ * pathname is already canonical (`/` or no trailing slash to strip).
+ */
+function getTrailingSlashRedirectPath(pathname) {
+    if (pathname === '/' || pathname === '') {
+        return null;
+    }
+    // strip a single trailing slash
+    if (pathname.length > 1 && pathname.endsWith('/')) {
+        return pathname.slice(0, -1);
+    }
+    // otherwise the non-canonical variant is the slash-suffixed form
+    return pathname + '/';
+}

package/lib/router.d.ts

@@ -4,6 +4,13 @@ interface IRouterOptions<RouteRecord extends IPartialRouteRecord> {
     history: History;
     routes: RouteRecord[];
     caseSensitive?: boolean;
+    /**
+     * When enabled, path matching treats trailing slashes as significant.
+    * A request whose pathname does not match any route but differs only by a
+    * trailing slash from a route that does match will be redirected (308) to
+    * the canonical URL. Defaults to false (legacy loose matching).
+     */
+    strictTrailingSlash?: boolean;
 }
 export declare const createRouter: <RouteRecord extends IRouteRecord>(options: IRouterOptions<RouteRecord>) => IRouter<RouteRecord>;
 export {};

package/lib/router.js

@@ -20,7 +20,7 @@ const START = {
     redirected: false
 };
 class Router {
-    constructor({ history, routes }) {
+    constructor({ history, routes, strictTrailingSlash = false }) {
         this._pending = null;
         this._cancleHandler = null;
         this._ready = false;
@@ -76,8 +76,8 @@ class Router {
             return this._history.resolve(to, from);
         };
         this.match = (to) => {
-            const { _routes: routes } = this;
-            const matches = (0, matchRoutes_1.matchRoutes)(routes, to);
+            const { _routes: routes, _strictTrailingSlash: strict } = this;
+            const matches = (0, matchRoutes_1.matchRoutes)(routes, to, undefined, { strict });
             return matches || [];
         };
         this.replaceRoutes = (routes) => {
@@ -104,6 +104,7 @@ class Router {
         };
         this._history = history;
         this._routes = (0, createRoutesFromArray_1.createRoutesFromArray)(routes);
+        this._strictTrailingSlash = strictTrailingSlash;
         this._current = START;
         this._history.doTransition = this._doTransition.bind(this);
     }
@@ -122,6 +123,9 @@ class Router {
     get basename() {
         return this._history.basename;
     }
+    get strictTrailingSlash() {
+        return this._strictTrailingSlash;
+    }
     /*
       The Full Navigation Resolution Flow for shuvi/router
       1. Navigation triggered.
@@ -143,6 +147,16 @@ class Router {
                 redirectedFrom: redirectedFrom || nextRoute
             });
         }
+        // Strict trailing-slash routing: redirect to the canonical URL when the
+        // current pathname only differs by a trailing slash from a real route.
+        const trailingSlashRedirect = nextRoute.redirect;
+        if (trailingSlashRedirect) {
+            const transitionMethod = isReplace || isInitialNavigation ? 'replace' : 'push';
+            return this._history[transitionMethod](trailingSlashRedirect.path, {
+                redirectedFrom: redirectedFrom || nextRoute,
+                state: { status: trailingSlashRedirect.status }
+            });
+        }
         const routeContext = new Map();
         const queue = skipGuards
             ? []
@@ -273,8 +287,21 @@ class Router {
         const matches = this.match(to);
         const params = matches.length ? matches[matches.length - 1].params : {};
         const parsedPath = (0, utils_1.resolvePath)(to);
-        return Object.assign(Object.assign({ matches,
+        const route = Object.assign(Object.assign({ matches,
             params }, parsedPath), { key: '', state: null });
+        // Strict trailing-slash routing: when the pathname does not match but a
+        // canonical variant (differing only by a trailing slash) does, surface a
+        // redirect so the transition layer can redirect to the canonical URL.
+        if (this._strictTrailingSlash && !matches.length) {
+            const canonical = (0, matchRoutes_1.getTrailingSlashRedirectPath)(parsedPath.pathname || '/');
+            if (canonical) {
+                const rematched = (0, matchRoutes_1.matchRoutes)(this._routes, Object.assign(Object.assign({}, parsedPath), { pathname: canonical }), undefined, { strict: true });
+                if (rematched && rematched.length) {
+                    route.redirect = { path: canonical, status: 308 };
+                }
+            }
+        }
+        return route;
     }
 }
 const createRouter = (options) => {

package/lib/types/router.d.ts

@@ -44,6 +44,7 @@ export type IPathPattern = string | {
     path: string;
     caseSensitive?: boolean;
     end?: boolean;
+    strict?: boolean;
 };
 export interface IPathMatch {
     path: string;
@@ -57,6 +58,16 @@ export interface IRoute<RouteRecord extends IRouteRecord = IRouteRecord> extends
     matches: IRouteMatch<RouteRecord>[];
     redirected?: boolean;
     key: string;
+    /**
+     * Set when strict trailing-slash routing resolves a canonical URL for the
+     * current (non-matching) pathname. Carries the redirect target + status so
+     * the transition layer can issue a redirect instead of falling through to
+     * the not-found page.
+     */
+    redirect?: {
+        path: string;
+        status: number;
+    };
 }
 export interface IRouter<RouteRecord extends {
     path: string;
@@ -64,6 +75,7 @@ export interface IRouter<RouteRecord extends {
     current: IRoute<RouteRecord>;
     action: History['action'];
     basename: string;
+    strictTrailingSlash: boolean;
     push(to: PathRecord, state?: any): void;
     replace(to: PathRecord, state?: any): void;
     go: History['go'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuvi/router",
-  "version": "2.0.0-dev.30",
+  "version": "2.0.0-dev.32",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/shuvijs/shuvi.git",
@@ -28,7 +28,7 @@
     "node": ">= 16.0.0"
   },
   "dependencies": {
-    "@shuvi/utils": "2.0.0-dev.30",
+    "@shuvi/utils": "2.0.0-dev.32",
     "query-string": "6.13.8"
   }
 }