@power-js/core

A powerful JavaScript library for building web components

---

Why PowerJS?

This library was designed as a lightweight React-like solution with a smaller footprint and faster performance. This is not a React replacement nor was it ever intended to be. Our goal was to provide a similar interface to prevent having to learn yet another front-end library.

We aren't sure what this library will evolve into but we wanted to start with "good bones". Please help us define what this can be by opening some PRs or submitting ideas!

Fast Rendering
Virtual DOM for detecting deltas and isolating renders.

Minimalistic
Library makes use of only 3 primary functions.

Bundle Size
Library is extremely small, just 2.2k (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
• A simple Todo app

Before you start

If you would like to use JSX with PowerJS you'll need to install this Babel Plugin which will convert the JSX into a Virtual DOM. There's an example of this plugin config in the Todo app here.

Installation

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

Script

Included via script

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

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

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

NPM

You'll need to install PowerJS via NPM

npm install @power-js/core

Include via import

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

Include via require

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

Example

Here's an example of a simple 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);

Contributing

The purpose of this repo is to continue to evolve PowerJS as an open source project driven by its contributors and communal support. We appreciate all the support we've received, and look forward to working with many new faces. To get started contributing just review our contribution guide, code of conduct and open a PR.

Code of Conduct

We have a Code of Conduct that we expect collaborators to adhere to. Please read it in its entirety so you understand our expectations of you and what is acceptable behavior.

Contributing Guide

Read our contributing guide to learn about our development process.

Core Contributors

Jan-Markus Langer · Dysfunc

License

MIT