ninjiajs v3.4.2

NinjiaJs

Micro and elegant frontend framework

Geting Started

Install

$ npm install ninjiajs

Pay A Glance

$ npm run dev

http://localhost:8080

Usage

Startup

main.js

import App from 'path to xxx component'

let app = Ninjia({container: window, reducer, middlewares, state: {}}) // container, reducer, middlewares, initialState

app.set('routes', routes)

app.start(async () => {
  // set entry for the application.
  app.set('entry', new App(document.getElementById('app')))
})

API

set(key, val)

• key \<String>

• val \<Any>

  buildin config - key -> value

  • env \<Enum> application environment - production, development, test
  • mode \<Enum> browser or history
  • context \<Object> application context obj (store, tags, ...others)
  • routes \<Object> expect a plain obj to describe the routes (more in below)
  • entry \<Object> application entry component

registerWidget(options)

• options.name \<string>

• options.methods \<array>

  allow user to control component with method invocation.

  eg:

  app.registerWidget({ name: 'modal', methods: 'open' })

start()

all ready callback

Component

Define component

@Componnet // register this component to hub, in order to use it in html directly.
export default class Todo extends Ninjia.Component {

  get tmpl() {
    return require('path to template of component');
  }

  onCreate(opts) {}
}

State Management

redux like:

@Connect(
  state => ({
    ...states
  }),
  dispatch => ({
    ...actions
  })
)
export default class Todo extends Ninjia.Component {}

Router

Define routes

import TodoList from '...path to component';

export default {
  component: App,
  path: '',
  children: [
    {
      path: '/',
      component: TodoList,
      defaultRoute: true
    }
  ]
}

Fields

Context

1. req \<Object>

Router outlet in html

<div class="component">
  <div>greeting!</div>
  <router-outlet></router-outlet> <!-- sub routers will replace here  -->
</div>

Component life cycle about router

eg:

@View // this decorator specify that component will be a view, give the component relevant features
export default class Todo extends Ninjia.Component {
  // ...others
  onCreate(opts) {
    this.on('enter', ctx => {
      // todo
    })
    this.on('before-leave', ctx => {
      // todo
    })
    this.on('leave', ctx => {
      // todo
    })
    this.on('leaved', ctx => {
      // todo
    })
  }
}

// Advanced Usage
class Foo extends Ninjia.Component {
  // ...others
  
  // decorator onUse <Function>
  // @param <Array | String>, when nav to this component, the middlewares (defined in 'opts') will be invoke.
  //   each middleware method will be injected a callback ( component will be present when the callback invoked ) and a  
  //   router context object. 
  // eg: const enterFoo = (next, ctx)
  @onUse('enterFoo')
  onCreate(opts) {}
}

Route hooks

1. history-pending - callback(from, to, location, context, next)

• from \<Object> from which Component
• to \<Object> to which Component
• location \<String> uri
• context \<Object> context object
  • req \<Object> request object
    • params \<Object>
    • body \<Object>
    • query \<Object>
• next \<Function> execution callback, if exists, the execution won`t be continue until next being executed

2. history-resolve - callback(from, to, context, routes, index, next)

• from \<Object> from which Component
• to \<Object> to which Component
• context \<Object> context object
  • req \<Object> request object
    • params \<Object>
    • body \<Object>
    • query \<Object>
• routes \<Object> uris
• index \<Number> current index in uris
• next \<Function> execution callback, if exists, the execution won`t be continue until next being executed

eg:

app.hub.subscribe('history-pending', (from, to, location, context, next) => {})

app.hub.subscribe('history-resolve', (from, to, context, routes, index) => {})

Form

Buildin rules

• required
• max
• min
• maxlength
• minlength
• pattern

API

• registerValidators(name, fn)

  • name \<string>
  • fn \<Function>

Register customer validators

Detail

• Integrate with Redux A action will be dispatched when interact with inputs. You will get corrent value in state and opts. Attached to opts:

  • submit \<Function> submit specific form manually.
  • forms \<Object> forms map.

• input fields & add class

  • field
    • $valid
    • $invalid
    • $dirty
    • $pristine
    • $error
    • $originVal
    • $val

  • class

    • f-valid
    • f-invalid
    • f-dirty
    • f-pristine

• multi form validation supported

Example

@Form({
  username: {
    required: true,
    minlength: 2,
    maxlength: 20
  },
  password: {
    required: true,
    min: 1,
    max: 10
  },
  address: {
    pattern: /.*/
  }
})
class Foo extends Ninjia.Component {
  // ...others
  async onSubmit() {
    e.preventDefault();
    this.opts.submit('FormA')   // submit specific form manually
    if (this.opts.forms.FormA.$invalid) {
      return;
    }
  }
}

<style>
  .f-valid {
    border: green
  }
  .f-invalid {
    border: red
  }
  .f-dirty {
  }
  .f-pristine {
  }
</style>
<form ref="FormA">
  <p if="{ opts.forms.FormA.$submitted && opts.forms.FormA.username.$error.required }" class="help-block" >username required! </p>
  <input type="text" ref="username">
</form>

Usage v2.* (Deprecated)

routes.js

export default {
  component: 'app',
  children: [
    {
      path: '/',
      defaultRoute: true,
      component: 'count',
    },
    {
      path: '/test',
      component: 'test',
      children: [
        {
          path: '/test2',
          component: 'test2'
        }
      ]
    }
  ]
}

//main.js
import { router Ninjia } from 'ninjiajs';

let app = new Ninjia(container, reducer, middlewares, initialState);  // create ninjia application

app.set('env', process.env.NODE_ENV === 'production' ? 'production' : 'development');

app.set('mode', 'browser');

app.set('context', { store: app.store, hub: router.hub, tags: {} });

router.hub.routes = routes;  // set routes

app.router(router);

app.start(async () => {
  //todo
})

//component

require('path-to-nest');

<app>
  <div>Hello World</div>
  <router-outlet></router-outlet>
  
  import { connect } from 'ninjiajs';
  
  connect(              //redux like
    state => ({}),
    dispatch => ({})
  )(this)
  
  this.mixin('router');   // mixin router, if you wanna use middleware (the $use method)
  
  this.$use(function(next, ctx){
    //trigger when nav to this component
  })
</app>

Who's using

More

source for more detail

Contact

QQ: 2811786667