Add session storage to DevTools

packages/hydrogen/src/foundation/DevTools/DevTools.server.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {useSession} from '../useSession/useSession.js';
 import {DevTools as DevToolsClient} from './DevTools.client.js';
 import {useServerRequest} from '../ServerRequestProvider/index.js';
 import {getLocale} from '../../utilities/locale/index.js';
@@ -17,6 +18,13 @@ export function DevTools() {
     storeDomain,
     storefrontApiVersion,
   };
+  const session = useSession();
 
-  return <DevToolsClient dataFromServer={{settings}} />;
+  const data = {
+    settings,
+    storage: {
+      session,
+    },
+  };
+  return <DevToolsClient dataFromServer={data} />;
 }

packages/hydrogen/src/foundation/DevTools/components/Panels.tsx

@@ -2,10 +2,12 @@ import React, {ComponentProps, useState, useEffect} from 'react';
 import {ClientAnalytics} from '../../Analytics/index.js';
 import {Performance} from './Performance.client.js';
 import {Settings} from './Settings.client.js';
+import {Storage} from './Storage.client.js';
 
 export interface Props {
   settings: ComponentProps<typeof Settings>;
   performance: ComponentProps<typeof Performance>;
+  storage: ComponentProps<typeof Storage>;
 }
 
 interface BasePanel {
@@ -25,14 +27,15 @@ type Navigations = Props['performance']['navigations'];
 interface Panels {
   performance: ComponentPanel;
   settings: ComponentPanel;
+  storage: ComponentPanel;
   graphiql: ExternalPanel;
 }
 
 const isComponentPanel = (
   panel: ComponentPanel | ExternalPanel
 ): panel is ComponentPanel => (panel as ComponentPanel).component !== undefined;
 
-export function Panels({settings}: Props) {
+export function Panels({settings, storage}: Props) {
   const [selectedPanel, setSelectedPanel] = useState<number>(0);
   const [navigations, setNavigations] = useState<Navigations>([]);
   useEffect(() => {
@@ -64,7 +67,7 @@ export function Panels({settings}: Props) {
     );
   }, [setNavigations, navigations]);
 
-  const panels = getPanels({settings, performance: {navigations}});
+  const panels = getPanels({settings, storage, performance: {navigations}});
   const panelComponents = panels.map((obj, index) =>
     isComponentPanel(obj) ? (
       <div
@@ -122,7 +125,7 @@ export function Panels({settings}: Props) {
   );
 }
 
-function getPanels({settings, performance}: Props) {
+function getPanels({settings, storage, performance}: Props) {
   const panels: Panels = {
     settings: {
       content: 'Settings',
@@ -132,6 +135,10 @@ function getPanels({settings, performance}: Props) {
       content: 'Performance',
       component: <Performance {...performance} />,
     },
+    storage: {
+      content: 'Storage',
+      component: <Storage {...storage} />,
+    },
     graphiql: {
       content: 'GraphiQL',
       url: '/___graphql',

packages/hydrogen/src/foundation/DevTools/components/Settings.client.tsx

@@ -17,7 +17,7 @@ const KEY_MAP = {
 export function Settings(props: Props) {
   const items = Object.entries(props).map(([key, value]) => {
     return {
-      key: KEY_MAP[key as keyof typeof KEY_MAP],
+      id: KEY_MAP[key as keyof typeof KEY_MAP],
       value,
       type: typeof value,
     };

packages/hydrogen/src/foundation/DevTools/components/Storage.client.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {Table} from './Table.js';
+
+interface Props {
+  session: any;
+}
+
+const KEY_MAP = {
+  session: 'Session',
+};
+
+export function Storage(props: Props) {
+  const items = Object.entries(props).map(([key, value]) => {
+    return {
+      id: KEY_MAP[key as keyof typeof KEY_MAP],
+      value,
+      type: typeof value,
+    };
+  });
+
+  return <Table items={items} />;
+}

packages/hydrogen/src/foundation/DevTools/components/Table.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 interface Item {
-  key: string;
+  id: string;
   value: string;
 }
 
@@ -10,14 +10,31 @@ interface TableProps {
 }
 
 export function Table({items}: TableProps) {
-  const itemsMarkup = items.map(({key, value}) => (
+  const itemsMarkup = items.map((item) => <Item key={item.id} {...item} />);
+  return <ul>{itemsMarkup}</ul>;
+}
+
+export function Item(props: Item) {
+  const {id, value} = props;
+
+  const valueMarkup =
+    typeof value === 'string' ? (
+      <span style={{width: '70%', fontFamily: 'monospace'}}>{value}</span>
+    ) : (
+      Object.entries(value).map(([k, v]) => (
+        <span key={k} style={{width: '70%', fontFamily: 'monospace'}}>
+          <>
+            <b>{k}</b>: {v}
+          </>
+        </span>
+      ))
+    );
+  return (
     <div
-      key={key}
       style={{display: 'flex', paddingBottom: '1em', flexDirection: 'column'}}
     >
-      <span style={{fontWeight: 'bold'}}>{key}</span>
-      <span style={{width: '70%', fontFamily: 'monospace'}}>{value}</span>
+      <span style={{fontWeight: 'bold'}}>{id}</span>
+      {valueMarkup}
     </div>
-  ));
-  return <ul>{itemsMarkup}</ul>;
+  );
 }