Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/julienetie/hypertext
Create HTML in JavaScript via virtual-dom VTrees or directly to the DOM: virtual-hyperscript alternative
https://github.com/julienetie/hypertext
Last synced: 29 days ago
JSON representation
Create HTML in JavaScript via virtual-dom VTrees or directly to the DOM: virtual-hyperscript alternative
- Host: GitHub
- URL: https://github.com/julienetie/hypertext
- Owner: julienetie
- License: mit
- Created: 2016-10-08T16:45:51.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2016-10-31T13:40:58.000Z (about 8 years ago)
- Last Synced: 2024-11-22T20:06:31.712Z (about 1 month ago)
- Language: JavaScript
- Homepage: https://github.com/julienetie/hypertext/wiki
- Size: 527 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# _Hypertext_
```php
Alpha
```
Create HTML in JavaScript via [virtual-dom](https://github.com/Matt-Esch/virtual-dom) VTrees or directly to the DOM: [virtual-hyperscript](https://github.com/Raynos/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](https://github.com/julienetie/hypertext/wiki/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
Hello World!
How are you?
Three different breeds of dogs
```
#### **4**) Case: Use Hypertext with a virtual dom
Hypertext currently supports any virtual dom based on [virtual-dom](https://github.com/Matt-Esch/virtual-dom)'s VTrees.
Such as:
- [virtual-dom](https://github.com/Matt-Esch/virtual-dom)
- [mercury](https://github.com/Raynos/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](https://github.com/julienetie/hypertext/blob/master/LICENSE)
Copyright (c) 2016 Julien Etienne