react-undoable - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

dist/index.d.ts

@@ -7,37 +7,52 @@ import * as React from 'react';
 interface IUndoableMethods<T> {
-    pushState(state: T): void;
-    redo(): T | undefined;
+    pushState(state: T | Partial<T>): void;
+    redo(): void;
     resetState(state?: T): void;
-    undo(): T | undefined;
-    updateState(state: T): void;
+    undo(): void;
+    updateState(state: T | Partial<T>): void;
 }
-export interface IUndoable<T> {
-    currentState?: T;
-    pushState(state: T): void;
-    redo(): T | undefined;
-    resetState(state?: T): void;
-    undo(): T | undefined;
-    updateState(state: T): void;
+export interface IUndoable<T> extends IUndoableMethods<T> {
+    currentState: T | IState;
 }
 interface IUndoableState<T> {
-    currentState?: T;
-    previousState: (T | undefined)[];
-    nextState: (T | undefined)[];
+    currentState: T | IState;
+    previousState: IDifference[][];
+    nextState: IDifference[][];
+    initialized: boolean;
 }
+export interface IDifference {
+    op: DifferenceOp;
+    reference: string;
+    value: any;
+}
+export declare enum DifferenceOp {
+    Create = "create",
+    Delete = "delete",
+    Update = "update"
+}
+interface IState {
+    [anyAttribute: string]: any;
+}
+declare type Partial<T> = {
+    [P in keyof T]?: T[P];
+};
 export default class Undoable<T> extends React.Component<IUndoableProps<T>, IUndoableState<T>> {
     readonly state: {
-        currentState: undefined;
+        currentState: {};
+        initialized: boolean;
+        nextState: never[];
         previousState: never[];
-        nextState: never[];
     };
     static getDerivedStateFromProps(nextProps: IUndoableProps<any>, nextState: IUndoableState<any>): {
         currentState: any;
+        initialized: boolean;
     } | null;
-    undo: () => undefined;
-    redo: () => undefined;
-    pushState: (state: T) => void;
+    undo: () => void;
+    redo: () => void;
+    compareState: (originalState: IState, nextState: IState) => IDifference[];
+    pushState: (state: T | Partial<T>) => void;
     resetState: (state: T) => void;
-    updateState: (state: T) => void;
+    updateState: (state: T | Partial<T>) => void;
     render(): {} | null | undefined;
 }
 export {};

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";var __extends=this&&this.__extends||function(){var n=function(t,e){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])})(t,e)};return function(t,e){function r(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}}(),__assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var a in e=arguments[r])Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a]);return t}).apply(this,arguments)};Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),Undoable=function(t){function e(){var i=null!==t&&t.apply(this,arguments)||this;return i.state={currentState:void 0,previousState:[],nextState:[]},i.undo=function(){var t=i.state,e=t.previousState,r=t.nextState,n=t.currentState;if(e.length){var a=e.slice(),o=a.pop(),s=n;return i.setState({currentState:o,nextState:r.concat([s]),previousState:a}),o}},i.redo=function(){var t=i.state,e=t.previousState,r=t.nextState,n=t.currentState;if(r.length){var a=r.slice(),o=a.pop(),s=n;return i.setState({currentState:o,nextState:a,previousState:e.concat([s])}),o}},i.pushState=function(t){var e=i.state,r=e.currentState,n=e.previousState;i.setState({currentState:t,nextState:[],previousState:n.concat([r])})},i.resetState=function(t){i.setState({currentState:t,nextState:[],previousState:[]})},i.updateState=function(t){i.setState({currentState:t})},i}return __extends(e,t),e.getDerivedStateFromProps=function(t,e){return t.initialState&&void 0===e.currentState?{currentState:t.initialState}:null},e.prototype.render=function(){var t=this.props.children,e=__assign({},this.state,{undo:this.undo,redo:this.redo,pushState:this.pushState,resetState:this.resetState,updateState:this.updateState});return!!t&&t(e)},e}(React.Component);exports.default=Undoable;
+"use strict";var __extends=this&&this.__extends||function(){var a=function(e,t){return(a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(e,t)};return function(e,t){function r(){this.constructor=e}a(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}}(),__assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,r=1,a=arguments.length;r<a;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}).apply(this,arguments)};Object.defineProperty(exports,"__esModule",{value:!0});var DifferenceOp,React=require("react"),lodash_1=require("lodash"),deep_diff_1=require("deep-diff");!function(e){e.Create="create",e.Delete="delete",e.Update="update"}(DifferenceOp=exports.DifferenceOp||(exports.DifferenceOp={}));var Undoable=function(e){function t(){var c=null!==e&&e.apply(this,arguments)||this;return c.state={currentState:{},initialized:!1,nextState:[],previousState:[]},c.undo=function(){var e=c.state,t=e.currentState,r=e.nextState,a=e.previousState;if(a.length){var n=a.slice(),i=lodash_1.cloneDeep(t),o=n.pop();if(void 0!==o){o.forEach(function(e){if(e.op===DifferenceOp.Delete){var t=e.reference.split(".").slice(0,-1).join(".");lodash_1.unset(i,e.reference);var r=lodash_1.get(i,t);void 0!==r&&Array.isArray(r)&&lodash_1.set(i,t,r.filter(Boolean))}else lodash_1.set(i,e.reference,e.value)});var s=c.compareState(t,i);c.setState({currentState:i,nextState:r.concat([s]),previousState:n})}}},c.redo=function(){var e=c.state,t=e.currentState,r=e.nextState,a=e.previousState;if(r.length){var n=r.slice(),i=__assign({},t),o=n.pop();if(void 0!==o){o.forEach(function(e){if(e.op===DifferenceOp.Delete){var t=e.reference.split(".").slice(0,-1).join(".");lodash_1.unset(i,e.reference);var r=lodash_1.get(i,t);void 0!==r&&Array.isArray(r)&&lodash_1.set(i,t,r.filter(Boolean))}else lodash_1.set(i,e.reference,e.value)});var s=c.compareState(t,i);c.setState({currentState:i,nextState:n,previousState:a.concat([s])})}}},c.compareState=function(e,t){var r=deep_diff_1.diff(e,t);return r?r.filter(Boolean).map(function(e){var t,r=e.path||[],a=DifferenceOp.Update;switch(e.kind){case"A":"N"===e.item.kind?(a=DifferenceOp.Delete,r.push(e.index),t=e.item.rhs):"D"===e.item.kind&&(a=DifferenceOp.Create,r.push(e.index),t=e.item.lhs);break;case"N":a=DifferenceOp.Delete,t=e.rhs;break;case"D":a=DifferenceOp.Create,t=e.lhs;break;case"E":a=DifferenceOp.Update,t=e.lhs}return{op:a,reference:r.join("."),value:t}}):[]},c.pushState=function(e){var t=c.state,r=t.currentState,a=t.previousState,n=__assign({},r,e),i=c.compareState(r,n);console.log("pushState",n,i),c.setState({currentState:n,nextState:[],previousState:a.concat([i])})},c.resetState=function(e){c.setState({currentState:e,nextState:[],previousState:[]})},c.updateState=function(e){var t=c.state.currentState,r=__assign({},t,e);console.log("updateState",r),c.setState({currentState:r})},c}return __extends(t,e),t.getDerivedStateFromProps=function(e,t){return e.initialState&&!1===t.initialized?{currentState:e.initialState,initialized:!0}:null},t.prototype.render=function(){var e=this.props.children,t=__assign({},this.state,{undo:this.undo,redo:this.redo,pushState:this.pushState,resetState:this.resetState,updateState:this.updateState});return!!e&&e(t)},t}(React.Component);exports.default=Undoable;

package.json

 {
   "name": "react-undoable",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Easily undo/redo any state in React, no external dependencies",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -7,3 +7,3 @@ # react-undoable 🔄
 
-Easily undo/redo any state in React, no external dependencies.
+Easily undo/redo any state in React, no redux required.
 
@@ -32,3 +32,3 @@ ![minified size](https://badgen.net/bundlephobia/min/react-undoable)
 ```typescript
-import React, { PureComponent } from 'react'
+import * as React from 'react'
 import Undoable, { IUndoable } from 'react-undoable'
@@ -65,3 +65,3 @@ import ReactDOM from 'react-dom'
  */
-class MyComponent extends PureComponent<IMyComponentProps> {
+class MyComponent extends React.Component<IMyComponentProps> {
   /**
@@ -187,4 +187,13 @@ * Count up - This demonstrates pushing a complete state to the stack
 
+## Use Cases
+
+[Astral TableTop](https://www.astraltabletop.com) allows Game Masters to build feature-rich
+dungeons and maps using a "Map Builder", a feature which resembles many familiar photo editing
+interfaces and contains basic functionality such as undo/redo for editing actions. This library
+allows developers to create undo/redo functionality for any React Component with minimal overhead.
+
+We open-sourced this library in hopes that other projects might find it useful 💙
+
 ## License
 
 MIT

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

195234

increased by1395.01%

Number of package files

9

increased by12.5%

Lines of code

58

increased by34.88%

Number of lines in readme file

196

increased by4.81%

No dependency changes