Super simple DOM Renderer plugin for Relax.
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 view libraries, lets you do stuff like:
const diff = ;// define componentconst App = dataconst 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
 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:
- Special treatment for SVG/canvas elements
- Style object support
- Make sure element focus (e.g. button, input, ...) is handled properly.
- Default focus
- Keeping focus
- DOM recycling
Feel free to open pull requests if you want to help implement some of these features.