cher-ami router v2 is out 🎉

Structure improvement

• (Replace eventEmitter by React context #65)
  Using react context API, it's one less external tool to use in the project.

• (Internalize router manager in router #79)
  There is no more RouterManager class instantiated in Router.tsx. All the route changing listening is made inside Router.tsx who call external matcher helper function. It's now easier to test this matcher function an avoids having to communicate between the independent Router instance and the react Router component.

• (Update debug and dev server dependencies #74)
  Replace debug lib by the smaller lib @wbe/debug

Features

• (Replace path-parser by path-to-regexp #75)
  path-to-regexp allows optional params witch was not possible with path-parser. route path can be now defined as /path/:id?. /path and /path/hello will match.

• (Infinit sub Routers #79)
  It was working on one level, it's now possible to nest as many routers as needed.

• new helpercreateUrl()
  Create a formated URL by string, or TOpenRouteParams. This method is available everywhere inside component.

import { createUrl } from "@cher-ami/router"
createUrl({ name: "ArticlePage", params: {id: "foo"} }) // will return a path as `/articles/foo` (depend of route paths)

• new helper openRoute()
  Push new route in current history. Stack(s) component(s) will return the appropriate route. This method is available everywhere inside component.

import { openRoute } from "@cher-ami/router"
openRoute({ name: "ArticlePage", params: {id: "foo"} }) // stack will render the appropriate component

• (add Setlang hook #81)
  If LangService instance is set to the Router, we can use this hook to quickly get current language and change language.

const [lang, setLang] = useLang();

• (extended Link props with anchor html attributes #78)

• (Export type #83)
  Expose TRoute type

• (Expose routers #76)
  Global Routers object is now exposed. It contains informations available for all routers instances.

• (Use microbundle instead of TSC #77 #82)

• Add getPaused() and setPaused() as router instance properties, allows to paused handleHistory internal method. It's pretty usefull to prevent some bugs during routes transitions. #89

const { getPaused, setPaused } = useRouter()

// paused handle history 
setPaused(true)

// get current paused state
const isPaused = getPaused() // true

• Update all dependencies. Move to React 18. #92

breaking changes

useRouter

• useRoute() as been removed. currentRoute & previousRoute are now available from useRouter()

// before
const { currentRoute, previousRoute } = useRoute();
// v2
const { currentRoute, previousRoute } = useRouter();

LangService

• LangService is now set to the router as an independent instance.

// before - it was a singleton
LangService.init([{ key: "en" }, { key: "fr" }], true, "/")
// ...
<Router middlewares={langMiddleware}> ... </Router>

// v2 - independent instance
const langService = new LangService({
  languages: [{ key: "en" }, { key: "fr" }],
  showDefaultLangInUrl: true,
  base: "/",
});
// ...
<Router langService={langService}> ... </Router>

Sub Router

Sub Router declaration is not as automatic and"magical" as before. In v2, we need to define manually what is the sub router base & routes.
getPathByRouteName, getSubRoutersBase & getSubRoutersRoutes are available to help use.

// before - we deduced internally what was sub routes and full base URL.
<Router base={"/foo"}>
</Router>

// v2

  // Get parent router context
  const { base, routes } = useRouter();

  // Parsed routes list and get path by route name
  const path = getPathByRouteName(routesList, "FooPage"); // "/foo"
  // ...
  return (
    <div>
      <Router
        // -> "/base/:lang/foo" (if last param is false, ':lang' will be not added)
        base={getSubRoutersBase(path, base, true)}
        // children routes array of FooPage
        routes={getSubRoutersRoutes(path, routes)}
      >
        <Stack />
      </Router>
    </div>
  );

useHistory

useHistory hook is returning now the whole of history object instead of an array of history location.

const history = useHistory(()=> {
}, [])
//...
history.push() // etc...

Fix

Fix #86 bug when a route is defined after a route witch contains subroutes.

{
    path: "/",
    component: HomePage,
  },
  {
    path: "/about",
    component: AboutPage,
    children: [
      {
        path: "/foo",
        component: FooPage,
      },
      {
        path: "/bar",
        component: BarPage,
       }
    ],
  },
 // this last route is now properly rendered
 {
    path: "/last",
    component: LastPage,
  },
}