@esmx/router 3.0.0-rc.12

package/src/utils/encoding.ts

@@ -0,0 +1,153 @@
+import { warn } from './warn';
+
+/**
+ * Encoding Rules (␣ = Space)
+ * - Path: ␣ " < > # ? { }
+ * - Query: ␣ " < > # & =
+ * - Hash: ␣ " < > `
+ *
+ * On top of that, the RFC3986 (https://tools.ietf.org/html/rfc3986#section-2.2)
+ * defines some extra characters to be encoded. Most browsers do not encode them
+ * in encodeURI https://github.com/whatwg/url/issues/369, so it may be safer to
+ * also encode `!'()*`. Leaving un-encoded only ASCII alphanumeric(`a-zA-Z0-9`)
+ * plus `-._~`. This extra safety should be applied to query by patching the
+ * string returned by encodeURIComponent encodeURI also encodes `[\]^`. `\`
+ * should be encoded to avoid ambiguity. Browsers (IE, FF, C) transform a `\`
+ * into a `/` if directly typed in. The _backtick_ (`````) should also be
+ * encoded everywhere because some browsers like FF encode it when directly
+ * written while others don't. Safari and IE don't encode ``"<>{}``` in hash.
+ */
+// const EXTRA_RESERVED_RE = /[!'()*]/g
+// const encodeReservedReplacer = (c: string) => '%' + c.charCodeAt(0).toString(16)
+
+const HASH_RE = /#/g; // %23
+const AMPERSAND_RE = /&/g; // %26
+const SLASH_RE = /\//g; // %2F
+const EQUAL_RE = /=/g; // %3D
+const IM_RE = /\?/g; // %3F
+export const PLUS_RE = /\+/g; // %2B
+/**
+ * NOTE: It's not clear to me if we should encode the + symbol in queries, it
+ * seems to be less flexible than not doing so and I can't find out the legacy
+ * systems requiring this for regular requests like text/html. In the standard,
+ * the encoding of the plus character is only mentioned for
+ * application/x-www-form-urlencoded
+ * (https://url.spec.whatwg.org/#urlencoded-parsing) and most browsers seems lo
+ * leave the plus character as is in queries. To be more flexible, we allow the
+ * plus character on the query, but it can also be manually encoded by the user.
+ *
+ * Resources:
+ * - https://url.spec.whatwg.org/#urlencoded-parsing
+ * - https://stackoverflow.com/questions/1634271/url-encoding-the-space-character-or-20
+ */
+
+const ENC_BRACKET_OPEN_RE = /%5B/g; // [
+const ENC_BRACKET_CLOSE_RE = /%5D/g; // ]
+const ENC_CARET_RE = /%5E/g; // ^
+const ENC_BACKTICK_RE = /%60/g; // `
+const ENC_CURLY_OPEN_RE = /%7B/g; // {
+const ENC_PIPE_RE = /%7C/g; // |
+const ENC_CURLY_CLOSE_RE = /%7D/g; // }
+const ENC_SPACE_RE = /%20/g; // }
+
+/**
+ * Encode characters that need to be encoded on the path, search and hash
+ * sections of the URL.
+ *
+ * @internal
+ * @param text - string to encode
+ * @returns encoded string
+ */
+function commonEncode(text: string | number): string {
+    return encodeURIComponent('' + text)
+        .replace(ENC_PIPE_RE, '|')
+        .replace(ENC_BRACKET_OPEN_RE, '[')
+        .replace(ENC_BRACKET_CLOSE_RE, ']');
+}
+
+/**
+ * Encode characters that need to be encoded on the hash section of the URL.
+ *
+ * @param text - string to encode
+ * @returns encoded string
+ */
+export function encodeHash(text: string): string {
+    return commonEncode(text)
+        .replace(ENC_CURLY_OPEN_RE, '{')
+        .replace(ENC_CURLY_CLOSE_RE, '}')
+        .replace(ENC_CARET_RE, '^');
+}
+
+/**
+ * Encode characters that need to be encoded query values on the query
+ * section of the URL.
+ *
+ * @param text - string to encode
+ * @returns encoded string
+ */
+export function encodeQueryValue(text: string | number): string {
+    return (
+        commonEncode(text)
+            // Encode the space as +, encode the + to differentiate it from the space
+            .replace(PLUS_RE, '%2B')
+            .replace(ENC_SPACE_RE, '+')
+            .replace(HASH_RE, '%23')
+            .replace(AMPERSAND_RE, '%26')
+            .replace(ENC_BACKTICK_RE, '`')
+            .replace(ENC_CURLY_OPEN_RE, '{')
+            .replace(ENC_CURLY_CLOSE_RE, '}')
+            .replace(ENC_CARET_RE, '^')
+    );
+}
+
+/**
+ * Like `encodeQueryValue` but also encodes the `=` character.
+ *
+ * @param text - string to encode
+ */
+export function encodeQueryKey(text: string | number): string {
+    return encodeQueryValue(text).replace(EQUAL_RE, '%3D');
+}
+
+/**
+ * Encode characters that need to be encoded on the path section of the URL.
+ *
+ * @param text - string to encode
+ * @returns encoded string
+ */
+export function encodePath(text: string | number): string {
+    return commonEncode(text).replace(HASH_RE, '%23').replace(IM_RE, '%3F');
+}
+
+/**
+ * Encode characters that need to be encoded on the path section of the URL as a
+ * param. This function encodes everything {@link encodePath} does plus the
+ * slash (`/`) character. If `text` is `null` or `undefined`, returns an empty
+ * string instead.
+ *
+ * @param text - string to encode
+ * @returns encoded string
+ */
+export function encodeParam(text: string | number | null | undefined): string {
+    return text == null ? '' : encodePath(text).replace(SLASH_RE, '%2F');
+}
+
+/**
+ * Decode text using `decodeURIComponent`. Returns the original text if it
+ * fails.
+ *
+ * @param text - string to decode
+ * @returns decoded string
+ */
+export function decode(text: string | number): string {
+    try {
+        return decodeURIComponent('' + text);
+    } catch (err) {
+        warn(`Error decoding "${text}". Using original value`);
+    }
+    return '' + text;
+}
+
+export function decodeQuery(text: string): string {
+    return decode(text.replace(PLUS_RE, ' '));
+}

package/src/utils/guards.ts

@@ -0,0 +1,25 @@
+import type { RouteRecord } from '../types';
+
+/**
+ * 判断是否是同一个路由
+ */
+export function isSameRoute(from: RouteRecord, to: RouteRecord) {
+    return (
+        from.matched.length === to.matched.length &&
+        from.matched.every((record, i) => record === to.matched[i])
+    );
+}
+
+/**
+ * 判断是否是全等的路由: 路径完全相同
+ */
+export function isEqualRoute(from: RouteRecord, to: RouteRecord) {
+    return (
+        // 这里不仅仅判断了前后的path是否一致
+        // 同时判断了匹配路由对象的个数
+        // 这是因为在首次初始化时 this.current 的值为 { path:'/',matched:[] }
+        // 假如我们打开页面同样为 / 路径时，此时如果单纯判断path那么就会造成无法渲染
+        from.fullPath === to.fullPath &&
+        from.matched.length === to.matched.length
+    );
+}

package/src/utils/index.ts

@@ -0,0 +1,27 @@
+export {
+    regexDomain,
+    normalizePath,
+    parsePath,
+    stringifyPath,
+    normalizeLocation,
+    isPathWithProtocolOrDomain
+} from './path';
+export { isESModule, inBrowser } from './utils';
+export { warn } from './warn';
+export { isSameRoute, isEqualRoute } from './guards';
+export {
+    computeScrollPosition,
+    scrollToPosition,
+    saveScrollPosition,
+    getSavedScrollPosition,
+    getKeepScrollPosition
+} from './scroll';
+export { openWindow } from './bom';
+export {
+    encodeHash,
+    encodeParam,
+    encodePath,
+    encodeQueryKey,
+    encodeQueryValue,
+    decode
+} from './encoding';

package/src/utils/path.spec.ts

@@ -0,0 +1,44 @@
+import { describe, it } from 'vitest';
+
+import {
+    isPathWithProtocolOrDomain,
+    normalizeLocation,
+    normalizePath
+} from './path';
+
+// console.log(normalizeLocation({ path: '/' }));
+
+// console.log(isPathWithProtocolOrDomain('/'));
+// console.log(isPathWithProtocolOrDomain('www.a.b'));
+// console.log(isPathWithProtocolOrDomain('a.b.cm'));
+// console.log(isPathWithProtocolOrDomain('http://a.cn'));
+// console.log(isPathWithProtocolOrDomain('a.b/path'));
+
+describe('testing normalizeLocation', () => {
+    it('testing normal domain', ({ expect }) => {
+        expect(
+            normalizeLocation(
+                'http://localhost:5173/en/en/en/en/en',
+                'http://localhost:5173/en/'
+            ).path
+        ).toBe('/en/en/en/en');
+    });
+    it('testing path', ({ expect }) => {
+        expect(
+            normalizeLocation('/test1/test2?t=https://www-six.betafollowme.com')
+                .path
+        ).toBe('/test1/test2');
+    });
+});
+
+describe('testing normalizePath', () => {
+    it('testing normal domain', ({ expect }) => {
+        expect(normalizePath('test2', 'test1')).toBe('/test1/test2');
+    });
+    it('testing path', ({ expect }) => {
+        expect(
+            normalizeLocation('/test1/test2?t=https://www-six.betafollowme.com')
+                .path
+        ).toBe('/test1/test2');
+    });
+});

package/src/utils/path.ts

@@ -0,0 +1,397 @@
+import URLParse from 'url-parse';
+
+import type {
+    HistoryState,
+    Route,
+    RouterBase,
+    RouterLocation,
+    RouterRawLocation
+} from '../types';
+import {
+    decode,
+    decodeQuery,
+    encodeHash,
+    encodeQueryKey,
+    encodeQueryValue
+} from './encoding';
+import { isValidValue } from './utils';
+import { warn } from './warn';
+
+/**
+ * 判断路径是否以 http 或 https 开头 或者直接是域名开头
+ */
+export const regexDomain =
+    /^(?:https?:\/\/|[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9](\/.*)?/i;
+
+/**
+ * 判断路径是否以 scheme 协议开头
+ */
+export const regexScheme = /^(?:[a-z][a-z\d+.-]*:.+)/i;
+
+/**
+ * 判断路径是否以 http(s) 协议开头
+ */
+export const regexHttpScheme = /^(http(s)?:\/\/)/;
+
+/**
+ * 去除URL路径中重复的斜杠，但不改变协议部分的双斜杠。
+ *
+ * @param url 需要处理的URL字符串。
+ * @returns 处理后的URL，重复的斜杠被去除。
+ */
+function removeDuplicateSlashes(url: string): string {
+    // 正则表达式匹配除了://之外的连续两个或以上斜杠，并替换为一个斜杠
+    if (url.includes('://')) {
+        const [base, path] = url.split('://');
+        const result = path.replace(/\/{2,}/g, '/');
+        return `${base}://${result}`;
+    }
+
+    const result = url.replace(/\/{2,}/g, '/');
+    return result;
+}
+
+/**
+ * 格式化路径 主要用于拼接嵌套路由的路径
+ * 返回的格式化后的路径如果有协议则以协议开头，如果没有协议则以/开头
+ */
+export function normalizePath(path: string, parentPath?: string) {
+    // 如果path以/开头 说明是绝对路径，不需要拼接路径
+    // 按 Hanson 要求，不提供绝对路径
+    // if (path.startsWith('/')) {
+    //     return removeDuplicateSlashes(path);
+    // }
+    let normalizedPath = parentPath ? `${parentPath}/${path}` : `${path}`;
+
+    // 当解析的路径不是以http 或 https 协议开头时，给开头加上/
+    if (
+        !regexHttpScheme.test(normalizedPath) &&
+        !normalizedPath.startsWith('/')
+    ) {
+        normalizedPath = `/${normalizedPath}`;
+    }
+
+    return (
+        // 只有存在父级路由才进行路由拼接
+        removeDuplicateSlashes(normalizedPath) // 将多个斜杠 / 替换为单个斜杠 /
+            .replace(/\/$/, '') || // 移除结尾的斜杠 /
+        '/' // 为空字符串时至少返回单个 /
+    );
+}
+
+/**
+ * 路径解析方法
+ * @example 输入 https://www.google.com/test1/test2?a=1&b=2#123 输出 { pathname: '/test1/test2', query: { a: '1', b: '2' }, queryArray: { a: ['1'], b: ['2'] }, hash: '123' }
+ * 输入 /test1/test2?a=1&b=2#123 同样输出 { pathname: '/test1/test2', query: { a: '1', b: '2' }, queryArray: { a: ['1'], b: ['2'] }, hash: '123' }
+ */
+export function parsePath(path = ''): {
+    pathname: string;
+    query: Record<string, string>;
+    queryArray: Record<string, string[]>;
+    hash: string;
+} {
+    path = normalizePath(path);
+    const { pathname, query, hash } = new URLParse(path || '/');
+    const queryObj = {};
+    const queryArray = {};
+    if (query.length > 0) {
+        query
+            .slice(1)
+            .split('&')
+            .forEach((item) => {
+                let [key = '', value = ''] = item.split('=');
+                key = decode(key);
+                value = decodeQuery(value);
+                if (key) {
+                    queryObj[key] = value;
+                    queryArray[key] = (queryArray[key] || []).concat(value);
+                }
+                // queryArray[key] = [
+                //     ...(queryArray[key] || []),
+                //     ...(value !== undefined ? [value] : [])
+                // ];
+            });
+    }
+    return {
+        pathname,
+        query: queryObj,
+        queryArray,
+        hash: decode(hash)
+    };
+}
+
+/**
+ * 将path query hash合并为完整路径
+ * @example stringifyPath({ pathname: '/news', query: { a: '1' }, hash: '123' }) 输出 '/news?a=1#123'
+ */
+export function stringifyPath(
+    {
+        pathname = '',
+        query = {},
+        queryArray = {},
+        hash = ''
+    }: {
+        pathname: string;
+        /* 按 Hanson 要求加入 undefined 类型 */
+        query: Record<string, string | undefined>;
+        queryArray: Record<string, string[]>;
+        hash: string;
+    } = {
+        pathname: '',
+        query: {},
+        queryArray: {},
+        hash: ''
+    }
+): string {
+    const queryString = Object.entries(
+        Object.assign({}, query, queryArray)
+    ).reduce((acc, [key, value]) => {
+        let query = '';
+        const encodedKey = encodeQueryKey(key);
+
+        if (Array.isArray(value)) {
+            query = value.reduce((all, item) => {
+                if (!isValidValue(item)) return all;
+                const encodedValue = encodeQueryValue(item);
+                if (encodedValue) {
+                    all = all
+                        ? `${all}&${encodedKey}=${encodedValue}`
+                        : `${encodedKey}=${encodedValue}`;
+                }
+                return all;
+            }, '');
+        } else {
+            const encodedValue = encodeQueryValue(value);
+            if (isValidValue(value)) {
+                query = `${encodedKey}=${encodedValue}`;
+            }
+        }
+
+        if (query) {
+            acc = acc ? `${acc}&${query}` : `?${query}`;
+        }
+
+        return acc;
+    }, '');
+
+    const hashContent = hash.startsWith('#') ? hash.replace(/^#/, '') : hash;
+    const hashString = hashContent ? `#${encodeHash(hashContent)}` : '';
+    return `${pathname}${queryString}${hashString}`;
+}
+
+/**
+ * 标准化 RouterLocation 字段
+ */
+export function normalizeLocation(
+    rawLocation: RouterRawLocation,
+    base: RouterBase = ''
+): RouterLocation & {
+    path: string;
+    base: string;
+    queryArray: Record<string, string[]>;
+} {
+    let pathname = '';
+    /* 按 Hanson 要求加入 undefined 类型 */
+    let query: Record<string, string | undefined> = {};
+    let queryArray: Record<string, string[]> = {};
+    let hash = '';
+    let params: Record<string, string> | undefined;
+    let state: HistoryState = {};
+
+    if (typeof rawLocation === 'object') {
+        const parsedOption = parsePath(rawLocation.path);
+        pathname = parsedOption.pathname;
+
+        // 只有在rawLocation初始传入了 query 或 queryArray 时才使用 rawLocation
+        if (rawLocation.query || rawLocation.queryArray) {
+            queryArray = rawLocation.queryArray || {};
+            query = rawLocation.query || {};
+        } else {
+            queryArray = parsedOption.queryArray;
+            query = parsedOption.query;
+        }
+
+        hash = rawLocation.hash || parsedOption.hash;
+
+        params = rawLocation.params; // params 不使用默认值
+        state = rawLocation.state || {};
+    } else {
+        const parsedOption = parsePath(rawLocation);
+        pathname = parsedOption.pathname;
+        query = parsedOption.query;
+        queryArray = parsedOption.queryArray;
+        hash = parsedOption.hash;
+    }
+
+    const fullPath = stringifyPath({
+        pathname,
+        query,
+        queryArray,
+        hash
+    });
+    const baseString = normalizePath(
+        typeof base === 'function'
+            ? base({
+                  fullPath,
+                  query,
+                  queryArray,
+                  hash
+              })
+            : base
+    );
+
+    let path = pathname;
+    // 如果 base 部分包含域名
+    if (regexDomain.test(baseString)) {
+        const { pathname } = new URLParse(baseString);
+        path = normalizePath(path.replace(new RegExp(`^(${pathname})`), ''));
+    }
+    path = normalizePath(path.replace(new RegExp(`^(${baseString})`), ''));
+
+    const { query: realQuery, queryArray: realQueryArray } =
+        parsePath(fullPath);
+
+    const res: RouterLocation & {
+        path: string;
+        base: string;
+        queryArray: Record<string, string[]>;
+    } = {
+        base: baseString,
+        path,
+        query: realQuery,
+        queryArray: realQueryArray,
+        hash,
+        state
+    };
+    if (params) res.params = params;
+    return res;
+}
+
+/**
+ * 判断路径是否以协议或域名开头
+ */
+export function isPathWithProtocolOrDomain(location: RouterRawLocation): {
+    /**
+     * 是否以协议或域名开头
+     */
+    flag: boolean;
+    /**
+     * 虚假的 route 信息，内部跳转时无法信任，只有外站跳转时使用
+     */
+    route: Route;
+} {
+    let url = '';
+    let state = {};
+
+    if (typeof location === 'string') {
+        url = location;
+    } else {
+        state = location.state || {};
+        const {
+            path,
+            query = {},
+            queryArray,
+            hash = '',
+            ...nLocation
+        } = normalizeLocation(location);
+        url = stringifyPath({
+            ...nLocation,
+            query,
+            queryArray,
+            pathname: path,
+            hash
+        });
+    }
+
+    // 如果以 scheme 协议开头 并且不是 http(s) 协议开头 则认为是外站跳转
+    if (regexScheme.test(url) && !regexHttpScheme.test(url)) {
+        try {
+            const {
+                hash,
+                host,
+                hostname,
+                href,
+                origin,
+                pathname,
+                port,
+                protocol,
+                search
+            } = new URL(url);
+            const route: Route = {
+                hash,
+                host,
+                hostname,
+                href,
+                origin,
+                pathname,
+                port,
+                protocol,
+                search,
+                params: {},
+                query: {},
+                queryArray: {},
+                state,
+                meta: {},
+                path: pathname,
+                fullPath: url,
+                base: '',
+                matched: []
+            };
+            return {
+                flag: true,
+                route
+            };
+        } catch (error) {
+            warn(error);
+        }
+    }
+
+    if (!/^https?:\/\//i.test(url)) {
+        url = `http://${url}`;
+    }
+
+    const {
+        hash,
+        host,
+        hostname,
+        href,
+        origin,
+        pathname,
+        port,
+        protocol,
+        query: search
+    } = new URLParse(url);
+    const { query = {}, queryArray } = normalizeLocation(url);
+    const route: Route = {
+        href,
+        origin,
+        host,
+        protocol,
+        hostname,
+        port,
+        pathname,
+        search,
+        hash,
+        query,
+        queryArray,
+        params: {},
+        state,
+        meta: {},
+        path: pathname,
+        fullPath: `${pathname}${search}${hash}`,
+        base: '',
+        matched: []
+    };
+
+    if (regexDomain.test(url)) {
+        return {
+            flag: true,
+            route
+        };
+    }
+
+    return {
+        flag: false,
+        route
+    };
+}