CodeSee take 2 (#42330)

* Adds CodeSee developer tooling to FreeCodeCamp client

CodeSee is a continuous code understanding platform,
meant to help developers when diving into a codebase.

This is an alpha version, which enables FCC contributors
to create and explore recordings of code execution on the
front-end. These recordings are meant to help orient a
developer to an unfamiliar part of the codebase, or help
diagnose when behavior is not matching our mental model.

When running in development, the client will now display
a small, purple CodeSee icon in the browser. Clicking this
icon starts (then stops) a new recording.

* chore(deps): update to @codesee/latest

* feat: switch to CodeSee hosted

* chore(deps): add process to root

I couldn't pin down what, exactly, but something in the client depends
on safer-buffer from the root, which tries to find process/browser, so
it needs installing here too.

Co-authored-by: Joshua Leven <josh@codesee.io>

client/.babelrc

@@ -63,5 +63,12 @@
         "plugins": ["line-numbers"]
       }
     ]
+  ],
+  "env": {
+    "development": {
+      "plugins": [
+        ["@codesee/instrument", { "hosted": true }]
       ]
+    }
+  },
 }

client/package-lock.json

@@ -1483,6 +1483,70 @@
         }
       }
     },
+    "@codesee/babel-plugin-instrument": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@codesee/babel-plugin-instrument/-/babel-plugin-instrument-0.33.3.tgz",
+      "integrity": "sha512-2OJgG3H3Lg1jzx/PcNaxzMOAkUpSZ3b9T7B9Y3RClXP3LvVPHSjhgE4gw3KjTgzfC8OZnX0SW7Ulkkt3WsSrdA==",
+      "dev": true,
+      "requires": {
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/plugin-transform-typescript": "^7.14.4",
+        "array.prototype.flatmap": "^1.2.3",
+        "object-path": "^0.11.4",
+        "pkg-up": "^3.1.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
+        },
+        "pkg-up": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
+          "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
+          "dev": true,
+          "requires": {
+            "find-up": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@codesee/tracker": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@codesee/tracker/-/tracker-0.33.3.tgz",
+      "integrity": "sha512-uce6HBIyI62PxN7Lgk84qDsgyYkFZ7SQZu1+F+kFqjrFtZBdWqMAnAszB20K4o7sl0gUvCMB8sMWJHLZJFL77w==",
+      "dev": true
+    },
     "@discoveryjs/json-ext": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz",
@@ -4005,6 +4069,15 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
       "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ=="
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -7983,6 +8056,12 @@
         "token-types": "^2.0.0"
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "optional": true
+    },
     "filesize": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
@@ -13132,6 +13211,12 @@
       "resolved": "https://registry.npmjs.org/name-all-modules-plugin/-/name-all-modules-plugin-1.0.1.tgz",
       "integrity": "sha1-Cr+2rYNXGLn7Te8GdOBmV6lUN1w="
     },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "optional": true
+    },
     "nanoid": {
       "version": "3.1.23",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
@@ -19216,7 +19301,11 @@
           "version": "1.2.13",
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",

client/package.json

@@ -129,6 +129,8 @@
   },
   "devDependencies": {
     "@babel/types": "7.14.4",
+    "@codesee/babel-plugin-instrument": "^0.33.1",
+    "@codesee/tracker": "^0.33.1",
     "@testing-library/jest-dom": "5.13.0",
     "@testing-library/react": "11.2.7",
     "@types/react-transition-group": "4.4.1",

package-lock.json

@@ -18223,6 +18223,12 @@
         "clipboard": "^2.0.0"
       }
     },
+    "process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
+      "dev": true
+    },
     "process-nextick-args": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",

package.json

@@ -136,6 +136,7 @@
     "ora": "5.4.1",
     "prettier": "2.3.1",
     "prismjs": "1.23.0",
+    "process": "^0.11.10",
     "shx": "0.3.3",
     "start-server-and-test": "1.12.5",
     "typescript": "4.3.2",