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

simple-boot-front

Package Overview
Dependencies
Maintainers
1
Versions
117
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

simple-boot-front

front end SPA frameworks

  • 1.0.116
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
28
increased by33.33%
Maintainers
1
Weekly downloads
 
Created
Source

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

Keywords

FAQs

Package last updated on 27 Nov 2022

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc