Barebones router

[duncsully]

Don't get me wrong, I'm excited about what ArrowJS might be able to accomplish in the future, and I'm all for people hooking it up to Remix Router and the like. Personally, in the spirit of ArrowJS believing in the power of modern vanilla JS, I wanted to see what an MVP router might look like.

By specifying an arbitrary value to check and "simply" leveraging regex (I almost said that with a straight face 😅) , you can do things like:

• Use as browser, hash, or SSR router
• Require exact matches or be as flexible as you like
• Choose between ordered params passed as list of arguments or named params passed as an object depending on your preferred component function style
• Create layout routes by simply nesting routers and forwarding the remaining portion of the path as the check value for those nested routers

type Routes = Record<string, (...args: any[]) => ArrowTemplate>

const BasicRouter = (routes: Routes, check = global.location.pathname) =>
  html`${() => {
    for (let pathRegex in routes) {
      // Assume we always want to test from the start of the string
      const result = new RegExp('^' + pathRegex).exec(check)
      if (result) {
        const [, ...params] = result
        const namedParams = result.groups
        const args = namedParams ? ([namedParams] as const) : params
        return routes[pathRegex](...args)
      }
    }
  }}`

// ---------- Example ----------

// Note: Need to order by specificity
const basicRoutes: Routes = {
  // Use end of string token for "exact" matches
  '/$': () => html`Home`,
  // Only matches if ID present, passes unnamed match groups as function arguments
  '/users/(.+)': id => html`User ${id}`,
  // Matches /users or /users/ for index route
  '/users/?': () => html`All users`,
  // "Layout" route, matches /posts and forwards rest to a nested router
  '/posts(.*)': rest =>
    html`<h1>Posts layout</h1>
      ${BasicRouter(
        {
          // Specific child route
          '/mine': () => html`Only the most important posts`,
          // Named capture group turns into parameter object
          '/(?<title>.+)': ({ title }) =>
            html`<h2>${title}</h2>
              Some fetched data here probably`,
          // Index child route
          '/?': () => html`Posts index`,
        },
        rest,
      )}`,
  // Matches anything
  '': () => html`404`,
}

BasicRouter(
  basicRoutes,
  global.location.hash.slice(1),
)(document.getElementById('router')!)

Of course, you could create various helpers to make setup easier, like coming up with your own syntax for mapping to regexes. This is just a jumping off point.

[irskep]

I see where you're coming from with this, but I think it could be even simpler, and doesn't need to be integrated into Arrow at all. Here's an attempt, briefly adapted from this post: https://gist.github.com/irskep/704747b7a36fddd0cae7ffdf459427da

Essentially you treat the "router" as a class that calls functions when patterns are matched. You can add fanciness around making route syntax and URL building easier, but at the end of the day plain function calls is a good level of abstraction for an un-opinionated, minimalistic library. To render different things based on the URL, you'd use a reactive object and have your components watch it.

const store = reactive({activePage: "profile"});

const router = new Router();
router.add(new RegExp('/profile'), () => store.route = "profile");
router.add(new RegExp('/feed'), () => store.route = "feed");

const pages = {
  profile: function() {
    return html`<div>Profile</div>`;
  },
  feed: function() {
    return html`<div>Feed</div>`;
  },
}

html`
  <div>
    ${() => pages[store.activePage]}
  </div>
`(document.body)

You could just use Navigo, which is "big" at 10KB but pretty much does this.