From b28e5792e2bb418d1eb319bea348e9d697e0ed6c Mon Sep 17 00:00:00 2001
From: kiosion <hi@kio.dev>
Date: Wed, 4 Oct 2023 16:15:17 -0300
Subject: [PATCH] chore: Clean up dynamic code imports, types

---
 svelte-app/.eslintrc                          |  16 +-
 svelte-app/.prettierrc.json                   |   2 +
 svelte-app/src/components/code-block.svelte   | 177 ++++++++----------
 .../src/components/code-block/imports.ts      |  81 ++++++++
 svelte-app/src/components/icon.svelte         |  21 ++-
 .../portable-text/portable-text.svelte        |  18 +-
 .../serializers/custom-heading.svelte         |  48 ++---
 svelte-app/src/lib/icons.ts                   |  17 +-
 svelte-app/tsconfig.json                      |   1 -
 svelte-app/types/app/index.d.ts               |  11 +-
 10 files changed, 237 insertions(+), 155 deletions(-)
 create mode 100644 svelte-app/src/components/code-block/imports.ts

diff --git a/svelte-app/.eslintrc b/svelte-app/.eslintrc
index 7a2961009..fd86f5bfa 100644
--- a/svelte-app/.eslintrc
+++ b/svelte-app/.eslintrc
@@ -11,6 +11,7 @@
     "es2017": true
   },
   "extends": [
+    "prettier",
     "eslint:recommended",
     "plugin:svelte/recommended",
     "plugin:@typescript-eslint/recommended"
@@ -26,6 +27,10 @@
     "@typescript-eslint/no-namespace": ["off"],
     "@typescript-eslint/restrict-template-expressions": ["off"],
     "@typescript-eslint/no-unused-vars": ["off"],
+    "@typescript-eslint/no-duplicate-imports": ["error"],
+    "@typescript-eslint/ban-ts-comment": ["error", {
+      "ts-expect-error": "allow-with-description"
+    }],
     "array-bracket-spacing": ["error", "never"],
     "arrow-spacing": ["error"],
     "block-scoped-var": ["error"],
@@ -42,7 +47,7 @@
     "keyword-spacing": ["error"],
     "linebreak-style": ["error"],
     "no-confusing-arrow": ["error"],
-    "no-duplicate-imports": ["error"],
+    "no-duplicate-imports": ["off"],
     "no-trailing-spaces": ["error"],
     "no-var": ["error"],
     "no-eval": ["error"],
@@ -58,7 +63,14 @@
     "no-unused-vars": ["off"],
     "object-shorthand": ["error"],
     "one-var-declaration-per-line": ["error"],
-    "prettier/prettier": ["error"],
+    "prettier/prettier": ["error", {
+      "bracketSpacing": true,
+      "svelteBracketNewLine": true
+    }, {
+      "usePrettierrc": true
+    }],
+    "arrow-body-style": ["off"],
+    "prefer-arrow-callback": ["off"],
     "quotes": ["error", "single", { "avoidEscape": true }],
     "quote-props": ["error", "as-needed"],
     "semi": ["error", "always"],
diff --git a/svelte-app/.prettierrc.json b/svelte-app/.prettierrc.json
index 5f91cbfb8..b7faff4e4 100644
--- a/svelte-app/.prettierrc.json
+++ b/svelte-app/.prettierrc.json
@@ -6,6 +6,8 @@
   "singleQuote": true,
   "trailingComma": "none",
   "printWidth": 90,
+  "svelteBracketNewLine": true,
+  "bracketSpacing": true,
   "plugins": [
     "./node_modules/prettier-plugin-svelte",
     "./node_modules/prettier-plugin-tailwindcss"
diff --git a/svelte-app/src/components/code-block.svelte b/svelte-app/src/components/code-block.svelte
index ae9914a0b..1f6f58fc4 100644
--- a/svelte-app/src/components/code-block.svelte
+++ b/svelte-app/src/components/code-block.svelte
@@ -1,24 +1,20 @@
 <script lang="ts">
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-nocheck Need to fix typings for hlAuto and hlHighlight
   import { onDestroy, onMount } from 'svelte';
 
-  import {
-    type Highlight,
-    type HighlightAuto,
-    type LanguageType,
-    LineNumbers
-  } from 'svelte-highlight';
-
   import { browser } from '$app/environment';
   import { t } from '$i18n';
   import Settings from '$stores/settings';
 
-  import Hoverable from '$components/hoverable.svelte';
+  import {
+    Highlight as _Highlight,
+    HighlightSvelte as _HighlightSvelte,
+    LineNumbers as _LineNumbers
+  } from '$components/code-block/imports';
+  import Icon from '$components/icon.svelte';
   import Spinner from '$components/loading/spinner.svelte';
+  import Tooltip from '$components/tooltip.svelte';
 
-  import Icon from './icon.svelte';
-  import Tooltip from './tooltip.svelte';
+  import type { LanguageType as _LanguageType } from 'svelte-highlight/languages';
 
   export let content: string,
     filename: string | undefined,
@@ -28,11 +24,13 @@
   let hovered = false;
   let copied = false;
 
-  let hlHighlight: Highlight,
-    hlAuto: HighlightAuto,
-    hlLang: Promise<LanguageType>,
-    hlStyles: string | undefined,
-    container: HTMLElement,
+  let LanguageType: Promise<_LanguageType<string>> = new Promise<void>((resolve) =>
+      resolve()
+    ) as unknown as Promise<_LanguageType<string>>,
+    HighlightSvelte: Promise<_HighlightSvelte | undefined>,
+    LineNumbers: Promise<_LineNumbers | undefined>,
+    Highlight: Promise<_Highlight>,
+    HighlightStyles: string | undefined,
     codeContainer: HTMLElement,
     innerHeight: number,
     hideLoader = false;
@@ -49,71 +47,65 @@
       }
     },
     { theme } = Settings,
-    unsubscribe = theme.subscribe(
-      async (res) =>
-        (hlStyles =
-          res === 'light'
-            ? (await import('svelte-highlight/styles/github')).default
-            : (await import('svelte-highlight/styles/github-dark')).default)
+    unsubscribers = [
+      theme.subscribe(
+        async (res) =>
+          (HighlightStyles =
+            res === 'light'
+              ? (await import('svelte-highlight/styles/github')).default
+              : (await import('svelte-highlight/styles/github-dark')).default)
+      )
+    ];
+
+  onMount(() => {
+    lang = lang?.toLowerCase();
+
+    unsubscribers.push(
+      _LineNumbers(showLineNumbers).subscribe((res) => (LineNumbers = res)),
+      _HighlightSvelte(lang === 'svelte').subscribe((res) => (HighlightSvelte = res)),
+      _Highlight().subscribe((res) => (Highlight = res))
     );
 
-  onMount(async () => {
-    !lang
-      ? (hlAuto = await import('svelte-highlight')).HighlightAuto
-      : (hlHighlight = (await import('svelte-highlight'))
-          .Highlight as unknown as Highlight);
-
-    hlLang = (async () => {
-      lang = lang?.toLowerCase();
-      if (!lang) {
-        return (await import('svelte-highlight/languages/markdown')).markdown;
+    LanguageType = (() => {
+      if (lang === 'svelte') {
+        return Promise.resolve() as unknown as Promise<_LanguageType<string>>;
       }
-
-      let imp: LanguageType | undefined;
       try {
-        // First, handle some cases where the name isn't the import name
+        // Handle some cases where the name isn't the import name
         switch (lang) {
-          case 'c#': {
-            imp = (await import('svelte-highlight/languages/csharp')).csharp;
-            break;
-          }
-          case 'c++': {
-            imp = (await import('svelte-highlight/languages/cpp')).cpp;
-            break;
-          }
-          case 'html': {
-            imp = (await import('svelte-highlight/languages/xml')).xml;
-            break;
-          }
+          case 'c#':
+            return import('svelte-highlight/languages/csharp').then((res) => res.csharp);
+          case 'c++':
+            return import('svelte-highlight/languages/cpp').then((res) => res.cpp);
+          case 'html':
+            return import('svelte-highlight/languages/xml').then((res) => res.xml);
           case 'sh':
-          case 'shell': {
-            imp = (await import('svelte-highlight/languages/bash')).bash;
-            break;
-          }
-          default: {
-            imp = (
-              await import(`../../node_modules/svelte-highlight/languages/${lang}.js`)
-            )[lang];
-            break;
-          }
+          case 'shell':
+            return import('svelte-highlight/languages/bash').then((res) => res.bash);
+          case undefined:
+          default:
+            return import(
+              `../../node_modules/svelte-highlight/languages/${lang}.js`
+            ).then((res) => res[lang as PropertyKey]);
         }
-      } catch (e) {
-        imp = (await import('svelte-highlight/languages/markdown')).markdown;
+      } catch {
+        return import('svelte-highlight/languages/markdown').then((res) => res.markdown);
       }
-      return imp as LanguageType;
     })();
   });
 
-  onDestroy(() => unsubscribe());
+  onDestroy(() => {
+    unsubscribers.forEach((unsub) => unsub());
+  });
 
   $: browser && codeContainer && (codeContainer.style.height = `${innerHeight ?? 0}px`);
   $: browser && (hideLoader = innerHeight > 52);
 </script>
 
 <svelte:head>
-  {#if hlStyles}
+  {#if HighlightStyles}
     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-    {@html hlStyles}
+    {@html HighlightStyles}
   {/if}
 </svelte:head>
 
@@ -122,7 +114,6 @@
   role="group"
   aria-label={$t('Code block')}
   aria-labelledby={filename ? `${id}-filename` : undefined}
-  bind:this={container}
 >
   {#if filename}
     <div
@@ -132,18 +123,16 @@
       {filename}
     </div>
   {/if}
-  <Hoverable>
-    <Tooltip text={$t('Copy to clipboard')} position="left" delay={200} fixed>
-      {#key copied}
-        <button
-          class="focusOutline-sm absolute right-0 top-0 z-[2] cursor-pointer rounded-sm pb-3 pl-3 pr-4 pt-4 text-dark/60 hover:text-dark dark:text-light/60 dark:hover:text-light"
-          on:click={() => copy()}
-        >
-          <Icon icon={copied ? 'Check' : 'Copy'} />
-        </button>
-      {/key}
-    </Tooltip>
-  </Hoverable>
+  <Tooltip text={$t('Copy to clipboard')} position="left" delay={200} fixed>
+    {#key copied}
+      <button
+        class="focusOutline-sm absolute right-0 top-0 z-[2] cursor-pointer rounded-sm pb-3 pl-3 pr-4 pt-4 text-dark/60 hover:text-dark/80 dark:text-light/60 dark:hover:text-light/80"
+        on:click={() => copy()}
+      >
+        <Icon icon={copied ? 'Check' : 'Copy'} />
+      </button>
+    {/key}
+  </Tooltip>
   <div
     class="focusOutline relative h-fit w-full overflow-hidden rounded-sm text-lg transition-[height]"
     bind:this={codeContainer}
@@ -162,26 +151,26 @@
       {#if !hideLoader}
         <span class="mt-11 block" />
       {/if}
-      {#if !lang}
-        <svelte:component this={hlAuto} code={content} />
-      {:else}
-        {#await hlLang then resolvedLang}
+      <!-- eslint-disable-next-line prettier/prettier -->
+      {#await Promise.all([HighlightSvelte, Highlight, LanguageType, LineNumbers]) then [resolvedHighlightSvelte, resolvedHighlight, resolvedLang, resolvedLineNumbers]}
+        <svelte:component
+          this={lang === 'svelte' ? resolvedHighlightSvelte : resolvedHighlight}
+          code={content}
+          language={resolvedLang}
+          let:highlighted
+        >
           {#if showLineNumbers === true}
             <svelte:component
-              this={hlHighlight}
-              code={content}
-              language={resolvedLang}
-              let:highlighted
-            >
-              <LineNumbers {highlighted} hideBorder wrapLines />
-            </svelte:component>
-          {:else}
-            <svelte:component this={hlHighlight} code={content} language={resolvedLang} />
+              this={resolvedLineNumbers}
+              {highlighted}
+              hideBorder
+              wrapLines
+            />
           {/if}
-        {:catch error}
-          <div>Error loading: {error.message}</div>
-        {/await}
-      {/if}
+        </svelte:component>
+      {:catch error}
+        <div>Error loading: {error.message}</div>
+      {/await}
     </div>
   </div>
 </div>
diff --git a/svelte-app/src/components/code-block/imports.ts b/svelte-app/src/components/code-block/imports.ts
new file mode 100644
index 000000000..574da28c1
--- /dev/null
+++ b/svelte-app/src/components/code-block/imports.ts
@@ -0,0 +1,81 @@
+import { SvelteComponent } from 'svelte';
+import { derived, readable, writable } from 'svelte/store';
+
+import type { ComponentType } from 'svelte';
+import type {
+  HighlightEvents,
+  HighlightProps,
+  HighlightSlots
+} from 'svelte-highlight/Highlight.svelte';
+import type {
+  HighlightSvelteEvents,
+  HighlightSvelteProps,
+  HighlightSvelteSlots
+} from 'svelte-highlight/HighlightSvelte.svelte';
+import type {
+  LineNumbersEvents,
+  LineNumbersProps,
+  LineNumbersSlots
+} from 'svelte-highlight/LineNumbers.svelte';
+
+class _LineNumbers extends SvelteComponent<
+  LineNumbersProps,
+  LineNumbersEvents,
+  LineNumbersSlots
+> {}
+class _HighlightSvelte extends SvelteComponent<
+  HighlightSvelteProps,
+  HighlightSvelteEvents,
+  HighlightSvelteSlots
+> {}
+class _Highlight extends SvelteComponent<
+  HighlightProps,
+  HighlightEvents,
+  HighlightSlots
+> {}
+
+export type LineNumbers = ComponentType<_LineNumbers>;
+export type HighlightSvelte = ComponentType<_HighlightSvelte>;
+export type Highlight = ComponentType<_Highlight>;
+
+const stores = {
+  LineNumbers: writable<Promise<LineNumbers> | undefined>(undefined),
+  HighlightSvelte: writable<Promise<HighlightSvelte> | undefined>(undefined),
+  Highlight: writable<Promise<Highlight> | undefined>(undefined)
+} as const;
+
+const genericDerivedAsyncImport = <K extends keyof typeof stores>(
+    name: K,
+    target: (typeof stores)[K]
+  ) =>
+    derived(target, (value: Parameters<(typeof target)['set']>[0]) => {
+      if (value === undefined) {
+        const promise = import(
+          `../../../node_modules/svelte-highlight/${name}.svelte`
+        ).then((module) => module.default) as unknown as NonNullable<typeof value>;
+        // @ts-expect-error - TS infers target['set'] here as an Intersection of Writable ReturnTypes rather than Unions
+        target.set(promise);
+        return promise;
+      }
+      return value;
+    }),
+  empty = () =>
+    readable<Promise<undefined>>(new Promise((resolve) => resolve(undefined)));
+
+const lineNumbers = (useLineNumbers: boolean) => {
+    return useLineNumbers
+      ? genericDerivedAsyncImport('LineNumbers', stores.LineNumbers)
+      : empty();
+  },
+  highlightSvelte = (useHlSvelte: boolean) => {
+    return useHlSvelte
+      ? genericDerivedAsyncImport('HighlightSvelte', stores.HighlightSvelte)
+      : empty();
+  },
+  highlight = () => genericDerivedAsyncImport('Highlight', stores.Highlight);
+
+export {
+  highlight as Highlight,
+  highlightSvelte as HighlightSvelte,
+  lineNumbers as LineNumbers
+};
diff --git a/svelte-app/src/components/icon.svelte b/svelte-app/src/components/icon.svelte
index 8b3ee6e9e..10ea93093 100644
--- a/svelte-app/src/components/icon.svelte
+++ b/svelte-app/src/components/icon.svelte
@@ -8,17 +8,18 @@
     width = 20,
     height = width,
     style = '';
+
+  const svg = icons.get(icon);
 </script>
 
 <div class="w-[{width}px] {inline ? 'inline' : ''} {$$props.class || ''}">
-  {#await icons.get(icon) then svg}
-    <svelte:component
-      this={svg}
-      {width}
-      {height}
-      class="{hovered ? 'text-gray-600 dark:text-gray-300' : ''} {inline ? 'inline' : ''}"
-      aria-label={icon + $t(' icon')}
-      {style}
-    />
-  {/await}
+  <svelte:component
+    this={svg}
+    {width}
+    {height}
+    class="{hovered ? 'text-gray-600 dark:text-gray-300' : ''} {inline ? 'inline' : ''}"
+    aria-label={icon + $t(' icon')}
+    {style}
+    {$$restProps}
+  />
 </div>
diff --git a/svelte-app/src/components/portable-text/portable-text.svelte b/svelte-app/src/components/portable-text/portable-text.svelte
index d1acab650..2abf9eb49 100644
--- a/svelte-app/src/components/portable-text/portable-text.svelte
+++ b/svelte-app/src/components/portable-text/portable-text.svelte
@@ -6,6 +6,7 @@
   import Logger from '$lib/logger';
 
   import Icon from '$components/icon.svelte';
+  import Link from '$components/link.svelte';
 
   import { PortableText } from '@portabletext/svelte';
 
@@ -138,20 +139,15 @@
           <ol class="ml-6 list-decimal leading-8">
             {#each footnotes as note}
               <li class="list-item">
-                <span class="flex flex-row flex-wrap items-center">
-                  <!-- Allow recursion with PT styles in footnotes -->
+                <span class="flex flex-row flex-wrap items-center break-all">
                   <svelte:self text={note.note} plaintext />
-                  <a
+                  <Link
                     class="mb-0.5 ml-2 inline"
-                    id={`note-${note._key}`}
-                    href={`#src-${note._key}`}
+                    id={`src-${note._key}`}
+                    href={`#note-${note._key}`}
                     aria-label={$t('Go to footnote source')}
-                    on:click={(e) => customScrollTo(e, `src-${note._key}`)}
-                    on:keydown={(e) => {
-                      if (e.code === 'Space' || e.code === 'Enter') {
-                        customScrollTo(e, `src-${note._key}`);
-                      }
-                    }}><Icon icon="arrow-bar-up" width={18} inline /></a
+                    on:click={(e) => customScrollTo(e, `note-${note._key}`)}
+                    ><Icon icon="arrow-bar-up" width={18} inline /></Link
                   >
                 </span>
               </li>
diff --git a/svelte-app/src/components/portable-text/serializers/custom-heading.svelte b/svelte-app/src/components/portable-text/serializers/custom-heading.svelte
index 385d355d1..9f8585251 100644
--- a/svelte-app/src/components/portable-text/serializers/custom-heading.svelte
+++ b/svelte-app/src/components/portable-text/serializers/custom-heading.svelte
@@ -1,38 +1,44 @@
 <script lang="ts">
-  import Hoverable from '$components/hoverable.svelte';
   import Icon from '$components/icon.svelte';
 
   import type { BlockComponentProps } from '@portabletext/svelte';
 
   export let portableText: BlockComponentProps;
 
-  let hovered: false;
-
   $: ({ value, indexInParent } = portableText);
   $: ({ style } = value);
 </script>
 
-<Hoverable bind:hovered>
-  <a
-    class="focusOutline-sm {style}"
-    class:first={indexInParent === 0}
-    id={`heading-${value._key}`}
-    href={`#${value._key}`}
+<a
+  class="focusOutline-sm {style}"
+  class:first={indexInParent === 0}
+  id={`heading-${value._key}`}
+  href={`#${value._key}`}
+>
+  <Icon
+    icon="link"
+    class="link-icon absolute -left-8 top-1/2 -translate-y-1/2"
+    aria-hidden="true"
+  />
+  <svelte:element
+    this={style}
+    class="inline font-display font-bold text-black dark:text-white"
   >
-    {#if hovered}
-      <Icon icon="link" class="absolute -left-8 top-1/2 -translate-y-1/2" />
-    {/if}
-
-    <svelte:element
-      this={style}
-      class="inline font-display font-bold text-black dark:text-white"
-    >
-      <slot />
-    </svelte:element>
-  </a>
-</Hoverable>
+    <slot />
+  </svelte:element>
+</a>
 
 <style lang="scss">
+  :global(.link-icon) {
+    @apply hidden;
+
+    :hover &,
+    :focus-visible &,
+    :focus-within & {
+      @apply block;
+    }
+  }
+
   a {
     @apply relative block w-full rounded-sm font-extrabold;
 
diff --git a/svelte-app/src/lib/icons.ts b/svelte-app/src/lib/icons.ts
index 62f3cd823..b2cfdca79 100644
--- a/svelte-app/src/lib/icons.ts
+++ b/svelte-app/src/lib/icons.ts
@@ -21,6 +21,7 @@ import Script from 'pixelarticons/svg/script.svg';
 import Sun from 'pixelarticons/svg/sun.svg';
 
 import type { PixelIcon } from '$types';
+import type { ComponentType } from 'svelte';
 
 const icons = {
   alert: Alert,
@@ -42,23 +43,21 @@ const icons = {
   save: Save,
   script: Script,
   sun: Sun
-};
-
-type IconName = keyof typeof icons;
+} as unknown as Record<string, ComponentType<PixelIcon>>;
 
-const transformName = (name: string): IconName => {
+const transformName = (name: string) => {
   return name
     .replace(/([a-z])([A-Z])|([A-Z])([A-Z](?=[a-z]))|([a-zA-Z])(\d)/g, '$1$3$5-$2$4$6')
-    .toLowerCase() as IconName;
+    .toLowerCase();
 };
 
 const getIcon = (iconName: string) => {
-  const name = transformName(iconName);
-  if (!icons[name]) {
+  let name = transformName(iconName);
+  if (!(name in icons)) {
     Logger.error(`Icon ${name} not found`);
-    return icons.alert as PixelIcon;
+    name = 'alert';
   }
-  return icons[name] as PixelIcon;
+  return icons[name];
 };
 
 export default { get: getIcon };
diff --git a/svelte-app/tsconfig.json b/svelte-app/tsconfig.json
index b83b88a5a..a3fb4beea 100644
--- a/svelte-app/tsconfig.json
+++ b/svelte-app/tsconfig.json
@@ -31,7 +31,6 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "types": ["node"],
     "typeRoots": ["./node_modules/@types", "./types"]
   },
   "include": [
diff --git a/svelte-app/types/app/index.d.ts b/svelte-app/types/app/index.d.ts
index b6b23a4d2..ef70b43a8 100644
--- a/svelte-app/types/app/index.d.ts
+++ b/svelte-app/types/app/index.d.ts
@@ -1,7 +1,7 @@
 import type { SvelteComponent } from 'svelte';
 
 // Misc
-export type PixelIcon = SvelteComponent | string | undefined;
+export type PixelIcon = SvelteComponent;
 
 export interface MenuStateOpt {
   disabled?: boolean;
@@ -21,10 +21,7 @@ export interface MenuState {
 }
 
 // Some internal Sveltekit types
-export type RouteFetch = (
-  info: RequestInfo,
-  init?: RequestInit
-) => Promise<Response>;
+export type RouteFetch = (info: RequestInfo, init?: RequestInit) => Promise<Response>;
 
 export type Subscriber<T> = (value: T) => void;
 export type Unsubscriber = () => void;
@@ -32,7 +29,7 @@ export type Updater<T> = (value: T) => T;
 export type Invalidator<T> = (value?: T) => void;
 
 // Re-exports
+export * from '$types/api';
+export * from '$types/config';
 export * from '$types/documents';
 export * from '$types/sanity';
-export * from '$types/config';
-export * from '$types/api';