npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

hyperapp-context

v1.1.0

Published

Context-aware Hyperapp components

Downloads

19

Readme

hyperapp-context

Travis CI npm

In Hyperapp, the way to provide data to components is by passing properties to them. If your component tree is deep, and finely separated, this can quickly become repetetitive and burdensome -- and may lead to hard-to-find bugs.

"Contexts" offer a complementary (not exclusive) way of providing data to components which can remedy the situation.

This "higher-order-app" (or app decorator) enables the use of context in Hyperapp-apps.

Installation

If you're using a module bundler, install With npm or Yarn:

And then import the same way you would anything else, in the same file where you import app from Hyperapp

import {h, app as _app} from "hyperapp"
import context from "hyperapp-context"

Alternatively, if you're not using a module bunder, you can download hyperapp-context from a CDN like unpkg.com and it will be globally available as window.context.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/hyperapp"></script>
  <script src="https://unpkg.com/hyperapp-context"></script>
</head>
</html>

Usage

Enable context

In order to enable the context system in your app, don't call Hyperapp's app directly. First, wrap it with withContext.

import {app as _app} from 'hyperapp'
import {withContext} from 'hyperapp-context'
const app = withContext(_app)

//...

app(state, actions, view, container)

Access context in components

The "context" is a set of data available to components without the need to pass it as props from its parent-container. In order to access context-data, define your components using this signature:

const MyComponent = (props, children) => context => (
    <div class={context.foo}>{context.bar}</>
)

Write to the context

In order for a component to have access to data in the context, it must first have been written to the context, by a component higher up in the component-tree. A component can write to the context using the function provided as the second argument after the context.

const GrandDadComponent = (props, children) => (context, setContext) => {
    setContext({
        foo: 'foo',
        bar: 'bar',
    })
    return (
        <div>
        ...
        </div>
    )
}

The example makes foo and bar available to any decendant in the component tree.

If any components even further up the tree had already defined foo or bar, this would override those values for any decendants of GrandDadComponent, but siblings would recieve the original valuues.

Define context directly in the view

You can write to the context for your entire app, by setting it in your view. A common use for this is to make state and actions available to all components.


const view = (state, actions) => (context, setContext) => {
    setContext({state, actions})
    return (
        <main>
            ...
        </main>
    )
}

Use a component to set context

A technical limitation with the setContext function described above, is that it should really only be called once in a component. If called multiple times, only the last call will have an effect.

If you would like to apply different contexts to different branches of descendants in a component, first define a component that can be used to set the context:

const SetContext = (props, children) => (_, setContext) => {
  setContext(props)
  return children
}

Now you may use this to define different contexts for different branches inside a single component/view:

const view = (state, actions) => (
  <SetContext state={state} actions={foo}>
    <main>
      <section class="toolbar">
        <SetContext section="toolbar">
          <FooButton />
          <BarButton />
        </SetContext>
      </section>
      <section class="main">
        <SetContext section="main">
          <Main />
        </SetContext>
      </section>
    </main>
  </SetContext>
)

Example

This TodoMVC example makes liberal (extreme, perhaps...) use of context.

Nestable

Embed hyperapp-apps in your main app, as if they were components.

Usage is exactly as in https://github.com/zaceno/hyperapp-nestable, except for these two details:

Import using:

import {nestable} from 'hyperapp-context'

These nestables are context enabled, meaning you get access to the external context in the nestable's view, and can share data from the component with its children, via context:

const MyComponent = nestable(
  //State
  {...},

  //Actions
  {...},

  //View
  (state, actions) => (props, children) => (context, setContext) => {
    setContext({...})
    return children
  }
)

Preprocessing the VDOM

Sometimes you want a component which does not itself add anything to the virtual-dom-tree, but simply modifies it's children in some way, for example, by attaching dom handlers. For this purpose, we export processor

import {processor} from 'hyperapp-context'

const MyProcessor = processor((props, children, context) => {
  /*
    Here, props will be {foo: 'bar'}
    children will be {nodeName: 'p', attributes: {}, children: ['bop']}
    return whatever you want to make of this.
  */
})

const Child = _ => context => <p>bop</p>

...
<MyProcessor foo="bar"><Child></MyProcessor>
...

Decorators

Working directly with vnodes as in the example above is rarely necessary, and a bit rough. Most often what you want to do is simply to add a few event/lifecycle handers or perhaps a class to the child nodes. To facilitate this we export decorator which lets you define a processing component that does just that:

const SelectionDecorator = decorator(({row, col}, {selection}) => ({
    onmousedown: ev => {
        ev.preventDefault(true)
        selection.start({row, col})
    },
    onmouseup: ev => {
        ev.preventDefault(true)
        selection.end({row, col})
    },
    onmouseover: ev => {
        ev.preventDefault(true)
        selection.select({row, col})
    },
    class: selection.isSelected({row, col}) && 'selected'
}))

//...

<SelectionDecorator row={i} col={j}>
<td>{values[i][j]}</td>  
</SelectionDecorator>

//...

Example

This example demonstrates using a nestable as a provider of selection state and actions via the context, and decorating table cells with selection event handlers, so that you can operate on the main state using the selection data.

https://codepen.io/zaceno/pen/vdwQdy?editors=0110

License

hyperapp-context is MIT licensed. See LICENSE.md.