_Hypertext_

``php
Alpha
`

Create HTML in JavaScript via virtual-dom VTrees or directly to the DOM: virtual-hyperscript alternative.




What you need to know:

#### 1) _Hypertext_ is written in ES6, but can be used in any workflow.
See: Hypertext with ES6, ES5, CommonJS, AMD & globals

    Demo using `npm run play` tweak `./playground.js` then check port 9966

    To demo directly use `./dist/hypertext-not-for-production.min.js` all tags will miserably be global.

-     `npm i --save hypertext` : Install
-     `npm run build` : Builds all distributions
-     `npm run play` : Host playground.js on port 9966

#### 2) Import as you need
`javascript
import { div, ul, li, a, header, footer, article, section, aside, h1, h3} from 'hypertext';
`
#### 3) Case: Create HTML elements without a virtual-dom
`javascript

import { createNodes, div, h1, p, figure, figcaption, img } from 'hypertext';

const helloWorldTree =
div({ class: 'hello', id: 'world' },
h1('Hello World!'),
p('How are you?'),
figure({ class: 'img-section' },
figcaption('Three different breeds of dogs.'),
img({ alt: 'Maltese Terrier', src: 'dog1.jpg' }),
img({ alt: 'Black Labrador', src: 'dog2.jpg' })
)
);

let helloWorldNodes = createNodes(helloWorldTree);
document.body.appendChild(helloWorldNodes);
`
Will create:
`html



`
#### 4) Case: Use Hypertext with a virtual dom

Hypertext currently supports any virtual dom based on virtual-dom's VTrees.
Such as:
- virtual-dom
- mercury

A modification of virtual-dom's example:
`
import { div } from 'hypertext';
import { diff, patch, createElement } from 'virtual-dom';

// 1: Create a function that declares what the DOM should look like
function render(count) {
return (
div({style: {textAlign: 'center', lineHeight: (100 + count) + 'px',
border: '1px solid red', width: (100 + count) + 'px', height: (100 + count) + 'px'}},
[String(count)]
)
)
}

// 2: Initialise the document
var count = 0;

var tree = render(count); // We need an initial tree
var rootNode = createElement(tree); // Create an initial root DOM node ...
document.body.appendChild(rootNode); // ... and it should be in the document

// 3: Wire up the update logic
setInterval(function () {
count++;

var newTree = render(count);
var patches = diff(tree, newTree);

rootNode = patch(rootNode, patches);
tree = newTree;
}, 1000);
`
#### 5) Ramblings

_Hypertext_ features identical tag notation to HTML without the use of a transformer as with JSX.
There's a few good reasons to use _Hypertext_
- Those who know HTML but with little to no JavaScript knowledge already know _Hypertext_.
- There is no set up or compiling for production use.
- Hypertext is valid JavaScript.
- Only supports valid HTML tags (Custom HTML pending).
- Supports condtitions and easy to use iterations (loop() fn pending).
- For some, the syntax may be more readable than markup: `` === `)`.
- Has no dependencies, but obviously requires a virtual DOM if you care about repaint/ reflow (You should).
- _Hypertext_ hopes to one day be virtual-dom agnostic (_e.g. React, Vue 2.0, incremental dom support_) as "most" of
the differences between various virtual dom libraries do not warrant complete re-implementations of Hypertext.


#### 6) Contribute

-     `npm run es` : Builds hypertext.es.js
-     `npm run umd` : Builds hypertext.js
-     `npm run globals` : Builds not-for-production.min.js
-     `npm run watch`` : Build and watch src for es

#### 7) Thanks

To Matt Esch and Jake Verbaten for creating a bunch of cool libraries and modules that made Hypertext feasible.

MIT
Copyright (c) 2016 Julien Etienne