feat: add option to display private atoms

arjunvegda · arjunvegda · commit d1875ee58ca2 · 2023-03-01T18:33:43.000-05:00
diff --git a/README.md b/README.md
@@ -119,6 +119,9 @@ type DevToolsProps = {
     // `raw` - parses the top level atom value but does not parse the values of atoms within atoms
     // `deep-nested` - Parses values of atoms within atoms. Linear performance curve. Bigger the object, the slower the performance
     atomValueParser?: 'raw' | 'deep-nested';
+    // Private atoms are used internally in atoms like `atomWithStorage` or `atomWithLocation`, etc. to manage state.
+    // Defaults to `false`
+    shouldShowPrivateAtoms?: boolean;
   };
 };
 ```
diff --git a/package.json b/package.json
@@ -103,6 +103,7 @@
     "@storybook/testing-library": "^0.0.14-next.1",
     "@swc/core": "^1.3.25",
     "@swc/jest": "^0.2.24",
+    "@tanstack/query-core": "^4.24.10",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
@@ -129,7 +130,8 @@
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "jest-watch-typeahead": "^2.2.1",
-    "jotai": "^2.0.0",
+    "jotai": "^2.0.2",
+    "jotai-tanstack-query": "^0.5.0",
     "lint-staged": "^13.1.0",
     "prettier": "^2.8.1",
     "react": "^18.2.0",
diff --git a/src/DevTools/Extension/components/Shell/components/AtomViewer/atoms.ts b/src/DevTools/Extension/components/Shell/components/AtomViewer/atoms.ts
@@ -1,8 +1,10 @@
 import { atom } from 'jotai/vanilla';
 import { atomWithDefault } from 'jotai/vanilla/utils';
 import { AnyAtom, ValuesAtomTuple } from 'src/types';
+import { devToolsOptionsAtom } from '../../../../../atoms/devtools-options';
 import { valuesAtom } from '../../../../../atoms/values-atom';
 import { filterAtomsByString } from './utils/filter-atoms-by-string';
+import { filterPrivateAtoms } from './utils/filter-private-atoms';
 
 type SelectedAtomAtomData = { atomKey: string; atom: AnyAtom };
 
@@ -14,10 +16,18 @@ export const selectedAtomAtom = atom<SelectedAtomAtomData | undefined>(
 const searchInputInternalValueAtom = atom('');
 
 export const filteredValuesAtom = atomWithDefault<ValuesAtomTuple[]>((get) => {
-  return filterAtomsByString(
+  const filteredByString = filterAtomsByString(
     get(searchInputInternalValueAtom),
     get(valuesAtom),
   );
+
+  const { shouldShowPrivateAtoms } = get(devToolsOptionsAtom);
+  if (!shouldShowPrivateAtoms) {
+    const filteredByPrivate = filterPrivateAtoms(filteredByString);
+    return filteredByPrivate;
+  }
+
+  return filteredByString;
 });
 
 export const searchInputAtom = atom(
diff --git a/src/DevTools/Extension/components/Shell/components/AtomViewer/components/AtomDetail/components/AtomDependentsList.tsx b/src/DevTools/Extension/components/Shell/components/AtomViewer/components/AtomDetail/components/AtomDependentsList.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Box, Code, List, Text } from '@mantine/core';
 import { AnyAtom } from 'src/types';
+import { useDevToolsOptionsValue } from '../../../../../../../../atoms/devtools-options';
 import { useAtomsSnapshots } from '../../../../../../../../hooks/useAtomsSnapshots';
 import { parseDebugLabel } from '../../../../../../../../utils/parse-debug-label';
 
@@ -12,11 +13,23 @@ export const AtomDependentsList = ({
   atom,
 }: AtomDependentsListProps): JSX.Element => {
   const { dependents } = useAtomsSnapshots();
+  const devtoolsOptions = useDevToolsOptionsValue();
 
   const depsForAtom = React.useMemo(() => {
     const arr = Array.from(dependents.get(atom) || []);
-    return arr.filter((a) => a.toString() !== atom.toString());
-  }, [dependents, atom]);
+    const filteredCurrentAtom = arr.filter(
+      (a) => a.toString() !== atom.toString(),
+    );
+
+    if (!devtoolsOptions.shouldShowPrivateAtoms) {
+      const filteredPrivateAtoms = filteredCurrentAtom.filter(
+        (a) => !a?.debugPrivate,
+      );
+      return filteredPrivateAtoms;
+    }
+
+    return filteredCurrentAtom;
+  }, [dependents, devtoolsOptions.shouldShowPrivateAtoms, atom]);
 
   const listOfDependents = React.useMemo(
     () =>
diff --git a/src/DevTools/Extension/components/Shell/components/AtomViewer/components/AtomDetail/components/AtomMetaDetails.tsx b/src/DevTools/Extension/components/Shell/components/AtomViewer/components/AtomDetail/components/AtomMetaDetails.tsx
@@ -1,14 +1,19 @@
 import * as React from 'react';
-import { Box, Code, Text, Title } from '@mantine/core';
+import { Box, Code, MantineColor, Text, Title, Tooltip } from '@mantine/core';
 import { AtomValueType } from '../../../../../../../../utils/get-type-of-atom-value';
 import { parseDebugLabel } from '../../../../../../../../utils/parse-debug-label';
 
 type AtomDetailItemProps = {
   label: string;
   value: string;
+  color?: MantineColor;
 };
 
-const DisplayAtomDetailsItem = ({ label, value }: AtomDetailItemProps) => {
+const DisplayAtomDetailsItem = ({
+  label,
+  value,
+  color,
+}: AtomDetailItemProps) => {
   return (
     <Box mb={10}>
       <Text
@@ -20,18 +25,25 @@ const DisplayAtomDetailsItem = ({ label, value }: AtomDetailItemProps) => {
       >
         {label}
       </Text>
-      <Code data-testid={`display-detail-item-value-${value}`}>{value}</Code>
+      <Code data-testid={`display-detail-item-value-${value}`} color={color}>
+        {value}
+      </Code>
     </Box>
   );
 };
 
 type AtomMetaDetailsProps = {
-  debugLabel?: string;
+  debugLabel?: string | undefined;
   atomValueType: AtomValueType;
+  isAtomPrivate?: boolean | undefined;
 };
 
 export const AtomMetaDetails = React.memo(
-  ({ debugLabel, atomValueType }: AtomMetaDetailsProps): JSX.Element => {
+  ({
+    debugLabel,
+    atomValueType,
+    isAtomPrivate,
+  }: AtomMetaDetailsProps): JSX.Element => {
     return (
       <Box>
         <Title size="h3" mb={10}>
@@ -45,6 +57,9 @@ export const AtomMetaDetails = React.memo(
           value={parseDebugLabel(debugLabel)}
         />
         <DisplayAtomDetailsItem label="Value type" value={atomValueType} />
+        {isAtomPrivate && (
+          <DisplayAtomDetailsItem label="Private" value={'Yes'} color={'red'} />
+        )}
       </Box>
     );
   },
diff --git a/src/DevTools/Extension/components/Shell/components/AtomViewer/components/AtomDetail/components/AtomParseRawValue.tsx b/src/DevTools/Extension/components/Shell/components/AtomViewer/components/AtomDetail/components/AtomParseRawValue.tsx
@@ -2,36 +2,36 @@ import React from 'react';
 import { Box, Text } from '@mantine/core';
 import { AnyAtomValue } from 'src/types';
 import {
-  AtomValueType,
+  ErrorSymbol,
   stringifyAtomValue,
 } from '../../../../../../../../utils/';
+import { ErrorMessage } from '../../../../ErrorMessage';
 import {
   MemoizedValueRenderer,
   getPrismLanguageType,
 } from './MemoizedValueRenderer';
 
 type AtomParseRawValueValueProps = {
   atomValue: AnyAtomValue;
-  atomValueType: AtomValueType;
 };
 
 export const AtomParseRawValueValue = ({
   atomValue,
-  atomValueType,
 }: AtomParseRawValueValueProps): JSX.Element => {
   const prismLanguageType = getPrismLanguageType(atomValue);
+  const parsedValue = stringifyAtomValue(atomValue);
 
   return (
     <Box>
       <Text fw="bold" mb="sm">
         Raw value
       </Text>
       {/* TODO investigate if this could ever be the case given that the parent component is wrapped with suspense */}
-      {atomValueType === 'promise' ? (
-        <Text>No Preview available</Text>
+      {parsedValue === ErrorSymbol ? (
+        <ErrorMessage message="Failed to parse the value of the atom" />
       ) : (
         <MemoizedValueRenderer
-          value={stringifyAtomValue(atomValue)}
+          value={parsedValue}
           prismLanguageType={prismLanguageType}
         />
       )}
diff --git a/src/DevTools/Extension/components/Shell/components/AtomViewer/components/AtomDetail/components/DisplayAtomDetails.tsx b/src/DevTools/Extension/components/Shell/components/AtomViewer/components/AtomDetail/components/DisplayAtomDetails.tsx
@@ -29,13 +29,11 @@ export const DisplayAtomDetails = ({ atom }: DisplayAtomDetailsProps) => {
       <AtomMetaDetails
         debugLabel={atom?.debugLabel}
         atomValueType={atomValueType}
+        isAtomPrivate={atom?.debugPrivate}
       />
 
       {shouldDisplayRawValue && (
-        <AtomParseRawValueValue
-          atomValue={atomValue}
-          atomValueType={atomValueType}
-        />
+        <AtomParseRawValueValue atomValue={atomValue} />
       )}
 
       {shouldDisplayDeepNestedValue && (
diff --git a/src/DevTools/Extension/components/Shell/components/AtomViewer/components/AtomList/components/AtomListItem.tsx b/src/DevTools/Extension/components/Shell/components/AtomViewer/components/AtomList/components/AtomListItem.tsx
@@ -5,7 +5,7 @@ import { useThemeMode } from '../../../../../../../../hooks/useThemeMode';
 import { parseDebugLabel } from '../../../../../../../../utils/parse-debug-label';
 
 type AtomListItemProps = {
-  label?: string;
+  label?: string | undefined;
   onClick: (pos: number) => void;
   atomKey: string;
   pos: number;
diff --git a/src/DevTools/Extension/components/Shell/components/AtomViewer/utils/filter-atoms-by-string.ts b/src/DevTools/Extension/components/Shell/components/AtomViewer/utils/filter-atoms-by-string.ts
@@ -10,8 +10,8 @@ export const filterAtomsByString = (
     return defaultAtoms;
   }
 
-  return defaultAtoms.filter((atomTuple) => {
-    const parsedDebugLabel = parseDebugLabel(atomTuple[0].debugLabel);
+  return defaultAtoms.filter(([atomTuple]) => {
+    const parsedDebugLabel = parseDebugLabel(atomTuple?.debugLabel);
     const normalizedLabel = parsedDebugLabel.toLocaleLowerCase();
     return normalizedLabel.includes(normalizedStr);
   });
diff --git a/src/DevTools/Extension/components/Shell/components/AtomViewer/utils/filter-private-atoms.ts b/src/DevTools/Extension/components/Shell/components/AtomViewer/utils/filter-private-atoms.ts
@@ -0,0 +1,5 @@
+import { ValuesAtomTuple } from '../../../../../../../types';
+
+export const filterPrivateAtoms = (atoms: ValuesAtomTuple[]) => {
+  return atoms.filter(([atom]) => !atom?.debugPrivate);
+};
diff --git a/src/DevTools/Extension/components/Shell/components/ErrorMessage.tsx b/src/DevTools/Extension/components/Shell/components/ErrorMessage.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Sx, Text } from '@mantine/core';
+import { IconAlertCircle } from '@tabler/icons';
+import { useThemeMode } from '../../../../hooks/useThemeMode';
+type ErrorMessageProps = {
+  message: string;
+};
+
+const textStyles: Sx = {
+  display: 'flex',
+  alignItems: 'center',
+};
+
+export const ErrorMessage = ({ message }: ErrorMessageProps) => {
+  const themedRedColor = useThemeMode('red.8', 'red.5');
+
+  return (
+    <Text size="sm" fw="500" color={themedRedColor} sx={textStyles}>
+      <Text mr={5} sx={textStyles}>
+        <IconAlertCircle size={16} />
+      </Text>
+      {message}
+    </Text>
+  );
+};
diff --git a/src/DevTools/atoms/devtools-options.ts b/src/DevTools/atoms/devtools-options.ts
@@ -15,10 +15,18 @@ export type DevToolsOptions = {
      *  the bigger the object, the slower the performance
      */
     | 'deep-nested';
+  /**
+   * Defaults to `false`
+   *
+   * Private are atoms that are used by Jotai libraries internally to manage state.
+   * They're often used internally in atoms like `atomWithStorage` or `atomWithLocation`, etc. to manage state.
+   */
+  shouldShowPrivateAtoms?: boolean;
 };
 
 const defaultDevToolsOptions: DevToolsOptions = {
   atomValueParser: 'raw',
+  shouldShowPrivateAtoms: false,
 };
 
 const internalDevToolsOptions = atom<DevToolsOptions>(defaultDevToolsOptions);
diff --git a/src/DevTools/utils/stringify-atom-value.ts b/src/DevTools/utils/stringify-atom-value.ts
@@ -3,21 +3,28 @@ import { AnyAtomValue } from 'src/types';
 import { getTypeOfAtomValue } from './get-type-of-atom-value';
 
 const literalStringValues = ['bigint', 'symbol', 'undefined', 'function'];
+export const ErrorSymbol = Symbol('parsing-error');
 
-export const stringifyAtomValue = (atomValue: AnyAtomValue): string => {
+export const stringifyAtomValue = (
+  atomValue: AnyAtomValue,
+): string | typeof ErrorSymbol => {
   const type = getTypeOfAtomValue(atomValue);
 
   if (literalStringValues.includes(type)) {
     return String(atomValue);
   }
 
   const { json } = serialize(atomValue);
-  const result = JSON.stringify(json, null, 2);
+  try {
+    const result = JSON.stringify(json, null, 2);
 
-  // Perhaps a value that we couldn't serialize?
-  if (typeof result === 'undefined') {
-    return String(atomValue);
-  }
+    // Perhaps a value that we couldn't serialize?
+    if (typeof result === 'undefined') {
+      return String(atomValue);
+    }
 
-  return result;
+    return result;
+  } catch (e) {
+    return ErrorSymbol;
+  }
 };
diff --git a/src/stories/Default/DevTools.stories.tsx b/src/stories/Default/DevTools.stories.tsx
@@ -10,6 +10,7 @@ export default {
 
 type CustomStorybookProps = DevToolsProps & {
   'options.atomValueParser': 'raw' | 'deep-nested';
+  'options.shouldShowPrivateAtoms': boolean;
 };
 
 type Story = StoryObj<CustomStorybookProps>;
@@ -19,6 +20,7 @@ export const Default: Story = {
     const nextOptions = {
       ...args.options,
       atomValueParser: args['options.atomValueParser'],
+      shouldShowPrivateAtoms: args['options.shouldShowPrivateAtoms'],
     };
     const props = {
       ...args,
@@ -29,6 +31,7 @@ export const Default: Story = {
   args: {
     isInitialOpen: true,
     'options.atomValueParser': 'raw',
+    'options.shouldShowPrivateAtoms': false,
   },
   argTypes: {
     store: {
diff --git a/src/stories/Default/Playground/Playground.stories.tsx b/src/stories/Default/Playground/Playground.stories.tsx
@@ -23,6 +23,7 @@ export default {
 
 type CustomStorybookProps = DevToolsProps & {
   'options.atomValueParser': 'raw' | 'deep-nested';
+  'options.shouldShowPrivateAtoms': boolean;
 };
 
 type Story = StoryObj<CustomStorybookProps>;
@@ -32,6 +33,7 @@ export const Default: Story = {
     const nextOptions = {
       ...args.options,
       atomValueParser: args['options.atomValueParser'],
+      shouldShowPrivateAtoms: args['options.shouldShowPrivateAtoms'],
     };
     const props = {
       ...args,
@@ -54,6 +56,7 @@ export const Default: Story = {
   args: {
     isInitialOpen: true,
     'options.atomValueParser': 'raw',
+    'options.shouldShowPrivateAtoms': false,
   },
   argTypes: {
     store: {
diff --git a/src/stories/Default/Playground/Playground.tsx b/src/stories/Default/Playground/Playground.tsx
diff --git a/src/types.ts b/src/types.ts
diff --git a/yarn.lock b/yarn.lock
