simple-boot-front

1.0.119 • Public • Published

Single Page Application Framworks
typescript npm license Chat Github

Our primary goals are

  • Single Page Application Framworks for Web
  • Provide a radically faster and widely accessible getting started experience for all front end.

dependencies

  • dom-render npm
  • simple-boot-core npm

📄 introduction page 🔗


🚀 Quick start cli

npm init simple-boot-front projectname
cd projectname
npm start
# open browser: http://localhost:4500

😃 examples, templates

directory structure

┌─ assets
├─ dist (out put directory)
├─ src (source)
│    ├─ pages (your pages)
│    │     ├ home.ts (sample page)
│    │     └ user.ts (sample page)
│    ├─ index.css (index route page css)
│    ├─ index.html (index route page template)
│    └─ index.ts (simple-boot-fornt start and route point)
├─ types (typescript type)
│    └ index.d.ts (type definition)
├─ index.html start (point html)
├─ package.json (project config)
├─ rollup.config.js (rollup bundler config)
└─ tsconfig.json (typescript config)

source

  • simple-boot-front start and route point (set: ts, html, css)
pages/home.ts🔻(click)
@Sim
@Component({
    template: '<div>home</div>'
})
export class Home {

}
pages/user.ts🔻(click)
@Sim
@Component({
  template: '<div>user</div>'
})
export class User {

}
index.html🔻(click)
<header>
    <nav>
        <ul>
            <li>
                <button router-link="/">home</button>
            </li>
            <li>
                <button router-link="/user">user</button>
            </li>
        </ul>
    </nav>

</header>
<main>
    <router dr-this="this.child" dr-this:type="outlet" dr-strip="false"></router>
</main>
<footer>
    footer
</footer>
index.css🔻(click)
header, footer, main {
    border: #333333 1px solid;
    padding: 20px;
    margin: 20px;
}

index.ts ▼

import template from './index.html'
import style from './index.css'
@Sim
@Router({
  path: '',
  route: {
    '/': Home,
    '/user': User
  }
})
@Component({
  template,
  styles: [style]
})
export class Index implements RouterAction {
  child?: any;
  async canActivate(url: any, module: any) {
    this.child = module;
  }
}

const config = new SimFrontOption(window).setUrlType(UrlType.hash);
const simpleApplication = new SimpleBootFront(Index, config);
simpleApplication.run();

Decorator

@Sim🔻(click)

Objects managed by the SimpleBootFront framework

  • parameter: SimConfig {schema: string}
@Sim({scheme: 'index'})
@Component🔻(click)
<!--template.html-->
<h1>${this.title}</h1>
<div>#innerHTML#</div>
import template from './index.html'
import style from './index.css'
@Sim
@Component({
  selector: 'index', // default class name LowerCase
  template,
  styles: [style]
})
export class Index {
  public title = ''
  public setData(title: string) {
    this.title = title;
  }
}

using

constructor(index: Index){...}
<index></index>
<!-- dr-set: $index.setData('data'); $element, $innerHTML, $attributes -->
<index dr-set="$index.setData('hello component')">
  <ul>
    <li>content</li>
  </ul>
</index>
@Router🔻(click)
import template from './index.html'
import style from './index.css'
@Sim
@Router({
    path: '',
    route: {
        '/': Home,
        '/user': User,
        '/user/{id}': UserDetail
    }
})
@Component({
    template,
    styles: [style]
})
export class Index implements RouterAction {
    child?: any;
    canActivate(url: any, module: any): void {
        this.child = module;
    }
}

activeRoute

constructor(routerManager: RouterManager){
    // get path data
    routerManager.activeRouterModule.pathData.id; // /user/:id
}

component include

<route component="this.child"></route>

router option

  • attribute
    • router-active-class: url === href attribute => class add (a-classname, b-classname)
      • value: add and remove class name
    • router-inactive-class: url !== href attribute => class add (a-classname, b-classname)
      • value: add and remove class name
    <a router-link="/home" router-active-class="active" router-inactive-class="inactive">home</a>
    • router-link:
      • value: router link
@Script🔻(click)
@Sim({scheme: 'i18nScript'})
@Script({
    name: 'i18n'
})
export class I18nScript extends ScriptRunnable {
    public language?: Language;
    constructor(public i18nService: I18nService) {
        super();
        i18nService.subject.subscribe(it => {
            this.language = it;
            this.render();  // <-- ref target  rerender
        })
    }
    run(key: string): any {
        return this.language?.defaultData?.[key] ?? key;
    }
}

using script

counstructor(i18nScript: I18nScript) {...}
counstructor(scriptService: ScriptService) {
  const i18nScript = scriptService.getScript('i18n');
}
<div>${$scripts.i18n('Get Locale JSON')}</div>
<div dr-if="$scripts.i18n('Get Locale JSON') === 'wow'"> is wow</div>
@PostConstruct🔻(click)

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')
}
@After, @Before (AOP)🔻(click)
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🔻(click)
@ExceptionHandler(TypeError)
public exceptionTypeError(e: TypeError) {
  console.log('TypeError exception:')
}

@ExceptionHandler(SimError)
public exception1(e: SimError) {
  console.log('SimError exception:')
}

@ExceptionHandler(RouterError)
public exception3(e: RouterError) {
  console.log('NotFountRoute exception:')
}

@ExceptionHandler(SimNoSuch)
public exception2(e: SimNoSuch) {
  console.log('NoSuchSim exception:')
}

Framework Core (simple-boot-core)

npm version Github

  • Object management.
    • Dependency Injection (DI)
    • Life cycle provided.
  • Aspect Oriented Programming (AOP)
  • ExceptionHandler (Global or Local)
  • Router System
  • Intent Event System

View template engine (dom-render)

npm version Github

  • view template engine
  • Dom control and reorder and render
  • all internal variables are managed by proxy. (DomRenderProxy)

LifeCycle

Module LifeCycle interface

  • LifeCycle
    • onCreate(): Sim onCreate just one call
  • OnChangedRender
    • onChangedRender(): change rended in module event
  • OnFinish
    • onFinish(): lifecycle finish event
  • OnInit
    • onInit(): module load event
  • OnDestroy
    • onDestroy(): module destroy event
  • OnInitedChild
    • onInitedChild(): module and child module inited event

License

Package Sidebar

Install

npm i simple-boot-front

Weekly Downloads

4

Version

1.0.119

License

MIT

Unpacked Size

64 kB

Total Files

48

Last publish

Collaborators

  • visualkhh