@power-js/core

A powerful JavaScript library for building web components

---

Why PowerJS?

Fast Rendering
Virtual DOM for detecting deltas and isolating renders.

Minimalistic
Library makes use of only 3 primary functions.

Size
Library is extremely small, just 2.3k (gzipped)

No Dependencies
A standalone library with no dependencies.

Components
Allows you to 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.

Included via script

<script src="power.js"></script>

// someFile.js
const { h, Component, render } = power;

// power.h, power.Component, power.render

Included via import

import Power from '@power-js/core';

Included via require

const Power = require('@power-js/core');

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/core';

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

render(<Counter counter={0} />, document.body);

JS:

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

class Counter extends Component {
  render() {
    return (
      h('div', {class: 'counter'},
        h('p', null, `Counter: ${this.props.counter.toString()}`),
        h('button', {click: () => { this.props.counter += 1; }}, '+'),
        h('button', {click: () => { this.props.counter -= 1; }}, '-'),
        h('button', {click: () => { this.props.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 💻 👀