atlas-mini-dom
Super simple DOM Renderer plugin for Relax.
simple usage
npm install --save atlas-mini-dom
const diff = ;const DOMRenderer = ; const App = <div> Bonsly evolves into Sudowoodo after learning mimic </div> // create a DOMRenderer pluginconst rootEl = document;const renderingPlugin = rootEl; // mount <App/> and render it to the DOM.; // note that your app can use many plugins:// diff(<App/>, null, [renderingPlugin, otherPlugin])
why you need a DOM-Renderer plugin
Relax, like other JSX-supporting[1] view libraries, lets you do stuff like:
const diff = ; // define componentconst App = data const firstName lastName = data; return <p>Your first name is firstName</p> !!lastName && <p>Your last name is lastName</p> // mount appconst mountedApp = // update app with new props
[1] with an appropriate JSX pragma.
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, <App/>
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 useclass
attribute)- Special treatment for SVG/canvas elements
todo
- Style object support
- Make sure element focus (e.g. button, input, ...) is handled properly.
- Default focus
- Keeping focus
- Refocusing
- DOM recycling
contribute
Feel free to open pull requests if you want to help implement some of these features.