refactor(misc): Move source and completion mappings to parent using context

Also change most consumers to use the context value

src/components/SourceViewer/SourceViewer.tsx

@@ -10,12 +10,14 @@ import {
 
 import { sourceMapping } from "../../logic/sourceMapping";
 import {
-  completionMapping,
+  useCompletionMapping,
   ICompletionDetail,
+  ICompletionMapping,
 } from "../../logic/completionMapping";
 
 function getCompletionFromSourceToken(
-  matcheeToken: Token
+  matcheeToken: Token,
+  completionMapping: ICompletionMapping
 ): ICompletionDetail | null {
   const matchingSourceDetails = sourceMapping.mappingArray.find(
     ({ token: tmpToken }) => matcheeToken === tmpToken
@@ -120,13 +122,18 @@ function TokenRenderer({
   isLastTokenInLine,
   getTokenProps,
 }: ITokenRendererProps) {
+  const completionMapping = useCompletionMapping();
+
   const refFn = sourceMapping.registerToken(token);
   if (isLastTokenInLine) {
     sourceMapping.registerLineEnd();
   }
 
   const onClickToken = (tmpToken: Token) => {
-    const matchingCompletion = getCompletionFromSourceToken(tmpToken);
+    const matchingCompletion = getCompletionFromSourceToken(
+      tmpToken,
+      completionMapping
+    );
     if (matchingCompletion !== null) {
       console.log(
         `Clicked: ${tmpToken.content} => Completion (${matchingCompletion.completionType},${matchingCompletion.completionValueString})`

src/logic/completionMapping.ts

@@ -1,3 +1,4 @@
+import { createContext, useContext } from "react";
 import { Node } from "acorn";
 import { inspect } from "../engine262/dist/engine262";
 
@@ -12,11 +13,13 @@ export interface ICompletionDetail {
   completionValue: any;
 }
 
-export const completionMapping: {
+export interface ICompletionMapping {
   completionDetails: ICompletionDetail[];
   addCompletion(_: { node: Node; result: CompletionRecord }): void;
   reset(): void;
-} = {
+}
+
+export const completionMapping: ICompletionMapping = {
   completionDetails: [],
   addCompletion({ node, result }) {
     const { start, end } = node;
@@ -48,3 +51,12 @@ export const completionMapping: {
     this.completionDetails = [];
   },
 };
+
+export const CompletionMappingContext = createContext(completionMapping);
+
+// Context consumer
+export const useCompletionMapping = () => {
+  const value = useContext(CompletionMappingContext);
+
+  return value;
+};

src/logic/sourceMapping.tsx

@@ -1,3 +1,4 @@
+import { createContext, useContext } from "react";
 import { Token } from "../types/prism-types";
 
 export interface TMappingELement {
@@ -47,3 +48,12 @@ export const sourceMapping: TSourceMapping = {
     return [];
   },
 };
+
+export const SourceMappingContext = createContext(sourceMapping);
+
+// Context consumer
+export const useSourceMapping = () => {
+  const value = useContext(SourceMappingContext);
+
+  return value;
+};