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

field	type	desc
path	string	Corresponding URI, Relative path
component	Object	Component constructors
children	Array	sub routes outlets
defaultRoute	Boolean	specify that this is a default route
components	Object	dynamic route defined, get identifier from query string
abstract	Boolean	specify that this is a abstract route, no Corresponding component
...others	Any	will be get from context.req.body

Context

1. req <Object>

field	type
params	Object
body	Object
query	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

evts
enter
before-leave
leave
leaved

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