Merge pull request #94 from solaoi/feature_add-typecheck-on-ui

add typecheck on ui

ui/@types/rete.d.ts

@@ -0,0 +1,19 @@
+declare module 'rete-react-render-plugin';
+declare module 'rete-area-plugin';
+declare module 'rete-context-menu-plugin';
+declare module 'rete-minimap-plugin'
+declare module 'rete-connection-path-plugin'
+declare module 'rete-connection-reroute-plugin'
+declare module 'rete-auto-arrange-plugin'
+declare module 'rete-history-plugin'
+
+import { Control, NodeEditor } from 'rete';
+declare module 'rete' {
+    export interface Control {
+        readonly update: () => void
+    }
+    export interface NodeEditor {
+        readonly trigger: (readonly string, readonly T?) => void
+        readonly on: (readonly string, readonly handler: () => T) => void
+    }
+}

ui/@types/window.d.ts

@@ -0,0 +1,7 @@
+import pug from pug
+
+declare global {
+    interface Window {
+        pug
+    }
+}

ui/package.json

@@ -34,6 +34,10 @@
     "use-interval": "1.4.0"
   },
   "devDependencies": {
+    "@types/pug": "2.0.6",
+    "@types/react": "18.0.9",
+    "@types/react-dom": "18.0.4",
+    "@types/react-modal": "3.13.1",
     "@vitejs/plugin-react": "1.3.2",
     "eslint": "8.15.0",
     "eslint-config-airbnb": "19.0.4",
@@ -51,6 +55,7 @@
     "stylelint-config-recommended": "7.0.0",
     "stylelint-order": "5.0.0",
     "stylelint-prettier": "2.0.0",
+    "typescript": "4.6.4",
     "vite": "2.9.9",
     "vite-plugin-externals": "0.5.0"
   },
@@ -69,7 +74,8 @@
     "vite-build": "vite build",
     "build": "npm run vite-build && rm -rf ../command/cmd/static/* && mv dist/* ../command/cmd/static/ && touch ../command/cmd/static/.gitkeep && cd ../command/ && go build -o ../tuna && cd ../ui/",
     "build:win": "npm run vite-build && rm -rf ../command/cmd/static/* && mv dist/* ../command/cmd/static/ && touch ../command/cmd/static/.gitkeep && cd ../command/ && GOOS=windows GOARCH=amd64 go build -o ../tuna.exe && cd ../ui/",
-    "analyze": "vite build --mode analyze"
+    "analyze": "vite build --mode analyze",
+    "typecheck": "tsc"
   },
   "lint-staged": {
     "*.css": "stylelint --fix",

ui/src/index.jsx

@@ -32,6 +32,7 @@ const App = () => (
 
 Modal.setAppElement("#root");
 const rootElement = document.getElementById("root");
+if (rootElement === null) throw Error;
 const root = createRoot(rootElement);
 root.render(
   <StrictMode>

ui/src/rete.jsx

@@ -261,7 +261,11 @@ export async function createEditor(container) {
       // テキスト入力欄のスクロールを有効化
       document.querySelectorAll(".editorTextarea").forEach((area) => {
         area.addEventListener("wheel", (e) => {
-          if (isInputFocused()) {
+          if (
+            isInputFocused() &&
+            area.parentElement !== null &&
+            area.parentElement.parentElement !== null
+          ) {
             area.parentElement.parentElement.scrollTop += e.deltaY;
           }
         });

ui/src/rete/components/template/HandlebarsComponent.js

@@ -17,7 +17,7 @@ export class HandlebarsComponent extends Rete.Component {
       .addOutput(out);
   }
 
-  worker(node, inputs, outputs) {
+  worker(node, _, outputs) {
     outputs.hbs = node.data.hbs;
   }
 }

ui/src/rete/components/template/PugComponent.js

@@ -17,7 +17,7 @@ export class PugComponent extends Rete.Component {
       .addOutput(out);
   }
 
-  worker(node, inputs, outputs) {
+  worker(node, _, outputs) {
     outputs.pug = node.data.pug;
   }
 }

ui/src/rete/controls/BooleanControl.jsx

@@ -22,15 +22,15 @@ export class BooleanControl extends Rete.Control {
       <div className="switchArea">
         <input
           type="checkbox"
-          id={id}
+          id={`${id}`}
           checked={checked}
           ref={(ref) =>
             ref &&
             ref.addEventListener("pointerdown", (e) => e.stopPropagation())
           }
           onChange={(e) => onChange(+e.target.checked)}
         />
-        <label htmlFor={id}>
+        <label htmlFor={`${id}`}>
           <span />
         </label>
         <div className="swImg" />

ui/src/rete/controls/EditableUrlComponent.jsx

@@ -8,11 +8,11 @@ import useInterval from "use-interval";
 export const EditableUrlComponent = ({ value, onChange }) => {
   const [code, setCode] = useState(value);
   const [warn, setWarn] = useState(false);
-  const [stack, setStack] = useState(null);
+  const [stack, setStack] = useState("");
   useInterval(() => {
-    if (stack !== null) {
+    if (stack !== "") {
       import("react-hot-toast").then((_) => _.toast.error(stack));
-      setStack(null);
+      setStack("");
     }
   }, 10000);
 
@@ -22,7 +22,7 @@ export const EditableUrlComponent = ({ value, onChange }) => {
       onValueChange={(c) => {
         if (c.startsWith("https://") || c.startsWith("http://")) {
           setWarn(false);
-          setStack(null);
+          setStack("");
         } else {
           setStack("URL doesn't start with https:// or http://");
           setWarn(true);

ui/src/rete/controls/JsonManagerControl.jsx

@@ -318,7 +318,7 @@ export class JsonManagerControl extends Rete.Control {
                 {v.key}
                 <span
                   role="button"
-                  tabIndex="0"
+                  tabIndex={0}
                   className="removeBtn"
                   onClick={onClickCloseBtn}
                   data-key={v.key}

ui/src/rete/controls/TextAreaControl.jsx

@@ -15,7 +15,7 @@ export class TextAreaControl extends Rete.Control {
           ref && ref.addEventListener("pointerdown", (e) => e.stopPropagation())
         }
         onChange={(e) => onChange(String(e.target.value))}
-        raws={5}
+        rows={5}
         style={{ height: "100px" }}
       />
     </>

ui/src/rete/nodes/DbNode.jsx

@@ -53,7 +53,7 @@ export class DbNode extends Node {
                   DB_PASS
                 </label>
                 <textarea
-                  rows="3"
+                  rows={3}
                   placeholder={`set ${pass} when tuna api starting`}
                   value=""
                   disabled