npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@rocicorp/undo

v0.2.1

Published

Undo Redo Manager

Downloads

2,376

Readme

Undo

A simple undo / redo manager. This was designed to work well with Replicache, but can be used entirely independently. From this library's perspective, undo/redo actions are just functions and this library doesn't care what those functions do. Please use Replidraw as a reference on how to use the library.

Installation

npm install @rocicorp/undo

Replicache Usage Example

import { Replicache } from "replicache";
import { useSubscribe } from "replicache-react";
...
import {UndoManager} from '@rocicorp/undo';

// Replicache and UndoManager are initialized outside of the initial component render.
// undoManager = new UndoManager()
const App = ({ rep }: { rep: Replicache<M>, undoManager: UndoManager }) => {
  const todos = useSubscribe(rep, listTodos, [], [rep]);

 // new item with undo
  const handleNewItem = (text: string) => {
    const id = nanoid();
    //function that will redo and execute
    const putTodo = () => {
      rep.mutate.putTodo({
        id,
        text: text,
        sort: todos.length > 0 ? todos[todos.length - 1].sort + 1 : 0,
        completed: false,
      });
    };

    //undo function
    const removeTodo = () => rep.mutate.deleteTodos([id]);

    undoManager.add({
      execute: putTodo,
      undo: removeTodo,
    });
  };

  return (
    <div>
      <Header onNewItem={handleNewItem} />
      <MainSection
        todos={todos}
      />
    </div>
  );
}

Basic Usage Example

import {UndoManager} from '@rocicorp/undo';

const undoManager = new UndoManager();
const modifiedValue = 0;
undoManager.add({
  undo: () => {
    modifiedValue--;
  },
  execute: () => {
    modifiedValue++;
  },
});

API

constructor

Constructor for UndoManager

| Param | Type | Description | | ------- | -------------------------------- | ------------------------------------------- | | options | UnderManagerOptions | Options passed for undo manager constructor |

UnderManagerOptions

| Param | Type | Description | | -------- | ------------------------------------------------------ | --------------------------------------------------------------------------------- | | maxSize | Object | The maximum number of entries in the stack. Default is 10000. | | onChange | (undoManager: UndoRedoStackState) => void | A callback function to be called when the stack canUndo or canRedo values change. |

Example

   const undoManager = new UndoManager({ 10, (e: UndoRedoStackState) => {
    console.log('undo manager canUndo or canRedo values changed -- ', e.canUndo, e.canRedo);
   }});

canUndo

Determines if a user can perform the undo operation on the undoRedo stack.


canRedo

Determines if a user can perform the redo operation on the undoRedo stack.


add

Adds an entry to the undoRedo stack.

| Param | Type | Description | | ------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | options | AddOptions | A UndoRedo or ExecuteUndo object that can is added to the stack. If it is an ExecuteUndo it will run the execute function immediately after adding to the stack. |

AddOptions

type AddOptions = UndoRedo | ExecuteUndo;

type UndoRedo = {
  redo: () => MaybePromise<void>;
  undo: () => MaybePromise<void>;
};

type ExecuteUndo = {
  execute: () => MaybePromise<void>;
  undo: () => MaybePromise<void>;
};

undo

Executes the undo function of the current entry in the undoRedo stack. If the current entry has groupID it will check the upcoming undo entry. If the upcoming undo entry also has the same groupID the function will recursively call undo until it runs into a entry that has has a different groupID or is undefined.


redo

Executes the redo function of the current entry in the undoRedo stack. If the current entry has groupID it will check the upcoming redo entry. If the upcoming redo entry also has the same groupID the function will recursively call redo until it runs into a entry that has has a different groupID or is undefined.


startGroup

Sets the undo manager to add groupID to all subsequent entries. Sets the isGrouping internal state of the stack to true


endGroup

Sets the undo manager to mark all subsequent added entries groupID to undefined. Sets the isGrouping internal state of the stack to false