From 8b2c1723a885c69fcc21d4d7b5217a432afe860d Mon Sep 17 00:00:00 2001 From: Jack Date: Fri, 13 Sep 2024 14:49:26 +0200 Subject: [PATCH] chore: upgrade slim-select (@miodec) (#5884) Finally! --- frontend/package.json | 2 +- .../src/ts/elements/account/result-filters.ts | 20 ------------------- frontend/src/ts/elements/leaderboards.ts | 3 --- .../ts/elements/settings/settings-group.ts | 4 +--- frontend/src/ts/elements/test-activity.ts | 9 ++------- frontend/src/ts/modals/quote-report.ts | 2 -- frontend/src/ts/modals/quote-search.ts | 2 -- frontend/src/ts/modals/quote-submit.ts | 2 -- frontend/src/ts/modals/user-report.ts | 2 -- frontend/src/ts/modals/word-filter.ts | 4 ---- frontend/src/ts/pages/settings.ts | 3 --- pnpm-lock.yaml | 13 +++++------- 12 files changed, 9 insertions(+), 57 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 6f2d22d59..089dbd1fb 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -89,7 +89,7 @@ "konami": "1.6.3", "lz-ts": "1.1.2", "object-hash": "3.0.0", - "slim-select": "2.8.1", + "slim-select": "2.9.0", "stemmer": "2.0.1", "throttle-debounce": "5.0.2", "zod": "3.23.8" diff --git a/frontend/src/ts/elements/account/result-filters.ts b/frontend/src/ts/elements/account/result-filters.ts index 14c651db1..0c647bb41 100644 --- a/frontend/src/ts/elements/account/result-filters.ts +++ b/frontend/src/ts/elements/account/result-filters.ts @@ -6,7 +6,6 @@ import Config from "../../config"; import * as Notifications from "../notifications"; import Ape from "../../ape/index"; import * as Loader from "../loader"; -// @ts-expect-error TODO: update slim-select import SlimSelect from "slim-select"; import { QuoteLength } from "@monkeytype/contracts/schemas/configs"; import { @@ -346,12 +345,10 @@ export function updateActive(): void { } for (const [id, select] of Object.entries(groupSelects)) { - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select const ss = select; const group = getGroup(id as ResultFiltersGroup); const everythingSelected = Object.values(group).every((v) => v === true); - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select const newData = ss.store.getData(); const allOption = $( @@ -680,10 +677,8 @@ function adjustScrollposition( group: ResultFiltersGroup, topItem: number = 0 ): void { - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select const slimSelect = groupSelects[group]; if (slimSelect === undefined) return; - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select const listElement = slimSelect.render.content.list; const topListItem = listElement.children.item(topItem) as HTMLElement; @@ -779,7 +774,6 @@ export async function appendButtons( ); if (el) { el.innerHTML = html; - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select groupSelects["language"] = new SlimSelect({ select: el.querySelector(".languageSelect") as HTMLSelectElement, settings: { @@ -790,16 +784,12 @@ export async function appendButtons( }, events: { beforeChange: ( - // @ts-expect-error TODO: update slim-select selectedOptions, - // @ts-expect-error TODO: update slim-select oldSelectedOptions ): void | boolean => { return selectBeforeChangeFn( "language", - // eslint-disable-next-line @typescript-eslint/no-unsafe-argument selectedOptions, - // eslint-disable-next-line @typescript-eslint/no-unsafe-argument oldSelectedOptions ); }, @@ -841,7 +831,6 @@ export async function appendButtons( ); if (el) { el.innerHTML = html; - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select groupSelects["funbox"] = new SlimSelect({ select: el.querySelector(".funboxSelect") as HTMLSelectElement, settings: { @@ -852,16 +841,12 @@ export async function appendButtons( }, events: { beforeChange: ( - // @ts-expect-error TODO: update slim-select selectedOptions, - // @ts-expect-error TODO: update slim-select oldSelectedOptions ): void | boolean => { return selectBeforeChangeFn( "funbox", - // eslint-disable-next-line @typescript-eslint/no-unsafe-argument selectedOptions, - // eslint-disable-next-line @typescript-eslint/no-unsafe-argument oldSelectedOptions ); }, @@ -899,7 +884,6 @@ export async function appendButtons( ); if (el) { el.innerHTML = html; - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select groupSelects["tags"] = new SlimSelect({ select: el.querySelector(".tagsSelect") as HTMLSelectElement, settings: { @@ -910,16 +894,12 @@ export async function appendButtons( }, events: { beforeChange: ( - // @ts-expect-error TODO: update slim-select selectedOptions, - // @ts-expect-error TODO: update slim-select oldSelectedOptions ): void | boolean => { return selectBeforeChangeFn( "tags", - // eslint-disable-next-line @typescript-eslint/no-unsafe-argument selectedOptions, - // eslint-disable-next-line @typescript-eslint/no-unsafe-argument oldSelectedOptions ); }, diff --git a/frontend/src/ts/elements/leaderboards.ts b/frontend/src/ts/elements/leaderboards.ts index e8c23aa11..d5f1b9c25 100644 --- a/frontend/src/ts/elements/leaderboards.ts +++ b/frontend/src/ts/elements/leaderboards.ts @@ -14,7 +14,6 @@ import * as ConnectionState from "../states/connection"; import * as Skeleton from "../utils/skeleton"; import { debounce } from "throttle-debounce"; import Format from "../utils/format"; -// @ts-expect-error TODO: update slim-select import SlimSelect from "slim-select"; import { getHtmlByUserFlags } from "../controllers/user-flag-controller"; import { @@ -712,7 +711,6 @@ export function show(): void { Config.typingSpeedUnit + '
accuracy
' ); - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select languageSelector = new SlimSelect({ select: "#leaderboardsWrapper #leaderboards .leaderboardsTop .buttonGroup.timeRange .languageSelect", @@ -737,7 +735,6 @@ export function show(): void { selected: lang === currentLanguage, })), events: { - // @ts-expect-error TODO: update slim-select afterChange: (newVal): void => { currentLanguage = newVal[0]?.value as string; updateTitle(); diff --git a/frontend/src/ts/elements/settings/settings-group.ts b/frontend/src/ts/elements/settings/settings-group.ts index 2ae136bf5..0ffc1a902 100644 --- a/frontend/src/ts/elements/settings/settings-group.ts +++ b/frontend/src/ts/elements/settings/settings-group.ts @@ -1,7 +1,6 @@ import { ConfigValue } from "@monkeytype/contracts/schemas/configs"; import Config from "../../config"; import * as Notifications from "../notifications"; -// @ts-expect-error TODO: update slim-select import SlimSelect from "slim-select"; import { debounce } from "throttle-debounce"; @@ -119,8 +118,7 @@ export default class SettingsGroup { select.value = this.configValue as string; - //@ts-expect-error - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unnecessary-type-assertion -- TODO: update slim-select + //@ts-expect-error this is fine, slimselect adds slim to the element const ss = select.slim as SlimSelect | undefined; ss?.store.setSelectedBy("value", [this.configValue as string]); ss?.render.renderValues(); diff --git a/frontend/src/ts/elements/test-activity.ts b/frontend/src/ts/elements/test-activity.ts index 9bf035140..069027bad 100644 --- a/frontend/src/ts/elements/test-activity.ts +++ b/frontend/src/ts/elements/test-activity.ts @@ -1,7 +1,5 @@ -// @ts-expect-error TODO: update slim-select import SlimSelect from "slim-select"; -// @ts-expect-error TODO: update slim-select -import type { DataObjectPartial } from "slim-select/dist/store"; +import { DataObjectPartial } from "slim-select/store"; import { getTestActivityCalendar } from "../db"; import * as ServerConfiguration from "../ape/server-configuration"; import * as DB from "../db"; @@ -18,7 +16,6 @@ export function init( } $("#testActivity").removeClass("hidden"); - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select yearSelector = getYearSelector(); initYearSelector("current", userSignUpDate?.getFullYear() || 2022); update(calendar); @@ -85,8 +82,8 @@ export function initYearSelector( } } - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select const yearSelect = getYearSelector(); + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument yearSelect.setData(years); years.length > 1 ? yearSelect.enable() : yearSelect.disable(); } @@ -104,14 +101,12 @@ function updateMonths(months: MonkeyTypes.TestActivityMonth[]): void { function getYearSelector(): SlimSelect { if (yearSelector !== undefined) return yearSelector; - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select yearSelector = new SlimSelect({ select: "#testActivity .yearSelect", settings: { showSearch: false, }, events: { - // @ts-expect-error TODO: update slim-select afterChange: async (newVal): Promise => { yearSelector?.disable(); const selected = newVal[0]?.value as string; diff --git a/frontend/src/ts/modals/quote-report.ts b/frontend/src/ts/modals/quote-report.ts index 5b4cf7ba0..fc3a5f573 100644 --- a/frontend/src/ts/modals/quote-report.ts +++ b/frontend/src/ts/modals/quote-report.ts @@ -5,7 +5,6 @@ import * as Notifications from "../elements/notifications"; import QuotesController from "../controllers/quotes-controller"; import * as CaptchaController from "../controllers/captcha-controller"; import { removeLanguageSize } from "../utils/strings"; -// @ts-expect-error TODO: update slim-select import SlimSelect from "slim-select"; import AnimatedModal, { ShowOptions } from "../utils/animated-modal"; import { CharacterCounter } from "../elements/character-counter"; @@ -46,7 +45,6 @@ export async function show( $("#quoteReportModal .reason").val("Grammatical error"); $("#quoteReportModal .comment").val(""); - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select state.reasonSelect = new SlimSelect({ select: "#quoteReportModal .reason", settings: { diff --git a/frontend/src/ts/modals/quote-search.ts b/frontend/src/ts/modals/quote-search.ts index 42456ffda..9192853d8 100644 --- a/frontend/src/ts/modals/quote-search.ts +++ b/frontend/src/ts/modals/quote-search.ts @@ -16,7 +16,6 @@ import { isAuthenticated } from "../firebase"; import { debounce } from "throttle-debounce"; import Ape from "../ape"; import * as Loader from "../elements/loader"; -// @ts-expect-error TODO: update slim-select import SlimSelect from "slim-select"; import * as TestState from "../test/test-state"; import AnimatedModal, { ShowOptions } from "../utils/animated-modal"; @@ -273,7 +272,6 @@ export async function show(showOptions?: ShowOptions): Promise { $("#quoteSearchModal .goToQuoteApprove").addClass("hidden"); } - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select lengthSelect = new SlimSelect({ select: "#quoteSearchModal .quoteLengthFilter", diff --git a/frontend/src/ts/modals/quote-submit.ts b/frontend/src/ts/modals/quote-submit.ts index 3f0c1aa5e..7f8248c0e 100644 --- a/frontend/src/ts/modals/quote-submit.ts +++ b/frontend/src/ts/modals/quote-submit.ts @@ -5,7 +5,6 @@ import * as CaptchaController from "../controllers/captcha-controller"; import * as Strings from "../utils/strings"; import * as JSONData from "../utils/json-data"; import Config from "../config"; -// @ts-expect-error TODO: update slim-select import SlimSelect from "slim-select"; import AnimatedModal, { ShowOptions } from "../utils/animated-modal"; import { CharacterCounter } from "../elements/character-counter"; @@ -65,7 +64,6 @@ export async function show(showOptions: ShowOptions): Promise { ); await initDropdown(); - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select select = new SlimSelect({ select: "#quoteSubmitModal .newQuoteLanguage", }); diff --git a/frontend/src/ts/modals/user-report.ts b/frontend/src/ts/modals/user-report.ts index 3c926afcf..9e8f606a1 100644 --- a/frontend/src/ts/modals/user-report.ts +++ b/frontend/src/ts/modals/user-report.ts @@ -2,7 +2,6 @@ import Ape from "../ape"; import * as Loader from "../elements/loader"; import * as Notifications from "../elements/notifications"; import * as CaptchaController from "../controllers/captcha-controller"; -// @ts-expect-error TODO: update slim-select import SlimSelect from "slim-select"; import AnimatedModal from "../utils/animated-modal"; import { isAuthenticated } from "../firebase"; @@ -51,7 +50,6 @@ export async function show(options: ShowOptions): Promise { "Inappropriate name"; (modalEl.querySelector(".comment") as HTMLTextAreaElement).value = ""; - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select select = new SlimSelect({ select: modalEl.querySelector(".reason") as HTMLElement, settings: { diff --git a/frontend/src/ts/modals/word-filter.ts b/frontend/src/ts/modals/word-filter.ts index 84b1e75d3..1ff21624e 100644 --- a/frontend/src/ts/modals/word-filter.ts +++ b/frontend/src/ts/modals/word-filter.ts @@ -2,7 +2,6 @@ import * as Misc from "../utils/misc"; import * as JSONData from "../utils/json-data"; import * as CustomText from "../test/custom-text"; import * as Notifications from "../elements/notifications"; -// @ts-expect-error TODO: update slim-select import SlimSelect from "slim-select"; import AnimatedModal, { HideOptions, @@ -159,21 +158,18 @@ export async function show(showOptions?: ShowOptions): Promise { void modal.show({ ...showOptions, beforeAnimation: async (modalEl) => { - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select languageSelect = new SlimSelect({ select: "#wordFilterModal .languageInput", settings: { contentLocation: modalEl, }, }); - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select layoutSelect = new SlimSelect({ select: "#wordFilterModal .layoutInput", settings: { contentLocation: modal.getModal(), }, }); - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select presetSelect = new SlimSelect({ select: "#wordFilterModal .presetInput", settings: { diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts index ff78a658b..0c28aef76 100644 --- a/frontend/src/ts/pages/settings.ts +++ b/frontend/src/ts/pages/settings.ts @@ -17,7 +17,6 @@ import Page from "./page"; import { isAuthenticated } from "../firebase"; import { areFunboxesCompatible } from "../test/funbox/funbox-validation"; import { get as getTypingSpeedUnit } from "../utils/typing-speed-units"; -// @ts-expect-error TODO: update slim-select import SlimSelect from "slim-select"; import * as Skeleton from "../utils/skeleton"; @@ -559,7 +558,6 @@ async function fillSettingsPage(): Promise { new SlimSelect({ select: themeSelectLightElement, events: { - // @ts-expect-error TODO: update slim-select afterChange: (newVal): void => { UpdateConfig.setThemeLight(newVal[0]?.value as string); }, @@ -569,7 +567,6 @@ async function fillSettingsPage(): Promise { new SlimSelect({ select: themeSelectDarkElement, events: { - // @ts-expect-error TODO: update slim-select afterChange: (newVal): void => { UpdateConfig.setThemeDark(newVal[0]?.value as string); }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6f942faf4..14559e741 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -322,8 +322,8 @@ importers: specifier: 3.0.0 version: 3.0.0 slim-select: - specifier: 2.8.1 - version: 2.8.1 + specifier: 2.9.0 + version: 2.9.0 stemmer: specifier: 2.0.1 version: 2.0.1 @@ -8084,8 +8084,8 @@ packages: slick@1.12.2: resolution: {integrity: sha512-4qdtOGcBjral6YIBCWJ0ljFSKNLz9KkhbWtuGvUyRowl1kxfuE1x/Z/aJcaiilpb3do9bl5K7/1h9XC5wWpY/A==} - slim-select@2.8.1: - resolution: {integrity: sha512-/wi+4dau48edrPZ/ggD+R8qD6FbCLGv5zvrYh4rqp1RNEIbkb1pRYJbljLjvr7/QqBvX3Hjbnvdnw9FPzJ8o5Q==} + slim-select@2.9.0: + resolution: {integrity: sha512-AwAm4kliM1utztdXfKyiidgnQanAKQVJ1+61rJYHwDfzu3LAn/spFKb+xBiSqr3E/dlZu0MrBxflBL2sN5q2xA==} slugify@1.4.7: resolution: {integrity: sha512-tf+h5W1IrjNm/9rKKj0JU2MDMruiopx0jjVA5zCdBtcGjfp0+c5rHw/zADLC3IeKlGHtVbHtpfzvYA0OYT+HKg==} @@ -18522,10 +18522,7 @@ snapshots: slick@1.12.2: {} - slim-select@2.8.1: - dependencies: - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) + slim-select@2.9.0: {} slugify@1.4.7: {}