Add empty CompletionViewer

src/App.tsx

@@ -14,13 +14,16 @@ World!\`; abc()`;
 function App() {
   const [inputCode, setInputCode] = useState<string>(sampleInputCode);
 
-  useLayoutEffect(() => {
-    runEngine(inputCode);
-  }, [inputCode]);
+  // useLayoutEffect(() => {
+  runEngine(inputCode);
+  // }, [inputCode]);
 
   return (
     <div>
       <SourceViewer code={inputCode} onChangeCode={setInputCode} />
+      <CompletionViewer
+        completionDetails={completionMapping.completionDetails}
+      />
     </div>
   );
 }

src/components/CompletionViewer/CompletionViewer.tsx

@@ -1 +1,7 @@
-export function CompletionViewer() {}
+import { ICompletionDetail } from "../../logic/completionMapping";
+
+export function CompletionViewer(props: {
+  completionDetails: ICompletionDetail[];
+}) {
+  return null;
+}

src/logic/completionMapping.ts

@@ -1,5 +1,5 @@
 import { Node } from "acorn";
-import { inspect } from "../../engine262/dist/engine262";
+import { inspect } from "../engine262/dist/engine262";
 
 import { CompletionRecord, CompletionTypes } from "../types/engine262-stubs";
 
@@ -7,7 +7,7 @@ export interface ICompletionDetail {
   start: number;
   end: number;
   completionType: CompletionTypes;
-  completionValueString: string;
+  completionValueString: string | undefined;
   completionTargetString: string | undefined;
   completionValue: any;
 }
@@ -26,7 +26,8 @@ export const completionMapping: {
       Target: completionTarget,
     } = result;
 
-    const completionValueString: string = inspect(completionValue);
+    const completionValueString: string | undefined =
+      completionValue !== undefined ? inspect(completionValue) : undefined;
     const completionTargetString: string | undefined =
       completionTarget !== undefined
         ? inspect(completionTarget)