Hyperapp: Tutorial broken on master branch

[MikeBeller]

New to hyperapp. Just went to the github site and tried the tutorial as per tutorial.md https://github.com/jorgebucaran/hyperapp/blob/3b606b514b1d86fbd1c8ba522e7685fa2aef5ebf/docs/tutorial.md#L96 (commit d405ddfddb464acfce29a7c721fee8c874da1336) and it doesn't render the html in the view.

To fix just add an init:0 to the app call, and perhaps set the view function to take an (unused) state parameter.

    app({
        init: 0,
        node: document.getElementById("app"),
        view: (state) => h("h1", {}, [text("Hello "), h("i", {}, text("World!"))]),
      });

I suspect something just got out of sync between master tutorial.md and the current released version of hyperapp, but wanted to let you know in case others will try the tutorial from master and get frustrated.

[jorgebucaran]

Thanks, @MikeBeller! I know, we still need to update the tutorial. I hope to take care of it soon. 🙇

[MikeBeller]

Ah. Great. Sorry to disturb. Anyway -- great project @jorgebucaran. I am impressed with the expressiveness using such a small amount of code.

[jorgebucaran]

@MikeBeller Not at all! I appreciate you looking at it and checking that it didn't work. Thanks again!

[mickeyvip]

Seems like init is mandatory for triggering render. If not set, then the Hyperapp code:

  var setState = (newState) => {
    if (state !== newState) {
      state = newState
      if (subscriptions) {
        subs = patchSubs(subs, subscriptions(state), dispatch)
      }
      if (view && !doing) enqueue(render, (doing = true))
    }
  }

evaluates the condition state !== newState as undefined !== undefined which is false and the render is never enqueued for execution.

The confusing thing is that there is no indication that something is missing.

The minimum change that worked for me is:

app({
  init: null,
  node: document.getElementById("app"),
  view: () => h("h1", {}, [text("Hello "), h("i", {}, text("World!"))]),
});

In Elm, when main returns Html msg, having Model is not needed:

main =
  Html.div [] [ Html.text "Hello World!" ]

So maybe Hyperapp can trigger render for the first time without a check for state change?

[jorgebucaran]

@mickeyvip Good observation, init is definitely required to start the app. 👍

So maybe Hyperapp can trigger render for the first time without a check for state change?

Yes, we could, but what's the merit? Every app needs a state, otherwise why use Hyperapp at all! 😄

[mickeyvip]

In that case I would expect some kind of warning/error telling me what I am doing wrong or what's missing.

Right now there are no warnings/errors/logs messages if I do not supply init or set node to something invalid and it's really confusing.

[jorgebucaran]

In that case I would expect some kind of warning/error telling me what I am doing wrong or what's missing.

Some thoughts:

• For those using TypeScript, I suppose the compiler will not let you run app if you don't have a correct signature.
  
  
  
  • Not everyone is using TypeScript (I am usually not), so this is not the best solution.
  
  
• A future official DevTools package that bundles Hyperapp + DevTools could help with logs, warning, and error related issues.
  
  
  
  • I'd love to work on this particular one full time, but I can't dedicate much time to explore this area right now. I do believe I'll get to it eventually one way or another!
  
  

[zaceno]

tutorial updated to work with latest hyperapp 2.0.8, see #994
In the long run, I expect the tutorial will be overhauled, but for now it works.
Suggest closing issue