Home

Make creating dynamic components within static sites easier with DeStagnate, a ReactJS inspired library.

See some examples

Notice:

Documentation has been moved to https://luke-zhang-04.github.io/DeStagnate/docs.

Why not just use React?

React is great for dynamic web applications, but it is not well optimised for static-like sites. With DeStagnate, you can create React-like componnets within the browser environment, or a bundler such as Webpack or Browserify. DeStagnate uses less resources, and was made with use in static sites as it's main purpose.

Documentation

Documentation can be found at https://github.com/Luke-zhang-04/DeStagnate/wiki for the latest version

Installation

Through NPM

# NPM
npm i destagnate --save

# Yarn
yarn add destagnate

Through curl or wget to download a bundle for browser usage

# Prodution
curl -L https://unpkg.com/destagnate@<VERSION_NAME>/dist/deStagnate.bundle.min.js > deStagnate.bundle.js
wget https://unpkg.com/destagnate@<VERSION_NAME>/dist/deStagnate.bundle.min.js

# Development
curl -L https://unpkg.com/destagnate@<VERSION_NAME>/dist/deStagnate.bundle.js > deStagnate.bundle.min.js
wget https://unpkg.com/destagnate@<VERSION_NAME>/dist/deStagnate.bundle.js

# Latest
curl -L https://unpkg.com/[email protected]/dist/deStagnate.bundle.min.js > deStagnate.bundle.min.js
wget https://unpkg.com/[email protected]/dist/deStagnate.bundle.min.js

With a CDN

<!-- Production -->
<script src="https://unpkg.com/destagnate@version/dist/deStagnate.bundle.min.js"></script>

<!-- Development -->
<script src="https://unpkg.com/destagnate@version/dist/deStagnate.bundle.js"></script>

<!-- Latest -->
<script src="https://unpkg.com/[email protected]/dist/deStagnate.bundle.min.js"></script>

Basic Use

See https://luke-zhang-04.github.io/DeStagnate/docs for example code and documentation.

// Browser env requires this
const DS = DeStagnate

// Node env requires this
import * as DS from "destagnate"
const DS = require("destagnate")

class Counter extends DS.Component {

    constructor (parent) {
        super(parent)

        this.state = {}
    }

    // Using DS.createElement() - all options available below
    render = () => DS.createElement("div")
    render = () => Counter.createElement("div")
    render = () => this.createElement("div")

    // Alternatively, you can use JSX. You will need a tranpiler, though
    render = () => <div></div>

}

// Warning: the parent must be dedicated to this component. Anything inside the parent will be removed on muatation
const counter = new Counter(document.querySelector("#parent"))

counter.mount() // Must call once to mount the component