juststore 0.0.5 → 0.0.7

package/README.md

@@ -46,6 +46,121 @@ const store = createStore<AppState>('app', {
 })
 ```
 
+## Real-World Examples (GoDoxy Web UI)
+
+### Homepage navigation and search
+
+```tsx
+import { store } from '@/components/home/store'
+
+function HomepageFilters() {
+  const categories = store.homepageCategories.use()
+  const [activeCategory, setActiveCategory] = store.navigation.activeCategory.useState()
+  const query = store.searchQuery.useDebounce(150)
+
+  const visibleItems =
+    categories
+      .find(cat => cat.name === activeCategory)
+      ?.items.filter(item => item.name.toLowerCase().includes((query ?? '').toLowerCase())) ?? []
+
+  return (
+    <div>
+      <input
+        value={query ?? ''}
+        onChange={e => store.searchQuery.set(e.target.value)}
+        placeholder="Search services"
+      />
+      <div>
+        {categories.map(name => (
+          <button
+            key={name}
+            data-active={name === activeCategory}
+            onClick={() => setActiveCategory(name)}
+          >
+            {name}
+          </button>
+        ))}
+      </div>
+      <ul>
+        {visibleItems.map(item => (
+          <li key={item.name}>{item.name}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+```
+
+### Live route uptime sidebar
+
+```tsx
+import { useWebSocketApi } from '@/hooks/websocket'
+import type { RouteKey } from '@/components/routes/store'
+import { store } from '@/components/routes/store'
+import type { RouteUptimeAggregate, UptimeAggregate } from '@/lib/api'
+
+function RoutesUptimeProvider() {
+  useWebSocketApi<UptimeAggregate>({
+    endpoint: '/metrics/uptime',
+    query: { period: '1d' },
+    onMessage: uptime => {
+      const keys = uptime.data.map(route => route.alias as RouteKey)
+      store.set('routeKeys', keys.toSorted())
+      store.set(
+        'uptime',
+        keys.reduce(
+          (acc, key, index) => {
+            acc[key] = uptime.data[index] as RouteUptimeAggregate
+            return acc
+          },
+          {} as Record<RouteKey, RouteUptimeAggregate>
+        )
+      )
+    }
+  })
+
+  return null
+}
+```
+
+### Server metrics via WebSockets
+
+```tsx
+import { useWebSocketApi } from '@/hooks/websocket'
+import { store } from '@/components/servers/store'
+import type { MetricsPeriod, SystemInfoAggregate, SystemInfoAggregateMode } from '@/lib/api'
+
+const MODES: SystemInfoAggregateMode[] = [
+  'cpu_average',
+  'memory_usage',
+  'disks_read_speed',
+  'disks_write_speed',
+  'disks_iops',
+  'disk_usage',
+  'network_speed',
+  'network_transfer',
+  'sensor_temperature'
+]
+
+function SystemInfoGraphsProvider({ agent, period }: { agent: string; period: MetricsPeriod }) {
+  MODES.forEach(mode => {
+    useWebSocketApi<SystemInfoAggregate>({
+      endpoint: '/metrics/system_info',
+      query: {
+        period,
+        aggregate: mode,
+        agent_name: agent === 'Main Server' ? '' : agent
+      },
+      onMessage: data => {
+        store.systemInfoGraphs[agent]?.[period]?.[mode]?.set(data)
+      }
+    })
+  })
+
+  return null
+}
+```
+
 ## Usage
 
 ### Reading State

package/dist/impl.d.ts

@@ -1,5 +1,15 @@
 import type { FieldPath, FieldPathValue, FieldValues } from './path';
-export { getNestedValue, getSnapshot, joinPath, notifyListeners, produce, setLeaf, useDebounce, useObject, useSubscribe };
+export { getNestedValue, getSnapshot, isClass, isEqual, joinPath, notifyListeners, produce, setLeaf, useDebounce, useObject, useSubscribe };
+declare function isClass(value: unknown): boolean;
+/** Compare two values for equality
+ * @description
+ * - react-fast-compare for non-class instances
+ * - reference equality for class instances
+ * @param a - The first value to compare
+ * @param b - The second value to compare
+ * @returns True if the values are equal, false otherwise
+ */
+declare function isEqual(a: unknown, b: unknown): boolean;
 /**
  * Joins a namespace and path into a full key string.
  *

package/dist/impl.js

@@ -1,8 +1,37 @@
 import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
-import isEqual from 'react-fast-compare';
+import rfcIsEqual from 'react-fast-compare';
 import { localStorageDelete, localStorageGet, localStorageSet } from './local_storage';
-export { getNestedValue, getSnapshot, joinPath, notifyListeners, produce, setLeaf, useDebounce, useObject, useSubscribe };
+export { getNestedValue, getSnapshot, isClass, isEqual, joinPath, notifyListeners, produce, setLeaf, useDebounce, useObject, useSubscribe };
 const memoryStore = new Map();
+// check if the value is a class instance
+function isClass(value) {
+    if (value === null || value === undefined)
+        return false;
+    if (typeof value !== 'object')
+        return false;
+    const proto = Object.getPrototypeOf(value);
+    if (!proto || proto === Object.prototype || proto === Array.prototype)
+        return false;
+    const descriptors = Object.getOwnPropertyDescriptors(proto);
+    for (const key in descriptors) {
+        if (descriptors[key].get)
+            return true;
+    }
+    return false;
+}
+/** Compare two values for equality
+ * @description
+ * - react-fast-compare for non-class instances
+ * - reference equality for class instances
+ * @param a - The first value to compare
+ * @param b - The second value to compare
+ * @returns True if the values are equal, false otherwise
+ */
+function isEqual(a, b) {
+    if (isClass(a) || isClass(b))
+        return a === b;
+    return rfcIsEqual(a, b);
+}
 /**
  * Joins a namespace and path into a full key string.
  *
@@ -83,7 +112,7 @@ function setNestedValue(obj, path, value) {
     if (!path)
         return value;
     const segments = path.split('.');
-    const result = tryStructuredClone(obj);
+    const result = segments.length === 1 ? obj : tryStructuredClone(obj);
     let current = result ?? {};
     for (let i = 0; i < segments.length - 1; i++) {
         const segment = segments[i];

package/dist/node.js

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState } from 'react';
+import { isEqual } from './impl';
 export { createNode, createRootNode };
 /**
  * Creates the root proxy node for dynamic path access.
@@ -74,7 +75,12 @@ function createNode(storeApi, path, cache, extensions, from = unchanged, to = un
                 return (fn) => {
                     const initialValue = from(storeApi.value(path));
                     const [computedValue, setComputedValue] = useState(() => fn(initialValue));
-                    storeApi.subscribe(path, value => setComputedValue(fn(from(value))));
+                    storeApi.subscribe(path, value => {
+                        const newValue = fn(from(value));
+                        if (!isEqual(computedValue, newValue)) {
+                            setComputedValue(newValue);
+                        }
+                    });
                     return computedValue;
                 };
             }

package/dist/path.js

@@ -1,2 +1,26 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/*
+Copied and modified from https://github.com/react-hook-form/react-hook-form
+
+MIT License
+
+Copyright (c) 2019-present Beier(Bill) Luo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juststore",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "A small, expressive, and type-safe state management library for React.",
   "type": "module",
   "main": "dist/index.js",
@@ -8,7 +8,7 @@
   "author": "Yusing",
   "repository": {
     "type": "git",
-    "url": "https://github.com/yusing/juststore"
+    "url": "git+https://github.com/yusing/juststore.git"
   },
   "homepage": "https://github.com/yusing/juststore",
   "bugs": {
@@ -24,7 +24,7 @@
   "files": [
     "dist"
   ],
-  "license": "MIT",
+  "license": "AGPL-3.0-only",
   "keywords": [
     "state",
     "react",