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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/index.d.mts +1 -1
  2. package/index.d.ts +1 -1
  3. package/package.json +1 -1
  4. package/react.d.mts +8 -8
  5. package/react.d.ts +8 -8
  6. package/react.js +26 -20
  7. package/react.mjs +27 -21
package/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  type Primitive$1 = string | number | boolean | symbol | bigint | undefined | null | Date;
2
- type ArrayOverrideFnNames = 'find' | 'every' | 'some' | 'filter' | 'reduce' | 'reduceRight' | 'forEach' | 'map' | 'sort';
2
+ type ArrayOverrideFnNames = 'find' | 'findIndex' | 'every' | 'some' | 'filter' | 'reduce' | 'reduceRight' | 'forEach' | 'map' | 'sort';
3
3
  type RemoveIndex<T> = {
4
4
  [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K];
5
5
  };
package/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  type Primitive$1 = string | number | boolean | symbol | bigint | undefined | null | Date;
2
- type ArrayOverrideFnNames = 'find' | 'every' | 'some' | 'filter' | 'reduce' | 'reduceRight' | 'forEach' | 'map' | 'sort';
2
+ type ArrayOverrideFnNames = 'find' | 'findIndex' | 'every' | 'some' | 'filter' | 'reduce' | 'reduceRight' | 'forEach' | 'map' | 'sort';
3
3
  type RemoveIndex<T> = {
4
4
  [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K];
5
5
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@legendapp/state",
3
- "version": "3.0.0-alpha.3",
3
+ "version": "3.0.0-alpha.4",
4
4
  "description": "legend-state",
5
5
  "sideEffects": false,
6
6
  "private": false,
package/react.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react from 'react';
2
- import { ReactNode, ReactElement, FC, LegacyRef, ComponentClass, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction } from 'react';
2
+ import { ReactNode, ReactElement, FC, LegacyRef, ComponentClass, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction } from 'react';
3
3
  import { ObservableParam, Observable, ObservableBoolean, Selector, RecursiveValueOrFunction, ObserveEvent, ObserveOptions, ObserveEventCallback } from '@legendapp/state';
4
4
 
5
5
  declare function Computed({ children }: {
@@ -110,10 +110,10 @@ declare function reactiveObserver<T extends FC<any>>(component: T, bindKeys?: Bi
110
110
  declare function reactiveObserver<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
111
111
  declare function reactiveComponents<P extends Record<string, FC>>(components: P): ObjectShapeWith$<P>;
112
112
 
113
- declare function useComputed<T>(compute: () => T | Promise<T>): Observable<T>;
114
- declare function useComputed<T>(compute: () => T | Promise<T>, deps: any[]): Observable<T>;
115
- declare function useComputed<T, T2 = T>(compute: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void): Observable<T>;
116
- declare function useComputed<T, T2 = T>(compute: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void, deps: any[]): Observable<T>;
113
+ declare function useComputed<T>(get: () => T | Promise<T>): Observable<T>;
114
+ declare function useComputed<T>(get: () => T | Promise<T>, deps: any[]): Observable<T>;
115
+ declare function useComputed<T, T2 = T>(get: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void): Observable<T>;
116
+ declare function useComputed<T, T2 = T>(get: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void, deps: any[]): Observable<T>;
117
117
 
118
118
  declare const useEffectOnce: (effect: () => void | (() => void), deps: any[]) => void;
119
119
 
@@ -130,9 +130,9 @@ declare const useMountOnce: typeof useMount;
130
130
  * @see https://www.legendapp.com/dev/state/react/#useObservable
131
131
  */
132
132
  declare function useObservable<T>(): Observable<T | undefined>;
133
- declare function useObservable<T>(value: Promise<RecursiveValueOrFunction<T>> | (() => RecursiveValueOrFunction<T>) | RecursiveValueOrFunction<T>): Observable<T>;
134
- declare function useObservable<T>(value: T): Observable<T>;
135
- declare function useObservable<T>(value?: T): Observable<any>;
133
+ declare function useObservable<T>(value: Promise<RecursiveValueOrFunction<T>> | (() => RecursiveValueOrFunction<T>) | RecursiveValueOrFunction<T>, deps?: DependencyList): Observable<T>;
134
+ declare function useObservable<T>(value: T, deps?: DependencyList): Observable<T>;
135
+ declare function useObservable<T>(value?: T, deps?: DependencyList): Observable<any>;
136
136
 
137
137
  declare function useObservableReducer<R extends ReducerWithoutAction<any>, I>(reducer: R, initializerArg: I, initializer: (arg: I) => ReducerStateWithoutAction<R>): [Observable<ReducerStateWithoutAction<R>>, DispatchWithoutAction];
138
138
  declare function useObservableReducer<R extends ReducerWithoutAction<any>>(reducer: R, initializerArg: ReducerStateWithoutAction<R>, initializer?: undefined): [Observable<ReducerStateWithoutAction<R>>, DispatchWithoutAction];
package/react.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react from 'react';
2
- import { ReactNode, ReactElement, FC, LegacyRef, ComponentClass, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction } from 'react';
2
+ import { ReactNode, ReactElement, FC, LegacyRef, ComponentClass, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction } from 'react';
3
3
  import { ObservableParam, Observable, ObservableBoolean, Selector, RecursiveValueOrFunction, ObserveEvent, ObserveOptions, ObserveEventCallback } from '@legendapp/state';
4
4
 
5
5
  declare function Computed({ children }: {
@@ -110,10 +110,10 @@ declare function reactiveObserver<T extends FC<any>>(component: T, bindKeys?: Bi
110
110
  declare function reactiveObserver<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
111
111
  declare function reactiveComponents<P extends Record<string, FC>>(components: P): ObjectShapeWith$<P>;
112
112
 
113
- declare function useComputed<T>(compute: () => T | Promise<T>): Observable<T>;
114
- declare function useComputed<T>(compute: () => T | Promise<T>, deps: any[]): Observable<T>;
115
- declare function useComputed<T, T2 = T>(compute: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void): Observable<T>;
116
- declare function useComputed<T, T2 = T>(compute: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void, deps: any[]): Observable<T>;
113
+ declare function useComputed<T>(get: () => T | Promise<T>): Observable<T>;
114
+ declare function useComputed<T>(get: () => T | Promise<T>, deps: any[]): Observable<T>;
115
+ declare function useComputed<T, T2 = T>(get: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void): Observable<T>;
116
+ declare function useComputed<T, T2 = T>(get: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void, deps: any[]): Observable<T>;
117
117
 
118
118
  declare const useEffectOnce: (effect: () => void | (() => void), deps: any[]) => void;
119
119
 
@@ -130,9 +130,9 @@ declare const useMountOnce: typeof useMount;
130
130
  * @see https://www.legendapp.com/dev/state/react/#useObservable
131
131
  */
132
132
  declare function useObservable<T>(): Observable<T | undefined>;
133
- declare function useObservable<T>(value: Promise<RecursiveValueOrFunction<T>> | (() => RecursiveValueOrFunction<T>) | RecursiveValueOrFunction<T>): Observable<T>;
134
- declare function useObservable<T>(value: T): Observable<T>;
135
- declare function useObservable<T>(value?: T): Observable<any>;
133
+ declare function useObservable<T>(value: Promise<RecursiveValueOrFunction<T>> | (() => RecursiveValueOrFunction<T>) | RecursiveValueOrFunction<T>, deps?: DependencyList): Observable<T>;
134
+ declare function useObservable<T>(value: T, deps?: DependencyList): Observable<T>;
135
+ declare function useObservable<T>(value?: T, deps?: DependencyList): Observable<any>;
136
136
 
137
137
  declare function useObservableReducer<R extends ReducerWithoutAction<any>, I>(reducer: R, initializerArg: I, initializer: (arg: I) => ReducerStateWithoutAction<R>): [Observable<ReducerStateWithoutAction<R>>, DispatchWithoutAction];
138
138
  declare function useObservableReducer<R extends ReducerWithoutAction<any>>(reducer: R, initializerArg: ReducerStateWithoutAction<R>, initializer?: undefined): [Observable<ReducerStateWithoutAction<R>>, DispatchWithoutAction];
package/react.js CHANGED
@@ -149,10 +149,10 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
149
149
  if (component["__legend_proxied"])
150
150
  return component;
151
151
  let useForwardRef = false;
152
- let useMemo5 = false;
152
+ let useMemo4 = false;
153
153
  let render = component;
154
154
  if (ReactMemoSymbol && render["$$typeof"] === ReactMemoSymbol && render["type"]) {
155
- useMemo5 = true;
155
+ useMemo4 = true;
156
156
  render = render["type"];
157
157
  }
158
158
  if (ReactForwardRefSymbol && render["$$typeof"] === ReactForwardRefSymbol) {
@@ -233,7 +233,7 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
233
233
  } else {
234
234
  ret = proxy;
235
235
  }
236
- return observe3 || useMemo5 ? React.memo(ret) : ret;
236
+ return observe3 || useMemo4 ? React.memo(ret) : ret;
237
237
  }
238
238
  function observer(component) {
239
239
  return createReactiveComponent(component, true);
@@ -389,20 +389,33 @@ function Switch({
389
389
  const child = children[useSelector(value)];
390
390
  return (_b = child ? child() : (_a = children["default"]) == null ? void 0 : _a.call(children)) != null ? _b : null;
391
391
  }
392
- function useComputed(compute, set, deps) {
392
+ function useObservable(initialValue, deps) {
393
+ var _a;
394
+ const ref = React.useRef({});
395
+ ref.current.value = initialValue;
396
+ const depsObs$ = deps ? useObservable(deps) : void 0;
397
+ if (!((_a = ref.current) == null ? void 0 : _a.obs$)) {
398
+ const value = depsObs$ ? () => {
399
+ depsObs$.get();
400
+ return state.computeSelector(ref.current.value);
401
+ } : initialValue;
402
+ ref.current.obs$ = state.observable(value);
403
+ }
404
+ if (depsObs$) {
405
+ depsObs$.set(deps);
406
+ }
407
+ return ref.current.obs$;
408
+ }
409
+
410
+ // src/react/useComputed.ts
411
+ function useComputed(get, set, deps) {
393
412
  if (!deps && state.isArray(set)) {
394
413
  deps = set;
395
414
  set = void 0;
396
415
  }
397
- const ref = React.useRef({});
398
- ref.current.compute = compute;
399
- ref.current.set = set;
400
- return React.useMemo(
401
- () => state.computed(
402
- () => state.isFunction(ref.current.compute) ? ref.current.compute() : ref.current.compute,
403
- set ? (value) => ref.current.set(value) : void 0
404
- ),
405
- deps || []
416
+ return useObservable(
417
+ set ? state.linked({ get, set: ({ value }) => set(value) }) : get,
418
+ deps
406
419
  );
407
420
  }
408
421
  var useEffectOnce = (effect, deps) => {
@@ -442,13 +455,6 @@ function useMount(fn) {
442
455
  }, []);
443
456
  }
444
457
  var useMountOnce = useMount;
445
- function useObservable(initialValue) {
446
- const ref = React.useRef();
447
- if (!ref.current) {
448
- ref.current = state.observable(initialValue);
449
- }
450
- return ref.current;
451
- }
452
458
 
453
459
  // src/react/useIsMounted.ts
454
460
  function useIsMounted() {
package/react.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { isFunction, isEmpty, observable, isPromise, isObservable, syncState, computeSelector, isArray, isMap, isObservableValueReady, computed, observe, when, whenReady, internal, trackSelector, isPrimitive } from '@legendapp/state';
1
+ import { isFunction, isEmpty, observable, isPromise, isObservable, syncState, computeSelector, isArray, isMap, isObservableValueReady, linked, observe, when, whenReady, internal, trackSelector, isPrimitive } from '@legendapp/state';
2
2
  import React, { memo, forwardRef, createElement, useState, useContext, useMemo, useRef, useEffect, createContext, useCallback } from 'react';
3
3
  import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
4
4
 
@@ -143,10 +143,10 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
143
143
  if (component["__legend_proxied"])
144
144
  return component;
145
145
  let useForwardRef = false;
146
- let useMemo5 = false;
146
+ let useMemo4 = false;
147
147
  let render = component;
148
148
  if (ReactMemoSymbol && render["$$typeof"] === ReactMemoSymbol && render["type"]) {
149
- useMemo5 = true;
149
+ useMemo4 = true;
150
150
  render = render["type"];
151
151
  }
152
152
  if (ReactForwardRefSymbol && render["$$typeof"] === ReactForwardRefSymbol) {
@@ -227,7 +227,7 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
227
227
  } else {
228
228
  ret = proxy;
229
229
  }
230
- return observe3 || useMemo5 ? memo(ret) : ret;
230
+ return observe3 || useMemo4 ? memo(ret) : ret;
231
231
  }
232
232
  function observer(component) {
233
233
  return createReactiveComponent(component, true);
@@ -383,20 +383,33 @@ function Switch({
383
383
  const child = children[useSelector(value)];
384
384
  return (_b = child ? child() : (_a = children["default"]) == null ? void 0 : _a.call(children)) != null ? _b : null;
385
385
  }
386
- function useComputed(compute, set, deps) {
386
+ function useObservable(initialValue, deps) {
387
+ var _a;
388
+ const ref = useRef({});
389
+ ref.current.value = initialValue;
390
+ const depsObs$ = deps ? useObservable(deps) : void 0;
391
+ if (!((_a = ref.current) == null ? void 0 : _a.obs$)) {
392
+ const value = depsObs$ ? () => {
393
+ depsObs$.get();
394
+ return computeSelector(ref.current.value);
395
+ } : initialValue;
396
+ ref.current.obs$ = observable(value);
397
+ }
398
+ if (depsObs$) {
399
+ depsObs$.set(deps);
400
+ }
401
+ return ref.current.obs$;
402
+ }
403
+
404
+ // src/react/useComputed.ts
405
+ function useComputed(get, set, deps) {
387
406
  if (!deps && isArray(set)) {
388
407
  deps = set;
389
408
  set = void 0;
390
409
  }
391
- const ref = useRef({});
392
- ref.current.compute = compute;
393
- ref.current.set = set;
394
- return useMemo(
395
- () => computed(
396
- () => isFunction(ref.current.compute) ? ref.current.compute() : ref.current.compute,
397
- set ? (value) => ref.current.set(value) : void 0
398
- ),
399
- deps || []
410
+ return useObservable(
411
+ set ? linked({ get, set: ({ value }) => set(value) }) : get,
412
+ deps
400
413
  );
401
414
  }
402
415
  var useEffectOnce = (effect, deps) => {
@@ -436,13 +449,6 @@ function useMount(fn) {
436
449
  }, []);
437
450
  }
438
451
  var useMountOnce = useMount;
439
- function useObservable(initialValue) {
440
- const ref = useRef();
441
- if (!ref.current) {
442
- ref.current = observable(initialValue);
443
- }
444
- return ref.current;
445
- }
446
452
 
447
453
  // src/react/useIsMounted.ts
448
454
  function useIsMounted() {