Skip to content

Commit

Permalink
feat: add inline namespace for global helpers (#58)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nolde
nolde authored Dec 19, 2021
1 parent e0416bc commit 97f2bd9
Show file tree
Hide file tree
Showing 8 changed files with 548 additions and 109 deletions.
15 changes: 14 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export default {

### Namespaced Usage Examples

#### `createNamespacedHelpers`
```js
import { createNamespacedHelpers } from 'vuex-composition-helpers';
const { useState, useActions } = createNamespacedHelpers('articles'); // specific module name
Expand Down Expand Up @@ -76,7 +77,7 @@ You can also import your store from outside the component, and create the helper
```js
import { createNamespacedHelpers } from 'vuex-composition-helpers';
import store from '../store'; // local store file
const { useState, useActions } = createNamespacedHelpers(store, 'articles'); // specific module name
import const { useState, useActions } = createNamespacedHelpers(store, 'articles'); // specific module name
const { fetch } = useActions(['fetch']);

export default {
Expand All @@ -96,6 +97,18 @@ export default {
}
```

#### Inline namespacing
```js
import { useState, useActions } from 'vuex-composition-helpers';

export default {
setup(props) {
const { article, comments } = useState('sections/blog', ['article', 'comments']);
return { article, comments }
}
}
```

### Typescript mappings

You can also supply typing information to each of the mapping functions to provide a fully typed mapping.
Expand Down
128 changes: 99 additions & 29 deletions src/global.ts
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,120 @@
import {Store} from 'vuex/types';
import {computed} from '@vue/composition-api';
import {computedGetter, getAction, getMutation, getStoreFromInstance, useMapping, ExtractGetterTypes, ExtractTypes, KnownKeys, RefTypes} from './util';
import {computedGetter, getAction, getMutation, getStoreFromInstance, useMapping, ExtractGetterTypes, ExtractTypes, KnownKeys, RefTypes, Namespace, Nullish} from './util';

function computedState(store: any, prop: string) {
return computed(() => store.state[prop]);
}

function computedNamespacedState(store: any, namespace: string, prop: string) {
let module = namespace.split('/').reduce((module, key) => module[key], store.state)
return computed(() => module[prop])
}

export function useStore<TState = any>() {
return getStoreFromInstance() as Store<TState>
}

export function useState<TState = any>(storeOrMap: Store<TState> | KnownKeys<TState>[], map?: KnownKeys<TState>[]): RefTypes<TState> {
let store = storeOrMap;

if (arguments.length === 1) {
map = store as KnownKeys<TState>[];
store = getStoreFromInstance();
export function useState<TState = any>(map: KnownKeys<TState>[]): RefTypes<TState>;
export function useState<TState = any>(storeOrNamespace: Store<any> | Namespace, map?: KnownKeys<TState>[]): RefTypes<TState>;
export function useState<TState = any>(store: Store<any> | Nullish, namespace?: Namespace, map?: KnownKeys<TState>[]): RefTypes<TState>;
export function useState<TState = any>(storeOrNamespace: KnownKeys<TState>[] | Store<any> | Namespace, namespaceOrMap?: KnownKeys<TState>[] | Namespace, map?: KnownKeys<TState>[]): RefTypes<TState> {
let realStore, realNamespace, realMap;
if (arguments.length >= 3) {
realStore = storeOrNamespace as Store<any> || getStoreFromInstance();
realNamespace = namespaceOrMap as string || null;
realMap = map as KnownKeys<TState>[] || null;
} else if (arguments.length === 2) {
if (typeof storeOrNamespace === 'string') {
realStore = getStoreFromInstance();
realNamespace = storeOrNamespace as string || null;
} else {
realStore = storeOrNamespace as Store<any> || getStoreFromInstance();
realNamespace = null
}
realMap = namespaceOrMap as KnownKeys<TState>[] || null;
} else {
realStore = getStoreFromInstance();
realNamespace = null;
realMap = storeOrNamespace as KnownKeys<TState>[] || null;
}
return useMapping(store, null, map, computedState);
return useMapping(realStore, realNamespace, realMap, !realNamespace ? computedState : computedNamespacedState);
}

export function useGetters<TGetters = any>(storeOrMap: Store<any> | KnownKeys<TGetters>[], map?: KnownKeys<TGetters>[]): ExtractGetterTypes<TGetters> {
let store = storeOrMap;
if (arguments.length === 1) {
map = store as KnownKeys<TGetters>[];
store = getStoreFromInstance();
export function useGetters<TGetters = any>(map: KnownKeys<TGetters>[]): ExtractGetterTypes<TGetters>;
export function useGetters<TGetters = any>(storeOrNamespace: Store<any> | Namespace, map?: KnownKeys<TGetters>[]): ExtractGetterTypes<TGetters>;
export function useGetters<TGetters = any>(store: Store<any> | Nullish, namespace?: Namespace, map?: KnownKeys<TGetters>[]): ExtractGetterTypes<TGetters>;
export function useGetters<TGetters = any>(storeOrNamespace: KnownKeys<TGetters>[] | Store<any> | Namespace, namespaceOrMap?: KnownKeys<TGetters>[] | Namespace, map?: KnownKeys<TGetters>[]): ExtractGetterTypes<TGetters> {
let realStore, realNamespace, realMap;
if (arguments.length >= 3) {
realStore = storeOrNamespace as Store<any> || getStoreFromInstance();
realNamespace = namespaceOrMap as string || null;
realMap = map as KnownKeys<TGetters>[] || null;
} else if (arguments.length === 2) {
if (typeof storeOrNamespace === 'string') {
realStore = getStoreFromInstance();
realNamespace = storeOrNamespace as string || null;
} else {
realStore = storeOrNamespace as Store<any> || getStoreFromInstance();
realNamespace = null
}
realMap = namespaceOrMap as KnownKeys<TGetters>[] || null;
} else {
realStore = getStoreFromInstance();
realNamespace = null;
realMap = storeOrNamespace as KnownKeys<TGetters>[] || null;
}
return useMapping(store, null, map, computedGetter);
return useMapping(realStore, realNamespace, realMap, computedGetter);
}

export function useMutations<TMutations = any>(storeOrMap: Store<any> | KnownKeys<TMutations>[], map?: KnownKeys<TMutations>[]): ExtractTypes<TMutations, Function> {
let store = storeOrMap;

if (arguments.length === 1) {
map = store as KnownKeys<TMutations>[];
store = getStoreFromInstance();
export function useMutations<TMutations = any>(map: KnownKeys<TMutations>[]): ExtractTypes<TMutations, Function>;
export function useMutations<TMutations = any>(storeOrNamespace: Store<any> | Namespace, map?: KnownKeys<TMutations>[]): ExtractTypes<TMutations, Function>;
export function useMutations<TMutations = any>(store: Store<any> | Nullish, namespace?: Namespace, map?: KnownKeys<TMutations>[]): ExtractTypes<TMutations, Function>;
export function useMutations<TMutations = any>(storeOrNamespace: KnownKeys<TMutations>[] | Store<any> | Namespace, namespaceOrMap?: KnownKeys<TMutations>[] | Namespace, map?: KnownKeys<TMutations>[]): ExtractTypes<TMutations, Function> {
let realStore, realNamespace, realMap;
if (arguments.length >= 3) {
realStore = storeOrNamespace as Store<any> || getStoreFromInstance();
realNamespace = namespaceOrMap as string || null;
realMap = map as KnownKeys<TMutations>[] || null;
} else if (arguments.length === 2) {
if (typeof storeOrNamespace === 'string') {
realStore = getStoreFromInstance();
realNamespace = storeOrNamespace as string || null;
} else {
realStore = storeOrNamespace as Store<any> || getStoreFromInstance();
realNamespace = null
}
realMap = namespaceOrMap as KnownKeys<TMutations>[] || null;
} else {
realStore = getStoreFromInstance();
realNamespace = null;
realMap = storeOrNamespace as KnownKeys<TMutations>[] || null;
}
return useMapping(store, null, map, getMutation);
return useMapping(realStore, realNamespace, realMap, getMutation);
}

export function useActions<TActions = any>(storeOrMap: Store<any> | KnownKeys<TActions>[], map?: KnownKeys<TActions>[]): ExtractTypes<TActions, Function> {
let store = storeOrMap;

if (arguments.length === 1) {
map = store as KnownKeys<TActions>[];
store = getStoreFromInstance();
export function useActions<TActions = any>(map: KnownKeys<TActions>[]): ExtractTypes<TActions, Function>;
export function useActions<TActions = any>(storeOrNamespace: Store<any> | Namespace, map?: KnownKeys<TActions>[]): ExtractTypes<TActions, Function>;
export function useActions<TActions = any>(store: Store<any> | Nullish, namespace?: Namespace, map?: KnownKeys<TActions>[]): ExtractTypes<TActions, Function>;
export function useActions<TActions = any>(storeOrNamespace: KnownKeys<TActions>[] | Store<any> | Namespace, namespaceOrMap?: KnownKeys<TActions>[] | Namespace, map?: KnownKeys<TActions>[]): ExtractTypes<TActions, Function> {
let realStore, realNamespace, realMap;
if (arguments.length >= 3) {
realStore = storeOrNamespace as Store<any> || getStoreFromInstance();
realNamespace = namespaceOrMap as string || null;
realMap = map as KnownKeys<TActions>[] || null;
} else if (arguments.length === 2) {
if (typeof storeOrNamespace === 'string') {
realStore = getStoreFromInstance();
realNamespace = storeOrNamespace as string || null;
} else {
realStore = storeOrNamespace as Store<any> || getStoreFromInstance();
realNamespace = null
}
realMap = namespaceOrMap as KnownKeys<TActions>[] || null;
} else {
realStore = getStoreFromInstance();
realNamespace = null;
realMap = storeOrNamespace as KnownKeys<TActions>[] || null;
}
return useMapping(store, null, map, getAction);
}
return useMapping(realStore, realNamespace, realMap, getAction);
}
79 changes: 11 additions & 68 deletions src/namespaced.ts
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,12 @@
import {computed} from '@vue/composition-api';
import {computedGetter, getAction, getMutation, getStoreFromInstance, useMapping, KnownKeys, RefTypes, ExtractTypes, ExtractGetterTypes} from './util';
import {Store} from 'vuex';
import {computed} from '@vue/composition-api';
import {computedGetter, getAction, getMutation, getStoreFromInstance, useMapping, KnownKeys, RefTypes, ExtractTypes, ExtractGetterTypes, Nullish} from './util';
import {useActions, useState, useGetters, useMutations} from './global'

export type Nullish = null | undefined;

function computedState(store: any, namespace: string, prop: string) {
let module = namespace.split('/').reduce((module, key) => module[key], store.state)
return computed(() => module[prop])
}

export function useNamespacedState<TState = any>(storeOrNamespace: Store<any> | string | Nullish, namespaceOrMap: string | KnownKeys<TState>[], map?: KnownKeys<TState>[]): RefTypes<TState> {
let store: Store<any>, namespace: string;

if (arguments.length === 2) {
store = getStoreFromInstance();
map = namespaceOrMap as KnownKeys<TState>[];
namespace = storeOrNamespace as string;
} else {
store = storeOrNamespace as Store<TState> || getStoreFromInstance();
namespace = namespaceOrMap as string;
}
return useMapping(store, namespace, map, computedState);
}

export function useNamespacedMutations<TMutations = any>(storeOrNamespace: Store<any> | string | Nullish, namespaceOrMap: string | KnownKeys<TMutations>[], map?: KnownKeys<TMutations>[]): ExtractTypes<TMutations, Function> {
let store: Store<any>, namespace: string;

if (arguments.length === 2) {
store = getStoreFromInstance();
map = namespaceOrMap as KnownKeys<TMutations>[];
namespace = storeOrNamespace as string;
} else {
store = storeOrNamespace as Store<any> || getStoreFromInstance();
namespace = namespaceOrMap as string;
}
return useMapping(store, namespace, map, getMutation);
}

export function useNamespacedActions<TActions = any>(storeOrNamespace: Store<any> | string | Nullish, namespaceOrMap: string | KnownKeys<TActions>[], map?: KnownKeys<TActions>[]): ExtractTypes<TActions, Function> {
let store: Store<any>, namespace: string;

if (arguments.length === 2) {
store = getStoreFromInstance();
map = namespaceOrMap as KnownKeys<TActions>[];
namespace = storeOrNamespace as string;
} else {
store = storeOrNamespace as Store<any> || getStoreFromInstance();
namespace = namespaceOrMap as string;
}
return useMapping(store, namespace, map, getAction);
}

export function useNamespacedGetters<TGetters = any>(storeOrNamespace: Store<any> | string | Nullish, namespaceOrMap: string | KnownKeys<TGetters>[], map?: KnownKeys<TGetters>[]): ExtractGetterTypes<TGetters> {
let store: Store<any>, namespace: string;

if (arguments.length === 2) {
store = getStoreFromInstance();
map = namespaceOrMap as KnownKeys<TGetters>[];
namespace = storeOrNamespace as string;
} else {
store = storeOrNamespace as Store<any> || getStoreFromInstance();
namespace = namespaceOrMap as string;
}
return useMapping(store, namespace, map, computedGetter);
}
export const useNamespacedActions = useActions
export const useNamespacedGetters = useGetters
export const useNamespacedMutations = useMutations
export const useNamespacedState = useState

export function createNamespacedHelpers<TState = any, TGetters = any, TActions = any, TMutations = any>(storeOrNamespace: Store<any> | string, namespace?: string):{
useState: (map?: KnownKeys<TState>[]) => RefTypes<TState>;
Expand All @@ -81,9 +24,9 @@ export function createNamespacedHelpers<TState = any, TGetters = any, TActions =
}
}
return {
useState: (map?: KnownKeys<TState>[]) => useNamespacedState(store, namespace as string, map),
useGetters: (map?: KnownKeys<TGetters>[]) => useNamespacedGetters(store, namespace as string, map),
useMutations: (map?: KnownKeys<TMutations>[]) => useNamespacedMutations(store, namespace as string, map),
useActions: (map?: KnownKeys<TActions>[]) => useNamespacedActions(store, namespace as string, map),
useState: (map?: KnownKeys<TState>[]) => useState(store, namespace as string, map),
useGetters: (map?: KnownKeys<TGetters>[]) => useGetters(store, namespace as string, map),
useMutations: (map?: KnownKeys<TMutations>[]) => useMutations(store, namespace as string, map),
useActions: (map?: KnownKeys<TActions>[]) => useActions(store, namespace as string, map),
}
}
4 changes: 4 additions & 0 deletions src/util.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ declare type InferGetterType<T> =
? ReturnType<T>
: any;

export declare type Nullish = null | undefined;

export declare type Namespace = string | Nullish;

export declare type ExtractTypes<O, TUnknown = any> = {
readonly [K in keyof O]: InferType<O[K], TUnknown>;
};
Expand Down
Loading

0 comments on commit 97f2bd9

Please sign in to comment.