make key required

Author: lerouxb

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

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

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

@@ -14,12 +14,9 @@ export class ShellOutput extends Component<ShellOutputProps> {
     output: PropTypes.arrayOf(PropTypes.any).isRequired,
   };
 
-  renderLine = (entry: ShellOutputEntry, index: number): JSX.Element => {
+  renderLine = (entry: ShellOutputEntry): JSX.Element => {
     return (
-      <ShellOutputLine
-        key={`shell-output-entry-${entry.key ?? index}`}
-        entry={entry}
-      />
+      <ShellOutputLine key={`shell-output-entry-${entry.key}`} entry={entry} />
     );
   };
 

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

@@ -37,6 +37,8 @@ function filterEvaluateCalls(calls: any) {
   });
 }
 
+let lastKey = 0;
+
 describe('shell', function () {
   let fakeRuntime;
   let scrollIntoView;
@@ -79,7 +81,7 @@ describe('shell', function () {
 
   it('takes output', function () {
     const output: ShellOutputEntry[] = [
-      { format: 'output', value: 'Welcome message goes here' },
+      { key: lastKey++, format: 'output', value: 'Welcome message goes here' },
     ];
 
     render(<ShellWrapper runtime={fakeRuntime} output={output} />);
@@ -312,6 +314,7 @@ describe('shell', function () {
     let output: ShellOutputEntry[] = [];
     for (let i = 0; i < 1000; i++) {
       output.push({
+        key: lastKey++,
         format: 'output',
         type: undefined,
         value: 'some result',
@@ -425,6 +428,7 @@ describe('shell', function () {
   it('clears the output when onClearCommand is called', async function () {
     let output: ShellOutputEntry[] = [
       {
+        key: lastKey++,
         format: 'output',
         type: undefined,
         value: 'some result',

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

@@ -357,12 +357,14 @@ const _Shell: ForwardRefRenderFunction<EditorRef | null, ShellProps> = (
         runtime.setEvaluationListener(listener);
         const result = await runtime.evaluate(code);
         outputLine = {
+          key: lastKey++,
           format: 'output',
           type: result.type,
           value: result.printable,
         };
       } catch (error) {
         outputLine = {
+          key: lastKey++,
           format: 'error',
           value: error,
         };
@@ -383,6 +385,7 @@ const _Shell: ForwardRefRenderFunction<EditorRef | null, ShellProps> = (
       // don't evaluate empty input, but do add it to the output
       if (!code || code.trim() === '') {
         newOutputBeforeEval.push({
+          key: lastKey++,
           format: 'input',
           value: ' ',
         });
@@ -394,6 +397,7 @@ const _Shell: ForwardRefRenderFunction<EditorRef | null, ShellProps> = (
 
       // add input to output
       newOutputBeforeEval.push({
+        key: lastKey++,
         format: 'input',
         value: code,
       });