https://github.com/pqml/dom
Experimental React-like library to build DOM
https://github.com/pqml/dom
Last synced: 2 months ago
JSON representation
Experimental React-like library to build DOM
- Host: GitHub
- URL: https://github.com/pqml/dom
- Owner: pqml
- License: mit
- Created: 2018-03-30T15:53:37.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-05T22:59:11.000Z (over 6 years ago)
- Last Synced: 2025-02-03T14:07:14.140Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 341 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.hbs
- License: LICENSE
Awesome Lists containing this project
README
# DOM Library
[:books: **Documentation**](#api) | [:tada: **Example**](https://pqml.github.io/dom) | [:globe_with_meridians: **Internet modules**](https://www.npmjs.com/org/internet)
- :warning: **Experimental** React-like library to build DOM, without `setState` and patching.
- Own JSX implementation using `h` pragma.
- `render` method to render and mount jsx
- `cloneElement` to clone a virtual node with new props or new children
- Class `Component` with react-like lifecycle methods.
- [Callback refs](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) support.
- **You can also render "real" HTML Elements inside virtual dom**
- This is useful to add a Component-oriented architecture on top of an already existing html page (like rendered from PHP)
# :warning: Warnings
- This is **not** a React alternative, use [preact](https://github.com/developit/preact) for this purpose.
- You can render "real" HTML Element inside virtual dom (using `render` or `component.render`)
- It's the one of the reasons why there isn't patching
- It's a great feature to add a Component-oriented architecture on top of an already existing html page (like rendered from PHP)
- It also means that **the virtual dom is absolutely not a source of thruth** :warning::warning:
- It can be super easy to have leaks and a bad lifecycle behaviour, so don't rely too much on this lib
- There is no event management for now. Use `addEventListener` / `removeEventListener` with lifecycle methods to be sure of what you are doing.
- `render` have different arguments than the preact / React one.
- `component.render` is used to render portions of jsx inside it, as child of the `component`
- the initial rendering of the component is made via the `component.template` method instead
# Requirements
- ES6 Modules support
- Using a module bundler like Webpack, Rollup or Parcel
- [Native support from browser](https://caniuse.com/#feat=es6-module)
- From NodeJS with something like [esm](https://github.com/standard-things/esm)
# Installation
```sh
# using npm
$ npm install --save @internet/dom
# or using yarn
$ yarn add @internet/dom
```
```js
import { h, render, Component, cloneElement, addRef } from '@internet/dom'
```
- [:pencil: **h()**](#h): _Creates a VNode (usually used through JSX)_
- [:movie_camera: **render()**](#render): _Renders a virtual node and mount-it into a `parent` Element_
- [:orange_book: **Component Class**](#Component): _Base Component class with lifecycle and rendering methods_
- [:floppy_disk: **cloneElement()**](#cloneElement): _Clones the given virtual node, optionally replacing its props / children_
- [:mag: **addRef()**](#addRef): _Quick util to add callback refs to jsx_
## :pencil: `h([tag|Component], [props={}], ...children)`
{{#globals name="h"}}
{{>body~}}
{{/globals}}
## :movie_camera: `render(VNode, parent)`
{{#globals name="render"}}
{{>body~}}
{{/globals}}
## :orange_book: `Component` class
#### Example
```js
import { h, Component, render } from '@internet/raf'
class App extends Component () {
template () {
return (
My first app
)
}
componentDidMount () {
console.log('App is mounted')
console.log('HTMLElement of the App: ', this.base)
}
}
// Mount a new instance of App component into document.body
// Will call componentWillMount, template and componentDidMount lifecycle events
render(, document.body)
```
{{#globals name="Component"}}
#### Component API
{{>member-index~}}
{{>members~}}
{{/globals}}
## :floppy_disk: `cloneElement(VNode, [newProps={}], [newChildren])`
{{#globals name="cloneElement"}}
{{>body~}}
{{/globals}}
## :mag: `addRef(obj, refName)`
{{#globals name="addRef"}}
{{>body~}}
{{/globals}}