ninjajs v3.4.3
Like a ninja, Ninjajs dexterous and elegant, and its body full of magic weapons that simple but powerful. Ninjajs will help you to use the simple way to build complex systems. "Practical but not fancy" is its talisman.
Geting Started
Install
$ npm install ninjajs
Pay A Glance
$ npm run dev
Usage
Startup
main.js
import App from 'path to xxx component'
let app = Ninja({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 Ninja.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 Ninja.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
- 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 Ninja.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 Ninja.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>
- req \<Object> request 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>
- req \<Object> request 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
- field
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 Ninja.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 Ninja } from 'ninjajs';
let app = new Ninja(container, reducer, middlewares, initialState); // create ninja 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 'ninjajs';
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