Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thiagofleal/semi-reactive
Small ES6 semi-reactive components framework
https://github.com/thiagofleal/semi-reactive
Last synced: about 1 month ago
JSON representation
Small ES6 semi-reactive components framework
- Host: GitHub
- URL: https://github.com/thiagofleal/semi-reactive
- Owner: thiagofleal
- License: mit
- Created: 2020-11-06T15:59:41.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-12T12:12:12.000Z (almost 2 years ago)
- Last Synced: 2023-03-03T14:22:56.010Z (almost 2 years ago)
- Language: JavaScript
- Size: 321 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# semi-reactive
###### A small ES6 semi-reactive components library.
Semi-reactive is a **pure EcmaScript** implementation of **reactive components**. With it, you can easily create reactive components without any compilation or pre-processor process, just write and run on the browser.
###### Features and tools
- Create components with pure EcmaScript, no need to use Babel or compile
- Easily create modals, reactive-forms
- Small implementation of switches and routers
- Small implementation of observables
#
#### Adding semi-reactive to project
To add **semi-reactive** library to project, just use a ```script``` tag, with "type" attribute as **"module"**, passing the ```src``` property as the path to the main file, where is imported the ```SemiReactive``` static class to invoke the ```start``` method, with an object that contains the root component as ```component``` key and the HTM selector to render as ```target``` key.
###### index.html
```HTML
```
###### main.js
```Javascript
import { SemiReactive } from '/main.js';
import AppComponent from '/app-component.js';
SemiReactive.start({
component: AppComponent,
target: '#app'
});
```
#### Creating a component
To create a component, just import and extend the class Component or one of it subclasses
```Javascript
// Import the Component class from "core.js" file
import { Component } from "/core.js";
// Create the component from Component class
export default class MyComponent extends Component {
// Always use constructor
constructor() {
// Always use super()
super();
}
// The method render() return HTML content as string
render() {
return `
This is a simple component
`;
}
}
```
#### Reactivity
To make reactive components, just pass an object with the pairs ```: ``` to Components' constructor with the observed properties, and the component will be re-renderized always one of it properties change the value.
```Javascript
import { Component } from "/core.js";
export default class MyReactiveComponent extends Component {
constructor() {
// Create property value
super({
value: 0
});
}
// Increment the value of property value
increment() {
this.value ++;
}
render() {
// Use "this.component" to refer to the self component inner HTML
return `
Value: ${ this.value }
Increment value
`;
}
}
```
#### Child components
To add children into a component, use the ```appendChild(component, selector)``` method
```Javascript
import { Component } from "/core.js";
// The component that will be put into the ParentComponent
class ChildComponent extends Component {
constructor() {
super();
}
render() {
return `
This is the child component
`;
}
}
// Root component
export default class ParentComponent extends Component {
constructor() {
super();
// Instance the child component
const component = new ChildComponent();
// Append the child inner the tag
this.appendChild(component, "child-component");
}
render() {
return `
This is the parent component
`;
}
}
```