chore: Remove dfinity utils (#3663)

Remove dfinity utils dependency, given that it's only used for nullish
checks and a json replacer/reviver in one place.

# Changes

- Remove `@dfinity/utils` dependency.
- Rewrite all usages of `isNullish` and `nonNullish` to plain JS (based
on TS value type being either `undefined`, `null` or `undefined |
null`).

# Tests

All existing tests should pass as-is.

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: sea-snake

package-lock.json

@@ -85,7 +85,6 @@
   },
   "dependencies": {
     "@dfinity/internet-identity-vc-api": "*",
-    "@dfinity/utils": "^3.1.0",
     "@icp-sdk/auth": "^4.0.1",
     "@icp-sdk/core": "^4.0.4",
     "@lingui/core": "^5.5.1",

package.json

@@ -1,5 +1,4 @@
 import { injectCanisterIdAndConfigPlugin } from "@dfinity/internet-identity-vite-plugins";
-import { nonNullish } from "@dfinity/utils";
 import type { Handle, ServerInit } from "@sveltejs/kit";
 import { localeStore } from "$lib/stores/locale.store";
 
@@ -12,7 +11,7 @@ const transformHtml =
 export const handle: Handle = async ({ event, resolve }) => {
   const response = await resolve(event);
   if (
-    nonNullish(transformHtml) &&
+    transformHtml !== undefined &&
     response.headers.get("Content-Type") === "text/html" &&
     response.ok
   ) {

src/frontend/src/hooks.server.ts

@@ -7,7 +7,6 @@
     XIcon,
   } from "@lucide/svelte";
   import Button from "$lib/components/ui/Button.svelte";
-  import { isNullish, nonNullish } from "@dfinity/utils";
   import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
 
   type Props = HTMLAttributes<HTMLDivElement> & {
@@ -50,7 +49,7 @@
       <ProgressRing class="text-fg-brand-primary" />
     {/if}
   </div>
-  {#if nonNullish(onClose)}
+  {#if onClose !== undefined}
     <Button
       onclick={onClose}
       variant="tertiary"
@@ -70,20 +69,20 @@
       direction === "horizontal"
         ? "col-start-2 row-span-2 row-start-1"
         : "col-span-3",
-      direction === "horizontal" && isNullish(onClose) && "col-span-2",
+      direction === "horizontal" && onClose === undefined && "col-span-2",
     ]}
   >
     <div class="text-text-primary text-sm font-semibold">
       {title}
     </div>
-    {#if nonNullish(description) || nonNullish(children)}
+    {#if description !== undefined || children !== undefined}
       <div class="flex flex-col gap-3">
-        {#if nonNullish(description)}
+        {#if description !== undefined}
           <div class="text-text-tertiary text-sm font-medium">
             {description}
           </div>
         {/if}
-        {#if nonNullish(children)}
+        {#if children !== undefined}
           <div class="flex gap-3">
             {@render children()}
           </div>

src/frontend/src/lib/components/ui/Alert.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { HTMLInputAttributes } from "svelte/elements";
   import { CheckIcon, MinusIcon } from "@lucide/svelte";
-  import { nonNullish } from "@dfinity/utils";
 
   type Size = "sm" | "md";
 
@@ -48,7 +47,7 @@
         sm: "size-4",
         md: "size-5",
       }[size],
-      (nonNullish(label) || nonNullish(hint)) && "mt-0.5",
+      (label !== undefined || hint !== undefined) && "mt-0.5",
     ]}
   >
     {#if checked}
@@ -67,9 +66,9 @@
       {/if}
     {/if}
   </div>
-  {#if nonNullish(label) || nonNullish(hint)}
+  {#if label !== undefined || hint !== undefined}
     <div class="flex flex-col">
-      {#if nonNullish(label)}
+      {#if label !== undefined}
         <p
           class={[
             "text-text-secondary font-medium select-none",
@@ -79,7 +78,7 @@
           {label}
         </p>
       {/if}
-      {#if nonNullish(hint)}
+      {#if hint !== undefined}
         <p
           class={[
             "text-text-tertiary select-none",

src/frontend/src/lib/components/ui/Checkbox.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import Input from "$lib/components/ui/Input.svelte";
   import type { HTMLAttributes } from "svelte/elements";
-  import { nonNullish } from "@dfinity/utils";
 
   interface Props extends HTMLAttributes<HTMLDivElement> {
     element: HTMLInputElement | undefined;
@@ -85,16 +84,16 @@
         }
         onkeydown={(event) => handleKeyDown(event, index)}
         onpaste={handlePaste}
-        errorBorder={nonNullish(error)}
+        errorBorder={error !== undefined}
         {disabled}
       />
     {/each}
   </div>
-  {#if nonNullish(error) || nonNullish(hint)}
+  {#if error !== undefined || hint !== undefined}
     <div
       class={[
         "text-sm",
-        nonNullish(error) ? "text-text-error-primary" : "text-text-tertiary",
+        error !== undefined ? "text-text-error-primary" : "text-text-tertiary",
       ]}
     >
       {error ?? hint}

src/frontend/src/lib/components/ui/CodeInput.svelte

@@ -2,7 +2,6 @@
   import { onMount } from "svelte";
   import { scale, fly } from "svelte/transition";
   import type { ClassValue, HTMLAttributes } from "svelte/elements";
-  import { nonNullish } from "@dfinity/utils";
   import { XIcon } from "@lucide/svelte";
   import { t } from "$lib/stores/locale.store";
 
@@ -18,8 +17,8 @@
     children,
     onClose,
     class: className,
-    closeOnOutsideClick = nonNullish(onClose),
-    showCloseButton = nonNullish(onClose),
+    closeOnOutsideClick = onClose !== undefined,
+    showCloseButton = onClose !== undefined,
     backdrop = true,
     contentClass,
     ...props
@@ -185,7 +184,7 @@
           ]}
         >
           {@render children?.()}
-          {#if showCloseButton && nonNullish(onClose)}
+          {#if showCloseButton && onClose !== undefined}
             <button
               class="btn btn-tertiary btn-lg btn-icon absolute end-2 top-2 z-2 !rounded-full"
               onclick={onClose}

src/frontend/src/lib/components/ui/Dialog.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { ClassValue, HTMLInputAttributes } from "svelte/elements";
-  import { nonNullish } from "@dfinity/utils";
   import type { Snippet } from "svelte";
 
   type Size = "sm" | "md";
@@ -25,13 +24,13 @@
     value = $bindable(),
     size = "md",
     error,
-    errorBorder = nonNullish(error),
+    errorBorder = error !== undefined,
     ...restProps
   }: Props = $props();
 </script>
 
 <div class={["flex flex-col gap-1.5", className]}>
-  {#if nonNullish(label)}
+  {#if label !== undefined}
     <label for={id} class="text-text-secondary text-sm font-medium">
       {label}
     </label>
@@ -56,20 +55,20 @@
       ]}
     />
   </div>
-  {#if nonNullish(error) || nonNullish(hint)}
+  {#if error !== undefined || hint !== undefined}
     <div
       class={[
         "text-sm",
-        nonNullish(error) ? "text-text-error-primary" : "text-text-tertiary",
+        error !== undefined ? "text-text-error-primary" : "text-text-tertiary",
       ]}
     >
-      {#if nonNullish(error)}
+      {#if error !== undefined}
         {#if typeof error === "string"}
           {error}
         {:else}
           {@render error()}
         {/if}
-      {:else if nonNullish(hint)}
+      {:else if hint !== undefined}
         {#if typeof hint === "string"}
           {hint}
         {:else}

src/frontend/src/lib/components/ui/Input.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
-  import { nonNullish } from "@dfinity/utils";
 
   type Props = HTMLAttributes<HTMLDivElement> & {
     header: string;
@@ -16,7 +15,7 @@
 >
   <p class="text-text-tertiary text-sm uppercase">{header}</p>
   <div class="grid h-[280px] place-items-center">
-    {#if nonNullish(children)}
+    {#if children !== undefined}
       {@render children()}
     {/if}
   </div>

src/frontend/src/lib/components/ui/LandingCard.svelte

@@ -2,7 +2,6 @@
   import type { HTMLAttributes } from "svelte/elements";
   import { fade } from "svelte/transition";
   import Dialog from "$lib/components/ui/Dialog.svelte";
-  import { nonNullish } from "@dfinity/utils";
 
   type Direction = "up" | "right" | "down" | "left";
   type Align = "start" | "center" | "end";
@@ -39,7 +38,7 @@
     let tracking = true;
 
     const track = () => {
-      if (nonNullish(anchorRef) && nonNullish(popoverRef)) {
+      if (anchorRef !== undefined && popoverRef !== undefined) {
         const anchorRect = anchorRef.getBoundingClientRect();
         const popoverRect = popoverRef.getBoundingClientRect();