Hyperoop is OOP-style SPA micro-framework.

Quick start

git clone https://github.com/HyperOOP/starter myapp
cd myapp
npm i
npm start

Install

npm i --save hyperoop

Examples

See examples.

More advanced example is source code of our site hyperoop.github.io.

Run example

To run todo-hist example:

git clone https://github.com/HyperOOP/hyperoop-examples
cd hyperoop-examples/todo-hist
npm i && npm run serve

Then open localhost:10001 in browser. Or simply try it online

Example counter

TypeScript code (try online):

import * as ui from 'hyperoop';

class Counter extends ui.Actions<{count: number}> {}

const counter = new Counter({ count: 0 });

const view = () => (
<div>
    <h1>{counter.State.count}</h1>
    <button onclick={() => counter.State.count--}>-</button>
    <button onclick={() => counter.State.count++}>+</button>
</div>
);

ui.init(document.body, view, counter);

Router

Use our official router