// router.js
 
class Router {
  #routes = [];
  #notFound = null;
  // The full location we last resolved: pathname + search + hash. Not just the
  // pathname — see navigate() below.
  #currentUrl = null;
 
  constructor() {
    window.addEventListener('popstate', () => this.#resolve());
    // One delegated listener for every [data-link] on the page, now and later
    document.addEventListener('click', (e) => this.#onClick(e));
  }
 
  // Register a route — returns `this` for chaining
  on(path, handler) {
    this.#routes.push({
      path,
      pattern: this.#pathToPattern(path),
      handler,
    });
    return this;
  }
 
  // Register a catch-all for unmatched routes
  notFound(handler) {
    this.#notFound = handler;
    return this;
  }
 
  // Programmatic navigation
  navigate(path) {
    // Normalise before comparing: the caller may pass '/search?q=a', a bare
    // '/about', or a relative './x', and we need all three in the same shape as
    // what #resolve() recorded.
    const url = new URL(path, window.location.href);
    const target = url.pathname + url.search + url.hash;
    if (target === this.#currentUrl) return; // genuinely already there
    history.pushState(null, '', target);
    this.#resolve();
  }
 
  // Call this once to kick off routing for the current URL
  start() {
    this.#resolve();
    return this;
  }
 
  #onClick(e) {
    // filled in step 1b
  }
 
  #pathToPattern(path) {
    // filled in step 2
  }
 
  #resolve() {
    // filled in step 3
  }
}

  #onClick(e) {
    // Someone else already handled this, or it isn't a plain left click.
    if (e.defaultPrevented || e.button !== 0) return;
    // cmd/ctrl = new tab, shift = new window, alt = download. All the user's call.
    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
 
    // e.target is an EventTarget. It is usually an element, but a click
    // dispatched at `document` is not, and `document.closest` is undefined.
    const start = e.target instanceof Element ? e.target : null;
    const link = start?.closest('[data-link]');
    if (!link) return;
 
    const href = link.getAttribute('href');
    if (href === null) return;
    if (link.hasAttribute('download') || link.getAttribute('target') === '_blank') return;
 
    // Only intercept same-origin URLs — pushState throws a SecurityError on
    // anything else, and it would throw *after* preventDefault, leaving a
    // link that does nothing at all.
    const url = new URL(href, window.location.href);
    if (url.origin !== window.location.origin) return;
 
    e.preventDefault();
    this.navigate(url.pathname + url.search + url.hash);
  }

  #pathToPattern(path) {
    const paramNames = [];
 
    const regexString = path
      // 1. Neutralise every regex metacharacter in the literal parts.
      .replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
      // 2. Re-introduce :name as a capture group matching one URL segment.
      .replace(/:([A-Za-z_$][\w$]*)/g, (_, name) => {
        paramNames.push(name);
        return '([^/]+)';
      })
      // 3. Re-introduce * (now escaped to \*) as a catch-all.
      .replace(/\\\*/g, () => {
        paramNames.push('wildcard');
        return '(.*)';
      });
 
    return {
      // \/?$ allows an optional trailing slash
      regex: new RegExp(`^${regexString}\\/?$`),
      paramNames,
    };
  }
 
  // decodeURIComponent throws URIError on a malformed escape sequence, and the
  // URL bar is not a trustworthy source of well-formed escapes. Fall back to the
  // raw segment: a param the handler can't decode is still better than a router
  // that stops working.
  #safeDecode(segment) {
    try {
      return decodeURIComponent(segment);
    } catch {
      return segment;
    }
  }
 
  #extractParams(pattern, path) {
    const match = path.match(pattern.regex);
    if (!match) return null; // no match
 
    // match[0] is the full match, match[1..n] are the capture groups
    return pattern.paramNames.reduce((params, name, i) => {
      params[name] = this.#safeDecode(match[i + 1]);
      return params;
    }, {});
  }

  #resolve() {
    const { pathname, search, hash } = window.location;
    const path = pathname;
    // Record the *whole* location, so navigate() can tell '/search' apart from
    // '/search?q=a'. Matching still happens on the pathname alone.
    this.#currentUrl = pathname + search + hash;
 
    for (const route of this.#routes) {
      const params = this.#extractParams(route.pattern, path);
 
      if (params !== null) {
        route.handler({ path, params, search, hash });
        return; // first match wins, like Express
      }
    }
 
    // Nothing matched
    if (this.#notFound) {
      this.#notFound({ path, params: {}, search, hash });
    }
  }

// router.js
 
class Router {
  #routes = [];
  #notFound = null;
  #currentUrl = null; // pathname + search + hash of the last resolve
 
  constructor() {
    window.addEventListener('popstate', () => this.#resolve());
    document.addEventListener('click', (e) => this.#onClick(e));
  }
 
  on(path, handler) {
    this.#routes.push({
      path,
      pattern: this.#pathToPattern(path),
      handler,
    });
    return this;
  }
 
  notFound(handler) {
    this.#notFound = handler;
    return this;
  }
 
  navigate(path) {
    const url = new URL(path, window.location.href);
    const target = url.pathname + url.search + url.hash;
    if (target === this.#currentUrl) return;
    history.pushState(null, '', target);
    this.#resolve();
  }
 
  start() {
    this.#resolve();
    return this;
  }
 
  #onClick(e) {
    // Let the browser handle new-tab / new-window / download clicks.
    if (e.defaultPrevented || e.button !== 0) return;
    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
 
    // e.target is an EventTarget, not necessarily an Element.
    const start = e.target instanceof Element ? e.target : null;
    const link = start?.closest('[data-link]');
    if (!link) return;
 
    const href = link.getAttribute('href');
    if (href === null) return;
    if (link.hasAttribute('download') || link.getAttribute('target') === '_blank') return;
 
    // Only intercept same-origin URLs — pushState throws on anything else.
    const url = new URL(href, window.location.href);
    if (url.origin !== window.location.origin) return;
 
    e.preventDefault();
    this.navigate(url.pathname + url.search + url.hash);
  }
 
  #pathToPattern(path) {
    const paramNames = [];
 
    // Escape every regex metacharacter, then re-introduce the two we define:
    //   :name  -> one URL segment, captured
    //   *      -> the rest of the path, captured as `wildcard`
    const regexString = path
      .replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
      .replace(/:([A-Za-z_$][\w$]*)/g, (_, name) => {
        paramNames.push(name);
        return '([^/]+)';
      })
      .replace(/\\\*/g, () => {
        paramNames.push('wildcard');
        return '(.*)';
      });
 
    return {
      // \/?$ allows an optional trailing slash
      regex: new RegExp(`^${regexString}\\/?$`),
      paramNames,
    };
  }
 
  // A malformed escape must not take the router down — especially not on
  // popstate, where the throw is uncatchable by the caller.
  #safeDecode(segment) {
    try { return decodeURIComponent(segment); } catch { return segment; }
  }
 
  #extractParams(pattern, path) {
    const match = path.match(pattern.regex);
    if (!match) return null;
    return pattern.paramNames.reduce((params, name, i) => {
      params[name] = this.#safeDecode(match[i + 1]);
      return params;
    }, {});
  }
 
  #resolve() {
    const { pathname, search, hash } = window.location;
    const path = pathname;
    this.#currentUrl = pathname + search + hash;
 
    for (const route of this.#routes) {
      const params = this.#extractParams(route.pattern, path);
      if (params !== null) {
        route.handler({ path, params, search, hash });
        return;
      }
    }
 
    if (this.#notFound) {
      this.#notFound({ path, params: {}, search, hash });
    }
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Router Demo</title>
  <style>
    body { font-family: sans-serif; max-width: 600px; margin: 2rem auto; }
    nav { margin-bottom: 1.5rem; }
    nav a { margin-right: 1rem; }
  </style>
</head>
<body>
  <nav>
    <a href="/" data-link>Home</a>
    <a href="/users" data-link>Users</a>
    <a href="/about" data-link>About</a>
  </nav>
 
  <div id="app"></div>
 
  <script src="router.js"></script>
  <script src="app.js"></script>
</body>
</html>

// app.js
 
const app = document.getElementById('app');
 
// Route params come from the URL, and every handler below writes innerHTML.
// Anything from the URL goes through this first. See the callout after this step.
const escapeHtml = (val) =>
  String(val).replace(/[&<>"']/g, (c) => (
    { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
  ));
 
// Fake data stand-in
const users = [
  { username: 'alice', name: 'Alice Chen', role: 'admin' },
  { username: 'bob',   name: 'Bob Patel',  role: 'editor' },
  { username: 'carol', name: 'Carol Kim',  role: 'viewer' },
];
 
const router = new Router()
  .on('/', () => {
    app.innerHTML = `
      <h1>Dashboard</h1>
      <p>Welcome. <a href="/users" data-link>View all users →</a></p>
    `;
  })
  .on('/users', () => {
    const items = users
      .map(u => `<li><a href="/users/${u.username}" data-link>${u.name}</a></li>`)
      .join('');
    app.innerHTML = `<h1>Users</h1><ul>${items}</ul>`;
  })
  .on('/users/:username', ({ params }) => {
    const user = users.find(u => u.username === params.username);
 
    if (!user) {
      app.innerHTML =
        `<p>User "${escapeHtml(params.username)}" not found. <a href="/users" data-link>Back</a></p>`;
      return;
    }
 
    app.innerHTML = `
      <h1>${user.name}</h1>
      <p>Username: <code>${user.username}</code></p>
      <p>Role: <strong>${user.role}</strong></p>
      <a href="/users" data-link>← All users</a>
    `;
  })
  .on('/about', () => {
    app.innerHTML = `<h1>About</h1><p>Built with a 110-line router.</p>`;
  })
  .notFound(({ path }) => {
    app.innerHTML = `
      <h1>404</h1>
      <p><code>${escapeHtml(path)}</code> doesn't exist.</p>
      <a href="/" data-link>Go home</a>
    `;
  })
  .start();

// Add this as a method on Router, or as a standalone utility
 
function parseQuery(search = window.location.search) {
  // URLSearchParams handles all the edge cases: repeated keys, encoding, etc.
  const params = new URLSearchParams(search);
 
  // Object.create(null), not {} — see below.
  const result = Object.create(null);
 
  for (const [key, value] of params) {
    // Handle repeated keys: ?tag=js&tag=node -> { tag: ['js', 'node'] }
    if (key in result) {
      result[key] = [].concat(result[key], value);
    } else {
      result[key] = value;
    }
  }
  return result;
}

.on('/search', () => {
  const { q = '', page = '1' } = parseQuery();
  app.innerHTML = `<h1>Search: "${escapeHtml(q)}" — page ${page}</h1>`;
})