use-undoable - npm Package Compare versions

Comparing version 3.3.5 to 3.3.6

package.json

 {
   "name": "use-undoable",
-  "version": "3.3.5",
+  "version": "3.3.6",
   "description": "React hook for undo/redo functionality without the hassle.",
@@ -5,0 +5,0 @@ "private": false,

README.md

@@ -7,2 +7,4 @@ # useUndoable
 
+Note: Information about integration with React Flow v10 is near the bottom of this document.
+
 ## Installation
@@ -64,6 +66,10 @@
 
-Note: I highly recommend getting a deep understanding of how the state works. To do this, simply open up the [live demo](https://codesandbox.io/s/use-undoable-zi0b4) and make the state there look like the examples below. This will help you to see how the state is internally modified. Doing this will help you make better decisions about the options and behavior this package offers.
+This README is the entire documentation. It is written such that you are meant to read it from top to bottom, without skipping around. You see, this project is, in a general sense, quite simple. It is imperative, however, that you have a deeper understanding of how it works. Having this understanding will allow you to make better decisions about the options and behaviors this package offers.
 
-This packages only exports a single hook, so the documentation is explained below. I'll start by describing the API of the hook, and then move into the options and behavior.
+The best way to visualize how the useUndoable state system works is to use the [live demo](https://codesandbox.io/s/use-undoable-zi0b4) as a companion to this README. Simply open it up and make the state there match the examples offered below.
 
+Let's start by going into the API of the hook. Afterwards, we'll move into the options and behavior.
+
+### The API
+
 The API is rather straightforward. You start by initializing the state, giving it a name and naming the updater function. Then, you simply initialize the `undo` and `redo` functions in an object.
@@ -105,5 +111,5 @@
 {
-	past: [0, 1, 2],
-	present: 3,
-	future: []
+    past: [0, 1, 2],
+    present: 3,
+    future: []
 }
@@ -118,5 +124,5 @@ ```
 {
-	past: [0, 1],
-	present: 2,
-	future: [3]
+    past: [0, 1],
+    present: 2,
+    future: [3]
 }
@@ -129,6 +135,8 @@ ```
 
+---
+
+That covers most of the API you'll be working with. There are, however, some lesser-used API values that are explained after the Options & Behavior section below.
+
 ### Options & Behavior
 
-One of the key features of useUndoable is that the behavior can be customized. This means that this package doesn't force a specific behavior, like I mentioned in the "Why?" section.
-
 #### Options
@@ -140,8 +148,8 @@
 
-```js
+```ts
 interface Options {
     behavior?: 'mergePastReversed' | 'mergePast' | 'destroyFuture' | 'keepFuture';
     historyLimit?: number | 'infinium' | 'infinity';
-	ignoreIdenticalMutations?: boolean;
-	cloneState?: boolean;
+    ignoreIdenticalMutations?: boolean;
+    cloneState?: boolean;
 };
@@ -172,5 +180,5 @@ ```
 {
-	past: [],
-	present: 0,
-	future: []
+    past: [],
+    present: 0,
+    future: []
 }
@@ -183,5 +191,5 @@ ```
 {
-	past: [0, 1],
-	present: 2,
-	future: []
+    past: [0, 1],
+    present: 2,
+    future: []
 }
@@ -194,5 +202,5 @@ ```
 {
-	past: [],
-	present: 0,
-	future: [1, 2]
+    past: [],
+    present: 0,
+    future: [1, 2]
 }
@@ -211,5 +219,5 @@ ```
 {
-	past: [],
-	present: 0,
-	future: [1, 2]
+    past: [],
+    present: 0,
+    future: [1, 2]
 }
@@ -222,5 +230,5 @@ ```
 {
-	past: [0],
-	present: 1,
-	future: []
+    past: [0],
+    present: 1,
+    future: []
 }
@@ -246,5 +254,5 @@ ```
 {
-	past: [0],
-	present: 1,
-	future: [1, 2]
+    past: [0],
+    present: 1,
+    future: [1, 2]
 }
@@ -390,2 +398,25 @@ ```
 
+## Integration with React Flow v10
+
+React Flow v10 added new (and much better) ways to manage the internal state of the `ReactFlow` component. Most notably, the state of nodes and edges have been separated. When you try to integrate useUndoable with v10 as their documentation suggestions, you'll run into some weird issues with re-renders and state updates.
+
+The primary cause for most of these issues is that **you are trying to manage multiple state instances at once.** In effect, useUndoable may try to overwrite React Flow's state and vice/versa.
+
+The solution to this problem is very simple: make useUndoable the **exclusive** state manager for nodes and edges.
+
+This way, nothing will be arbitrarily overwritten, and it will work as expected.
+
+See the updated `react-flow-example/src/App.jsx` file for ways to work with React Flow v10.
+
+The `react-flow-example` does do something "unexpected:" moving a node counts as a **series** of state updates. This means that useUndoable **will count each drag event as individual pieces of history.**
+
+For instance:
+
+- You have Node A with position 0, 0
+- You move Node A to position 100, 100
+
+This is not one state update in React Flow v10. Instead, a `drag` event is fired for, more or less, every unit you move: 0 -> 1 -> 2 -> 3 -> and so on.
+
+This is not a flaw with useUndoable itself, because those state changes are legitimate. Therefore, it is up to you and your project to determine the best way to track React Flow's state changes.
+
 ## Contributing
@@ -392,0 +423,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58819

increased by2.95%

Number of lines in readme file

419

increased by7.99%

Worsened metrics

Number of package files

13

decreased by-7.14%

Lines of code

477

decreased by-0.62%

No dependency changes