From 5b3f1d0bf1029343d38ee1fee0fd36c3d14e5545 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?=
 <webJose@gmail.com>
Date: Mon, 22 Jul 2024 22:22:18 -0600
Subject: [PATCH] chore: Update svelte v5

Important: Moving from next.175 to next.195 made data from page.ts non-reactive.
---
 package-lock.json       | 8 ++++----
 package.json            | 2 +-
 src/routes/+page.svelte | 8 +++++++-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2b314f0..31c684c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
 				"vitest": "^2.0.3"
 			},
 			"peerDependencies": {
-				"svelte": "^5.0.0-next.175"
+				"svelte": "^5.0.0-next.195"
 			}
 		},
 		"node_modules/@ampproject/remapping": {
@@ -2450,9 +2450,9 @@
 			}
 		},
 		"node_modules/svelte": {
-			"version": "5.0.0-next.175",
-			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.0.0-next.175.tgz",
-			"integrity": "sha512-fWMI0O3PiKFWvTohAEJRkd6RymR3uo7PO8GrNfyx57KDvmmK1KYRzAdHjx+RsKl8oZhfWeJHiot6iebgY8lJng==",
+			"version": "5.0.0-next.195",
+			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.0.0-next.195.tgz",
+			"integrity": "sha512-aVWhY24T48SI3eAQCZ3RiLY12VP36KWxW0Jb9GqasZC4BVBZTsKJGAY+Uwg3Cv9Ce/QeV+FWoZrom5bJrjR6VA==",
 			"peer": true,
 			"dependencies": {
 				"@ampproject/remapping": "^2.2.1",
diff --git a/package.json b/package.json
index 740b798..711f5d5 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
 		"!dist/**/*.spec.*"
 	],
 	"peerDependencies": {
-		"svelte": "^5.0.0-next.175"
+		"svelte": "^5.0.0-next.195"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^3.0.2",
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e6d4c11..6f60d07 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -16,6 +16,12 @@
         data: { data: WjDvRow<Person>[]; }
     } = $props();
 
+    let gridData = $state([] as WjDvRow<Person>[]);
+
+    $effect.pre(() => {
+        gridData = data.data;
+    });
+
     let columns = $state<WjDvColumn<Person>[]>([
         {
             key: 'id',
@@ -130,7 +136,7 @@ import &#123; WjDataView &#125; from '@wjfe/dataview';</pre>
         <WjDataViewTheme theme={themeOptions.currentTheme}>
             <WjDataView
                 bind:columns
-                bind:data={data.data}
+                bind:data={gridData}
                 striped={demoOptions.striped}
                 rowTracking={demoOptions.rowTracking}
                 rowSelectionHighlight={demoOptions.rowSelectionHighlight}