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 🙏

© 2020 – Pkg Stats / Ryan Hefner

@arve.knudsen/hyperscript

v2.2.1

Published

Create HyperText with JavaScript, on client or server.

Downloads

202

Maintainers

arve.knudsenarve.knudsen

Keywords

Readme

HyperScript

Create HyperText with JavaScript, on client or server.

testling badge

Interactive Demo

See also mercury, a modular ui framework influenced by hyperscript but much more heavily optimized.

Example

var h = require('hyperscript')
h('div#page',
  h('div#header',
    h('h1.classy', 'h', { style: {'background-color': '#22f'} })),
  h('div#menu', { style: {'background-color': '#2f2'} },
    h('ul',
      h('li', 'one'),
      h('li', 'two'),
      h('li', 'three'))),
    h('h2', 'content title',  { style: {'background-color': '#f22'} }),
    h('p',
      "so it's just like a templating engine,\n",
      "but easy to use inline with javascript\n"),
    h('p',
      "the intention is for this to be used to create\n",
      "reusable, interactive html widgets. "))

On the server

You can still use hyperscript on the server, the limitation is that events don't make sense anymore, but you can use it to generate html:

console.log(h('h1', 'hello!').outerHTML)
=> '<h1>hello!</h1>'

h (tag, attrs, text?, Elements?,...)

Create an HTMLElement. The first argument must be the tag name, you may use a fully qualified tagname for building e.g. XML documents: `h('ns:tag').

classes & id

If the tag name is of form name.class1.class2#id that is a shortcut for setting the class and id.

default tag name

If the tag name begins with a class or id, it defaults to a <div>.

Attributes

If an {} object is passed in it will be used to set attributes.

var h = require('hyperscript')
h('a', {href: 'https://npm.im/hyperscript'}, 'hyperscript')

Note that hyperscript sets properties on the DOM element object, not attributes on the HTML element. This makes for better consistency across browsers and a nicer API for booleans. There are some gotchas, however. Attributes such as colspan are camel cased to colSpan, and for on the label element is htmlFor to avoid collision with the language keyword. See the DOM HTML specification for details.

events

If an attribute is a function, then it will be registered as an event listener.

var h = require('hyperscript')
h('a', {href: '#',
  onclick: function (e) {
    alert('you are 1,000,000th visitor!')
    e.preventDefault()
  }
}, 'click here to win a prize')

styles

If an attribute has a style property, then that will be handled specially.

var h = require('hyperscript')
h('h1.fun', {style: {'font-family': 'Comic Sans MS'}}, 'Happy Birthday!')

or as a string

var h = require('hyperscript')
h('h1.fun', {style: 'font-family: Comic Sans MS'}, 'Happy Birthday!')

You may pass in attributes in multiple positions, it's no problem!

children - string

If an argument is a string, a TextNode is created in that position.

children - HTMLElement

If a argument is a Node (or HTMLElement), for example, the return value of a call to h that's cool, too.

children - null.

This is just ignored.

children - Array

Each item in the array is treated like a ordinary child. (string or HTMLElement) this is useful when you want to iterate over an object:

var h = require('hyperscript')
var obj = {
  a: 'Apple',
  b: 'Banana',
  c: 'Cherry',
  d: 'Durian',
  e: 'Elder Berry'
}
h('table',
  h('tr', h('th', 'letter'), h('th', 'fruit')),
  Object.keys(obj).map(function (k) {
    return h('tr',
      h('th', k),
      h('td', obj[k])
    )
  })
)

Cleaning Up

If you need to clean up a widget created using hyperscript - deregistering all its event handlers and observable listeners, you can use context().

var h = require('hyperscript').context()
var o = require('observable')
var text = o()
text('click here to win a prize')
h('a', {href: '#',
  onclick: function (e) {
    text('you are 1,000,000th visitor!')
    e.preventDefault()
  }
}, text)

// then if you want to remove this widget from the page
// to cleanup
h.cleanup()

Ecosystem

License

MIT