@wrnrlr/prelude 0.2.29 → 0.2.30

package/example/router.html

@@ -1,9 +1,15 @@
 <script type="module">
 
-import {h,signal,effect,batch,wrap,render,List,Router} from '../src/mod.ts'
+import {h,signal,effect,batch,wrap,render,List,Router,useRouter} from '../src/mod.ts'
 
 function Home() {
-  return h('h1', 'Home')
+  console.log(useRouter)
+  const {navigate} = useRouter()
+  console.log('navigate', navigate)
+  return [
+    h('h1', 'Home'),
+    h('button', {onClick:e=>navigate('/router.html/a')}, 'navigate a')
+  ]
 }
 
 function A() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wrnrlr/prelude",
   "type": "module",
-  "version": "0.2.29",
+  "version": "0.2.30",
   "author": "Werner Laurensse",
   "description": "A signal based frontend library with fine-grained reactivity",
   "main": "./src/mod.ts",

package/src/mod.ts

@@ -7,7 +7,7 @@ export {r, type Runtime} from './runtime.ts'
 export type * from './hyperscript.ts'
 export {hyperscript} from './hyperscript.ts'
 export {h} from './web.ts'
-export {useNavigate, useParams, useSearch, Router} from './router.js'
+export {useNavigate, useParams, useSearch, useRouter, Router} from './router.js'
 export {Switch, Match} from './switch.ts'
 export {resource,makeAbortable,abortable} from './resource.js'
 import {r} from './runtime.ts'

package/src/router.js

@@ -1,9 +1,9 @@
 // @ts-nocheck
 import { signal, effect, batch, untrack, memo, wrap, context, useContext, onMount } from './reactive.ts'
-// import { h } from './hyperscript.ts'
+import { h } from './web.ts'
 
-const Ctx = context()
-const useRouter = () => useContext(Ctx)
+const RouterCtx = context()
+export const useRouter = () => useContext(RouterCtx)
 export const useNavigate = () => wrap(useRouter(),'navigate')
 export const useParams = () => wrap(useRouter(),'params')
 export const useSearch = () => wrap(useRouter(),'search')
@@ -43,13 +43,22 @@ export function Router(props) {
     })
     const pathname = stripBase(window.location.pathname + window.location.search + window.location.hash)
     navigate({pathname})
+    // Listen to browser history navigation (back/forward)
+    const popHandler = () => {
+      const path = stripBase(window.location.pathname + window.location.search + window.location.hash)
+      navigate({ pathname: path })
+    }
+    window.addEventListener('popstate', popHandler)
   })
+  // TODO cleanup click and popstate handlers...
   const children = () => {
     const location = navigate()
+    // console.log('loc', location)
     const route = matchRoute(routes, location.pathname)
     return route?.component({params: route.params}) || NotFound
   }
-  return Ctx({navigate,params,search,children:()=>children})
+  return h(RouterCtx, {value:{navigate:navigateTo,params,search}}, children)
+  // return RouterCtx({navigate,params,search,children})
 }
 
 function bindEvent(target, type, handler) {
@@ -68,10 +77,15 @@ function scrollToHash(hash, fallbackTop) {
 
 function matchRoute(routes, pathname) {
   // Normalize and split incoming path
-  const trim = str => str.replace(/(^\/|\/$)/g, '');
+  const trim = str => {
+    // console.log('str', str)
+    return str.replace(/(^\/|\/$)/g, '')
+  }
+  // console.log('pathname', pathname)
   const requestSegments = trim(pathname).split('/').filter(Boolean);
 
   for (const route of routes) {
+    // console.log(route, route.path)
     const routeSegments = trim(route.path).split('/').filter(Boolean);
     if (routeSegments.length !== requestSegments.length) continue;