direct-vuex - npm Package Compare versions

Comparing version 0.3.3 to 0.4.0

.vscode/settings.json

 {
   "[markdown]": {
-    "editor.tabSize": 4,
+    "editor.tabSize": 2,
   },
@@ -5,0 +5,0 @@ "editor.codeActionsOnSave": {

dist/direct-vuex.js

@@ -14,4 +14,5 @@ "use strict";
         original,
-        directActionContext: actionContextProvider(options)
     };
+    direct.directActionContext = actionContextProvider(direct);
+    direct.directRootActionContext = rootActionContextProvider(direct);
     original.direct = direct;
@@ -85,8 +86,8 @@ return direct;
 const actionContexts = new WeakMap();
-function actionContextProvider(rootOptions) {
-    return (options, originalContext) => {
-        let context = actionContexts.get(originalContext);
+function actionContextProvider(store) {
+    return (originalContext, options) => {
+        let context = actionContexts.get(originalContext.dispatch);
         if (!context) {
-            context = createActionContext(rootOptions, options, originalContext);
-            actionContexts.set(originalContext, context);
+            context = createActionContext(options, originalContext, store);
+            actionContexts.set(originalContext.dispatch, context);
         }
@@ -96,5 +97,3 @@ return context;
 }
-function createActionContext(rootOptions, options, originalContext) {
-    const rootCommit = (type, payload) => originalContext.commit(type, payload, { root: true });
-    const rootDispatch = (type, payload) => originalContext.dispatch(type, payload, { root: true });
+function createActionContext(options, originalContext, store) {
     return {
@@ -104,5 +103,5 @@ get rootState() {
         },
-        rootGetters: gettersFromOptions({}, rootOptions, originalContext.rootGetters),
-        rootCommit: commitFromOptions({}, rootOptions, rootCommit),
-        rootDispatch: dispatchFromOptions({}, rootOptions, rootDispatch),
+        rootGetters: store.getters,
+        rootCommit: store.commit,
+        rootDispatch: store.dispatch,
         get state() {
@@ -116,1 +115,27 @@ return originalContext.state;
 }
+function rootActionContextProvider(store) {
+    return (originalContext) => {
+        let context = actionContexts.get(originalContext.dispatch);
+        if (!context) {
+            context = createRootActionContext(originalContext, store);
+            actionContexts.set(originalContext.dispatch, context);
+        }
+        return context;
+    };
+}
+function createRootActionContext(originalContext, store) {
+    return {
+        get rootState() {
+            return originalContext.rootState;
+        },
+        rootGetters: store.getters,
+        rootCommit: store.commit,
+        rootDispatch: store.dispatch,
+        get state() {
+            return originalContext.state;
+        },
+        getters: store.getters,
+        commit: store.commit,
+        dispatch: store.dispatch
+    };
+}

package.json

 {
   "name": "direct-vuex",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "Just Vuex with typing. Compatible with the Vue 3 composition API.",
@@ -5,0 +5,0 @@ "author": "Paleo",

README.md

@@ -19,30 +19,34 @@ # direct-vuex
 
-    import Vue from "vue"
-    import Vuex from "vuex"
-    import { createDirectStore } from "direct-vuex"
+```ts
+import Vue from "vue"
+import Vuex from "vuex"
+import { createDirectStore } from "direct-vuex"
 
-    Vue.use(Vuex)
+Vue.use(Vuex)
 
-    const store = createDirectStore({
-      // … store implementation here …
-    } as const)
+const store = createDirectStore({
+  // … store implementation here …
+} as const)
 
-    export default store
-    export type AppStore = typeof store
+export default store
+export type AppStore = typeof store
 
-    declare module "vuex" {
-      interface Store<S> {
-        direct: AppStore
-      }
-    }
+declare module "vuex" {
+  interface Store<S> {
+    direct: AppStore
+  }
+}
+```
 
 The classic Vuex store is still accessible through the `store.original` property. We need it to initialize the Vue application:
 
-    import Vue from "vue"
-    import store from "./store"
+```ts
+import Vue from "vue"
+import store from "./store"
 
-    new Vue({
-      store: store.original, // Inject the classic Vuex store
-      // …
-    }).$mount("#app")
+new Vue({
+  store: store.original, // Inject the classic Vuex store
+  // …
+}).$mount("#app")
+```
 
@@ -53,15 +57,23 @@ ### Use typed wrappers from outside the store
 
-    const store = this.$store.direct
+```ts
+const store = this.$store.direct
+```
 
 Or, you can just import it:
 
-    import store from "./store"
+```ts
+import store from "./store"
+```
 
 Then, the old way to call an action:
 
-    store.dispatch("myModule/myAction", myPayload)
+```ts
+store.dispatch("myModule/myAction", myPayload)
+```
 
 … is replaced by the following wrapper:
 
-    store.dispatch.myModule.myAction(myPayload)
+```ts
+store.dispatch.myModule.myAction(myPayload)
+```
 
@@ -72,4 +84,6 @@ … which is fully typed.
 
-    store.getters.myModule.myGetter
-    store.commit.myModule.myMutation(myPayload)
+```ts
+store.getters.myModule.myGetter
+store.commit.myModule.myMutation(myPayload)
+```
 
@@ -80,19 +94,35 @@ Notice: The underlying Vuex store can be used simultaneously if you wish, through the injected `this.$store` or `store.original`.
 
-In the file where the store is created, add this line:
+In the file where the store is created, add these lines:
 
-    export const directActionContext = store.directActionContext;
+```ts
+export const directActionContext = store.directActionContext
+export const directRootActionContext = store.directRootActionContext
+```
 
 Here is an example on how to do in a module:
 
-    import { directActionContext } from "./store"
-    const myModule = {
-      actions: {
-        async myAction(context, payload) {
-          const { commit, state } = directActionContext(myModule, context)
-          // … Here, 'commit' and 'state' are typed.
-        }
-      }
+```ts
+import { directActionContext } from "./store"
+const myModule = {
+  actions: {
+    async myAction(context, payload) {
+      const { commit, state } = directActionContext(context, myModule)
+      // … Here, 'commit' and 'state' are typed.
     }
-    export default myModule
+  }
+}
+export default myModule
+```
 
+And the same example, but from the root store:
+
+```ts
+  actions: {
+    async myAction(context, payload) {
+      const { commit, state } = directRootActionContext(context)
+      // … Here, 'commit' and 'state' are typed.
+    }
+  }
+```
+
 ## Contribute
@@ -99,0 +129,0 @@

src/direct-vuex.ts

@@ -8,3 +8,3 @@ import Vuex, { ActionContext, Commit, Dispatch, Store } from "vuex"
 
-  const direct: ToDirectStore<O> = {
+  const direct = {
     get state() {
@@ -17,5 +17,7 @@ return original.state
     original,
-    directActionContext: actionContextProvider(options)
-  }
+  } as ToDirectStore<O>
 
+  direct.directActionContext = actionContextProvider(direct)
+  direct.directRootActionContext = rootActionContextProvider(direct)
+
   original.direct = direct
@@ -128,10 +130,10 @@ return direct
 
-const actionContexts = new WeakMap<ActionContext<any, any>, ReturnType<typeof createActionContext>>()
+const actionContexts = new WeakMap<any, ReturnType<typeof createActionContext>>()
 
-function actionContextProvider(rootOptions: StoreOptions) {
-  return (options: StoreOrModuleOptions, originalContext: ActionContext<any, any>) => {
-    let context = actionContexts.get(originalContext)
+function actionContextProvider(store: ToDirectStore<any>) {
+  return (originalContext: ActionContext<any, any>, options: StoreOrModuleOptions) => {
+    let context = actionContexts.get(originalContext.dispatch)
     if (!context) {
-      context = createActionContext(rootOptions, options, originalContext)
-      actionContexts.set(originalContext, context)
+      context = createActionContext(options, originalContext, store)
+      actionContexts.set(originalContext.dispatch, context)
     }
@@ -143,8 +145,6 @@ return context
 function createActionContext(
-  rootOptions: StoreOptions,
   options: StoreOrModuleOptions,
-  originalContext: ActionContext<any, any>
+  originalContext: ActionContext<any, any>,
+  store: ToDirectStore<any>
 ) {
-  const rootCommit: Commit = (type: string, payload?: any) => originalContext.commit(type, payload, { root: true })
-  const rootDispatch: Dispatch = (type: string, payload?: any) => originalContext.dispatch(type, payload, { root: true })
   return {
@@ -154,5 +154,5 @@ get rootState() {
     },
-    rootGetters: gettersFromOptions({}, rootOptions, originalContext.rootGetters),
-    rootCommit: commitFromOptions({}, rootOptions, rootCommit),
-    rootDispatch: dispatchFromOptions({}, rootOptions, rootDispatch),
+    rootGetters: store.getters,
+    rootCommit: store.commit,
+    rootDispatch: store.dispatch,
     get state() {
@@ -165,2 +165,33 @@ return originalContext.state
   }
-}
+}
+
+function rootActionContextProvider(store: ToDirectStore<any>) {
+  return (originalContext: ActionContext<any, any>) => {
+    let context = actionContexts.get(originalContext.dispatch)
+    if (!context) {
+      context = createRootActionContext(originalContext, store)
+      actionContexts.set(originalContext.dispatch, context)
+    }
+    return context
+  }
+}
+
+function createRootActionContext(
+  originalContext: ActionContext<any, any>,
+  store: ToDirectStore<any>
+) {
+  return {
+    get rootState() {
+      return originalContext.rootState
+    },
+    rootGetters: store.getters,
+    rootCommit: store.commit,
+    rootDispatch: store.dispatch,
+    get state() {
+      return originalContext.state
+    },
+    getters: store.getters,
+    commit: store.commit,
+    dispatch: store.dispatch
+  }
+}

types/direct-types.d.ts

@@ -12,4 +12,5 @@ import { Store, ActionContext } from "vuex"
   directActionContext: <P extends StoreOrModuleOptions>(
-    options: P, context: ActionContext<any, any>
+    context: ActionContext<any, any>, options: P
   ) => DirectActionContext<O, P>
+  directRootActionContext: (context: ActionContext<any, any>) => DirectActionContext<O, O>
 }
@@ -16,0 +17,0 @@

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

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

Improved metrics

Total package byte prevSize

28748

increased by5.1%

Lines of code

545

increased by11.22%

Number of lines in readme file

129

increased by30.3%

No dependency changes