hyperapp/docs/api/app.md

app()

Initializes and mounts a Hyperapp application.

app : ({ Init, View, Node, Subscriptions?, Dispatch? }) -> DispatchFn

Prop	Type	Required?
init:	State [State, ...Effect[]] Action [Action, any]	No
view:	View	No
node:	DOM element	Yes when view: is present.
subscriptions:	Function	No
dispatch:	Dispatch Initializer	No

Return Value	Type
dispatch	Function

import { app, h, text } from "hyperapp"

app({
  init: { message: "Hello World!" },
  view: (state) => h("p", {}, text(state.message)),
  node: document.getElementById("app"),
})

init:

(default value: {})

Initializes the app by either setting the initial value of the state or taking an action. It takes place before the first view render and subscriptions registration.

Forms of init:

• init: state

  Sets the initial state directly.

  app({
    init: { counter: 0 },
    // ...
  })
  

• init: [state, ...effects]

  Sets the initial state and then runs the given list of effects.

  app({
    init: [
      { loading: true },
      log("Loading..."),
      load("myUrl?init", DoneAction),
    ],
    // ...
  })
  

• init: Action

  Runs the given Action.

  This form is useful when the action can be reused later. The state passed to the action in this case is undefined.

  const Reset = (_state) => ({ counter: 0 })
  
  app({
    init: Reset,
    // ...
  })
  

• init: [Action, payload]

  Runs the given Action with a payload.

  const SetCounter = (_state, n) => ({ counter: n })
  
  app({
    init: [SetCounter, 10],
    // ...
  })
  

view:

The top-level view that represents the app as a whole. There can only be one top-level view in your app. Hyperapp uses this to map your state to your UI for rendering the app. Every time the state of the application changes, this function will be called to render the UI based on the new state, using the logic you've defined inside of it.

app({
  // ...
  view: (state) => h("main", {}, [
    outworld(state),
    netherrealm(state),
  ]),
})

node:

The DOM element to render the virtual DOM over (the mount node). The given element is replaced by a Hyperapp application. This process is called mounting. It's common to define an intentionally empty element in your HTML which has an ID that your app can use for mounting. If the mount node had content within it then Hyperapp will attempt to recycle that content.

<main id="app"></main>

app({
  // ...
  node: document.getElementById("app"),
})

subscriptions:

A function that returns an array of subscriptions for a given state. Every time the state of the application changes, this function will be called to determine the current subscriptions.

If a subscription entry is falsy then the subscription that was at that spot, if any, will be considered unsubscribed from and will be cleaned up.

If subscriptions: is omitted the app has no subscriptions. It behaves the same as if you were using: subscriptions: (state) => []

import { onKey } from "./subs"

app({
  // ...
  subscriptions: (state) => [
    onKey("w", MoveForward),
    onKey("a", MoveBackward),
    onKey("s", StrafeLeft),
    onKey("d", StrafeRight),
    state.playingDOOM1993 || onKey(" ", Jump),
  ],
})

dispatch:

A dispatch initializer that can create a custom dispatch function to use instead of the default dispatch. Allows tapping into dispatches for debugging, testing, telemetry etc.

Return Value

app() returns the dispatch function your app uses. This can be handy if you want to control your app externally, ie where only a subsection of your app is implemented with Hyperapp.

Calling the dispatch function with no arguments frees the app's resources and runs every active subscription's cleanup function.

Other Considerations

• You can embed your Hyperapp application within another already existing Hyperapp application or an app that was built with some other framework.

• Multiple Hyperapp applications can coexist on the page simultaneously. They each have their own state and behave independently relative to each other. They can communicate with each other using subscriptions and effects (i.e. using events).