Skip to content
This repository has been archived by the owner on Apr 29, 2023. It is now read-only.

[Resubmit] Add hash router capability #36

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

jrop
Copy link

@jrop jrop commented Jan 7, 2018

This is an updated PR in the same vein as #1 and has the following features:

  • backwards compatible with the current API
  • Link/Route are created using a factory that takes as input a "provider". These providers provide methods to access/mutate/subscribe to different location backends (in this case window.location.pathname/pushState and window.location.hash)
  • The default exported Link/Route are tied to the window.location backend

To use with hash routing (for example):

index.html (place at project root to test)

<div id="root"></div>
<script src="https://unpkg.com/[email protected]/dist/hyperapp.js"></script>
<script src="https://unpkg.com/@jrop/[email protected]/dist/hyperx.min.js"></script>
<script src="dist/router.js"></script>
<script>
	const { app, h } = hyperapp
	const hx = hyperx(h)

        // obtain specialized versions of Link/Route:
	const { Link, Route } = router.hash
	const STATE = Object.assign({}, router.hash.state)
	const ACTIONS = Object.assign({}, router.hash.actions)
	const main = app(STATE, ACTIONS, () => hx`<div>
		<h1>App</h1>
		${Link({ to: '/' }, 'Home')}
		${Link({ to: '/about' }, 'About')}

		${Route({ path: '/', render: () => hx`<p>Home</p>` })}
		${Route({ path: '/about', render: () => hx`<p>About</p>` })}
	</div>`, document.getElementById('root'))
	const unsubscribe = router.hash.subscribe(main)
</script>

The two included "providers" are properties on the exported router and have the following shape:

router = {
    location: {
        state: ..., actions: ...,
        subscribe: ...,
        Link: ..., Route: ...
    },
    hash: {
        state: ..., actions: ...,
        subscribe: ...,
        Link: ..., Route: ...
    },
    ...
}

Before and after file sizes:
Before: router.js: 941 bytes (gzip'd)
After: router.js: 1159 bytes (gzip'd)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants