@statezero/core 0.1.30 → 0.1.32

package/dist/adaptors/react/composables.d.ts

@@ -1 +1,2 @@
 export function useQueryset(querysetFactory: any): any;
+export const querysets: Map<any, any>;

package/dist/adaptors/react/composables.js

@@ -1,4 +1,56 @@
+import { useState, useEffect, useRef } from "react";
+import { syncManager } from "../../syncEngine/sync";
+import { v7 } from "uuid";
+syncManager.followAllQuerysets = false;
+export const querysets = new Map(); // Map of composableId -> queryset
+function updateSyncManager() {
+    // Get unique querysets from all active composables
+    const uniqueQuerysets = new Set(querysets.values());
+    syncManager.followedQuerysets = uniqueQuerysets;
+}
 export function useQueryset(querysetFactory) {
-    console.warn("React environments are not currently supported");
-    return querysetFactory;
+    const composableIdRef = useRef(v7());
+    const lastQuerysetRef = useRef(null);
+    const lastSemanticKeyRef = useRef(null);
+    const [, forceUpdate] = useState(0);
+    // Generate the queryset
+    const result = querysetFactory();
+    const original = result?.original || result;
+    const queryset = original?.queryset || original;
+    // Update tracking if queryset changed (compare by semantic key for stability)
+    const semanticKey = queryset?.semanticKey;
+    const lastSemanticKeyRef = useRef(null);
+    useEffect(() => {
+        if (lastSemanticKeyRef.current !== semanticKey) {
+            querysets.set(composableIdRef.current, queryset);
+            updateSyncManager();
+            lastSemanticKeyRef.current = semanticKey;
+            lastQuerysetRef.current = queryset;
+        }
+    }, [semanticKey, queryset]);
+    // Cleanup on unmount
+    useEffect(() => {
+        const composableId = composableIdRef.current;
+        return () => {
+            querysets.delete(composableId);
+            updateSyncManager();
+        };
+    }, []);
+    // Force re-render when queryset updates
+    useEffect(() => {
+        if (!result)
+            return;
+        // This will be triggered by the QuerySetAdaptor when data changes
+        const handleUpdate = () => {
+            forceUpdate((x) => x + 1);
+        };
+        // Attach update listener to the wrapped queryset (unconditionally)
+        result._reactUpdateHandler = handleUpdate;
+        return () => {
+            if (result) {
+                result._reactUpdateHandler = null;
+            }
+        };
+    }, [result]);
+    return result;
 }

package/dist/adaptors/react/index.d.ts

@@ -1 +1,2 @@
-export { useQueryset } from "./composables.js";
+export { useQueryset, querysets } from "./composables.js";
+export { ModelAdaptor, QuerySetAdaptor, MetricAdaptor } from "./reactivity.js";

package/dist/adaptors/react/index.js

@@ -1 +1,5 @@
-export { useQueryset } from './composables.js';
+export { useQueryset, querysets } from "./composables.js";
+export { ModelAdaptor, QuerySetAdaptor, MetricAdaptor } from "./reactivity.js";
+// src/react-entry.js
+import { ModelAdaptor, QuerySetAdaptor, MetricAdaptor, useQueryset, querysets, } from "./adaptors/react/index.js";
+export { ModelAdaptor, QuerySetAdaptor, MetricAdaptor, useQueryset, querysets };

package/dist/adaptors/react/reactivity.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Adapts a model instance for React by wrapping it with event listeners
+ * that trigger React re-renders when the model updates.
+ *
+ * @param {Object} modelInstance - An instance of a model class with static modelName and primaryKeyField
+ * @returns {Object} The model instance with React update capabilities
+ */
+export function ModelAdaptor(modelInstance: Object): Object;
+/**
+ * Adapts a queryset for React and sets up event handling for queryset updates
+ *
+ * @param {Object} liveQuerySet - A LiveQueryset instance
+ * @returns {Array} The reactive queryset array
+ */
+export function QuerySetAdaptor(liveQuerySet: Object): any[];
+/**
+ * Adapts a metric for React and sets up event handling for metric updates
+ *
+ * @param {Object} metric - A metric instance
+ * @returns {Object} The reactive metric wrapper
+ */
+export function MetricAdaptor(metric: Object): Object;

package/dist/adaptors/react/reactivity.js

@@ -0,0 +1,145 @@
+import { modelEventEmitter, querysetEventEmitter, metricEventEmitter, } from "../../syncEngine/stores/reactivity.js";
+import { initEventHandler } from "../../syncEngine/stores/operationEventHandlers.js";
+import { isEqual, isNil } from "lodash-es";
+import hash from "object-hash";
+initEventHandler(); // Initialize event handler for model events
+const wrappedQuerysetCache = new Map();
+const wrappedMetricCache = new Map();
+/**
+ * Adapts a model instance for React by wrapping it with event listeners
+ * that trigger React re-renders when the model updates.
+ *
+ * @param {Object} modelInstance - An instance of a model class with static modelName and primaryKeyField
+ * @returns {Object} The model instance with React update capabilities
+ */
+export function ModelAdaptor(modelInstance) {
+    const modelClass = modelInstance.constructor;
+    const modelName = modelClass.modelName;
+    const configKey = modelClass.configKey;
+    const pkField = modelClass.primaryKeyField;
+    // Create a wrapper that maintains the original instance
+    const wrapper = Object.create(modelInstance);
+    wrapper._reactUpdateHandler = null;
+    wrapper._reactVersion = 0;
+    const eventName = `${configKey}::${modelName}::render`;
+    // Handler triggers React update when this instance updates
+    const renderHandler = (eventData) => {
+        if (eventData.pk === modelInstance[pkField]) {
+            wrapper._reactVersion++;
+            if (wrapper._reactUpdateHandler) {
+                wrapper._reactUpdateHandler();
+            }
+        }
+    };
+    // Subscribe to model events indefinitely
+    modelEventEmitter.on(eventName, renderHandler);
+    // Store the cleanup function
+    wrapper._cleanup = () => {
+        modelEventEmitter.off(eventName, renderHandler);
+    };
+    return wrapper;
+}
+/**
+ * Adapts a queryset for React and sets up event handling for queryset updates
+ *
+ * @param {Object} liveQuerySet - A LiveQueryset instance
+ * @returns {Array} The reactive queryset array
+ */
+export function QuerySetAdaptor(liveQuerySet) {
+    const queryset = liveQuerySet?.queryset;
+    const modelName = queryset?.ModelClass?.modelName;
+    const configKey = queryset?.ModelClass?.configKey;
+    if (isNil(queryset) || isNil(modelName)) {
+        throw new Error(`liveQuerySet ${JSON.stringify(liveQuerySet)} had null qs: ${queryset} or model: ${modelName}`);
+    }
+    // Use the semantic key if available
+    const cacheKey = queryset.semanticKey;
+    // Check the cache first
+    if (cacheKey && wrappedQuerysetCache.has(cacheKey)) {
+        return wrappedQuerysetCache.get(cacheKey);
+    }
+    const querysetAst = queryset.build();
+    // Create wrapper array that extends the live queryset
+    const wrapper = [...liveQuerySet];
+    wrapper.original = liveQuerySet;
+    wrapper._reactUpdateHandler = null;
+    wrapper._reactVersion = 0;
+    const eventName = `${configKey}::${modelName}::queryset::render`;
+    // Handler updates array and triggers React update when this queryset updates
+    const renderHandler = (eventData) => {
+        if (eventData && eventData.ast && isEqual(querysetAst, eventData.ast)) {
+            // Update the wrapper array
+            wrapper.length = 0;
+            wrapper.push(...liveQuerySet);
+            wrapper._reactVersion++;
+            // Trigger React update if handler is set
+            if (wrapper._reactUpdateHandler) {
+                wrapper._reactUpdateHandler();
+            }
+        }
+    };
+    // Subscribe to queryset events indefinitely
+    querysetEventEmitter.on(eventName, renderHandler);
+    // Store cleanup function
+    wrapper._cleanup = () => {
+        querysetEventEmitter.off(eventName, renderHandler);
+    };
+    // Cache if not empty (following Vue's pattern for stability)
+    if (cacheKey && liveQuerySet && liveQuerySet.length > 0) {
+        wrappedQuerysetCache.set(cacheKey, wrapper);
+    }
+    return wrapper;
+}
+/**
+ * Adapts a metric for React and sets up event handling for metric updates
+ *
+ * @param {Object} metric - A metric instance
+ * @returns {Object} The reactive metric wrapper
+ */
+export function MetricAdaptor(metric) {
+    const queryset = metric.queryset;
+    const modelName = queryset?.ModelClass?.modelName;
+    const configKey = queryset?.ModelClass?.configKey;
+    const querysetAst = queryset.build();
+    // Create a cache key based on metric properties
+    const cacheKey = `${configKey}::${modelName}::${metric.metricType}::${metric.field}::${hash(querysetAst)}`;
+    // Check the cache first
+    if (cacheKey && wrappedMetricCache.has(cacheKey)) {
+        return wrappedMetricCache.get(cacheKey);
+    }
+    // Create a wrapper object that maintains the metric value
+    const wrapper = {
+        value: metric.value,
+        original: metric,
+        _reactUpdateHandler: null,
+        _reactVersion: 0,
+    };
+    // Single handler for metric render events
+    const metricRenderHandler = (eventData) => {
+        // Only update if this event is for our metric
+        if (eventData.metricType === metric.metricType &&
+            eventData.ModelClass === metric.queryset.ModelClass &&
+            eventData.field === metric.field &&
+            eventData.ast === hash(querysetAst) &&
+            eventData.valueChanged === true) {
+            // Update the wrapper value with the latest metric value
+            wrapper.value = metric.value;
+            wrapper._reactVersion++;
+            // Trigger React update if handler is set
+            if (wrapper._reactUpdateHandler) {
+                wrapper._reactUpdateHandler();
+            }
+        }
+    };
+    // Only listen for metric render events
+    metricEventEmitter.on("metric::render", metricRenderHandler);
+    // Store cleanup function
+    wrapper._cleanup = () => {
+        metricEventEmitter.off("metric::render", metricRenderHandler);
+    };
+    // Store in cache
+    if (cacheKey) {
+        wrappedMetricCache.set(cacheKey, wrapper);
+    }
+    return wrapper;
+}

package/dist/syncEngine/registries/metricRegistry.d.ts

@@ -8,6 +8,11 @@ export class LiveMetric {
     metricType: any;
     field: any;
     get lqs(): import("./querysetStoreRegistry").LiveQueryset;
+    /**
+     * Refresh the metric data from the database
+     * Delegates to the underlying store's sync method
+     */
+    refreshFromDb(): any;
     /**
      * Getter that always returns the current value from the store
      */

package/dist/syncEngine/registries/metricRegistry.js

@@ -17,6 +17,14 @@ export class LiveMetric {
     get lqs() {
         return querysetStoreRegistry.getEntity(this.queryset);
     }
+    /**
+     * Refresh the metric data from the database
+     * Delegates to the underlying store's sync method
+     */
+    refreshFromDb() {
+        const store = metricRegistry.getStore(this.metricType, this.queryset, this.field);
+        return store.sync();
+    }
     /**
      * Getter that always returns the current value from the store
      */

package/dist/syncEngine/registries/querysetStoreRegistry.d.ts

@@ -9,6 +9,11 @@ export class LiveQueryset {
      * Serializes the lqs as a simple array of objects, for freezing e.g in the metric stores
      */
     serialize(): any;
+    /**
+     * Refresh the queryset data from the database
+     * Delegates to the underlying store's sync method
+     */
+    refreshFromDb(): any;
     /**
      * Get the current items from the store
      * @private

package/dist/syncEngine/registries/querysetStoreRegistry.js

@@ -41,28 +41,37 @@ export class LiveQueryset {
         __classPrivateFieldSet(this, _LiveQueryset_proxy, new Proxy(__classPrivateFieldGet(this, _LiveQueryset_array, "f"), {
             get: (target, prop, receiver) => {
                 // Expose the touch method through the proxy
-                if (prop === 'touch') {
+                if (prop === "touch") {
                     return () => this.touch();
                 }
-                if (prop === 'serialize') {
+                if (prop === "serialize") {
                     return () => this.serialize();
                 }
                 // Special handling for iterators and common array methods
                 if (prop === Symbol.iterator) {
                     return () => this.getCurrentItems()[Symbol.iterator]();
                 }
-                else if (typeof prop === 'string' && ['forEach', 'map', 'filter', 'reduce', 'some', 'every', 'find'].includes(prop)) {
+                else if (typeof prop === "string" &&
+                    [
+                        "forEach",
+                        "map",
+                        "filter",
+                        "reduce",
+                        "some",
+                        "every",
+                        "find",
+                    ].includes(prop)) {
                     return (...args) => this.getCurrentItems()[prop](...args);
                 }
-                else if (prop === 'length') {
+                else if (prop === "length") {
                     return this.getCurrentItems().length;
                 }
-                else if (typeof prop === 'string' && !isNaN(parseInt(prop))) {
+                else if (typeof prop === "string" && !isNaN(parseInt(prop))) {
                     // Handle numeric indices
                     return this.getCurrentItems()[prop];
                 }
                 return target[prop];
-            }
+            },
         }), "f");
         return __classPrivateFieldGet(this, _LiveQueryset_proxy, "f");
     }
@@ -74,12 +83,20 @@ export class LiveQueryset {
         // Get the current primary keys from the store
         const pks = store.render();
         // Map primary keys to full model objects
-        return pks.map(pk => {
+        return pks.map((pk) => {
             // Get the full model instance from the model store
             const pkField = __classPrivateFieldGet(this, _LiveQueryset_ModelClass, "f").primaryKeyField;
             return __classPrivateFieldGet(this, _LiveQueryset_ModelClass, "f").fromPk(pk, __classPrivateFieldGet(this, _LiveQueryset_queryset, "f")).serialize();
         });
     }
+    /**
+     * Refresh the queryset data from the database
+     * Delegates to the underlying store's sync method
+     */
+    refreshFromDb() {
+        const store = querysetStoreRegistry.getStore(__classPrivateFieldGet(this, _LiveQueryset_queryset, "f"));
+        return store.sync();
+    }
     /**
      * Get the current items from the store
      * @private
@@ -90,10 +107,17 @@ export class LiveQueryset {
         // Get the current primary keys from the store
         const pks = store.render();
         // Map primary keys to full model objects
-        const instances = pks.map(pk => {
+        const instances = pks
+            .map((pk) => {
             // Get the full model instance from the model store
             const pkField = __classPrivateFieldGet(this, _LiveQueryset_ModelClass, "f").primaryKeyField;
             return __classPrivateFieldGet(this, _LiveQueryset_ModelClass, "f").fromPk(pk, __classPrivateFieldGet(this, _LiveQueryset_queryset, "f"));
+        })
+            .filter((instance) => {
+            // Filter out ghost entries - instances where the model data doesn't exist i.e because it has
+            // been deleted on the backend but the event hasn't been propagated to this queryset
+            const storedData = modelStoreRegistry.getEntity(__classPrivateFieldGet(this, _LiveQueryset_ModelClass, "f"), instance.pk);
+            return storedData !== null && storedData !== undefined;
         });
         if (!sortAndFilter)
             return instances;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statezero/core",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "type": "module",
   "module": "ESNext",
   "description": "The type-safe frontend client for StateZero - connect directly to your backend models with zero boilerplate",