Add undo/redo stack size readable Svelte store

example/src/ImageButton.svelte

@@ -3,6 +3,7 @@
 
   export let icon;
   export let alt;
+  export let disabled = false;
 
   const dispatch = createEventDispatcher();
 </script>
@@ -21,6 +22,9 @@
 
     margin: 8px;
   }
+  .disabled {
+    opacity: 0.5;
+  }
   button:active {
     background-color: var(--medium);
     border: 1px solid var(--dark);
@@ -33,7 +37,7 @@
   }
 </style>
 
-<button on:click={() => dispatch('click')}>
+<button class:disabled on:click={() => dispatch('click')}>
   <img src={icon} {alt} />
   <slot />
 </button>

example/src/UndoPanel.svelte

@@ -1,10 +1,14 @@
 <script>
   export let undoManager;
 
+  import { undo } from 'sveltyjs';
+
   import ImageButton from './ImageButton.svelte';
 
   import undoIcon from './images/undo.png';
   import redoIcon from './images/redo.png';
+
+  const undoStore = undo.readable(undoManager);
 </script>
 
 <style>
@@ -30,10 +34,18 @@
 </style>
 
 <panel>
-  <ImageButton icon={undoIcon} on:click={() => undoManager.undo()}>
+  <ImageButton
+    disabled={$undoStore.undoSize === 0}
+    icon={undoIcon}
+    on:click={() => undoManager.undo()}>
     Undo
+    {#if $undoStore.undoSize > 0}({$undoStore.undoSize}){/if}
   </ImageButton>
-  <ImageButton icon={redoIcon} on:click={() => undoManager.redo()}>
+  <ImageButton
+    disabled={$undoStore.redoSize === 0}
+    icon={redoIcon}
+    on:click={() => undoManager.redo()}>
     Redo
+    {#if $undoStore.redoSize > 0}({$undoStore.redoSize}){/if}
   </ImageButton>
 </panel>

src/main.ts

@@ -1,2 +1,3 @@
-export * as array from './types/array'
-export * as map from './types/map'
+export * as array from './types/array';
+export * as map from './types/map';
+export * as undo from './undo';

src/undo.ts

@@ -0,0 +1,36 @@
+import * as Y from 'yjs';
+import { readable as svelteReadable } from 'svelte/store';
+
+function readable(undoManager: Y.UndoManager) {
+  const stackCount = svelteReadable({ undoSize: 0, redoSize: 0 }, (set) => {
+    let undoSize = 0;
+    let redoSize = 0;
+
+    const updateStackSizes = () => {
+      undoSize = undoManager.undoStack.length;
+      redoSize = undoManager.redoStack.length;
+      set({ undoSize, redoSize });
+    };
+
+    const added = (/* { stackItem,  type } */) => {
+      updateStackSizes();
+    };
+
+    const popped = (/* { stackItem,  type } */) => {
+      updateStackSizes();
+    };
+
+    undoManager.on('stack-item-added', added);
+    undoManager.on('stack-item-popped', popped);
+
+    return () => {
+      // clean up when readable store is unsubscribed
+      undoManager.off('stack-item-added', added);
+      undoManager.off('stack-item-popped', popped);
+    };
+  });
+
+  return stackCount;
+}
+
+export { readable };