feat(plugin): ShikiCodeblocks (#267)

Co-authored-by: ArjixWasTaken <53124886+ArjixWasTaken@users.noreply.github.com>
Co-authored-by: Ven <vendicated@riseup.net>

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(" ");