Fix mask specifier priorities

Author: msanchezdev

package.json

@@ -164,6 +164,9 @@
     "use-sync-external-store": ">=1.2.0"
   },
   "peerDependenciesMeta": {
+    "@redux-devtools/utils": {
+      "optional": true
+    },
     "@types/react": {
       "optional": true
     },

src/middleware/devtools.ts

@@ -96,7 +96,7 @@ type FunctionPaths<T, Prefix extends string = ""> = {
       : never;
 }[keyof T & string];
 
-type ActionCreatorsMask<T extends Record<string, any> = Record<string, any>> = {
+type ActionCreatorsMask<T extends Record<string, any>> = {
   [K in FunctionPaths<T> | '*' | '**' | (string & {})]?: boolean | (
     // Allow overriding leafs
     K extends '*' | '**' | `${string}.*` | `${string}.**`
@@ -294,41 +294,21 @@ const devtoolsImpl: DevtoolsImpl =
         }
         return new Function('return ' + action)();
       }
-    if (options.actionCreators) {
+    
+    // Not using the redux plugin
+    if (!(api as any).dispatch && options.actionCreators) {
       try {
         evalAction = require('@redux-devtools/utils').evalAction;
+        actionCreators = getActionsArray(
+          initialState as Record<string, unknown>,
+          options.actionCreators as ActionCreatorsMask<{}>
+        );
+        // override to pass it to the extension connector, any is ok, we dont care about the type anymore
+        options.actionCreators = actionCreators as any;
       } catch {
         console.warn('[zustand devtools middleware] Please install @redux-devtools/utils to use actionCreators in devtools middleware');
       }
-      actionCreators = getActionsArray(
-        initialState as Record<string, unknown>,
-        options.actionCreators as ActionCreatorsMask<{}>
-      );
-      // override to pass it to the extension connector, any is ok, we dont care about the type anymore
-      options.actionCreators = actionCreators as any;
-    }
 
-    // We connect after extracting action creators from the initial state
-    const { connection, ...connectionInformation } = extractConnectionInformation(store, extensionConnector, options);
-
-    if (connectionInformation.type === 'untracked') {
-      connection?.init(initialState)
-    } else {
-      connectionInformation.stores[connectionInformation.store] = api
-      connection?.init(
-        Object.fromEntries(
-          Object.entries(connectionInformation.stores).map(([key, store]) => [
-            key,
-            key === connectionInformation.store
-              ? initialState
-              : store.getState(),
-          ]),
-        ),
-      )
-    }
-    
-    // Not using the redux plugin
-    if (!(api as any).dispatchFromDevtools && options.actionCreators) {
       (api as any).dispatchFromDevtools = true;
       (api as any).dispatch = (payload: {
         type: string,
@@ -353,6 +333,25 @@ const devtoolsImpl: DevtoolsImpl =
       }
     }
 
+    // We connect after extracting action creators from the initial state
+    const { connection, ...connectionInformation } = extractConnectionInformation(store, extensionConnector, options);
+
+    if (connectionInformation.type === 'untracked') {
+      connection?.init(initialState)
+    } else {
+      connectionInformation.stores[connectionInformation.store] = api
+      connection?.init(
+        Object.fromEntries(
+          Object.entries(connectionInformation.stores).map(([key, store]) => [
+            key,
+            key === connectionInformation.store
+              ? initialState
+              : store.getState(),
+          ]),
+        ),
+      )
+    }
+
     if (
       (api as any).dispatchFromDevtools &&
       typeof (api as any).dispatch === 'function'
@@ -528,40 +527,44 @@ function maskToRegex(mask: string): RegExp {
 }
 
 function getActionsArray<T extends Record<string, any>>(actionCreators: T, mask: ActionCreatorsMask<T>): ActionCreatorObject[] {
-  if (Array.isArray(actionCreators)) return actionCreators;
-  if (typeof actionCreators !== 'object') return [];
-
-  const getActionsArray = require('@redux-devtools/utils').getActionsArray;
-  const flat = getActionsArray(actionCreators);
+  const getActions = require('@redux-devtools/utils').getActionsArray;
+  const flat = getActions(actionCreators);
   const actions = new Map<string, ActionCreatorObject>();
   const customActions = new Map<string, ActionCreatorObject>(
-    getActionsArray(mask).map((action: ActionCreatorObject) => [action.name, action])
+    getActions(mask).map((action: ActionCreatorObject) => [action.name, action])
   );
+
+  // Sort matchers by specificity
   const matchers = Object.entries(mask ?? {})
     .map(([key, picked]) => ({
       matcher: maskToRegex(key),
       picked,
-      wildcard: key.includes('*'),
-    }));
+      key,
+    })).toSorted((a, b) => {
+      const aIsDoubleWildcard = a.key.includes('**');
+      const bIsDoubleWildcard = b.key.includes('**');
+      if (aIsDoubleWildcard !== bIsDoubleWildcard) {
+        return aIsDoubleWildcard ? -1 : 1;
+      }
+      
+      const aIsSingleWildcard = a.key.includes('*') && !aIsDoubleWildcard;
+      const bIsSingleWildcard = b.key.includes('*') && !bIsDoubleWildcard;
+      if (aIsSingleWildcard !== bIsSingleWildcard) {
+        return aIsSingleWildcard ? -1 : 1;
+      }
+      
+      return a.key.length - b.key.length;
+    });
 
-  next_action: for (const action of flat) {
-    for (const { matcher, picked, wildcard } of matchers) {
+  for (const action of flat) {
+    for (const { matcher, picked } of matchers) {
       if (matcher.test(action.name)) {
-        if (!wildcard) {
-          if (picked) {
-            actions.set(action.name, 
-              customActions.get(action.name) ?? {
-              name: action.name,
-              func: action.func,
-              args: action.args,
-            });
-          } else {
-            actions.delete(action.name);
-          }
-          continue next_action;
+        if (picked === false) {
+          actions.delete(action.name);
+          continue;
         }
 
-        actions.set(action.name, {
+        actions.set(action.name, customActions.get(action.name) ?? {
           name: action.name,
           func: typeof picked === 'function' ? picked : action.func,
           args: action.args,
@@ -570,5 +573,9 @@ function getActionsArray<T extends Record<string, any>>(actionCreators: T, mask:
     }
   }
 
+  for (const [name, action] of customActions.entries()) {
+    actions.set(name, action);
+  }
+
   return Array.from(actions.values());
 }