Cleanup

example/config/default.js

@@ -1,6 +1,6 @@
 module.exports = {
   kaliber: {
-    compileWithBabel: [/@kaliber\//],
+    compileWithBabel: [/@kaliber\//, /@react-spring\/core/, /@react-spring\/shared/],
     symlinks: false,
   }
 }

example/package.json

@@ -4,19 +4,19 @@
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@kaliber/build": "^0.0.128",
-    "react-spring": "^9.5.2"
+    "@kaliber/build": "^0.0.146",
+    "@kaliber/routing": "link://./node_modules/@kaliber/routing",
+    "react-spring": "^9.7.3"
   },
   "scripts": {
     "start": "npm-run-all --parallel watch serve.dev",
-    "watch": "CONFIG_ENV=dev kaliber-watch",
-    "build": "NODE_ENV=production kaliber-build",
+    "watch": "NODE_OPTIONS='--openssl-legacy-provider --enable-source-maps' CONFIG_ENV=dev kaliber-watch",
+    "build": "NODE_OPTIONS='--openssl-legacy-provider' NODE_ENV=production kaliber-build",
     "serve": "kaliber-serve",
-    "serve.dev": "PORT=8000 CONFIG_ENV=dev kaliber-serve",
+    "serve.dev": "NODE_OPTIONS='--enable-source-maps' PORT=8000 CONFIG_ENV=dev kaliber-serve",
     "lint": "npm-run-all --serial lint.javascript lint.styles",
     "lint.javascript": "eslint -c .eslintrc --ignore-path .gitignore './**/*.js'",
-    "lint.styles": "stylelint --config .stylelintrc --ignore-path .gitignore './**/*.css'",
-    "postinstall": "./bin/postInstall"
+    "lint.styles": "stylelint --config .stylelintrc --ignore-path .gitignore './**/*.css'"
   },
   "devDependencies": {
     "npm-run-all": "^4.1.5"

example/src/advanced/App.js

@@ -1,4 +1,12 @@
-import { useNavigate, useMatchedRouteData, usePick, useRouting, useLocationMatch, Link, LocationProvider } from '@kaliber/routing'
+import {
+  useNavigate,
+  useMatchedRouteData,
+  usePick,
+  useRouting,
+  useLocationMatch,
+  Link,
+  LocationProvider,
+} from '@kaliber/routing'
 import { RouteDataProvider, useAsyncRouteData } from './machinery/RouteData'
 import { routeMap } from './routeMap'
 import { useLanguage, LanguageContext } from './machinery/Language'
@@ -33,7 +41,7 @@ function Page() {
 
 function Language({ children, language }) {
   const navigate = useNavigate()
-  const { route } = useLocationMatch()
+  const { params, route } = useLocationMatch()
   return (
     <div>
       <label htmlFor='nl'>NL</label>
@@ -55,7 +63,7 @@ function Language({ children, language }) {
   )
 
   function setLanguage(language) {
-    navigate(route({ language }))
+    navigate(route({ ...params, language }))
   }
 }
 
@@ -117,9 +125,9 @@ function Article({ params: { articleId } }) {
       <h1>{article.title} ({article.id})</h1>
       {atValidTab && (
         <div>
-          <Link to={routes.main({ articleId, language })}>Main</Link>
-          <Link to={routes.tab1({ articleId, language })}>Tab1</Link>
-          <Link to={routes.tab2({ articleId, language })}>Tab2</Link>
+          <Tab label='Main' route={routes.main} />
+          <Tab label='Tab1' route={routes.tab1} />
+          <Tab label='Tab2' route={routes.tab2} />
         </div>
       )}
       <div>
@@ -135,6 +143,18 @@ function Article({ params: { articleId } }) {
   )
 }
 
+function Tab({ label, route }) {
+  const { params, route: currentRoute } = useLocationMatch()
+  const isActive = route === currentRoute
+  return (
+    <>
+      {isActive && '>> '}
+      <Link to={route(params)}>{label}</Link>
+      {isActive && ' <<'}
+    </>
+  )
+}
+
 function Sidebar({ article }) {
   const { price } = useAsyncRouteData({ price: 0 }, { extraArgs: { article } })
   return <div>Side bar for tab 1, price: {price}</div>

example/tsconfig.json

@@ -4,6 +4,7 @@
   },
   "include": ["./src/**/*", "./types/**/*"],
   "compilerOptions": {
+    "preserveSymlinks": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,

index.d.ts

@@ -1,6 +1,6 @@
 export { asRouteMap, pick, pickRoute, asRouteChain, routeSymbol } from './src/routeMap'
 export {
   useNavigate, useMatchedRoute, useMatchedRouteData, usePick, useRouting, useLocationMatch,
-  useRoutes, useLocation, useHistory, useRouteMap,
+  useLocation, useHistory,
   Link, LocationProvider, StaticLocationProvider,
 } from './src/routing'

index.js

@@ -1,6 +1,6 @@
 export { asRouteMap, pick, pickRoute, asRouteChain, routeSymbol } from './src/routeMap'
 export {
   useNavigate, useMatchedRoute, useMatchedRouteData, usePick, useRouting, useLocationMatch,
-  useRoutes, useLocation, useHistory, useRouteMap,
+  useLocation, useHistory,
   Link, LocationProvider, StaticLocationProvider,
 } from './src/routing'

src/routing.js

@@ -1,6 +1,6 @@
 
 import { getHistory } from './history'
-import { callOrReturn, mapValues } from './utils'
+import { callOrReturn } from './utils'
 import { pickRoute, routeSymbol } from './routeMap'
 
 // Why so many contexts? Information should be grouped in a context based on the rate of change.
@@ -26,8 +26,6 @@ const routeContext = React.createContext(null)
 
 const inBrowser = typeof window !== 'undefined'
 
-const wrappedRouteSymbol = Symbol('wrappedRouteSymbol')
-
 /**
   @template {JSX.Element} T
   @typedef {[route: Route, createChildren: ((params: object) => T) | T]} RoutePair
@@ -50,7 +48,7 @@ export function useRouting() {
 
     const { route, params } = result
     const children = callOrReturn(routeLookup.get(route), params)
-    return <routeContext.Provider value={route[wrappedRouteSymbol] || route} {...{ children }} />
+    return <routeContext.Provider value={route} {...{ children }} />
   }
 }
 
@@ -66,7 +64,7 @@ export function useLocationMatch() {
   if (!context.locationMatch) return null
 
   const { params, route } = context.locationMatch
-  return { params, route: partiallyApplyReverseRoutes(route, params) }
+  return { params, route }
 }
 
 export function useNavigate() {
@@ -81,40 +79,18 @@ export function useRootContext() {
   return context
 }
 
-/** @deprecated Please import routeMap and use the route map directly */
-export function useRoutes() {
-  const { routeMap } = useRootContext()
-  const currentRoute = useMatchedRoute()
-  const locationMatch = useLocationMatch()
-
-  const hasChildren = currentRoute && Object.keys(currentRoute[routeSymbol].children).length
-  const parent = currentRoute && currentRoute[routeSymbol].parent
-
-  return (
-    hasChildren ? currentRoute :
-    parent && locationMatch ? partiallyApplyReverseRoutes(parent, locationMatch.params) :
-    routeMap
-  )
-}
-
 export function useMatchedRoute() {
   const currentRoute = React.useContext(routeContext)
-  const locationMatch = useLocationMatch()
-  if (!currentRoute || !locationMatch) return null
+  if (!currentRoute) return null
 
-  return partiallyApplyReverseRoutes(currentRoute, locationMatch.params)
+  return currentRoute
 }
 
 export function useMatchedRouteData() {
   const currentRoute = useMatchedRoute()
   return currentRoute && currentRoute.data
 }
 
-/** @deprecated Import the routeMap, it provides type safety */
-export function useRouteMap() {
-  return useRootContext().routeMap
-}
-
 export function useHistory() {
   return inBrowser ? getHistory() : new DoNotUseHistoryOnServerSide()
 
@@ -132,13 +108,12 @@ export function usePick() {
       const availableRoutes = new Map(
         routes.map((route, i) => {
           if (!route) throw new Error(`Route missing at index ${i}`)
-          return [route[wrappedRouteSymbol] || route, route]
+          return [route, route]
         })
       )
       return selectRoute(route, params)
 
-      function selectRoute(possiblyWrappedRoute, params) {
-        const route = possiblyWrappedRoute[wrappedRouteSymbol] || possiblyWrappedRoute
+      function selectRoute(route, params) {
         const { parent } = route[routeSymbol]
         return (
           availableRoutes.has(route) ? { params, route: availableRoutes.get(route) } :
@@ -277,33 +252,6 @@ function resolve(basePath, to) {
   return `${basePath}${to}`
 }
 
-/* TODO we now apply all available params, in some cases we are higher up
-   in the route tree. Should we only supply the params up to that point?
-
-   If we are in a component that renders /en/articles while viewing
-   /en/articles/article1. Should the route to lang.articles.article()
-   have prefilled { lang: 'en' } or { lang: 'en', aricleId: 'article1' }?
-*/
-// TODO: See if you can type this:
-/**
- * @param {Route} route
- * @returns {Route}
- */
-function partiallyApplyReverseRoutes(route, availableParams) {
-  if (route[wrappedRouteSymbol]) throw new Error('Can not partially apply a partially applied route')
-
-  return Object.assign(
-    partiallyAppliedReverseRoute,
-    route,
-    mapValues(route[routeSymbol].children, x => partiallyApplyReverseRoutes(x, availableParams)),
-    { [wrappedRouteSymbol]: route }
-  )
-
-  function partiallyAppliedReverseRoute(params) {
-    return route({ ...availableParams, ...params })
-  }
-}
-
 function shallowEqual(o1, o2) {
   const o1Keys = Object.keys(o1)
   return (