Add optional extra system information

.changeset/empty-olives-read.md

@@ -0,0 +1,8 @@
+---
+'@arcanewizards/sigil': patch
+---
+
+Add optional extra system information
+
+Allow a sigil app to include additional system information to display in
+the Debugger component, such as additional paths.

packages/sigil/src/app-shell.tsx

@@ -19,6 +19,7 @@ export type AppShellProps = {
   logEventEmitter: SigilLogEventEmitter;
   shutdownContext: ShutdownContextData;
   children: ReactNode;
+  extraSystemInformation?: Record<string, string>;
 };
 
 export const AppShell = ({
@@ -29,6 +30,7 @@ export const AppShell = ({
   logEventEmitter,
   shutdownContext,
   children,
+  extraSystemInformation,
 }: AppShellProps): JSX.Element => {
   const [logs, setLogs] = useState<AppRootLogEntry[]>([]);
 
@@ -44,8 +46,13 @@ export const AppShell = ({
   }, [logEventEmitter]);
 
   const system = useMemo(
-    () => createSystemInformation({ dataDirectory, version }),
-    [dataDirectory, version],
+    () =>
+      createSystemInformation({
+        dataDirectory,
+        version,
+        extra: extraSystemInformation,
+      }),
+    [dataDirectory, version, extraSystemInformation],
   );
 
   const appInformation: AppInformationContextData = useMemo(

packages/sigil/src/backend/app-root.ts

@@ -33,6 +33,7 @@ const DEFAULT_PROPS: AppRootProps = {
     cwd: 'unknown',
     os: 'unknown',
     dataDirectory: 'unknown',
+    extra: {},
   },
 };
 

packages/sigil/src/frontend/debugger.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode, useCallback, useEffect, useRef } from 'react';
+import { FC, ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useBrowserContext } from './browser-context';
 import { useDebuggerContext, useSystemInformation } from './context';
 import { AppRootLogEntryStackFrame } from '../shared/types';
@@ -79,6 +79,22 @@ export const Debugger: FC<DebuggerProps> = ({ title, className }) => {
     scrollToBottomIfRequired();
   }, [scrollToBottomIfRequired]);
 
+  const systemInfo = useMemo(() => {
+    let info = '';
+
+    info += `OS: ${system.os}\n`;
+    info += `Version: ${system.version}\n`;
+    info += `App Path: ${system.appPath}\n`;
+    info += `CWD: ${system.cwd}\n`;
+    info += `Data Directory: ${system.dataDirectory}\n`;
+
+    for (const [key, value] of Object.entries(system.extra ?? {})) {
+      info += `${key}: ${value}\n`;
+    }
+
+    return info;
+  }, [system]);
+
   return (
     <div className={cn('flex flex-col', className)}>
       <ToolbarWrapper>
@@ -112,7 +128,7 @@ export const Debugger: FC<DebuggerProps> = ({ title, className }) => {
           select-text scrollbar-sigil
         "
       >
-        {`OS: ${system.os}\nVersion: ${system.version}\nApp Path: ${system.appPath}\nCWD: ${system.cwd}\nData Directory: ${system.dataDirectory}`}
+        {systemInfo}
       </pre>
       <div
         ref={scrollRef}

packages/sigil/src/runtime.tsx

@@ -90,16 +90,19 @@ const getStackFramesFromError = (error: unknown): AppRootLogEntryStackFrame => {
 export const createSystemInformation = ({
   dataDirectory,
   version,
+  extra,
 }: {
   dataDirectory: string;
   version: string;
+  extra?: SystemInformation['extra'];
 }): SystemInformation => {
   return {
     appPath: process.execPath,
     cwd: process.cwd(),
     os: process.platform,
     version,
     dataDirectory,
+    extra,
   };
 };
 

packages/sigil/src/shared/types.ts

@@ -20,4 +20,5 @@ export type SystemInformation = {
   appPath: string;
   cwd: string;
   dataDirectory: string;
+  extra?: Record<string, string>;
 };