scoped-model

react-scoped-model and preact-scoped-model

• Removed useAsyncSelector, useSuspenseSelector and useSuspendedState.
• Removed suspense cache for internal notifiers.
• Added useScopedModelExists
• Added shouldNotify on scoped model options.
• Added lifecycle to internal notifiers.
• ScopedModelOptions generic signature changed from <Props> to <Model, Props>
• Hook factory option generic signatures changed in response to ScopedModelOptions.

react-scoped-model-swr

• Fixed deprecated SWR type signature
• Changed options generic signature in response to ScopedModelOptions

• Added mutate, mutateSelf and setSelf to get and set methods for createGraphNode. This allows direct mutation to other nodes and self-dispatch.
• Changed set for get. set is now similar to the set interface of the set field, which now accepts a target node and action.

• Added refreshInterval, refreshWhenHidden, refreshWhenBlur and refreshWhenOffline to SWR options.

• Added a global cache. By default, all SWR Graph nodes and node factories now share the same cache when these nodes share the same key. The global cache can be mutated or triggered for revalidation through the exported mutate and trigger functions, which accept a key.
• key is now required.
• Added useOwnCache to the options.
• Added throttling mechanism for SWR graph nodes for race conditions.

• Added subscription field for get callbacks. This is a function for managing subscription from external sources e.g. Observables, Events, etc. The function receives a callback which runs the subscription process, and may return a callback for cleanup logic.

const example = createGraphNode({
  get: ({ set, subscription }) => {
    subscription(() => {
      let count = 0;
      const interval = setTimeout(() => {
        count += 1;
        set(count);
      }, 1000);

      return () => {
        clearTimeout(interval);
      };
    });

    return 0;
  },
});

• Drops the package scope name.
• Add useSnapshot hook and createSnapshot hook factory.
• Fix useAsyncSelector not resetting to pending when model changes.
• Fix type unsoundness of hooks.

• Drops the package scope name.
• Reworked the entire core logic. Core is now separated to graph-state as well as node constructors.
• Adds useGraphNodeReset and useGraphNodeSnapshot.
• Adds reset for useGraphNodeState.

• Drops the package scope name.
• Reworked the entire core logic. Core is now separated to graph-state as well as node constructors.
• Adds useGraphNodeReset and useGraphNodeSnapshot.
• Adds reset for useGraphNodeState.

• Drops the package scope name.
• Bump to new package name of react-scoped-model.

• Drops the package scope name.
• Add useSnapshot hook and createSnapshot hook factory.
• Fix useAsyncSelector not resetting to pending when model changes.
• Fix type unsoundness of hooks.

• Added useValueOnce and useSelectorOnce hooks. These hooks receives the model's state and does not subscribe to further state changes.
• Added createValueOnce and createSelectorOnce hook factories.

• Replaced all Model prefix with ScopedModel prefix.
• Replaced functions that infers to Model and Props type to generic types that infers to the actual ScopedModel type.

• Introduces the nullary scoped model, a kind of scoped model that doesn't receive any props and skips the props comparison process of React.memo.

import { createNullaryModel } from '@lxsmnsyc/react-scoped-model';

In comparison with a normal scoped model, the nullary scoped model cannot receive props and only has a displayName as a model option.

• createStateModel and createReducerModel is now a subset of createNullaryModel.
• Fix race conditions for useAsyncSelector when an unstable selector reference is given.

• Adds a new scoped model property shouldUpdate which is a function that tells the model if it should recompute based on the received props. This is similar internally to React.memo.
• Adds proper names to the Context Provider for better debugging experience.
• Models with no displayName property are now assigned with a default name and a unique id instead of AnonymousScopedModel.

This version overhauls the current API to a new one with additional new features.

• Model hooks can now return any kind of value and is now not constrained to objects.
• Hooks are now separated and has been turned into a global hook. Hooks such as useSelector will be accepting the Scoped Model instance as the first parameter.
• Now includes hook factories for creating hooks based on the global hooks. For instance, createSelector(model, selector) creates a hook based on useSelector. This helps stabilize references specially for functions used for transform states.
• Now includes model factories for primitive model logic. Factories includes createStateModel based on useState and more.
• Deprecates the ScopedModelInterface type and other types.

• Added useValue hook which allows consuming the whole state from the model

const { count, increment, decrement } = Counter.useValue();

The hook also accepts an optional comparison function on comparing the captured state with the current state.

• useProperty and useProperties has been removed.

• Replaced optional listening for useSelector and useSelectors with conditional re-rendering. These hooks now accepts a function as a second parameter which compares the previously transformed value with the newly transformed value, allowing when should the selector update the component. This is useful for users who wants to only update partially or strictly with a particular criteria.

function selectUserInfo(userDetails) {
  return {
    name: userDetails.name,
    address: userDetails.address,
  };
}

function compareUserInfo(prev, next) {
  return prev.name !== next.name || prev.address !== next.address;
}

const { name, address } = UserDetails.useSelector(selectUserInfo, compareUserInfo);

• Now allows any kind of value to be returned in the scoped model instead of an object. This, in turn, deprecates the useProperty and useProperties hooks. Please keep in mind that these are still usable in production but will raise an error in development. Future versions will remove these two hooks.

• Added 3 new hooks:
  • useAsyncSelector: similar to useSelector but allows you to return a Promise.

function AsyncCount() {
  const state = Counter.useAsyncSelector(async (state) => {
    await sleep(500);

    return state.count;
  });


  switch (state.status) {
    case 'failure': return <h1>An error occured.</h1>;
    case 'success': return <h1>Count: {state.data}</h1>;
    case 'pending': return <h1>Loading...</h1>;
    default: 
  }
}

• useSuspendedSelector: similar to useAsyncSelector but for Suspense.

function SuspendedCount() {
  const count = Counter.useSuspendedSelector(async (state) => {
    await sleep(500);

    return state.count;
  }, 'count/suspended');

  return (
    <h1>Count: {count}</h1>
  );
}

• useSuspendedState: allows you to indefinitely suspended a component.

function SuspendedState() {
  const count = Counter.useSuspendedState((state) => ({
    count: state.count,
    suspend: state.count < 5,
  }), 'state/suspended');

  return (
    <h1>Count: {count}</h1>
  );
}

• Added support for prop-types.
• Added options for models. Options can be passed as a second parameter for createModel and can contain the following properties:

• displayName: the name for the model's Provider, useful for DevTools inspection, profiling and debugging.
• propTypes: Validation map provided by prop-types.
• defaultProps

• Replaced useMemo and useCallback with useConstant for faster memoization process.
• Removed IProviderProps as it shares the same properties as React.PropsWithChildren
• Hooks can now throw an error of type MissingScopedModelError to report that the scoped model instance nowhere to be found in the ancestor component tree, unlike before wherein it silently assumes that the tree has the instance, whether or not it does actually exists.