deno.land / x / nano_jsx@v0.1.0 / components / router.ts
نووسراو ببینە
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258// inspired by https://codesandbox.io/s/build-own-react-router-v4-mpslz
import { Component } from '../component.ts'import { FC, _render, h, isSSR } from '../core.ts'
const instances: Switch[] = []
const register = (comp: Switch) => instances.push(comp)const unregister = (comp: Switch) => instances.splice(instances.indexOf(comp), 1)
const historyPush = (path: string) => { window.history.pushState({}, '', path) instances.forEach(instance => instance.handleChanges()) window.dispatchEvent(new Event('pushstate'))}
const historyReplace = (path: string) => { window.history.replaceState({}, '', path) instances.forEach(instance => instance.handleChanges()) window.dispatchEvent(new Event('replacestate'))}
export interface MatchPathOptions { exact?: boolean path: string regex?: { [param: string]: RegExp }}export type MatchPathResult = { path: string | null url: string isExact: boolean params: { [param: string]: string }} | null
export const matchPath = (pathname: string, options: MatchPathOptions): MatchPathResult => { const { exact = false, regex } = options let { path } = options
if (!path) { return { path: null, url: pathname, isExact: true, params: {} } }
let match let params: any = {}
// path with params if (path.includes('/:')) { const pathArr = path.split('/') const pathnameArr = pathname.split('/') pathArr.forEach((p, i) => { if (/^:/.test(p)) { const key = p.slice(1) const value = pathnameArr[i]
// if a regex is provided, check it it matches if (regex && regex[key]) { const regexMatch = regex[key].test(value) if (!regexMatch) return null }
params = { ...params, [key]: value }
pathArr[i] = pathnameArr[i] } }) path = pathArr.join('/') }
// catch all if (path === '*') match = [pathname]
// regular path if (!match) match = new RegExp(`^${path}`).exec(pathname)
if (!match) return null
const url = match[0] const isExact = pathname === url
if (exact && !isExact) return null
return { path, url, isExact, params }}
export class Switch extends Component<{ fallback?: any; children?: any }> { index: number = 0 path: string = '' match = { index: -1, path: '' }
didMount() { window.addEventListener('popstate', this.handleChanges.bind(this)) register(this) }
didUnmount() { window.removeEventListener('popstate', this.handleChanges.bind(this)) unregister(this) }
handleChanges() { this.findChild() if (this.shouldUpdate()) this.update() }
findChild() { this.match = { index: -1, path: '' }
// flatten children this.props.children = this.props.children.flat()
for (let i = 0; i < this.props.children.length; i++) { const child = this.props.children[i] const { path, exact, regex } = child.props const match = matchPath(isSSR() ? _nano.location.pathname : window.location.pathname, { path, exact, regex }) if (match) { this.match.index = i this.match.path = path return } } }
shouldUpdate() { return this.path !== this.match.path || this.index !== this.match.index }
render() { this.findChild()
const child = this.props.children[this.match.index]
if (this.match.index === -1) { this.path = '' this.index = 0 }
if (child) { const { path } = child.props this.path = path this.index = this.match.index const el = _render(child) return h('div', {}, _render(el)) } else if (this.props.fallback) { return h('div', {}, _render(this.props.fallback)) } else { return h('div', {}, 'not found') } }}
// alias for <Switch />export class Routes extends Switch {}
export interface RouteProps { path: string regex: { [param: string]: RegExp } pathname: string params: { [param: string]: string }}
export const Route: FC<{ path: string; exact?: boolean; regex?: { [param: string]: RegExp }; children?: any }> = ({ path, regex, children}) => { // lookup pathname and parameters const pathname = isSSR() ? _nano.location.pathname : window.location.pathname const params = parseParamsFromPath(path) // pass the route as props to the children children.forEach((child: any) => { if (child.props) child.props = { ...child.props, route: { path, regex, pathname, params } } }) return children}
export const to = (to: string, replace: boolean = false) => { replace ? historyReplace(to) : historyPush(to)}
interface LinkProps { to: string replace?: boolean children?: any [key: string]: any}export const Link: FC<LinkProps> = ({ to, replace, children, ...rest }) => { const handleClick = (event: Event) => { event.preventDefault() replace ? historyReplace(to) : historyPush(to) }
return h('a', { href: to, onClick: (e: Event) => handleClick(e), ...rest }, children)}
class CListener { private _route!: string private _listeners: Map<string, Function> = new Map()
constructor() { if (isSSR()) return
this._route = window.location.pathname
const event = () => { const newRoute = window.location.pathname this._listeners.forEach(fnc => { fnc(newRoute, this._route) }) this._route = newRoute }
window.addEventListener('pushstate', event) window.addEventListener('replacestate', event) }
public use() { const id = Math.random().toString(36).substring(2) return { subscribe: (fnc: (currPath: string, prevPath: string) => void) => { this._listeners.set(id, fnc) }, cancel: () => { if (this._listeners.has(id)) this._listeners.delete(id) } } }}
let listener: CListener | undefinedexport const Listener = () => { if (!listener) listener = new CListener() return listener}
/** Pass "this.props.route.path" to it. */export const parseParamsFromPath = (path: string): { [param: string]: string } => { let params = {} const _pathname = isSSR() ? _nano.location.pathname.split('/') : window.location.pathname.split('/') path.split('/').forEach((p, i) => { if (p.startsWith(':')) params = { ...params, [p.slice(1)]: _pathname[i] } }) return params}
nano_jsx
Version Info
8 months ago
