hyperscript-custom v1.0.0
hyperscript-custom
NOTE: This is a fork hyperscript allowing some upfront configuration. Most importantly, it allows passing a custom implementation of document
and using the full power of DOM outside the browser.
Create HyperText with JavaScript, on client or server.
See also mercury is 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 intension is for this to be used to create\n",
"reusable, interactive html widgets. "))
universal server/client code
jsdom is a great project allowing to use DOM without a browser. Pass it to hyperscript while initializing:
var isNode = require('detect-node')
var h = require('hyperscript')({ document: (isNode ?
require('jsdom').jsdom().defaultView.document :
this.document
) })
pure server code
you can still use hyperscript on the server, the limitation is that events don't make sense any more, 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 short cut
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
thats 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()
Tools
- html2hscript - Parse HTML into hyperscript
- dom2hscript - Frontend library for parsing HTML into hyperscript using the browser's built in parser.
- html2hscript.herokuapp.com - Online Tool that converts html snippets to hyperscript
- html2hyperscript - Original commandline utility to convert legacy HTML markup into hyperscript
License
MIT
9 years ago