oj-diff-patch

json diff patch repatch, undo / redo

Usage no npm install needed!

<script type="module">
  import ojDiffPatch from 'https://cdn.skypack.dev/oj-diff-patch';
</script>

README

DiffPatch

Uses the jsondiffpatch library

Usage

import

import { DiffPatch } from "oj-diff-patch"

Initialize

const dp = new DiffPatch()

Add change

let state = dp.add({ packages: [{ name: "oj-diff-patch", version: "1.0.0" }] })
state = dp.add({ packages: [{ name: "oj-diff-patch", version: "1.0.1" }, { name: "oj-store", version: "1.0.0" }] })

Undo / Redo

undoBtn.classList.toggle("is-disabled", !dp.canUndo())
redoBtn.classList.toggle("is-disabled", !dp.canRedo())
state = dp.undo()
// state is { packages: [{ name: "oj-diff-patch", version: "1.0.0" }] }
state = dp.redo()
// state is { packages: [{ name: "oj-diff-patch", version: "1.0.1" }, { name: "oj-store", version: "1.0.0" }] }

Reset

Removes all recoded patches, undo/redo wont be possible anymore until a new change is added. It won't change the current state.

dp.reset()

Listen

Listen to changes, get the deltas, from and to states.

state = dp.listen = (deltas, from, to) => {
  storage.set("deltas", deltas)
}

Load

Apply delta array. This will override the current state.

state = dp.load(storage.get("deltas")) // [{"packages":[{"name":"oj-diff-patch","version":"1.0.0"}]},{"packages":{"0":{"version":["1.0.0","1.0.1"]},"1":[{"name":"oj-store","version":"1.0.0"}],"_t":"a"}}]
// state is { packages: [{ name: "oj-diff-patch", version: "1.0.1" }, { name: "oj-store", version: "1.0.0" }] }