Simple Router

A Simple Router based on the HTML5 History

This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greasyfork.org/scripts/558737/1712796/Simple%20Router.js

ही स्क्रिप्ट इंस्टॉल करण्यासाठी तुम्हाला Tampermonkey, Greasemonkey किंवा Violentmonkey यासारखे एक्स्टेंशन इंस्टॉल करावे लागेल.

You will need to install an extension such as Tampermonkey to install this script.

ही स्क्रिप्ट इंस्टॉल करण्यासाठी तुम्हाला Tampermonkey किंवा Violentmonkey यासारखे एक्स्टेंशन इंस्टॉल करावे लागेल..

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

ही स्क्रिप्ट इंस्टॉल करण्यासाठी तुम्हाला Tampermonkey यासारखे एक्स्टेंशन इंस्टॉल करावे लागेल..

ही स्क्रिप्ट इंस्टॉल करण्यासाठी तुम्हाला एक युझर स्क्रिप्ट व्यवस्थापक एक्स्टेंशन इंस्टॉल करावे लागेल.

(माझ्याकडे आधीच युझर स्क्रिप्ट व्यवस्थापक आहे, मला इंस्टॉल करू द्या!)

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला Stylus सारखे एक्स्टेंशन इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला Stylus सारखे एक्स्टेंशन इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला Stylus सारखे एक्स्टेंशन इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला एक युझर स्टाईल व्यवस्थापक इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला एक युझर स्टाईल व्यवस्थापक इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला एक युझर स्टाईल व्यवस्थापक इंस्टॉल करावे लागेल.

(माझ्याकडे आधीच युझर स्टाईल व्यवस्थापक आहे, मला इंस्टॉल करू द्या!)

// ==UserScript==
// @name         Simple Router
// @description  A Simple Router based on the HTML5 History
// @namespace    https://github.com/dzist
// @version      0.0.1
// @author       Dylan Zhang
// ==/UserScript==

class SimpleRouter {
    constructor() {
        this.routes = new Map()
        this.beforeCbs = new Set()
        this.currentMatcher = null
        this.overrideHistory()
    }
    overrideHistory() {
        const { history } = window
        const hook = () => this.handle()
        const override = (fn) => {
            return (...args) => {
                const result = fn.apply(history, args)
                hook()
                return result
            }
        }

        history.pushState = override(history.pushState)
        history.replaceState = override(history.replaceState)
        window.addEventListener('popstate', hook)
    }

    // use(path: string | () => void, cb?: () => void): Router
    use(path, cb) {
        let matcher

        if (typeof path === 'string') {
            matcher = this.getMatcher(path)
            if (!matcher) {
                matcher = {
                    path,
                    regexp: new RegExp(`^${path}$`)
                }
            }
            this.currentMatcher = matcher
        }
        if (typeof path === 'function') {
            cb = path
            matcher = this.currentMatcher
        }
        if (cb) {
            const cbs = this.routes.get(matcher)
            cbs
                ? cbs.add(cb)
                : this.routes.set(matcher, new Set([cb]))
        }

        return this
    }
    // disuse(path: string, cb?: () => void): boolean
    disuse(path, cb) {
        const matcher = this.getMatcher(path)
        if (!matcher) return true

        const cbs = this.routes.get(matcher)
        if (!cbs) return true

        if (!cb) {
            cbs.clear()
            return true
        }

        return cbs.delete(cb)
    }
    getMatcher(path) {
        return this.routes
            .keys()
            .find(m => m.path === path)
    }
    once(path, cb) {
        if (typeof path === 'string' && !cb) {
            throw new Error(
                `It is not the path, but the corresponding function that can only be used once.` +
                `Please specify a callback function for the path: ${path}\n` +
                `such as once('/', () => {...})`
            )
        }

        if (typeof path === 'function') {
            cb = path
            path = this.currentMatcher?.path
            if (!path) {
                throw new Error(
                    `Please specify the path for the callback function first:\n${cb}\n` +
                    `such as use('/') or once('/', () => {...})`
                )
            }
        }
        const fnOnce = (...args) => {
            cb(...args)
            this.disuse(path, fnOnce)
        }

        return this.use(path, fnOnce)
    }
    before(cb) {
        this.beforeCbs.add(cb)
        return this
    }
    beforeOnce(cb) {
        const fnOnce = (...args) => {
            cb(...args)
            this.beforeCbs.delete(fnOnce)
        }
        return this.before(fnOnce)
    }
    handle(path = this.path) {
        this.beforeCbs.forEach(cb => cb())

        for(const [matcher, cbs] of this.routes) {
            if (matcher.regexp.test(path)) {
                cbs.forEach(cb => cb())
                break
            }
        }
    }
    get path() {
        const segments = location.pathname.split('/')
        const path = segments[1]
        return path ? `/${path}` : '/'
    }
}