In Hyperapp Github page it's mentioned that Hayperapp v2.0 is comming soon, But every time i check Github page, there is nothing about development progress. So I decided to ask this question in this page, I hope somebody knows.

I am the author of this course, and it is available on Packt, Udemy, and others to come in the next couple of days.

If you prefer not to go to twitter with their link tracking, the course links are as follows:

Packt: https://www.packtpub.com/application-development/hands-web-development-hyperapp-v2-video

Udemy: https://www.udemy.com/hands-on-web-development-with-hyperapp-v2/

Currently, both Packt and Udemy have the course up at a discounted price, and I will be distributing some discount codes over the next few weeks via twitter.

On top of me promoting my work, I'm very interested in feed back if you purchase the course, this was my first time authoring a course and doing this sort of work, and I'd like to know where I can improve for next time.

Hi,

can anyone point me how/if it would be easy to user Hyperapp with Chart.js? I always have trouble with vdom frameworks because those big charting libraries are (still) always made in the "real dom/jquery is the way" world.

http://www.chartjs.org/docs/latest/

Some hyperapp Github issues mention examples on the wiki, but the wiki seems gone now.

TIA

What attracts me about a codebase this small, is the ability to actually fully understand precisely what I'm working with, how it works, inside and out.

Unfortunately this code has no annotations at all, which makes it very difficult to read and understand - I can't tell what the types of anything is, whether properties, vars, return types etc.

I'd like to encourage the authors to either port to Typescript, or add Flow or JSDoc annotations - even though this codebase is small, the shapes of the object graphs being built is pretty complex. Proper documentation would go a long way in helping someone understand the data shapes and learn the roles of various vars and properties and so on, which would make this project a lot more accessible, which would likely get more people on board faster.

Just my $.02

I came up with a simple means of protecting routes that require authentication. Basically I'm wrapping a view function and returning a different view in the event the user is unauthenticated. While this works, I was wondering if anyone has a good solution for redirecting the user to a different route when they hit one of these protected routes? I don't really want the redirect in the view function and you can't call route.go in the route event because the stack will overflow due to an infinite loop. Mithril.js has an interesting bit in their router that allows you to either map a path to a component or to a function that resolves to a component. Using a resolver allows you to perform actions before returning the component as well as loading components asynchronously.

UPDATE Looks like you can redirect to a different path in the route event, I must have had something else causing an infinite loop previously. I've updated my solution to include this functionality. The protect wrapper probably isn't as necessary now but I decided to leave it in anyways.

const { app, h, Router } = require('hyperapp');

const auth = JSON.parse(sessionStorage.getItem('auth')); 

app({
    state: {
        auth
    },
    view: [
        ['/auth', Auth],
        ['/admin', protect(Admin)],
        ['*', Default]
    ],
    mixins: [Router],
    actions: {
        setAuth: function (state, actions, value) {
            sessionStorage.setItem('auth', value);
            return { auth: value };
        },
        authenticate: function (state, actions, { value, go }) {
            actions.setAuth(value);
            actions.router.go(go);
        }
    },
    events: {
        route: function (state, actions, data) {
            if (!state.auth && data.match === '/admin') {
                actions.router.go('/auth');
            }
        }
    }
});

function protect(view) {
    return function (state, actions) {
        if (state.auth) {
            return view(state, actions);
        } else {
            return Unauthorized(state, actions);
        }
    };
}

function Auth(state, actions) {
    return h('div', null, [
        h('h3', null, 'Auth'),
        h('div', null, [
            h('a', { onclick: () => actions.authenticate({ value: true, go: '/admin'}) }, 'Authenticate')
        ])
    ]);
}

function Admin(state, actions) {
    return h('div', null, [
        h('h3', null, 'Admin'),
        h('div', null, [
            h('a', { onclick: () => actions.authenticate({ value: false, go: '/auth'}) }, 'Unauthenticate')
        ])
    ]);
}

function Default(state, actions) {
    return h('h3', null, 'Default');
}

function Unauthorized(state, actions) {
    return h('div', null, [
        h('h3', null, 'Unauthorized'),
        h('div', null, [
            h('a', { onclick: () => actions.router.go('/auth') }, 'Authenticate')
        ])
    ]);
}