New Feature: Router Plugins

[pleek91]

Description

Plugins add the ability to predefine router functionality to be used when creating a router. Plugins can add routes, rejections, and global hooks to a router.

Creating a plugin

Any object that satisfies the RouterPlugin type can be used. But the new createRouterPlugin utility can be used to easily create plugins in a type safe manor.

import { createRouterPlugin, createRoute } from '@kitbag/router'

const plugin = creatRouterPlugin({
  routes: [
    createRoute(...),
    createRoute(...),
  ],
  rejections: {
    PluginRejection: { ... }
  },
  onBeforeRouteEnter: () => { ... }
})

Installing plugins

Multiple plugins can be installed when creating a router using the 3rd argument of createRouter

const routes = [...] as const

const router = createRouter(routes, {}, [plugin1, plugin2]) 

Type Safety

Any routes or rejections added by plugins will be available when navigating. Use router.push, router.reject, and components like RouterLink like normal.

[netlify]

✅ Deploy Preview for kitbag-router ready!

Name	Link
🔨 Latest commit	2db9a91
🔍 Latest deploy log	https://app.netlify.com/sites/kitbag-router/deploys/67746713f5b3ac0008aa9fb7
😎 Deploy Preview	https://deploy-preview-397--kitbag-router.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pleek91]

@stackoverfloweth couple tests are failing around global hooks. I realized when writing tests for plugins that global hooks didn't work like I expected. I could update the tests to reflect the current functionality, but thought it was worth discussing first.

[stackoverfloweth]

I have been wanting this for so long and assumed it would be incredibly difficult. I'm blown away by how simple this appears to be, so kudos on that. SUPER excited about what this will unlock for us ❤️