Netherworld's Pretend Minibar

    atlas-mini-dom

    1.2.0 • Public • Published

    atlas-mini-dom

    Super simple DOM Renderer plugin for Relax.

    Travis

    Little tree boi

    simple usage

    npm install --save atlas-mini-dom
    
    const { diff } = require("atlas-relax");
    const DOMRenderer = require("atlas-mini-dom");
     
    const App = () => (
      <div>
        Bonsly evolves into Sudowoodo after learning mimic.
      </div>
    )
     
    // create a DOMRenderer plugin
    const rootEl = document.getElementById("root");
    const renderingPlugin = new DOMRenderer(rootEl);
     
    // mount <App/> and render it to the DOM.
    diff(<App/>, null, renderingPlugin);
     
    // 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 } = require("atlas-relax");
     
    // define component
    const App = ({data}) => {
      const { firstName, lastName } = data;
      return [
        <p>Your first name is {firstName}</p>,
        !!lastName && <p>Your last name is {lastName}</p>
      ]
    }
     
    // mount app
    const mountedApp = diff(<App firstName="Atlas" lastName="Subbed"/>)
     
    // update app with new props
    diff(<App firstName="jai"/>, mountedApp)
     

    [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 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.

    Install

    npm i atlas-mini-dom

    DownloadsWeekly Downloads

    1

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    20.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • atlassubbed