4.4.4 • Published 4 years ago
wings4 v4.4.4
Welcome to wings4!
A FeathersJS 4-Way reactive data sync for any frontend framework
- DOM / UI (HTML)
- Data / State (Javascript)
- Local Storage (Offline)
- Backend/Database (Cloud)
Join and support our Community Web and Mobile Developers PH [ Facebook Page | Group ]
Installation
npm install wings4
or
yarn add wings4
Usage
import wings from 'wings4'
// const wings = require('wings4').default
let app = wings('http://localhost:3030')
let messagesSrvc = app.wingsService('messages')
messagesSrvc.on('dataChange', (messages) => {
console.log(messages)
})
messagesSrvc.init()
app.wingsService(serviceName, params, config)
Returns a wingsService <object>
Param | Type | Description |
---|---|---|
serviceName | <string> | Name of service |
params.query | <object> | ( Optional ) Refer to Feathers Querying |
config | <object> | ( Optional ) Configuration of wingsService <object> |
config.channels | <array> | ( Optional ) Array of channel objects |
params.query <object>
Refer to Feathers Querying
/* example records
[
{ text: 'Hello', read: true, roomId: 1, nested: { prop: 'xander' } },
{ text: 'World', read: false, roomId: 2, nested: { prop: 'ford' } }
]
*/
let serviceName = 'message'
let params = {
query: {
read: false,
roomId: 2
}
}
let messagesSrvc = app.wingsService(serviceName, params)
messagesSrvc.on('dataChange', (messages) => {
console.log(messages)
// [ { text: 'World', read: false, roomId: 2, nested: { prop: 'ford' } } ]
})
config <object>
Property | Type | Default | Description |
---|---|---|---|
debug | <boolean> | false | Logs all events init , created , removed , patched , updated , loadMore , reset |
newDataPosition | <string> | 'end' | Add new items to the start or end of an array |
paginate | <boolean> | false | Enable pagination based on $limit . **default is 10 records per page |
channels | <array> | [] | Refer to channels |
let config = {
debug: true,
newDataPosition: 'start',
paginate: true,
channels: []
}
let messagesSrvc = app.wingsService(serviceName, params, config)
config.channels <array>
and channel <object>
Channels determine which records to receive that passes the prop === value .
Property | Type | Description |
---|---|---|
prop | <string> | Name of record's property |
value | <string | number | boolean | function> | Equality test value |
value | <function> | callback accepts (val, message) arguments for custom test. **Must return a boolean value |
/* example records
[
{ text: 'Hello', read: true, roomId: 1, nested: { prop: 'xander' } },
{ text: 'World', read: false, roomId: 2, nested: { prop: 'ford' } }
]
*/
let config = {
channels: [
{ prop: 'roomId', value: 2},
{ prop: 'nested.prop', value: 'ford'},
{ prop: 'nested', value: (val) => val.prop === 'ford' }
]
}
let messagesSrvc = app.wingsService(serviceName, params, config)
You may use dot notation in prop as reference into the object's property
reset(params, config)
set new params
, config
and triggers init
method
let params = {
query: {
read: false,
roomId: 2
}
}
let config = {
debug: true,
newDataPosition: 'start',
paginate: true,
channels: []
}
messagesSrvc.reset(params, config)
loadMore()
loads more data based on $skip
= ( page
+ 1 ) * $limit
messagesSrvc.loadMore()
loadAll()
loads all data based on ($skip
= page
$limit
) pages
messagesSrvc.loadAll()
loadPage(page)
loads the based on $skip
= page
* $limit
messagesSrvc.loadPage(2)
destroy()
destroys all listners created by .on(eventName, listener)
function
messagesSrvc.destroy()
Single Sign-On (Backend)
npm install feathers-sso
or
yarn add feathers-sso
// authentication.js
const { LocalStrategy } = require('@feathersjs/authentication-local');
const { expressOauth } = require('@feathersjs/authentication-oauth');
const Sso = require('feathers-sso')
module.exports = app => {
const authentication = new AuthenticationService(app);
authentication.register('jwt', new JWTStrategy());
authentication.register('local', new LocalStrategy());
authentication.register('sso', new Sso('http://localhost:3030'));
app.use('/authentication', authentication);
app.configure(expressOauth());
};
Single Sign-On (Frontend)
enables SSO to specific iframe parent host
// SSO login UI
app.enableSSO([
'http://localhost:8080',
'http://localhost:3030'
])
authenticate using SSO specifying the URL of SSO login UI
// Connecting Client App to SSO login UI
app.authenticateSSO('http://localhost:8080/#/auth')