Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

reactive-moon

1.0.32 • Public • Published

Reactive Moon Framework

Stop adding react everywhere! I`m serious. Faster than React and easier then Vue.

Instal

npm i reactive-moon

just import

import {Moon} from 'reactive-moon';

How to use

See an example in examples/

Create an initial file like index.js

 
import {App} from './src/App';
 
new App(document.querySelector('body'));

App is your own component as in the React

/**
 * You have to extend global class Moon
 * To start import Moon library
 */
import {Moon} from '../../../../src';
 
export class App extends Moon {
    constructor(node) {
        /**
         * Like in React you should call parent constructor
         */
        super(node);
        /**
         * Bind some initial model variables
         * @type {string} 
         */
        this.userName = '';
        this.isClicked = 'Press button for password field';
        /**
         * Or html
         * @type {string} 
         */
        this.optionalInput = `
            <span>You password is: </span>
            <input type="password"/>
        `;
    }
 
    /**
     * Class methods will be called on pure JavaScript events which you define in index.html
     * You can use all of them: click, change, submit, input etc
     * @param event
     */
    onClick(event) {
        this.isClicked = this.optionalInput;
    }
 
    onUserNameChange(event) {
        this.userName = event.target.value;
    }
 
    onFormSubmit(event){
        // Do something
        event.preventDefault();
    }
}

Your html attributes should be associated with this attributes in your class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./src/App/App.css">
</head>
<body>
<form :on:submit="onFormSubmit">
    <div>
        <span>Your name is: </span>
        <span :text="userName"></span>
    </div>
    <input type="text" :on:input="onUserNameChange">
    <div>
        <div :html="isClicked"></div>
        <button :on:click="onClick">Click me</button>
    </div>
    <button type="submit">
        Submit
    </button>
</form>
<script src="./dist/bundle.js"></script>
</body>
</html>

Features

It`s quite simple!

:on:someNativeJsEventName="methodName" listen same native JS event and invoke methods in value of attribute.

:text="thisVariableWillBeRendered" bind any variable (this object attribute).

:html="thisVariableWillBeRenderedAsHtml" safe analogue of previous.

When you are changing either variable which binded in html the DOM node will be changed automaticly. It provided by setter. Looks great!

Reactive Moon hasn`t any abstractions and differences from the JavaScrip. You can use everything you want. Enjoy.

Utility

You want to process any data and send it to HTML? Reactive Moon is only 1664 bytes!

alt text

Install

npm i reactive-moon

DownloadsWeekly Downloads

0

Version

1.0.32

License

ISC

Unpacked Size

70.1 MB

Total Files

11743

Last publish

Collaborators

  • avatar