# any-dom

> Consistent style for any virtual dom library

Latest version **1.1.3** (published 2018-01-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install any-dom
pnpm add any-dom
yarn add any-dom
bun add any-dom
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2018-01-13 |
| First published | 2017-07-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Tushar Mathur |
| Maintainers | tusharmathur |
| Keywords | virtual, dom, react, snabbdom, inferno, preact, api, consistent, common |

## Links

- npm: https://www.npmjs.com/package/any-dom
- Repository: https://github.com/tusharmath/any-dom
- Homepage: https://github.com/tusharmath/any-dom#readme
- Issues: https://github.com/tusharmath/any-dom/issues
- npm.io page: https://npm.io/package/any-dom

## Dependencies (7)

- [react](https://npm.io/package/react.md) ^15.6.1
- [preact](https://npm.io/package/preact.md) ^8.2.1
- [inferno](https://npm.io/package/inferno.md) ^3.7.0
- [snabbdom](https://npm.io/package/snabbdom.md) ^0.7.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.0.0
- [react-hyperscript](https://npm.io/package/react-hyperscript.md) ^3.0.0
- [preact-hyperscript](https://npm.io/package/preact-hyperscript.md) ^0.7.1

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.1.3 (latest) — 2018-01-13
- 1.1.2 — 2018-01-13
- 1.1.1 — 2018-01-13
- 1.1.0 — 2017-08-24
- 1.0.2 — 2017-07-30
- 1.0.1 — 2017-07-30
- 1.0.0 — 2017-07-30

## README

# any-dom
consistent API for any virtual dom library

[![Greenkeeper badge](https://badges.greenkeeper.io/tusharmath/any-dom.svg)](https://greenkeeper.io/)

Provides a consistent API for any virtual dom library. 
Now one can create libraries that are not bound to only a single virtual dom library implementation.

# Idea

There are so many virtual dom libraries on the internet right now and all of them have different APIs to create or patch the DOM. This makes it awfully tough to remember the signature while using and deters developers to make frameworks/libraries that are Virtual DOM agnostic.

**Any DOM** aims to solve this problem but keeping the API simple and consistent. 
It abstracts the original patching function and provides a more simpler function that looks like this — 

```ts
function patch (container: HTMLElement, vNode: VirtualNode) : void 
``` 

The `patch` function takes in two arguments — First is the real DOM element and second is Virtual DOM element and it returns nothing. Now we can pass the `patch` function as an argument to our framework/library and expect it to just work :-)


# Usage


**Simplified Imports**
```typescript

// Using react
import {patch, h} from 'any-dom/react'

// using snabbdom
import {patch, h} from 'any-dom/snabbdom'

// using preact
import {patch, h} from 'any-dom/preact'
```

**Simplified CDN**

```html
<script src="https://unpkg.com/any-dom/react.js"></script>

<script >
  console.log(window.anydom.patch)
</script>

```

**Usage inside the DOM**

```typescript jsx

import {patch, h} from 'any-dom/react'

const element = (
  h('h1', [
    'Hello, World!!'
  ])
)

patch(
  document.getElementById('root'),
  element  
)
```

# Supported Libraries
- [React]
- [Preact]
- [Snabbdom]


[React]: https://github.com/facebook/react
[Preact]: https://preactjs.com
[Snabbdom]: https://github.com/snabbdom/snabbdom


# Wishlist

- Add mode virtual dom libraries.
- Add consistent Hyperscript helpers

---
_Source: https://npm.io/package/any-dom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._