vuex - npm Package Compare versions

Comparing version 4.0.0-alpha.1 to 4.0.0-beta.1

dist/logger.d.ts

@@ -1,5 +0,3 @@
-/**
- * Types for the logger plugin.
- * This file must be put alongside the JavaScript file of the logger.
- */
+// Types for the logger plugin. This file must be put alongside the bundled
+// JavaScript file of the logger.
 
@@ -13,4 +11,8 @@ import { Payload, Plugin } from "../types/index";
   mutationTransformer?: <P extends Payload>(mutation: P) => any;
+  actionFilter?: <P extends Payload>(action: P, state: S) => boolean;
+  actionTransformer?: <P extends Payload>(action: P) => any;
+  logMutations?: boolean;
+  logActions?: boolean;
 }
 
 export default function createLogger<S>(option?: LoggerOption<S>): Plugin<S>;

dist/logger.js

@@ -0,6 +1,12 @@
+/*!
+ /**
+  * vuex v4.0.0-alpha.1
+  * (c) 2020 Evan You
+  * @license MIT
+  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
-  (global = global || self, global.createVuexLogger = factory());
-}(this, function () { 'use strict';
+  (global = global || self, global.Vuex = factory());
+}(this, (function () { 'use strict';
 
@@ -28,5 +34,3 @@ /**
    */
-  function deepCopy (obj, cache) {
-    if ( cache === void 0 ) cache = [];
-
+  function deepCopy (obj, cache = []) {
     // just return if obj is immutable value
@@ -38,3 +42,3 @@ if (obj === null || typeof obj !== 'object') {
     // if obj is hit, it is in circular structure
-    var hit = find(cache, function (c) { return c.original === obj; });
+    const hit = find(cache, c => c.original === obj);
     if (hit) {
@@ -44,3 +48,3 @@ return hit.copy
 
-    var copy = Array.isArray(obj) ? [] : {};
+    const copy = Array.isArray(obj) ? [] : {};
     // put the copy into cache at first
@@ -50,6 +54,6 @@ // because we want to refer it in recursive deepCopy
       original: obj,
-      copy: copy
+      copy
     });
 
-    Object.keys(obj).forEach(function (key) {
+    Object.keys(obj).forEach(key => {
       copy[key] = deepCopy(obj[key], cache);
@@ -63,51 +67,82 @@ });
 
-  function createLogger (ref) {
-    if ( ref === void 0 ) ref = {};
-    var collapsed = ref.collapsed; if ( collapsed === void 0 ) collapsed = true;
-    var filter = ref.filter; if ( filter === void 0 ) filter = function (mutation, stateBefore, stateAfter) { return true; };
-    var transformer = ref.transformer; if ( transformer === void 0 ) transformer = function (state) { return state; };
-    var mutationTransformer = ref.mutationTransformer; if ( mutationTransformer === void 0 ) mutationTransformer = function (mut) { return mut; };
-    var logger = ref.logger; if ( logger === void 0 ) logger = console;
+  function createLogger ({
+    collapsed = true,
+    filter = (mutation, stateBefore, stateAfter) => true,
+    transformer = state => state,
+    mutationTransformer = mut => mut,
+    actionFilter = (action, state) => true,
+    actionTransformer = act => act,
+    logMutations = true,
+    logActions = true,
+    logger = console
+  } = {}) {
+    return store => {
+      let prevState = deepCopy(store.state);
 
-    return function (store) {
-      var prevState = deepCopy(store.state);
+      if (typeof logger === 'undefined') {
+        return
+      }
 
-      store.subscribe(function (mutation, state) {
-        if (typeof logger === 'undefined') {
-          return
-        }
-        var nextState = deepCopy(state);
+      if (logMutations) {
+        store.subscribe((mutation, state) => {
+          const nextState = deepCopy(state);
 
-        if (filter(mutation, prevState, nextState)) {
-          var time = new Date();
-          var formattedTime = " @ " + (pad(time.getHours(), 2)) + ":" + (pad(time.getMinutes(), 2)) + ":" + (pad(time.getSeconds(), 2)) + "." + (pad(time.getMilliseconds(), 3));
-          var formattedMutation = mutationTransformer(mutation);
-          var message = "mutation " + (mutation.type) + formattedTime;
-          var startMessage = collapsed
-            ? logger.groupCollapsed
-            : logger.group;
+          if (filter(mutation, prevState, nextState)) {
+            const formattedTime = getFormattedTime();
+            const formattedMutation = mutationTransformer(mutation);
+            const message = `mutation ${mutation.type}${formattedTime}`;
 
-          // render
-          try {
-            startMessage.call(logger, message);
-          } catch (e) {
-            console.log(message);
+            startMessage(logger, message, collapsed);
+            logger.log('%c prev state', 'color: #9E9E9E; font-weight: bold', transformer(prevState));
+            logger.log('%c mutation', 'color: #03A9F4; font-weight: bold', formattedMutation);
+            logger.log('%c next state', 'color: #4CAF50; font-weight: bold', transformer(nextState));
+            endMessage(logger);
           }
 
-          logger.log('%c prev state', 'color: #9E9E9E; font-weight: bold', transformer(prevState));
-          logger.log('%c mutation', 'color: #03A9F4; font-weight: bold', formattedMutation);
-          logger.log('%c next state', 'color: #4CAF50; font-weight: bold', transformer(nextState));
+          prevState = nextState;
+        });
+      }
 
-          try {
-            logger.groupEnd();
-          } catch (e) {
-            logger.log('—— log end ——');
+      if (logActions) {
+        store.subscribeAction((action, state) => {
+          if (actionFilter(action, state)) {
+            const formattedTime = getFormattedTime();
+            const formattedAction = actionTransformer(action);
+            const message = `action ${action.type}${formattedTime}`;
+
+            startMessage(logger, message, collapsed);
+            logger.log('%c action', 'color: #03A9F4; font-weight: bold', formattedAction);
+            endMessage(logger);
           }
-        }
+        });
+      }
+    }
+  }
 
-        prevState = nextState;
-      });
+  function startMessage (logger, message, collapsed) {
+    const startMessage = collapsed
+      ? logger.groupCollapsed
+      : logger.group;
+
+    // render
+    try {
+      startMessage.call(logger, message);
+    } catch (e) {
+      logger.log(message);
     }
   }
 
+  function endMessage (logger) {
+    try {
+      logger.groupEnd();
+    } catch (e) {
+      logger.log('—— log end ——');
+    }
+  }
+
+  function getFormattedTime () {
+    const time = new Date();
+    return ` @ ${pad(time.getHours(), 2)}:${pad(time.getMinutes(), 2)}:${pad(time.getSeconds(), 2)}.${pad(time.getMilliseconds(), 3)}`
+  }
+
   function repeat (str, times) {
@@ -123,2 +158,2 @@ return (new Array(times + 1)).join(str)
 
-}));
+})));

package.json

 {
   "name": "vuex",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-beta.1",
   "description": "state management for Vue.js",
-  "main": "dist/vuex.common.js",
-  "module": "dist/vuex.esm.js",
-  "unpkg": "dist/vuex.js",
-  "jsdelivr": "dist/vuex.js",
+  "main": "dist/vuex.cjs.js",
+  "module": "dist/vuex.esm-bundler.js",
+  "browser": "dist/vuex.esm-browser.js",
+  "unpkg": "dist/vuex.global.js",
+  "jsdelivr": "dist/vuex.global.js",
   "typings": "types/index.d.ts",
+  "sideEffects": false,
   "files": [
@@ -18,13 +20,13 @@ "dist",
     "dev": "node examples/server.js",
-    "dev:dist": "rollup -wm -c build/rollup.dev.config.js",
     "build": "npm run build:main && npm run build:logger",
-    "build:main": "node build/build.main.js",
-    "build:logger": "rollup -c build/rollup.logger.config.js",
+    "build:main": "node scripts/build-main.js",
+    "build:logger": "node scripts/build-logger.js",
     "lint": "eslint src test",
-    "test": "npm run lint && npm run test:unit && npm run test:ssr && npm run test:e2e",
-    "test:unit": "rollup -c build/rollup.dev.config.js && jasmine JASMINE_CONFIG_PATH=test/unit/jasmine.json",
+    "test": "npm run lint && npm run test:unit && npm run test:ssr && npm run test:types && npm run test:e2e",
+    "test:unit": "jasmine JASMINE_CONFIG_PATH=test/unit/jasmine.json",
     "test:e2e": "node test/e2e/runner.js",
-    "test:ssr": "rollup -c build/rollup.dev.config.js && cross-env VUE_ENV=server jasmine JASMINE_CONFIG_PATH=test/unit/jasmine.json",
+    "test:ssr": "cross-env VUE_ENV=server jasmine JASMINE_CONFIG_PATH=test/unit/jasmine.json",
     "test:types": "tsc -p types/test",
-    "release": "bash build/release.sh",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "release": "bash scripts/release.sh",
     "docs": "vuepress dev docs",
@@ -44,6 +46,11 @@ "docs:build": "vuepress build docs"
   "peerDependencies": {
-    "vue": "^3.0.0-alpha.8"
+    "vue": "3.0.0-beta.4"
   },
   "devDependencies": {
-    "@vue/compiler-sfc": "3.0.0-alpha.8",
+    "@rollup/plugin-buble": "^0.21.3",
+    "@rollup/plugin-commonjs": "^11.1.0",
+    "@rollup/plugin-node-resolve": "^7.1.3",
+    "@rollup/plugin-replace": "^2.3.1",
+    "@types/node": "^13.13.2",
+    "@vue/compiler-sfc": "3.0.0-beta.4",
     "babel-core": "^6.22.1",
@@ -54,3 +61,6 @@ "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.5.1",
-    "chromedriver": "^80.0.1",
+    "brotli": "^1.3.2",
+    "chalk": "^4.0.0",
+    "chromedriver": "^81.0.0",
+    "conventional-changelog-cli": "^2.0.31",
     "cross-env": "^5.2.0",
@@ -61,14 +71,14 @@ "cross-spawn": "^6.0.5",
     "eslint-plugin-vue-libs": "^3.0.0",
+    "execa": "^4.0.0",
     "express": "^4.14.1",
     "jasmine": "2.8.0",
     "jasmine-core": "2.8.0",
+    "jsdom": "^16.2.2",
     "nightwatch": "^1.3.1",
     "nightwatch-helpers": "^1.2.0",
-    "rollup": "^1.1.0",
-    "rollup-plugin-buble": "^0.19.6",
-    "rollup-plugin-replace": "^2.1.0",
-    "terser": "^3.17.0",
+    "rollup": "^2.7.2",
+    "rollup-plugin-terser": "^5.3.0",
     "todomvc-app-css": "^2.1.0",
-    "typescript": "^3.7.2",
-    "vue": "3.0.0-alpha.8",
+    "typescript": "^3.8.3",
+    "vue": "3.0.0-beta.4",
     "vue-loader": "16.0.0-alpha.3",
@@ -78,6 +88,6 @@ "vue-template-compiler": "^2.5.22",
     "vuepress-theme-vue": "^1.1.0",
-    "webpack": "^4.8.3",
-    "webpack-dev-middleware": "^1.10.0",
+    "webpack": "^4.43.0",
+    "webpack-dev-middleware": "^3.7.2",
     "webpack-hot-middleware": "^2.19.1"
   }
 }

README.md

@@ -40,3 +40,3 @@ # Vuex 4
 
-const app = createApp(Counter)
+const app = createApp(App)
 
@@ -48,4 +48,25 @@ app.use(store)
 
-## Kown issues
+### Typings for `ComponentCustomProperties`
 
+Vuex 4 removes its global typings for `this.$store` within Vue Component due to solving [issue #994](https://github.com/vuejs/vuex/issues/994). When using TypeScript, you must provide your own augment declaration.
+
+Please place the following code in your project to have `this.$store` working.
+
+```ts
+// vuex-shim.d.ts
+
+declare module "@vue/runtime-core" {
+  // Declare your own store states.
+  interface State {
+    count: number
+  }
+
+  interface ComponentCustomProperties {
+    $store: Store<State>;
+  }
+}
+```
+
+## Known issues
+
 - The code is kept as close to Vuex 3 code base as possible, and there're plenty of places where we should refactor. However, we are waiting for all of the test cases to pass before doing so (some tests require Vue 3 update).
@@ -56,6 +77,6 @@ - TypeScript support is not ready yet. Please use JS environment to test this for now.
 
-- Add TypeScript support
-- Make all unit test working
-- Refactor the codebase
-- Update the build system to align with Vue 3
+- ~Add TypeScript support~
+- ~Make all unit test working~
+- ~Refactor the codebase~
+- ~Update the build system to align with Vue 3~
 - Update docs

types/helpers.d.ts

@@ -1,2 +0,2 @@
-import Vue from 'vue';
+import { ComponentPublicInstance } from 'vue';
 import { Dispatch, Commit } from './index';
@@ -9,3 +9,3 @@
 type InlineMethod<T extends (fn: any, ...args: any[]) => any> = T extends (fn: any, ...args: infer Args) => infer R ? (...args: Args) => R : never
-type CustomVue = Vue & Record<string, any>;
+type CustomVue = ComponentPublicInstance & Record<string, any>;
 
@@ -12,0 +12,0 @@ interface Mapper<R> {

types/index.d.ts

@@ -1,2 +0,2 @@
-import _Vue, { WatchOptions } from "vue";
+import { App, WatchOptions, InjectionKey } from "vue";
 
@@ -16,2 +16,4 @@ // augment typings of Vue.js
 
+  install(app: App, injectKey?: InjectionKey<Store<any>>): void;
+
   replaceState(state: S): void;
@@ -22,4 +24,4 @@
 
-  subscribe<P extends MutationPayload>(fn: (mutation: P, state: S) => any): () => void;
-  subscribeAction<P extends ActionPayload>(fn: SubscribeActionOptions<P, S>): () => void;
+  subscribe<P extends MutationPayload>(fn: (mutation: P, state: S) => any, options?: SubscribeOptions): () => void;
+  subscribeAction<P extends ActionPayload>(fn: SubscribeActionOptions<P, S>, options?: SubscribeOptions): () => void;
   watch<T>(getter: (state: S, getters: any) => T, cb: (value: T, oldValue: T) => void, options?: WatchOptions): () => void;
@@ -33,2 +35,5 @@
 
+  hasModule(path: string): boolean;
+  hasModule(path: string[]): boolean;
+
   hotUpdate(options: {
@@ -42,3 +47,3 @@ actions?: ActionTree<S, S>;
 
-export declare function install(Vue: typeof _Vue): void;
+export function createStore<S>(options: StoreOptions<S>): Store<S>;
 
@@ -76,2 +81,6 @@ export interface Dispatch {
 
+export interface SubscribeOptions {
+  prepend?: boolean
+}
+
 export type ActionSubscriber<P, S> = (action: P, state: S) => any;
@@ -103,2 +112,3 @@
   strict?: boolean;
+  devtools?: boolean;
 }
@@ -148,3 +158,2 @@
   Store: typeof Store;
-  install: typeof install;
   mapState: typeof mapState,
@@ -151,0 +160,0 @@ mapMutations: typeof mapMutations,

types/vue.d.ts

@@ -5,15 +5,9 @@ /**
 
-import Vue, { ComponentOptions } from "vue";
+import { ComponentCustomOptions, ComponentCustomProperties } from "vue";
 import { Store } from "./index";
 
-declare module "vue/types/options" {
-  interface ComponentOptions<V extends Vue> {
+declare module "@vue/runtime-core" {
+  interface ComponentCustomOptions {
     store?: Store<any>;
   }
 }
-
-declare module "vue/types/vue" {
-  interface Vue {
-    $store: Store<any>;
-  }
-}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

176188

increased by9.83%

Number of package files

16

increased by6.67%

Lines of code

4539

increased by14.68%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

80

increased by35.59%

Number of low supply chain risk alerts

33

decreased by-36.54%

Worsened metrics

Dev dependency count

39

increased by25.81%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes