basic-virtual-dom

Basic virtual dom implementation

Usage no npm install needed!

<script type="module">
  import basicVirtualDom from 'https://cdn.skypack.dev/basic-virtual-dom';
</script>

README

Very basic virtual-dom implementation

Build Status Coverage Status dependencies alpha npm version

Features

Support of following patch types:

  • PATCH_CREATE
  • PATCH_REMOVE
  • PATCH_REORDER
  • PATCH_PROPS
  • Small amount of diffing iterations
  • Referal based patches without identifiers
  • No iterations over the virtual or dom tree when applying patches

Seems like it has not so bad memory usage and rendering performance

Example

Example

Simple day countdown example

/** @jsx h */

import {h, patch, diff} from '../../';

var initialDom = (
  <div>
    <div><h3>Counter</h3></div>
  </div>
);

document.getElementById('application')
  .appendChild(initialDom.render());

setInterval(function() {
  var cd = countDown();
  var countDownDom = (
    <div>
      <div><h3>Day Countdown</h3></div>
      <div className="clock">
        <strong>{cd.h}</strong> :&nbsp;
        <strong>{cd.m}</strong> :&nbsp;
        <strong>{cd.s}</strong>
      </div>
    </div>
  );

  var diffs = diff(initialDom, countDownDom);
  patch(initialDom, diffs);

}, 1000);

TODO

  • test browser support

License

MIT (c) Svetlana Linuxenko