-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
15 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,31 +1,33 @@ | ||
# 🪶 `tiny-vdom` | ||
# 💯 Hundred | ||
|
||
### Hyper-lightweight Virtual DOM | ||
|
||
`tiny-vdom` is intended to be the most lightweight virtual DOM implementation, and is a proof-of-concept and a learning resource more than a tool you should actually use in production. | ||
`hundred` is intended to be the most lightweight virtual DOM implementation, and is a proof-of-concept and a learning resource more than a tool you should actually use in production. | ||
|
||
Additionally, just because `tiny-vdom` is lightweight doesn't mean it's performant by any means. It is faster and smaller than [`simple-virtual-dom`](https://github.com/livoras/simple-virtual-dom), but ranks behind [production-ready Virtual DOM libraries](https://million.js.org/benchmarks/official-benchmarks) | ||
Additionally, just because `hundred` is lightweight doesn't mean it's performant by any means. It is faster and smaller than [`simple-virtual-dom`](https://github.com/livoras/simple-virtual-dom), but ranks behind [production-ready Virtual DOM libraries](https://million.js.org/benchmarks/official-benchmarks) | ||
|
||
> Note: If you're looking for something a bit more comprehensive, check out [Million](https://github.com/aidenybai/million) | ||
## Installation | ||
|
||
```sh | ||
npm install tiny-vdom | ||
npm install hundred | ||
``` | ||
|
||
## Usage | ||
|
||
`index.js` | ||
|
||
```js | ||
import { h, createElement, patch } from 'tiny-vdom'; | ||
import { h, createElement, patch } from 'hundred'; | ||
|
||
const el = createElement(h('div')); | ||
|
||
patch(el, h('div', null, 'Hello World!'), h('div')); | ||
``` | ||
|
||
`patch()` function has a standard interface that is used in many Virtual DOM libraries. First argument is a DOM node that will be used as the live DOM reference, and the second one is a Virtual DOM to render. | ||
|
||
`h()` function will instantiate a "Virtual DOM" node for an element. | ||
|
||
## License | ||
|
||
`tiny-vdom` is [MIT-licensed](LICENSE) open-source software by [Aiden Bai](https://github.com/aidenybai). | ||
`hundred` is [MIT-licensed](LICENSE) open-source software by [Aiden Bai](https://github.com/aidenybai). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters