vrdom v0.5.1

vrdom

An alternative to react production build for browser side.

What works and documented on react in production should work with vrdom.

Usage with transpilers

babel inline configuration

/** @jsx vrdom.createElement */

var vrdom = require("vrdom");

babel6 .babelrc configuration

{
  "plugins": [
    ["transform-react-jsx", { "pragma": "vrdom.createElement" }]
  ]
}

Example

jsfiddle

/** @jsx vrdom.createElement */

let container = document.createElement("div");
document.body.appendChild(container);

class Component extends vrdom.Component {
  render() {
    return <div>COMPONENT</div>;
  }
}

let ComponentClass = vrdom.createClass({
  render() {
    return <div>COMPONENT CLASS</div>;
  }
});

function Stateless() {
  return <div>STATELESS COMPONENT</div>;
}

vrdom.render(
  <div>
    <div>DOM</div>
    <Component />
    <ComponentClass />
    <Stateless />
  </div>
, container);

What is not in vrdom

• Proptypes: Although it may help for development,
  there are not used in production build of neither React nor Preact. However, empty proptypes exists to keep compatibility with existing react plugins.
• Warnings: missing almost all React warings. ex: on aria-* and others. Again not used in production build
• Developper Tool
• Performance Tool
• Addons
• Undocumented react api unstable_*

Hooks

Third party libraries can sometimes be painful to integrate with react.
Hooks were created for that purpose.

For example, to integrate material design lite(MDL), some libraries specific to react have been created.
To use MDL, reading MDL documetion is not enough, you also need to read those libraries specific to react.

With hooks, to integrate MDL, you can do

jsfiddle

class MDLComponent extends vrdom.Component {
  componentDidMount() {
    this.el = vrdom.findDOMNode(this);
    componentHandler.upgradeElement(this.el);
  }

  componentWillUnmount() {
    componentHandler.downgradeElements([this.el]);
    delete this.el;
  }

  render() {
    var tagName = this.props.tagName || "span";
    var args = [tagName, this.props.config];

    // add children
    var children = this.props.children;
    if (Array.isArray(children)) {
      args.push.apply(args, children);
    } else if (children != null) {
      args.push(children);
    }

    // create the node,
    // upgrade on mount,
    // downgrage on unmount
    return vrdom.createElement.apply(vrdom, args);
  }
}

function MDLMiddleware(args) {
  var type = args[0];
  var config = args[1];

  if (config && !config.mdlIgnore && "string" === typeof type && /(?:^|\s)mdl-/.test(config.className || config.class)) {
    args[0] = MDLComponent; // replace element type with MDLComponent

    args[1] = {
      key: config.key, // preserve key
      ref: config.ref, // preserve ref
      tagName: type,
      config: vrdom.functions.assign({}, config) // clone because we will modify config
    };

    // ignore MDLMiddleware when creating element in MDLComponent
    // and thus avoiding a stack overflow
    args[1].config.mdlIgnore = true;

    delete args[1].config.key; // key has been used
    delete args[1].config.ref; // ref has been used
  }

  return args;
}

/* Tell vrdom to call MDLMiddleware before creating any element */
vrdom.hooks.appendHook("beforeCreateElement", MDLMiddleware);

/* From this point, any DOM element created with a className starting with mdl-, will be an MDLComponent */

/* use createClass to get autobindings */
var MDLElement = vrdom.createClass({
  handleClick(evt) {
    evt.preventDefault();
    var button = vrdom.findDOMNode(this.refs.button);
    alert(button.type + " click");
  },

  render() {
    return (
      <div className="container material-design-lite-components">
        {/* Badges */}
        <div className="container">
          {/* Number badge on icon */}
          <div className="material-icons mdl-badge mdl-badge--overlap" data-badge={1}>account_box</div>
          {/* Icon badge on icon */}
          <div className="material-icons mdl-badge mdl-badge--overlap" data-badge="♥">account_box</div>
        </div>

        {/* Buttons */}
        <button
          type="button" ref="button" onClick={ this.handleClick }
          className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
        >
          Button
        </button>
      </div>
    );
  }
});

var container = document.createElement("div");
document.body.appendChild(container);
vrdom.render(<MDLElement />, container);

HTML Attribtes

IDL Attributes and their HTML Attributescounter parts can be used.

Most attributes are case insensitive like in HTML.

data-*, aria-*, on* attributes are case insensitive.

Here is the list of all supported attributes:

History

React uses a concept (interactions and UI at the same place) that I started to develop with Backbone 3 years ago and happily dropped when I discover React.
However a friend talked to me about the react license.

I don't understand a thing about the license implications and I don't want to be bound to things I do not understand.

That friend wasn't a good fan of React at the time and uses the license as an argument.
I told him:

Ok, I will create my own "React".

I didn't wanted to recreate a React from scratch.
I looked for alternatives. Preact + Preact-compat seem promising.
Then I replaced React with Preact@6.4.0 in one project.

I launched my project tests and ... many failed (more than 50%):

• The asynchonous update of the view after set state was not appropriate with my tests (partially fixed with preact.options.syncComponentUpdates = true)
• Events were not unregistered after unmount
• Did not worked with my dialogs
• Did not work with my integration of material-design-lite because node is already removed in componentWillUnmount

Preact messes up with my component properties

That is the most annoying issue for me.
All my components have a destroyed method called on componentWillUnmount, which contains

for (prop in this) {
  if (!hasProp.call(this, prop)) continue;
  if (!/^(?:id|props|refs|_reactInternalInstance)$/.test(prop)) {
    delete this[prop];
  }
}

To prevent any potential memory leak, I delete every thing that was created by my components:

• props, refs and _reactInternalInstance was created by React.
• id is for debugging purpose.
• any other owned properties must have been created by my components.

Because preact add multiple enumarable properties to any component, deleting them put preact in an unexpected state.

Javascript has no "private" properties nor methods.
The best you can do is to define a generated random property, non enumerable and put all your stuff in that property.
Something similar is done in jQuery and React.

I was unable to fully understand preact code to fix all of those problems. I gave up.

The good attitude should have been to open issues on preact.
However, the idea that a future problem may rise, a problem that I won't be able to solve because I was unable to make preact code myself pissed me off.

I was so pissed off that I started to create my own React.

In conclusion, this library is an act of anger.

Here is the jsfiddle with some bugs identified with preact.

License

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                    Version 2, December 2004

 Copyright (c) 2017 Stéphane MBAPE (http://smbape.com)

 Everyone is permitted to copy and distribute verbatim or modified
 copies of this license document, and changing it is allowed as long
 as the name is changed.

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

  0. You just DO WHAT THE FUCK YOU WANT TO.