Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/egoist/dom-dom
JSX to actual DOM.
https://github.com/egoist/dom-dom
dom jsx
Last synced: 3 months ago
JSON representation
JSX to actual DOM.
- Host: GitHub
- URL: https://github.com/egoist/dom-dom
- Owner: egoist
- License: mit
- Created: 2017-07-01T16:52:58.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-12-25T14:42:38.000Z (about 3 years ago)
- Last Synced: 2024-10-04T11:56:09.406Z (4 months ago)
- Topics: dom, jsx
- Language: JavaScript
- Size: 63.5 KB
- Stars: 64
- Watchers: 4
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## About
This is not yet another minimalistic React implementation, the primary use case is to create actual dom with a single function and JSX directly, but there're opt-in component lifecycle hooks.
This lib does not accept pull requests for new features since the primary use case (get actual DOM from JSX) is already set for good.
## Features
- [x] Insanely small: 2kB minified
- [x] One API: JSX is transformed to vNode, use `mount(vNode)` to get actual DOM.
- [x] SVG support
- [x] Protection from XSS injections
- [x] Automatically joining classNames, styles
## Install
```bash
yarn add dom-dom
```
CDN: [UNPKG](https://unpkg.com/dom-dom/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/dom-dom/dist/)
## Usage
With a transpiler like `babel+babel-plugin-transform-react-jsx` or `typescript` or `buble`:
```js
/* @jsx h */
import { h, mount } from 'dom-dom/tiny'
// With only first arg
const button = mount(click me)
// button.outerHTML:
// => 'click me'
// With second arg
// replacce `#root` with created element
mount(
hello,
document.getElementById('root')
)
```
Note that while using CDN version you can access `d2.h` `d2.mount` instead.
### className
`className` can be `string` `Array` or `Object`:
```js
```
You can also directly use `class` instead of react-specific `className` as you please:
```js
```
### style
`style` supports `string` and `Object`:
```js
// both kebab-case and camelCase are supported here
// default unit is `px`
```
### innerHTML
```js
hey'}}>
```
### Events
React-like events are supports:
```js
```
---
> **WARNING:** If you only want a function to transform vNode to actual dom, please stop reading!!! Above features would be enough for your use case. Following features may not be what you want :D
> To use full build you should `import { xxx } from 'dom-dom'` instead.
Create your own React with dom-dom
```js
// @jsx h
import { h, mount, unmount } from 'dom-dom'
class Component {
setState(state) {
if (typeof state === 'function') {
state = state(this.state)
}
for (const key in state) {
this.state[key] = state[key]
}
this.mount()
}
mount(root = this.$root) {
this.$root = mount(this, root)
return this.$root
}
destroy = () => {
unmount(this, this.$root)
}
}
class Counter extends Component {
state = { count: 0 }
handleClick = () => {
this.setState(prevState => ({
count: prevState.count + 1
}))
}
componentDidMount() {
console.log('app mounted!', this)
}
render() {
return (
clicked: {this.state.count} times
destroy
)
}
}
const counter = new Counter()
counter.mount(document.getElementById('root'))
```
[](https://codesandbox.io/s/VyGn0DP5)
You can `mount` `unmount` a object or class instance which has a `render` method that returns `vNode`.
```js
import { h, mount } from 'dom-dom'
const A = {
render() {
return
a
}
}
const B = class {
render() {
return
{A}
}
}
mount(new B, document.getElementById('root'))
```
Object and class instance with render function can also be one of your JSX children.
This is designed for using lifecycle hooks, currently we have `componentDidMount` `componentWillMount` and `componentWillUnmount`.
```js
const App = {
componentDidMount() {
console.log('hi')
},
componentWillUnmount() {
console.log('bye')
},
render() {
return
hi
}
}
const root = mount(App, document.getElementById('root'))
//=> hi
unmount(App, root)
//=> bye
```
## Prior Art
This project is heavily inspired by [preact](https://github.com/developit/preact) and [dom-chef](https://github.com/vadimdemedes/dom-chef).
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Badges
[](https://npmjs.com/package/dom-dom) [](https://npmjs.com/package/dom-dom) [](https://circleci.com/gh/egoist/dom-dom/tree/master) [](https://github.com/egoist/donate)
## Author
**dom-dom** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.
Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/dom-dom/contributors)).
> [egoistian.com](https://egoistian.com) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)