lsJS

The LS framework allows you to work with custom HTML elements as components.

Table of contents

• Installation
• Usage
• Documentation
  • Module
  • Router
  • Component
    • Structure
    • Code
    • Lifecycles
      • OnInit
      • OnChange
        • Props
      • OnDestroy
    • Shadow DOM
      • Renderer
      • Props
      • Events

Installation

Clone repository

git clone https://github.com/LubosSremanak/lsjs.git

Install dependencies

npm install

Usage

Development server

webpack serve

Build for production

webpack

Generator

Component generator

Documentation

Module

Each component must be declared in the module.

import Module from "../../ls/model/module";
import {RootComponent} from "./root/root.component";

const components = [
    RootComponent,
]
new Module(components);

Router

RootComponent

<app-router></app-router>

RouterModule

import RouterModule from "../../ls/model/router.module";
import {HomeComponent} from "./root/home/home.component";

const routes = [
    {path: '', component: HomeComponent},
]
new RouterModule(routes);

All elements with the navigate attribute are automatically bound to the onclick navigator

<button navigate="generator">Generator</button>

Each component have injected Router

this.router.navigate('home');

Component

All components are merged into the app-root component, located in index.html.

Structure

• selector
  • selector.component.html
  • selector.component.css
  • selector.component.js

Code

Each component must extend the Component class and pass a constant __dirname, in the super constructor.

import {Component} from "../../../ls/model/component";


export class RootComponent extends Component {

    constructor() {
        super(__dirname);
    }

    async onInit() {

    }

    async onChange(change) {

    }

    async onDestroy() {

    }
}

Lifecycles

OnInit

Method onInit is executed after shadow DOM initialization.

async onInit() {
  console.log(this.dom) // in this moment, we can access elements in component
}

OnChange

Method onDestroy is executed after prop change.

change:{ name, oldValue, newValue, isFirst }    

Props

All props must be defined in static array 'props' to detect the change.

static props=['name','color'];

OnDestroy

Method onDestroy is executed after component is removed from DOM.

Shadow DOM

Component is represented by a shadow DOM that provides encapsulation. The DOM object of component is stored in this.dom.

Renderer

JSDOCS

We have injected Renderer service for work with component DOM.

Renderer service makes it easier to work with the DOM and reduces code.

createComponent

const myComponent=this.renderer.createComponent(MyComponent);
//alternative
this.create('app-myComponent');

getSelector

const selector = this.getSelector(MyComponent);
// return: 'app-myComponent'

get

const element=this.renderer.get('elementId');
//alternative
this.get('elementId');

append

// append <app-myComponent></app-myComponent> to div with id="containerId"
this.renderer.append('containerId',MyComponent);

prepend

// prepend <app-myComponent></app-myComponent> to div with id="containerId"
this.renderer.prepend('containerId',MyComponent);

change

// remove the inside of the container 
// append <app-myComponent></app-myComponent> to div with id="containerId"
this.renderer.change('containerId',MyComponent);

remove

// remove HTML element"
this.renderer.remove(element);

removeById

// remove HTML element with id="elementId"
this.renderer.removeById('elementId');

removeAllByClass

// remove all HTML elements with class="image"
this.renderer.removeAllByClass('image');

Props

Communication with child.

getProp

 // Get prop passed to component
 const name=getProp('name');

setProp

 //Set prop of component
 const component=this.get("id");
 this.renderer.setProp(component, 'name', 'yourName');

bindProp

//prop name and set name must be same
//parent
<app-element name="Lubos"></app-element>
//app-element
<span set="name"></span>
// app-element
const name=this.renderer.bindProp('name');// return: 'Lubos'

bindValue

//change inner text of span with set="variableName"
//template
<span set="variableName"></span>
// component
this.renderer.bindValue('variableName','value');

Events

Communication with parent.

createEmitter

//Create event to pass data to parent
const emmiter=this.renderer.createEmitter('removedSection',dataForParent);

emit

//Fire event in component
this.renderer.emit(emmiter);

createEmitterAndEmit

//Create and fire now event in component
this.renderer.createEmitterAndEmit('removedSection',dataForParent);

subscribe

//Listen on event 
this.renderer.subscribe(eventArea,'removedSection',yourEventHandler);

subscribeById

//Listen on event by id
this.renderer.subscribe('eventAreaId','removedSection',yourEventHandler);