feat(svelte): demonstrate fine-grained reactivity (#198)

content/4-component-composition/5-context/svelte5/UserProfile.svelte

@@ -8,7 +8,7 @@
   <h2>My Profile</h2>
   <p>Username: {user.value.username}</p>
   <p>Email: {user.value.email}</p>
-  <button on:click={() => user.updateUsername("Jane")}>
+  <button on:click={() => (user.username = "Jane")}>
     Update username to Jane
   </button>
 </div>

content/4-component-composition/5-context/svelte5/createUserState.js

@@ -1,14 +1,12 @@
 export default function createUserState(initial) {
-  let user = $state(initial);
+  let username = $state(initial.username);
   return {
-    get value() {
-      return user;
+    ...initial,
+    get username() {
+      return username;
     },
-    updateUsername(newUsername) {
-      user = {
-        ...user,
-        username: newUsername,
-      };
+    set username(value) {
+      username = value;
     },
   };
 }