diff options
Diffstat (limited to 'src/utils')
-rw-r--r-- | src/utils/constants.ts | 6 | ||||
-rw-r--r-- | src/utils/dependencies.ts | 4 | ||||
-rw-r--r-- | src/utils/misc.tsx | 49 | ||||
-rw-r--r-- | src/utils/react.ts | 62 | ||||
-rw-r--r-- | src/utils/text.ts | 36 |
5 files changed, 147 insertions, 10 deletions
diff --git a/src/utils/constants.ts b/src/utils/constants.ts index eead2a3..f45e8b0 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -157,8 +157,12 @@ export const Devs = Object.freeze({ name: "Luny", id: 821472922140803112n }, + Vap: { + name: "Vap0r1ze", + id: 454072114492866560n + }, KingFish: { name: "King Fish", id: 499400512559382538n - } + }, }); diff --git a/src/utils/dependencies.ts b/src/utils/dependencies.ts index a7766de..ed26644 100644 --- a/src/utils/dependencies.ts +++ b/src/utils/dependencies.ts @@ -74,3 +74,7 @@ export interface ApngFrameData { frames: ApngFrame[]; playTime: number; } + +const shikiWorkerDist = "https://unpkg.com/@vap/shiki-worker@0.0.8/dist"; +export const shikiWorkerSrc = `${shikiWorkerDist}/${IS_DEV ? "index.js" : "index.min.js"}`; +export const shikiOnigasmSrc = "https://unpkg.com/@vap/shiki@0.10.3/dist/onig.wasm"; diff --git a/src/utils/misc.tsx b/src/utils/misc.tsx index d9164a0..8b7cea2 100644 --- a/src/utils/misc.tsx +++ b/src/utils/misc.tsx @@ -28,7 +28,12 @@ export function makeLazy<T>(factory: () => T): () => T { return () => cache ?? (cache = factory()); } -type AwaiterRes<T> = [T, any, boolean, () => void]; +type AwaiterRes<T> = [T, any, boolean]; +interface AwaiterOpts<T> { + fallbackValue: T, + deps?: unknown[], + onError?(e: any): void, +} /** * Await a promise * @param factory Factory @@ -36,26 +41,31 @@ type AwaiterRes<T> = [T, any, boolean, () => void]; * @returns [value, error, isPending] */ export function useAwaiter<T>(factory: () => Promise<T>): AwaiterRes<T | null>; -export function useAwaiter<T>(factory: () => Promise<T>, fallbackValue: T): AwaiterRes<T>; -export function useAwaiter<T>(factory: () => Promise<T>, fallbackValue: null, onError: (e: unknown) => unknown): AwaiterRes<T>; -export function useAwaiter<T>(factory: () => Promise<T>, fallbackValue: T | null = null, onError?: (e: unknown) => unknown): AwaiterRes<T | null> { +export function useAwaiter<T>(factory: () => Promise<T>, providedOpts: AwaiterOpts<T>): AwaiterRes<T>; +export function useAwaiter<T>(factory: () => Promise<T>, providedOpts?: AwaiterOpts<T | null>): AwaiterRes<T | null> { + const opts: Required<AwaiterOpts<T | null>> = Object.assign({ + fallbackValue: null, + deps: [], + onError: null, + }, providedOpts); const [state, setState] = React.useState({ - value: fallbackValue, + value: opts.fallbackValue, error: null, pending: true }); - const [signal, setSignal] = React.useState(0); React.useEffect(() => { let isAlive = true; + if (!state.pending) setState({ ...state, pending: true }); + factory() .then(value => isAlive && setState({ value, error: null, pending: false })) - .catch(error => isAlive && (setState({ value: null, error, pending: false }), onError?.(error))); + .catch(error => isAlive && (setState({ value: null, error, pending: false }), opts.onError?.(error))); return () => void (isAlive = false); - }, [signal]); + }, opts.deps); - return [state.value, state.error, state.pending, () => setSignal(signal + 1)]; + return [state.value, state.error, state.pending]; } /** @@ -197,3 +207,24 @@ export function copyWithToast(text: string, toastMessage = "Copied to clipboard! export function isObject(obj: unknown): obj is object { return typeof obj === "object" && obj !== null && !Array.isArray(obj); } + +/** + * Returns null if value is not a URL, otherwise return URL object. + * Avoids having to wrap url checks in a try/catch + */ +export function parseUrl(urlString: string): URL | null { + try { + return new URL(urlString); + } catch { + return null; + } +} + +/** + * Checks whether an element is on screen + */ +export const checkIntersecting = (el: Element) => { + const elementBox = el.getBoundingClientRect(); + const documentHeight = Math.max(document.documentElement.clientHeight, window.innerHeight); + return !(elementBox.bottom < 0 || elementBox.top - documentHeight >= 0); +}; diff --git a/src/utils/react.ts b/src/utils/react.ts new file mode 100644 index 0000000..8585846 --- /dev/null +++ b/src/utils/react.ts @@ -0,0 +1,62 @@ +/* + * Vencord, a modification for Discord's desktop app + * Copyright (c) 2022 Vendicated and contributors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. +*/ + +import { React } from "@webpack/common"; + +import { checkIntersecting } from "./misc"; + +/** + * Check if an element is on screen + * @param intersectOnly If `true`, will only update the state when the element comes into view + * @returns [refCallback, isIntersecting] + */ +export const useIntersection = (intersectOnly = false): [ + refCallback: React.RefCallback<Element>, + isIntersecting: boolean, +] => { + const observerRef = React.useRef<IntersectionObserver | null>(null); + const [isIntersecting, setIntersecting] = React.useState(false); + + const refCallback = (element: Element | null) => { + observerRef.current?.disconnect(); + observerRef.current = null; + + if (!element) return; + + if (checkIntersecting(element)) { + setIntersecting(true); + if (intersectOnly) return; + } + + observerRef.current = new IntersectionObserver(entries => { + for (const entry of entries) { + if (entry.target !== element) continue; + if (entry.isIntersecting && intersectOnly) { + setIntersecting(true); + observerRef.current?.disconnect(); + observerRef.current = null; + } else { + setIntersecting(entry.isIntersecting); + } + } + }); + observerRef.current.observe(element); + }; + + return [refCallback, isIntersecting]; +}; diff --git a/src/utils/text.ts b/src/utils/text.ts new file mode 100644 index 0000000..17826e8 --- /dev/null +++ b/src/utils/text.ts @@ -0,0 +1,36 @@ +/* + * Vencord, a modification for Discord's desktop app + * Copyright (c) 2022 Vendicated and contributors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. +*/ + +// Utils for readable text transformations eg: `toTitle(fromKebab())` + +// Case style to words +export const wordsFromCamel = (text: string) => text.split(/(?=[A-Z])/).map(w => w.toLowerCase()); +export const wordsFromSnake = (text: string) => text.toLowerCase().split("_"); +export const wordsFromKebab = (text: string) => text.toLowerCase().split("-"); +export const wordsFromPascal = (text: string) => text.split(/(?=[A-Z])/).map(w => w.toLowerCase()); +export const wordsFromTitle = (text: string) => text.toLowerCase().split(" "); + +// Words to case style +export const wordsToCamel = (words: string[]) => + words.map((w, i) => (i ? w[0].toUpperCase() + w.slice(1) : w)).join(""); +export const wordsToSnake = (words: string[]) => words.join("_").toUpperCase(); +export const wordsToKebab = (words: string[]) => words.join("-").toLowerCase(); +export const wordsToPascal = (words: string[]) => + words.map(w => w[0].toUpperCase() + w.slice(1)).join(""); +export const wordsToTitle = (words: string[]) => + words.map(w => w[0].toUpperCase() + w.slice(1)).join(" "); |