Neverending Programming Mistakes

    hyperapp-page-router

    0.3.1 • Public • Published

    hyperapp-page-router

    An ultra light and simple Hyperapp wrapper for Page router.

    npm i hyperapp-page-router

    Context Api

    Create a Route Action

    // actions.js
    export const loadIndex = (state, context) => [{
      ...state,
      // set next page state
      title: "Loaded the index view"
    }, [
      // run http or other effects to load external data etc.
    ]];

    Create a Route View

    Create any component view

    // views.js
    import { h, text } from "hyperapp"
     
    export const IndexView = ({ title }) => h('h1', {}, text(title))

    Register Route

    Route actions are optional. Omit this if you just need to load a component view.

    // routes.js
    import { r } from "hyperapp-router-app"
     
    import { loadIndex } from "./actions"
    import { IndexView } from "./views"
     
    r({ name: "index", path: "/", action: loadIndex, view: IndexView })

    Place the Router Outlet

    Normally this will be placed in your main layout or app shell

    // App.js
    import { h, text } from "hyperapp"
    import { Outlet } from "hyperapp-page-router"
     
    export default state =>
      h('div', {}, [
        h('header', {}, h('a', { href: "/" }, text("Home"))),
        Outlet(state)
      ])

    Mount Router to app

    // index.js
    import { h, app } from "hyperapp"
    import { withRouter } from "hyperapp-router-app"
     
    import App from "./App"
     
    withRouter(app)({
     init: { title: "It works!" },
     subscriptions: () => [],
     view: App,
     node: document.getElementById('app')
    })

    Create a Link

    Using url will allow reverse lookups on the routes registered. You can use this in conjunction with any anchor tag to allow a customizable Link component to be used. As long as the resulting tag is an a tag, it will just work.

    import { h, text } from "hyperapp"
    import { url } from "hyperapp-page-router"
     
    const Link = ({ name, params, query, ...state }, children) => h('a', { href: url({ name, params, query }), ...state }, children)

    License

    MIT.

    Keywords

    none

    Install

    npm i hyperapp-page-router

    DownloadsWeekly Downloads

    2

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    22.8 kB

    Total Files

    6

    Last publish

    Collaborators

    • bmartel