@ramstack/alpinegear-router 1.4.3 → 1.4.4

package/alpinegear-router.esm.js

@@ -1,643 +1,643 @@
-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) {
@@ -665,7 +665,7 @@ function watch(get_value, callback, options = null) {
             setTimeout(() => {
                 callback(new_value, old_value);
                 old_value = new_value;
-            }, 0);
+            });
         }
 
         initialized = true;
@@ -674,232 +674,232 @@ function watch(get_value, callback, options = null) {
     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]);
 }
 
-export { RoutePattern, plugin as router };
+export { RoutePattern, plugin as default, plugin as router };