feathersjs-ecosystem / feathers-chat-vuex-0.7 Goto Github PK
View Code? Open in Web Editor NEWFeathers Chat application build using feathers-vuex
Feathers Chat application build using feathers-vuex
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.
Wrong repository.
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 πͺ
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot π΄
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'})
}
}
},
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 πͺ
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 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 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)
.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)
v-model
not syncing for autocomplete / switching focus before confirming compositionclass
and :class
together in Edgev-model
checkbox binding with Array index (@posva via #5402)0
(@posva via #5481)<script type="x/template">
being unnecessarily decodedThe 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
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot π΄
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
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
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.
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.
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 πͺ
Vue.use
not chainable when plugin has already been installed, also makes Vue.mixin
chainable. (@lzxb via #5610)v-for
v-for
being unnecessarily recreated (@gebilaoxiong via #5627)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
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot π΄
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 πͺ
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
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot π΄
After a fresh clone of the repository, I install and run as dev, and I get the following error thrown:
I looked into getbase's node_modules directory, and the structure looks like so:
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 :)
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?
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
I've just used boilerplate code for here.
npm install
npm run dev
I receive Error in connection establishment: net::ERR_CONNECTION_REFUSED for websocket connection
Any ideas ?
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
Trying to install on VS Code Linux Lite Ubuntu. Get this error. Also tried installing from zip file instead of git clone.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.