README.md

@@ -1,5 +1,47 @@
-# enprogreso
+# Svelte + TS + Vite
 
-una plataforma para trackear el tiempo que [nos](https://sutty.coop.ar) lleva hacer cosas y al mismo tiempo socializar _que_ estamos haciendo.
+This template should help get you started developing with Svelte and TypeScript in Vite.
 
-trabajo en progreso :)
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```

src/app.css

@@ -1,5 +1,5 @@
 :root {
-  font-family: sans-serif;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 

src/doc.ts

@@ -80,6 +80,5 @@ 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");
-  const yname: Y.Text = userY.ydoc.getText("name");
+  return { ydoing, ydone };
-  return { ydoing, ydone, yname };
 }

src/lib/Amigxs.svelte

@@ -1,11 +1,6 @@
 <script lang="ts">
-  import { derived, get } from "svelte/store";
+  import { parseUser, type UserIdentifier } from "../doc";
-  import { getData, getUserY, parseUser, type UserIdentifier } from "../doc";
+  import friends from "./stores/friends";
-  import friends, { friendsData } from "./stores/friends";
-
-  $: allData = derived($friendsData, (values) =>
-    values.map((v, i) => ({ ...v, id: get(friends)[i] }))
-  );
 
   export let myUser: UserIdentifier;
 
@@ -16,36 +11,15 @@
   ) {
     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);
-
-  const remove = (id: UserIdentifier) =>
-    ($friends = $friends.filter((i) => i.room !== id.room));
 </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" />
@@ -53,14 +27,7 @@
 </form>
 
 <ul>
-  {#each $allData as friend}
+  {#each $friends as friend}
-    <li>
+    <li>{friend.room}</li>
-      {#if friend.name}
-        {friend.name} <small>({friend.id.room})</small>
-      {:else}
-        {friend.id.room}
-      {/if}
-      <button on:click={() => remove(friend.id)}>❌</button>
-    </li>
   {/each}
 </ul>

src/lib/Others.svelte

@@ -1,30 +1,37 @@
 <script lang="ts">
-  import { derived, get } from "svelte/store";
+  import { readableArray } from "svelt-yjs/src/main";
+  import { getData, getUserY, type Doing } from "../doc";
+  import { derived } from "svelte/store";
   import timer from "./timer";
-  import { formatDistance, intervalToDuration } from "date-fns";
+  import { intervalToDuration } from "date-fns";
-  import friends, { friendsData } from "./stores/friends";
+  import friends from "./stores/friends";
   import formatDistanceShort from "./helpers/formatDistanceShort";
 
-  $: allData = derived($friendsData, (values) =>
+  $: users = $friends
-    values.map((v, i) => ({ ...v, id: get(friends)[i] }))
+    .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 })));
+      }
+    );
 
   // $: done = readableArray(ydone);
-  $: sortedDone = $allData
+  // $: sortedDone = $done.sort((a, b) => b.started - a.started);
-    .flatMap((d) => d.done.map((t) => ({ ...t, friend: d })))
-    .sort((a, b) => b.started - a.started);
   const sTimer = timer(1000);
-  const hTimer = timer(1000 * 60 * 60);
 </script>
 
-<section>
+{#if allDoing}
-  <h2>actualmente:</h2>
   <ul>
-    {#each $allData as data}
+    {#each $allDoing as doing}
-      {#if data.doing.length > 0}
+      {#if doing.$d.length > 0}
         <li>
-          <strong>{data.name || data.id.room}</strong>
+          <strong>{doing.name}</strong>
-          {#each data.doing as d, i}
+          {#each doing.$d as d, i}
             {#if i !== 0} y {/if}
             {d.description}
             hace
@@ -36,30 +43,4 @@
       {/if}
     {/each}
   </ul>
-  <h2>previamente:</h2>
+{/if}
-  <ul>
-    {#each sortedDone as thing}
-      <li>
-        <strong>{thing.friend.name || thing.friend.id.room}</strong>
-        hizo
-        <em>{thing.description}</em>
-        por
-        {formatDistanceShort(
-          intervalToDuration({
-            start: new Date(thing.started),
-            end: new Date(thing.started + thing.took),
-          })
-        )}
-        hace
-        {formatDistance($hTimer, new Date(thing.started + thing.took))}
-      </li>
-    {/each}
-  </ul>
-</section>
-
-<style>
-  section {
-    overflow-y: auto;
-    max-height: 100%;
-  }
-</style>

src/lib/helpers/readableText.js

@@ -1,21 +0,0 @@
-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

@@ -1,34 +0,0 @@
-// /**
-//  * @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,8 +1,5 @@
-import { derived, writable } from "svelte/store";
+import { writable } from "svelte/store";
-import { readableArray } from "svelt-yjs/src/main";
+import type { UserIdentifier } from "../../doc";
-import { getData, getUserY, type UserIdentifier } from "../../doc";
-import { readableText } from "../helpers/readableText";
-import { deriveObj } from "../helpers/recursiveReadable";
 
 type Type = UserIdentifier[];
 
@@ -12,15 +9,3 @@ 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))
-);