Migrate the project to Svelte 5 (#713)

felladrin · Nov 17, 2024 · 16dc93b · 16dc93b
1 parent 8a63d86
commit 16dc93b
Show file tree

Hide file tree

Showing 22 changed files with 287 additions and 300 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.44.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tsconfig/svelte": "^5.0.4",
     "@types/github-url-to-object": "^4.0.1",
     "@types/halfmoon": "^1.0.5",
@@ -43,10 +43,10 @@
     "github-url-to-object": "^4.0.6",
     "helper-git-hash": "^1.0.0",
     "shepherd.js": "^14.0.0",
-    "svelte": "^4.2.17",
+    "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
     "svelte-preprocess": "^6.0.0",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.11"
+    "typescript": "^5.5.0",
+    "vite": "^5.4.4"
   }
 }
diff --git a/src/components/App.svelte b/src/components/App.svelte
@@ -1,14 +1,13 @@
-<script>
+<script lang="ts">
   import PackageJsonTextArea from "./PackageJsonTextArea.svelte";
   import DependenciesTable from "./DependenciesTable.svelte";
   import Dropzone from "./Dropzone.svelte";
   import FloatingSideButtons from "./buttons/FloatingSideButtons.svelte";
   import SelectLocaleModal from "./LanguageSelectionModal.svelte";
-  import { afterUpdate } from "svelte";
   import { lazyLoad } from "../constants/lazyLoad";
   import { t } from "svelte-i18n";
 
-  afterUpdate(() => lazyLoad.update());
+  $effect(() => lazyLoad.update());
 </script>
 
 <Dropzone />

diff --git a/src/components/DependenciesTable.svelte b/src/components/DependenciesTable.svelte
@@ -13,7 +13,7 @@
     import("../types/npms").SearchResult,
     boolean
   >();
-  let dependencyPerSimilarPackagesDisplayedMap = {};
+  const dependencyPerSimilarPackagesDisplayedMap = $state({});
 </script>
 
 {#if Object.keys($dependenciesFromPackage).length > 0}
@@ -88,7 +88,7 @@
                       <button
                         class="btn btn-sm btn-block"
                         type="button"
-                        on:click={() =>
+                        onclick={() =>
                           (dependencyPerSimilarPackagesDisplayedMap[
                             dependencyName
                           ] =

diff --git a/src/components/Dropzone.svelte b/src/components/Dropzone.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { droppedPackageJsonContent } from "../stores/droppedPackageJsonContent";
 
-  let dropZoneDisplayStyle = "none";
+  let dropZoneDisplayStyle = $state("none");
 
   function showDropZone() {
     dropZoneDisplayStyle = "block";
@@ -45,16 +45,16 @@
   }
 </script>
 
-<svelte:window on:dragenter={handleDragEnter} on:drop={handleDrop} />
+<svelte:window ondragenter={handleDragEnter} ondrop={handleDrop} />
 
 <div
   class="dropzone"
   role="region"
   style="display: {dropZoneDisplayStyle};"
-  on:dragenter={allowDrag}
-  on:dragover={allowDrag}
-  on:dragleave={hideDropZone}
-  on:drop={handleDrop}
+  ondragenter={allowDrag}
+  ondragover={allowDrag}
+  ondragleave={hideDropZone}
+  ondrop={handleDrop}
 ></div>
 
 <style>

diff --git a/src/components/NoSimilarPackagesSummary.svelte b/src/components/NoSimilarPackagesSummary.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { t } from "svelte-i18n";
 </script>
 

diff --git a/src/components/PackageDetails.svelte b/src/components/PackageDetails.svelte
@@ -8,7 +8,6 @@
   import halfmoon from "halfmoon";
   import { copyTextToClipboard } from "../functions/copyTextToClipboard";
   import { handleImageError } from "../functions/handleImageError";
-  import { afterUpdate } from "svelte";
   import { lazyLoad } from "../constants/lazyLoad";
   import HomeButton from "./buttons/HomeButton.svelte";
   import RepositoryButton from "./buttons/RepositoryButton.svelte";
@@ -19,11 +18,13 @@
   import GitHubStarsBadge from "./badges/GitHubStarsBadge.svelte";
   import BundlephobiaBadge from "./badges/BundlephobiaBadge.svelte";
 
-  export let packageSearchResult: SearchResult;
-  export let open = false;
-  export let onTogglePanel: (wasClosedWhenToggled: boolean) => void = () => {};
+  const { packageSearchResult, open = false, onTogglePanel = () => {} } = $props<{
+    packageSearchResult: SearchResult;
+    open?: boolean;
+    onTogglePanel?: (wasClosedWhenToggled: boolean) => void;
+  }>();
 
-  afterUpdate(() => lazyLoad.update());
+  $effect(() => lazyLoad.update());
 
   function getGithubContributorsImageUrl(repositoryUrl = "", maxImages = 0) {
     const matches = repositoryUrl.match(
@@ -64,7 +65,7 @@
 <details class="collapse-panel" data-test-id="package-details" {open}>
   <summary
     class="collapse-header"
-    on:click={({ currentTarget }) => {
+    onclick={({ currentTarget }) => {
       onTogglePanel(!currentTarget.hasAttribute("open"));
     }}
   >
@@ -114,7 +115,7 @@
                 class="text-decoration-none"
               >
                 <img
-                  on:error={handleImageError}
+                  onerror={handleImageError}
                   data-src={getGithubContributorsImageUrl(
                     packageSearchResult.package.links.repository,
                     12,
@@ -156,16 +157,16 @@
       <div class="row">
         <div class="col d-flex justify-content-center">
           <NpmButton packageName={packageSearchResult.package.name} />
-          <span class="ml-10" />
+          <span class="ml-10" ></span>
           {#if packageSearchResult.package.links.homepage && !packageSearchResult.package.links.homepage.includes(packageSearchResult.package.links.repository ?? "#readme")}
             <HomeButton href={packageSearchResult.package.links.homepage} />
-            <span class="ml-10" />
+            <span class="ml-10" ></span>
           {/if}
           {#if packageSearchResult.package.links.repository}
             <RepositoryButton
               href={packageSearchResult.package.links.repository}
             />
-            <span class="ml-10" />
+            <span class="ml-10" ></span>
           {/if}
           <RunkitButton packageName={packageSearchResult.package.name} />
         </div>
@@ -180,7 +181,7 @@
               type="text"
               class="form-control"
               value={`npm i ${packageSearchResult.package.name}`}
-              on:click={({ currentTarget }) => {
+              onclick={({ currentTarget }) => {
                 currentTarget.select();
                 if (navigator.clipboard) {
                   copyTextToClipboard(currentTarget.value);
@@ -201,7 +202,7 @@
       <div class="row mt-10">
         <div class="col d-flex justify-content-center">
           <OpenReadmeButton packageName={packageSearchResult.package.name} />
-          <span class="ml-10" />
+          <span class="ml-10" ></span>
           <ExploreFilesButton packageName={packageSearchResult.package.name} />
         </div>
       </div>

diff --git a/src/components/PackageJsonTextArea.svelte b/src/components/PackageJsonTextArea.svelte
@@ -1,4 +1,6 @@
-<script>
+<script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { getDependenciesFromPackage } from "../functions/getDependenciesFromPackage";
   import { dependenciesFromPackage } from "../stores/dependenciesFromPackage";
   import { onMount } from "svelte";
@@ -10,11 +12,11 @@
   import stripJsonComments from "strip-json-comments";
   import { getRandomPackage } from "../functions/getRandomPackage";
 
-  let packageJsonAsString = JSON.stringify(packageJsonTemplate, null, 2);
+  let packageJsonAsString = $state(JSON.stringify(packageJsonTemplate, null, 2));
 
-  let hasError;
+  let hasError = $state();
 
-  let packageJsonAsObject = {};
+  let packageJsonAsObject = $state({});
 
   onMount(async () => {
     let packageJsonHash = getHashFromString(packageJsonAsString);
@@ -100,7 +102,7 @@
     if (content.length > 0) packageJsonAsString = content;
   });
 
-  $: {
+  run(() => {
     try {
       packageJsonAsObject = JSON.parse(stripJsonComments(packageJsonAsString));
       dependenciesFromPackage.set(
@@ -110,7 +112,7 @@
     } catch {
       hasError = true;
     }
-  }
+  });
 </script>
 
 <textarea

diff --git a/src/components/PackageOnNpmWithoutDetails.svelte b/src/components/PackageOnNpmWithoutDetails.svelte
@@ -1,12 +1,13 @@
-<script>
+<script lang="ts">
   import { handleImageError } from "../functions/handleImageError";
-  import { afterUpdate } from "svelte";
   import { lazyLoad } from "../constants/lazyLoad";
 
-  afterUpdate(() => lazyLoad.update());
+  $effect(() => lazyLoad.update());
 
-  export let packageName = "npm";
-  export let open = false;
+  const { packageName = "npm", open = false } = $props<{
+    packageName?: string;
+    open?: boolean;
+  }>();
 </script>
 
 <details class="collapse-panel" {open}>
@@ -26,7 +27,7 @@
       href={`https://www.npmjs.com/package/${packageName}`}
     >
       <img
-        on:error={handleImageError}
+        onerror={handleImageError}
         data-src={`https://badgen.net/npm/v/${packageName}`}
         alt="NPM Page"
         class="lazy"

diff --git a/src/components/badges/BundlephobiaBadge.svelte b/src/components/badges/BundlephobiaBadge.svelte
@@ -1,26 +1,29 @@
-<script>
+<script lang="ts">
   import { handleImageError } from "../../functions/handleImageError";
   import { openWinBox } from "../../functions/openWinBox";
-  import { afterUpdate } from "svelte";
   import { lazyLoad } from "../../constants/lazyLoad";
 
-  export let packageName = "npm";
+  const { packageName = "npm" } = $props<{
+    packageName?: string;
+  }>();
 
-  afterUpdate(() => lazyLoad.update());
+  $effect(() => lazyLoad.update());
 </script>
 
 <a
   href="https://bundlephobia.com/package/{packageName}"
   target="_blank"
   rel="noreferrer"
-  on:click|preventDefault={({ currentTarget }) =>
+  onclick={(event) => {
+    event.preventDefault();
+
     openWinBox({
-      url: currentTarget.href,
-      title: `${packageName}'s bundle size`,
-    })}
+      url: event.currentTarget.href,
+        title: `${packageName}'s bundle size`,
+    })}}
 >
   <img
-    on:error={handleImageError}
+    onerror={handleImageError}
     data-src="https://img.shields.io/bundlephobia/minzip/{packageName}?color=success&label=size&style=flat"
     alt="Bundle Size"
     class="lazy"

diff --git a/src/components/badges/GitHubStarsBadge.svelte b/src/components/badges/GitHubStarsBadge.svelte
@@ -1,29 +1,33 @@
-<script>
+<script lang="ts">
   import { handleImageError } from "../../functions/handleImageError";
   import { openWinBox } from "../../functions/openWinBox";
-  import { afterUpdate } from "svelte";
   import { lazyLoad } from "../../constants/lazyLoad";
   import parseGitHubUrl from "github-url-to-object";
 
-  export let gitHubUrl = "https://github.com/user/repo";
+  const { gitHubUrl = "https://github.com/user/repo" } = $props<{
+    gitHubUrl?: string;
+  }>();
   const { user, repo } = parseGitHubUrl(gitHubUrl);
   const repositoryId = `${user}/${repo}`.toLowerCase();
 
-  afterUpdate(() => lazyLoad.update());
+  $effect(() => lazyLoad.update());
 </script>
 
 <a
   href={`https://api.star-history.com/svg?repos=${repositoryId}&type=Date`}
   target="_blank"
   rel="noreferrer"
-  on:click|preventDefault={({ currentTarget }) =>
+  onclick={(event) => {
+    event.preventDefault();
+
     openWinBox({
-      url: currentTarget.href,
+      url: event.currentTarget.href,
       title: `${repositoryId}'s star history`,
-    })}
+    });
+  }}
 >
   <img
-    on:error={handleImageError}
+    onerror={handleImageError}
     data-src="https://img.shields.io/github/stars/{repositoryId}.svg?style=flat"
     alt="Stars on GitHub"
     class="lazy"

diff --git a/src/components/badges/LicenseBadge.svelte b/src/components/badges/LicenseBadge.svelte
@@ -2,25 +2,26 @@
   import { analyzePackage } from "../../functions/analyzePackage";
   import { handleImageError } from "../../functions/handleImageError";
   import { openWinBox } from "../../functions/openWinBox";
-  import { afterUpdate } from "svelte";
   import { lazyLoad } from "../../constants/lazyLoad";
   import { t } from "svelte-i18n";
 
-  export let packageName = "npm";
+  const { packageName = "npm" } = $props<{
+    packageName?: string;
+  }>();
 
-  afterUpdate(() => lazyLoad.update());
+  $effect(() => lazyLoad.update());
+
+  async function handleClick(event: MouseEvent) {
+    event.preventDefault();
+
+    const currentTarget = event.currentTarget as HTMLAnchorElement;
 
-  async function handleClick({
-    currentTarget,
-  }: {
-    currentTarget: EventTarget & HTMLAnchorElement;
-  }) {
     const openDefaultLicensesPage = () => {
       openWinBox({
         url: currentTarget.href,
         title: $t("licenses"),
       });
-    }
+    };
 
     try {
       const { default: packageLicenseTypes } = await import(
@@ -34,12 +35,12 @@
       if (licenses.length === 0) {
         openDefaultLicensesPage();
       } else {
-        licenses.forEach((licenseName) => {
+        for (const licenseName of licenses) {
           openWinBox({
             url: `https://spdx.org/licenses/${licenseName}.html#licenseText`,
             title: $t("licenseName", { values: { licenseName } }),
           });
-        });
+        }
       }
     } catch {
       openDefaultLicensesPage();
@@ -52,10 +53,10 @@
   title={$t("clickToReadAboutLicense")}
   target="_blank"
   rel="noreferrer"
-  on:click|preventDefault={handleClick}
+  onclick={handleClick}
 >
   <img
-    on:error={handleImageError}
+    onerror={handleImageError}
     data-src="https://badgen.net/npm/license/{packageName}"
     alt={$t("license")}
     class="lazy"