@legendapp/state 3.0.0-alpha.2 → 3.0.0-alpha.4

package/index.d.mts

@@ -1,5 +1,5 @@
 type Primitive$1 = string | number | boolean | symbol | bigint | undefined | null | Date;
-type ArrayOverrideFnNames = 'find' | 'every' | 'some' | 'filter' | 'reduce' | 'reduceRight' | 'forEach' | 'map' | 'sort';
+type ArrayOverrideFnNames = 'find' | 'findIndex' | 'every' | 'some' | 'filter' | 'reduce' | 'reduceRight' | 'forEach' | 'map' | 'sort';
 type RemoveIndex<T> = {
     [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K];
 };

package/index.d.ts

@@ -1,5 +1,5 @@
 type Primitive$1 = string | number | boolean | symbol | bigint | undefined | null | Date;
-type ArrayOverrideFnNames = 'find' | 'every' | 'some' | 'filter' | 'reduce' | 'reduceRight' | 'forEach' | 'map' | 'sort';
+type ArrayOverrideFnNames = 'find' | 'findIndex' | 'every' | 'some' | 'filter' | 'reduce' | 'reduceRight' | 'forEach' | 'map' | 'sort';
 type RemoveIndex<T> = {
     [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K];
 };

package/index.js

@@ -337,13 +337,18 @@ function mergeIntoObservable(target, ...sources) {
   beginBatch();
   globalState.isMerging = true;
   for (let i = 0; i < sources.length; i++) {
-    target = _mergeIntoObservable(target, sources[i]);
+    target = _mergeIntoObservable(
+      target,
+      sources[i],
+      /*assign*/
+      i < sources.length - 1
+    );
   }
   globalState.isMerging = false;
   endBatch();
   return target;
 }
-function _mergeIntoObservable(target, source) {
+function _mergeIntoObservable(target, source, assign2) {
   var _a;
   if (isObservable(source)) {
     source = source.peek();
@@ -365,17 +370,22 @@ function _mergeIntoObservable(target, source) {
         const targetChild = target[key];
         if ((isObj || isArr) && targetChild && (needsSet || !isEmpty(targetChild))) {
           if (!needsSet && (!targetChild || (isObj ? !isObject(targetChild) : !isArray(targetChild)))) {
-            target[key] = sourceValue;
+            target[key] = assign2 ? isArr ? [...sourceValue] : { ...sourceValue } : sourceValue;
           } else {
             _mergeIntoObservable(targetChild, sourceValue);
           }
         } else {
-          needsSet ? targetChild.set(sourceValue) : target[key] = sourceValue;
+          if (needsSet) {
+            targetChild.set(sourceValue);
+          } else {
+            const toSet = isObject(sourceValue) ? { ...sourceValue } : isArray(sourceValue) ? [...sourceValue] : sourceValue;
+            target[key] = toSet;
+          }
         }
       }
     }
   } else if (source !== void 0) {
-    needsSet ? target.set(source) : target = source;
+    needsSet ? target.set(source) : target = assign2 ? isArray(source) ? [...source] : { ...source } : source;
   }
   return target;
 }

package/index.mjs

@@ -335,13 +335,18 @@ function mergeIntoObservable(target, ...sources) {
   beginBatch();
   globalState.isMerging = true;
   for (let i = 0; i < sources.length; i++) {
-    target = _mergeIntoObservable(target, sources[i]);
+    target = _mergeIntoObservable(
+      target,
+      sources[i],
+      /*assign*/
+      i < sources.length - 1
+    );
   }
   globalState.isMerging = false;
   endBatch();
   return target;
 }
-function _mergeIntoObservable(target, source) {
+function _mergeIntoObservable(target, source, assign2) {
   var _a;
   if (isObservable(source)) {
     source = source.peek();
@@ -363,17 +368,22 @@ function _mergeIntoObservable(target, source) {
         const targetChild = target[key];
         if ((isObj || isArr) && targetChild && (needsSet || !isEmpty(targetChild))) {
           if (!needsSet && (!targetChild || (isObj ? !isObject(targetChild) : !isArray(targetChild)))) {
-            target[key] = sourceValue;
+            target[key] = assign2 ? isArr ? [...sourceValue] : { ...sourceValue } : sourceValue;
           } else {
             _mergeIntoObservable(targetChild, sourceValue);
           }
         } else {
-          needsSet ? targetChild.set(sourceValue) : target[key] = sourceValue;
+          if (needsSet) {
+            targetChild.set(sourceValue);
+          } else {
+            const toSet = isObject(sourceValue) ? { ...sourceValue } : isArray(sourceValue) ? [...sourceValue] : sourceValue;
+            target[key] = toSet;
+          }
         }
       }
     }
   } else if (source !== void 0) {
-    needsSet ? target.set(source) : target = source;
+    needsSet ? target.set(source) : target = assign2 ? isArray(source) ? [...source] : { ...source } : source;
   }
   return target;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/state",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.4",
   "description": "legend-state",
   "sideEffects": false,
   "private": false,

package/react.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, ReactElement, FC, LegacyRef, ComponentClass, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction } from 'react';
+import { ReactNode, ReactElement, FC, LegacyRef, ComponentClass, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction } from 'react';
 import { ObservableParam, Observable, ObservableBoolean, Selector, RecursiveValueOrFunction, ObserveEvent, ObserveOptions, ObserveEventCallback } from '@legendapp/state';
 
 declare function Computed({ children }: {
@@ -110,10 +110,10 @@ declare function reactiveObserver<T extends FC<any>>(component: T, bindKeys?: Bi
 declare function reactiveObserver<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
 declare function reactiveComponents<P extends Record<string, FC>>(components: P): ObjectShapeWith$<P>;
 
-declare function useComputed<T>(compute: () => T | Promise<T>): Observable<T>;
-declare function useComputed<T>(compute: () => T | Promise<T>, deps: any[]): Observable<T>;
-declare function useComputed<T, T2 = T>(compute: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void): Observable<T>;
-declare function useComputed<T, T2 = T>(compute: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void, deps: any[]): Observable<T>;
+declare function useComputed<T>(get: () => T | Promise<T>): Observable<T>;
+declare function useComputed<T>(get: () => T | Promise<T>, deps: any[]): Observable<T>;
+declare function useComputed<T, T2 = T>(get: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void): Observable<T>;
+declare function useComputed<T, T2 = T>(get: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void, deps: any[]): Observable<T>;
 
 declare const useEffectOnce: (effect: () => void | (() => void), deps: any[]) => void;
 
@@ -130,9 +130,9 @@ declare const useMountOnce: typeof useMount;
  * @see https://www.legendapp.com/dev/state/react/#useObservable
  */
 declare function useObservable<T>(): Observable<T | undefined>;
-declare function useObservable<T>(value: Promise<RecursiveValueOrFunction<T>> | (() => RecursiveValueOrFunction<T>) | RecursiveValueOrFunction<T>): Observable<T>;
-declare function useObservable<T>(value: T): Observable<T>;
-declare function useObservable<T>(value?: T): Observable<any>;
+declare function useObservable<T>(value: Promise<RecursiveValueOrFunction<T>> | (() => RecursiveValueOrFunction<T>) | RecursiveValueOrFunction<T>, deps?: DependencyList): Observable<T>;
+declare function useObservable<T>(value: T, deps?: DependencyList): Observable<T>;
+declare function useObservable<T>(value?: T, deps?: DependencyList): Observable<any>;
 
 declare function useObservableReducer<R extends ReducerWithoutAction<any>, I>(reducer: R, initializerArg: I, initializer: (arg: I) => ReducerStateWithoutAction<R>): [Observable<ReducerStateWithoutAction<R>>, DispatchWithoutAction];
 declare function useObservableReducer<R extends ReducerWithoutAction<any>>(reducer: R, initializerArg: ReducerStateWithoutAction<R>, initializer?: undefined): [Observable<ReducerStateWithoutAction<R>>, DispatchWithoutAction];

package/react.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, ReactElement, FC, LegacyRef, ComponentClass, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction } from 'react';
+import { ReactNode, ReactElement, FC, LegacyRef, ComponentClass, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction } from 'react';
 import { ObservableParam, Observable, ObservableBoolean, Selector, RecursiveValueOrFunction, ObserveEvent, ObserveOptions, ObserveEventCallback } from '@legendapp/state';
 
 declare function Computed({ children }: {
@@ -110,10 +110,10 @@ declare function reactiveObserver<T extends FC<any>>(component: T, bindKeys?: Bi
 declare function reactiveObserver<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
 declare function reactiveComponents<P extends Record<string, FC>>(components: P): ObjectShapeWith$<P>;
 
-declare function useComputed<T>(compute: () => T | Promise<T>): Observable<T>;
-declare function useComputed<T>(compute: () => T | Promise<T>, deps: any[]): Observable<T>;
-declare function useComputed<T, T2 = T>(compute: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void): Observable<T>;
-declare function useComputed<T, T2 = T>(compute: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void, deps: any[]): Observable<T>;
+declare function useComputed<T>(get: () => T | Promise<T>): Observable<T>;
+declare function useComputed<T>(get: () => T | Promise<T>, deps: any[]): Observable<T>;
+declare function useComputed<T, T2 = T>(get: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void): Observable<T>;
+declare function useComputed<T, T2 = T>(get: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void, deps: any[]): Observable<T>;
 
 declare const useEffectOnce: (effect: () => void | (() => void), deps: any[]) => void;
 
@@ -130,9 +130,9 @@ declare const useMountOnce: typeof useMount;
  * @see https://www.legendapp.com/dev/state/react/#useObservable
  */
 declare function useObservable<T>(): Observable<T | undefined>;
-declare function useObservable<T>(value: Promise<RecursiveValueOrFunction<T>> | (() => RecursiveValueOrFunction<T>) | RecursiveValueOrFunction<T>): Observable<T>;
-declare function useObservable<T>(value: T): Observable<T>;
-declare function useObservable<T>(value?: T): Observable<any>;
+declare function useObservable<T>(value: Promise<RecursiveValueOrFunction<T>> | (() => RecursiveValueOrFunction<T>) | RecursiveValueOrFunction<T>, deps?: DependencyList): Observable<T>;
+declare function useObservable<T>(value: T, deps?: DependencyList): Observable<T>;
+declare function useObservable<T>(value?: T, deps?: DependencyList): Observable<any>;
 
 declare function useObservableReducer<R extends ReducerWithoutAction<any>, I>(reducer: R, initializerArg: I, initializer: (arg: I) => ReducerStateWithoutAction<R>): [Observable<ReducerStateWithoutAction<R>>, DispatchWithoutAction];
 declare function useObservableReducer<R extends ReducerWithoutAction<any>>(reducer: R, initializerArg: ReducerStateWithoutAction<R>, initializer?: undefined): [Observable<ReducerStateWithoutAction<R>>, DispatchWithoutAction];

package/react.js

@@ -149,10 +149,10 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
   if (component["__legend_proxied"])
     return component;
   let useForwardRef = false;
-  let useMemo5 = false;
+  let useMemo4 = false;
   let render = component;
   if (ReactMemoSymbol && render["$$typeof"] === ReactMemoSymbol && render["type"]) {
-    useMemo5 = true;
+    useMemo4 = true;
     render = render["type"];
   }
   if (ReactForwardRefSymbol && render["$$typeof"] === ReactForwardRefSymbol) {
@@ -233,7 +233,7 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
   } else {
     ret = proxy;
   }
-  return observe3 || useMemo5 ? React.memo(ret) : ret;
+  return observe3 || useMemo4 ? React.memo(ret) : ret;
 }
 function observer(component) {
   return createReactiveComponent(component, true);
@@ -389,20 +389,33 @@ function Switch({
   const child = children[useSelector(value)];
   return (_b = child ? child() : (_a = children["default"]) == null ? void 0 : _a.call(children)) != null ? _b : null;
 }
-function useComputed(compute, set, deps) {
+function useObservable(initialValue, deps) {
+  var _a;
+  const ref = React.useRef({});
+  ref.current.value = initialValue;
+  const depsObs$ = deps ? useObservable(deps) : void 0;
+  if (!((_a = ref.current) == null ? void 0 : _a.obs$)) {
+    const value = depsObs$ ? () => {
+      depsObs$.get();
+      return state.computeSelector(ref.current.value);
+    } : initialValue;
+    ref.current.obs$ = state.observable(value);
+  }
+  if (depsObs$) {
+    depsObs$.set(deps);
+  }
+  return ref.current.obs$;
+}
+
+// src/react/useComputed.ts
+function useComputed(get, set, deps) {
   if (!deps && state.isArray(set)) {
     deps = set;
     set = void 0;
   }
-  const ref = React.useRef({});
-  ref.current.compute = compute;
-  ref.current.set = set;
-  return React.useMemo(
-    () => state.computed(
-      () => state.isFunction(ref.current.compute) ? ref.current.compute() : ref.current.compute,
-      set ? (value) => ref.current.set(value) : void 0
-    ),
-    deps || []
+  return useObservable(
+    set ? state.linked({ get, set: ({ value }) => set(value) }) : get,
+    deps
   );
 }
 var useEffectOnce = (effect, deps) => {
@@ -442,13 +455,6 @@ function useMount(fn) {
   }, []);
 }
 var useMountOnce = useMount;
-function useObservable(initialValue) {
-  const ref = React.useRef();
-  if (!ref.current) {
-    ref.current = state.observable(initialValue);
-  }
-  return ref.current;
-}
 
 // src/react/useIsMounted.ts
 function useIsMounted() {

package/react.mjs

@@ -1,4 +1,4 @@
-import { isFunction, isEmpty, observable, isPromise, isObservable, syncState, computeSelector, isArray, isMap, isObservableValueReady, computed, observe, when, whenReady, internal, trackSelector, isPrimitive } from '@legendapp/state';
+import { isFunction, isEmpty, observable, isPromise, isObservable, syncState, computeSelector, isArray, isMap, isObservableValueReady, linked, observe, when, whenReady, internal, trackSelector, isPrimitive } from '@legendapp/state';
 import React, { memo, forwardRef, createElement, useState, useContext, useMemo, useRef, useEffect, createContext, useCallback } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 
@@ -143,10 +143,10 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
   if (component["__legend_proxied"])
     return component;
   let useForwardRef = false;
-  let useMemo5 = false;
+  let useMemo4 = false;
   let render = component;
   if (ReactMemoSymbol && render["$$typeof"] === ReactMemoSymbol && render["type"]) {
-    useMemo5 = true;
+    useMemo4 = true;
     render = render["type"];
   }
   if (ReactForwardRefSymbol && render["$$typeof"] === ReactForwardRefSymbol) {
@@ -227,7 +227,7 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
   } else {
     ret = proxy;
   }
-  return observe3 || useMemo5 ? memo(ret) : ret;
+  return observe3 || useMemo4 ? memo(ret) : ret;
 }
 function observer(component) {
   return createReactiveComponent(component, true);
@@ -383,20 +383,33 @@ function Switch({
   const child = children[useSelector(value)];
   return (_b = child ? child() : (_a = children["default"]) == null ? void 0 : _a.call(children)) != null ? _b : null;
 }
-function useComputed(compute, set, deps) {
+function useObservable(initialValue, deps) {
+  var _a;
+  const ref = useRef({});
+  ref.current.value = initialValue;
+  const depsObs$ = deps ? useObservable(deps) : void 0;
+  if (!((_a = ref.current) == null ? void 0 : _a.obs$)) {
+    const value = depsObs$ ? () => {
+      depsObs$.get();
+      return computeSelector(ref.current.value);
+    } : initialValue;
+    ref.current.obs$ = observable(value);
+  }
+  if (depsObs$) {
+    depsObs$.set(deps);
+  }
+  return ref.current.obs$;
+}
+
+// src/react/useComputed.ts
+function useComputed(get, set, deps) {
   if (!deps && isArray(set)) {
     deps = set;
     set = void 0;
   }
-  const ref = useRef({});
-  ref.current.compute = compute;
-  ref.current.set = set;
-  return useMemo(
-    () => computed(
-      () => isFunction(ref.current.compute) ? ref.current.compute() : ref.current.compute,
-      set ? (value) => ref.current.set(value) : void 0
-    ),
-    deps || []
+  return useObservable(
+    set ? linked({ get, set: ({ value }) => set(value) }) : get,
+    deps
   );
 }
 var useEffectOnce = (effect, deps) => {
@@ -436,13 +449,6 @@ function useMount(fn) {
   }, []);
 }
 var useMountOnce = useMount;
-function useObservable(initialValue) {
-  const ref = useRef();
-  if (!ref.current) {
-    ref.current = observable(initialValue);
-  }
-  return ref.current;
-}
 
 // src/react/useIsMounted.ts
 function useIsMounted() {

package/sync.js

@@ -205,19 +205,16 @@ async function updateMetadataImmediate(value$, localState, syncState, syncOption
   const { pluginPersist } = localState;
   const { table, config } = parseLocalConfig(syncOptions == null ? void 0 : syncOptions.persist);
   const oldMetadata = metadatas.get(value$);
-  const { lastSync, pending } = newMetadata;
-  const needsUpdate = pending || lastSync && (!oldMetadata || lastSync !== oldMetadata.lastSync);
-  if (needsUpdate) {
-    const metadata = Object.assign({}, oldMetadata, newMetadata);
-    metadatas.set(value$, metadata);
-    if (pluginPersist) {
-      await pluginPersist.setMetadata(table, metadata, config);
-    }
-    if (lastSync) {
-      syncState.assign({
-        lastSync
-      });
-    }
+  const { lastSync } = newMetadata;
+  const metadata = Object.assign({}, oldMetadata, newMetadata);
+  metadatas.set(value$, metadata);
+  if (pluginPersist) {
+    await pluginPersist.setMetadata(table, metadata, config);
+  }
+  if (lastSync) {
+    syncState.assign({
+      lastSync
+    });
   }
 }
 function updateMetadata(value$, localState, syncState, syncOptions, newMetadata) {
@@ -692,11 +689,13 @@ function syncObservable(obs$, syncOptionsOrSynced) {
   if ((process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && (!obs$ || !node)) {
     throw new Error("[legend-state] syncObservable called with undefined observable");
   }
-  syncOptions = {
-    syncMode: "auto",
-    ...observableSyncConfiguration,
-    ...removeNullUndefined(syncOptions || {})
-  };
+  syncOptions = state.mergeIntoObservable(
+    {
+      syncMode: "auto"
+    },
+    observableSyncConfiguration,
+    removeNullUndefined(syncOptions || {})
+  );
   const localState = {};
   let sync;
   const syncState = node.state = state.observable({

package/sync.mjs

@@ -1,4 +1,4 @@
-import { isObject, isDate, isNullOrUndefined, isString, endBatch, beginBatch, isFunction, observable, when, linked, internal, isPromise, mergeIntoObservable, isEmpty, shouldIgnoreUnobserved, whenReady, constructObjectWithPath, deconstructObjectWithPath, setAtPath, isArray } from '@legendapp/state';
+import { isObject, isDate, isNullOrUndefined, isString, endBatch, beginBatch, isFunction, mergeIntoObservable, observable, when, linked, internal, isPromise, isEmpty, shouldIgnoreUnobserved, whenReady, constructObjectWithPath, deconstructObjectWithPath, setAtPath, isArray } from '@legendapp/state';
 
 // sync.ts
 
@@ -203,19 +203,16 @@ async function updateMetadataImmediate(value$, localState, syncState, syncOption
   const { pluginPersist } = localState;
   const { table, config } = parseLocalConfig(syncOptions == null ? void 0 : syncOptions.persist);
   const oldMetadata = metadatas.get(value$);
-  const { lastSync, pending } = newMetadata;
-  const needsUpdate = pending || lastSync && (!oldMetadata || lastSync !== oldMetadata.lastSync);
-  if (needsUpdate) {
-    const metadata = Object.assign({}, oldMetadata, newMetadata);
-    metadatas.set(value$, metadata);
-    if (pluginPersist) {
-      await pluginPersist.setMetadata(table, metadata, config);
-    }
-    if (lastSync) {
-      syncState.assign({
-        lastSync
-      });
-    }
+  const { lastSync } = newMetadata;
+  const metadata = Object.assign({}, oldMetadata, newMetadata);
+  metadatas.set(value$, metadata);
+  if (pluginPersist) {
+    await pluginPersist.setMetadata(table, metadata, config);
+  }
+  if (lastSync) {
+    syncState.assign({
+      lastSync
+    });
   }
 }
 function updateMetadata(value$, localState, syncState, syncOptions, newMetadata) {
@@ -690,11 +687,13 @@ function syncObservable(obs$, syncOptionsOrSynced) {
   if ((process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && (!obs$ || !node)) {
     throw new Error("[legend-state] syncObservable called with undefined observable");
   }
-  syncOptions = {
-    syncMode: "auto",
-    ...observableSyncConfiguration,
-    ...removeNullUndefined(syncOptions || {})
-  };
+  syncOptions = mergeIntoObservable(
+    {
+      syncMode: "auto"
+    },
+    observableSyncConfiguration,
+    removeNullUndefined(syncOptions || {})
+  );
   const localState = {};
   let sync;
   const syncState = node.state = observable({