@ramstack/alpinegear-router 1.1.0-preview.1

package/alpinegear-router.js

@@ -0,0 +1,888 @@
+(function () {
+    'use strict';
+
+    const warn = (...args) => console.warn("alpine-gear.js:", ...args);
+    const is_array = Array.isArray;
+    const is_nullish = value => value === null || value === undefined;
+    const is_template = el => el instanceof HTMLTemplateElement;
+    const is_function = value => typeof value === "function";
+    const as_array = value => is_array(value) ? value : [value];
+
+    function assert(value, message) {
+        if (!value) {
+            throw new Error(message);
+        }
+    }
+
+    const asyncify = fn => {
+        if (is_function(fn) && fn.constructor?.name === "AsyncFunction") {
+            return fn;
+        }
+
+        return function(...args) {
+            const result = fn.apply(this, args);
+            return is_function(result?.then) ? result : Promise.resolve(result);
+        }
+    };
+
+    const listen = (target, type, listener, options) => {
+        target.addEventListener(type, listener, options);
+        return () => target.removeEventListener(type, listener, options);
+    };
+
+    const closest = (el, callback) => {
+        while (el && !callback(el)) {
+            el = (el._x_teleportBack ?? el).parentElement;
+        }
+
+        return el;
+    };
+
+    const default_constraints = Object.freeze({
+        "regex"(value) {
+            const regexp = new RegExp(value);
+            return {
+                test: v => regexp.test(v)
+            };
+        },
+        "bool"() {
+            return {
+                test: v => /^(?:true|false)$/i.test(v),
+                transform: v => v.length === 4
+            };
+        },
+        "int"() {
+            return {
+                test: v => /^\d+$/.test(v),
+                transform: v => +v
+            };
+        },
+        "number"() {
+            return {
+                test: v => /^[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?$/.test(v) && isFinite(parseFloat(v)),
+                transform: v => parseFloat(v)
+            };
+        },
+        "alpha"() {
+            return {
+                test: v => /^[a-z]+$/i.test(v)
+            };
+        },
+        "min"(value) {
+            return {
+                test: v => v >= +value
+            };
+        },
+        "max"(value) {
+            return {
+                test: v => v <= +value
+            };
+        },
+        "range"(value) {
+            let [a, b] = value.split(",", 2).map(v => v.trim());
+            return {
+                test: v => v >= +a && v <= +b
+            };
+        },
+        "length"(value) {
+            return {
+                test: v => v.length === +value
+            };
+        },
+        "minlength"(value) {
+            return {
+                test: v => v.length >= +value
+            };
+        },
+        "maxlength"(value) {
+            return {
+                test: v => v.length <= +value
+            };
+        },
+    });
+
+    class RoutePattern {
+        #regex;
+        #template;
+        #segments;
+        #parameters;
+        #constraints;
+
+        get template() {
+            return this.#template;
+        }
+
+        get regex() {
+            return this.#regex;
+        }
+
+        get constraints() {
+            return this.#constraints;
+        }
+
+        constructor(template, constraints = null) {
+            this.#template = template;
+            this.#regex = build(
+                template,
+                this.#segments = [],
+                this.#parameters = new Map(),
+                this.#constraints = constraints ?? {}
+            );
+        }
+
+        match(path) {
+            let result = this.#regex.exec(path);
+
+            if (is_nullish(result)) {
+                return null;
+            }
+
+            result = result.groups ?? {};
+
+            for (let [name, parameter] of this.#parameters.entries()) {
+                let value = result[name];
+
+                if (is_nullish(value) && is_nullish(parameter.default)) {
+                    continue;
+                }
+
+                if (!value && !is_nullish(parameter.default)) {
+                    value = parameter.default;
+                }
+
+                const values = parameter.catch_all
+                    ? value.split("/").filter(v => v.length)
+                    : [value];
+
+                for (let i = 0; i < values.length; i++) {
+                    for (let constraint of parameter.constraints) {
+                        if (constraint.test && !constraint.test(values[i])) {
+                            return null;
+                        }
+
+                        if (constraint.transform) {
+                            values[i] = constraint.transform(values[i]);
+                        }
+                    }
+                }
+
+                result[name] = parameter.catch_all ? values : values[0];
+            }
+
+            return result;
+        }
+
+        resolve(values) {
+            values = new Map(Object.entries(values));
+            const segments = [];
+
+            for (let segment of this.#segments) {
+                const parts = [];
+
+                for (let part of segment.parts) {
+                    if (part.kind === "literal") {
+                        parts.push(part.value);
+                    }
+                    else {
+                        let value = values.get(part.name);
+                        values.delete(part.name);
+
+                        if (is_nullish(value) || value === "") {
+                            value = this.#parameters.get(part.name)?.default;
+                            if (part.catch_all && value) {
+                                value = value.split("/");
+                            }
+                        }
+
+                        if (is_nullish(value) || value === "") {
+                            if (part.required) {
+                                return null;
+                            }
+
+                            // TODO check twice this statement
+                            if (part.optional && part.default === value) {
+                                continue;
+                            }
+                        }
+
+                        if (part.catch_all) {
+                            value = as_array(value);
+                            parts.push(...value.map(v => encodeURIComponent(v)).join("/"));
+                        }
+                        else {
+                            parts.push(encodeURIComponent(value));
+                        }
+                    }
+                }
+
+                parts.length && segments.push(parts.join(""));
+            }
+
+            let queries = [...values.entries()].map(([k, v]) => encodeURIComponent(k) + "=" + encodeURIComponent(v)).join("&");
+            queries && (queries = "?" + queries);
+
+            const result = segments.join("/") + queries;
+            return result[0] !== "/"
+                ? "/" + result
+                : result;
+        }
+    }
+
+    function build(pattern, segments, parameters, constraints) {
+        segments.push(...parse(pattern, constraints));
+
+        let expression = segments.map(segment => {
+            return segment.parts.map((part, index) => {
+                if (part.kind === "literal") {
+                    return index ? part.value : `/${ part.value }`;
+                }
+
+                parameters.set(part.name, part);
+
+                if (segment.parts.length === 1 && part.quantifier === "?") {
+                    return `(?:/(?<${ part.name }>[^/]+?))?`;
+                }
+
+                if (part.catch_all) {
+                    let expr = `(?<${ part.name }>.${ part.quantifier })`;
+                    index || (expr = `(?:/${ expr })`);
+                    part.quantifier === "*" && (expr += "?");
+                    return part.quantifier === "*" ? expr + "?" : expr;
+                }
+                else {
+                    const expr = `(?<${ part.name }>[^/]+?)${ part.quantifier }`;
+                    return index ? expr : `/${ expr }`;
+                }
+            }).join("");
+        }).join("") || "/";
+
+        expression !== "/" && (expression += "/?");
+        return new RegExp(`^${ expression }$`);
+    }
+
+    function parse(pattern, factories) {
+        return preprocess(segments());
+
+        function preprocess(segments) {
+            segments.find(s => s.parts.length > 1 && s.parts.every(p => p.optional))
+                && throw_error("Using all segment parameters as optional is not permitted");
+
+            const parameters = new Map;
+
+            segments.flatMap(s => s.parts).forEach((part, index, parts) => {
+                if (part.kind === "literal" && part.value.indexOf("?") >= 0) {
+                    throw_error("Literal segments cannot contain the '?' character");
+                }
+
+                if (part.kind === "parameter") {
+                    if (part.catch_all && index !== parts.length - 1) {
+                        throw_error("A catch-all parameter can only appear as the last segment");
+                    }
+
+                    if (parameters.has(part.name)) {
+                        throw_error(`The route parameter name '${part.name}' appears more than one time`);
+                    }
+
+                    part.quantifier === "*"
+                        && is_nullish(part.default)
+                        && (part.default = "");
+
+                    part.default === ""
+                        && part.quantifier !== "*"
+                        && (part.default = null);
+
+                    parameters.set(part.name, true);
+
+                    for (let constraint of part.constraints) {
+                        const factory = factories?.[name] ?? default_constraints[constraint.name];
+                        is_nullish(factory) && throw_error(`Unknown constraint '${ constraint.name }'`);
+                        Object.assign(constraint, factory(constraint.argument));
+                    }
+                }
+            });
+
+            return segments;
+        }
+
+        function segments() {
+            const segments = [];
+
+            for (let i = 0; i < pattern.length;) {
+                const r = segment(i);
+                r.template && segments.push(r);
+                i += r.template.length + 1;
+            }
+
+            return segments;
+        }
+
+        function segment(p) {
+            let parts = [];
+            let index = p;
+
+            while (index < pattern.length && pattern[index] !== "/") {
+                const part = literal(index) || parameter(index);
+                parts.push(part);
+
+                index += part.template.length;
+            }
+
+            return {
+                template: pattern.slice(p, index),
+                parts: parts
+            }
+        }
+
+        function constraints(text, p) {
+            const array = [];
+
+            for (let i = p; i < text.length;) {
+                if (text[i] !== ":") {
+                    throw_error();
+                }
+
+                const name = constraint_name(text.slice(i + 1));
+                i += name.length + 1;
+
+                const argument = text[i] === "("
+                    ? extract(i, text)
+                    : null;
+
+                is_nullish(argument) || (i += argument.length + 2);
+
+                if (!name && !argument) {
+                    throw_error();
+                }
+
+                array.push({
+                    name: name === ""
+                        ? "regex"
+                        : name === "="
+                            ? "default"
+                            : name,
+                    argument: argument ?? ""
+                });
+
+            }
+
+            return array;
+        }
+
+        function parameter(p) {
+            if (pattern[p] !== "{") {
+                return null;
+            }
+
+            const value = extract(p);
+            const param_name = parameter_name(value);
+            const template = pattern.slice(p, p + value.length + 2);
+            const quantifier = (() => {
+                const q = value[param_name.length];
+                return q === "*"
+                    || q === "+"
+                    || q === "?" ? q : "";
+            })();
+            const list = constraints(value, param_name.length + quantifier.length);
+
+            return {
+                kind: "parameter",
+                template: template,
+                name: param_name,
+                quantifier: quantifier,
+                constraints: list.filter(c => c.name !== "default"),
+                default: list.find(c => c.name === "default")?.argument,
+                required: quantifier === "+" || quantifier === "",
+                optional: quantifier === "?" || quantifier === "*",
+                catch_all: quantifier === "+" || quantifier === "*"
+            };
+        }
+
+        function literal(p) {
+            for (let i = p;; i++) {
+                if (i >= pattern.length
+                    || pattern[i] === "/"
+                    || pattern[i] === "{") {
+                    if (i === p) {
+                        return null;
+                    }
+
+                    const template = pattern.slice(p, i);
+                    return {
+                        kind: "literal",
+                        template: template,
+                        value: template
+                    };
+                }
+            }
+        }
+
+        function extract(p, s) {
+            s ??= pattern;
+            const stack = [];
+
+            loop: for (let i = p; i < s.length; i++) {
+                switch (s[i]) {
+                    case "{": stack.push("}"); break;
+                    case "(": stack.push(")"); break;
+                    case "}":
+                    case ")":
+                        if (stack.pop() !== s[i]) break loop;
+                        break;
+                }
+
+                if (stack.length === 0) {
+                    return s.slice(p + 1, i);
+                }
+            }
+
+            throw_error();
+        }
+
+        function parameter_name(value) {
+            const r = value.match(/^(?<name>[a-z_$][a-z0-9_$-]*?)(?:[:?+*]|$)/i)?.groups?.name;
+            if ((r?.length ?? -1) < 0) {
+                throw_error("Invalid parameter name");
+            }
+            return r;
+        }
+
+        function constraint_name(value) {
+            const r = value.match(/^(?<name>=|[a-z0-9_$]*)(?=[/:(]|$)/i)?.groups?.name;
+            if ((r?.length ?? -1) < 0) {
+                throw_error("Invalid constraint name");
+            }
+
+            return r;
+        }
+
+        function throw_error(message = "Invalid pattern") {
+            throw new Error(`${ message }: ${ pattern }`);
+        }
+    }
+
+    async function load_template(path) {
+        let result;
+        try {
+            result = await fetch(path);
+        }
+        catch {
+            
+        }
+
+        if (!result?.ok) {
+            warn(`Failed to load template from ${ path }`);
+            return new DocumentFragment();
+        }
+
+        const fragment = new DocumentFragment();
+        const document = new DOMParser().parseFromString(await result.text(), "text/html");
+
+        fragment.append(...document.body.childNodes);
+        return fragment;
+    }
+
+    function route({ directive, magic, $data }) {
+        directive("route", (el, { expression, value, modifiers }, { cleanup, evaluate }) => {
+            if (!is_template(el)) {
+                warn("x-route can only be used on a 'template' tag");
+                return;
+            }
+
+            const route = closest(el, n => n._b_route)?._b_route;
+
+            if (is_nullish(route) && (value === "view" || value === "handler")) {
+                warn(`no x-route directive found`);
+                return;
+            }
+
+            switch (value) {
+                case "view":
+                    process_view();
+                    break;
+
+                case "handler":
+                    process_handler();
+                    break;
+
+                default:
+                    process_route();
+                    break;
+            }
+
+            function process_route() {
+                const router = closest(el, n => n._b_router)?._b_router;
+                if (is_nullish(router)) {
+                    warn(`no x-router directive found`);
+                    return;
+                }
+
+                const view = () => new Promise(resolve => resolve(el.content));
+
+                el._b_route = Object.assign(new RoutePattern(expression), { el, view, handler: () => Promise.resolve() });
+                router.routes.push(el._b_route);
+
+                cleanup(() => {
+                    router.routes = router.routes.filter(r => r !== el._b_route);
+                });
+            }
+
+            function process_handler() {
+                expression || (expression = "[]");
+                expression.startsWith("[") || (expression = `[${ expression }]`);
+
+                const handlers = evaluate(expression).map(asyncify);
+                const self = $data(el);
+
+                route.handler = async context => {
+                    for (let handler of handlers) {
+                        const r = await handler.call(self, context);
+                        if (!is_nullish(r)) {
+                            return r;
+                        }
+                    }
+                };
+
+                cleanup(() => route.handler = null);
+            }
+
+            function process_view() {
+                route.view = () => load_template(expression);
+
+                cleanup(() => {
+                    route.view = () => new Promise(resolve => resolve(new DocumentFragment()));
+                });
+            }
+        });
+
+        magic("route", el => closest(el, n => n._b_router)?._b_router.values);
+    }
+
+    let data;
+
+    function use_location() {
+        assert(Alpine, "Alpine is not defined");
+
+        if (!data) {
+            data = Alpine.reactive({
+                hash: "",
+                host: "",
+                hostname: "",
+                href: "",
+                origin: "",
+                pathname: "",
+                port: 0,
+                protocol: "",
+                search: "",
+                refresh() {
+                    populate();
+                }
+            });
+
+            populate();
+
+            listen(window, "hashchange", populate);
+            listen(window, "popstate", populate);
+        }
+
+        return data;
+    }
+
+    function populate() {
+        for (let name in data) {
+            if (name in location) {
+                data[name] = location[name];
+            }
+        }
+    }
+
+    let location$1;
+
+    const hash_api = {
+        get path() {
+            return location$1.hash.slice(1) || "/";
+        },
+        get "location"() {
+            return location$1;
+        },
+        resolve(path) {
+            let url = new URL(path);
+            return url.hash ? (url.hash.slice(1) || "/") : url.pathname;
+        },
+        navigate(path, replace = false) {
+            path.indexOf("#") < 0 && (path = "#" + path);
+            navigate(path, replace);
+        }
+    };
+
+    const html5_api = {
+        get path() {
+            return location$1.pathname;
+        },
+        get "location"() {
+            return location$1;
+        },
+        resolve(path) {
+            return new URL(path).pathname;
+        },
+        navigate(path, replace = false) {
+            navigate(path, replace);
+        }
+    };
+
+    function navigate(path, replace) {
+        history[replace ? "replaceState" : "pushState"]({}, "", path);
+        location$1.refresh();
+    }
+
+    const known_api = {
+        html5: html5_api,
+        hash: hash_api,
+    };
+
+    function create_history(name) {
+        location$1 ??= use_location();
+
+        name ||= "html5";
+        let api = known_api[name];
+
+        if (!api) {
+            warn(`Unknown history API: '${ name }'`);
+            api = html5_api;
+        }
+
+        return api;
+    }
+
+    function create_getter(evaluate_later, ...args) {
+        const evaluate = evaluate_later(...args);
+        return () => {
+            let result;
+            evaluate(v => result = v);
+            return has_getter(result) ? result.get() : result;
+        };
+    }
+
+    function has_getter(value) {
+        return typeof value?.get === "function";
+    }
+
+    function watch(get_value, callback, options = null) {
+        assert(Alpine, "Alpine is not defined");
+
+        const {
+            effect,
+            release
+        } = Alpine;
+
+        let new_value;
+        let old_value;
+        let initialized = false;
+
+        const handle = effect(() => {
+            new_value = get_value();
+
+            if (!initialized) {
+                options?.deep && JSON.stringify(new_value);
+                old_value = new_value;
+            }
+
+            if (initialized || (options?.immediate ?? true)) {
+                
+                setTimeout(() => {
+                    callback(new_value, old_value);
+                    old_value = new_value;
+                }, 0);
+            }
+
+            initialized = true;
+        });
+
+        return () => release(handle);
+    }
+
+    function router({ directive, magic, reactive }) {
+        directive("router", (el, { expression, value }, { cleanup, effect, evaluate, evaluateLater: evaluate_later }) => {
+            value || (value = "html5");
+
+            const router = closest(el, node => node._b_router)?._b_router;
+
+            if (is_nullish(router) && (value === "outlet" || value === "link")) {
+                warn(`no x-router directive found`);
+                return;
+            }
+
+            switch (value) {
+                case "outlet":
+                    process_outlet();
+                    break;
+
+                case "link":
+                    process_link();
+                    break;
+
+                default:
+                    process_router();
+                    break;
+            }
+
+            function process_router() {
+                if (is_template(el)) {
+                    warn("x-router cannot be used on a 'template' tag");
+                    return;
+                }
+
+                const values = reactive({
+                    pattern: "",
+                    path: "",
+                    params: ""
+                });
+
+                const api = is_nullish(value) && expression
+                    ? evaluate(expression)
+                    : create_history(value);
+
+                const router = {
+                    routes: [],
+                    outlet: null,
+                    active: null,
+                    history: api,
+                    values: values,
+                    async match(path) {
+                        for (let route of this.routes) {
+                            const params = route.match(path);
+                            if (params) {
+                                const context = { router, route, params, path };
+                                if (await route.handler(context) !== false) {
+                                    return context;
+                                }
+                            }
+                        }
+                    },
+                    navigate(path, replace = false) {
+                        api.navigate(path, replace);
+                        return true;
+                    }
+                };
+
+                el._b_router = router;
+
+                function activate(route, path, params) {
+                    if (route.nodes?.length && values.path === path) {
+                        return;
+                    }
+
+                    clear();
+
+                    values.path = path;
+                    values.pattern = route.template;
+                    values.params = params;
+
+                    router.active = route;
+
+                    const outlet = router.outlet;
+                    if (outlet) {
+                        route.view().then(html => {
+                            if (values.path !== path
+                                || values.pattern !== route.template
+                                || JSON.stringify(values.params) !== JSON.stringify(params)) {
+                                return;
+                            }
+
+                            route.nodes = [...html.cloneNode(true).childNodes];
+                            is_template(outlet)
+                                ? route.nodes.forEach(node => outlet.parentElement.insertBefore(node, outlet))
+                                : route.nodes.forEach(node => outlet.append(node));
+                        });
+                    }
+                }
+
+                function clear() {
+                    if (router.active) {
+                        for (let n of router.active.nodes ?? []) {
+                            n.remove();
+                        }
+                        router.active.nodes = null;
+                        router.active = null;
+                    }
+                }
+
+                const dispose = watch(() => api.path, async path => {
+                    const result = await router.match(path);
+
+                    if (result) {
+                        if (path === api.path) {
+                            activate(result.route, result.path, result.params);
+                        }
+                    }
+                    else {
+                        clear();
+                    }
+                });
+
+                cleanup(dispose);
+                cleanup(clear);
+            }
+
+            function process_link() {
+                const is_blank = (el.getAttribute("target") ?? "").indexOf("_blank") >= 0;
+                const unsubscribe = listen(el, "click", e => {
+                    if (e.metaKey
+                        || e.altKey
+                        || e.ctrlKey
+                        || e.shiftKey
+                        || e.defaultPrevented
+                        || e.button > 0
+                        || is_blank) {
+                        return;
+                    }
+
+                    e.preventDefault();
+
+                    router.navigate(`${ el.pathname }${ el.search }${ el.hash }`);
+                });
+
+                if (expression) {
+                    const is_active = create_getter(evaluate_later, "$active");
+                    const list = as_array(evaluate(expression));
+
+                    effect(() => {
+                        const active = is_active();
+                        for (let name of list) {
+                            el.classList.toggle(name, active);
+                        }
+                    });
+
+                    cleanup(() => el.classList.remove(...list));
+                }
+
+                cleanup(unsubscribe);
+            }
+
+            function process_outlet() {
+                router.outlet && warn("x-router:outlet already specified", router.outlet);
+                router.outlet || (router.outlet = el);
+                cleanup(() => router.outlet = null);
+            }
+        });
+
+        magic("router", el => closest(el, n => n._b_router)?._b_router);
+
+        magic("active", el => {
+            const router = closest(el, node => node._b_router)?._b_router;
+            if (is_nullish(router)) {
+                warn("No x-router directive found");
+                return;
+            }
+
+            return router.history.resolve(el.href) === router.values.path;
+        });
+    }
+
+    function plugin(alpine) {
+        window.RoutePattern = RoutePattern;
+        alpine.plugin([router, route]);
+    }
+
+    document.addEventListener("alpine:init", () => { Alpine.plugin(plugin); });
+
+})();