From a6ca43bb2d1988bd9a13f1443ba4de660754c9ee Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Thu, 16 Nov 2023 13:12:47 -0800 Subject: [PATCH] Restore ESLint and Prettier auto-formatting and CI linting (#1457) * Restore ESLint and Prettier autoformatting * Fix formatting and lints in web files * Hacky fix to eslint crash * Fix remaining lints * Add lint-fix script --------- Co-authored-by: 0hypercube <0hypercube@gmail.com> --- .github/workflows/ci.yml | 3 +- .prettierrc | 7 + .vscode/settings.json | 4 +- frontend/{.eslintrc.js => .eslintrc.cjs} | 82 +- frontend/package-lock.json | 5473 ++++++++++++++++- frontend/package.json | 13 +- frontend/src/components/Editor.svelte | 24 +- .../floating-menus/ColorPicker.svelte | 25 +- .../floating-menus/DialogModal.svelte | 4 +- .../floating-menus/EyedropperPreview.svelte | 8 +- .../components/floating-menus/MenuList.svelte | 14 +- .../src/components/layout/FloatingMenu.svelte | 10 +- .../src/components/panels/Document.svelte | 13 +- .../src/components/panels/LayerTree.svelte | 6 +- .../src/components/panels/Properties.svelte | 2 +- frontend/src/components/views/Graph.svelte | 27 +- .../src/components/widgets/WidgetRow.svelte | 15 +- .../widgets/buttons/PopoverButton.svelte | 1 + .../widgets/groups/WidgetSection.svelte | 7 +- .../widgets/inputs/CheckboxInput.svelte | 2 +- .../widgets/inputs/CurveInput.svelte | 4 +- .../widgets/inputs/FontInput.svelte | 10 +- .../widgets/inputs/LayerReferenceInput.svelte | 4 +- .../widgets/inputs/MenuBarInput.svelte | 4 +- .../widgets/inputs/NumberInput.svelte | 5 +- .../widgets/inputs/SwatchPairInput.svelte | 2 +- .../widgets/labels/UserInputLabel.svelte | 5 +- .../window/status-bar/StatusBar.svelte | 2 +- .../window/title-bar/TitleBar.svelte | 6 +- .../window/title-bar/WindowButtonsWeb.svelte | 3 +- .../components/window/workspace/Panel.svelte | 6 +- .../window/workspace/Workspace.svelte | 17 +- frontend/src/io-managers/clipboard.ts | 6 +- frontend/src/io-managers/drag.ts | 4 +- frontend/src/io-managers/hyperlinks.ts | 2 +- frontend/src/io-managers/input.ts | 42 +- frontend/src/io-managers/localization.ts | 4 +- frontend/src/io-managers/panic.ts | 2 +- frontend/src/io-managers/persistence.ts | 20 +- frontend/src/state-providers/dialog.ts | 10 +- frontend/src/state-providers/document.ts | 14 +- frontend/src/state-providers/fullscreen.ts | 10 +- frontend/src/state-providers/node-graph.ts | 17 +- frontend/src/state-providers/portfolio.ts | 16 +- frontend/src/utility-functions/debounce.ts | 4 +- frontend/src/utility-functions/files.ts | 10 +- frontend/src/utility-functions/icons.ts | 6 +- frontend/src/utility-functions/network.ts | 2 +- frontend/src/utility-functions/platform.ts | 3 +- .../src/utility-functions/rasterization.ts | 6 +- frontend/src/wasm-communication/editor.ts | 40 +- frontend/src/wasm-communication/messages.ts | 66 +- .../wasm-communication/subscription-router.ts | 6 +- frontend/tsconfig.json | 2 +- frontend/vite.config.ts | 63 +- website/other/bezier-rs-demos/.eslintrc.js | 1 - .../src/components/BezierDemo.ts | 12 +- .../src/components/BezierDemoPane.ts | 4 +- .../src/components/SubpathDemo.ts | 12 +- .../src/components/SubpathDemoPane.ts | 4 +- website/other/bezier-rs-demos/src/main.ts | 8 +- .../other/bezier-rs-demos/src/utils/render.ts | 8 +- .../other/bezier-rs-demos/src/utils/types.ts | 8 +- 63 files changed, 5869 insertions(+), 351 deletions(-) rename frontend/{.eslintrc.js => .eslintrc.cjs} (56%) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 24d602d34..580d65ebc 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -75,8 +75,7 @@ jobs: NODE_ENV: production run: | cd frontend - # npm run lint - echo "💥 Frontend linting is temporarily disabled until it can be set up again with Svelte 💥" + npm run lint - name: 🔬 Check Rust formatting run: | diff --git a/.prettierrc b/.prettierrc index 54721570f..91210d5a7 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,6 +3,7 @@ "useTabs": true, "tabWidth": 4, "printWidth": 200, + "plugins": ["prettier-plugin-svelte"], "overrides": [ { "files": ["*.yml", "*.yaml"], @@ -10,6 +11,12 @@ "useTabs": false, "tabWidth": 2 } + }, + { + "files": ["*.svelte"], + "options": { + "parser": "svelte" + } } ] } diff --git a/.vscode/settings.json b/.vscode/settings.json index 1da69fa97..e8c14083d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,7 +6,7 @@ "editor.defaultFormatter": "rust-lang.rust-analyzer" }, // Web: save on format - "[typescript][javascript]": { + "[javascript][typescript][svelte]": { "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, @@ -39,7 +39,7 @@ // ESLint config "eslint.format.enable": true, "eslint.workingDirectories": ["./frontend", "./website/other/bezier-rs-demos", "./website"], - "eslint.validate": ["javascript", "typescript"], + "eslint.validate": ["javascript", "typescript", "svelte"], // VS Code config "html.format.wrapLineLength": 200, "files.eol": "\n", diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.cjs similarity index 56% rename from frontend/.eslintrc.js rename to frontend/.eslintrc.cjs index 2382cd2d4..acbaae233 100644 --- a/frontend/.eslintrc.js +++ b/frontend/.eslintrc.cjs @@ -1,24 +1,25 @@ - module.exports = { root: true, - env: { - browser: true, - node: true, - es2020: true, - }, - parserOptions: { - ecmaVersion: 2020, - }, + env: { browser: true, node: true }, extends: [ - // General Prettier defaults + "eslint:recommended", + "plugin:import/recommended", + "plugin:@typescript-eslint/recommended", + "plugin:import/typescript", + "plugin:svelte/recommended", + "plugin:svelte/prettier", "prettier", ], + plugins: ["import", "@typescript-eslint", "prettier"], settings: { - // https://github.com/import-js/eslint-plugin-import#resolvers - "import/resolver": { - // `node` must be listed first! - node: {}, - }, + "import/parsers": { "@typescript-eslint/parser": [".ts", ".tsx"] }, + "import/resolver": { typescript: true, node: true }, + }, + parser: "@typescript-eslint/parser", + parserOptions: { + ecmaVersion: "latest", + project: "./tsconfig.json", + extraFileExtensions: [".svelte"], }, ignorePatterns: [ // Ignore generated directories @@ -26,13 +27,24 @@ module.exports = { "dist/", "pkg/", "wasm/pkg/", - // Don't ignore JS and TS dotfiles in this folder "!.*.js", "!.*.ts", ], + overrides: [ + { + files: ["*.js"], + rules: { "@typescript-eslint/explicit-function-return-type": ["off"] }, + }, + { + files: ["*.svelte"], + parser: "svelte-eslint-parser", + // Parse the ` @@ -214,7 +215,7 @@ {#if sectionIndex > 0} {/if} - {#each virtualScrollingEntryHeight ? section.slice(virtualScrollingStartIndex, virtualScrollingEndIndex) : section as entry, entryIndex (entryIndex + (virtualScrollingEntryHeight ? virtualScrollingStartIndex : 0))} + {#each virtualScrollingEntryHeight ? section.slice(virtualScrollingStartIndex, virtualScrollingEndIndex) : section as entry, entryIndex (entryIndex + startIndex)} diff --git a/frontend/src/components/layout/FloatingMenu.svelte b/frontend/src/components/layout/FloatingMenu.svelte index 1013942f7..665663e9f 100644 --- a/frontend/src/components/layout/FloatingMenu.svelte +++ b/frontend/src/components/layout/FloatingMenu.svelte @@ -137,9 +137,9 @@ floatingMenuContentDiv.style.setProperty("min-height", "unset"); } - // Gets the client bounds of the elements and apply relevant styles to them - // TODO: Use DOM attribute bindings more whilst not causing recursive updates - // Turning measuring on and off both causes the component to change, which causes the `afterUpdate()` Svelte event to fire extraneous times (hurting performance and sometimes causing an infinite loop) + // Gets the client bounds of the elements and apply relevant styles to them. + // TODO: Use DOM attribute bindings more whilst not causing recursive updates. Turning measuring on and off both causes the component to change, + // TODO: which causes the `afterUpdate()` Svelte event to fire extraneous times (hurting performance and sometimes causing an infinite loop). if (!measuringOngoingGuard) positionAndStyleFloatingMenu(); }); @@ -237,7 +237,7 @@ } // To be called by the parent component. Measures the actual width of the floating menu content element and returns it in a promise. - export async function measureAndEmitNaturalWidth(): Promise { + export async function measureAndEmitNaturalWidth() { if (!measuringOngoingGuard) return; // Wait for the changed content which fired the `afterUpdate()` Svelte event to be put into the DOM @@ -297,7 +297,7 @@ } } - function hoverTransfer(self: HTMLDivElement | undefined, ownSpawner: HTMLElement | undefined, targetSpawner: HTMLElement | undefined): void { + function hoverTransfer(self: HTMLDivElement | undefined, ownSpawner: HTMLElement | undefined, targetSpawner: HTMLElement | undefined) { // Algorithm pseudo-code to detect and transfer to hover-transferrable floating menu spawners // Accompanying diagram: // diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte index 5b961909c..9375211a0 100644 --- a/frontend/src/components/panels/Document.svelte +++ b/frontend/src/components/panels/Document.svelte @@ -1,8 +1,10 @@ @@ -241,4 +243,5 @@ } } } + // paddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpadding diff --git a/frontend/src/components/widgets/buttons/PopoverButton.svelte b/frontend/src/components/widgets/buttons/PopoverButton.svelte index 13a3ea16c..3687d3649 100644 --- a/frontend/src/components/widgets/buttons/PopoverButton.svelte +++ b/frontend/src/components/widgets/buttons/PopoverButton.svelte @@ -1,5 +1,6 @@ - dispatch("checked", inputElement?.checked)} {disabled} tabindex={disabled ? -1 : 0} bind:this={inputElement} /> + dispatch("checked", inputElement?.checked)} {disabled} tabindex={disabled ? -1 : 0} bind:this={inputElement} />