v-dict 2.0.2 → 2.0.4

package/README.md

@@ -5,7 +5,12 @@
  * @Description:
 -->
 
-# Vue3 Dict Manager
+# Vue3 & React Dict Manager
+
+## 目录
+
+- [Vue](#vue)
+- [React](#react)
 
 ## Installation
 
@@ -13,7 +18,7 @@
 npm i v-dict
 ```
 
-## Examples
+## Vue
 
 ### dict.ts
 
@@ -147,3 +152,85 @@ onMounted(async () => {
 })
 </script>
 ```
+
+## React
+
+### dict.ts
+
+```ts
+import { createDictManager, defineDictData } from 'v-dict/react'
+
+export const dm = createDictManager({
+  fetch: (code) =>
+    Promise.resolve([
+      { label: 'xx', value: 'xx' },
+      { label: 'xx', value: 'xx' }
+    ]),
+  extra: ({ map }) => {
+    return {
+      getLabel: (value: string) => map[value]?.label
+    }
+  }
+})
+
+export const useStatusDict = dm.defineDict('STATUS', {
+  data: defineDictData({
+    ENABLED: {
+      label: 'Enabled',
+      color: 'green'
+    },
+    DISABLED: {
+      label: 'Disabled',
+      color: 'red'
+    }
+  })
+})
+
+export const useRemoteStatusDict = dm.defineDict('REMOTE_STATUS', {
+  remote: true,
+  fetch: (code) =>
+    Promise.resolve([
+      { label: 'Enabled', value: 'ENABLED', color: 'green' },
+      { label: 'Disabled', value: 'DISABLED', color: 'red' }
+    ]),
+  extra: ({ map }) => {
+    return {
+      getItemDetail: (value: string) => map[value]
+    }
+  }
+})
+
+// clear one dict
+// dm.clear('REMOTE_STATUS')
+
+// clear all dicts
+// dm.clear()
+```
+
+### xx.tsx
+
+```tsx
+import { useEffect } from 'react'
+import { useRemoteStatusDict } from './dict'
+
+export default function Demo() {
+  const statusDict = useRemoteStatusDict({
+    // same as above
+    clone: false,
+    // same as above
+    immediate: true,
+    // same as above
+    refresh: false
+  })
+
+  return (
+    <div>
+      <div>{E.ENABLED}</div>
+      <div>{map[E.ENABLED]?.label}</div>
+      <div>{statusDict.getLabel(E.ENABLED)}</div>
+      <div>{statusDict.getItem(E.DISABLED)?.color}</div>
+      <div>{list.length}</div>
+    </div>
+  )
+}
+```

package/dist/react/index.cjs

@@ -143,10 +143,11 @@ function createDictManager(createDictManagerOptions = {}) {
   const listenersMap = /* @__PURE__ */ Object.create(null);
   function emitChange(code) {
     var _a;
-    const listeners = code ? (_a = listenersMap[code]) != null ? _a : [] : Object.values(listenersMap).flat();
-    for (let listener of listeners) {
-      listener();
-    }
+    const listeners = code ? (_a = listenersMap[code]) != null ? _a : /* @__PURE__ */ new Set() : Object.values(listenersMap).reduce((acc, set) => {
+      set.forEach((listener) => acc.add(listener));
+      return acc;
+    }, /* @__PURE__ */ new Set());
+    listeners.forEach((listener) => listener());
   }
   function clear(code) {
     var _a;
@@ -197,9 +198,10 @@ function createDictManager(createDictManagerOptions = {}) {
     }
     function subscribeMap(listener) {
       var _a;
-      listenersMap[code] = [...(_a = listenersMap[code]) != null ? _a : [], listener];
+      (_a = listenersMap[code]) != null ? _a : listenersMap[code] = /* @__PURE__ */ new Set();
+      listenersMap[code].add(listener);
       return () => {
-        listenersMap[code] = listenersMap[code].filter((l) => l !== listener);
+        listenersMap[code].delete(listener);
       };
     }
     function getMapSnapshot() {
@@ -239,11 +241,12 @@ function createDictManager(createDictManagerOptions = {}) {
       const loadPromiseRef = react.useRef(
         !clone ? globalLoadPromise : createPromise()
       );
-      const map = react.useSyncExternalStore(subscribeMap, getMapSnapshot);
+      const globalMap = react.useSyncExternalStore(subscribeMap, getMapSnapshot);
       const [clonedMap, setClonedMap] = react.useState(/* @__PURE__ */ new Map());
+      const map = !clone ? globalMap : clonedMap;
       const state = react.useMemo(
-        () => createStateFromMap(!clone ? map : clonedMap),
-        [clone, map, clonedMap]
+        () => createStateFromMap(map),
+        [map]
       );
       const load = react.useCallback((options) => {
         const oldLoadPromise = loadPromiseRef.current;
@@ -266,11 +269,11 @@ function createDictManager(createDictManagerOptions = {}) {
           emitChange(code);
           return;
         }
-        setClonedMap(map);
+        setClonedMap(/* @__PURE__ */ new Map());
       }, []);
       const getItem = react.useCallback((value) => {
         return value !== null && value !== void 0 ? state.map[value] : null;
-      }, []);
+      }, [state]);
       react.useEffect(() => {
         if (!remote || immediate) {
           if (clone) {

package/dist/react/index.js

@@ -14,10 +14,11 @@ function createDictManager(createDictManagerOptions = {}) {
   const listenersMap = /* @__PURE__ */ Object.create(null);
   function emitChange(code) {
     var _a;
-    const listeners = code ? (_a = listenersMap[code]) != null ? _a : [] : Object.values(listenersMap).flat();
-    for (let listener of listeners) {
-      listener();
-    }
+    const listeners = code ? (_a = listenersMap[code]) != null ? _a : /* @__PURE__ */ new Set() : Object.values(listenersMap).reduce((acc, set) => {
+      set.forEach((listener) => acc.add(listener));
+      return acc;
+    }, /* @__PURE__ */ new Set());
+    listeners.forEach((listener) => listener());
   }
   function clear(code) {
     var _a;
@@ -68,9 +69,10 @@ function createDictManager(createDictManagerOptions = {}) {
     }
     function subscribeMap(listener) {
       var _a;
-      listenersMap[code] = [...(_a = listenersMap[code]) != null ? _a : [], listener];
+      (_a = listenersMap[code]) != null ? _a : listenersMap[code] = /* @__PURE__ */ new Set();
+      listenersMap[code].add(listener);
       return () => {
-        listenersMap[code] = listenersMap[code].filter((l) => l !== listener);
+        listenersMap[code].delete(listener);
       };
     }
     function getMapSnapshot() {
@@ -110,11 +112,12 @@ function createDictManager(createDictManagerOptions = {}) {
       const loadPromiseRef = useRef(
         !clone ? globalLoadPromise : createPromise()
       );
-      const map = useSyncExternalStore(subscribeMap, getMapSnapshot);
+      const globalMap = useSyncExternalStore(subscribeMap, getMapSnapshot);
       const [clonedMap, setClonedMap] = useState(/* @__PURE__ */ new Map());
+      const map = !clone ? globalMap : clonedMap;
       const state = useMemo(
-        () => createStateFromMap(!clone ? map : clonedMap),
-        [clone, map, clonedMap]
+        () => createStateFromMap(map),
+        [map]
       );
       const load = useCallback((options) => {
         const oldLoadPromise = loadPromiseRef.current;
@@ -137,11 +140,11 @@ function createDictManager(createDictManagerOptions = {}) {
           emitChange(code);
           return;
         }
-        setClonedMap(map);
+        setClonedMap(/* @__PURE__ */ new Map());
       }, []);
       const getItem = useCallback((value) => {
         return value !== null && value !== void 0 ? state.map[value] : null;
-      }, []);
+      }, [state]);
       useEffect(() => {
         if (!remote || immediate) {
           if (clone) {

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "v-dict",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "type": "module",
   "description": "Vue3 & React Dict Manager",
   "repository": {
     "type": "git",
-    "url": "https://github.com/xuuui/v-dict"
+    "url": "https://github.com/rrryyi/v-dict"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "exports": {
     ".": {
@@ -39,11 +39,9 @@
     "vue",
     "react",
     "dict",
-    "dictionary",
-    "vue3",
-    "react-dict"
+    "dictionary"
   ],
-  "author": "",
+  "author": "rrryyi",
   "license": "MIT",
   "dependencies": {},
   "peerDependencies": {
@@ -57,7 +55,6 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "tsup": "^8.0.1",
-    "typescript": "^5.7.3",
-    "vue": "^3.4.10"
+    "typescript": "^5.7.3"
   }
 }