From 3516dce4fcc2b37dbed336bc4e0e6f981c308d7e Mon Sep 17 00:00:00 2001 From: joelchu Date: Sat, 22 Feb 2020 20:13:59 +0800 Subject: [PATCH 1/3] move the vuex module to the @jsonql/client --- packages/@jsonql/client/package.json | 10 ++-- packages/http-client/package.json | 5 +- packages/http-client/vuex.js | 76 ---------------------------- 3 files changed, 7 insertions(+), 84 deletions(-) delete mode 100644 packages/http-client/vuex.js diff --git a/packages/@jsonql/client/package.json b/packages/@jsonql/client/package.json index cb05bb85..74c6a8b6 100644 --- a/packages/@jsonql/client/package.json +++ b/packages/@jsonql/client/package.json @@ -46,14 +46,14 @@ "license": "MIT", "dependencies": { "flyio": "^0.6.14", - "jsonql-client": "^1.5.14" + "jsonql-client": "^1.5.18" }, "optionalDependencies": { "@jsonql/ws": "^1.0.11" }, "devDependencies": { - "@jsonql/koa": "^0.8.1", - "ava": "^2.4.0", + "@jsonql/koa": "^0.8.2", + "ava": "^3.3.0", "browser-env": "^3.3.0", "debug": "^4.1.1", "esm": "^3.2.25", @@ -62,14 +62,14 @@ "nyc": "^15.0.0", "promise-polyfill": "8.1.3", "qunit": "^2.9.3", - "rollup": "^1.29.0", + "rollup": "^1.31.1", "rollup-plugin-alias": "^2.2.0", "rollup-plugin-analyzer": "^3.2.2", "rollup-plugin-async": "^1.2.0", "rollup-plugin-buble": "^0.19.8", "rollup-plugin-bundle-size": "^1.0.3", "rollup-plugin-commonjs": "^10.1.0", - "rollup-plugin-copy": "^3.1.0", + "rollup-plugin-copy": "^3.3.0", "rollup-plugin-node-builtins": "^2.1.2", "rollup-plugin-node-globals": "^1.4.0", "rollup-plugin-node-resolve": "^5.2.0", diff --git a/packages/http-client/package.json b/packages/http-client/package.json index 712c3c24..14c770c3 100755 --- a/packages/http-client/package.json +++ b/packages/http-client/package.json @@ -1,6 +1,6 @@ { "name": "jsonql-client", - "version": "1.5.18", + "version": "1.5.19", "description": "jsonql http browser client using Fly.js with full user profile management with jwt and more", "main": "core.js", "module": "index.js", @@ -13,8 +13,7 @@ "index.js", "static.js", "module.js", - "sync.js", - "vuex.js" + "sync.js" ], "scripts": { "test": "ava", diff --git a/packages/http-client/vuex.js b/packages/http-client/vuex.js deleted file mode 100644 index 68e409e3..00000000 --- a/packages/http-client/vuex.js +++ /dev/null @@ -1,76 +0,0 @@ -// this is an experiemental generic module for vuex -import { jsonqlStaticClient } from './static' - -/** - * @param {string} str to upper case first word - * @return {string} uppercase first word string - */ -const ucword = str => ( - str.substr(0, 1).toUpperCase() + str.substr(1, str.length - 1) -) - -/** - * create actions on the fly - * @param {object} contract the contract object - * @param {object} jsonqlClient static version - * @param {boolean} [prefix=true] add prefix or not - */ -function getActions(contract, jsonqlClient, prefix = true) { - let actions = {} - const target = ['query', 'mutation', 'auth'] - for (let name in contract) { - if (target.indexOf(name) > -1) { - for (let resolverName in contract[name]) { - let actionName = prefix === false ? resolverName : name + ucword(resolverName) - actions[actionName] = (ctx, ...args) => { - return Reflect.apply(jsonqlClient[name], jsonqlClient, [resolverName].concat(args)) - .then(result => { - ctx.commit('addToResult', {name: actionName, result}) - return result - }) - .catch(error => { - ctx.commit('addToError', {name: actionName, error}) - throw new Error(error) - }) - } - } - } - } - return actions -} - -/** - * We export a function to generate the relevant code - * @param {object} Fly the fly object - * @param {object} config configuration with the contract - * @return {object} the Vuex store object - */ -function getJsonqlVuexModule(Fly, config) { - const { prefix, contract } = config // could be undefined but we want false boolean - const jsonqlClient = jsonqlStaticClient(Fly, config) - // just create the structure on the fly - return { - namespaced: true, - state: { - result: {}, - error: {} - }, - mutations: { - addToResult(state, { name, result }) { - state.result[name] = result - }, - addToError(state, { name, error}) { - state.error[name] = error - } - }, - // because jsonql are all async call, everything will be create as actions - actions: getActions(contract, jsonqlClient, prefix), - getters: { - getJsonqlResult: (state) => (name) => { - return state.result[name] - } - } - } -} - -export { getJsonqlVuexModule } -- Gitee From faaf748e3a6abbc9fc61dbf85380facb7a5ad0e5 Mon Sep 17 00:00:00 2001 From: joelchu Date: Sat, 22 Feb 2020 20:14:40 +0800 Subject: [PATCH 2/3] move the vuex module to the @jsonql/client --- packages/@jsonql/client/vuex.js | 76 +++++++++++++++++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 packages/@jsonql/client/vuex.js diff --git a/packages/@jsonql/client/vuex.js b/packages/@jsonql/client/vuex.js new file mode 100644 index 00000000..68e409e3 --- /dev/null +++ b/packages/@jsonql/client/vuex.js @@ -0,0 +1,76 @@ +// this is an experiemental generic module for vuex +import { jsonqlStaticClient } from './static' + +/** + * @param {string} str to upper case first word + * @return {string} uppercase first word string + */ +const ucword = str => ( + str.substr(0, 1).toUpperCase() + str.substr(1, str.length - 1) +) + +/** + * create actions on the fly + * @param {object} contract the contract object + * @param {object} jsonqlClient static version + * @param {boolean} [prefix=true] add prefix or not + */ +function getActions(contract, jsonqlClient, prefix = true) { + let actions = {} + const target = ['query', 'mutation', 'auth'] + for (let name in contract) { + if (target.indexOf(name) > -1) { + for (let resolverName in contract[name]) { + let actionName = prefix === false ? resolverName : name + ucword(resolverName) + actions[actionName] = (ctx, ...args) => { + return Reflect.apply(jsonqlClient[name], jsonqlClient, [resolverName].concat(args)) + .then(result => { + ctx.commit('addToResult', {name: actionName, result}) + return result + }) + .catch(error => { + ctx.commit('addToError', {name: actionName, error}) + throw new Error(error) + }) + } + } + } + } + return actions +} + +/** + * We export a function to generate the relevant code + * @param {object} Fly the fly object + * @param {object} config configuration with the contract + * @return {object} the Vuex store object + */ +function getJsonqlVuexModule(Fly, config) { + const { prefix, contract } = config // could be undefined but we want false boolean + const jsonqlClient = jsonqlStaticClient(Fly, config) + // just create the structure on the fly + return { + namespaced: true, + state: { + result: {}, + error: {} + }, + mutations: { + addToResult(state, { name, result }) { + state.result[name] = result + }, + addToError(state, { name, error}) { + state.error[name] = error + } + }, + // because jsonql are all async call, everything will be create as actions + actions: getActions(contract, jsonqlClient, prefix), + getters: { + getJsonqlResult: (state) => (name) => { + return state.result[name] + } + } + } +} + +export { getJsonqlVuexModule } -- Gitee From 253f3867ac82fa61017cd11d2e22e541d0acdd41 Mon Sep 17 00:00:00 2001 From: joelchu Date: Sat, 22 Feb 2020 20:18:35 +0800 Subject: [PATCH 3/3] move the vuex readme to @jsonql/client --- packages/@jsonql/client/README.md | 91 ++++++++++++++++++++++- packages/@jsonql/client/package.json | 5 +- packages/@jsonql/client/{ => vue}/vuex.js | 0 packages/http-client/README.md | 85 --------------------- 4 files changed, 92 insertions(+), 89 deletions(-) rename packages/@jsonql/client/{ => vue}/vuex.js (100%) diff --git a/packages/@jsonql/client/README.md b/packages/@jsonql/client/README.md index 3c685fb3..3a75700a 100644 --- a/packages/@jsonql/client/README.md +++ b/packages/@jsonql/client/README.md @@ -1,13 +1,100 @@ # @jsonql/client -> This is jsonql browser client comes with jsonql-client (http) and optional socket clients +> This is jsonql browser client comes with jsonql-client (http) and optional socket clients, plus various modules for ui frameworks ## Example Coming soon +## Vuex module + +We add a vuex store support in version 1.5.19 + +First create a new file (let say call it `jsonql.js`) + +```js +import contract from 'path/to/your/public-contract.json' +import { getJsonqlVuexModule } from '@jsonql/client/vue' +import Fly from 'flyio' + +const jsonqlModule = getJsonqlVuexModule(Fly, { contract }) + +export { jsonqlModule } +``` + +Now in your `store.js` where you define your Vuex store + +```js +import Vue from 'vue' +import Vuex from 'vuex' + +Vue.use(Vuex) + +import { jsonqlModule } from './jsonql' + +export default new Vuex.Store({ + state: {}, + mutations: {}, + actions: {}, + getters: {}, + modules: { + jsonqlModule + } +}) +``` + +This Vuex module is namespaced. In your component + +```html + + +``` + +You might be asking why the resolver name is different from the contract from `query.helloWorld` turn into `queryHelloWorld`. +We use their type to prefix each resolvers, so you might get `query`, `mutation`, `auth` etc. This is to avoid duplicated naming. +You can turn this off by passing a `prefix:false` in the `config` when you set up your store file: + +```js +// the import +const jsonqlModule = getJsonqlVuexModule(Fly, { contract, prefix: false }) +// the export +``` + +### getters getJsonqlResult + +You should notice there is a getter method call `getJsonqlResult` and you pass the resolver name (with prefix or not when you turn it off). +The reason is in the Vuex model, after we call the resolver, we store (commit) the result in our internal `result` state, and key with the resolver name. And whenever a new result return, it will get overwritten, because it's a flat object. + +Of course, you can simply call the actions and wait for the promise to resolve. You will get the same effect. + +### getters getJsonqlError + +Whenever an error happens, we do the same like success result, we commit to our internal `error` state, and you can use this getter to get it. +And after we commit, we will throw it again which wrap in a generic `Error`. So you can also catch it again. + + --- -https://jsonql.org +https://jsonql.org NEWBRAN LTD UK & T01SOURCE CN diff --git a/packages/@jsonql/client/package.json b/packages/@jsonql/client/package.json index 74c6a8b6..dc6a6074 100644 --- a/packages/@jsonql/client/package.json +++ b/packages/@jsonql/client/package.json @@ -1,6 +1,6 @@ { "name": "@jsonql/client", - "version": "0.2.0", + "version": "0.3.0", "description": "jsonql js http and socket client for browser with multiple API for different framework", "main": "dist/jsonql-client.cjs.js", "module": "index.js", @@ -11,7 +11,8 @@ "index.js", "static.js", "ws.js", - "io.js" + "io.js", + "vue" ], "scripts": { "test": "npm run build && npm run test:browser", diff --git a/packages/@jsonql/client/vuex.js b/packages/@jsonql/client/vue/vuex.js similarity index 100% rename from packages/@jsonql/client/vuex.js rename to packages/@jsonql/client/vue/vuex.js diff --git a/packages/http-client/README.md b/packages/http-client/README.md index 539724cf..d834c68b 100644 --- a/packages/http-client/README.md +++ b/packages/http-client/README.md @@ -123,91 +123,6 @@ See the following example (pretty close to our own test version as well) | storageKey | client side local storage key name | `String` | `CLIENT_STORAGE_KEY` | | debugOn | When enable, you will see debug message in your browser console | `Boolean` | `false` | -## Vuex module (1.5.19) - -We add a vuex store support in version 1.5.19 - -First create a new file (let say call it `jsonql.js`) - -```js -import contract from 'path/to/your/public-contract.json' -import { getJsonqlVuexModule } from 'jsonql-client/vuex' -import Fly from 'flyio' - -const jsonqlModule = getJsonqlVuexModule(Fly, { contract }) - -export { jsonqlModule } -``` - -Now in your `store.js` where you define your Vuex store - -```js -import Vue from 'vue' -import Vuex from 'vuex' - -Vue.use(Vuex) - -import { jsonqlModule } from './jsonql' - -export default new Vuex.Store({ - state: {}, - mutations: {}, - actions: {}, - getters: {}, - modules: { - jsonqlModule - } -}) -``` - -This Vuex module is namespaced. In your component - -```html - - -``` - -You might be asking why the resolver name is different from the contract from `query.helloWorld` turn into `queryHelloWorld`. -We use their type to prefix each resolvers, so you might get `query`, `mutation`, `auth` etc. This is to avoid duplicated naming. -You can turn this off by passing a `prefix:false` in the `config` when you set up your store file: - -```js -// the import -const jsonqlModule = getJsonqlVuexModule(Fly, { contract, prefix: false }) -// the export -``` - -### getters getJsonqlResult - -You should notice there is a getter method call `getJsonqlResult` and you pass the resolver name (with prefix or not when you turn it off). -The reason is in the Vuex model, after we call the resolver, we store (commit) the result in our internal `result` state, and key with the resolver name. And whenever a new result return, it will get overwritten, because it's a flat object. - -Of course, you can simply call the actions and wait for the promise to resolve. You will get the same effect. - -### getters getJsonqlError - -Whenever an error happens, we do the same like success result, we commit to our internal `error` state, and you can use this getter to get it. -And after we commit, we will throw it again which wrap in a generic `Error`. So you can also catch it again. --- -- Gitee