0.1.6 • Published 7 years ago

virtual-dom-base v0.1.6

Weekly downloads
2
License
ISC
Repository
github
Last release
7 years ago

Virtual DOM Base

Virtual DOM Base is a basic implementation of DOM manipulation lib.

Intro

With Element and RenderDOM offered by Virtual DOM Base, you can easily manipulate your DOM structure.

Usage

jsx syntax is supported in this lib, and you can also use Element.createElement to create virtual DOM and render it to real DOM.

Basic Usage

import { Element } from 'virtual-dom-base';

const root = Element.createElement('div', {
  id: 'root',
  Element.createElement('h1', null, 'Hello Virtual DOM Base!'),
  Element.createElement('blockquote', null,
  	Element.createElement('code', null, 'Virtual DOM Base'),
    ' is a basic implementation of DOM manipulation lib.'
  ),
});

With JSX

import { Element } from 'virtual-dom-base';

const root = (
  <div id="root">
    <h1>Hello Virtual DOM Base!</h1>
    <blockquote>
      <code>Virtual DOM Base</code> is a basic implementation of DOM manipulation lib.
    </blockquote>
  </div>
);

Types of Params

TypeResult
Element instanceElement(HTMLElement)
StringTextNode
NumberTextNode
UndefinedComment(<!-- empty node -->)
NullComment(<!-- empty node -->)
ObjectComment(<!-- unknown node -->)
ArrayDocumentFragment
DefaultComment(<!-- unknown node -->)

example

import { Element } from 'virtual-dom-base';

const root = (
  <div>
    <h1>Headline</h1>
    text
    7873632
    {undefined}
    {null}
    {{ name: 'virtual dom base' }}
    {[
      <div className="child">Amy</div>,
      <div className="child">Bob</div>,
      Math.random > 0.5 ? 'Cindy' : 'Dick',
      false
    ]}
    <div>Content</div>
  </div>
);

output

readme.1

0.1.6

7 years ago

0.1.5

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago