@shuvi/router 0.0.1-pre.1 → 0.0.1-pre.2

package/esm/matchRoutes.js

@@ -0,0 +1,92 @@
+import { matchPathname } from './matchPathname';
+import { joinPaths, resolvePath } from './utils';
+import { tokensToParser, comparePathParserScore } from './pathParserRanker';
+import { tokenizePath } from './pathTokenizer';
+function matchRouteBranch(branch, pathname) {
+    let routes = branch[1];
+    let matchedPathname = '/';
+    let matchedParams = {};
+    let matches = [];
+    for (let i = 0; i < routes.length; ++i) {
+        let route = routes[i];
+        let remainingPathname = matchedPathname === '/'
+            ? pathname
+            : pathname.slice(matchedPathname.length) || '/';
+        let routeMatch = matchPathname({
+            path: route.path,
+            caseSensitive: route.caseSensitive,
+            end: i === routes.length - 1
+        }, remainingPathname);
+        if (!routeMatch)
+            return null;
+        matchedPathname = joinPaths([matchedPathname, routeMatch.pathname]);
+        matchedParams = Object.assign(Object.assign({}, matchedParams), routeMatch.params);
+        matches.push({
+            route,
+            pathname: matchedPathname,
+            params: Object.freeze(matchedParams)
+        });
+    }
+    return matches;
+}
+export function rankRouteBranches(branches) {
+    if (branches.length <= 1) {
+        return branches;
+    }
+    const normalizedPaths = branches.map((branch, index) => {
+        const [path] = branch;
+        return Object.assign(Object.assign({}, tokensToParser(tokenizePath(path))), { path,
+            index });
+    });
+    normalizedPaths.sort((a, b) => comparePathParserScore(a, b));
+    const newBranches = [];
+    // console.log(
+    //   normalizedPaths
+    //     .map(parser => `${parser.path} -> ${JSON.stringify(parser.score)}`)
+    //     .join('\n')
+    // )
+    normalizedPaths.forEach((branch, newBranchesIndex) => {
+        const { index } = branch;
+        newBranches[newBranchesIndex] = branches[index];
+    });
+    return newBranches;
+}
+function flattenRoutes(routes, branches = [], parentPath = '', parentRoutes = [], parentIndexes = []) {
+    routes.forEach((route, index) => {
+        let path = joinPaths([parentPath, route.path]);
+        let routes = parentRoutes.concat(route);
+        let indexes = parentIndexes.concat(index);
+        // Add the children before adding this route to the array so we traverse the
+        // route tree depth-first and child routes appear before their parents in
+        // the "flattened" version.
+        if (route.children) {
+            flattenRoutes(route.children, branches, path, routes, indexes);
+        }
+        branches.push([path, routes, indexes]);
+    });
+    return branches;
+}
+export function matchRoutes(routes, location, basename = '') {
+    if (typeof location === 'string') {
+        location = resolvePath(location);
+    }
+    let pathname = location.pathname || '/';
+    if (basename) {
+        let base = basename.replace(/^\/*/, '/').replace(/\/+$/, '');
+        if (pathname.startsWith(base)) {
+            pathname = pathname === base ? '/' : pathname.slice(base.length);
+        }
+        else {
+            // Pathname does not start with the basename, no match.
+            return null;
+        }
+    }
+    let branches = flattenRoutes(routes);
+    branches = rankRouteBranches(branches);
+    let matches = null;
+    for (let i = 0; matches == null && i < branches.length; ++i) {
+        // TODO: Match on search, state too?
+        matches = matchRouteBranch(branches[i], pathname);
+    }
+    return matches;
+}

package/esm/pathParserRanker.d.ts

@@ -0,0 +1,65 @@
+import { Token } from './pathTokenizer';
+declare type PathParams = Record<string, string | string[]>;
+export declare type MatchPathParams = {
+    match: string;
+    params: PathParams;
+};
+/**
+ * A param in a url like `/users/:id`
+ */
+export interface PathParserParamKey {
+    name: string;
+    repeatable: boolean;
+    optional: boolean;
+}
+export interface PathParser {
+    /**
+     * The regexp used to match a url
+     */
+    re: RegExp;
+    /**
+     * The score of the parser
+     */
+    score: Array<number[]>;
+    /**
+     * Keys that appeared in the path
+     */
+    keys: PathParserParamKey[];
+    /**
+     * Parses a url and returns the matched params or nul if it doesn't match. An
+     * optional param that isn't preset will be an empty string. A repeatable
+     * param will be an array if there is at least one value.
+     *
+     * @param path - url to parse
+     * @returns a Params object, empty if there are no params. `null` if there is
+     * no match
+     */
+    parse(path: string): MatchPathParams | null;
+    /**
+     * Creates a string version of the url
+     *
+     * @param params - object of params
+     * @returns a url
+     */
+    stringify(params: PathParams): string;
+}
+export declare type PathParserOptions = Pick<_PathParserOptions, 'end' | 'sensitive' | 'strict'>;
+/**
+ * Creates a path parser from an array of Segments (a segment is an array of Tokens)
+ *
+ * @param segments - array of segments returned by tokenizePath
+ * @param extraOptions - optional options for the regexp
+ * @returns a PathParser
+ */
+export declare function tokensToParser(segments: Array<Token[]>, extraOptions?: _PathParserOptions): PathParser;
+/**
+ * Compare function that can be used with `sort` to sort an array of PathParser
+ * @param a - first PathParser
+ * @param b - second PathParser
+ * @returns 0 if both are equal, < 0 if a should be sorted first, > 0 if b, last sort by index
+ */
+declare type PathParserIndex = PathParser & {
+    index: number;
+};
+export declare function comparePathParserScore(a: PathParserIndex, b: PathParserIndex): number;
+export {};

package/esm/pathParserRanker.js

@@ -0,0 +1,223 @@
+// default pattern for a param: non greedy everything but /
+const BASE_PARAM_PATTERN = '[^/]+?';
+const BASE_PATH_PARSER_OPTIONS = {
+    sensitive: false,
+    strict: false,
+    start: true,
+    end: true,
+};
+// Special Regex characters that must be escaped in static tokens
+const REGEX_CHARS_RE = /[.+*?^${}()[\]/\\]/g;
+/**
+ * Creates a path parser from an array of Segments (a segment is an array of Tokens)
+ *
+ * @param segments - array of segments returned by tokenizePath
+ * @param extraOptions - optional options for the regexp
+ * @returns a PathParser
+ */
+export function tokensToParser(segments, extraOptions) {
+    const options = Object.assign({}, BASE_PATH_PARSER_OPTIONS, extraOptions);
+    // the amount of scores is the same as the length of segments except for the root segment "/"
+    let score = [];
+    // the regexp as a string
+    let pattern = options.start ? '^' : '';
+    // extracted keys
+    const keys = [];
+    for (const segment of segments) {
+        // the root segment needs special treatment
+        const segmentScores = segment.length ? [] : [90 /* Root */];
+        // allow trailing slash
+        if (options.strict && !segment.length)
+            pattern += '/';
+        for (let tokenIndex = 0; tokenIndex < segment.length; tokenIndex++) {
+            const token = segment[tokenIndex];
+            // resets the score if we are inside a sub segment /:a-other-:b
+            let subSegmentScore = 40 /* Segment */ +
+                (options.sensitive ? 0.25 /* BonusCaseSensitive */ : 0);
+            if (token.type === 0 /* Static */) {
+                // prepend the slash if we are starting a new segment
+                if (!tokenIndex)
+                    pattern += '/';
+                pattern += token.value.replace(REGEX_CHARS_RE, '\\$&');
+                subSegmentScore += 40 /* Static */;
+            }
+            else if (token.type === 1 /* Param */) {
+                const { value, repeatable, optional, regexp } = token;
+                keys.push({
+                    name: value,
+                    repeatable,
+                    optional,
+                });
+                const re = regexp ? regexp : BASE_PARAM_PATTERN;
+                // the user provided a custom regexp /:id(\\d+)
+                if (re !== BASE_PARAM_PATTERN) {
+                    subSegmentScore += 10 /* BonusCustomRegExp */;
+                    // make sure the regexp is valid before using it
+                    try {
+                        new RegExp(`(${re})`);
+                    }
+                    catch (err) {
+                        throw new Error(`Invalid custom RegExp for param "${value}" (${re}): ` +
+                            err.message);
+                    }
+                }
+                // when we repeat we must take care of the repeating leading slash
+                let subPattern = repeatable ? `((?:${re})(?:/(?:${re}))*)` : `(${re})`;
+                // prepend the slash if we are starting a new segment
+                if (!tokenIndex)
+                    subPattern =
+                        // avoid an optional / if there are more segments e.g. /:p?-static
+                        // or /:p?-:p2
+                        optional && segment.length < 2
+                            ? `(?:/${subPattern})`
+                            : '/' + subPattern;
+                if (optional)
+                    subPattern += '?';
+                pattern += subPattern;
+                if (!options.end)
+                    pattern += '(?=\/|$)';
+                subSegmentScore += 20 /* Dynamic */;
+                if (optional)
+                    subSegmentScore += -8 /* BonusOptional */;
+                if (repeatable)
+                    subSegmentScore += -20 /* BonusRepeatable */;
+                if (re === '.*')
+                    subSegmentScore += -50 /* BonusWildcard */;
+            }
+            segmentScores.push(subSegmentScore);
+        }
+        // an empty array like /home/ -> [[{home}], []]
+        // if (!segment.length) pattern += '/'
+        score.push(segmentScores);
+    }
+    // only apply the strict bonus to the last score
+    if (options.strict && options.end) {
+        const i = score.length - 1;
+        score[i][score[i].length - 1] += 0.7000000000000001 /* BonusStrict */;
+    }
+    // TODO: dev only warn double trailing slash
+    if (!options.strict)
+        pattern += '/*?';
+    if (options.end)
+        pattern += '$';
+    // allow paths like /dynamic to only match dynamic or dynamic/... but not dynamic_something_else
+    else if (options.strict)
+        pattern += '(?:/*|$)';
+    const re = new RegExp(pattern, options.sensitive ? '' : 'i');
+    function parse(path) {
+        const match = path.match(re);
+        const params = {};
+        if (!match)
+            return null;
+        for (let i = 1; i < match.length; i++) {
+            const value = match[i] || '';
+            const key = keys[i - 1];
+            params[key.name] = value && key.repeatable ? value.split('/') : value;
+        }
+        return {
+            match: match[0],
+            params,
+        };
+    }
+    function stringify(params) {
+        let path = '';
+        // for optional parameters to allow to be empty
+        let avoidDuplicatedSlash = false;
+        for (const segment of segments) {
+            if (!avoidDuplicatedSlash || !path.endsWith('/'))
+                path += '/';
+            avoidDuplicatedSlash = false;
+            for (const token of segment) {
+                if (token.type === 0 /* Static */) {
+                    path += token.value;
+                }
+                else if (token.type === 1 /* Param */) {
+                    const { value, repeatable, optional } = token;
+                    const param = params[value];
+                    if (Array.isArray(param) && !repeatable)
+                        throw new Error(`Provided param "${value}" is an array but it is not repeatable (* or + modifiers)`);
+                    if (param === undefined && !optional) {
+                        throw new Error(`Missing required param "${value}"`);
+                    }
+                    const text = Array.isArray(param) ? param.join('/') : (param || '');
+                    if (!text && optional) {
+                        // if we have more than one optional param like /:a?-static we
+                        // don't need to care about the optional param
+                        if (segment.length < 2) {
+                            // remove the last slash as we could be at the end
+                            if (path.endsWith('/'))
+                                path = path.slice(0, -1);
+                            // do not append a slash on the next iteration
+                            else
+                                avoidDuplicatedSlash = true;
+                        }
+                    }
+                    path += text;
+                }
+            }
+        }
+        return path;
+    }
+    return {
+        re,
+        score,
+        keys,
+        parse,
+        stringify,
+    };
+}
+/**
+ * Compares an array of numbers as used in PathParser.score and returns a
+ * number. This function can be used to `sort` an array
+ * @param a - first array of numbers
+ * @param b - second array of numbers
+ * @returns 0 if both are equal, < 0 if a should be sorted first, > 0 if b
+ * should be sorted first
+ */
+function compareScoreArray(a, b) {
+    let i = 0;
+    while (i < a.length && i < b.length) {
+        const diff = b[i] - a[i];
+        // only keep going if diff === 0
+        if (diff)
+            return diff;
+        i++;
+    }
+    // if the last subsegment was Static, the shorter segments should be sorted first
+    // otherwise sort the longest segment first
+    if (a.length < b.length) {
+        return a.length === 1 && a[0] === 40 /* Static */ + 40 /* Segment */
+            ? -1
+            : 1;
+    }
+    else if (a.length > b.length) {
+        return b.length === 1 && b[0] === 40 /* Static */ + 40 /* Segment */
+            ? 1
+            : -1;
+    }
+    return 0;
+}
+export function comparePathParserScore(a, b) {
+    let i = 0;
+    const aScore = a.score;
+    const bScore = b.score;
+    while (i < aScore.length && i < bScore.length) {
+        const comp = compareScoreArray(aScore[i], bScore[i]);
+        // do not return if both are equal
+        if (comp)
+            return comp;
+        i++;
+    }
+    // if a and b share the same score entries but b has more, sort b first
+    const lengthDiff = bScore.length - aScore.length;
+    if (lengthDiff)
+        return lengthDiff;
+    // this is the ternary version
+    // return aScore.length < bScore.length
+    //   ? 1
+    //   : aScore.length > bScore.length
+    //   ? -1
+    //   : 0
+    //
+    return a.index - b.index;
+}

package/esm/pathTokenizer.d.ts

@@ -0,0 +1,23 @@
+export declare const enum TokenType {
+    Static = 0,
+    Param = 1,
+    Group = 2
+}
+interface TokenStatic {
+    type: TokenType.Static;
+    value: string;
+}
+interface TokenParam {
+    type: TokenType.Param;
+    regexp?: string;
+    value: string;
+    optional: boolean;
+    repeatable: boolean;
+}
+interface TokenGroup {
+    type: TokenType.Group;
+    value: Exclude<Token, TokenGroup>[];
+}
+export declare type Token = TokenStatic | TokenParam | TokenGroup;
+export declare function tokenizePath(path: string): Array<Token[]>;
+export {};

package/esm/pathTokenizer.js

@@ -0,0 +1,149 @@
+const ROOT_TOKEN = {
+    type: 0 /* Static */,
+    value: ''
+};
+const VALID_PARAM_RE = /[a-zA-Z0-9_]/;
+// After some profiling, the cache seems to be unnecessary because tokenizePath
+// (the slowest part of adding a route) is very fast
+// const tokenCache = new Map<string, Token[][]>()
+export function tokenizePath(path) {
+    if (!path)
+        return [[]];
+    if (path === '/')
+        return [[ROOT_TOKEN]];
+    if (!path.startsWith('/')) {
+        path = path.replace(/^\/*/, '/'); // Make sure it has a leading /
+    }
+    // if (tokenCache.has(path)) return tokenCache.get(path)!
+    function crash(message) {
+        throw new Error(`ERR (${state})/"${buffer}": ${message}`);
+    }
+    let state = 0 /* Static */;
+    let previousState = state;
+    const tokens = [];
+    // the segment will always be valid because we get into the initial state
+    // with the leading /
+    let segment;
+    function finalizeSegment() {
+        if (segment)
+            tokens.push(segment);
+        segment = [];
+    }
+    // index on the path
+    let i = 0;
+    // char at index
+    let char;
+    // buffer of the value read
+    let buffer = '';
+    // custom regexp for a param
+    let customRe = '';
+    function consumeBuffer() {
+        if (!buffer)
+            return;
+        if (state === 0 /* Static */) {
+            segment.push({
+                type: 0 /* Static */,
+                value: buffer
+            });
+        }
+        else if (state === 1 /* Param */ ||
+            state === 2 /* ParamRegExp */ ||
+            state === 3 /* ParamRegExpEnd */) {
+            if (segment.length > 1 && (char === '*' || char === '+'))
+                crash(`A repeatable param (${buffer}) must be alone in its segment. `);
+            segment.push({
+                type: 1 /* Param */,
+                value: buffer,
+                regexp: customRe,
+                repeatable: char === '*' || char === '+',
+                optional: char === '*' || char === '?'
+            });
+        }
+        else {
+            crash('Invalid state to consume buffer');
+        }
+        buffer = '';
+    }
+    function addCharToBuffer() {
+        buffer += char;
+    }
+    while (i < path.length) {
+        char = path[i++];
+        if (char === '\\' && state !== 2 /* ParamRegExp */) {
+            previousState = state;
+            state = 4 /* EscapeNext */;
+            continue;
+        }
+        switch (state) {
+            case 0 /* Static */:
+                if (char === '/') {
+                    if (buffer) {
+                        consumeBuffer();
+                    }
+                    finalizeSegment();
+                }
+                else if (char === ':') {
+                    consumeBuffer();
+                    state = 1 /* Param */;
+                }
+                else {
+                    addCharToBuffer();
+                }
+                break;
+            case 4 /* EscapeNext */:
+                addCharToBuffer();
+                state = previousState;
+                break;
+            case 1 /* Param */:
+                if (char === '(') {
+                    state = 2 /* ParamRegExp */;
+                }
+                else if (VALID_PARAM_RE.test(char)) {
+                    addCharToBuffer();
+                }
+                else {
+                    consumeBuffer();
+                    state = 0 /* Static */;
+                    // go back one character if we were not modifying
+                    if (char !== '*' && char !== '?' && char !== '+')
+                        i--;
+                }
+                break;
+            case 2 /* ParamRegExp */:
+                // TODO: is it worth handling nested regexp? like :p(?:prefix_([^/]+)_suffix)
+                // it already works by escaping the closing )
+                // https://paths.esm.dev/?p=AAMeJbiAwQEcDKbAoAAkP60PG2R6QAvgNaA6AFACM2ABuQBB#
+                // is this really something people need since you can also write
+                // /prefix_:p()_suffix
+                if (char === ')') {
+                    // handle the escaped )
+                    if (customRe[customRe.length - 1] == '\\')
+                        customRe = customRe.slice(0, -1) + char;
+                    else
+                        state = 3 /* ParamRegExpEnd */;
+                }
+                else {
+                    customRe += char;
+                }
+                break;
+            case 3 /* ParamRegExpEnd */:
+                // same as finalizing a param
+                consumeBuffer();
+                state = 0 /* Static */;
+                // go back one character if we were not modifying
+                if (char !== '*' && char !== '?' && char !== '+')
+                    i--;
+                customRe = '';
+                break;
+            default:
+                crash('Unknown state');
+                break;
+        }
+    }
+    if (state === 2 /* ParamRegExp */)
+        crash(`Unfinished custom RegExp for param "${buffer}"`);
+    consumeBuffer();
+    finalizeSegment();
+    // tokenCache.set(path, tokens)
+    return tokens;
+}

package/esm/router.d.ts

@@ -0,0 +1,10 @@
+import { IRouter, IRouteRecord, IPartialRouteRecord } from './types';
+import History from './history/base';
+interface IRouterOptions<RouteRecord extends IPartialRouteRecord> {
+    history: History;
+    routes: RouteRecord[];
+    caseSensitive?: boolean;
+    basename?: string;
+}
+export declare const createRouter: <RouteRecord extends IRouteRecord<any>>(options: IRouterOptions<RouteRecord>) => IRouter<RouteRecord>;
+export {};