Home

Wiki

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

See some examples

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.

Installation

Through NPM

# NPM
npm i destagnate --save

# Yarn
yarn add destagnate

Through curl to download a bundle for browser usage
Not all versions available through this method. See https://github.com/luke-zhang-04/destagnate/releases for available releases

# Prodution
curl -L https://github.com/Luke-zhang-04/destagnate/releases/download/v<VERSION_NAME>/destagnate.bundle.min.js -O destagnate.bundle.min.js

# Development
curl -L https://github.com/Luke-zhang-04/destagnate/releases/download/v<VERSION_NAME>/destagnate.bundle.js -O destagnate.bundle.js

# Latest
curl -L https://github.com/Luke-zhang-04/destagnate/releases/download/v1.5.2/destagnate.bundle.js -O destagnate.bundle.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://github.com/Luke-zhang-04/DeStagnate/tree/master/docs/src for example code

// browser env requires this
const DS = DeStagnate,
    {createElement} = DS

// node env requires this
import * as DS from "destagnate"

class Counter extends DS.defualt {

    constructor (parent) {
        super(parent)

        this.state = {}
    }

    // Using SD.createElement()
    render = () => DS.createElement("div", {})
    
    // Alternatively, you can use JSX (this requires the CLI, which comes with this package)
    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