You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
See also mercury, a modular ui
framework influenced by hyperscript but much more heavily optimized.
Example
varh=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:
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.
varh=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.
varh=require('hyperscript')h('h1.fun',{style: {'font-family': 'Comic Sans MS'}},'Happy Birthday!')
or as a string
varh=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:
If you need to clean up a widget created using hyperscript - deregistering all its event handlers and observable listeners, you can use context().
varh=require('hyperscript').context()varo=require('observable')vartext=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 cleanuph.cleanup()