reactive-moon v1.0.32
Reactive Moon Framework
Stop adding react everywhere! I`m serious. Faster than React and easier then Vue.
Instal
npm i reactive-moonjust 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!
