amigx y cosas

src/doc.ts

@@ -80,5 +80,6 @@ export type Done = {
 export function getData(userY: UserY) {
   const ydoing: Y.Array<Doing> = userY.ydoc.getArray("doing");
   const ydone: Y.Array<Done> = userY.ydoc.getArray("done");
-  return { ydoing, ydone };
+  const yname: Y.Text = userY.ydoc.getText("name");
+  return { ydoing, ydone, yname };
 }

src/lib/Amigxs.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
-  import { parseUser, type UserIdentifier } from "../doc";
-  import friends from "./stores/friends";
+  import { derived, get } from "svelte/store";
+  import { getData, getUserY, parseUser, type UserIdentifier } from "../doc";
+  import friends, { friendsData } from "./stores/friends";
+
+  $: allData = derived($friendsData, (values) =>
+    values.map((v, i) => ({ ...v, id: get(friends)[i] }))
+  );
 
   export let myUser: UserIdentifier;
 
@@ -11,15 +16,33 @@
   ) {
     const idString: string = event.currentTarget.idd.value;
     const id = parseUser(idString);
+    if ($friends.find((i) => i.room === id.room)) {
+      alert("ya agregaste a este ser!");
+      return;
+    }
     $friends = [...$friends, id];
     event.currentTarget.idd.value = "";
   }
 
+  $: userY = getUserY(myUser);
+  $: data = getData(userY);
+  const changeName = (name: string) => {
+    // TODO: no ideal
+    data.yname.delete(0, data.yname.length);
+    data.yname.insert(0, name);
+  };
+
   $: id = `${myUser.room};${myUser.password}`;
   const copiar = () => navigator.clipboard.writeText(id);
 </script>
 
 <button on:click={copiar}>copiar tu id</button>
+<input
+  type="text"
+  value={data.yname.toString()}
+  on:input={(e) => changeName(e.currentTarget.value)}
+  placeholder="tu nombre"
+/>
 
 <form on:submit|preventDefault={add}>
   <input name="idd" type="text" placeholder="id" />
@@ -27,7 +50,11 @@
 </form>
 
 <ul>
-  {#each $friends as friend}
-    <li>{friend.room}</li>
+  {#each $allData as friend}
+    {#if friend.name}
+      <li>{friend.name} <small>({friend.id.room})</small></li>
+    {:else}
+      <li>{friend.id.room}</li>
+    {/if}
   {/each}
 </ul>

src/lib/Others.svelte

@@ -1,23 +1,12 @@
 <script lang="ts">
-  import { readableArray } from "svelt-yjs/src/main";
-  import { getData, getUserY, type Doing } from "../doc";
-  import { derived } from "svelte/store";
+  import { derived, get } from "svelte/store";
   import timer from "./timer";
   import { intervalToDuration } from "date-fns";
-  import friends from "./stores/friends";
+  import friends, { friendsData } from "./stores/friends";
   import formatDistanceShort from "./helpers/formatDistanceShort";
 
-  $: users = $friends
-    .map((id) => ({ id, ...getUserY(id) }))
-    .map((y) => ({ ...y, ...getData(y) }));
-
-  $: allDoing =
-    users &&
-    derived(
-      users.map((y) => readableArray(y.ydoing)),
-      (doings, set: (value: { name: string; $d: Doing[] }[]) => void) => {
-        set(doings.map(($d, i) => ({ name: users[i].id.room, $d })));
-      }
+  $: allData = derived($friendsData, (values) =>
+    values.map((v, i) => ({ ...v, id: get(friends)[i] }))
   );
 
   // $: done = readableArray(ydone);
@@ -25,13 +14,13 @@
   const sTimer = timer(1000);
 </script>
 
-{#if allDoing}
+{#if allData}
   <ul>
-    {#each $allDoing as doing}
-      {#if doing.$d.length > 0}
+    {#each $allData as data}
+      {#if data.doing.length > 0}
         <li>
-          <strong>{doing.name}</strong>
-          {#each doing.$d as d, i}
+          <strong>{data.name || data.id.room}</strong>
+          {#each data.doing as d, i}
             {#if i !== 0} y {/if}
             {d.description}
             hace

src/lib/helpers/readableText.js

@@ -0,0 +1,21 @@
+import * as Y from "yjs";
+
+/** @typedef {import('svelte/store').Readable<string> & { y: Y.Text }} YReadableText */
+
+/**
+ * @param {Y.Text} ytext
+ * @returns {YReadableText}
+ */
+export function readableText(ytext) {
+  return {
+    subscribe(run) {
+      const cb = () => run(ytext.toString());
+      cb();
+      ytext.observe(cb);
+      return () => {
+        ytext.unobserve(cb);
+      };
+    },
+    y: ytext,
+  };
+}

src/lib/helpers/recursiveReadable.js

@@ -0,0 +1,34 @@
+// /**
+//  * @template Type
+//  * @typedef {{
+//   [Property in keyof Type]: Type[Property] extends import("svelte/store").Readable ? Type[Property]['subscribe']['arguments'] : Type[Property];
+// }} Resolved */
+
+import * as Y from "yjs";
+
+/**
+ * @typedef {{
+  [key: string]: import("svelte/store").Readable
+}} DataStores */
+/**
+ * @template {DataStores} T
+ * @typedef {{
+  [Property in keyof T]: Parameters<Parameters<T[Property]['subscribe']>[0]>[0]
+}} Data */
+
+import { derived } from "svelte/store";
+
+/**
+ * @template {DataStores} T
+ * @param {T} thing
+ * @returns {import('svelte/store').Readable<Data<T>>}
+ */
+export function deriveObj(thing) {
+  return derived(Object.values(thing), (values) => {
+    const keys = Object.keys(thing);
+    // prettier-ignore
+    return /** @type {Data<T>} */(Object.fromEntries(
+      values.map(($v, i) => [keys[i], $v])
+    ))
+  });
+}

src/lib/stores/friends.ts

@@ -1,5 +1,8 @@
-import { writable } from "svelte/store";
-import type { UserIdentifier } from "../../doc";
+import { derived, writable } from "svelte/store";
+import { readableArray } from "svelt-yjs/src/main";
+import { getData, getUserY, type UserIdentifier } from "../../doc";
+import { readableText } from "../helpers/readableText";
+import { deriveObj } from "../helpers/recursiveReadable";
 
 type Type = UserIdentifier[];
 
@@ -9,3 +12,15 @@ const save = (v: Type) => (localStorage.friends = JSON.stringify(v));
 const store = writable(start);
 store.subscribe(save);
 export default store;
+
+export const friendsData = derived(store, ($friends) =>
+  $friends
+    .map((id) => ({ id, ...getUserY(id) }))
+    .map((y) => ({ ...y, ...getData(y) }))
+    .map((y) => ({
+      name: readableText(y.yname),
+      doing: readableArray(y.ydoing),
+      done: readableArray(y.ydone),
+    }))
+    .map((d) => deriveObj(d))
+);