From 2c7566e8e6ffadecd998578de055b00867b42312 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Thu, 22 Jun 2023 13:30:20 -0500
Subject: [PATCH] migration to Svelte 4

---
 package.json                                    | 12 ++++++------
 src/lib/components/AccordionContainer.svelte    |  2 +-
 src/lib/components/BlockContainer.svelte        |  2 +-
 src/lib/components/ComfyBoxWorkflowsView.svelte |  2 +-
 src/lib/components/ComfyPaneView.svelte         |  2 +-
 src/lib/components/ComfyTemplates.svelte        |  2 +-
 src/lib/components/TabsContainer.svelte         |  2 +-
 7 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index d613a6b..1b98cc9 100644
--- a/package.json
+++ b/package.json
@@ -27,13 +27,13 @@
     "happy-dom": "^9.18.3",
     "jsdom": "^22.0.0",
     "prettier": "^2.8.7",
-    "prettier-plugin-svelte": "^2.10.0",
+    "prettier-plugin-svelte": "^2.10.1",
     "rollup-plugin-visualizer": "^5.9.0",
     "sass": "^1.61.0",
-    "svelte": "^3.59.0",
-    "svelte-check": "^3.2.0",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.3",
     "svelte-dnd-action": "^0.9.22",
-    "typescript": "^5.0.3",
+    "typescript": "^5.0.0",
     "vite": "^4.3.8",
     "vite-plugin-glsl": "^1.1.2",
     "vite-plugin-static-copy": "^0.14.0",
@@ -75,7 +75,7 @@
     "@litegraph-ts/nodes-math": "workspace:*",
     "@litegraph-ts/nodes-strings": "workspace:*",
     "@litegraph-ts/tsconfig": "workspace:*",
-    "@sveltejs/vite-plugin-svelte": "^2.1.1",
+    "@sveltejs/vite-plugin-svelte": "^2.4.1",
     "@tsconfig/svelte": "^4.0.1",
     "@types/dompurify": "^3.0.2",
     "canvas-to-svg": "^1.0.3",
@@ -106,4 +106,4 @@
     "vite-plugin-full-reload": "^1.0.5",
     "zod": "^3.21.4"
   }
-}
+}
\ No newline at end of file
diff --git a/src/lib/components/AccordionContainer.svelte b/src/lib/components/AccordionContainer.svelte
index b9ed311..7b2b6c0 100644
--- a/src/lib/components/AccordionContainer.svelte
+++ b/src/lib/components/AccordionContainer.svelte
@@ -104,7 +104,7 @@
                             >
                                 <WidgetContainer {layoutState} dragItem={item} zIndex={zIndex+1} {isMobile} />
                                 {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                                    <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                                    <div in:fade|global={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                                 {/if}
                             </div>
                         {/each}
diff --git a/src/lib/components/BlockContainer.svelte b/src/lib/components/BlockContainer.svelte
index 913c274..fef033e 100644
--- a/src/lib/components/BlockContainer.svelte
+++ b/src/lib/components/BlockContainer.svelte
@@ -102,7 +102,7 @@
                     >
                         <WidgetContainer {layoutState} dragItem={item} zIndex={zIndex+1} {isMobile} />
                         {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                            <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                            <div in:fade|global={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                         {/if}
                     </div>
                 {/each}
diff --git a/src/lib/components/ComfyBoxWorkflowsView.svelte b/src/lib/components/ComfyBoxWorkflowsView.svelte
index 722a1dd..f7c3e4c 100644
--- a/src/lib/components/ComfyBoxWorkflowsView.svelte
+++ b/src/lib/components/ComfyBoxWorkflowsView.svelte
@@ -336,7 +336,7 @@
                         ✕
                     </button>
                     {#if workflow[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                        <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                        <div in:fade|global={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                     {/if}
                 </button>
             {/each}
diff --git a/src/lib/components/ComfyPaneView.svelte b/src/lib/components/ComfyPaneView.svelte
index 36b6a0b..62bc99d 100644
--- a/src/lib/components/ComfyPaneView.svelte
+++ b/src/lib/components/ComfyPaneView.svelte
@@ -22,7 +22,7 @@
  export let mode: ComfyPaneMode = "none";
  export let showSwitcher: boolean = false;
 
- const MODES: [ComfyPaneMode, typeof SvelteComponent][] = [
+ const MODES: [ComfyPaneMode, typeof SvelteComponent<any>][] = [
      ["properties", Sliders2],
      ["templates", BoxSeam],
      ["queue", LayoutTextSidebarReverse]
diff --git a/src/lib/components/ComfyTemplates.svelte b/src/lib/components/ComfyTemplates.svelte
index 5abf3f7..758895a 100644
--- a/src/lib/components/ComfyTemplates.svelte
+++ b/src/lib/components/ComfyTemplates.svelte
@@ -197,7 +197,7 @@
                                 <div class="template-desc">{item.template.metadata.description}</div>
                             </div>
                             {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                                <div in:fade={{duration:200, easing: cubicIn}} class='template-drag-item-shadow'/>
+                                <div in:fade|global={{duration:200, easing: cubicIn}} class='template-drag-item-shadow'/>
                             {/if}
                         {/each}
                     </div>
diff --git a/src/lib/components/TabsContainer.svelte b/src/lib/components/TabsContainer.svelte
index 162ed46..be11e50 100644
--- a/src/lib/components/TabsContainer.svelte
+++ b/src/lib/components/TabsContainer.svelte
@@ -112,7 +112,7 @@
                                 </label>
                                 <WidgetContainer {layoutState} dragItem={item} zIndex={zIndex+1} {isMobile} />
                                 {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                                    <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                                    <div in:fade|global={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                                 {/if}
                             </Block>
                         </div>