add support for React dev Tools!

Author: salvoravida

src/core/devTools.js

@@ -0,0 +1,37 @@
+import { getMagicSelf } from './magicSelf';
+
+export const devToolConfig = {
+  active: false,
+  stateKey: '__UNIVERSAL_HOOKS__',
+  show: 'object' // object, array, map
+};
+
+export function supportReactDevTools({ active, stateKey, show }) {
+  if (stateKey) devToolConfig.stateKey = stateKey;
+  if (show) devToolConfig.show = show;
+  devToolConfig.active = !!active;
+}
+
+export function setDevToolsHookState(name, state) {
+  if (devToolConfig.active) {
+    const self = getMagicSelf();
+    const { stateKey, show } = devToolConfig;
+    if (!self.state) self.state = {};
+    if (!self.state[stateKey]) self.state[stateKey] = show === 'map' ? new Map() : show === 'array' ? [] : {};
+
+    if (show === 'map') {
+      self.state[stateKey].set(name, state);
+    } else if (show === 'array') {
+      const hookState = self.state[stateKey].find(h => h.hasOwnProperty(name));
+      if (hookState) {
+        hookState[name] = state;
+      } else {
+        self.state[stateKey].push({ [name]: state });
+      }
+    } else {
+      const hookNames = Object.keys(self.state[stateKey]);
+      const hookName = hookNames.find(s => s.split(':')[1] === name);
+      self.state[stateKey][hookName || `${hookNames.length.toString().padStart(2, '0')}:${name}`] = state;
+    }
+  }
+}

src/core/useClassContext.js

@@ -3,10 +3,20 @@
  */
 
 import invariant from 'tiny-invariant';
-import { getMagicDispatcher, getMagicSelf } from './magicSelf';
+import { checkSymbol, getMagicDispatcher, getMagicSelf } from './magicSelf';
+import { setDevToolsHookState } from './devTools';
+import { createHook } from './createHook';
 
-export const useClassContext = (context, observedBits) => {
+export function useClassContextKey(keySymbol, context, observedBits) {
+  checkSymbol('useClassContext', keySymbol);
   getMagicSelf(); // invariant hook outside render method
   invariant(context && context.Provider && context.Consumer, 'Context should be React.createContext object!');
-  return getMagicDispatcher().readContext(context, observedBits);
-};
+
+  const contextValue = getMagicDispatcher().readContext(context, observedBits);
+
+  setDevToolsHookState(keySymbol.description, contextValue);
+
+  return contextValue;
+}
+
+export const useClassContext = createHook('Contexts', useClassContextKey);

src/core/useClassDebugValue.js

@@ -0,0 +1,16 @@
+/**
+ *  https://github.com/salvoravida/react-class-hooks
+ */
+
+import { createHook } from './createHook';
+import { checkSymbol } from './magicSelf';
+import { setDevToolsHookState } from './devTools';
+
+export function useClassDebugValueKey(keySymbol, value, formatter) {
+  checkSymbol('useDebugValueKey', keySymbol);
+  const viewValue= typeof formatter==="function"? formatter(value) : value;
+  setDevToolsHookState(keySymbol.description,viewValue)
+}
+
+export const useClassDebugValue = createHook('DebugValue', useClassDebugValueKey);
+

src/core/useClassMemo.js

@@ -6,6 +6,7 @@ import invariant from 'tiny-invariant';
 import { checkSymbol, getMagicSelf, MAGIC_MEMOS } from './magicSelf';
 import { inputsArrayEqual } from './inputsEqual';
 import { createHook, createNamedHook } from './createHook';
+import { setDevToolsHookState } from './devTools';
 
 export const useClassMemoKey = (keySymbol, creator, inputs) => {
   checkSymbol('useClassMemo', keySymbol);
@@ -43,7 +44,9 @@ export const useClassMemoKey = (keySymbol, creator, inputs) => {
     }
   }
 
-  return self[MAGIC_MEMOS][keySymbol].value;
+  const returnValue = self[MAGIC_MEMOS][keySymbol].value;
+  setDevToolsHookState(keySymbol.description, returnValue);
+  return returnValue;
 };
 
 export const useClassMemo = createHook('Memos', useClassMemoKey);

src/core/useClassRefKey.js

@@ -3,6 +3,7 @@
  */
 
 import { checkSymbol, getMagicSelf, MAGIC_REFS } from './magicSelf';
+import { setDevToolsHookState } from './devTools';
 
 export function useClassRefKey(keySymbol, initialValue) {
   checkSymbol('useClassRefKey', keySymbol);
@@ -19,5 +20,7 @@ export function useClassRefKey(keySymbol, initialValue) {
     self[MAGIC_REFS][keySymbol] = ref;
   }
 
-  return self[MAGIC_REFS][keySymbol];
+  const returnValue = self[MAGIC_REFS][keySymbol];
+  setDevToolsHookState(keySymbol.description, returnValue);
+  return returnValue;
 }

src/core/useClassStateKey.js

@@ -3,6 +3,7 @@
  */
 
 import { getMagicSelf, checkSymbol, MAGIC_STATES } from './magicSelf';
+import { setDevToolsHookState } from './devTools';
 
 export function useClassStateKey(keySymbol, initialValue) {
   checkSymbol('useClassStateKey', keySymbol);
@@ -29,5 +30,6 @@ export function useClassStateKey(keySymbol, initialValue) {
   }
 
   const { value, setValue } = self[MAGIC_STATES][keySymbol];
+  setDevToolsHookState(keySymbol.description, value);
   return [value, setValue];
 }

src/index.js

@@ -10,6 +10,8 @@ import { useClassReducer } from './core/useClassReducer';
 import { useClassRef, refCallback } from './core/useClassRef';
 import { useClassContext } from './core/useClassContext';
 import { useClassImperativeHandle } from './core/useClassImperativeHandle';
+import { useClassDebugValue } from './core/useClassDebugValue';
+import { supportReactDevTools } from './core/devTools';
 
 const useClassLayoutEffect = useClassEffect;
 
@@ -23,5 +25,7 @@ export {
   useClassRef,
   refCallback,
   useClassContext,
-  useClassImperativeHandle
+  useClassImperativeHandle,
+  useClassDebugValue,
+  supportReactDevTools
 };