How Waku Implements File-System Routing

Hi,

We released Waku v1.0.0-beta.0 recently.

Check out: https://waku.gg/blog/waku-v1-beta

Waku is a minimal React framework, and by that I mean it’s minimal from both a framework user perspective and a framework developer perspective.

Config-Based Router

For the router, we first developed a config-based router, which is a lower-level API. We then developed a wrapper layer to implement a file-system-based router.

It’s basically a one-to-one mapping. For example, with the config router, we do:

createPage({
  path: '/hello',
  component: () => <h1>Hello</h1>,
  render: 'dynamic',t
})

File-System Router

For the same route, what we do with the file-system router is:

// ./src/pages/hello.tsx
export default function() {
  return <h1>Hello</h1>
}

export const getConfig = async () => {
  return {
    render: 'dynamic',
  };
};

The path and component parts are automatically inferred, and the rest is provided by the getConfig function.

Capability-wise, the config router and the file-system router are equivalent. It’s just a stylistic difference.

If you are interested, check out the source code, which is only 172 loc.

Happy coding.