hypertext
v1.0.9
Published
Create HTML in JavaScript via virtual-dom VTrees or directly to the DOM: virtual-hyperscript alternative
Downloads
37
Maintainers
Readme
Hypertext
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
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:
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