wj-elements 0.1.129 → 0.1.130

package/dist/wje-routerx.js

@@ -1,207 +1,8 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { r as routerLinks } from "./router-links-CJnOdbas.js";
 import WJElement from "./wje-element.js";
-import { r as routerLinks } from "./router-links-I2vcmVCs.js";
-var DEFAULT_DELIMITER = "/";
-function balanced(open, close, str, index) {
-  var count = 0;
-  var i = index;
-  while (i < str.length) {
-    if (str[i] === "\\") {
-      i += 2;
-      continue;
-    }
-    if (str[i] === close) {
-      count--;
-      if (count === 0)
-        return i + 1;
-    }
-    if (str[i] === open) {
-      count++;
-    }
-    i++;
-  }
-  return -1;
-}
-function parse(str, options) {
-  if (options === void 0) {
-    options = {};
-  }
-  var _a, _b;
-  var tokens = [];
-  var defaultDelimiter = (_a = options.delimiter, _a !== null && _a !== void 0 ? _a : DEFAULT_DELIMITER);
-  var whitelist = (_b = options.whitelist, _b !== null && _b !== void 0 ? _b : void 0);
-  var i = 0;
-  var key = 0;
-  var path = "";
-  var isEscaped = false;
-  while (i < str.length) {
-    var prefix = "";
-    var name = "";
-    var pattern = "";
-    if (str[i] === "\\") {
-      i++;
-      path += str[i++];
-      isEscaped = true;
-      continue;
-    }
-    if (str[i] === ":") {
-      while (++i < str.length) {
-        var code = str.charCodeAt(i);
-        if (
-          // `0-9`
-          code >= 48 && code <= 57 || // `A-Z`
-          code >= 65 && code <= 90 || // `a-z`
-          code >= 97 && code <= 122 || // `_`
-          code === 95
-        ) {
-          name += str[i];
-          continue;
-        }
-        break;
-      }
-      if (!name)
-        i--;
-    }
-    if (str[i] === "(") {
-      var end = balanced("(", ")", str, i);
-      if (end > -1) {
-        pattern = str.slice(i + 1, end - 1);
-        i = end;
-        if (pattern[0] === "?") {
-          throw new TypeError("Path pattern must be a capturing group");
-        }
-        if (/\((?=[^?])/.test(pattern)) {
-          var validPattern = pattern.replace(/\((?=[^?])/, "(?:");
-          throw new TypeError("Capturing groups are not allowed in pattern, use a non-capturing group: (" + validPattern + ")");
-        }
-      }
-    }
-    if (name === "" && pattern === "") {
-      path += str[i++];
-      isEscaped = false;
-      continue;
-    }
-    if (path.length && !isEscaped) {
-      var char = path[path.length - 1];
-      var matches = whitelist ? whitelist.indexOf(char) > -1 : true;
-      if (matches) {
-        prefix = char;
-        path = path.slice(0, -1);
-      }
-    }
-    if (path.length) {
-      tokens.push(path);
-      path = "";
-    }
-    var repeat = str[i] === "+" || str[i] === "*";
-    var optional = str[i] === "?" || str[i] === "*";
-    var delimiter = prefix || defaultDelimiter;
-    if (repeat || optional)
-      i++;
-    tokens.push({
-      name: name || key++,
-      prefix,
-      delimiter,
-      optional,
-      repeat,
-      pattern: pattern || "[^" + escapeString(delimiter === defaultDelimiter ? delimiter : delimiter + defaultDelimiter) + "]+?"
-    });
-  }
-  if (path.length)
-    tokens.push(path);
-  return tokens;
-}
-function escapeString(str) {
-  return str.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1");
-}
-function flags(options) {
-  return options && options.sensitive ? "" : "i";
-}
-function regexpToRegexp(path, keys2) {
-  if (!keys2)
-    return path;
-  var groups = path.source.match(/\((?!\?)/g);
-  if (groups) {
-    for (var i = 0; i < groups.length; i++) {
-      keys2.push({
-        name: i,
-        prefix: "",
-        delimiter: "",
-        optional: false,
-        repeat: false,
-        pattern: ""
-      });
-    }
-  }
-  return path;
-}
-function arrayToRegexp(paths, keys2, options) {
-  var parts = paths.map(function(path) {
-    return pathToRegexp(path, keys2, options).source;
-  });
-  return new RegExp("(?:" + parts.join("|") + ")", flags(options));
-}
-function stringToRegexp(path, keys2, options) {
-  return tokensToRegexp(parse(path, options), keys2, options);
-}
-function tokensToRegexp(tokens, keys2, options) {
-  if (options === void 0) {
-    options = {};
-  }
-  var strict = options.strict, _a = options.start, start = _a === void 0 ? true : _a, _b = options.end, end = _b === void 0 ? true : _b, _c = options.delimiter, delimiter = _c === void 0 ? DEFAULT_DELIMITER : _c, _d = options.encode, encode = _d === void 0 ? function(x) {
-    return x;
-  } : _d;
-  var endsWith = (typeof options.endsWith === "string" ? options.endsWith.split("") : options.endsWith || []).map(escapeString).concat("$").join("|");
-  var route = start ? "^" : "";
-  for (var _i = 0, tokens_1 = tokens; _i < tokens_1.length; _i++) {
-    var token = tokens_1[_i];
-    if (typeof token === "string") {
-      route += escapeString(encode(token));
-    } else {
-      var capture = token.repeat ? "(?:" + token.pattern + ")(?:" + escapeString(token.delimiter) + "(?:" + token.pattern + "))*" : token.pattern;
-      if (keys2)
-        keys2.push(token);
-      if (token.optional) {
-        if (!token.prefix) {
-          route += "(" + capture + ")?";
-        } else {
-          route += "(?:" + escapeString(token.prefix) + "(" + capture + "))?";
-        }
-      } else {
-        route += escapeString(token.prefix) + "(" + capture + ")";
-      }
-    }
-  }
-  if (end) {
-    if (!strict)
-      route += "(?:" + escapeString(delimiter) + ")?";
-    route += endsWith === "$" ? "$" : "(?=" + endsWith + ")";
-  } else {
-    var endToken = tokens[tokens.length - 1];
-    var isEndDelimited = typeof endToken === "string" ? endToken[endToken.length - 1] === delimiter : (
-      // tslint:disable-next-line
-      endToken === void 0
-    );
-    if (!strict) {
-      route += "(?:" + escapeString(delimiter) + "(?=" + endsWith + "))?";
-    }
-    if (!isEndDelimited) {
-      route += "(?=" + escapeString(delimiter) + "|" + endsWith + ")";
-    }
-  }
-  return new RegExp(route, flags(options));
-}
-function pathToRegexp(path, keys2, options) {
-  if (path instanceof RegExp) {
-    return regexpToRegexp(path, keys2);
-  }
-  if (Array.isArray(path)) {
-    return arrayToRegexp(path, keys2, options);
-  }
-  return stringToRegexp(path, keys2, options);
-}
 const assoc = (obj, attr, val) => {
   obj[attr] = val;
   return obj;
@@ -218,9 +19,7 @@ const extend = Object.assign;
 function invariant(condition, format, ...args) {
   if (!condition) {
     let argIndex = 0;
-    throw new Error(
-      "Invariant Violation: " + format.replace(/%s/g, () => args[argIndex++])
-    );
+    throw new Error("Invariant Violation: " + format.replace(/%s/g, () => args[argIndex++]));
   }
 }
 function functionDsl(callback) {
@@ -229,7 +28,11 @@ function functionDsl(callback) {
   const names = {};
   callback(function route(name, options, childrenCallback) {
     let routes;
-    invariant(!names[name], 'Route names must be unique, but route "%s" is declared multiple times', name);
+    invariant(
+      !names[name],
+      'Route names must be unique, but route "%s" is declared multiple times',
+      name
+    );
     names[name] = true;
     if (arguments.length === 1) {
       options = {};
@@ -275,14 +78,12 @@ function arrayDsl(routes) {
       const parts = name.split(".");
       options.path = parts[parts.length - 1];
     }
-    result.push(
-      {
-        name,
-        path: options.path,
-        options,
-        routes: children ? arrayDsl(children) : []
-      }
-    );
+    result.push({
+      name,
+      path: options.path,
+      options,
+      routes: children ? arrayDsl(children) : []
+    });
   });
   return result;
 }
@@ -290,22 +91,17 @@ const paramInjectMatcher = /:([a-zA-Z_$][a-zA-Z0-9_$?]*[?+*]?)/g;
 const specialParamChars = /[+*?]$/g;
 const queryMatcher = /\?(.+)/;
 const _compiledPatterns = {};
-function compilePattern(pattern) {
+function compilePattern(pattern, compiler) {
   if (!(pattern in _compiledPatterns)) {
-    const paramNames = [];
-    const re = pathToRegexp(pattern, paramNames);
-    _compiledPatterns[pattern] = {
-      matcher: re,
-      paramNames: paramNames.map((p) => p.name)
-    };
+    _compiledPatterns[pattern] = compiler(pattern);
   }
   return _compiledPatterns[pattern];
 }
-function extractParamNames(pattern) {
-  return compilePattern(pattern).paramNames;
+function extractParamNames(pattern, compiler) {
+  return compilePattern(pattern, compiler).paramNames;
 }
-function extractParams(pattern, path) {
-  const cp = compilePattern(pattern);
+function extractParams(pattern, path, compiler) {
+  const cp = compilePattern(pattern, compiler);
   const matcher = cp.matcher;
   const paramNames = cp.paramNames;
   const match = path.match(matcher);
@@ -337,7 +133,7 @@ function injectParams(pattern, params) {
     }
     let paramValue = encodeURIComponent(params[paramName]);
     if (lastChar === "*" || lastChar === "+") {
-      paramValue = paramValue.replaceAll("%2F", "/");
+      paramValue = paramValue.replace("%2F", "/");
     }
     return paramValue;
   });
@@ -508,10 +304,13 @@ const pathStripper = /#.*$/;
 class BrowserLocation {
   constructor(options = {}) {
     this.path = options.path || "";
-    this.options = extend({
-      pushState: false,
-      root: "/"
-    }, options);
+    this.options = extend(
+      {
+        pushState: false,
+        root: "/"
+      },
+      options
+    );
     this.locationBar = new History();
     this.locationBar.onChange((path) => {
       this.handleURL(`/${path || ""}`);
@@ -663,7 +462,11 @@ function transition(options) {
   const startTime = Date.now();
   log("---");
   log("Transition #" + id, "to", path);
-  log("Transition #" + id, "routes:", routes.map((r) => r.name));
+  log(
+    "Transition #" + id,
+    "routes:",
+    routes.map((r) => r.name)
+  );
   log("Transition #" + id, "params:", params);
   log("Transition #" + id, "query:", query);
   let resolve2, reject;
@@ -752,7 +555,11 @@ function transition(options) {
       let middlewarePromise;
       try {
         middlewarePromise = middleware.resolve ? middleware.resolve(transition2, prevResult) : prevResult;
-        invariant(transition2 !== middlewarePromise, "Middleware %s returned a transition which resulted in a deadlock", middlewareName);
+        invariant(
+          transition2 !== middlewarePromise,
+          "Middleware %s returned a transition which resulted in a deadlock",
+          middlewareName
+        );
       } catch (err) {
         router2.state.activeTransition = null;
         runError(router2, transition2, err);
@@ -796,34 +603,17 @@ function intercept(el, fn) {
     if (clickable(e, el2)) fn(e, el2);
   });
   return function dispose() {
-    undelegate(el, "click", cb);
+    unbindEvent(el, "click", cb);
   };
 }
-function link(element) {
-  var _a;
-  element = { parentNode: element };
-  const root = document;
-  while ((element = element.parentNode) && element !== document) {
-    if (((_a = element.tagName) == null ? void 0 : _a.toLowerCase()) === "a") {
-      return element;
-    }
-    if (element === root) {
-      return;
-    }
-  }
-}
 function delegate(el, type, fn) {
   return bindEvent(el, type, function(e) {
-    const target = e.target || e.srcElement;
-    const el2 = link(target);
+    const el2 = e.target.closest("a");
     if (el2) {
       fn(e, el2);
     }
   });
 }
-function undelegate(el, type, fn) {
-  unbindEvent(el, type, fn);
-}
 function clickable(e, el) {
   if (which(e) !== 1) return;
   if (e.metaKey || e.ctrlKey || e.shiftKey) return;
@@ -832,10 +622,7 @@ function clickable(e, el) {
   if (el.getAttribute("data-bypass") !== null) return;
   const href = el.getAttribute("href");
   if (!href || href.length === 0) return;
-  if (href[0] === "#") return;
-  if (href.indexOf("http://") === 0 || href.indexOf("https://") === 0) return;
-  if (href.indexOf("mailto:") === 0) return;
-  if (href.indexOf("javascript:") === 0) return;
+  if (/^(#|https{0,1}:\/\/|mailto|javascript:)/i.test(href)) return;
   return true;
 }
 function which(e) {
@@ -847,7 +634,7 @@ function defineLogger(router2, method, fn) {
   router2[method] = typeof fn === "function" ? fn : () => {
   };
 }
-var qs = {
+const qs = {
   parse(querystring) {
     return querystring.split("&").reduce((acc, pair) => {
       const parts = pair.split("=");
@@ -864,16 +651,58 @@ var qs = {
     }, []).join("&");
   }
 };
-class Router {
+function parse(input, loose) {
+  if (input instanceof RegExp) return { keys: false, pattern: input };
+  var c, o, tmp, ext, keys2 = [], pattern = "", arr = input.split("/");
+  arr[0] || arr.shift();
+  while (tmp = arr.shift()) {
+    c = tmp[0];
+    if (c === "*") {
+      keys2.push(c);
+      pattern += tmp[1] === "?" ? "(?:/(.*))?" : "/(.*)";
+    } else if (c === ":") {
+      o = tmp.indexOf("?", 1);
+      ext = tmp.indexOf(".", 1);
+      keys2.push(tmp.substring(1, !!~o ? o : !!~ext ? ext : tmp.length));
+      pattern += !!~o && !~ext ? "(?:/([^/]+?))?" : "/([^/]+?)";
+      if (!!~ext) pattern += (!!~o ? "?" : "") + "\\" + tmp.substring(ext);
+    } else {
+      pattern += "/" + tmp;
+    }
+  }
+  return {
+    keys: keys2,
+    pattern: new RegExp("^" + pattern + "/?$", "i")
+  };
+}
+const splatRegex = /:(\w+)\*/;
+function patternCompiler(pattern) {
+  const splatMatch = splatRegex.exec(pattern);
+  const normalizedPattern = splatMatch ? pattern.replace(splatRegex, "*") : pattern;
+  const { pattern: matcher, keys: keys2 } = parse(normalizedPattern);
+  const paramNames = splatMatch ? keys2.map((key) => key === "*" ? splatMatch[1] : key) : keys2;
+  return {
+    matcher,
+    paramNames
+  };
+}
+let Router$1 = class Router {
+  /**
+   * @param {RouterOptions} [options]
+   */
   constructor(options = {}) {
     this.nextId = 1;
     this.state = {};
     this.middleware = [];
-    this.options = extend({
-      location: "browser",
-      logError: true,
-      qs
-    }, options);
+    this.options = extend(
+      {
+        location: "browser",
+        logError: true,
+        qs,
+        patternCompiler
+      },
+      options
+    );
     defineLogger(this, "log", this.options.log);
     defineLogger(this, "logError", this.options.logError);
     if (options.routes) {
@@ -883,7 +712,7 @@ class Router {
   /**
    * Add a middleware
    * @param  {Function} middleware
-   * @return {Object}   router
+   * @return {Router}
    * @api public
    */
   use(middleware, options = {}) {
@@ -894,8 +723,8 @@ class Router {
   }
   /**
    * Add the route map
-   * @param  {Function} routes
-   * @return {Object}   router
+   * @param  {routeCallback | RouteDef[]} routes
+   * @return {Router}
    * @api public
    */
   map(routes) {
@@ -904,11 +733,13 @@ class Router {
     const dupes = {};
     const abstracts = {};
     eachBranch({ routes: this.routes }, [], (routes2) => {
-      let path = routes2.reduce((memo, r) => (
-        // reset if there's a leading slash, otherwise concat
-        // and keep resetting the trailing slash
-        (r.path[0] === "/" ? r.path : `${memo}/${r.path}`).replace(/\/$/, "")
-      ), "");
+      let path = routes2.reduce(
+        (memo, r) => (
+          // and keep resetting the trailing slash
+          (r.path[0] === "/" ? r.path : `${memo}/${r.path}`).replace(/\/$/, "")
+        ),
+        ""
+      );
       if (path === "") {
         path = "/";
       }
@@ -941,7 +772,9 @@ class Router {
         path
       });
       if (dupes[path] && lastRoute.path !== "") {
-        throw new Error(`Routes ${dupes[path]} and ${lastRoute.name} have the same url path '${path}'`);
+        throw new Error(
+          `Routes ${dupes[path]} and ${lastRoute.name} have the same url path '${path}'`
+        );
       }
       dupes[path] = lastRoute.name;
     });
@@ -957,8 +790,8 @@ class Router {
   }
   /**
    * Starts listening to the location changes.
-   * @param  {Object}  location (optional)
-   * @return {Promise} initial transition
+   * @param  {String}  [path]
+   * @return {Transition} initial transition
    *
    * @api public
    */
@@ -977,10 +810,10 @@ class Router {
   }
   /**
    * Transition to a different route. Passe in url or a route name followed by params and query
-   * @param  {String} url     url or route name
-   * @param  {Object} params  Optional
-   * @param  {Object} query   Optional
-   * @return {Object}         transition
+   * @param  {String} name     url or route name
+   * @param  {Object} [params]  Optional
+   * @param  {Object} [query]   Optional
+   * @return {Transition}         transition
    *
    * @api public
    */
@@ -993,10 +826,10 @@ class Router {
   /**
    * Like transitionTo, but doesn't leave an entry in the browser's history,
    * so clicking back will skip this route
-   * @param  {String} url     url or route name followed by params and query
-   * @param  {Object} params  Optional
-   * @param  {Object} query   Optional
-   * @return {Object}         transition
+   * @param  {String} name     url or route name followed by params and query
+   * @param  {Record<string, any>} [params]
+   * @param  {Record<string, any>} [query]
+   * @return {Transition}         transition
    *
    * @api public
    */
@@ -1006,8 +839,8 @@ class Router {
   /**
    * Create an href
    * @param  {String} name   target route name
-   * @param  {Object} params
-   * @param  {Object} query
+   * @param  {Object} [params]
+   * @param  {Object} [query]
    * @return {String}        href
    *
    * @api public
@@ -1046,8 +879,9 @@ class Router {
   /**
    * Check if the given route/params/query combo is active
    * @param  {String} name   target route name
-   * @param  {Object} params
-   * @param  {Object} query
+   * @param  {Record<string, any>} [params]
+   * @param  {Record<string, any>} [query]
+   * @param  {Boolean} [exact]
    * @return {Boolean}
    *
    * @api public
@@ -1063,6 +897,11 @@ class Router {
   }
   /**
    * @api private
+   * @param  {String} method  pushState or replaceState
+   * @param  {String} name    target route name
+   * @param  {Object} [params]
+   * @param  {Object} [query]
+   * @return {Transition}         transition
    */
   doTransition(method, name, params, query) {
     const previousUrl = this.location.getURL();
@@ -1096,9 +935,9 @@ class Router {
     let params;
     let routes = [];
     const pathWithoutQuery = withoutQuery(path);
-    const qs2 = this.options.qs;
+    const { qs: qs2, patternCompiler: patternCompiler2 } = this.options;
     this.matchers.some((matcher) => {
-      params = extractParams(matcher.path, pathWithoutQuery);
+      params = extractParams(matcher.path, pathWithoutQuery, patternCompiler2);
       if (params) {
         routes = matcher.routes;
         return true;
@@ -1114,11 +953,16 @@ class Router {
       return {
         name: route.name,
         path: route.path,
-        params: pick(params, extractParamNames(route.path)),
+        params: pick(params, extractParamNames(route.path, patternCompiler2)),
         options: clone(route.options)
       };
     }
   }
+  /**
+   *
+   * @param {string} path
+   * @returns {Transition}
+   */
   dispatch(path) {
     const match = this.match(path);
     const query = match.query;
@@ -1157,6 +1001,7 @@ class Router {
    * Create the default location.
    * This is used when no custom location is passed to
    * the listen call.
+   * @param  {LocationParam} path
    * @return {Object} location
    *
    * @api private
@@ -1180,42 +1025,41 @@ class Router {
   logError(...args) {
     console.error(...args);
   }
-}
-function defaultClickHandler(event, link2, router2) {
-  if (!link2.hasAttribute("download") && !link2.hasAttribute("data-phone-number")) {
-    event.preventDefault();
-    router2.transitionTo(router2.location.removeRoot(link2.getAttribute("href")));
-  }
+};
+function defaultClickHandler(event, link, router2) {
+  event.preventDefault();
+  router2.transitionTo(router2.location.removeRoot(link.getAttribute("href")));
 }
 function interceptLinks(router2, el = document, clickHandler = defaultClickHandler) {
-  return intercept(el, (event, link2) => clickHandler(event, link2, router2));
+  return intercept(el, (event, link) => clickHandler(event, link, router2));
 }
 const resolved = Promise.resolve();
 let routeElMap = /* @__PURE__ */ Object.create(null);
 let routeComponentMap = /* @__PURE__ */ Object.create(null);
+let routePropertiesMap = /* @__PURE__ */ Object.create(null);
 let router, rootOutlet, rootOutletEl;
 function parseNumber(value) {
   const n = parseFloat(value);
   const isNumeric = value == n;
   return isNumeric ? n : value;
 }
-class TransitionValue {
-  constructor(key, format) {
-    this.key = key;
-    this.format = format;
-  }
-  value(transition2) {
-    let result = this.getValue(transition2);
-    if (result !== void 0) {
-      const format = this.format;
-      if (format === "number") {
-        result = parseNumber(result);
-      } else if (typeof format === "function") {
-        result = format(result);
-      }
+function getFormattedValue(value, format) {
+  let v = value;
+  if (v !== void 0) {
+    if (format === "number") {
+      v = parseNumber(value);
+    } else if (typeof format === "function") {
+      v = format(value);
     }
-    return result;
   }
+  return v;
+}
+function fromValue(value) {
+  return {
+    init(setValue) {
+      setValue(value);
+    }
+  };
 }
 function create(instance) {
   router = instance;
@@ -1225,6 +1069,7 @@ function destroy() {
   router = null;
   routeElMap = /* @__PURE__ */ Object.create(null);
   routeComponentMap = /* @__PURE__ */ Object.create(null);
+  routePropertiesMap = /* @__PURE__ */ Object.create(null);
   rootOutletEl = null;
 }
 function isEqual(obj1, obj2) {
@@ -1233,7 +1078,7 @@ function isEqual(obj1, obj2) {
 }
 function getOutlet(el) {
   const renderRoot = el.shadowRoot || el;
-  return renderRoot.querySelector(el.constructor.outlet || "wje-router-outlet");
+  return renderRoot.querySelector(el.constructor.outlet || "router-outlet");
 }
 function resolveRootOutlet() {
   if (rootOutletEl) return rootOutletEl;
@@ -1265,6 +1110,19 @@ function getChangingIndex(prevRoutes, currentRoutes) {
   }
   return index;
 }
+function runPropertyHookMethod(transition2, routes, method) {
+  for (let i = 0; i < routes.length; i++) {
+    const { route } = routes[i];
+    const propertiesData = routePropertiesMap[route.name];
+    for (const { hooks, set } of Object.values(propertiesData)) {
+      hooks.forEach((hook) => {
+        if (typeof hook[method] === "function") {
+          hook[method](transition2, set);
+        }
+      });
+    }
+  }
+}
 async function runLifeCycle(transition2, routes, prefix, suffix) {
   for (let i = 0; i < routes.length; i++) {
     let result;
@@ -1290,7 +1148,44 @@ async function runLifeCycle(transition2, routes, prefix, suffix) {
 function resolveModule(value) {
   return value && value.__esModule ? value.default : value;
 }
-async function resolveComponents(routes) {
+function initPropertyHook(value) {
+  if (value && typeof value === "object") return value;
+  return fromValue(value);
+}
+function initProperties(route) {
+  let propertiesData = routePropertiesMap[route.name];
+  if (!propertiesData) {
+    propertiesData = routePropertiesMap[route.name] = /* @__PURE__ */ Object.create(null);
+    const properties = route.options.properties;
+    if (properties) {
+      for (const [name, hookOrValue] of Object.entries(properties)) {
+        const hooks = Array.isArray(hookOrValue) ? hookOrValue.map(initPropertyHook) : [initPropertyHook(hookOrValue)];
+        const set = (v, format) => {
+          const propertyData = propertiesData[name];
+          const newValue = getFormattedValue(v, format);
+          if (propertyData.value === newValue) return;
+          propertyData.value = newValue;
+          const el = routeElMap[route.name];
+          if (el) {
+            el[name] = newValue;
+          }
+          hooks.forEach((hook) => {
+            if (typeof hook.update === "function") {
+              hook.update(newValue, el);
+            }
+          });
+        };
+        propertiesData[name] = { hooks, set };
+        hooks.forEach((hook) => {
+          if (typeof hook.init === "function") {
+            hook.init(set);
+          }
+        });
+      }
+    }
+  }
+}
+async function resolveRoutes(routes) {
   const result = [];
   for (const route of routes) {
     let el = route.options.reuse ? routeElMap[route.name] : void 0;
@@ -1303,17 +1198,16 @@ async function resolveComponents(routes) {
       routeElMap[route.name] = el;
       el.$router = router;
     }
+    initProperties(route);
     result.push({ el, route });
   }
   return result;
 }
-function applyProperties(transition2, el, properties) {
-  if (properties) {
-    Object.keys(properties).forEach((key) => {
-      const value = properties[key];
-      el[key] = value instanceof TransitionValue ? value.value(transition2) : value;
-    });
-  }
+function applyProperties(el, route) {
+  const propertiesData = routePropertiesMap[route.name];
+  Object.entries(propertiesData).forEach(([name, { value }]) => {
+    el[name] = value;
+  });
 }
 const removedEls = /* @__PURE__ */ new WeakSet();
 const outletCurrentEl = /* @__PURE__ */ new WeakMap();
@@ -1325,7 +1219,7 @@ async function renderElements(transition2, activated, changingIndex) {
     const el = routeElMap[route.name];
     if (el) {
       el.$route = routeState;
-      applyProperties(transition2, el, route.options.properties);
+      applyProperties(el, route);
     }
   }
   for (let i = 0; i < activated.length; i++) {
@@ -1340,7 +1234,7 @@ async function renderElements(transition2, activated, changingIndex) {
           removedEls.add(currentEl);
         }
         el.$route = routeState;
-        applyProperties(transition2, el, route.options.properties);
+        applyProperties(el, route);
         outletEl.appendChild(el);
         outletCurrentEl.set(outletEl, el);
         await (el.updateComplete || resolved);
@@ -1371,15 +1265,17 @@ async function resolve(transition2) {
   }
   await runLifeCycle(transition2, deactivated, "before", "Leave");
   if (transition2.isCancelled) return;
-  const activated = await resolveComponents(transition2.routes.slice(changingIndex));
+  const activated = await resolveRoutes(transition2.routes.slice(changingIndex));
   await runLifeCycle(transition2, activated, "before", "Enter");
   if (transition2.isCancelled) return;
+  runPropertyHookMethod(transition2, activated, "enter");
   await renderElements(transition2, activated, changingIndex);
   updateDOMTree(activated, deactivated);
   transition2.activated = activated;
   transition2.deactivated = deactivated;
 }
 function done(transition2) {
+  runPropertyHookMethod(transition2, transition2.deactivated, "leave");
   runLifeCycle(transition2, transition2.deactivated, "after", "Leave");
   runLifeCycle(transition2, transition2.activated, "after", "Enter");
 }
@@ -1389,6 +1285,13 @@ const wc = {
   resolve,
   done
 };
+class Router2 extends Router$1 {
+  constructor(options) {
+    super(options);
+    this.use(wc);
+    this.use(routerLinks);
+  }
+}
 let eventPrefix;
 function trigger(name, detail) {
   window.dispatchEvent(new CustomEvent(`${eventPrefix}${name}`, { detail }));
@@ -1416,15 +1319,14 @@ const events = {
 class Routerx extends WJElement {
   /**
    * Creates an instance of Routerx.
-   *
-   * @constructor
+   * @class
    */
   constructor() {
     super();
     __publicField(this, "className", "Routerx");
     /**
      * Sets the breadcrumb for the transition.
-     * @param {Object} transition - The transition.
+     * @param {object} transition The transition object.
      */
     __publicField(this, "setBreadcrumb", (transition2) => {
       let breadcrumb = [
@@ -1442,8 +1344,7 @@ class Routerx extends WJElement {
     });
     /**
      * Resets the scroll position.
-     *
-     * @param {Object} transition - The transition.
+     * @param {object} transition The transition object.
      */
     __publicField(this, "resetScrollPosition", (transition2) => {
       window.scrollTo(0, 0);
@@ -1451,7 +1352,6 @@ class Routerx extends WJElement {
   }
   /**
    * Returns the list of attributes to observe for changes.
-   *
    * @static
    * @returns {Array<string>}
    */
@@ -1466,17 +1366,14 @@ class Routerx extends WJElement {
   }
   /**
    * Sets up the router after the component is drawn.
-   * @params {Object} context - The context for drawing.
-   * @params {Object} store - The store for drawing.
-   * @params {Object} params - The parameters for drawing.
    */
-  afterDraw() {
+  beforeDraw() {
     const htmlString = this.outerHTML;
     const parser = new DOMParser();
     const htmlDocument = parser.parseFromString(htmlString, "text/html");
     const rootElement = htmlDocument.querySelector("wje-router");
     const routes = this.parseElement(rootElement).root;
-    this.router = new Router({
+    this.router = new Router2({
       outlet: this.outlet || "wje-router-outlet",
       log: false,
       logError: true,
@@ -1485,8 +1382,6 @@ class Routerx extends WJElement {
     });
     this.router.map(routes);
     this.router.use(this.setBreadcrumb);
-    this.router.use(wc);
-    this.router.use(routerLinks);
     this.router.use(events);
     this.router.use(this.resetScrollPosition);
     this.router.listen();
@@ -1494,9 +1389,8 @@ class Routerx extends WJElement {
   }
   /**
    * Parses an element and returns an object representation.
-   *
-   * @param {Element} element - The element to parse.
-   * @returns {Object} The object representation of the element.
+   * @param {Element} element The element to parse.
+   * @returns {object} The object representation of the element.
    */
   parseElement(element) {
     const obj = {};
@@ -1506,7 +1400,7 @@ class Routerx extends WJElement {
       const attributeValue = attributes[i].value;
       if (attributeName === "component" && attributeValue.indexOf(".js") > -1) {
         obj.component = () => import(
-          /*vite-ignore*/
+          /* @vite-ignore */
           attributeValue
         );
       } else {
@@ -1528,9 +1422,6 @@ class Routerx extends WJElement {
     }
     return obj;
   }
-  setRouteParamsToStore(transition2) {
-    this.store.dispatch(this.defaultStoreActions.addAction("params")(transition2.params));
-  }
   /**
    * Cleans up before the component is disconnected.
    */