Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

simple-boot-front

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

simple-boot-front

front end SPA frameworks

1.0.78
Source
npm

Version published: 3 years ago

Weekly downloads: 9; increased by80%

Maintainers: 1

Weekly downloads

Created: 4 years ago

Source

Single Page Application Framworks for Web

😎 demo page link

Our primary goals are

Provide a radically faster and widely accessible getting started experience for all front end.

🚀 Quick start cli

npm init simple-boot-front projectname
cd projectname
npm run bundle
npm run serve

Installation and Getting Started

npm install simple-boot-front

😃 examples project

Here is a quick teaser of a complete simple-boot-front application in typescript

index.ts

const option = new SimFrontOption(window, [Advice]).setUrlType(UrlType.path);
const simpleApplication = new SimpleBootFront(AppRouter, option);
simpleApplication.run();

index.html

<!doctype html>
<html>
 <head>...</head>
 <body id="app"></body>
</html>

AppRouter.ts

 @Sim({scheme: 'layout-router'})
 @Component({template, styles: [css]})
 @Router({
 path: '',
 childs: {
 '': Index,
 '/': Index,
 '/user': User
 }
 })
 export class AppRouter implements RouterAction, FrontLifeCycle {
 name = 'AppRouter'
 data = {name: 'good'}
 child?: any
 
     constructor(private navigation: Navigation, private simOption: SimFrontOption) {
     }
 
     canActivate(url: Intent, module: any) {
         console.log('canActivate  router--->', url, module)
         this.child = module;
     }
 
     onReady(data: HTMLFrameElement): void {
     }
 
     onRenderd(data: HTMLFrameElement): void {
     }
 
     onChangedRender(): void {
     }
 
     onCreate(): void {
     }
 
     onFinish(): void {
     }
 
     onInit(): void {
     }
 
     onInitedChild(): void {
     }
 }

index.ts

@Sim({scheme: 'index'})
Component({
  template,
  styles: [css]
})
export class Index {
  public user?: User;
  public data = {name: 'visualkhh'}
  onInit() {
  console.log('-->')
  }
  
  @PostConstruct
  public g(s: User) {
  
  }
}

index.html

<h1>index</h1>
${this.data.name}
<button dr-event-click="this.data.name='vvv'"> change name </button>

View template engine (dom-render)

https://github.com/visualkhh/dom-render
It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.
Update view only for parts where the value has changed.

Module LifeCycle

onCreate(): Sim onCreate just one call
onInit(): module load event
onChangedRender(): change rended in module event
onInitedChild(): module and child module inited event
onFinish(): lifecycle finish event

Decorator

@Sim(): Objects managed by the SimpleBootFront framework

parameter: SimConfig {schema: string}

@Sim({scheme: 'index'})
@Component({
template,
styles: [css]
})
export class Index {  }

@PostConstruct(): Methods that you run for a separate initialization operation after the object is created

@PostConstruct
post(projectService: ProjectService) {
    console.log('post Construct  and dependency injection')
}

@Injectable: No Sim Decorator Class Inject Sim

@Injectable()
export class CTitle extends Title {
constructor(public testService: TestService) {
  console.log('ctitle constructor-->', this.testService)
}

    cc() {
        this.value = this.testService.tail(Math.floor(RandomUtils.random(1, 50)), '---');
    }
    @PostConstruct
    ttt(testService: TestService) {
        console.log('poo->', testService)
    }
}

@After, @Before (AOP)

fire($event: MouseEvent, view: View<Element>) {
    console.log('fire method')
    this.data = RandomUtils.random(0, 100);
}
@Before({property: 'fire'})
before(obj: any, protoType: Function) {
    console.log('before', obj, protoType)
}

@After({property: 'fire'})
after(obj: any, protoType: Function) {
    console.log('after', obj, protoType)
}

@ExceptionHandler

@ExceptionHandler()
public exception0(e: any) {
    console.log('Advice Global exception:', e)
}

Intent event broker

click() {
  intentManager.publish(new Intent('layout://info/data?a=wow&aa=zzz', Math.floor(RandomUtils.random(0, 100))));
  // const data = new CustomEvent('intent', {detail: {uri: 'index://showStore', data: {id: ${it.ID}}}}); window.dispatchEvent(data);
  //intentManager(new Intent('layout://info/datas', Math.floor(RandomUtils.random(0, 100))));
  //intentManager(new Intent('layout://', Math.floor(RandomUtils.random(0, 100)))); // default callback method -> subscribe(i: Intent)
  //intentManager(new Intent('://info/datas', Math.floor(RandomUtils.random(0, 100))));
}

@Sim({scheme: 'layout'})
@Component({
  template,
  styles: [css]
})
export class App {
    info = new AppInfo();
    constructor() {}
}

export class AppInfo {
    datas = 'default data';
    data(i: Intent) {
        this.datas = i.data + '->' + i.params.aa
    }
}

Reserved key word

html

attribute

router-active-class: url === href attribute => class add
- value: add and remove class name

<a router-link="ajax" router-active-class="active">Ajax</a>

router-link:
- value: router link

<a router-link="ajax">Ajax</a>

intent

showStore(i: Intent) {
 this.datas = i.data + '->' + i.params.aa
}
call -> const data = new CustomEvent('intent', {detail: {uri: 'index://showStore', data: {id: ${it.ID}}}}); window.dispatchEvent(data);

License

MIT
visualkhh@gmail.com

Keywords

FAQs

What is simple-boot-front?

Is simple-boot-front popular?

Is simple-boot-front well maintained?

Package last updated on 08 Oct 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install