From 05dc6d19ce5ea62507a591bfb9023bced242b47b Mon Sep 17 00:00:00 2001 From: Kodai Aoyama Date: Sun, 15 May 2022 15:27:48 +0900 Subject: [PATCH 1/2] add typecheck on ui --- ui/@types/rete.d.ts | 19 +++ ui/@types/window.d.ts | 7 + ui/package-lock.json | 130 ++++++++++++++++++ ui/package.json | 8 +- ui/src/index.jsx | 1 + ui/src/rete.jsx | 6 +- .../template/HandlebarsComponent.js | 2 +- .../rete/components/template/PugComponent.js | 2 +- ui/src/rete/controls/BooleanControl.jsx | 4 +- ui/src/rete/controls/EditableUrlComponent.jsx | 8 +- ui/src/rete/controls/JsonManagerControl.jsx | 2 +- ui/src/rete/controls/TextAreaControl.jsx | 2 +- ui/src/rete/nodes/DbNode.jsx | 2 +- ui/tsconfig.json | 101 ++++++++++++++ 14 files changed, 281 insertions(+), 13 deletions(-) create mode 100644 ui/@types/rete.d.ts create mode 100644 ui/@types/window.d.ts create mode 100644 ui/tsconfig.json diff --git a/ui/@types/rete.d.ts b/ui/@types/rete.d.ts new file mode 100644 index 0000000..28d1437 --- /dev/null +++ b/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: (string, T?) => void + readonly on: (string, handler: () => T) => void + } +} \ No newline at end of file diff --git a/ui/@types/window.d.ts b/ui/@types/window.d.ts new file mode 100644 index 0000000..fcec87f --- /dev/null +++ b/ui/@types/window.d.ts @@ -0,0 +1,7 @@ +import pug from pug + +declare global { + interface Window { + pug + } +} \ No newline at end of file diff --git a/ui/package-lock.json b/ui/package-lock.json index c122556..d99f4b1 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -33,6 +33,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", @@ -50,6 +54,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" }, @@ -663,6 +668,53 @@ "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", "dev": true }, + "node_modules/@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "dev": true + }, + "node_modules/@types/pug": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz", + "integrity": "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==", + "dev": true + }, + "node_modules/@types/react": { + "version": "18.0.9", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.9.tgz", + "integrity": "sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==", + "dev": true, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-dom": { + "version": "18.0.4", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.4.tgz", + "integrity": "sha512-FgTtbqPOCI3dzZPZoC2T/sx3L34qxy99ITWn4eoSA95qPyXDMH0ALoAqUp49ITniiJFsXUVBtalh/KffMpg21Q==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/react-modal": { + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz", + "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true + }, "node_modules/@vitejs/plugin-react": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-1.3.2.tgz", @@ -1229,6 +1281,12 @@ "node": ">=4" } }, + "node_modules/csstype": { + "version": "3.0.11", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz", + "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==", + "dev": true + }, "node_modules/d3-path": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz", @@ -5749,6 +5807,19 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/typescript": { + "version": "4.6.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz", + "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/uglify-js": { "version": "3.15.4", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.15.4.tgz", @@ -6585,6 +6656,53 @@ "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", "dev": true }, + "@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "dev": true + }, + "@types/pug": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz", + "integrity": "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==", + "dev": true + }, + "@types/react": { + "version": "18.0.9", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.9.tgz", + "integrity": "sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==", + "dev": true, + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "@types/react-dom": { + "version": "18.0.4", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.4.tgz", + "integrity": "sha512-FgTtbqPOCI3dzZPZoC2T/sx3L34qxy99ITWn4eoSA95qPyXDMH0ALoAqUp49ITniiJFsXUVBtalh/KffMpg21Q==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, + "@types/react-modal": { + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz", + "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, + "@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true + }, "@vitejs/plugin-react": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-1.3.2.tgz", @@ -6998,6 +7116,12 @@ "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", "dev": true }, + "csstype": { + "version": "3.0.11", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz", + "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==", + "dev": true + }, "d3-path": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz", @@ -10223,6 +10347,12 @@ "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", "dev": true }, + "typescript": { + "version": "4.6.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz", + "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==", + "dev": true + }, "uglify-js": { "version": "3.15.4", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.15.4.tgz", diff --git a/ui/package.json b/ui/package.json index 493b3a3..c38e19d 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/src/index.jsx b/ui/src/index.jsx index 9fc82f8..286f1a7 100644 --- a/ui/src/index.jsx +++ b/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( diff --git a/ui/src/rete.jsx b/ui/src/rete.jsx index d0b8115..92576c6 100644 --- a/ui/src/rete.jsx +++ b/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; } }); diff --git a/ui/src/rete/components/template/HandlebarsComponent.js b/ui/src/rete/components/template/HandlebarsComponent.js index c52b2ad..234eff0 100644 --- a/ui/src/rete/components/template/HandlebarsComponent.js +++ b/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; } } diff --git a/ui/src/rete/components/template/PugComponent.js b/ui/src/rete/components/template/PugComponent.js index 749fdb3..d81080e 100644 --- a/ui/src/rete/components/template/PugComponent.js +++ b/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; } } diff --git a/ui/src/rete/controls/BooleanControl.jsx b/ui/src/rete/controls/BooleanControl.jsx index ad191bf..cf2f032 100644 --- a/ui/src/rete/controls/BooleanControl.jsx +++ b/ui/src/rete/controls/BooleanControl.jsx @@ -22,7 +22,7 @@ export class BooleanControl extends Rete.Control {
ref && @@ -30,7 +30,7 @@ export class BooleanControl extends Rete.Control { } onChange={(e) => onChange(+e.target.checked)} /> -