loreanvictor / callbag-router

Routing for single-page applications, using Callbags

I am Eugene Ghanizadeh Khoub, I study informatics at TUM, have helped out @CafeBazaar, @CONNECT-platform, and @coding.blog and worked on CODEDOC. Currently I work with @ECOMPLY on data protection, help @Divar with product management, and try to see what comes out of @Vitrine.

👉 Here are the other (coding) stuff that (currently) interest me (and so I am working on):

⚡ Reactive Programming

• quel: imperative reactive programming
• streamlets: a protocol for handling data/event streams (its like callbags but marginally faster and pausable by default).
• callbag-common: a hand-picked and patched collection of callbag utilities
• callbag-state and callbag-state-keyed: as-easy-as-it-gets and versatile state management using callbags

🎨 Making Web Applications

• minicomp: minimalistic web components with SSR support
• rehtm: lightweight HTML templates with SSR support
• graphis: a convenient and stylish icon-font based on emojis
• nokss: a drop-in stylesheet
• packen: bundles isomorphic JS
• callbag-jsx: JSX + callbags, tiny performant explicitly reactive frontend library

🚀 Making APIs

• serverless-cloud-data-utils: a convenient ORM for Serverless Cloud
• TyFON: a zero-config TypeScript RPC
• RxXpress: an experimental mashup of RxJS and Express

🧐 Other

• tmplr: next-level project scaffolding tool
• Kāshi: a turing-complete json-like language
• My Blog: which I sometimes update with some new stuff
• Also I write stuff on Dev.to

callbag-router's Issues

Add a rendering plugin for router links

Right now, navigation is only possible with onclick handlers. If we want anchor elements to have the links and route based on it means we need redundant specification:

<a onclick={() => navigate('/hellow')} href='/hellow' />

This is also particularly inconvenient for specifying query parameters / route parameters. Perhaps a rendering plugin that will handle handle these automatically:

import { RouterLinkPlugin, link } from 'callbag-router'

renderer = makeRenderer().plug(() => new RouterLinkPlugin())

renderer.render(
  <>
    <a router-link='/hellow'/>
    <a router-link={link('/hellow/:name', { query: { x: '42' }, route: { name: 'world' } })}/>
  </>
).on(document.body)

Parameter extraction fails with glob-star route matching

Current extractParams() algorithm fails to properly extract parameters when the route has a glob star preceding the parameters and the glob star is matched with more than one path element in the matched route.

Example:

route	/a/**/b/:x
match	/a/e/f/b/Y
params (correct)	{ x: 'Y' }
params (current, incorrect)	{ x: 'b' }

This skipped test illustrates a reproducible erroneous case, so any fix should have this test passing.