convert to typescript

README.md

@@ -2,6 +2,8 @@
 
 Undo middleware for your favorite, comfy, bearbones state-management solution: [zustand](https://github.com/pmndrs/zustand).
 
+## TODO: add demo
+
 ## Install
 
 ```sh
@@ -47,8 +49,7 @@ const App = () => {
 
 ## Road Map
 
-- add redo
-- typescript support
+- add redo. probably with index to traverse through prevStates
 - clean up api? return `undo` with the store hook?
 
 ## Contributing

src/index.ts

@@ -0,0 +1,46 @@
+import createVanilla, {
+  GetState,
+  SetState,
+  State,
+  StateCreator,
+  StoreApi,
+} from 'zustand/vanilla';
+import create from 'zustand';
+
+// use immer patches? https://immerjs.github.io/immer/patches/
+
+interface UndoStoreState extends State {
+  prevStates: any[];
+  undo: () => void;
+  handle: Function;
+}
+
+// Stores previous actions
+const undoStore = createVanilla<UndoStoreState>((_, get) => ({
+  prevStates: [],
+  undo: () => {
+    get().handle(get().prevStates.pop());
+  },
+  handle: () => {},
+}));
+const { getState, setState } = undoStore;
+export const useUndo = create(undoStore);
+
+// custom middleware to get previous state
+export const undo = <TState extends State>(config: StateCreator<TState>) => (
+  set: SetState<TState>,
+  get: GetState<TState>,
+  api: StoreApi<TState>
+) =>
+  config(
+    args => {
+      setState({
+        prevStates: [...getState().prevStates, { ...get() }],
+        handle: set,
+      });
+      set(args);
+      console.log('  new state', get());
+    },
+    get,
+    api
+  );

stories/bears.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { undo, useUndo } from '../src';
-import create from 'zustand';
+import create, { State } from 'zustand';
 
 const meta: Meta = {
   title: 'bears',
@@ -19,8 +19,14 @@ const meta: Meta = {
 
 export default meta;
 
+interface StoreState extends State {
+  bears: number;
+  increasePopulation: () => void;
+  removeAllBears: () => void;
+}
+
 // create a store with undo middleware
-const useStore = create(
+const useStore = create<StoreState>(
   undo(set => ({
     bears: 0,
     increasePopulation: () => set(state => ({ bears: state.bears + 1 })),
@@ -29,21 +35,21 @@ const useStore = create(
 );
 
 const App = () => {
-  const { prevActions, undo } = useUndo();
+  const { prevStates, undo } = useUndo();
   const { bears, increasePopulation, removeAllBears } = useStore();
 
   return (
     <div>
       <h1>🐻 ♻️ Zundo!</h1>
-      previous actions: {JSON.stringify(prevActions)}
+      previous actions: {JSON.stringify(prevStates)}
       <br />
       <br />
       bears: {bears}
       <br />
       <button onClick={increasePopulation}>increase</button>
       <button onClick={removeAllBears}>remove</button>
       <br />
-      <button onClick={undo as any}>undo</button>
+      <button onClick={undo}>undo</button>
     </div>
   );
 };

stories/bees.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Meta, Story } from '@storybook/react';
 import { undo, useUndo } from '../src';
-import create from 'zustand';
+import create, { State } from 'zustand';
 
 const meta: Meta = {
   title: 'bees',
@@ -19,8 +19,16 @@ const meta: Meta = {
 
 export default meta;
 
+interface StoreStateWithUndo extends State {
+  bees: number;
+  text: string;
+  incrementBees: () => void;
+  decrementBees: () => void;
+  submitText: (text: string) => void;
+}
+
 // create a store with undo middleware
-const useStoreWithUndo = create(
+const useStoreWithUndo = create<StoreStateWithUndo>(
   undo(set => ({
     bees: 0,
     text: "",
@@ -31,7 +39,7 @@ const useStoreWithUndo = create(
 );
 
 const App = () => {
-  const { prevActions, undo } = useUndo();
+  const { prevStates, undo } = useUndo();
   const {
     bees,
     incrementBees,
@@ -44,7 +52,7 @@ const App = () => {
   return (
     <div>
       <h1>🐻 ♻️ Zustand undo!</h1>
-      actions stack: {JSON.stringify(prevActions)}
+      actions stack: {JSON.stringify(prevStates)}
       <br />
       <br />
       bees: {bees}
@@ -59,7 +67,7 @@ const App = () => {
       <br />
       text: {text}
       <br />
-      <button onClick={undo as any}>undo</button>
+      <button onClick={undo}>undo</button>
     </div>
   );
 }