wings-feathers

A FeathersJS 4-Way reactive data sync for any frontend framework
1,728 7
Install
npm install wings-feathers
Latest Version:4.0.10
License:ISC
Last Updated:Jul 26, 2019
Links: GitHub  ·  npm
Maintainer: trinly01

Welcome to Wings-Feathers!


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 wings-feathers

or

yarn add wings-feathers

Usage

import wings from 'wings-feathers'
// const wings = require('wings-feathers').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
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()

Join and support our Community
Web and Mobile Developers PH
[ Facebook Page | Group ]

Related Packages

@dark-engine/core

The lightweight and powerful UI rendering engine without dependencies and writte...

30,320 53
@dark-engine/web-router

The isomorphic Dark router designed for rendering universal web applications tha...

25,069 53
kr-observable

Adds reactivity power for your JavaScript

87,949 33
ag-charts-types

Advanced Charting / Charts supporting Javascript / Typescript / React / Angular...

119,182,953 485

Version History

Version Released License
4.0.10 ISC
4.0.9 ISC
4.0.8 ISC
4.0.7 ISC
4.0.6 ISC