fix: handle atom containing undefined values

src/DevTools/Extension/components/Shell/components/AtomViewer/components/AtomDetail/components/AtomParseRawValue.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Box, Text } from '@mantine/core';
 import { AnyAtomValue } from 'src/types';
 import {

src/DevTools/Extension/components/Shell/components/AtomViewer/components/AtomDetail/components/DisplayAtomDetails.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Stack } from '@mantine/core';
 import { useAtomValue } from 'jotai/react';
 import { AnyAtom } from 'src/types';

src/DevTools/Extension/components/Shell/components/AtomViewer/components/AtomDetail/components/MemoizedValueRenderer.tsx

@@ -1,10 +1,10 @@
-import { memo } from 'react';
+import * as React from 'react';
 import { Prism, PrismProps } from '@mantine/prism';
 import { AnyAtomValue } from 'src/types';
 import { getTypeOfAtomValue } from '../../../../../../../../utils';
 
 // List of types to render in JavaScript syntax
-const javaScriptLanguageTypes = ['object', 'array', 'null'];
+const javaScriptLanguageTypes = ['object', 'array', 'null', 'undefined'];
 
 export const getPrismLanguageType = (
   atomValue: AnyAtomValue,
@@ -23,7 +23,7 @@ type MemoizedValueRendererProps = {
   prismLanguageType: ReturnType<typeof getPrismLanguageType>;
 };
 
-export const MemoizedValueRenderer = memo(
+export const MemoizedValueRenderer = React.memo(
   ({ prismLanguageType, value }: MemoizedValueRendererProps): JSX.Element => {
     return (
       <Prism language={prismLanguageType} mb={10} copyLabel="Copy value">

src/DevTools/utils/get-type-of-atom-value.ts

@@ -3,11 +3,10 @@ import { AnyAtom, AnyAtomValue, WithInitialValue } from 'src/types';
 
 const isValueAtom = (value: AnyAtomValue): value is AnyAtom => {
   return (
-    typeof (value as AnyAtom).read === 'function' ||
+    typeof (value as Partial<AnyAtom>)?.read === 'function' ||
     typeof (value as WritableAtom<any, any, any>)?.write === 'function' ||
-    !!(value as WithInitialValue).init ||
-    !!(value as AnyAtom).debugLabel ||
-    (value as AnyAtom).toString().includes('atom')
+    !!(value as WithInitialValue)?.init ||
+    !!(value as Partial<AnyAtom>)?.debugLabel
   );
 };
 

src/DevTools/utils/stringify-atom-value.ts

@@ -4,9 +4,15 @@ import { getTypeOfAtomValue } from './get-type-of-atom-value';
 
 export const stringifyAtomValue = (atomValue: AnyAtomValue): string => {
   const type = getTypeOfAtomValue(atomValue);
+
+  if (type === 'undefined') {
+    return 'undefined';
+  }
+
   if (type === 'bigint') {
     return String(atomValue);
   }
+
   const { json } = serialize(atomValue);
   return JSON.stringify(json, null, 2);
 };

src/stories/Default/Demos/Random.tsx

@@ -14,6 +14,9 @@ textAtom.debugLabel = 'textAtom';
 const bigintAtom = atom(BigInt(Number.MAX_SAFE_INTEGER));
 bigintAtom.debugLabel = 'bigintAtom';
 
+const atomReturnsUndefined = atom(undefined);
+atomReturnsUndefined.debugLabel = 'atomReturnsUndefined';
+
 const nestedObjectAtom = atom((get) => {
   return {
     nestedObject: {
@@ -28,8 +31,6 @@ nestedObjectAtom.debugLabel = 'nestedObjectAtom';
 
 const atomsInAtomsCountAtom = atom(atom(atom((get) => get(countAtom))));
 atomsInAtomsCountAtom.debugLabel = 'atomsInAtomsCountAtom';
-// const circularAtom = atom({ foo: atom({ bar: atom(1) }) });
-// circularAtom.debugLabel = 'circularAtom';
 
 export const Random = () => {
   const [count, setCount] = useAtom(countAtom, demoStoreOptions);
@@ -38,6 +39,10 @@ export const Random = () => {
   const nestedObject = useAtomValue(nestedObjectAtom, demoStoreOptions);
   const _text = useAtomValue(textAtom, demoStoreOptions);
   const _bigint = useAtomValue(bigintAtom, demoStoreOptions);
+  const _atomReturnsUndefined = useAtomValue(
+    atomReturnsUndefined,
+    demoStoreOptions,
+  );
   // const circular = useAtomValue(circularAtom, demoStoreOptions);
   // console.log(circular);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars