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
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.renderNPM
You'll need to install PowerJS via NPM
npm install @power-js/coreInclude 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.