Refactor: enable strict null checks

.eslintrc.cjs

@@ -4,17 +4,31 @@ module.exports = {
     extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
     plugins: ['svelte3', '@typescript-eslint'],
     ignorePatterns: ['*.cjs'],
-    overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+    overrides: [
+        {
+            files: ['*.svelte'],
+            processor: 'svelte3/svelte3',
+            rules: {
+                'no-redeclare': 'off'
+            }
+        }
+    ],
     settings: {
         'svelte3/typescript': () => require('typescript')
     },
     parserOptions: {
         sourceType: 'module',
-        ecmaVersion: 2020
+        ecmaVersion: 2020,
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.json'],
+        extraFileExtensions: ['.svelte']
     },
     env: {
         browser: true,
         es2017: true,
         node: true
+    },
+    rules: {
+        '@typescript-eslint/no-explicit-any': 'warn'
     }
 };

src/global.d.ts

@@ -3,3 +3,16 @@ interface Window {
     VERCEL_ANALYTICS_ID: string | false;
     SENTRY_DSN: string | false;
 }
+
+declare module 'prismjs/plugins/line-numbers/prism-line-numbers' {}
+declare module 'prismjs/components/prism-dart' {}
+declare module 'prismjs/components/prism-kotlin' {}
+declare module 'prismjs/components/prism-json' {}
+declare module 'prismjs/components/prism-bash' {}
+declare module 'prismjs/components/prism-yaml' {}
+declare module 'prismjs/components/prism-swift' {}
+declare module 'prismjs/plugins/autoloader/prism-autoloader' {}
+declare module 'prismjs/plugins/custom-class/prism-custom-class' {}
+declare module '@analytics/google-analytics' {
+    export default function googleAnalytics(options: any): any;
+}

src/lib/actions/analytics.ts

@@ -4,6 +4,7 @@ import { get } from 'svelte/store';
 import { page } from '$app/stores';
 import { user } from '$lib/stores/user';
 import { growthEndpoint, Mode } from '$lib/constants';
+import { isNonNullable, isNonNullableObject, type Nullable } from '$lib/helpers/type';
 
 const analytics = Analytics({
     app: 'appwrite',
@@ -14,13 +15,14 @@ const analytics = Analytics({
     ]
 });
 
-export function trackEvent(name: string, data: object = null): void {
+export function trackEvent(name: string, data: Nullable<object> = null): void {
     if (!isTrackingAllowed()) {
         return;
     }
     const path = get(page).routeId;
     analytics.track(name, { ...data, path });
-    sendEventToGrowth(name, path, data);
+
+    isNonNullable(path) && sendEventToGrowth(name, path, data);
 }
 
 export function trackPageView(path: string) {
@@ -33,13 +35,12 @@ export function trackPageView(path: string) {
     });
 }
 
-function sendEventToGrowth(event: string, path: string, data: object = null): void {
-    let email: string, name: string;
+function sendEventToGrowth(event: string, path: string, data: Nullable<object> = null): void {
     const userStore = get(user);
-    if (userStore) {
-        email = userStore.email;
-        name = userStore.name;
-    }
+    const args = { email: userStore?.email, name: userStore?.name };
+
+    if (!isNonNullableObject(args)) return;
+
     fetch(`${growthEndpoint}/analytics`, {
         method: 'POST',
         headers: {
@@ -51,8 +52,8 @@ function sendEventToGrowth(event: string, path: string, data: object = null): vo
             url: window.location.origin + path,
             account: import.meta.env.VITE_CONSOLE_MODE?.toString() || Mode.SELF_HOSTED,
             data: {
-                email,
-                name,
+                email: args.email,
+                name: args.name,
                 ...data
             }
         })

src/lib/actions/selectionStart.ts

@@ -0,0 +1,32 @@
+import { isNonNullable } from '$lib/helpers/type';
+import type { Action } from 'svelte/action';
+
+type Props = {
+    onChange: (selectionStart: number) => void;
+};
+
+const init: Action<HTMLInputElement, Props> = (node, props) => {
+    const { onChange } = props ?? {};
+
+    const handler = () => {
+        if (!isNonNullable(node.selectionStart)) return;
+        onChange?.(node.selectionStart);
+    };
+
+    node.addEventListener('click', handler);
+    node.addEventListener('keydown', handler);
+    node.addEventListener('keyup', handler);
+};
+
+export const selectionStart: Action<HTMLInputElement, Props> = (node, props) => {
+    init(node, props);
+
+    return {
+        update(props) {
+            init(node, props);
+        },
+        destroy() {
+            props?.onChange(-1);
+        }
+    };
+};

src/lib/actions/tooltip.ts

@@ -1,17 +1,24 @@
 import type { Action } from 'svelte/action';
-import type { Props } from 'tippy.js';
+import type { Props as TippyProps } from 'tippy.js';
 import tippy from 'tippy.js';
 
+type Props = TippyProps & {
+    disabled?: boolean;
+};
+
 export const tooltip: Action<HTMLElement, Partial<Props>> = (node, config) => {
     const instance = tippy(node, config);
+    if (config?.disabled) instance.disable();
 
     return {
-        update({ content }) {
+        update({ content, disabled }) {
             if (content !== instance.props.content) {
                 instance.setProps({
                     content
                 });
             }
+
+            disabled ? instance.disable() : instance.enable();
         },
         destroy() {
             instance.destroy();

src/lib/charts/bar.svelte

@@ -4,7 +4,7 @@
     import Base from './base.svelte';
 
     export let series: BarSeriesOption[];
-    export let options: EChartsOption = null;
+    export let options: EChartsOption | null = null;
 </script>
 
 <Base

src/lib/charts/base.svelte

@@ -13,7 +13,7 @@
     registerTheme('light', { ...base, ...light });
     registerTheme('dark', { ...base, ...dark });
 
-    export let options: EChartsOption;
+    export let options: EChartsOption | null;
     export let series: (BarSeriesOption | LineSeriesOption)[];
 
     let chart: ECharts;

src/lib/charts/line.svelte

@@ -5,7 +5,7 @@
     import Base from './base.svelte';
 
     export let series: LineSeriesOption[];
-    export let options: EChartsOption = null;
+    export let options: EChartsOption | null = null;
 </script>
 
 <Base

src/lib/components/card.svelte

@@ -5,7 +5,7 @@
     export let isDashed = false;
     export let isButton = false;
     export let danger = false;
-    export let href: string = null;
+    export let href: string | null = null;
 
     function getElement(): string {
         switch (true) {

src/lib/components/cardContainer.svelte

@@ -5,7 +5,7 @@
     export let offset = 0;
     export let limit = $cardLimit;
     export let total = 0;
-    export let event: string = null;
+    export let event: string | null = null;
 </script>
 
 <ul

src/lib/components/code.svelte

@@ -13,9 +13,9 @@
     import { afterUpdate } from 'svelte';
     import { Copy } from '.';
 
-    export let label: string = null;
-    export let labelIcon: 'code' | 'android' | 'flutter' | 'apple' = null;
-    export let code: string;
+    export let label: string | null = null;
+    export let labelIcon: 'code' | 'android' | 'flutter' | 'apple' | null = null;
+    export let code: string = '';
     export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json' | 'sh' | 'yml' | 'swift';
     export let withLineNumbers = false;
     export let withCopy = false;

src/lib/components/copy.svelte

@@ -4,9 +4,11 @@
     import { clickOnEnter } from '$lib/helpers/a11y';
     import { copy } from '$lib/helpers/copy';
     import { addNotification } from '$lib/stores/notifications';
+    import type { Props as TippyProps } from 'tippy.js';
 
     export let value: string;
-    export let event: string = null;
+    export let event: string | null = null;
+    export let appendTo: TippyProps['appendTo'] | undefined = undefined;
 
     let content = 'Click to copy';
 
@@ -36,7 +38,8 @@
     on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}
     use:tooltip={{
         content,
-        hideOnClick: false
+        hideOnClick: false,
+        appendTo
     }}>
     <slot />
 </span>

src/lib/components/copyInput.svelte

@@ -5,7 +5,7 @@
     import { addNotification } from '$lib/stores/notifications';
 
     export let value: string;
-    export let label: string = null;
+    export let label: string | null = null;
     export let showLabel = false;
 
     let content = 'Click to copy';

src/lib/components/customId.svelte

@@ -5,7 +5,7 @@
 
     export let show = false;
     export let name: string;
-    export let id: string;
+    export let id: string | null | undefined;
 
     $: if (!show) {
         id = null;

src/lib/components/dropList.svelte

@@ -7,7 +7,7 @@
     export let scrollable = false;
     export let childStart = false;
     export let noArrow = false;
-    export let width: string = null;
+    export let width: string | null = null;
 </script>
 
 <Drop bind:show {placement} {childStart} {noArrow}>

src/lib/components/dropListItem.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     export let disabled = false;
-    export let icon: string = null;
+    export let icon: string | null = null;
 </script>
 
 <li class="drop-list-item">

src/lib/components/dropListLink.svelte

@@ -2,7 +2,7 @@
     import { clickOnEnter } from '$lib/helpers/a11y';
 
     export let href: string;
-    export let icon: string = null;
+    export let icon: string | null = null;
     export let disabled = false;
 </script>
 

src/lib/components/empty.svelte

@@ -7,8 +7,8 @@
     import { trackEvent } from '$lib/actions/analytics';
 
     export let single = false;
-    export let target: string = null;
-    export let href: string = null;
+    export let target: string | null = null;
+    export let href: string | null = null;
 
     function track() {
         if (target) {

src/lib/components/evaluation.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { clickOnEnter } from '$lib/helpers/a11y';
 
-    export let value: number = null;
+    export let value: number | null = null;
 </script>
 
 <fieldset class="u-margin-block-start-8">