Hyperapp

The dispatch function is the core of Hyperapp's execution loop. It is responsible for:

1. Executing actions.
2. Applying state transitions.
3. Running effects.
4. Managing subscriptions.

Its signature is: DispatchFn : (Action, Payload?) -> void

A view is a declarative description of what should be rendered, typically influenced by the current state. In Hyperapp, a view is implemented as a pure function that accepts the current state and returns a virtual DOM node (VNode). When state transitions occur, your views are automatically updated to reflect the new state.

Signature:

View : (State) -> VNode

const view = (state) => h("div", {}, text(state.message))

You use three primary functions to describe your views:

1. h(): Describes HTML elements and wires up actions (events). It takes an element name, a properties object, and children.
2. text(): Creates text nodes. Use this for simple text content.
3. memo(): An optimization function used with other VNode-producing functions to prevent unnecessary re-renders.

Example using h() and text():

const view = (state) =>
  h(
    "button",
    {
      class: { "calling-acid-burn": state.beingFramed },
      onclick: FindThatDisk,
    },
    text("It's in that place where I put that thing that time.")
  )

Hyperapp provides memo() to implement memoization, an optimization technique that stores the result of a calculation to avoid re-computing it.

In Hyperapp, memoization prevents a component from re-rendering unless its specific props have changed. Because Hyperapp relies on immutability, it can safely check if props are referentially equal to determine if a re-render is necessary.

When to use memo():

• Use it for nodes that do not need to update frequently or at all.
• Avoid using it for nodes that must update on every state change; the overhead of checking props will actually decrease performance.

Example:

const view = (state) => memo(scenicView, state.vacationSpot)

An effect is a representation used by actions to interact with external processes (e.g., HTTP requests, DOM focus, local storage, WebSockets). They allow you to handle impure asynchronous interactions in a safe, pure, and immutable way.

An effect is conceptually a tuple consisting of an effecter and an optional **payload.

Naming Convention: It is recommended to name effects using camelCase with an imperative verb or verb-noun phrase (e.g., log or saveAsPDF).

An action is a function that describes a transformation of the state. It takes the current state as its first argument and must return a new state object of the same shape.

To trigger an action, assign it to an event handler (like onclick) in your view. Hyperapp will dispatch the action, use it to transform the state, and then re-render the view.

// An action definition
const ToggleHighlight = state => ({ ...state, highlight: !state.highlight })

// Dispatching the action in a view
h("input", {
  type: "checkbox",
  checked: state.highlight,
  onclick: ToggleHighlight,
})

You can conditionally show or hide elements in your view using standard JavaScript logical operators like && or ternary operators condition ? A : B.

state => h("main", {}, [
  // ... other elements
  state.bio && h("div", { class: "bio" }, text(state.bio)),
])

A subscription represents a dependency your application has on an external process (e.g., time, location changes, or custom DOM events).

Subscriptions allow you to handle impure, asynchronous interactions with the outside world in a safe, pure, and immutable way. They automate resource management, such as adding and removing event listeners or closing connections, based on the application state.

In Hyperapp, state is the unified set of data that your views, actions, and subscriptions all access.

Unlike many other frameworks, Hyperapp does not enforce local state within components. Instead, all data is stored in a single, unified state tree. This means components have direct access to any part of the global state they require, but the developer is responsible for defining the structure of this state.

Hyperapp actions are pure functions meant to calculate a new state. They are not intended for running arbitrary side effects like API calls. To run side effects, an action must return a tuple in the format [newState, effecter].

An effecter (or effect runner) is a function that Hyperapp calls during the dispatch process. Hyperapp automatically provides the dispatch function as the first argument to the effecter, allowing you to dispatch new actions once your side effect (like a fetch) completes.

Example of an action with an effecter:

const Select = (state, selected) => [
  {...state, selected},
  dispatch => {
    fetch("https://jsonplaceholder.typicode.com/users/" + state.ids[selected])
      .then(response => response.json())
      .then(data => dispatch(GotBio, data))
  }
]