Nanotechnology Promises Much
Have opinions about JavaScript? We want to hear them. Take the 2018 JavaScript Ecosystem Survey »

wings-feathers

2.0.24 • Public • Published



Follow the community
https://fb.com/webmobile.ph/ | https://fb.com/groups/webmobile.ph/

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)

Installation

npm install --save wings-feathers

Usage

Configure feathers and WingsJS

import io from 'socket.io-client'
import feathers from '@feathersjs/feathers'
import auth from '@feathersjs/authentication-client'
import socketio from '@feathersjs/socketio-client'
 
import wings from 'wings-feathers'
 
const socket = io('http://localhost:3030') // IP and port of the server
const app = feathers()
 
app
  .configure(socketio(socket))
  .configure(auth({
    storage: window.localStorage // Passing a WebStorage-compatible object to enable automatic storage on the client.
  }))
 
const wingsJS = wings(app)
app.serve('collection') // Name of the Service or Collection
export default wingsJS

Data-Binding update models and view templates

// wingsJS is a normal feathers instance that has services. In this case, there's a service named "collection"
wingsJS.services.collection.onDataChange(data => { // the function where the magic happen
  this.arrayCollection = data // mutate your state. for ReactJS use setState
})

View / Template

<ul>
  <li v-for="r in arrayCollection" :key="r._id">
    {{r.name}}
  </li>
</ul>

Service methods See docs for more info https://docs.feathersjs.com/api/services.html

wingsJS.services.collection.find({}).then(result => {
  console.log(result)
})
 
wingsJS.services.collection.create({key1: 'hello World'}).then(result => {
  console.log(result)
})
 
// load more data
wingsJS.services.collection.loadMoreData()
 
// load all data
wingsJS.services.collection.loadAllData()
 
// reQuery
wingsJS.services.collection.reQuery({
  channels: [
    {
      name: 'room1', // Channel name
      prop: 'channel' // record or data property
    }
  ],
  query: { // query
    channel: 'room1',
    $sort: {
      year: -1,
      'logs.0.datetime': -1
    }
  }
})
 

install

npm i wings-feathers

Downloadsweekly downloads

221

version

2.0.24

license

ISC

last publish

collaborators

  • avatar
Report a vulnerability