hypertext

hypertext

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

import { div, ul, li, a, header, footer, article, section, aside, h1, h3} from 'hypertext';

3) Case: Create HTML elements without a virtual-dom

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:

        <div class="hello" id="world">
            <h1>Hello World!</h1>
            <p>How are you?</p>
            <figure class="img-section">
                <figcaption>Three different breeds of dogs</figcaption>
                <img alt="Maltese Terrier" src="dog1.jpg">
                <img alt="Black Labrador" src="dog2.jpg">
            </figure>
        </div>

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: </closingTag> === ).
• 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