https://github.com/atlassubbed/atlas-mini-dom

Basic DOM Renderer for Relax:
https://github.com/atlassubbed/atlas-mini-dom

browser dom html jsx plugin preact react relax renderer vdom view virtual-dom

Last synced: 24 days ago
JSON representation

Basic DOM Renderer for Relax:

• Host: GitHub
• URL: https://github.com/atlassubbed/atlas-mini-dom
• Owner: atlassubbed
• License: mit
• Created: 2019-03-17T21:12:08.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-04-01T21:47:11.000Z (over 5 years ago)
• Last Synced: 2024-10-01T09:18:43.038Z (about 1 month ago)
• Topics: browser, dom, html, jsx, plugin, preact, react, relax, renderer, vdom, view, virtual-dom
• Language: JavaScript
• Homepage: https://github.com/atlassubbed/atlas-relax
• Size: 58.6 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# atlas-mini-dom

Super simple DOM Renderer plugin for Relax.

[![Travis](https://img.shields.io/travis/atlassubbed/atlas-mini-dom.svg)](https://travis-ci.org/atlassubbed/atlas-mini-dom)

[](https://www.google.com/search?q=worlds+smallest+tree)

### simple usage

```

npm install --save atlas-mini-dom

```

```jsx

const { diff } = require("atlas-relax");

const DOMRenderer = require("atlas-mini-dom");

const App = () => (

  


    Bonsly evolves into Sudowoodo after learning mimic.

  

)


// create a DOMRenderer plugin

const rootEl = document.getElementById("root");

const renderingPlugin = new DOMRenderer(rootEl);

// mount  and render it to the DOM.

diff(, null, renderingPlugin);

// note that your app can use many plugins:

//   diff(, null, [renderingPlugin, otherPlugin])

```

### why you need a DOM-Renderer plugin

[Relax](https://github.com/atlassubbed/atlas-relax), like other JSX-supporting[1] view libraries, lets you do stuff like:

```jsx

const { diff } = require("atlas-relax");

// define component

const App = ({data}) => {

  const { firstName, lastName } = data;

  return [

    
Your first name is {firstName}
,

    !!lastName && 
Your last name is {lastName}

  ]

}


// mount app

const mountedApp = diff()

// update app with new props

diff(, mountedApp)

```

[1] with an appropriate [JSX pragma](https://github.com/atlassubbed/atlas-relax-jsx-pragmas).

Alone, this just creates an in-memory graph and updates it. It doesn't render anything to the DOM. Plugins are little listeners that can react to changes in the graph (remember, `` describes a graph), and do stuff as a result. In this case, "stuff" means "rendering to the DOM".

### atlas-mini-dom is intentionally simple

The goal of this little plugin library is to show you how easy it is to write plugins. You can write a plugin that "renders" your app to anything, not just the DOM. In addition to supporting all of the non-special nodes and attributes, Mini Dom supports:

  * Text nodes

  * Regular element nodes 

  * Event listeners

  * Regular attributes

It doesn't support:

  * `dangerouslySetInnerHTML`

  * `className` (just use `class` attribute)

  * Special treatment for SVG/canvas elements

### todo

  1. Style object support

  2. Make sure element focus (e.g. button, input, ...) is handled properly.

     * Default focus

     * Keeping focus

     * Refocusing

  3. DOM recycling

### contribute

Feel free to open pull requests if you want to help implement some of these features.