Last lints & bits for web grader.

.eslintrc.json

@@ -3,21 +3,32 @@
     "browser": true,
     "es2021": true
   },
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
   "overrides": [],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["react", "@typescript-eslint"],
   "rules": {
+    "react/react-in-jsx-scope": 0,
+    "react/no-unknown-property": ["error", { "ignore": ["directory"] }],
     "@typescript-eslint/no-unused-vars": [
       "error",
       {
         "args": "none",
         "destructuredArrayIgnorePattern": "^_"
       }
     ]
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
 }

package.json

@@ -19,7 +19,7 @@
     "ci": "CI=true npm run check && CI=true npm run test",
     "precheck": "npm -w web run extract && npm -w web run lingui",
     "check": "npm run check:format && npm run check:types && npm run check:lint",
-    "clean": "rm -rf cli/build components/build extension/build projects/build runner/build simulator/build web",
+    "clean": "rm -rf cli/build components/build extension/build projects/build runner/build simulator/build web/build",
     "format": "prettier --write cli/src components/src extension/src projects/src runner/src simulator/src web/src web/public",
     "fix": "eslint --fix cli/src components/src extension/src projects/src runner/src simulator/src web/src web/public",
     "check:format": "prettier --ignore-unknown --check cli/src components/src extension/src projects/src runner/src simulator/src web/src web/public",
@@ -36,6 +36,7 @@
     "@typescript-eslint/parser": "^5.40.0",
     "esbuild": "^0.15.11",
     "eslint": "^8.25.0",
+    "eslint-plugin-react": "^7.31.10",
     "prettier": "^2.7.1",
     "typescript": "^4.8.4"
   },

simulator/src/languages/tst.test.ts

@@ -463,7 +463,7 @@ describe("tst language", () => {
             start: 0,
             end: 21,
           },
-          ops: [{ op: "load", file: "Max.hack" }],
+          ops: [{ op: "loadRom", file: "Max.hack" }],
         },
       ],
     });

tsconfig.json

@@ -1,11 +1,11 @@
 {
   "references": [
-    { "path": "./cli/tsconfig.json" },
-    { "path": "./components/tsconfig.json" },
-    { "path": "./extension/tsconfig.json" },
     { "path": "./projects/tsconfig.json" },
     { "path": "./runner/tsconfig.json" },
     { "path": "./simulator/tsconfig.json" },
+    { "path": "./cli/tsconfig.json" },
+    { "path": "./components/tsconfig.json" },
+    { "path": "./extension/tsconfig.json" },
     { "path": "./web/tsconfig.json" }
   ],
   "files": []

web/.eslintrc.json

@@ -1,7 +1,9 @@
 {
   "env": {
     "browser": true,
-    "es2021": true
+    "es2021": true,
+    "jest": true,
+    "node": true
   },
   "extends": [
     "eslint:recommended",

web/package.json

@@ -25,10 +25,6 @@
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "@types/vscode": "^1.72.0",
-    "@typescript-eslint/eslint-plugin": "^5.40.0",
-    "@typescript-eslint/parser": "^5.40.0",
-    "eslint": "^8.25.0",
-    "eslint-plugin-react": "^7.31.10",
     "gh-pages": "^4.0.0",
     "immer": "^9.0.15",
     "make-plural": "^7.1.0",

web/src/pages/home.tsx

@@ -1,20 +1,15 @@
-import { Assignments } from "@computron5k/simulator/projects/index.js";
+import { useBaseContext } from "@computron5k/components/stores/base.context";
+import { DiffTable } from "@computron5k/components/difftable";
+import { Assignments } from "@computron5k/projects/index.js";
 import { runTests } from "@computron5k/simulator/projects/runner.js";
 import { Trans } from "@lingui/macro";
-import { ChangeEventHandler, useCallback, useContext, useState } from "react";
-import { AppContext } from "../App.context";
-import { DiffTable } from "../components/difftable";
-
-function splitFile(file: File) {
-  const { name, ext } = file.name.match(
-    /(.*\/)?(?<name>[^/]+)\.(?<ext>[^./]+)$/
-  )?.groups as { name: string; ext: string };
-  return { name, ext };
-}
+import { ChangeEventHandler, useCallback, useState } from "react";
+import { parse, ParsedPath } from "node:path";
 
 function hasTest({ name, ext }: { name: string; ext: string }) {
   return (
-    Assignments[name as keyof typeof Assignments] !== undefined && ext === "hdl"
+    Assignments[name as keyof typeof Assignments] !== undefined &&
+    ext === ".hdl"
   );
 }
 
@@ -42,20 +37,21 @@ const TestResult = (props: {
   </details>
 );
 
-async function loadAssignment(pfile: Promise<{ name: string; hdl: string }>) {
-  const file = await pfile;
+async function loadAssignment(file: ParsedPath & { file?: File }) {
   const assignment = Assignments[file.name as keyof typeof Assignments];
+  const hdl = (await file.file?.text()) ?? "";
   const tst = assignment[
     `${file.name}.tst` as keyof typeof assignment
   ] as string;
   const cmp = assignment[
     `${file.name}.cmp` as keyof typeof assignment
   ] as string;
-  return { ...file, tst, cmp };
+  return { ...file, hdl, tst, cmp };
 }
 
 declare module "react" {
-  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+  // eslint-disable-next-line
+  interface HTMLAttributes<T> {
     // extends React's HTMLAttributes
     directory?: string;
     webkitdirectory?: string;
@@ -66,27 +62,29 @@ const Home = () => {
   const [tests, setTests] = useState(
     [] as Array<Parameters<typeof TestResult>[0]>
   );
-  const { fs } = useContext(AppContext);
+  const { fs } = useBaseContext();
 
   const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
     async ({ target }) => {
-      const files = [...(target.files ?? [])]
-        .map((file) => {
-          console.log(file.webkitRelativePath);
-          return file;
-        })
-        .filter((file) => file.name.endsWith(".hdl"))
-        .map((file) => ({ file, ...splitFile(file) }))
-        .filter(hasTest)
-        .map(async (file) => {
-          const hdl = await file.file.text();
-          return { ...file, hdl };
-        });
+      const files = await Promise.all(
+        [...(target.files ?? [])]
+          .map((file) => {
+            console.log(file.webkitRelativePath);
+            return file;
+          })
+          .filter((file) => file.name.endsWith(".hdl"))
+          .map((file) => ({ ...parse(file.name), file }))
+          .filter(hasTest)
+          .map(async (file) => {
+            const hdl = await file.file.text();
+            return { ...file, hdl };
+          })
+      );
 
-      const tests = runTests(files, loadAssignment, fs);
+      const tests = await runTests(files, loadAssignment, fs, "");
 
       fs.pushd("/samples");
-      setTests(await Promise.all(tests));
+      setTests(tests);
       fs.popd();
     },
     [setTests, fs]
@@ -101,8 +99,8 @@ const Home = () => {
           <input
             type="file"
             multiple
-            webkitdirectory=""
             directory=""
+            webkitdirectory=""
             onChange={onChange}
           />
         </fieldset>