Merge pull request #1368 from mermaid-js/updateDeps

UpdateDeps
mermaid-js · Jan 11, 2024 · eaecb48 · eaecb48
2 parents 3da392a + beb5a89
commit eaecb48
Show file tree

Hide file tree

Showing 25 changed files with 1,015 additions and 952 deletions.
diff --git a/.node-version b/.node-version
@@ -0,0 +1 @@
+18
diff --git a/.prettierrc b/.prettierrc
@@ -3,5 +3,7 @@
   "svelteSortOrder": "options-scripts-markup-styles",
   "bracketSameLine": true,
   "trailingComma": "none",
-  "printWidth": 100
+  "printWidth": 100,
+  "tailwindConfig": "./tailwind.config.cjs",
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -16,6 +16,8 @@
     "mindmap",
     "Pageview",
     "pako",
+    "panzoom",
+    "pzoom",
     "Serde",
     "serdes",
     "tailwindcss",

diff --git a/cypress/e2e/util.ts b/cypress/e2e/util.ts
@@ -11,7 +11,7 @@ export const typeInEditor = (
 ) => {
   cy.window().should('have.property', 'editorLoaded', true);
   cy.get('#editor').click();
-  cy.get('#editor').within(($editor) => {
+  cy.get('#editor').within(() => {
     if (bottom) {
       cy.get('textarea').type('{pageDown}', { force: true });
     }

diff --git a/package.json b/package.json
@@ -23,49 +23,51 @@
   },
   "devDependencies": {
     "@cypress/snapshot": "2.1.7",
-    "@sveltejs/adapter-static": "2.0.3",
-    "@sveltejs/kit": "1.28.0",
-    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/svelte": "3.2.2",
+    "@sveltejs/adapter-static": "3.0.1",
+    "@sveltejs/kit": "2.3.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@testing-library/svelte": "4.0.5",
     "@types/pako": "2.0.3",
     "@types/uuid": "9.0.7",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
-    "@vitest/ui": "^0.34.0",
+    "@typescript-eslint/eslint-plugin": "6.18.1",
+    "@typescript-eslint/parser": "6.18.1",
+    "@vitest/ui": "^1.1.3",
     "autoprefixer": "^10.4.14",
     "c8": "7.14.0",
     "chai": "^4.3.7",
     "cssnano": "^6.0.0",
     "cy-verify-downloads": "0.2.2",
     "cypress": "12.17.4",
     "cypress-localstorage-commands": "2.2.5",
-    "eslint": "8.55.0",
-    "eslint-config-prettier": "8.10.0",
+    "eslint": "8.56.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-es": "4.1.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-postcss-modules": "2.0.0",
     "eslint-plugin-svelte3": "4.0.0",
-    "eslint-plugin-tailwindcss": "3.13.0",
-    "eslint-plugin-unicorn": "^46.0.0",
-    "eslint-plugin-vitest": "^0.3.0",
+    "eslint-plugin-tailwindcss": "3.13.1",
+    "eslint-plugin-unicorn": "^50.0.1",
+    "eslint-plugin-vitest": "^0.3.20",
     "esserializer": "1.3.11",
     "font-awesome": "^4.7.0",
     "husky": "^8.0.3",
     "jsdom": "21.1.2",
-    "lint-staged": "13.3.0",
+    "lint-staged": "15.2.0",
     "node-html-parser": "^6.1.5",
-    "postcss": "^8.4.21",
-    "postcss-load-config": "4.0.2",
-    "prettier": "2.8.8",
-    "prettier-plugin-svelte": "^2.10.0",
-    "svelte": "3.59.2",
-    "svelte-preprocess": "5.1.1",
-    "tailwindcss": "^3.3.1",
-    "tslib": "^2.5.0",
-    "typescript": "5.3.2",
-    "vite": "^4.5.1",
-    "vitest": "^0.34.0"
+    "postcss": "^8.4.33",
+    "postcss-load-config": "5.0.2",
+    "prettier": "3.1.0",
+    "prettier-plugin-svelte": "^3.1.2",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "svelte": "4.2.8",
+    "svelte-preprocess": "5.1.3",
+    "tailwindcss": "^3.4.1",
+    "tslib": "^2.6.2",
+    "typescript": "5.3.3",
+    "vite": "^5.0.11",
+    "vitest": "^1.1.3",
+    "vitest-dom": "^0.1.1"
   },
   "dependencies": {
     "daisyui": "2.52.0",

diff --git a/src/app.html b/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/src/app.postcss b/src/app.postcss
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 .input {
-  @apply flex-1 border-primary border-solid border-2 rounded;
+  @apply flex-1 rounded border-2 border-solid border-primary;
 }
 .action-btn {
   @apply btn btn-primary;

diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte
@@ -185,7 +185,7 @@
 </script>
 
 <Card title="Actions" isOpen={false}>
-  <div class="flex flex-wrap gap-2 m-2">
+  <div class="m-2 flex flex-wrap gap-2">
     {#if isClipboardAvailable()}
       <button class="action-btn w-full" on:click={onCopyClipboard}
         ><i class="far fa-copy mr-2" /> Copy Image to clipboard
@@ -213,7 +213,7 @@
       </button>
     </a>
 
-    <div class="flex gap-2 items-center">
+    <div class="flex items-center gap-2">
       PNG size
       <label for="autosize">
         <input type="radio" value="auto" id="autosize" bind:group={imagemodeselected} /> Auto
@@ -238,7 +238,7 @@
       {/if}
     </div>
 
-    <div class="w-full flex gap-2 items-center">
+    <div class="flex w-full items-center gap-2">
       <input class="input" id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} />
       <label for="markdown">
         <button class="btn btn-primary btn-md flex-auto" on:click={onCopyMarkdown}>
@@ -247,7 +247,7 @@
       </label>
     </div>
 
-    <div class="w-full flex gap-2 items-center">
+    <div class="flex w-full items-center gap-2">
       <input
         class="input"
         id="gist"
@@ -259,8 +259,8 @@
       </label>
     </div>
     {#if isNetlify}
-      <div class="w-full flex items-center justify-center">
-        <a class="link underline text-gray-500 text-sm" href="https://netlify.com">
+      <div class="flex w-full items-center justify-center">
+        <a class="link text-sm text-gray-500 underline" href="https://netlify.com">
           This site is powered by Netlify
         </a>
       </div>

diff --git a/src/lib/components/Card/Card.svelte b/src/lib/components/Card/Card.svelte
@@ -11,20 +11,22 @@
   $: isTabsShown = isOpen && tabs.length > 0;
 </script>
 
-<div class="card rounded overflow-hidden m-2 flex-grow flex flex-col shadow-2xl">
+<div class="card m-2 flex flex-grow flex-col overflow-hidden rounded shadow-2xl">
   <div
+    role="toolbar"
+    tabindex="0"
     class="bg-primary p-2 {isTabsShown ? 'pb-0' : ''} flex-none cursor-pointer"
     on:click={() => (isOpen = !isOpen)}
     on:keypress={() => (isOpen = !isOpen)}>
     <div class="flex justify-between">
       <Tabs on:select {tabs} bind:isOpen {title} {isCloseable} {activeTabID} />
-      <div class="flex gap-x-4 items-center {isTabsShown ? '-mt-2' : ''}">
+      <div class="flex items-center gap-x-4 {isTabsShown ? '-mt-2' : ''}">
         <slot name="actions" />
       </div>
     </div>
   </div>
   {#if isOpen}
-    <div class="card-body p-0 flex-grow overflow-auto text-base-content" transition:slide>
+    <div class="card-body flex-grow overflow-auto p-0 text-base-content" transition:slide>
       <slot />
     </div>
   {/if}

diff --git a/src/lib/components/Card/Tabs.svelte b/src/lib/components/Card/Tabs.svelte
@@ -20,6 +20,8 @@
 
 <div class="flex cursor-default">
   <span
+    role="menubar"
+    tabindex="0"
     class="mr-2 font-semibold"
     on:click|stopPropagation={() => (isOpen = !isOpen)}
     on:keypress|stopPropagation={() => (isOpen = !isOpen)}>
@@ -31,6 +33,8 @@
     <ul class="tabs" transition:fade>
       {#each tabs as tab}
         <div
+          role="tab"
+          tabindex="0"
           class="tab tab-lifted {activeTabID === tab.id ? 'tab-active' : 'text-primary-content'}"
           on:click|stopPropagation={() => toggleTabs(tab)}
           on:keypress|stopPropagation={() => toggleTabs(tab)}>

diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
@@ -64,7 +64,7 @@
     }
   };
 
-  onMount(async () => {
+  onMount(() => {
     self.MonacoEnvironment = {
       getWorker(_, label) {
         if (label === 'json') {

diff --git a/src/lib/components/History/History.svelte b/src/lib/components/History/History.svelte
@@ -57,13 +57,13 @@
     input.type = 'file';
     input.accept = 'application/json';
     input.addEventListener('change', ({ target }: Event) => {
-      const file = (<HTMLInputElement>target).files[0];
+      const file = (target as HTMLInputElement)?.files?.[0];
       if (!file) {
         return;
       }
       const reader = new FileReader();
       reader.onload = (e) => {
-        const data: HistoryEntry[] = JSON.parse(e.target.result as string);
+        const data: HistoryEntry[] = JSON.parse(e.target?.result as string);
         restoreHistory(data);
       };
       reader.readAsText(file);
@@ -129,34 +129,34 @@
   <div slot="actions">
     <button
       id="uploadHistory"
-      class="btn btn-xs btn-secondary w-12"
+      class="btn btn-secondary btn-xs w-12"
       on:click|stopPropagation={() => uploadHistory()}
       title="Upload history"><i class="fa fa-upload" /></button>
     {#if $historyStore.length > 0}
       <button
         id="downloadHistory"
-        class="btn btn-xs btn-secondary w-12"
+        class="btn btn-secondary btn-xs w-12"
         on:click|stopPropagation={() => downloadHistory()}
         title="Download history"><i class="fa fa-download" /></button>
     {/if}
     |
     <button
       id="saveHistory"
-      class="btn btn-xs btn-success w-12"
+      class="btn btn-success btn-xs w-12"
       on:click|stopPropagation={() => saveHistory()}
       title="Save current state"><i class="far fa-save" /></button>
     {#if $historyModeStore !== 'loader'}
       <button
         id="clearHistory"
-        class="btn btn-xs btn-error w-12"
+        class="btn btn-error btn-xs w-12"
         on:click|stopPropagation={() => clearHistory()}
         title="Delete all saved states"><i class="fas fa-trash-alt" /></button>
     {/if}
   </div>
-  <ul class="p-2 space-y-2 overflow-auto h-56" id="historyList">
+  <ul class="h-56 space-y-2 overflow-auto p-2" id="historyList">
     {#if $historyStore.length > 0}
       {#each $historyStore as { id, state, time, name, url, type }}
-        <li class="rounded p-2 shadow flex-col">
+        <li class="flex-col rounded p-2 shadow">
           <div class="flex">
             <div class="flex-1">
               <div class="flex flex-col text-base-content">
@@ -165,14 +165,14 @@
                     href={url}
                     target="_blank"
                     title="Open revision in new tab"
-                    class="hover:underline text-blue-500">{name}</a>
+                    class="text-blue-500 hover:underline">{name}</a>
                 {:else}
                   <span>{name}</span>
                 {/if}
-                <span class="text-gray-400 text-sm">{relativeTime(time)}</span>
+                <span class="text-sm text-gray-400">{relativeTime(time)}</span>
               </div>
             </div>
-            <div class="flex gap-2 content-center">
+            <div class="flex content-center gap-2">
               <button class="btn btn-success" on:click={() => restoreHistoryItem(state)}
                 ><i class="fas fa-undo mr-1" />Restore</button>
               {#if type !== 'loader'}

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
@@ -62,8 +62,13 @@
 
 {#if activePromotion}
   <div
-    class="z-10 w-full h-fit top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center text-center justify-center p-1 text-white">
-    <div class="flex flex-grow" on:click={trackBannerClick} on:keypress={trackBannerClick}>
+    class="top-bar z-10 flex h-fit w-full items-center justify-center bg-gradient-to-r from-[#bd34fe] to-[#ff3670] p-1 text-center text-white">
+    <div
+      class="flex flex-grow"
+      role="button"
+      tabindex="0"
+      on:click={trackBannerClick}
+      on:keypress={trackBannerClick}>
       <svelte:component this={activePromotion.component} />
     </div>
     <button
@@ -77,16 +82,16 @@
   </div>
 {/if}
 
-<div class="navbar shadow-lg bg-primary p-0">
-  <div class="flex-1 px-2 mx-2">
+<div class="navbar bg-primary p-0 shadow-lg">
+  <div class="mx-2 flex-1 px-2">
     <span class="text-lg font-bold">
       <a href="/">Mermaid<span class="text-xs font-thin">v{version}</span> Live Editor</a>
     </span>
   </div>
 
   <label
     for="menu-toggle"
-    class={isMenuOpen ? 'hidden' : 'pointer-cursor lg:hidden fixed right-4 z-[1000]'}>
+    class={isMenuOpen ? 'hidden' : 'pointer-cursor fixed right-4 z-[1000] lg:hidden'}>
     <svg
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -102,7 +107,7 @@
   <!-- Cross SVG -->
   <label
     for="menu-toggle"
-    class={isMenuOpen ? 'pointer-cursor lg:hidden fixed right-4 z-[1000]' : 'hidden'}>
+    class={isMenuOpen ? 'pointer-cursor fixed right-4 z-[1000] lg:hidden' : 'hidden'}>
     <svg
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -123,9 +128,9 @@
     bind:checked={isMenuOpen}
     on:click={toggleMenu} />
 
-  <div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
+  <div class="hidden w-full lg:flex lg:w-auto lg:items-center" id="menu">
     <Theme />
-    <ul class="lg:flex items-center justify-between text-base pt-4 lg:pt-0">
+    <ul class="items-center justify-between pt-4 text-base lg:flex lg:pt-0">
       {#each links as { title, href, icon, img }}
         <li>
           <a class="btn btn-ghost" target="_blank" {href}>

diff --git a/src/lib/components/Preset.svelte b/src/lib/components/Preset.svelte
@@ -153,14 +153,14 @@
 </script>
 
 <Card title="Sample Diagrams" isOpen={false}>
-  <div class="flex flex-wrap p-2 gap-2">
+  <div class="flex flex-wrap gap-2 p-2">
     {#each diagramOrder as sample}
       <button
-        class="btn btn-sm btn-primary w-28 normal-case flex-grow"
+        class="btn btn-primary btn-sm w-28 flex-grow normal-case"
         on:click={() => loadSampleDiagram(sample)}>
         {sample}
         {#if newDiagrams.includes(sample)}
-          <span class="ml-2 fa fa-heart" />
+          <span class="fa fa-heart ml-2" />
         {/if}
       </button>
     {/each}