GithubHelp home page GithubHelp logo

feathersjs-ecosystem / feathers-chat-vuex-0.7 Goto Github PK

View Code? Open in Web Editor NEW
102.0 102.0 29.0 362 KB

Feathers Chat application build using feathers-vuex

JavaScript 32.93% HTML 0.79% Vue 18.61% CSS 47.67%

feathers-chat-vuex-0.7's People

Contributors

daffl avatar dnszero avatar gathrlabs avatar greenkeeper[bot] avatar i06 avatar marshallswain avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

feathers-chat-vuex-0.7's Issues

'RxJS' was not found in 'rxjs'

Hi,

both npm run build and npm run dev give the following:

WARNING in ./src/api/feathers-client.js
14:142-146 "export 'default' (imported as 'RxJS') was not found in 'rxjs'

Regards.

An in-range update of eslint-plugin-html is breaking the build 🚨

Version 2.0.2 of eslint-plugin-html just got published.

Branch Build failing 🚨
Dependency eslint-plugin-html
Current Version 2.0.1
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-plugin-html is β€œonly” a devDependency of this project it might not break production or downstream projects, but β€œonly” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this πŸ’ͺ

Status Details
  • ❌ continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Router redirects should be in router before hook

Currently being done with a global watch of the router. That may also interfere with vuex-router.

  watch: {
    // When the user is set, redirect to the Chat page.
    user (newVal) {
      if (newVal === undefined) {
        this.$router.replace({name: 'Login'})
      } else {
        this.$router.replace({name: 'Chat'})
      }
    }
  },

An in-range update of vue is breaking the build 🚨

Version 2.3.0 of vue just got published.

Branch Build failing 🚨
Dependency vue
Current Version 2.2.6
Type dependency

This version is covered by your current version range and after updating it in your project the build failed.

vue is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this πŸ’ͺ

Status Details - ❌ **continuous-integration/travis-ci/push** The Travis CI build failed [Details](https://travis-ci.org/feathersjs/feathers-chat-vuex/builds/226553940)

Release Notes v2.3.0 JoJo's Bizarre Adventure

πŸš€ New

Server-Side Rendering Improvements

Note: We have created a brand-new standalone guide for server-side rendering in Vue, it's a recommended read for all users. Also, the HackerNews demo has been updated to reflect the latest best practices.

  • Now uses the data-server-rendered attribute to indicate server-rendered markup, making the output valid HTML.

  • template option now supports simple interpolation using the render context. This allows the template to be dynamic based on the data attached to the context by rendered components.

    See docs for more details.

  • New bundleRenderer option: runInNewContext

    Defaults to true, which preserves the original behavior.

    When set to false, the renderer will no longer re-execute the entire bundle in a new vm context for each render. Instead, only the function exported by the bundle will be called again. This greatly improves performance, but requires some changes in source code structure.

    See docs for more details.

  • New bundleRenderer option: clientManifest

    By passing the bundleRender a client webpack build manifest generated by vue-server-renderer/client-plugin, the renderer can infer the proper build assets that need to be preloaded (e.g. code-split async chunks, images, and fonts). When using together with the template option, <link rel="preload/prefetch"> and appropriate <script> tags will be injected automatically.

    See docs for more details.

  • vue-ssr-webpack-plugin is now deprecated, instead, it is now part of vue-server-renderer. It now also exposes two plugins - one for the server build and one for the client build.

    var VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
    var VueSSRClientPlugin = require('vue-server-renderer/client-plugin')

    See docs for more details.

Async Component Improvements

  • Async component factories can now return an object of the following format:

    const AsyncComp = () => ({
      // The component to load. Should be a Promise
      component: import('./MyComp.vue'),
      // A component to use while the async component is loading
      loading: LoadingComp,
      // A component to use if the load fails
      error: ErrorComp,
      // Delay before showing the loading component. Defaults to 200ms.
      delay: 200,
      // The error component will be displayed if a timeout is provided and exceeded.
      timeout: 3000
    })

    Note that when used as a route component in vue-router, these properties will be ignored because async components are resolved upfront before the route navigation happens. You also need to update vue-router to 2.4.0+ if you wish to use the new syntax for route components.

Functional Component Improvements

  • Functional components can now omit the props option. All attributes will be automatically extracted and exposed as camelized props on context.props.

    Note when the props option is provided, it will retain the old behavior - i.e. only explicitly declared props will be extracted.

  • v-on listeners attached to a functional component will be exposed as context.listeners. This is simply an alias to context.data.on.

    Combined with the props change, functional components usage can be much cleaner:

    const MyComp = {
      functional: true,
      render (h, { props, listeners }) {
        return h('div', {
          on: {
            click: listeners.click // proxy click listener
          }
        }, [
          props.msg // auto extracted props
        ])
      )
    }
  • Functional components now also support the inject option. Injected properties are exposed as context.injections. (@Kingwl via #5204)

Other Improvements

  • .sync is back! However it now is simply syntax sugar that expands into a prop + listener pair, similar to v-model.

    The following

    <comp :foo.sync="bar"></comp>

    is expanded into:

    <comp :foo="bar" @update:foo="val => bar = val"></comp>

    For the child component to update foo's value, it needs to explicitly emit an event instead of mutating the prop:

    this.$emit('update:foo', newValue)
  • Warnings now include component hierarchy traces.

  • Vue.config.errorHandler now also handles error thrown inside custom directive hooks (@xijiongbo via #5324)

  • Vue.config.errorHandler now also handles error thrown in nextTick callbacks.

  • New v-on modifier: .passive - adds the event listener with { passive: true }. (@Kingwl via #5132)

  • Props validation now supports type: Symbol.

  • style bindings now support using an Array to provide multiple (prefixed) values to a property, so the following would be possible (@fnlctrl via #5460):

    <div :style="{ display: ["-webkit-box", "-ms-flexbox", "flex"] }">
  • An extended component constructor can now also be used as a mixin. (@ktsn via #5448)

πŸ› Fixed

  • #5238, #5387 fix v-model not syncing for autocomplete / switching focus before confirming composition
  • #5318 fix style diffing on cached/slot elements
  • #5346 fix keep-alive cache incorrectly pruned with transition mode="out-in"
  • #5361 fix Symbol check error in Node 4.x
  • #5394 fix duplicate attribute warning when using class and :class together in Edge
  • #5398 fix v-model checkbox binding with Array index (@posva via #5402)
  • #5464 fix incorrect compiler warning for $delete usage in templates
  • #5480 allow slot names to be number 0 (@posva via #5481)
  • #5526 fix text inside <script type="x/template"> being unnecessarily decoded
  • vue-class-component#87 fix base class lifecycle hook dropped when constructor options are modified before applying global mixin
Commits

The new version differs by 126 commits0.

  • a27c464 [release] 2.3.0
  • 87b0d5d [build] 2.3.0
  • d8315c4 do not decode text inside script/style tags (fix #5526)
  • 3a6fd13 [release] 2.3.0-beta.1
  • 56b6f8a [build] 2.3.0-beta.1
  • cb0531c increase async delay for more test cases
  • c24f492 fix edge test case
  • 1096890 increase async component test delay
  • 12b7122 fix mixin issue (#5514)
  • 2a247fc fix ssr initial context style recording
  • 016920e support customizing context and window keys for renderState()
  • 38516b4 fix flow
  • 380e988 Allow slot names to be numbers (#5481)
  • 1288386 Support Vue.delete(arr, index) in TypeScript definitions (#5508)
  • a2f57e3 use context-agnostic RegExp check

There are 126 commits in total.

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

How can I keep authenticated in all components

I need to use feathersVuex actions in lots of components. I dont want to put this.$store.dispatch('auth/authenticate') in every component to use the vuex store.

Where would you recommend that line of authentication?
I tried in the mounted() of App.vue, but it does not work

Thanks

rxjs related problem

I get a rxjs related warning when running this example:
warning in ./src/api/feathers-client.js
14:142-146 "export 'default' (imported as 'RxJS') was not found in 'rxjs'

Is this due to the recently updated feathers-vuex package which no longer needs rxjs and feathers-reactive?

How to reproduce the problem:
git clone https://github.com/feathers-plus/feathers-chat-vuex.git
cd feathers-chat-vuex
npm install
npm run dev

Upgrade to Buzzard

I based an app on feathers-chat-vuex.
I already upgraded the feathers server app. But I'm having some pitfalls upgrading the client.

Would this repo be upgraded to Buzzard at some point?

Meanwhile, I am trying to upgrade my app. It is a Quasar (Vue) app.

Changes done so far are (git diff):

diff --git a/package.json b/package.json
   "dependencies": {
+    "@feathersjs/authentication-client": "^1.0.2",
+    "@feathersjs/feathers": "^3.0.5",
+    "@feathersjs/socketio-client": "^1.0.2",
-    "feathers": "^2.1.4",
-    "feathers-authentication-client": "^0.3.2",
-    "feathers-hooks": "^2.0.1",
-    "feathers-socketio": "^2.0.0",
     "feathers-vuex": "~1.0.0",
+    "fuzzysearch": "^1.0.3",
+    "socket.io-client": "^2.0.4",

. . .

diff --git a/src/api/feathers-client.js b/src/api/feathers-client.js
 import 'babel-polyfill'
-import feathers from 'feathers'
-import hooks from 'feathers-hooks'
-import socketio from 'feathers-socketio'
-import auth from 'feathers-authentication-client'
+import feathers from '@feathersjs/feathers'
+import socketio from '@feathersjs/socketio-client'
+import auth from '@feathersjs/authentication-client'
 import io from 'socket.io-client'
 
 const feathersClient = feathers()
-  .configure(hooks())
   .configure(socketio(socket))

. . .

diff --git a/config/index.js b/config/index.js   (webpack)
module.exports = {
+  // This module section is required for feathers v3 as stated in api/client docs
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules(\/|\\)(?!(@feathersjs))/,
+        use: {
+          loader: 'babel-loader',
+          options: { }
+        }
+      }
+    ]
+  },
+  
   build: {
     env: require('./prod.env'),

However, the browser console shows:

hooks.js?3089:30 
Uncaught ReferenceError: convertGetOrRemove is not defined
    at eval (hooks.js?3089:30)
    at Object.<anonymous> (app.js:3524)
    at __webpack_require__ (app.js:708)
. . .

Any hint would be appreciated.

Question: Chat.vue Promise resolves to Subscriber object

Hi and thanks for the example application. I've been using it for learning FeathersJS with Vue and Vuex.

In Chat.vue you define:
https://github.com/feathers-plus/feathers-chat-vuex/blob/master/src/components/Chat/Chat.vue

Your created() code calls findMessages action and returns a promise.

    // Query messages from Feathers
    this.findMessages({
      query: {
        $sort: {createdAt: -1},
        $limit: 25
      }
    })

but when I hook a then() onto it, I get a subscriber object back, not the data. i.e.

    // Query messages from Feathers
    this.findMessages({
      query: {
        $sort: {createdAt: -1},
        $limit: 25
      }
    }).then(function (messages) {
      this.myMessages = messages.data  // Subscriber object, no data
    })

Any idea how I would go about retrieving data for Feathers "find" actions? I may be missing something in the docs.

Thank you.

An in-range update of vue is breaking the build 🚨

Version 2.3.3 of vue just got published.

Branch Build failing 🚨
Dependency vue
Current Version 2.3.2
Type dependency

This version is covered by your current version range and after updating it in your project the build failed.

vue is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this πŸ’ͺ

Status Details
  • ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Release Notes v2.3.3

Fixed

  • #5586 fix unecessary input trigger with v-model on change event (@posva via #5589)
  • #5591 ssr template interpolation should be whitespace-insensitive (@HerringtonDarkholme via ##5597)
  • #5592 fix regression where text nodes are merged into comment placeholder nodes (@maggiehe via #5593)
  • #5610 fix Vue.use not chainable when plugin has already been installed, also makes Vue.mixin chainable. (@lzxb via #5610)
  • #5615 fix scoped slots when used together with v-for
  • #5618 fix slot elements after v-for being unnecessarily recreated (@gebilaoxiong via #5627)
  • #5633 fix comment nodes not cloned properly (@pengchongfu via #5633)
  • #5635 fix async components timeout triggered when already resolved
Commits

The new version differs by 19 commits0.

  • 8d56a49 [release] 2.3.3
  • 6bdaeb0 [build] 2.3.3
  • aaad733 improve scoped slot test case (#5640)
  • e70f191 no need to test composition events on Android
  • 38759a6 fix test case in IE
  • 8d54aec async components: timeout should not trigger if already resolved (fix #5635)
  • 3139605 ignore ssr getter
  • 0ccefff support v-for on scoped slots (fix #5615)
  • dc00590 comments
  • ec70b44 tweak noramlizeArrayChildren
  • f2bd882 Fix: nested child elements can not be updated correctly, fix #5618 (#5627)
  • 5d965d5 clone isComment when cloneVNode (#5633)
  • b5b1ac3 improve mutli-line && coding style to keep consistence (#5625)
  • 1c40e32 Fix use mixin API feat continuous operation (#5610)
  • ca02043 avoid using native as identifier (close #5623)

There are 19 commits in total.

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

An in-range update of eslint-plugin-import is breaking the build 🚨

Version 2.4.0 of eslint-plugin-import just got published.

Branch Build failing 🚨
Dependency eslint-plugin-import
Current Version 2.3.0
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-plugin-import is β€œonly” a devDependency of this project it might not break production or downstream projects, but β€œonly” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this πŸ’ͺ

Status Details
  • ❌ continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

Commits

The new version differs by 10 commits.

  • 44ca158 update utils changelog
  • a3728d7 bump eslint-module-utils to v2.1.0
  • 3e29169 bump v2.4.0
  • ea9c92c Merge pull request #737 from kevin940726/master
  • 8f9b403 fix typos, enforce type of array of strings in allow option
  • 95315e0 update CHANGELOG.md
  • 28e1623 eslint-module-utils: filePath in parserOptions (#840)
  • 2f690b4 update CI to build on Node 6+7 (#846)
  • 7d41745 write doc, add two more tests
  • dedfb11 add allow glob for rule no-unassigned-import, fix #671

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

import 'getbase/dist/css/styles.css' causes client build error

After a fresh clone of the repository, I install and run as dev, and I get the following error thrown:

image

I looked into getbase's node_modules directory, and the structure looks like so:

image

I might need a bit more coffee to wake up, but if this is me not being dense, I've created PR #48 that I would be more then willing to alter if needed.

Thanks for the great example! I really appreciate it :)

Router mode history

Hi, I'm playing around with this example and updated the router (/src/router/index.js) as follows in order to have routes without the /#/

export default new Router({
  mode: 'history',
  routes: [
    { path: '', name: 'Home', component: Home },
    { path: '/login', name: 'Login', component: Login },
    { path: '/signup', name: 'Signup', component: Signup },
    { path: '/chat', name: 'Chat', component: Chat }
  ]
})

Everything works as expected except for when I click the Sign Out button, then I get redirected to http://localhost:8080/chat#

So where can I get rid of the # at the end of the url?

FeathersVuex plugin

Following documentation for Vue Plugin API. I am trying to use FeathersVuex plugin. By following code in the documentation.

My code is as follows

import Vue from "vue";
import Vuex from "vuex";
import feathersVuex from "feathers-vuex";
// import feathersClient from "../api/feathers-client";
import { feathersClient } from "../plugins/feathers";

import example from "./module-example";

Vue.use(Vuex);

const { service, auth, FeathersVuex } = feathersVuex(feathersClient, {
  idField: "_id"
});

console.log(
  "FeathersVuex: " + FeathersVuex + "  feathersClient: " + feathersClient
);

Vue.use(FeathersVuex);

I am getting bellow error

vue.runtime.esm.js?ff9b:4746 Uncaught TypeError: Cannot read property 'install' of undefined
at Function.Vue.use ...

The way I see it the error is consistent with my console.log that says FeathersVuex is undefined

FeathersVuex: undefined feathersClient: [object Object]

I was thinking that something is wrong with feathersClient but the console log looks OK. But here is my feathersClient code, in case that can help.

import feathers from "feathers";
import hooks from "feathers-hooks";
import socketio from "feathers-socketio";
import auth from "feathers-authentication-client";
import io from "socket.io-client";

const socket = io("http://localhost:3030", { transports: ["websocket"] });

const feathersClient = feathers()
  .configure(hooks())
  .configure(socketio(socket))
  .configure(auth({ storage: window.localStorage }));

export default ({ app, router, Vue }) => {
  Vue.prototype.$feathers = feathersClient;
};

export { feathersClient };

Appreciate help or additional documentation on how to troubleshoot FeathersVuex is undefined in bellow code

const { service, auth, FeathersVuex } = feathersVuex(feathersClient, {
  idField: "_id"
});

TIA
Haris

Question about real time events

How configure realtime events?
The examples is not using real time events (using rest provider), and feathers-chat-vuex neither.

I try to configure the real time events in a simple test app, but I have a strange behavior.
I can listen for socket events and refresh de data with the actions, but that returns duplicated data.

For example:

Send { message: 'Hi!' }
Send { message: 'Hello!' }
Receive

[
  { message: 'Hi!' },
  { message: 'Hello!' },
  [ { message: 'Hi!' }, { message: 'Hello!' } ]
]

The basic test app feathers-vuex-test

Unnecessary Rx.js dependency

https://github.com/feathersjs/feathers-chat-vuex/blob/master/package.json#L30

What is the RxJS extension used for, it seems superfluous with vuex/socket.io, and indeed vue itself [1].

Is the RxJS dependency an unintentional remnant from the react demo?

It seems particularly out of element as the native js demo excludes it, and it's not as popular in the VueJs scene [2].

Should we work on simplifying this demo to work without RxJs? This is the primary demo of Vue2 integration with feathers, it seems like a lot to ask newcomers to also understand the redundant flow of RxJS when are we're looking for is a great VueJS backend.

[1] The official Vue chat server doesn't have an RxJS room, it has everything else including anime (that's not a javascript library).
https://discordapp.com/channels/325477692906536972/333474037751873547

[2] This old discussion sums it up, with people finding it superflous and even long time users finding it unnexesary for simple projects in Vue 1.x https://forum-archive.vuejs.org/topic/839/is-it-a-good-idea-to-use-vue-with-rx-js

getbase changed their api in 3.5

App.vue references getbase/dist/css/styles.css which is fine in 3.4.2

but in 3.5.1, which is "compatible with" 3.4.2, the file moved to getbase/css/styles.css

should we lock it to ~3.4.2 and call it a day
or use ^3.5.1, fix the path and expect everyone to re-run npm install?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.