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.33
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
9
increased by80%
Maintainers
1
Weekly downloads
 
Created
Source

Single Page Application Framworks npm version license Chat Github

Single Page Application Framworks for Web

Our primary goals are

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

Installation and Getting Started

npm install simple-boot-front

😃 examples project

  • parcel-bundler
  • parcel-bundler-js (js version)
  • webpack
  • Here is a quick teaser of a complete simple-boot-front application in typescript

    • index.ts

      const option = new SimOption(AppRouter)
      .setUrlType(UrlType.path)
      .setAdvice(Advice);
      const simpleApplication = new SimpleApplication(option);
      simpleApplication.run();    
      
    • index.html

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

      @Sim({scheme: 'layout-router'})
      export class AppRouter extends RootRouter {
          '' = {module: Index, stripWrap: true};
          'ajax' = {module: Ajax, stripWrap: true};
          'intent' = {module: Intents, stripWrap: true};
          'view' = {module: Views, stripWrap: true};
          'exception' = {module: Exception, stripWrap: true};
          'aop' = {module: Aop, stripWrap: true};
          'views' = {module: Views, stripWrap: true};
          constructor() {
              super('', {module: App, stripWrap: true});
          }
          async canActivate(url: Url, module: RouterModule): Promise<RouterModule | RouterModuleOption> {
              if (url.path === 'views' && url.params.get('auth') === 'false') {
                  return {module: Forbidden, stripWrap: true};
              } else {
                  return module;
              }
          }
          notFound(url: Url): ConstructorType<Module> {
              console.log(url.path)
              return Notfound;
          }
      }
      
      
    • index.ts

      @Sim({scheme: 'index'})
      export class Index extends Module {
        data = "default data";
        thisData = 5151;
        constructor(public v: ViewService, public manager: SimstanceManager, public navigation: Navigation) {
            super("index",{template: html});
        }
      
        onInit() {
        }
      
        @PostConstruct
        public post(renderer: Renderer) {
        }
      }
      
      
    • index.html

      <h1>index</h1>
      links:
      <ul>
          <li>ajax example page: <a router-link="">ajax</a></li>
      </ul>
      
      <div class="card mt-2" style="width: 100%;">
          <div class="card-body">
              <h5 class="card-title">set module</h5>
              <div>set variable: <!--%write(this.title)%--></div>
              <div>input module variable: <input type="text" module-event-keyup="changeText"></div>
          </div>
      </div>
      
      <div class="card mt-2" style="width: 100%;">
          <div class="card-body">
              <h5>event click change "module-event-click"</h5>
              <!--%module(this.numbers)%-->
              <button class="btn btn-info" module-event-click="changeData">change</button>
          </div>
      </div>
      
      <div class="card mt-2" style="width: 100%;">
          <div class="card-body">
              <h5>default data set "module-value"</h5>
              <input type="text" module-value="data">
          </div>
      </div>
      
      <div class="card mt-2" style="width: 100%;">
          <div class="card-body">
              <h5>variable module</h5>
                <!--%module(this.data)%-->
              data link change event <input type="text" module-link="data">
          </div>
      </div>
      
      <div>
            <!--%write(this.thisData)%-->
          thisData <button module-event-click="thisDataChange"> this data change</button>
      </div>
      <div>
          <div module-event-click="goto">aaaaaaaaa</div>
      </div>
      

View template engine

  • 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.

  • scope
    • start: <!--%
    • end: %-->
    • write: write string
    • method
      • module: module include (Wrap element)
      • stripModule: module include (no Wrap Element)
    • ex
      <div><!--%write(this.data)%--></div>
      <div><!--%module(this.aModule)%--></div>
      <div><!--%stripModule(this.aModule)%--></div>
      <div>
      <!--%
          for (let i of this.datas) {
              write('<li>' + i + '</li>');
          }
      %-->
      </div>
      

Module LifeCycle

  • 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'})
    export class Index extends Module {  }
    
  • @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) {
      super('Ctitle', {
        template: 'value:(<!--% write(this.value) %--> <button module-event-click="cc">CC</button>)',
        value: 'default value'
      });
      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
    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() {
  this.publish(new Intent('layout://info/data?a=wow&aa=zzz', Math.floor(RandomUtils.random(0, 100))));
  // this.publish(new Intent('layout://info/datas', Math.floor(RandomUtils.random(0, 100))));
  // this.publish(new Intent('layout://', Math.floor(RandomUtils.random(0, 100)))); // default callback method -> subscribe(i: Intent)
  // this.publish(new Intent('://info/datas', Math.floor(RandomUtils.random(0, 100))));
}
@Sim({scheme: 'layout'})
export class App extends Module {
    info = new AppInfo();
    constructor() {
        super("app-layout-module", {template: html, styleImports:[css]});
    }
}
export class AppInfo extends Module {
    datas = 'default data';
    constructor() {
      super("app-info", {template: '<div><h3>info</h3><!--%write(this.datas)%--></div>'});
    }
    data(i: Intent) {
        this.datas = i.data + '->' + i.params.aa
    }
}

Reserved key word

  • html
    • attribute
      • [router-outlet]: child module space
      • module-event-click: click event
        • value: method name, parameter($event, View)
        • <button module-event-click="changeData">change</button>
          
      • module-event-change: change event
        • value: method name, parameter($event, View)
        • <input module-event-change="changeData">
          
      • module-event-keyup: keyup event
        • value: method name, parameter($event, View)
        • <input module-event-keyup="changeData">
          
      • module-event-keydown: keydown event
        • value: method name, parameter($event, View)
        • <input module-event-keydown="changeData">
          
      • module-link: link event (value change <-> input)
        • value: variable name
        • <input module-link="value">
          
      • module-value: value injection
        • value: variable name
        • <input module-event-value="value">
          
      • 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>
          
      • module-event-{{eventName}}-intent-publish: intent publish
        • value: ['uri', 'variablename'] or ['uri']
        • publish
           click event intent publish:
            <button class="btn btn-primary" module-event-click-intent-publish="['layout://info/data?a=wow&aa=ppp','makeRandom']">publish data</button>
          
           typing:
            <input type="text" module-event-keyup-intent-publish="['layout://info/viewSubscribe?a=wow&aa=vvv']">
        
        • subscribe
        data(i: Intent) {
         this.datas = i.data + '->' + i.params.aa
        }
        viewSubscribe(i: Intent<View<HTMLInputElement>>) {
          this.datas = i.data?.value + '->' + i.params.aa + '-->' + i.event
        }
        
  • css
    • moduleIdAttrSelector(): module Dedicated style
      • as-is
        • <!--%moduleIdAttrSelector()%--> h1 {color: burlywood;}
          
      • to-be
        • *[module-id='___Module___module-selector..'] h1 { color: burlywood;}
          

License

Keywords

FAQs

Package last updated on 24 Jun 2021

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