reconciled

    1.0.2 • Public • Published

    reconciled Build Status

    Simple way to build a custom React renderer

    Install

    $ npm install reconciled
    

    Usage

    Here's a minimal version of react-dom implemented with reconciled without support for updates or events:

    const reconciled = require('reconciled');
     
    const reconciler = reconciled({
      createNode: (type, props) => {
        const node = document.createElement(type);
     
        for (const [key, value] of Object.entries(props)) {
          node.setAttribute(key, value);
        }
     
        return node;
      },
      createTextNode: text => document.createTextNode(text),
      setTextNodeValue: (node, text) => {
        node.textContent = text;
      },
      appendNode: (parentNode, childNode) => {
        parentNode.appendChild(childNode);
      }
    });
     
    const app = reconciler.create(document.body);
    app.render(<h1>Stranger Things</h1>);
    app.unmount();

    What is this for?

    React itself doesn't require a certain environment to run. In simple terms, it only manages components and updates. Then, renderer takes representation of this component tree and displays it somewhere. For example, every React app in the browser uses react-dom renderer. react-native lets you build mobile native apps with React. Ink renders your React app in the terminal. There's even react-360 renderer for building VR apps.

    Custom React renderers let you render React apps anywhere you want, as long as you can build a custom renderer for it. This is where reconciled comes in. There's not a lot of documentation around building custom renderers, so I extracted all my knowledge of building them for Ink into a simple-to-use module. Enjoy.

    API

    reconciled(config)

    Create a reconciler with the specified config for your custom renderering. Returns a reconciler object. Reconciler is a set of methods that let you synchronize React's state with your custom output (see example above).

    config

    Type: object

    Methods for manipulating nodes.

    createNode(type, props)

    Create a new node.

    type

    Type: string

    Name of the node that's being rendered. When rendering <h1>, type equals 'h1'.

    props

    Type: object

    Props to add to the node. When rendering <input value="abc"/>, props equals { value: 'abc' }.

    Example implementation:

    const createNode = (type, props) => {
        const node = document.createElement(type);
     
        for (const [key, value] of Object.entries(props)) {
            node.setAttribute(key, value);
        }
     
        return node;
    };

    Learn more:

    createTextNode(text)

    Create a new text node. For example, when rendering <h1>Hello World</h1>, a text node will be created where text equals 'Hello World'.

    text

    Type: string

    Value of text node.

    Example implementation:

    const createTextNode = text => document.createTextNode(text);

    Learn more:

    setTextNodeValue(node, text)

    Update value of a text node.

    node

    Type: any

    Text node to update.

    text

    Type: string

    Text to update in a text node.

    Example implementation:

    const setTextNodeValue = (node, text) => {
        node.textContent = text;
    };

    Learn more:

    appendNode(parentNode, childNode)

    Insert a new node to parent node as the last child.

    parentNode

    Type: any

    Parent node to append child node into.

    childNode

    Type: any

    Child node to append.

    Example implementation:

    const appendNode = (parentNode, childNode) => {
        parentNode.appendChild(childNode);
    };

    Learn more:

    insertBeforeNode(parentNode, newChildNode, beforeChildNode)

    Insert a new node before a certain child node.

    parentNode

    Type: any

    Parent node to insert child node into.

    newChildNode

    Type: any

    Node to insert.

    beforeChildNode

    Type: any

    Node used for reference, so that new node is inserted before this one.

    Example implementation:

    const insertBeforeNode = (parentNode, newChildNode, beforeChildNode) => {
        parentNode.insertBefore(newChildNode, beforeChildNode);
    }

    Learn more:

    updateNode(node, oldProps, newProps)

    Update node with new props.

    node

    Type: any

    Node to update.

    oldProps

    Type: object

    Set of old props. Compare newProps to this object to figure out which props were removed.

    newProps

    Set of new props.

    Example implementation:

    const updateNode = (node, oldProps, newProps) => {
        for (const key of Object.keys(oldProps)) {
            if (newProps[key] === undefined) {
                node.removeAttribute(key);
            }
        }
     
        for (const [key, value] of Object.entries(newProps)) {
            node.setAttribute(key, value);
        }
    };

    Learn more:

    removeNode(parentNode, childNode)

    Remove child node from parent node.

    parentNode

    Type: any

    Parent node.

    childNode

    Type: any

    Child node.

    Example implementation:

    const removeNode = (parentNode, childNode) => {
        parentNode.removeChild(childNode);
    };

    Learn more:

    render()

    Callback which is called after every change is completed by the reconciler. Useful for renderers like Ink, which have to build custom output for environment that renderer is built for. In Ink's case, it's terminal, so there's no DOM like in the browser. Use this callback as an indication that there has been a change and UI needs to be updated.

    reconciler

    Type: object

    render(node)

    Update current node tree with a new node and its children.

    node

    Type: JSX.Element

    New node to replace the current one with.

    Example:

    reconciler.render(<h1>Hello Mind Flayer</h1>);

    unmount()

    Unmount entire node tree and remove all nodes.

    Install

    npm i reconciled

    DownloadsWeekly Downloads

    0

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    11.8 kB

    Total Files

    4

    Last publish

    Collaborators

    • vdemedes