move back the documentation in the README
This commit is contained in:
parent
aeb46565a9
commit
e8c9bc5201
411
README.md
411
README.md
@ -5,11 +5,418 @@
|
|||||||
|
|
||||||
## About
|
## About
|
||||||
|
|
||||||
This is a fork of the main [updeep](https://github.com/substantial/updeep) package.
|
> 💡 This is a fork of the main [updeep](https://github.com/substantial/updeep) package. For ease of reading — not to mention ease of shamelessly lifting large pieces of the original documentation — in this documentation all mentions of `updeep` refers to this fork.
|
||||||
|
|
||||||
updeep makes updating deeply nested objects/arrays painless by allowing you to
|
updeep makes updating deeply nested objects/arrays painless by allowing you to
|
||||||
declare the updates you would like to make and it will take care of the rest. It
|
declare the updates you would like to make and it will take care of the rest. It
|
||||||
will recursively return the same instance if no changes have been made, making
|
will recursively return the same instance if no changes have been made, making
|
||||||
it ideal for using reference equality checks to detect changes.
|
it ideal for using reference equality checks to detect changes.
|
||||||
|
|
||||||
Full documentation can be found at [https://yanick.github.io/updeep-remeda/index.html](https://yanick.github.io/updeep-remeda/index.html).
|
Because of this, everything returned by updeep is frozen. Not only that, but
|
||||||
|
updeep assumes that every object passed in to update is immutable, so it may
|
||||||
|
freeze objects passed in as well. Note that the freezing only happens in
|
||||||
|
development.
|
||||||
|
|
||||||
|
This fork of updeep requires Remeda, but works very well with any other utility function ([lodash], [Ramda], etc).
|
||||||
|
|
||||||
|
## Differences with the original Updeep
|
||||||
|
|
||||||
|
- Under the hood, the use of lodash has
|
||||||
|
been replaced by Remeda (for better type support and tree-shaking abilities).
|
||||||
|
|
||||||
|
- The codebase has been ported to TypeScript (mostly for the lulz).
|
||||||
|
|
||||||
|
- The order of parameters in the non-curryied invocation of functions has been modified. In the original updeep the input object is the last parameter, whereas here it's the first.
|
||||||
|
|
||||||
|
```js
|
||||||
|
// original updeep
|
||||||
|
const dataIn = { a: 1, b: 2 };
|
||||||
|
|
||||||
|
let dataOut = u({ c: 3 }, dataIn); // simple call
|
||||||
|
dataOut = u({ c: 3 })(dataIn); // curried
|
||||||
|
|
||||||
|
// updeep-remeda
|
||||||
|
dataOut = u(dataIn, { c: 3 }); // simple call
|
||||||
|
dataOut = u({ c: 3 })(dataIn); // curried
|
||||||
|
```
|
||||||
|
|
||||||
|
- `withDefault` has been removed as the behavior can be implemented using
|
||||||
|
Remeda's `pipe`, or a simple `??`.
|
||||||
|
|
||||||
|
- `u.omitted` has been renamed `u.skip`.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ npm install @yanick/updeep-remeda
|
||||||
|
# or
|
||||||
|
$ pnpm install @yanick/updeep-remeda
|
||||||
|
```
|
||||||
|
|
||||||
|
## Full example
|
||||||
|
|
||||||
|
```js
|
||||||
|
import u from "@yanick/updeep-remeda";
|
||||||
|
|
||||||
|
const person = {
|
||||||
|
name: { first: "Bill", last: "Sagat" },
|
||||||
|
children: [
|
||||||
|
{ name: "Mary-Kate", age: 7 },
|
||||||
|
{ name: "Ashley", age: 7 },
|
||||||
|
],
|
||||||
|
todo: ["Be funny", "Manage household"],
|
||||||
|
email: "bill@example.com",
|
||||||
|
version: 1,
|
||||||
|
};
|
||||||
|
|
||||||
|
const inc = (i) => i + 1;
|
||||||
|
|
||||||
|
const eq = (x) => (y) => x === y;
|
||||||
|
|
||||||
|
const newPerson = u(person, {
|
||||||
|
// Change first name
|
||||||
|
name: { first: "Bob" },
|
||||||
|
// Increment all children's ages
|
||||||
|
children: u.map({ age: inc }),
|
||||||
|
// Update email
|
||||||
|
email: "bob@example.com",
|
||||||
|
// Remove todo
|
||||||
|
todo: u.reject(eq("Be funny")),
|
||||||
|
// Increment version
|
||||||
|
version: inc,
|
||||||
|
});
|
||||||
|
// => {
|
||||||
|
// name: { first: 'Bob', last: 'Sagat' },
|
||||||
|
// children: [
|
||||||
|
// { name: 'Mary-Kate', age: 8 },
|
||||||
|
// { name: 'Ashley', age: 8 }
|
||||||
|
// ],
|
||||||
|
// todo: [
|
||||||
|
// 'Manage household'
|
||||||
|
// ],
|
||||||
|
// email: 'bob@example.com',
|
||||||
|
// version: 2
|
||||||
|
//}
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
> 💡 All functions are curried, Remeda-style, so if you see `f(dataIn, ...others)`, it can be called with either `f(dataIn, ...others)` or `f(...others)(dataIn)`.
|
||||||
|
|
||||||
|
### Importing
|
||||||
|
|
||||||
|
`updeep-remeda` exports a default function that is an alias to `u.update` and
|
||||||
|
has all the other functions available as props.
|
||||||
|
|
||||||
|
```
|
||||||
|
import u from '@yanick/updeep-remeda';
|
||||||
|
|
||||||
|
const foo = u({a:1}, { a: x => x + 1 });
|
||||||
|
|
||||||
|
const bar = u.updateIn({ a: { b: 2 } }, 'a.b', 3 );
|
||||||
|
```
|
||||||
|
|
||||||
|
Or you can import the functions piecemeal:
|
||||||
|
|
||||||
|
```
|
||||||
|
import { updateIn, omit } from '@yanick/updeep-remeda';
|
||||||
|
```
|
||||||
|
|
||||||
|
### `u(dataIn, updates)`
|
||||||
|
|
||||||
|
### `u.update(dataIn, updates)`
|
||||||
|
|
||||||
|
Update as many values as you want, as deeply as you want. The `updates` parameter can either be an object, a function, or a value. Everything returned from `u` is frozen recursively.
|
||||||
|
|
||||||
|
If `updates` is an object, for each key/value, it will apply the updates specified in the value to `object[key]`.
|
||||||
|
|
||||||
|
If `updates` is a function, it will call the function with `object` and return the value.
|
||||||
|
|
||||||
|
If `updates` is a value, it will return that value.
|
||||||
|
|
||||||
|
Sometimes, you may want to set an entire object to a property, or a function. In that case, you'll need to use a function to return that value, otherwise it would be interpreted as an update. Ex. `function() { return { a: 0 }; }`.
|
||||||
|
|
||||||
|
Also available at `u.update(...)`.
|
||||||
|
|
||||||
|
#### Simple update
|
||||||
|
|
||||||
|
Object properties:
|
||||||
|
|
||||||
|
```js
|
||||||
|
const person = {
|
||||||
|
name: {
|
||||||
|
first: "Jane",
|
||||||
|
last: "West",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const result = u(person, { name: { first: "Susan" } });
|
||||||
|
|
||||||
|
expect(result).to.eql({ name: { first: "Susan", last: "West" } });
|
||||||
|
```
|
||||||
|
|
||||||
|
Array elements:
|
||||||
|
|
||||||
|
```js
|
||||||
|
const scoreboard = {
|
||||||
|
scores: [12, 28],
|
||||||
|
};
|
||||||
|
|
||||||
|
const result = u(scoreboard, { scores: { 1: 36 } });
|
||||||
|
|
||||||
|
expect(result).to.eql({ scores: [12, 36] });
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Multiple updates
|
||||||
|
|
||||||
|
```js
|
||||||
|
const person = {
|
||||||
|
name: {
|
||||||
|
first: "Mike",
|
||||||
|
last: "Smith",
|
||||||
|
},
|
||||||
|
scores: [12, 28],
|
||||||
|
};
|
||||||
|
|
||||||
|
const result = u(person, { name: { last: "Jones" }, scores: { 1: 36 } });
|
||||||
|
|
||||||
|
expect(result).to.eql({
|
||||||
|
name: { first: "Mike", last: "Jones" },
|
||||||
|
scores: [12, 36],
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Use a function
|
||||||
|
|
||||||
|
```js
|
||||||
|
const increment = (i) => i + 1;
|
||||||
|
|
||||||
|
var scoreboard = {
|
||||||
|
scores: {
|
||||||
|
team1: 0,
|
||||||
|
team2: 0,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const result = u(scoreboard, { scores: { team2: increment } });
|
||||||
|
|
||||||
|
expect(result).to.eql({ scores: { team1: 0, team2: 1 } });
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Array Manipulation
|
||||||
|
|
||||||
|
Non-trivial array manipulations, such as element removal/insertion/sorting, can be implemented with functions. Because there are so many possible manipulations, we don't provide any helpers and leave this up to you. Simply ensure your function is pure and does not mutate its arguments.
|
||||||
|
|
||||||
|
```js
|
||||||
|
function addTodo(todos) {
|
||||||
|
return [].concat(todos, [{ done: false }]);
|
||||||
|
}
|
||||||
|
|
||||||
|
const state = {
|
||||||
|
todos: [{ done: false }, { done: false }],
|
||||||
|
};
|
||||||
|
|
||||||
|
const result = u({ todos: addTodo }, state);
|
||||||
|
|
||||||
|
expect(result).to.eql({
|
||||||
|
todos: [{ done: false }, { done: false }, { done: false }],
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
Remeda is one of the many libraries providing good utility functions for
|
||||||
|
such manipulations.
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { reject, concat, prop } from "remeda";
|
||||||
|
|
||||||
|
let state = {
|
||||||
|
todos: [{ done: true }, { done: false }],
|
||||||
|
};
|
||||||
|
|
||||||
|
// add a new todo
|
||||||
|
state = u(state, { todos: concat({ done: false }) });
|
||||||
|
expect(state).to.eql({
|
||||||
|
todos: [{ done: true }, { done: false }, { done: false }],
|
||||||
|
});
|
||||||
|
|
||||||
|
// remove all done todos
|
||||||
|
state = u(state, { todos: reject(prop("done")) });
|
||||||
|
expect(state).to.eql({ todos: [{ done: false }, { done: false }] });
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Default input data
|
||||||
|
|
||||||
|
When the input data is null or undefined, updeep uses a empty plain object.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const result = u(null, { foo: "bar" });
|
||||||
|
expect(result).to.eql({ foo: "bar" });
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Partial application
|
||||||
|
|
||||||
|
```js
|
||||||
|
const inc = (i) => i + 1;
|
||||||
|
|
||||||
|
const addOneYear = u({ age: increment });
|
||||||
|
const result = addOneYear({ name: "Shannon Barnes", age: 62 });
|
||||||
|
|
||||||
|
expect(result).to.eql({ name: "Shannon Barnes", age: 63 });
|
||||||
|
```
|
||||||
|
|
||||||
|
### `u.freeze(dataIn)`
|
||||||
|
|
||||||
|
Freeze your initial state to protect against mutations. Only performs the freezing in development, and returns the original object unchanged in production.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const state = u.freeze({ someKey: "Some Value" });
|
||||||
|
state.someKey = "Mutate"; // ERROR in development
|
||||||
|
```
|
||||||
|
|
||||||
|
### `u.updateIn(dataIn, path, value)`
|
||||||
|
|
||||||
|
Update a single value with a simple string or array path. Can be use to update nested objects, arrays, or a combination. Can also be used to update every element of a nested array with `'*'`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const result = u.updateIn(
|
||||||
|
{ bunny: { color: "black" } },
|
||||||
|
"bunny.color",
|
||||||
|
"brown"
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(result).to.eql({ bunny: { color: "brown" } });
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
const result = u.updateIn(
|
||||||
|
"0.1.color",
|
||||||
|
"brown"
|
||||||
|
)([[{ color: "blue" }, { color: "red" }], []]);
|
||||||
|
|
||||||
|
expect(result).to.eql([[{ color: "blue" }, { color: "brown" }], []]);
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
const incr = (i) => i + 1;
|
||||||
|
|
||||||
|
const result = u.updateIn("bunny.age", incr)({ bunny: { age: 2 } });
|
||||||
|
|
||||||
|
expect(result).to.eql({ bunny: { age: 3 } });
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
const result = u(
|
||||||
|
{ pets: [{ bunny: { age: 2 } }] }
|
||||||
|
{ pets: u.updateIn([0, "bunny", "age"], 3) },
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(result).to.eql({ pets: [{ bunny: { age: 3 } }] });
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
const result = u.updateIn(
|
||||||
|
"todos.*.done",
|
||||||
|
true
|
||||||
|
)({
|
||||||
|
todos: [{ done: false }, { done: false }],
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(result).to.eql({
|
||||||
|
todos: [{ done: true }, { done: true }],
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### `u.constant(dataIn)`
|
||||||
|
|
||||||
|
Sometimes, you want to replace an object outright rather than merging it.
|
||||||
|
You'll need to use a function that returns the new object.
|
||||||
|
`u.constant` creates that function for you.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const user = {
|
||||||
|
name: "Mitch",
|
||||||
|
favorites: {
|
||||||
|
band: "Nirvana",
|
||||||
|
movie: "The Matrix",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const newFavorites = {
|
||||||
|
band: "Coldplay",
|
||||||
|
};
|
||||||
|
|
||||||
|
const result = u(user, { favorites: u.constant(newFavorites) });
|
||||||
|
|
||||||
|
expect(result).to.eql({ name: "Mitch", favorites: { band: "Coldplay" } });
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
const alwaysFour = u.constant(4);
|
||||||
|
expect(alwaysFour(32)).to.eql(4);
|
||||||
|
```
|
||||||
|
|
||||||
|
### `u.if(dataIn, predicate, updates)`
|
||||||
|
|
||||||
|
Apply `updates` if `predicate` is truthy, or if `predicate` is a function.
|
||||||
|
It evaluates to truthy when called with `object`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
function isEven(x) {
|
||||||
|
return x % 2 === 0;
|
||||||
|
}
|
||||||
|
function increment(x) {
|
||||||
|
return x + 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = u({ value: 2 }, { value: u.if(isEven, increment) });
|
||||||
|
|
||||||
|
expect(result).to.eql({ value: 3 });
|
||||||
|
```
|
||||||
|
|
||||||
|
### `u.filter(arrayIn, predicate)`
|
||||||
|
|
||||||
|
### `u.reject(arrayIn, predicate)`
|
||||||
|
|
||||||
|
### `u.pickBy(objectIn, predicate)`
|
||||||
|
|
||||||
|
### `u.omitBy(objectIn, predicate)`
|
||||||
|
|
||||||
|
### `u.pick(objectIn, keys)`
|
||||||
|
|
||||||
|
### `u.omit(objectIn, keys)`
|
||||||
|
|
||||||
|
Essentially the same as their Remeda counterparts. The difference being
|
||||||
|
that if the transformation results in no change, the original object/array is
|
||||||
|
returned.
|
||||||
|
|
||||||
|
### `u.map(objectIn, updates)`
|
||||||
|
|
||||||
|
Applies the updates on all entries of `objectIn`.
|
||||||
|
|
||||||
|
### `u.mapIf(objectIn, predicate, updates)`
|
||||||
|
|
||||||
|
Shorthand for `u.map( objectIn, u.if(predicate,updates) )`.
|
||||||
|
|
||||||
|
### `u.mapIfElse(objectIn, predicate, updates, updatesElse)`
|
||||||
|
|
||||||
|
Shorthand for `u.map( objectIn, u.ifElse(predicate,updates,updatesElse) )`.
|
||||||
|
|
||||||
|
### `u.matches(dataIn, condition)`
|
||||||
|
|
||||||
|
Do a deep comparison with `condition`, and returns
|
||||||
|
`true` if the `dataIn` object matches.
|
||||||
|
|
||||||
|
Scalar values are verified for equality (i.e., `{foo: 12}`
|
||||||
|
will verify that the object has the prop `foo` set to `12`), and
|
||||||
|
functions are going to be invoked with the object value of the object and
|
||||||
|
expected to return `true` upon matching.
|
||||||
|
|
||||||
|
```js
|
||||||
|
u.matches(
|
||||||
|
{ name: "Bob", age: 32, address: "..." },
|
||||||
|
{
|
||||||
|
name: "Bob",
|
||||||
|
age: (age) => age > 30,
|
||||||
|
}
|
||||||
|
); // true
|
||||||
|
```
|
||||||
|
@ -1,2 +0,0 @@
|
|||||||
- [Getting started](/)
|
|
||||||
- [API](/api)
|
|
@ -1,95 +0,0 @@
|
|||||||
/*!
|
|
||||||
* docsify-namespaced
|
|
||||||
* v0.1.1
|
|
||||||
* https://github.com/palkan/docsify-namespaced
|
|
||||||
* (c) 2020-2021 Vladimir Dementyev <dementiev.vm@gmail.com>
|
|
||||||
* MIT license
|
|
||||||
*/
|
|
||||||
!(function () {
|
|
||||||
"use strict";
|
|
||||||
(window.$docsify = window.$docsify || {}),
|
|
||||||
(window.$docsify.plugins = [
|
|
||||||
function (n, a) {
|
|
||||||
function r(n) {
|
|
||||||
w ? (window.location.hash = n) : (window.location.href = n);
|
|
||||||
}
|
|
||||||
function l(n) {
|
|
||||||
return (n =
|
|
||||||
n || (w ? window.location.hash : window.location.pathname)).split(
|
|
||||||
/\//
|
|
||||||
);
|
|
||||||
}
|
|
||||||
function u(n, e, o, t) {
|
|
||||||
e.values.includes(n[o + 1])
|
|
||||||
? t
|
|
||||||
? (n[o + 1] = t)
|
|
||||||
: n.splice(o + 1, 1)
|
|
||||||
: t && n.splice(o + 1, 0, t);
|
|
||||||
}
|
|
||||||
var s,
|
|
||||||
f,
|
|
||||||
d,
|
|
||||||
w = !0;
|
|
||||||
n.mounted(function () {
|
|
||||||
var n = (s = a.config.namespaces).map(function (n) {
|
|
||||||
var e = "(?:(".concat(n.values.join("|"), ")/)");
|
|
||||||
return n.optional && (e += "?"), e;
|
|
||||||
});
|
|
||||||
(f = new RegExp("^#?/".concat(n.join("")))),
|
|
||||||
(w = "hash" === a.router.mode);
|
|
||||||
var o = l(),
|
|
||||||
e = o.join("/"),
|
|
||||||
t = 2 === o.length && "" === o[1];
|
|
||||||
s.forEach(function (n, e) {
|
|
||||||
n.selector &&
|
|
||||||
((n.selectElement = Docsify.dom.find(n.selector)),
|
|
||||||
n.default &&
|
|
||||||
((n.selectElement.value = n.default),
|
|
||||||
n.values.includes(o[e + 1]) || u(o, n, e, n.default)),
|
|
||||||
Docsify.dom.on(n.selectElement, "click", function (n) {
|
|
||||||
return n.stopPropagation();
|
|
||||||
}),
|
|
||||||
Docsify.dom.on(n.selectElement, "change", function (n) {
|
|
||||||
return (function (n, e) {
|
|
||||||
var o = l();
|
|
||||||
u(o, s[e], e, n);
|
|
||||||
var t = o.join("/");
|
|
||||||
r(t);
|
|
||||||
})(n.target.value, e);
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
var c = a.compiler.sidebar;
|
|
||||||
a.compiler.sidebar = function () {
|
|
||||||
return (function (n) {
|
|
||||||
if (!d) return n;
|
|
||||||
var c = new RegExp("^" + d);
|
|
||||||
return (n = n.replace(
|
|
||||||
/(href=['"])(#?[^'"]+)(["'])/g,
|
|
||||||
function (n, e, o, t) {
|
|
||||||
console.log('!!!',o);
|
|
||||||
return o.match(c)
|
|
||||||
? n
|
|
||||||
: [e, (o = o.replace(/^#?\//, d)), t].join("");
|
|
||||||
}
|
|
||||||
));
|
|
||||||
})(c.apply(this, arguments));
|
|
||||||
};
|
|
||||||
var i = o.join("/");
|
|
||||||
t && i !== e && r(i);
|
|
||||||
}),
|
|
||||||
n.afterEach(function (n, e) {
|
|
||||||
var o = (w ? window.location.hash : window.location.pathname).match(
|
|
||||||
f
|
|
||||||
);
|
|
||||||
s.forEach(function (n, e) {
|
|
||||||
n.selectElement &&
|
|
||||||
(n.selectElement.value = (o && o[e + 1]) || "");
|
|
||||||
}),
|
|
||||||
(d = o ? o[0] : "/"),
|
|
||||||
(a.config.currentNamespace = d),
|
|
||||||
e(n);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
].concat(window.$docsify.plugins || []));
|
|
||||||
})();
|
|
||||||
//# sourceMappingURL=docsify-namespaced.min.js.map
|
|
@ -1,60 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<title>Document</title>
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
||||||
<meta name="description" content="Description" />
|
|
||||||
<meta
|
|
||||||
name="viewport"
|
|
||||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
|
|
||||||
/>
|
|
||||||
<link rel="stylesheet" href="vendor/themes/vue.css" />
|
|
||||||
<style>
|
|
||||||
div.info {
|
|
||||||
background: lightgreen;
|
|
||||||
margin: 0px 2em;
|
|
||||||
padding: 0.25em 1em;
|
|
||||||
font-weight: normal;
|
|
||||||
border-radius: 1em;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
div.info h4 {
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script>
|
|
||||||
window.$docsify = {
|
|
||||||
loadNavbar: true,
|
|
||||||
name: "updeep-remeda",
|
|
||||||
repo: "https://github.com/yanick/updeep-remeda",
|
|
||||||
alias: {
|
|
||||||
"/api": "/latest/api",
|
|
||||||
},
|
|
||||||
namespaces: [
|
|
||||||
{
|
|
||||||
id: "version",
|
|
||||||
values: ["latest"],
|
|
||||||
optional: true,
|
|
||||||
default: "latest",
|
|
||||||
selector: "#version-selector",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
name:
|
|
||||||
'<a id="home-link" class="app-name-link" data-nosearch href="/">updeep-remeda</a> ' +
|
|
||||||
'<select id="version-selector" name="version">' +
|
|
||||||
'<option value="latest">latest</value>' +
|
|
||||||
"</select>",
|
|
||||||
// disable automatic linking to avoid navigating when clicking on select
|
|
||||||
nameLink: false,
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<script src="docsify-namespaced.js"></script>
|
|
||||||
<script src="vendor/docsify.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
@ -1,108 +0,0 @@
|
|||||||
# updeep-remeda
|
|
||||||
|
|
||||||
> Easily update nested frozen objects and arrays in a declarative and immutable
|
|
||||||
> manner.
|
|
||||||
|
|
||||||
## About
|
|
||||||
|
|
||||||
<div class="info">
|
|
||||||
<h4>💡 Info</h4>
|
|
||||||
|
|
||||||
This is a fork of the main updeep package. For ease of reading — not to
|
|
||||||
mention ease of shamelessly lifting large pieces of the original
|
|
||||||
documentation — in this documentation all mentions of `updeep` refers to this
|
|
||||||
fork.
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
updeep makes updating deeply nested objects/arrays painless by allowing you to
|
|
||||||
declare the updates you would like to make and it will take care of the rest. It
|
|
||||||
will recursively return the same instance if no changes have been made, making
|
|
||||||
it ideal for using reference equality checks to detect changes.
|
|
||||||
|
|
||||||
Because of this, everything returned by updeep is frozen. Not only that, but
|
|
||||||
updeep assumes that every object passed in to update is immutable, so it may
|
|
||||||
freeze objects passed in as well. Note that the freezing only happens in
|
|
||||||
development.
|
|
||||||
|
|
||||||
This fork of updeep requires Remeda, but works very well with any other utility function ([lodash], [Ramda], etc).
|
|
||||||
|
|
||||||
## Differences with the original Updeep
|
|
||||||
|
|
||||||
- Under the hood, the use of lodash has
|
|
||||||
been replaced by Remeda (for better type support and tree-shaking abilities).
|
|
||||||
|
|
||||||
- The codebase has been ported to TypeScript (mostly for the lulz).
|
|
||||||
|
|
||||||
- The order of parameters in the non-curryied invocation of functions has been modified. In the original updeep the input object is the last parameter, whereas here it's the first.
|
|
||||||
|
|
||||||
```js
|
|
||||||
// original updeep
|
|
||||||
const dataIn = { a: 1, b: 2 };
|
|
||||||
|
|
||||||
let dataOut = u({ c: 3 }, dataIn); // simple call
|
|
||||||
dataOut = u({ c: 3 })(dataIn); // curried
|
|
||||||
|
|
||||||
// updeep-remeda
|
|
||||||
dataOut = u(dataIn, { c: 3 }); // simple call
|
|
||||||
dataOut = u({ c: 3 })(dataIn); // curried
|
|
||||||
```
|
|
||||||
|
|
||||||
- `withDefault` has been removed as the behavior can be implemented using
|
|
||||||
Remeda's `pipe`, or a simple `??`.
|
|
||||||
|
|
||||||
- `u.omitted` has been renamed `u.skip`.
|
|
||||||
|
|
||||||
## Installation
|
|
||||||
|
|
||||||
```bash
|
|
||||||
$ npm install @yanick/updeep-remeda
|
|
||||||
# or
|
|
||||||
$ pnpm install @yanick/updeep-remeda
|
|
||||||
```
|
|
||||||
|
|
||||||
## Full example
|
|
||||||
|
|
||||||
```js
|
|
||||||
import u from "@yanick/updeep-remeda";
|
|
||||||
|
|
||||||
const person = {
|
|
||||||
name: { first: "Bill", last: "Sagat" },
|
|
||||||
children: [
|
|
||||||
{ name: "Mary-Kate", age: 7 },
|
|
||||||
{ name: "Ashley", age: 7 },
|
|
||||||
],
|
|
||||||
todo: ["Be funny", "Manage household"],
|
|
||||||
email: "bill@example.com",
|
|
||||||
version: 1,
|
|
||||||
};
|
|
||||||
|
|
||||||
const inc = (i) => i + 1;
|
|
||||||
|
|
||||||
const eq = (x) => (y) => x === y;
|
|
||||||
|
|
||||||
const newPerson = u(person, {
|
|
||||||
// Change first name
|
|
||||||
name: { first: "Bob" },
|
|
||||||
// Increment all children's ages
|
|
||||||
children: u.map({ age: inc }),
|
|
||||||
// Update email
|
|
||||||
email: "bob@example.com",
|
|
||||||
// Remove todo
|
|
||||||
todo: u.reject(eq("Be funny")),
|
|
||||||
// Increment version
|
|
||||||
version: inc,
|
|
||||||
});
|
|
||||||
// => {
|
|
||||||
// name: { first: 'Bob', last: 'Sagat' },
|
|
||||||
// children: [
|
|
||||||
// { name: 'Mary-Kate', age: 8 },
|
|
||||||
// { name: 'Ashley', age: 8 }
|
|
||||||
// ],
|
|
||||||
// todo: [
|
|
||||||
// 'Manage household'
|
|
||||||
// ],
|
|
||||||
// email: 'bob@example.com',
|
|
||||||
// version: 2
|
|
||||||
//}
|
|
||||||
```
|
|
@ -1,2 +0,0 @@
|
|||||||
- [Getting started](/latest/)
|
|
||||||
- [API](/latest/api)
|
|
@ -1,326 +0,0 @@
|
|||||||
# API
|
|
||||||
|
|
||||||
<div class="info">
|
|
||||||
<h4>💡 Info</h4>
|
|
||||||
|
|
||||||
All functions are curried, Remeda-style, so if you see `f(dataIn, ...others)`, it can be called with either `f(dataIn, ...others)` or `f(...others)(dataIn)`.
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Importing
|
|
||||||
|
|
||||||
`updeep-remeda` exports a default function that is an alias to `u.update` and
|
|
||||||
has all the other functions available as props.
|
|
||||||
|
|
||||||
```
|
|
||||||
import u from '@yanick/updeep-remeda';
|
|
||||||
|
|
||||||
const foo = u({a:1}, { a: x => x + 1 });
|
|
||||||
|
|
||||||
const bar = u.updateIn({ a: { b: 2 } }, 'a.b', 3 );
|
|
||||||
```
|
|
||||||
|
|
||||||
Or you can import the functions piecemeal:
|
|
||||||
|
|
||||||
```
|
|
||||||
import { updateIn, omit } from '@yanick/updeep-remeda';
|
|
||||||
```
|
|
||||||
|
|
||||||
## `u(dataIn, updates)`
|
|
||||||
|
|
||||||
## `u.update(dataIn, updates)`
|
|
||||||
|
|
||||||
Update as many values as you want, as deeply as you want. The `updates` parameter can either be an object, a function, or a value. Everything returned from `u` is frozen recursively.
|
|
||||||
|
|
||||||
If `updates` is an object, for each key/value, it will apply the updates specified in the value to `object[key]`.
|
|
||||||
|
|
||||||
If `updates` is a function, it will call the function with `object` and return the value.
|
|
||||||
|
|
||||||
If `updates` is a value, it will return that value.
|
|
||||||
|
|
||||||
Sometimes, you may want to set an entire object to a property, or a function. In that case, you'll need to use a function to return that value, otherwise it would be interpreted as an update. Ex. `function() { return { a: 0 }; }`.
|
|
||||||
|
|
||||||
Also available at `u.update(...)`.
|
|
||||||
|
|
||||||
### Simple update
|
|
||||||
|
|
||||||
Object properties:
|
|
||||||
|
|
||||||
```js
|
|
||||||
const person = {
|
|
||||||
name: {
|
|
||||||
first: "Jane",
|
|
||||||
last: "West",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const result = u(person, { name: { first: "Susan" } });
|
|
||||||
|
|
||||||
expect(result).to.eql({ name: { first: "Susan", last: "West" } });
|
|
||||||
```
|
|
||||||
|
|
||||||
Array elements:
|
|
||||||
|
|
||||||
```js
|
|
||||||
const scoreboard = {
|
|
||||||
scores: [12, 28],
|
|
||||||
};
|
|
||||||
|
|
||||||
const result = u(scoreboard, { scores: { 1: 36 } });
|
|
||||||
|
|
||||||
expect(result).to.eql({ scores: [12, 36] });
|
|
||||||
```
|
|
||||||
|
|
||||||
### Multiple updates
|
|
||||||
|
|
||||||
```js
|
|
||||||
const person = {
|
|
||||||
name: {
|
|
||||||
first: "Mike",
|
|
||||||
last: "Smith",
|
|
||||||
},
|
|
||||||
scores: [12, 28],
|
|
||||||
};
|
|
||||||
|
|
||||||
const result = u(person, { name: { last: "Jones" }, scores: { 1: 36 } });
|
|
||||||
|
|
||||||
expect(result).to.eql({
|
|
||||||
name: { first: "Mike", last: "Jones" },
|
|
||||||
scores: [12, 36],
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### Use a function
|
|
||||||
|
|
||||||
```js
|
|
||||||
const increment = (i) => i + 1;
|
|
||||||
|
|
||||||
var scoreboard = {
|
|
||||||
scores: {
|
|
||||||
team1: 0,
|
|
||||||
team2: 0,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const result = u(scoreboard, { scores: { team2: increment } });
|
|
||||||
|
|
||||||
expect(result).to.eql({ scores: { team1: 0, team2: 1 } });
|
|
||||||
```
|
|
||||||
|
|
||||||
### Array Manipulation
|
|
||||||
|
|
||||||
Non-trivial array manipulations, such as element removal/insertion/sorting, can be implemented with functions. Because there are so many possible manipulations, we don't provide any helpers and leave this up to you. Simply ensure your function is pure and does not mutate its arguments.
|
|
||||||
|
|
||||||
```js
|
|
||||||
function addTodo(todos) {
|
|
||||||
return [].concat(todos, [{ done: false }]);
|
|
||||||
}
|
|
||||||
|
|
||||||
const state = {
|
|
||||||
todos: [{ done: false }, { done: false }],
|
|
||||||
};
|
|
||||||
|
|
||||||
const result = u({ todos: addTodo }, state);
|
|
||||||
|
|
||||||
expect(result).to.eql({
|
|
||||||
todos: [{ done: false }, { done: false }, { done: false }],
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
Remeda is one of the many libraries providing good utility functions for
|
|
||||||
such manipulations.
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { reject, concat, prop } from "remeda";
|
|
||||||
|
|
||||||
let state = {
|
|
||||||
todos: [{ done: true }, { done: false }],
|
|
||||||
};
|
|
||||||
|
|
||||||
// add a new todo
|
|
||||||
state = u(state, { todos: concat({ done: false }) });
|
|
||||||
expect(state).to.eql({
|
|
||||||
todos: [{ done: true }, { done: false }, { done: false }],
|
|
||||||
});
|
|
||||||
|
|
||||||
// remove all done todos
|
|
||||||
state = u(state, { todos: reject(prop("done")) });
|
|
||||||
expect(state).to.eql({ todos: [{ done: false }, { done: false }] });
|
|
||||||
```
|
|
||||||
|
|
||||||
### Default input data
|
|
||||||
|
|
||||||
When the input data is null or undefined, updeep uses a empty plain object.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const result = u(null, { foo: "bar" });
|
|
||||||
expect(result).to.eql({ foo: "bar" });
|
|
||||||
```
|
|
||||||
|
|
||||||
### Partial application
|
|
||||||
|
|
||||||
```js
|
|
||||||
const inc = (i) => i + 1;
|
|
||||||
|
|
||||||
const addOneYear = u({ age: increment });
|
|
||||||
const result = addOneYear({ name: "Shannon Barnes", age: 62 });
|
|
||||||
|
|
||||||
expect(result).to.eql({ name: "Shannon Barnes", age: 63 });
|
|
||||||
```
|
|
||||||
|
|
||||||
## `u.freeze(dataIn)`
|
|
||||||
|
|
||||||
Freeze your initial state to protect against mutations. Only performs the freezing in development, and returns the original object unchanged in production.
|
|
||||||
|
|
||||||
```js
|
|
||||||
const state = u.freeze({ someKey: "Some Value" });
|
|
||||||
state.someKey = "Mutate"; // ERROR in development
|
|
||||||
```
|
|
||||||
|
|
||||||
## `u.updateIn(dataIn, path, value)`
|
|
||||||
|
|
||||||
Update a single value with a simple string or array path. Can be use to update nested objects, arrays, or a combination. Can also be used to update every element of a nested array with `'*'`.
|
|
||||||
|
|
||||||
```js
|
|
||||||
const result = u.updateIn(
|
|
||||||
{ bunny: { color: "black" } },
|
|
||||||
"bunny.color",
|
|
||||||
"brown"
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(result).to.eql({ bunny: { color: "brown" } });
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
const result = u.updateIn(
|
|
||||||
"0.1.color",
|
|
||||||
"brown"
|
|
||||||
)([[{ color: "blue" }, { color: "red" }], []]);
|
|
||||||
|
|
||||||
expect(result).to.eql([[{ color: "blue" }, { color: "brown" }], []]);
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
const incr = (i) => i + 1;
|
|
||||||
|
|
||||||
const result = u.updateIn("bunny.age", incr)({ bunny: { age: 2 } });
|
|
||||||
|
|
||||||
expect(result).to.eql({ bunny: { age: 3 } });
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
const result = u(
|
|
||||||
{ pets: [{ bunny: { age: 2 } }] }
|
|
||||||
{ pets: u.updateIn([0, "bunny", "age"], 3) },
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(result).to.eql({ pets: [{ bunny: { age: 3 } }] });
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
const result = u.updateIn(
|
|
||||||
"todos.*.done",
|
|
||||||
true
|
|
||||||
)({
|
|
||||||
todos: [{ done: false }, { done: false }],
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(result).to.eql({
|
|
||||||
todos: [{ done: true }, { done: true }],
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## `u.constant(dataIn)`
|
|
||||||
|
|
||||||
Sometimes, you want to replace an object outright rather than merging it.
|
|
||||||
You'll need to use a function that returns the new object.
|
|
||||||
`u.constant` creates that function for you.
|
|
||||||
|
|
||||||
```js
|
|
||||||
const user = {
|
|
||||||
name: "Mitch",
|
|
||||||
favorites: {
|
|
||||||
band: "Nirvana",
|
|
||||||
movie: "The Matrix",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const newFavorites = {
|
|
||||||
band: "Coldplay",
|
|
||||||
};
|
|
||||||
|
|
||||||
const result = u(user, { favorites: u.constant(newFavorites) });
|
|
||||||
|
|
||||||
expect(result).to.eql({ name: "Mitch", favorites: { band: "Coldplay" } });
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
const alwaysFour = u.constant(4);
|
|
||||||
expect(alwaysFour(32)).to.eql(4);
|
|
||||||
```
|
|
||||||
|
|
||||||
## `u.if(dataIn, predicate, updates)`
|
|
||||||
|
|
||||||
Apply `updates` if `predicate` is truthy, or if `predicate` is a function.
|
|
||||||
It evaluates to truthy when called with `object`.
|
|
||||||
|
|
||||||
```js
|
|
||||||
function isEven(x) {
|
|
||||||
return x % 2 === 0;
|
|
||||||
}
|
|
||||||
function increment(x) {
|
|
||||||
return x + 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = u({ value: 2 }, { value: u.if(isEven, increment) });
|
|
||||||
|
|
||||||
expect(result).to.eql({ value: 3 });
|
|
||||||
```
|
|
||||||
|
|
||||||
## `u.filter(arrayIn, predicate)`
|
|
||||||
|
|
||||||
## `u.reject(arrayIn, predicate)`
|
|
||||||
|
|
||||||
## `u.pickBy(objectIn, predicate)`
|
|
||||||
|
|
||||||
## `u.omitBy(objectIn, predicate)`
|
|
||||||
|
|
||||||
## `u.pick(objectIn, keys)`
|
|
||||||
|
|
||||||
## `u.omit(objectIn, keys)`
|
|
||||||
|
|
||||||
Essentially the same as their Remeda counterparts. The difference being
|
|
||||||
that if the transformation results in no change, the original object/array is
|
|
||||||
returned.
|
|
||||||
|
|
||||||
## `u.map(objectIn, updates)`
|
|
||||||
|
|
||||||
Applies the updates on all entries of `objectIn`.
|
|
||||||
|
|
||||||
## `u.mapIf(objectIn, predicate, updates)`
|
|
||||||
|
|
||||||
Shorthand for `u.map( objectIn, u.if(predicate,updates) )`.
|
|
||||||
|
|
||||||
## `u.mapIfElse(objectIn, predicate, updates, updatesElse)`
|
|
||||||
|
|
||||||
Shorthand for `u.map( objectIn, u.ifElse(predicate,updates,updatesElse) )`.
|
|
||||||
|
|
||||||
## `u.matches(dataIn, condition)`
|
|
||||||
|
|
||||||
Do a deep comparison with `condition`, and returns
|
|
||||||
`true` if the `dataIn` object matches.
|
|
||||||
|
|
||||||
Scalar values are verified for equality (i.e., `{foo: 12}`
|
|
||||||
will verify that the object has the prop `foo` set to `12`), and
|
|
||||||
functions are going to be invoked with the object value of the object and
|
|
||||||
expected to return `true` upon matching.
|
|
||||||
|
|
||||||
```js
|
|
||||||
u.matches(
|
|
||||||
{ name: "Bob", age: 32, address: "..." },
|
|
||||||
{
|
|
||||||
name: "Bob",
|
|
||||||
age: (age) => age > 30,
|
|
||||||
}
|
|
||||||
); // true
|
|
||||||
```
|
|
1
docs/vendor/docsify.js
vendored
1
docs/vendor/docsify.js
vendored
File diff suppressed because one or more lines are too long
1
docs/vendor/themes/vue.css
vendored
1
docs/vendor/themes/vue.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user