Awesome

RotorJS

This is a beta-stage component-based JavaScript library for single-page applications and an example application.

Installation

npm install rotorjs

(Note: Node JS 14+ as an ECMAScript 2015+ & ESM-compatible environment is required.)

Philosophy

RotorJS provides classes which represent an application and its components.

It uses exchangeble "middlewares" under the hood. A middleware consist of a model class, a rendering loop class and (possible) other classes. You can use your own middlewares so RotorJS is DOM-agnostic, model-agnostic, etc.

A component is a subclass of RotorJS class, it has to provide a render function. Component's state (model) is available during render. Components may also have their activating and deactivating hooks. Subcomponents are supported.

Application is also a subclass of a RotorJS class. You may implement application's start and stop hooks but default start hook receives a root component.

A target object (e.g. DOM tree) is available after application has been started. It is changed during some component's state updating. So target is "current view" of application.

Some additional features are also provided.

Approaches

minimalism,
modularity,
testability,
(not yet) documentability,
isomorphism,
ECMAScript 2015 & ESM.

Default middleware

Default middleware is based on Freezer and Snabbdom. So your application uses unidirectional dataflow, immutable state and provides DOM target with default middleware.

You simple have to append application's target to your document's body and use Snabbdom's helpers to construct component's view. See example for more information.

Getting started

TODO

Example

See https://github.com/kuraga/rotorjs/tree/master/example.

How to test?

npm run test-browser
open test/browser/testBrowser.html
# read browser's console
npm run test-browser-clean

Author

Alexander Kurakin <kuraga333@mail.ru>

Inspired by

Feedback and contribute

https://github.com/kuraga/rotorjs/issues

License

MIT