enhance: Correctly log throttlable fetch actions in devtool

Author: ntucker

.changeset/hip-donkeys-matter.md

@@ -0,0 +1,6 @@
+---
+'@data-client/core': patch
+'@data-client/react': patch
+---
+
+Disable devtools dispatch feature as it is not usable

.changeset/rude-donuts-smell.md

@@ -0,0 +1,10 @@
+---
+'@data-client/core': patch
+'@data-client/react': patch
+---
+
+fix: Devtools correctly logs fetch actions
+
+We inspect fetches against inflight to see if they are throttled;
+However, we previously did this after we sent the action to NetworkManager, which
+meant it would also skip logging any throttlable fetches - even if they were not throttled.

.changeset/wild-rabbits-joke.md

@@ -0,0 +1,6 @@
+---
+'@data-client/core': patch
+'@data-client/react': patch
+---
+
+Improve typing for devtools options

packages/core/src/manager/DevtoolsManager.ts

@@ -37,6 +37,18 @@ if (process.env.NODE_ENV !== 'production') {
   DEFAULT_CONFIG = {
     name: `Data Client: ${globalThis.document?.title}`,
     autoPause: true,
+    features: {
+      pause: true, // start/pause recording of dispatched actions
+      lock: true, // lock/unlock dispatching actions and side effects
+      persist: false, // persist states on page reloading
+      export: true, // export history of actions in a file
+      import: 'custom', // import history of actions from a file
+      jump: true, // jump back and forth (time travelling)
+      skip: true, // skip (cancel) actions
+      reorder: true, // drag and drop actions in the history list
+      dispatch: false, // dispatch custom actions or action creators
+      test: false, // generate tests for the selected actions
+    },
     actionSanitizer: (action: ActionTypes) => {
       if (!('endpoint' in action)) return action;
       return {
@@ -131,6 +143,7 @@ export default class DevToolsManager implements Manager {
         const reducer = createReducer(controller as any);
         let state = controller.getState();
         return next => action => {
+          const shouldSkip = skipLogging?.(action);
           const ret = next(action);
           if (this.started) {
             // we track state changes here since getState() will only update after a batch commit
@@ -139,7 +152,7 @@ export default class DevToolsManager implements Manager {
             state = controller.getState();
           }
           ret.then(() => {
-            if (skipLogging?.(action)) return;
+            if (shouldSkip) return;
             this.handleAction(action, state.optimistic.reduce(reducer, state));
           });
           return ret;

packages/core/src/manager/devtoolsTypes.ts

@@ -1,4 +1,7 @@
-type Action = any;
+import { ActionTypes } from '../actions.js';
+import { State } from '../types.js';
+
+type Action = ActionTypes;
 type ActionCreator<T> = any;
 
 // taken from https://github.com/reduxjs/redux-devtools/blob/main/packages/redux-devtools-extension/src/index.ts
@@ -78,7 +81,7 @@ export interface EnhancerOptions {
   /**
    * function which takes `state` object and index as arguments, and should return `state` object back.
    */
-  stateSanitizer?: <S>(state: S, index: number) => S;
+  stateSanitizer?: <S extends State<unknown>>(state: S, index: number) => S;
   /**
    * *string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers).
    * If `actionsWhitelist` specified, `actionsBlacklist` is ignored.
@@ -105,7 +108,10 @@ export interface EnhancerOptions {
    * called for every action before sending, takes `state` and `action` object, and returns `true` in case it allows sending the current data to the monitor.
    * Use it as a more advanced version of `actionsDenylist`/`actionsAllowlist` parameters.
    */
-  predicate?: <S, A extends Action>(state: S, action: A) => boolean;
+  predicate?: <S extends State<unknown>, A extends Action>(
+    state: S,
+    action: A,
+  ) => boolean;
   /**
    * if specified as `false`, it will not record the changes till clicking on `Start recording` button.
    * Available only for Redux enhancer, for others use `autoPause`.

website/src/components/Playground/editor-types/@data-client/core.d.ts

@@ -876,7 +876,7 @@ declare class PollingSubscription implements Subscription {
     protected lastFetchTime(): number;
 }
 
-type Action = any;
+type Action = ActionTypes;
 type ActionCreator<T> = any;
 interface EnhancerOptions {
     /**
@@ -950,7 +950,7 @@ interface EnhancerOptions {
     /**
      * function which takes `state` object and index as arguments, and should return `state` object back.
      */
-    stateSanitizer?: <S>(state: S, index: number) => S;
+    stateSanitizer?: <S extends State<unknown>>(state: S, index: number) => S;
     /**
      * *string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers).
      * If `actionsWhitelist` specified, `actionsBlacklist` is ignored.
@@ -977,7 +977,7 @@ interface EnhancerOptions {
      * called for every action before sending, takes `state` and `action` object, and returns `true` in case it allows sending the current data to the monitor.
      * Use it as a more advanced version of `actionsDenylist`/`actionsAllowlist` parameters.
      */
-    predicate?: <S, A extends Action>(state: S, action: A) => boolean;
+    predicate?: <S extends State<unknown>, A extends Action>(state: S, action: A) => boolean;
     /**
      * if specified as `false`, it will not record the changes till clicking on `Start recording` button.
      * Available only for Redux enhancer, for others use `autoPause`.