Merge pull request #327 from melpon/feature/update-canine

canine を色々と新しいバージョンに差し替え

.vscode/settings.json

@@ -13,20 +13,27 @@
   },
   "[javascript]": {
     "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.tabSize": 2,
+    "editor.detectIndentation": false,
   },
   "[javascriptreact]": {
     "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.tabSize": 2,
+    "editor.detectIndentation": false,
   },
   "[typescript]": {
     "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.tabSize": 2,
+    "editor.detectIndentation": false,
   },
   "[typescriptreact]": {
     "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.tabSize": 2,
+    "editor.detectIndentation": false,
   },
+  "eslint.workingDirectories": [
+    "./canine",
+  ],
   "files.associations": {
     "*.cs": "csharp",
     "*.txt": "plaintext",
@@ -44,6 +51,7 @@
     "unordered_map": "cpp",
     "unordered_set": "cpp",
     "string_view": "cpp",
-    "rope": "cpp"
+    "rope": "cpp",
+    "wrangler.json": "jsonc",
   }
 }

canine/.eslintrc.cjs

@@ -0,0 +1,84 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+  ignorePatterns: ["!**/.server", "!**/.client", "app/utils/mode-*.ts"],
+
+  // Base config
+  extends: ["eslint:recommended"],
+
+  overrides: [
+    // React
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+        "import/resolver": {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+      ],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.cjs"],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

canine/.gitignore

@@ -2,6 +2,7 @@ node_modules
 
 /.cache
 /build
-/dist
-/public/build
-/app/styles
+.env
+.dev.vars
+
+.wrangler

canine/README.md

@@ -1,3 +1,3 @@
 # canine
 
-canine は Wandbox のフロントエンド部分です。
+canine は Wandbox のフロントエンド部分です。

canine/app/components/Author.tsx

@@ -8,6 +8,7 @@ import { wandboxSlice } from "~/features/slice";
 import { useSelector } from "react-redux";
 import { getDateFnsLocale } from "~/utils/getDateFnsLocale";
 import { useTranslation } from "react-i18next";
+import { GithubUser } from "~/types";
 
 export interface AuthorDataProps {
   permlinkData: PermlinkData;
@@ -134,6 +135,7 @@ const Author: React.FC<AuthorProps> = ({ permlinkData, author }) => {
                 className="w-100 h-100"
                 style={{ borderRadius: "50%" }}
                 src={author.avatar_url}
+                alt={`${author.login}'s avatar`}
               />
             </a>
           )}

canine/app/components/CodeMirror6.tsx

@@ -1,27 +1,24 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { useEffect, useRef } from "react";
 import {
   EditorView,
   keymap,
   drawSelection,
   highlightActiveLine,
   KeyBinding,
+  lineNumbers,
+  highlightActiveLineGutter,
+  rectangularSelection,
 } from "@codemirror/view";
 import type { Extension, StateCommand } from "@codemirror/state";
 import { EditorState, StateEffect, Transaction } from "@codemirror/state";
-import { history, historyKeymap } from "@codemirror/history";
-import { foldGutter, foldKeymap } from "@codemirror/fold";
-import { indentOnInput, getIndentUnit, indentUnit } from "@codemirror/language";
-import { lineNumbers, highlightActiveLineGutter } from "@codemirror/gutter";
-import { defaultKeymap, indentWithTab } from "@codemirror/commands";
-import { bracketMatching } from "@codemirror/matchbrackets";
-import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets";
+import { bracketMatching, syntaxHighlighting, HighlightStyle, foldGutter, foldKeymap, indentOnInput, getIndentUnit, indentUnit } from "@codemirror/language";
+import { history, historyKeymap, defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
-import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
-import { commentKeymap } from "@codemirror/comment";
-import { rectangularSelection } from "@codemirror/rectangular-selection";
+import { closeBrackets, closeBracketsKeymap, autocompletion, completionKeymap } from "@codemirror/autocomplete";
 import { lintKeymap } from "@codemirror/lint";
-import { HighlightStyle, tags } from "@codemirror/highlight";
+import { tags } from "@lezer/highlight";
 import { vim } from "@replit/codemirror-vim";
+import useIsomorphicLayoutEffect from "~/hooks/useIsomorphicLayoutEffect";
 
 // --color-prettylights-syntax-comment: #6e7781;
 // --color-prettylights-syntax-constant: #0550ae;
@@ -122,7 +119,7 @@ const codeMirrorDefaultExtensions: Extension[] = [
   drawSelection(),
   EditorState.allowMultipleSelections.of(true),
   indentOnInput(),
-  highlightStyle,
+  syntaxHighlighting(highlightStyle),
   closeBrackets(),
   autocompletion(),
   rectangularSelection(),
@@ -135,7 +132,6 @@ const defaultKeyMaps: KeyBinding[] = [
   ...searchKeymap,
   ...historyKeymap,
   ...foldKeymap,
-  ...commentKeymap,
   ...completionKeymap,
   ...lintKeymap,
 ];
@@ -220,7 +216,7 @@ const CodeMirror6 = (props: CodeMirror6Props): React.ReactElement => {
   const ref = useRef<HTMLDivElement>(null);
   const localView = useRef<EditorView>();
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (view !== undefined) {
       return;
     }

canine/app/components/Command.tsx

@@ -75,8 +75,8 @@ const Command: React.FC<CommandProps> = (props): React.ReactElement => {
           ? compilerOptionRaw
           : runtimeOptionRaw
         : info.compilerOptionRaw
-        ? permlinkData.parameter.compilerOptionRaw
-        : permlinkData.parameter.runtimeOptionRaw
+          ? permlinkData.parameter.compilerOptionRaw
+          : permlinkData.parameter.runtimeOptionRaw
     );
     return `$ ${command} ${options.join(" ")} ${rawOptions}`;
   }, [

canine/app/components/Compiler.tsx

@@ -49,13 +49,14 @@ const Compiler: React.FC<CompilerProps> = (props) => {
   const actions = wandboxSlice.actions;
   const dispatch = useAppDispatch();
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_, setError] = useError();
   const [loadedTemplate, templateFetchId, doLoadTemplate] = useGetTemplate(
     "",
     setError
   );
 
-  const onSelectLanguage = useCallback((language): void => {
+  const onSelectLanguage = useCallback((language: string): void => {
     dispatch(actions.setCurrentLanguage(language));
     // 言語を選択するとコンパイラ名を自動で設定済みにする
     // head 以外のコンパイラを設定する
@@ -148,9 +149,9 @@ const Compiler: React.FC<CompilerProps> = (props) => {
     permlinkData === null
       ? currentSwitches
       : optionsToSwitch(
-          permlinkData.parameter.options,
-          permlinkData.parameter.compilerInfo
-        );
+        permlinkData.parameter.options,
+        permlinkData.parameter.compilerInfo
+      );
 
   const readOnly = permlinkData !== null;
 

canine/app/components/Editor.tsx

@@ -16,7 +16,6 @@ import { CodeEditor } from "./Editor/CodeEditor";
 import { EditorTabs } from "./Editor/EditorTabs";
 import type { CodeMirror6Option } from "./CodeMirror6";
 import { CodeMirror6 } from "./CodeMirror6";
-import { ModemFill } from "react-bootstrap-icons";
 
 export interface EditorProps {
   compilerList: CompilerList;
@@ -68,16 +67,16 @@ const Editor: React.FC<EditorProps> = (props) => {
     permlinkData === null
       ? sources
       : createEditorSourceData(
-          permlinkData.parameter.code,
-          permlinkData.parameter.codes
-        );
+        permlinkData.parameter.code,
+        permlinkData.parameter.codes
+      );
 
   const compileState = useCompileStateSelector();
   const doCompile = useCompile(dispatch, compileState, compilerList);
   const onRun = useCallback(() => {
     dispatch(actions.setRunning(true));
     dispatch(actions.setSharable(true));
-    dispatch(actions.prepareRun());
+    dispatch(actions.prepareRun(compilerList));
     doCompile();
   }, [doCompile]);
 
@@ -112,9 +111,8 @@ const Editor: React.FC<EditorProps> = (props) => {
 
   return (
     <div
-      className={`${
-        fixedHeight ? "wb-editor-fixedheight" : ""
-      } d-flex flex-column flex-md-row gap-8px`}
+      className={`${fixedHeight ? "wb-editor-fixedheight" : ""
+        } d-flex flex-column flex-md-row gap-8px`}
     >
       <div className="d-flex flex-column flex-grow-1">
         <EditorTabs
@@ -162,6 +160,7 @@ const Editor: React.FC<EditorProps> = (props) => {
             onViewCreated={(view) => {
               dispatch(actions.setStdinView(view));
             }}
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             onViewDestroyed={(view) => {
               dispatch(actions.setStdinView(undefined));
             }}

canine/app/components/Editor/CodeEditor.tsx

@@ -54,7 +54,7 @@ const CodeEditor: React.FC<CodeEditorProps> = (props): React.ReactElement => {
   const onRun = useCallback(() => {
     dispatch(actions.setRunning(true));
     dispatch(actions.setSharable(true));
-    dispatch(actions.prepareRun());
+    dispatch(actions.prepareRun(compilerList));
     doCompile();
   }, [doCompile]);
 
@@ -100,9 +100,8 @@ const CodeEditor: React.FC<CodeEditorProps> = (props): React.ReactElement => {
 
   return (
     <CodeMirror6
-      className={`wb-editor flex-grow-1 ${
-        stdinOpened ? "wb-stdinactive" : ""
-      } ${show ? "" : "d-none"}`}
+      className={`wb-editor flex-grow-1 ${stdinOpened ? "wb-stdinactive" : ""
+        } ${show ? "" : "d-none"}`}
       text={source.text}
       view={view}
       option={option}

canine/app/components/Header.tsx

@@ -3,13 +3,15 @@ import { useSelector } from "react-redux";
 import Navbar from "react-bootstrap/Navbar";
 import { Nav, NavDropdown } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
+import { useLoaderData } from "@remix-run/react";
 
 import type { AppState } from "~/store";
 import { useAppDispatch } from "~/store";
 import { wandboxSlice } from "~/features/slice";
+import { WandboxLoaderData } from "~/types";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface HeaderProps {}
+interface HeaderProps { }
 
 const Header: React.FC<HeaderProps> = (): React.ReactElement => {
   const { t, i18n } = useTranslation();
@@ -18,10 +20,15 @@ const Header: React.FC<HeaderProps> = (): React.ReactElement => {
       sidebarState,
     })
   );
-  const { githubUser } = WANDBOX_LOADER_DATA;
+  const loaderData = useLoaderData<WandboxLoaderData>();
   const dispatch = useAppDispatch();
   const actions = wandboxSlice.actions;
 
+  if (loaderData === undefined) {
+    return <p>Root loader data not found</p>;
+  }
+  const { githubUser, env } = loaderData;
+
   return (
     <Navbar
       className="px-16px justify-content-between"
@@ -117,7 +124,7 @@ const Header: React.FC<HeaderProps> = (): React.ReactElement => {
           </Nav.Link>
           {githubUser === null ? (
             <Nav.Link
-              href={`https://github.com/login/oauth/authorize?client_id=${WANDBOX_GITHUB_CLIENT_ID}`}
+              href={`https://github.com/login/oauth/authorize?client_id=${env.WANDBOX_GITHUB_CLIENT_ID}`}
             >
               {t("header.login")}
             </Nav.Link>
@@ -127,6 +134,7 @@ const Header: React.FC<HeaderProps> = (): React.ReactElement => {
               title={
                 <img
                   src={githubUser.avatar_url}
+                  alt="GitHub User Avatar"
                   style={{ width: 24, height: 24, borderRadius: 12 }}
                 />
               }