set a consistent key for output elements rather than using the array index

Author: lerouxb

packages/browser-repl/src/components/shell-output-line.tsx

@@ -35,6 +35,7 @@ type ShellOutputEntryValue = any;
 type Glyph = 'ChevronRight' | 'XWithCircle' | 'ChevronLeft';
 
 export interface ShellOutputEntry {
+  key?: number | string;
   format: 'input' | 'output' | 'error';
   type?: string | null;
   value: ShellOutputEntryValue;

packages/browser-repl/src/components/shell-output.tsx

@@ -16,7 +16,10 @@ export class ShellOutput extends Component<ShellOutputProps> {
 
   renderLine = (entry: ShellOutputEntry, index: number): JSX.Element => {
     return (
-      <ShellOutputLine key={`shell-output-entry-${index}`} entry={entry} />
+      <ShellOutputLine
+        key={`shell-output-entry-${entry.key ?? index}`}
+        entry={entry}
+      />
     );
   };
 

packages/browser-repl/src/components/shell.tsx

@@ -184,6 +184,8 @@ const capLengthStart = (elements: unknown[], maxLength: number) => {
   elements.splice(maxLength);
 };
 
+let lastKey = 0;
+
 const _Shell: ForwardRefRenderFunction<EditorRef | null, ShellProps> = (
   {
     runtime,
@@ -262,6 +264,7 @@ const _Shell: ForwardRefRenderFunction<EditorRef | null, ShellProps> = (
           ...(outputRef.current ?? []),
           ...result.map(
             (entry): ShellOutputEntry => ({
+              key: lastKey++,
               format: 'output',
               type: entry.type,
               value: entry.printable,

packages/browser-repl/src/sandbox.tsx

@@ -151,16 +151,26 @@ class DemoServiceProvider {
 
 const runtime = new IframeRuntime(new DemoServiceProvider() as any);
 
+const lotsOfLines: ShellOutputEntry[] = [];
+for (let i = 0; i < 99; i++) {
+  lotsOfLines.push({ key: `entry-${i}`, format: 'output', value: { i } });
+}
+
 const IframeRuntimeExample: React.FunctionComponent = () => {
   const [darkMode, setDarkMode] = useState(true);
   const [redactInfo, setRedactInfo] = useState(false);
-  const [maxOutputLength, setMaxOutputLength] = useState(1000);
-  const [maxHistoryLength, setMaxHistoryLength] = useState(1000);
+  const [maxOutputLength, setMaxOutputLength] = useState(100);
+  const [maxHistoryLength, setMaxHistoryLength] = useState(100);
   const [initialEvaluate, setInitialEvaluate] = useState<string[]>([]);
 
   const [initialText, setInitialText] = useState('');
   const [output, setOutput] = useState<ShellOutputEntry[]>([
-    { format: 'output', value: { foo: 1, bar: true, buz: function () {} } },
+    ...lotsOfLines,
+    {
+      key: 'test',
+      format: 'output',
+      value: { foo: 1, bar: true, buz: function () {} },
+    },
   ]);
   const [history, setHistory] = useState([
     'show dbs',