@itinari/vue-saturn - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0-0

dist/cjs/index.d.ts

 import Vue from 'vue';
 import ApolloClient from 'apollo-client';
-import { mixin } from './mixin';
-import { SmartQuery, QueryOptions } from './SmartQuery';
-export { prefetchComponent, getStates } from './ssr';
-export default mixin;
+import { mixin, DollarApollo } from './mixin';
+import { QueryOptions } from './SmartQuery';
 declare module 'vue/types/options' {
     interface ComponentOptions<V extends Vue> {
         apolloClient?: ApolloClient<any>;
-        apollo?: {
-            [key: string]: QueryOptions;
-        };
+        apollo?: Record<string, QueryOptions<V>>;
     }
@@ -17,9 +13,6 @@ }
     interface Vue {
-        $apollo: {
-            client: any;
-            queries: {
-                [key: string]: SmartQuery<any>;
-            };
-        };
+        $apollo: DollarApollo;
     }
 }
+export { QueryOptions } from './SmartQuery';
+export default mixin;

dist/cjs/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var mixin_1 = require("./mixin");
-var ssr_1 = require("./ssr");
-exports.prefetchComponent = ssr_1.prefetchComponent;
-exports.getStates = ssr_1.getStates;
 exports.default = mixin_1.mixin;
 //# sourceMappingURL=index.js.map

dist/cjs/mixin.d.ts

 import Vue from 'vue';
+import { SmartQuery } from './SmartQuery';
+import ApolloClient from 'apollo-client';
+export declare type DollarApollo = {
+    client: ApolloClient<any>;
+    queries: Record<string, SmartQuery<any>>;
+};
 export declare const mixin: {
@@ -6,2 +12,3 @@ data(this: Vue): object;
     beforeDestroy(this: Vue): void;
+    serverPrefetch(this: Vue): Promise<void>;
 };

dist/cjs/mixin.js

@@ -35,3 +35,2 @@ "use strict";
                 ssr: _this.$isServer,
-                props: _this.$props,
                 prefetch: options.prefetch,
@@ -57,8 +56,25 @@ // Query Options
         Object.entries(this.$apollo.queries).forEach(function (_a) {
-            var _b = tslib_1.__read(_a, 2), key = _b[0], query = _b[1];
-            query.stop();
+            var _b = tslib_1.__read(_a, 2), key = _b[0], smartQuery = _b[1];
+            smartQuery.stop();
             delete _this.$apollo.queries[key];
         });
     },
+    serverPrefetch: function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var promises;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        promises = Object.values(this.$apollo.queries).map(function (smartQuery) {
+                            return smartQuery.prefetch();
+                        });
+                        return [4 /*yield*/, Promise.all(promises)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    },
 };
 //# sourceMappingURL=mixin.js.map

dist/cjs/SmartQuery.d.ts

 import Vue from 'vue';
+import { DocumentNode } from 'graphql';
 import { ApolloQueryResult, WatchQueryOptions } from 'apollo-client';
-export declare type QueryFunction = (this: any, context?: any) => any;
-export declare type VariablesFunction = (this: any, context?: any) => object;
-export declare type UpdateFunction = (this: any, context?: any) => any;
-export declare type SkipFunction = (this: any, context?: any) => boolean;
-export declare type QueryOptions = {
-    query: QueryFunction | any;
-    variables?: VariablesFunction | object;
-    update: UpdateFunction;
+export declare type QueryFunction<T extends Vue = Vue> = (this: T) => DocumentNode;
+export declare type VariablesFunction<T extends Vue = Vue, V = object> = (this: T) => V;
+export declare type UpdateFunction<T extends Vue = Vue> = (this: T, data: any) => any;
+export declare type SkipFunction<T extends Vue = Vue> = (this: T) => boolean;
+export declare type QueryOptions<T extends Vue = Vue, V = object> = {
+    query: QueryFunction<T> | DocumentNode;
+    variables?: VariablesFunction<T, V> | V;
+    update: UpdateFunction<T>;
     prefetch?: boolean;
-    skip?: SkipFunction | boolean;
+    skip?: SkipFunction<T> | boolean;
     loadingKey?: string;
@@ -19,3 +20,2 @@ } & Pick<WatchQueryOptions, Exclude<keyof WatchQueryOptions, 'query' | 'variables'>>;
     ssr: boolean;
-    props: object;
 } & QueryOptions;
@@ -28,4 +28,8 @@ export declare class SmartQuery<TCacheShape> {
     private unwatchProps;
-    private skipped;
     constructor(options: SmartQueryOptions);
+    private readonly skip;
+    private readonly variables;
+    private readonly query;
+    private readonly shouldWatchProps;
+    private readonly queryOptions;
     private init;
@@ -38,2 +42,3 @@ start(): void;
     private setLoading;
+    prefetch(): Promise<void>;
 }

dist/cjs/SmartQuery.js

@@ -11,13 +11,69 @@ "use strict";
         this.unwatchProps = null;
-        this.skipped = false;
         this.options = options;
         this.client = options.vm.$root.$options.apolloClient;
-        this.skipped = utils_1.resolveSkip(options.skip, options.props, undefined, options.vm);
+        if (this.options.ssr === true) {
+            return;
+        }
         this.start();
     }
+    Object.defineProperty(SmartQuery.prototype, "skip", {
+        get: function () {
+            if (typeof this.options.skip === 'function') {
+                return this.options.skip.call(this.options.vm);
+            }
+            return this.options.skip || false;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SmartQuery.prototype, "variables", {
+        get: function () {
+            if (typeof this.options.variables === 'function') {
+                return this.options.variables.call(this.options.vm);
+            }
+            return this.options.variables;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SmartQuery.prototype, "query", {
+        get: function () {
+            if (typeof this.options.query === 'function') {
+                return this.options.query.call(this.options.vm);
+            }
+            return this.options.query;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SmartQuery.prototype, "shouldWatchProps", {
+        get: function () {
+            return (typeof this.options.skip === 'function' ||
+                typeof this.options.query === 'function' ||
+                typeof this.options.variables === 'function');
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SmartQuery.prototype, "queryOptions", {
+        get: function () {
+            return {
+                context: this.options.context,
+                errorPolicy: this.options.errorPolicy,
+                fetchPolicy: this.options.fetchPolicy,
+                fetchResults: this.options.fetchResults,
+                metadata: this.options.metadata,
+                notifyOnNetworkStatusChange: this.options.notifyOnNetworkStatusChange,
+                pollInterval: this.options.pollInterval,
+                query: this.query,
+                variables: this.variables,
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
     SmartQuery.prototype.init = function () {
         var _this = this;
         if (this.observableQuery === null) {
-            var queryOptions = utils_1.resolveQueryOptions(this.options, this.options.props, undefined, this.options.vm);
-            this.observableQuery = this.client.watchQuery(queryOptions);
+            this.observableQuery = this.client.watchQuery(this.queryOptions);
             var result = this.observableQuery.currentResult();
@@ -29,3 +85,3 @@ this.setLoading(result.loading);
         }
-        if (this.options.ssr === false && this.subscription === null) {
+        if (this.subscription === null) {
             this.subscription = this.observableQuery.subscribe({
@@ -39,10 +95,6 @@ next: function (result) { return _this.setValue(result.data); },
         var _this = this;
-        var shouldWatchProps = typeof this.options.skip === 'function' ||
-            typeof this.options.query === 'function' ||
-            typeof this.options.variables === 'function';
-        if (this.options.ssr === false && shouldWatchProps === true) {
+        if (this.shouldWatchProps === true) {
             var handler = utils_1.debounce(function (_a) {
                 var skip = _a.skip, variables = _a.variables, query = _a.query;
-                _this.skipped = skip;
-                if (_this.skipped === true) {
+                if (skip === true) {
                     return;
@@ -59,6 +111,10 @@ }
             this.unwatchProps = this.options.vm.$watch(function () {
-                return utils_1.resolveProps(_this.options, _this.options.props, undefined, _this.options.vm);
+                return {
+                    skip: _this.skip,
+                    variables: _this.variables,
+                    query: _this.query,
+                };
             }, handler, { deep: true });
         }
-        if (this.skipped === true) {
+        if (this.skip === true) {
             return;
@@ -102,3 +158,3 @@ }
     SmartQuery.prototype.setValue = function (data) {
-        var value = this.options.update(data);
+        var value = this.options.update.call(this.options.vm, data);
         this.options.vm[this.options.key] = value;
@@ -113,2 +169,21 @@ this.setLoading(false);
     };
+    SmartQuery.prototype.prefetch = function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var result;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this.options.prefetch === false || this.skip === true) {
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, this.client.query(this.queryOptions)];
+                    case 1:
+                        result = _a.sent();
+                        this.setValue(result.data);
+                        this.setLoading(result.loading);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     return SmartQuery;
@@ -115,0 +190,0 @@ }());

dist/cjs/utils.d.ts

@@ -1,12 +0,1 @@
-import Vue from 'vue';
-import { WatchQueryOptions } from 'apollo-client';
 export declare function debounce<T extends Function>(fn: T, wait: number): T;
-export declare function resolveQuery(query: any, props: any, context?: any, vm?: Vue): any;
-export declare function resolveVariables(variables: Function | object | undefined, props: any, context?: any, vm?: Vue): object | undefined;
-export declare function resolveSkip(skip: Function | boolean | undefined, props: any, context?: any, vm?: Vue): boolean;
-export declare function resolveProps(options: any, props: any, context?: any, vm?: Vue): {
-    query: any;
-    variables: object | undefined;
-    skip: boolean;
-};
-export declare function resolveQueryOptions(options: any, props: any, context?: any, vm?: Vue): WatchQueryOptions;

dist/cjs/utils.js

@@ -21,46 +21,2 @@ "use strict";
 exports.debounce = debounce;
-function resolveQuery(query, props, context, vm) {
-    if (typeof query === 'function') {
-        return query.call(props, context, vm);
-    }
-    return query;
-}
-exports.resolveQuery = resolveQuery;
-function resolveVariables(variables, props, context, vm) {
-    if (typeof variables === 'function') {
-        return variables.call(props, context, vm);
-    }
-    return variables;
-}
-exports.resolveVariables = resolveVariables;
-function resolveSkip(skip, props, context, vm) {
-    if (typeof skip === 'function') {
-        return skip.call(props, context, vm);
-    }
-    return skip || false;
-}
-exports.resolveSkip = resolveSkip;
-function resolveProps(options, props, context, vm) {
-    return {
-        query: resolveQuery(options.query, props, context, vm),
-        variables: resolveVariables(options.variables, props, context, vm),
-        skip: resolveSkip(options.skip, props, context, vm),
-    };
-}
-exports.resolveProps = resolveProps;
-function resolveQueryOptions(options, props, context, vm) {
-    var _a = resolveProps(options, props, context, vm), query = _a.query, variables = _a.variables;
-    return {
-        context: options.context,
-        errorPolicy: options.errorPolicy,
-        fetchPolicy: options.fetchPolicy,
-        fetchResults: options.fetchResults,
-        metadata: options.metadata,
-        notifyOnNetworkStatusChange: options.notifyOnNetworkStatusChange,
-        pollInterval: options.pollInterval,
-        query: query,
-        variables: variables,
-    };
-}
-exports.resolveQueryOptions = resolveQueryOptions;
 //# sourceMappingURL=utils.js.map

dist/esm/index.js

 import { mixin } from './mixin';
-export { prefetchComponent, getStates } from './ssr';
 export default mixin;
 //# sourceMappingURL=index.js.map

dist/esm/mixin.js

@@ -29,3 +29,2 @@ import { SmartQuery } from './SmartQuery';
                 ssr: this.$isServer,
-                props: this.$props,
                 prefetch: options.prefetch,
@@ -49,8 +48,12 @@ // Query Options
     beforeDestroy() {
-        Object.entries(this.$apollo.queries).forEach(([key, query]) => {
-            query.stop();
+        Object.entries(this.$apollo.queries).forEach(([key, smartQuery]) => {
+            smartQuery.stop();
             delete this.$apollo.queries[key];
         });
     },
+    async serverPrefetch() {
+        const promises = Object.values(this.$apollo.queries).map((smartQuery) => smartQuery.prefetch());
+        await Promise.all(promises);
+    },
 };
 //# sourceMappingURL=mixin.js.map

dist/esm/SmartQuery.js

@@ -1,2 +0,2 @@
-import { resolveSkip, resolveQueryOptions, debounce, resolveProps } from './utils';
+import { debounce } from './utils';
 export class SmartQuery {
@@ -8,12 +8,48 @@ // Call on created
         this.unwatchProps = null;
-        this.skipped = false;
         this.options = options;
         this.client = options.vm.$root.$options.apolloClient;
-        this.skipped = resolveSkip(options.skip, options.props, undefined, options.vm);
+        if (this.options.ssr === true) {
+            return;
+        }
         this.start();
     }
+    get skip() {
+        if (typeof this.options.skip === 'function') {
+            return this.options.skip.call(this.options.vm);
+        }
+        return this.options.skip || false;
+    }
+    get variables() {
+        if (typeof this.options.variables === 'function') {
+            return this.options.variables.call(this.options.vm);
+        }
+        return this.options.variables;
+    }
+    get query() {
+        if (typeof this.options.query === 'function') {
+            return this.options.query.call(this.options.vm);
+        }
+        return this.options.query;
+    }
+    get shouldWatchProps() {
+        return (typeof this.options.skip === 'function' ||
+            typeof this.options.query === 'function' ||
+            typeof this.options.variables === 'function');
+    }
+    get queryOptions() {
+        return {
+            context: this.options.context,
+            errorPolicy: this.options.errorPolicy,
+            fetchPolicy: this.options.fetchPolicy,
+            fetchResults: this.options.fetchResults,
+            metadata: this.options.metadata,
+            notifyOnNetworkStatusChange: this.options.notifyOnNetworkStatusChange,
+            pollInterval: this.options.pollInterval,
+            query: this.query,
+            variables: this.variables,
+        };
+    }
     init() {
         if (this.observableQuery === null) {
-            const queryOptions = resolveQueryOptions(this.options, this.options.props, undefined, this.options.vm);
-            this.observableQuery = this.client.watchQuery(queryOptions);
+            this.observableQuery = this.client.watchQuery(this.queryOptions);
             const result = this.observableQuery.currentResult();
@@ -25,3 +61,3 @@ this.setLoading(result.loading);
         }
-        if (this.options.ssr === false && this.subscription === null) {
+        if (this.subscription === null) {
             this.subscription = this.observableQuery.subscribe({
@@ -34,9 +70,5 @@ next: (result) => this.setValue(result.data),
     start() {
-        const shouldWatchProps = typeof this.options.skip === 'function' ||
-            typeof this.options.query === 'function' ||
-            typeof this.options.variables === 'function';
-        if (this.options.ssr === false && shouldWatchProps === true) {
+        if (this.shouldWatchProps === true) {
             const handler = debounce(({ skip, variables, query }) => {
-                this.skipped = skip;
-                if (this.skipped === true) {
+                if (skip === true) {
                     return;
@@ -53,6 +85,10 @@ }
             this.unwatchProps = this.options.vm.$watch(() => {
-                return resolveProps(this.options, this.options.props, undefined, this.options.vm);
+                return {
+                    skip: this.skip,
+                    variables: this.variables,
+                    query: this.query,
+                };
             }, handler, { deep: true });
         }
-        if (this.skipped === true) {
+        if (this.skip === true) {
             return;
@@ -88,3 +124,3 @@ }
     setValue(data) {
-        const value = this.options.update(data);
+        const value = this.options.update.call(this.options.vm, data);
         this.options.vm[this.options.key] = value;
@@ -99,3 +135,11 @@ this.setLoading(false);
     }
+    async prefetch() {
+        if (this.options.prefetch === false || this.skip === true) {
+            return;
+        }
+        const result = await this.client.query(this.queryOptions);
+        this.setValue(result.data);
+        this.setLoading(result.loading);
+    }
 }
 //# sourceMappingURL=SmartQuery.js.map

dist/esm/utils.js

@@ -13,41 +13,2 @@ export function debounce(fn, wait) {
 }
-export function resolveQuery(query, props, context, vm) {
-    if (typeof query === 'function') {
-        return query.call(props, context, vm);
-    }
-    return query;
-}
-export function resolveVariables(variables, props, context, vm) {
-    if (typeof variables === 'function') {
-        return variables.call(props, context, vm);
-    }
-    return variables;
-}
-export function resolveSkip(skip, props, context, vm) {
-    if (typeof skip === 'function') {
-        return skip.call(props, context, vm);
-    }
-    return skip || false;
-}
-export function resolveProps(options, props, context, vm) {
-    return {
-        query: resolveQuery(options.query, props, context, vm),
-        variables: resolveVariables(options.variables, props, context, vm),
-        skip: resolveSkip(options.skip, props, context, vm),
-    };
-}
-export function resolveQueryOptions(options, props, context, vm) {
-    const { query, variables } = resolveProps(options, props, context, vm);
-    return {
-        context: options.context,
-        errorPolicy: options.errorPolicy,
-        fetchPolicy: options.fetchPolicy,
-        fetchResults: options.fetchResults,
-        metadata: options.metadata,
-        notifyOnNetworkStatusChange: options.notifyOnNetworkStatusChange,
-        pollInterval: options.pollInterval,
-        query: query,
-        variables: variables,
-    };
-}
 //# sourceMappingURL=utils.js.map

dist/typings/index.d.ts

 import Vue from 'vue';
 import ApolloClient from 'apollo-client';
-import { mixin } from './mixin';
-import { SmartQuery, QueryOptions } from './SmartQuery';
-export { prefetchComponent, getStates } from './ssr';
-export default mixin;
+import { mixin, DollarApollo } from './mixin';
+import { QueryOptions } from './SmartQuery';
 declare module 'vue/types/options' {
     interface ComponentOptions<V extends Vue> {
         apolloClient?: ApolloClient<any>;
-        apollo?: {
-            [key: string]: QueryOptions;
-        };
+        apollo?: Record<string, QueryOptions<V>>;
     }
@@ -17,9 +13,6 @@ }
     interface Vue {
-        $apollo: {
-            client: any;
-            queries: {
-                [key: string]: SmartQuery<any>;
-            };
-        };
+        $apollo: DollarApollo;
     }
 }
+export { QueryOptions } from './SmartQuery';
+export default mixin;

dist/typings/mixin.d.ts

 import Vue from 'vue';
+import { SmartQuery } from './SmartQuery';
+import ApolloClient from 'apollo-client';
+export declare type DollarApollo = {
+    client: ApolloClient<any>;
+    queries: Record<string, SmartQuery<any>>;
+};
 export declare const mixin: {
@@ -6,2 +12,3 @@ data(this: Vue): object;
     beforeDestroy(this: Vue): void;
+    serverPrefetch(this: Vue): Promise<void>;
 };

dist/typings/SmartQuery.d.ts

 import Vue from 'vue';
+import { DocumentNode } from 'graphql';
 import { ApolloQueryResult, WatchQueryOptions } from 'apollo-client';
-export declare type QueryFunction = (this: any, context?: any) => any;
-export declare type VariablesFunction = (this: any, context?: any) => object;
-export declare type UpdateFunction = (this: any, context?: any) => any;
-export declare type SkipFunction = (this: any, context?: any) => boolean;
-export declare type QueryOptions = {
-    query: QueryFunction | any;
-    variables?: VariablesFunction | object;
-    update: UpdateFunction;
+export declare type QueryFunction<T extends Vue = Vue> = (this: T) => DocumentNode;
+export declare type VariablesFunction<T extends Vue = Vue, V = object> = (this: T) => V;
+export declare type UpdateFunction<T extends Vue = Vue> = (this: T, data: any) => any;
+export declare type SkipFunction<T extends Vue = Vue> = (this: T) => boolean;
+export declare type QueryOptions<T extends Vue = Vue, V = object> = {
+    query: QueryFunction<T> | DocumentNode;
+    variables?: VariablesFunction<T, V> | V;
+    update: UpdateFunction<T>;
     prefetch?: boolean;
-    skip?: SkipFunction | boolean;
+    skip?: SkipFunction<T> | boolean;
     loadingKey?: string;
@@ -19,3 +20,2 @@ } & Pick<WatchQueryOptions, Exclude<keyof WatchQueryOptions, 'query' | 'variables'>>;
     ssr: boolean;
-    props: object;
 } & QueryOptions;
@@ -28,4 +28,8 @@ export declare class SmartQuery<TCacheShape> {
     private unwatchProps;
-    private skipped;
     constructor(options: SmartQueryOptions);
+    private readonly skip;
+    private readonly variables;
+    private readonly query;
+    private readonly shouldWatchProps;
+    private readonly queryOptions;
     private init;
@@ -38,2 +42,3 @@ start(): void;
     private setLoading;
+    prefetch(): Promise<void>;
 }

dist/typings/utils.d.ts

@@ -1,12 +0,1 @@
-import Vue from 'vue';
-import { WatchQueryOptions } from 'apollo-client';
 export declare function debounce<T extends Function>(fn: T, wait: number): T;
-export declare function resolveQuery(query: any, props: any, context?: any, vm?: Vue): any;
-export declare function resolveVariables(variables: Function | object | undefined, props: any, context?: any, vm?: Vue): object | undefined;
-export declare function resolveSkip(skip: Function | boolean | undefined, props: any, context?: any, vm?: Vue): boolean;
-export declare function resolveProps(options: any, props: any, context?: any, vm?: Vue): {
-    query: any;
-    variables: object | undefined;
-    skip: boolean;
-};
-export declare function resolveQueryOptions(options: any, props: any, context?: any, vm?: Vue): WatchQueryOptions;

package.json

 {
   "name": "@itinari/vue-saturn",
-  "version": "1.1.0",
+  "version": "2.0.0-0",
   "description": "VueJS Apollo/GraphQL integration",
@@ -39,15 +39,16 @@ "main": "dist/cjs/index.js",
   "devDependencies": {
-    "@types/graphql": "^0.13.4",
-    "@types/node": "^10.12.0",
-    "apollo-client": "^2.4.2",
-    "eslint": "^5.7.0",
-    "eslint-config-google": "^0.11.0",
-    "eslint-plugin-typescript": "^0.12.0",
-    "graphql": "^0.13.2",
+    "@types/graphql": "^14.0.7",
+    "@types/node": "^10.12.26",
+    "@typescript-eslint/eslint-plugin": "^1.3.0",
+    "@typescript-eslint/parser": "^1.3.0",
+    "acorn": "^6.1.0",
+    "apollo-client": "^2.4.13",
+    "eslint": "^5.14.0",
+    "eslint-config-google": "^0.12.0",
+    "graphql": "^14.1.1",
     "tslib": "^1.9.3",
-    "typescript": "^3.1.3",
-    "typescript-eslint-parser": "^20.0.0",
-    "vue": "^2.5.17",
-    "vue-router": "^3.0.1"
+    "typescript": "^3.3.3",
+    "vue": "^2.6.6",
+    "vue-router": "^3.0.2"
   }
 }

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

55677

decreased by-17.06%

Dev dependency count

13

increased by8.33%

Number of package files

27

decreased by-18.18%

Lines of code

640

decreased by-11.11%

Number of low quality alerts

2

increased by100%

No dependency changes