Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hyperhype/hyperscript

Create HyperText with JavaScript.
https://github.com/hyperhype/hyperscript

hyperscript templating

Last synced: about 2 months ago
JSON representation

Create HyperText with JavaScript.

Awesome Lists containing this project

README 

        
# HyperScript



Create HyperText with JavaScript, on client or server.



[![testling badge](https://ci.testling.com/hyperhype/hyperscript.png)](https://ci.testling.com/hyperhype/hyperscript)



[Interactive Demo](http://hyperhype.github.io/hyperscript)



See also [mercury](https://github.com/Raynos/mercury), a modular ui

framework influenced by hyperscript but much more heavily optimized.



## Example



``` js

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:



``` js

console.log(h('h1', 'hello!').outerHTML)

=> '
hello!
'

```



## 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 `
`.



### Attributes



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



``` js

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](http://www.w3.org/TR/DOM-Level-2-HTML/html.html)

for details.



### events



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



``` js

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.



``` js

var h = require('hyperscript')

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

```



or as a string



``` js

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:



``` js

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()`.



``` js

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



* [html2hscript](https://github.com/twilson63/html2hscript) - Parse HTML into hyperscript

* [dom2hscript](https://github.com/AkeemMcLennon/dom2hscript) - Frontend library for parsing HTML into hyperscript using the browser's built in parser.

* [html2hscript.herokuapp.com](http://html2hscript.herokuapp.com/) - Online Tool that converts html snippets to hyperscript

* [html2hyperscript](https://github.com/unframework/html2hyperscript) - Original commandline utility to convert legacy HTML markup into hyperscript

* [hyperscript-helpers](https://github.com/ohanhi/hyperscript-helpers) - write `div(h1('hello'))` instead of `h('div', h('h1', 'hello'))`

* [react-hyperscript](https://github.com/mlmorg/react-hyperscript) - use hyperscript with React.

* [hyperaxe](https://github.com/ungoldman/hyperaxe) - an enchanted hyperscript weapon.



## License



MIT