@ramstack/alpinegear-router 1.4.3 → 1.4.4

package/alpinegear-router.js

@@ -1,646 +1,646 @@
 (function () {
     'use strict';
 
-    const warn = (...args) => console.warn("alpinegear.js:", ...args);
-    const is_array = Array.isArray;
-    const is_nullish = value => value === null || value === undefined;
-    const is_template = el => el.matches("template");
-    const is_function = value => typeof value === "function";
-    const as_array = value => is_array(value) ? value : [value];
-    const has_modifier = (modifiers, modifier) => modifiers.includes(modifier);
-
-    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 warn = (...args) => console.warn("alpinegear.js:", ...args);
+    const is_array = Array.isArray;
+    const is_nullish = value => value === null || value === undefined;
+    const is_template = el => el.matches("template");
+    const is_function = value => typeof value === "function";
+    const as_array = value => is_array(value) ? value : [value];
+    const has_modifier = (modifiers, modifier) => modifiers.includes(modifier);
+
+    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 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) {
-            let values = value.split(",").map(v => v.trim());
-            return {
-                test: values.length == 2
-                    ? v => v.length >=  +values[0] && v.length <= +values[1]
-                    : v => v.length === +values[0]
-            };
-        },
-        "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_regex(
-                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
-                            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_regex(pattern, segments, parameters, constraints) {
-        segments.push(...parse_route_pattern(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_route_pattern(pattern, factories) {
-        return preprocess_segments(parse_segments());
-
-        function preprocess_segments(segments) {
-            if (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?.[constraint.name] ?? default_constraints[constraint.name];
-                        is_nullish(factory) && throw_error(`Unknown constraint '${ constraint.name }'`);
-                        Object.assign(constraint, factory(constraint.argument));
-                    }
-                }
-            });
-
-            return segments;
-        }
-
-        function parse_segments() {
-            const segments = [];
-
-            for (let i = 0; i < pattern.length;) {
-                const segment = parse_segment(i);
-                segment.template && segments.push(segment);
-                i += segment.template.length + 1;
-            }
-
-            return segments;
-        }
-
-        function parse_segment(pos) {
-            let parts = [];
-            let index = pos;
-
-            while (index < pattern.length && pattern[index] !== "/") {
-                const part = parse_literal(index) || parse_parameter(index);
-                parts.push(part);
-
-                index += part.template.length;
-            }
-
-            return {
-                template: pattern.slice(pos, index),
-                parts: parts
-            }
-        }
-
-        function parse_constraints(text, p) {
-            const array = [];
-
-            for (let i = p; i < text.length;) {
-                if (text[i] !== ":") {
-                    throw_error();
-                }
-
-                const name = get_constraint_name(text.slice(i + 1));
-                i += name.length + 1;
-
-                const arg = text[i] === "("
-                    ? get_parameter_template(i, text)
-                    : null;
-
-                is_nullish(arg) || (i += arg.length + 2);
-
-                if (!name && !arg) {
-                    throw_error();
-                }
-
-                array.push({
-                    name: name === "=" ? "default" : name || "regex",
-                    argument: arg ?? ""
-                });
-
-            }
-
-            return array;
-        }
-
-        function parse_parameter(p) {
-            if (pattern[p] !== "{") {
-                return null;
-            }
-
-            const template = get_parameter_template(p);
-            const parameter_template = pattern.slice(p, p + template.length + 2);
-            const name = get_parameter_name(template);
-            const quantifier = /[*+?]/.exec(template[name.length])?.[0] ?? "";
-            const list = parse_constraints(template, name.length + quantifier.length);
-
-            return {
-                name: name,
-                kind: "parameter",
-                template: parameter_template,
-                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 parse_literal(pos) {
-            for (let i = pos; ; i++) {
-                if (i >= pattern.length || pattern[i] === "/" || pattern[i] === "{") {
-                    if (i === pos) {
-                        return null;
-                    }
-
-                    const template = pattern.slice(pos, i);
-                    return {
-                        kind: "literal",
-                        template: template,
-                        value: template
-                    };
-                }
-            }
-        }
-
-        function get_parameter_template(pos, str) {
-            str ??= pattern;
-            const stack = [];
-
-            loop: for (let i = pos; i < str.length; i++) {
-                switch (str[i]) {
-                    case "{": stack.push("}"); break;
-                    case "(": stack.push(")"); break;
-                    case "}":
-                    case ")":
-                        if (stack.pop() !== str[i]) break loop;
-                        break;
-                }
-
-                if (stack.length === 0) {
-                    return str.slice(pos + 1, i);
-                }
-            }
-
-            throw_error();
-        }
-
-        function get_parameter_name(value) {
-            const name = value.match(/^(?<name>[a-z_$][a-z0-9_$-]*?)(?:[:?+*]|$)/i)?.groups?.name;
-            is_nullish(name) && throw_error("Invalid parameter name");
-
-            return name;
-        }
-
-        function get_constraint_name(value) {
-            const name = value.match(/^(?<name>=|[a-z0-9_$]*)(?=[/:(]|$)/i)?.groups?.name;
-            is_nullish(name) && throw_error("Invalid constraint name");
-
-            return name;
-        }
-
-        function throw_error(message = "Invalid pattern") {
-            throw new Error(`${ message }: ${ pattern }`);
-        }
+    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) {
+            let values = value.split(",").map(v => v.trim());
+            return {
+                test: values.length == 2
+                    ? v => v.length >=  +values[0] && v.length <= +values[1]
+                    : v => v.length === +values[0]
+            };
+        },
+        "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_regex(
+                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
+                            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;
+        }
     }
 
-    async function load_template(path) {
-        let result;
-        try {
-            result = await fetch(path);
-        }
-        catch {
-            // skip
-        }
-
-        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 build_regex(pattern, segments, parameters, constraints) {
+        segments.push(...parse_route_pattern(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 route({ directive, $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;
-            }
-
-            //
-            // x-route:view and x-route:handler must be declared on the same element as x-route
-            //
-            const route = el._r_route;
-
-            if (!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 = $data(el)?.$router;
-                if (router) {
-                    const view = () => new Promise(resolve => resolve(el.content));
-
-                    el._r_route = Object.assign(new RoutePattern(expression), { el, view, handler: () => Promise.resolve() });
-                    router.routes.push(el._r_route);
-
-                    cleanup(() => router.routes = router.routes.filter(r => r !== el._r_route));
-                }
-                else {
-                    warn(`no x-router directive found`);
-                }
-            }
-
-            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()));
-                });
-            }
-        });
+    function parse_route_pattern(pattern, factories) {
+        return preprocess_segments(parse_segments());
+
+        function preprocess_segments(segments) {
+            if (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?.[constraint.name] ?? default_constraints[constraint.name];
+                        is_nullish(factory) && throw_error(`Unknown constraint '${ constraint.name }'`);
+                        Object.assign(constraint, factory(constraint.argument));
+                    }
+                }
+            });
+
+            return segments;
+        }
+
+        function parse_segments() {
+            const segments = [];
+
+            for (let i = 0; i < pattern.length;) {
+                const segment = parse_segment(i);
+                segment.template && segments.push(segment);
+                i += segment.template.length + 1;
+            }
+
+            return segments;
+        }
+
+        function parse_segment(pos) {
+            let parts = [];
+            let index = pos;
+
+            while (index < pattern.length && pattern[index] !== "/") {
+                const part = parse_literal(index) || parse_parameter(index);
+                parts.push(part);
+
+                index += part.template.length;
+            }
+
+            return {
+                template: pattern.slice(pos, index),
+                parts: parts
+            }
+        }
+
+        function parse_constraints(text, p) {
+            const array = [];
+
+            for (let i = p; i < text.length;) {
+                if (text[i] !== ":") {
+                    throw_error();
+                }
+
+                const name = get_constraint_name(text.slice(i + 1));
+                i += name.length + 1;
+
+                const arg = text[i] === "("
+                    ? get_parameter_template(i, text)
+                    : null;
+
+                is_nullish(arg) || (i += arg.length + 2);
+
+                if (!name && !arg) {
+                    throw_error();
+                }
+
+                array.push({
+                    name: name === "=" ? "default" : name || "regex",
+                    argument: arg ?? ""
+                });
+
+            }
+
+            return array;
+        }
+
+        function parse_parameter(p) {
+            if (pattern[p] !== "{") {
+                return null;
+            }
+
+            const template = get_parameter_template(p);
+            const parameter_template = pattern.slice(p, p + template.length + 2);
+            const name = get_parameter_name(template);
+            const quantifier = /[*+?]/.exec(template[name.length])?.[0] ?? "";
+            const list = parse_constraints(template, name.length + quantifier.length);
+
+            return {
+                name: name,
+                kind: "parameter",
+                template: parameter_template,
+                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 parse_literal(pos) {
+            for (let i = pos; ; i++) {
+                if (i >= pattern.length || pattern[i] === "/" || pattern[i] === "{") {
+                    if (i === pos) {
+                        return null;
+                    }
+
+                    const template = pattern.slice(pos, i);
+                    return {
+                        kind: "literal",
+                        template: template,
+                        value: template
+                    };
+                }
+            }
+        }
+
+        function get_parameter_template(pos, str) {
+            str ??= pattern;
+            const stack = [];
+
+            loop: for (let i = pos; i < str.length; i++) {
+                switch (str[i]) {
+                    case "{": stack.push("}"); break;
+                    case "(": stack.push(")"); break;
+                    case "}":
+                    case ")":
+                        if (stack.pop() !== str[i]) break loop;
+                        break;
+                }
+
+                if (stack.length === 0) {
+                    return str.slice(pos + 1, i);
+                }
+            }
+
+            throw_error();
+        }
+
+        function get_parameter_name(value) {
+            const name = value.match(/^(?<name>[a-z_$][a-z0-9_$-]*?)(?:[:?+*]|$)/i)?.groups?.name;
+            is_nullish(name) && throw_error("Invalid parameter name");
+
+            return name;
+        }
+
+        function get_constraint_name(value) {
+            const name = value.match(/^(?<name>=|[a-z0-9_$]*)(?=[/:(]|$)/i)?.groups?.name;
+            is_nullish(name) && throw_error("Invalid constraint name");
+
+            return name;
+        }
+
+        function throw_error(message = "Invalid pattern") {
+            throw new Error(`${ message }: ${ pattern }`);
+        }
     }
 
-    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];
-            }
-        }
+    async function load_template(path) {
+        let result;
+        try {
+            result = await fetch(path);
+        }
+        catch {
+            // skip
+        }
+
+        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;
     }
 
-    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 route({ directive, $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;
+            }
+
+            //
+            // x-route:view and x-route:handler must be declared on the same element as x-route
+            //
+            const route = el._r_route;
+
+            if (!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 = $data(el)?.$router;
+                if (router) {
+                    const view = () => new Promise(resolve => resolve(el.content));
+
+                    el._r_route = Object.assign(new RoutePattern(expression), { el, view, handler: () => Promise.resolve() });
+                    router.routes.push(el._r_route);
+
+                    cleanup(() => router.routes = router.routes.filter(r => r !== el._r_route));
+                }
+                else {
+                    warn(`no x-router directive found`);
+                }
+            }
+
+            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()));
+                });
+            }
+        });
+    }
+
+    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 watch(get_value, callback, options = null) {
@@ -668,7 +668,7 @@
                 setTimeout(() => {
                     callback(new_value, old_value);
                     old_value = new_value;
-                }, 0);
+                });
             }
 
             initialized = true;
@@ -677,234 +677,234 @@
         return () => release(handle);
     }
 
-    function router({ $data, addScopeToNode, directive, magic, reactive }) {
-        directive("router", (el, { modifiers, value }, { cleanup }) => {
-            value || (value = "html5");
-
-            const router = $data(el).$router;
-
-            if (!router && (value === "outlet" || value === "link")) {
-                warn(`x-router:${value} is missing a parent x-router`);
-                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 = 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;
-                    }
-                };
-
-                addScopeToNode(el, { $route: values, $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() {
-                let link = get_anchor_element(el);
-                if (link) {
-                    el._r_routerlink = link;
-
-                    const is_blank = (link.getAttribute("target") ?? "").indexOf("_blank") >= 0;
-                    const unsubscribe = listen(link, "click", e => {
-                        if (e.metaKey
-                            || e.altKey
-                            || e.ctrlKey
-                            || e.shiftKey
-                            || e.defaultPrevented
-                            || e.button > 0
-                            || is_blank) {
-                            return;
-                        }
-
-                        e.preventDefault();
-
-                        router.navigate(`${ link.pathname }${ link.search }${ link.hash }`, has_modifier(modifiers, "replace"));
-                    });
-
-                    cleanup(unsubscribe);
-                }
-
-                //
-                // A warning about a non-existing anchor element is printed in the get_anchor_element function.
-                // warn("<a> element not found")
-                //
-            }
-
-            function process_outlet() {
-                if (router.outlet) {
-                    warn("x-router:outlet is already present", router.outlet, el);
-                }
-                else {
-                    router.outlet = el;
-                    cleanup(() => router.outlet = null);
-                }
-            }
-        });
-
-        magic("active", el => {
-            const router = $data(el).$router;
-            if (!router) {
-                warn("No x-router directive found");
-                return false;
-            }
-
-            //
-            // Create a dependency on router.values
-            //
-            JSON.stringify(router.values);
-
-            const link = is_anchor_element(el) ? el : closest(el, node => node._r_routerlink)?._r_routerlink;
-
-            //
-            // The issue is that the router:link directive is processed later than x-bind,
-            // and if $active is used in x-bind, we won’t find node._r_routerlink.
-            // Therefore, we delay execution and try again.
-            //
-            // <div x-router:link :class="{ active: $active }">
-            //    ...
-            // </div>
-            //
-
-            if (link) {
-                return router.history.resolve(link.href) === router.values.path;
-            }
-
-            if (el._r_routerlink_init) {
-                warn(`x-router:link directive not found`, el);
-            }
-            else {
-                queueMicrotask(() => {
-                    el._r_routerlink_init = true;
-                    //
-                    // Force an upate
-                    //
-                    router.values.path = router.values.path;
-                });
-            }
-
-            return false;
-        });
-    }
-
-    function is_anchor_element(el) {
-        return el.tagName.toUpperCase() === "A";
-    }
-
-    function get_anchor_element(el) {
-        if (is_anchor_element(el)) {
-            return el;
-        }
-
-        const links = el.querySelectorAll("a");
-        links.length !== 1 && warn(`Expected exactly one link, but found ${links.length}`);
-        return links[0];
+    function router({ $data, addScopeToNode, directive, magic, reactive }) {
+        directive("router", (el, { modifiers, value }, { cleanup }) => {
+            value || (value = "html5");
+
+            const router = $data(el).$router;
+
+            if (!router && (value === "outlet" || value === "link")) {
+                warn(`x-router:${value} is missing a parent x-router`);
+                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 = 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;
+                    }
+                };
+
+                addScopeToNode(el, { $route: values, $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() {
+                let link = get_anchor_element(el);
+                if (link) {
+                    el._r_routerlink = link;
+
+                    const is_blank = (link.getAttribute("target") ?? "").indexOf("_blank") >= 0;
+                    const unsubscribe = listen(link, "click", e => {
+                        if (e.metaKey
+                            || e.altKey
+                            || e.ctrlKey
+                            || e.shiftKey
+                            || e.defaultPrevented
+                            || e.button > 0
+                            || is_blank) {
+                            return;
+                        }
+
+                        e.preventDefault();
+
+                        router.navigate(`${ link.pathname }${ link.search }${ link.hash }`, has_modifier(modifiers, "replace"));
+                    });
+
+                    cleanup(unsubscribe);
+                }
+
+                //
+                // A warning about a non-existing anchor element is printed in the get_anchor_element function.
+                // warn("<a> element not found")
+                //
+            }
+
+            function process_outlet() {
+                if (router.outlet) {
+                    warn("x-router:outlet is already present", router.outlet, el);
+                }
+                else {
+                    router.outlet = el;
+                    cleanup(() => router.outlet = null);
+                }
+            }
+        });
+
+        magic("active", el => {
+            const router = $data(el).$router;
+            if (!router) {
+                warn("No x-router directive found");
+                return false;
+            }
+
+            //
+            // Create a dependency on router.values
+            //
+            JSON.stringify(router.values);
+
+            const link = is_anchor_element(el) ? el : closest(el, node => node._r_routerlink)?._r_routerlink;
+
+            //
+            // The issue is that the router:link directive is processed later than x-bind,
+            // and if $active is used in x-bind, we won’t find node._r_routerlink.
+            // Therefore, we delay execution and try again.
+            //
+            // <div x-router:link :class="{ active: $active }">
+            //    ...
+            // </div>
+            //
+
+            if (link) {
+                return router.history.resolve(link.href) === router.values.path;
+            }
+
+            if (el._r_routerlink_init) {
+                warn(`x-router:link directive not found`, el);
+            }
+            else {
+                queueMicrotask(() => {
+                    el._r_routerlink_init = true;
+                    //
+                    // Force an upate
+                    //
+                    router.values.path = router.values.path;
+                });
+            }
+
+            return false;
+        });
+    }
+
+    function is_anchor_element(el) {
+        return el.tagName.toUpperCase() === "A";
+    }
+
+    function get_anchor_element(el) {
+        if (is_anchor_element(el)) {
+            return el;
+        }
+
+        const links = el.querySelectorAll("a");
+        links.length !== 1 && warn(`Expected exactly one link, but found ${links.length}`);
+        return links[0];
     }
 
-    function plugin(alpine) {
-        window.RoutePattern = RoutePattern;
-        alpine.plugin([router, route]);
+    function plugin(alpine) {
+        window.RoutePattern = RoutePattern;
+        alpine.plugin([router, route]);
     }
 
-    document.addEventListener("alpine:init", () => { Alpine.plugin(plugin); });
+    listen(document, "alpine:init", () => Alpine.plugin(plugin));
 
 })();