@power-js/core

A powerful JavaScript library for building web components

---

Why PowerJS?

Fast Rendering
Virtual DOM for detecting deltas and isolating renders.

Minimalistic
PowerJS makes use of just 3 functions.

Size
Library is only 2.3k

No Dependencies
A standalone library with no dependencies.

Components
Build Components with an encapsulated state.

React-like API
If you know how you use React then you already know how to use PowerJS.

Links

• Change log
• Example TODO app

Before you start

You can use PowerJS with just place the script into your document, but if you prefer html Syntax you should take a look at JSX. There is a Babel plugin which transforms your JSX Syntax into a VDom.

Installation

PowerJS is provided as a UMD library to accommodate any loading method.

Attach the library as an object to the window Power: <script src="power.js"></script>

Via import:

import { render, h, Component } from 'power-js';

// h(...)

Via require:

const Power = require('power-js');

// Power.h(...)

Get started

There is a repository on github which helps you to get started.

Here is a typical example for a counter component.

JSX:

import Power, { render, Component } from 'power-js';

class Counter extends Component {
  render(){
    return (
      <div className="counter">
        <p>Counter: {this.data.counter.toString()}</p>
        <button click={() => { this.data.counter += 1; }}>+</button>
        <button click={() => { this.data.counter -= 1; }}>-</button>
        <button click={() => { this.data.counter = 0; }}>Reset</button>
      </div>
    )
  }
}

const myCounter = new Counter({counter: 0});
render(myCounter, document.body);

Plain JS:

import { h, render, Component } from 'power-js';

class Counter extends Component {
  render() {
    return (
      h('div', {class: 'counter'},
        h('p', null, `Counter: ${this.data.counter.toString()}`),
        h('button', {click: () => { this.data.counter += 1; }}, '+'),
        h('button', {click: () => { this.data.counter -= 1; }}, '-'),
        h('button', {click: () => { this.data.counter = 0; }}, 'Reset')
      )
    )
  }
}

const myCounter = new Counter({counter: 0});
render(myCounter, document.body);

Contributors

Feel free to fork this project and PR!

Dysfunc 💻 👀	Jan-Markus Langer 💻 👀