hyperhtml-app [deprecated]

This project has been improved, and replaced, by a-route.

- - -

Express like routing for _pop_ and _push_ states.

  

Designed for hyperHTML, it works as standalone module too.

$3

Path-To-RegExp breaks compatibility with Express <= 4.x.

* RegExp special characters can only be used in a parameter
* Express.js 4.x used all RegExp special characters regardless of position - this considered a bug
Parameters have suffixes that augment meaning - , + and ?. E.g. /:user*
No wildcard asterisk () - use parameters instead ((.*))

$3

This project uses path-to-regexp module,
the official Express JS path parser, and it combines it with an Express like API,
mixing in the ease of page.js callbacks.

Based on the tiny, server side compatible, onpushstate module,
this module has been created to be an ideal companion for the viperHTML tech fam.

API

* app.get('/path/:user', callback) to react on paths and trap ctx.params such user or others.
* app.use(path, callback) to add a generic middleware (similar to app.get but it accepts an array of paths)
* app.delete(path, callback) to remove a specific callback
* app.param(name, callback) to react once upfront whenever a specific parameter is passed along.
* app.navigate(pathname[, options]) to push state and navigate to a different URL via standard History API. If the pathname and the search string are the same, it'll trigger a samestate type event (as opposite of popstate and pushstate). If there is a second _options_ parameter and it has a replace or replaceState truthy property, it will not trigger a navigation event but it will replace the latest history with the current URL (shortcut for history.replaceState(...)).

$3

Every callback will be invoked with a generic context object, a next function to invoke once everything is OK,
and in case of app.param(name, fn) the value, as third argument, for the specified parameter.

``js
const hyperApp = require('hyperhtml-app');

const app = hyperApp();

app.get('/', function (ctx) {
console.log('Welcome');
});

app.use('/:user', function (ctx, next) {
console.log(ctx.params);
});

app.param('user', function (ctx, next, name) {
console.log(name); // hyper
});

app.navigate('/hyper');
`

$3

hyperhtml-app lets you handle routing as you prefer, but the following is an example of how you might get started.

`js
const hyperHTML = require('hyperhtml')
const HyperHTMLApp = require('hyperhtml-app')

/**
* Utility
*/
function getCurrentRoute() {
return window.location.pathname.replace('index.html', '');
}

/**
* Router configuration
*/
const routerOutletEl = document.createElement('div');
const router = new HyperHTMLApp();
const renderRoute = hyperHTML.bind(routerOutletEl);

router.get('/user/:name', ctx => {
const userName = ctx.params.name

renderRoute

Hello ${userName}

Hello world

/**
* Declarative render of the application and the active route
*/
const html = hyperHTML.bind(document.getElementById('root'))
function render() {
return html

// Trigger route handler for the initial route
router.navigate(getCurrentRoute());
``

Try it live

$3

You can test this library live.

The only relatively modern features your target browser should support are both URL and History API.

You can use polyfill.io link in case you need these polyfills.