yanick/updeep
1
0
Fork 0
Code Issues 5 Pull Requests Projects Releases Wiki Activity
bc50f97b4f
updeep/docs/latest/get-started.html

257 lines
28 KiB
HTML
Raw Normal View History

github page
2023-01-10 18:26:04 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="../favicon.png" />
<meta name="viewport" content="width=device-width" />
<script>
const key = 'svelteness::color-scheme';
const scheme = localStorage[key];
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (scheme === 'dark' || (scheme !== 'light' && prefersDark)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
</script>
<meta http-equiv="content-security-policy" content="">
<link href="../_app/immutable/assets/_layout-d4f4ab95.css" rel="stylesheet">
<link href="../_app/immutable/assets/Info-eb9b7651.css" rel="stylesheet">
<link rel="modulepreload" href="../_app/immutable/start-4894d21d.js">
<link rel="modulepreload" href="../_app/immutable/chunks/singletons-79165f10.js">
<link rel="modulepreload" href="../_app/immutable/chunks/control-f5b05b5f.js">
<link rel="modulepreload" href="../_app/immutable/components/pages/_layout.svelte-ac40f340.js">
<link rel="modulepreload" href="../_app/immutable/chunks/contexts-c54c563b.js">
<link rel="modulepreload" href="../_app/immutable/chunks/stores-1c9d0b64.js">
<link rel="modulepreload" href="../_app/immutable/modules/pages/_layout.js-82ef414d.js">
<link rel="modulepreload" href="../_app/immutable/chunks/_layout-32f74dae.js">
<link rel="modulepreload" href="../_app/immutable/components/pages/latest/get-started/_page.md-5c5fe5e6.js">
<link rel="modulepreload" href="../_app/immutable/chunks/Info-8cb253a1.js">
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">
<div class="kit-docs bg-gray-body min-h-full min-w-full h-full transition-transform duration-150 ease-out" style="font-family: var(--kd-font-family-sans, inherit); --kd--navbar-height: calc(var(--kd-navbar-height) + var(--kd-breadcrumbs-height));"><div class="fixed top-0 z-30 w-full flex-none transform-gpu transition-transform duration-150 ease-out supports-backdrop-blur:bg-white/60 bg-gray-200/95 backdrop-blur dark:bg-gray-800/60 translate-y-0" style="border-bottom: var(--kd-navbar-border-bottom);"><div class="flex w-full flex-col items-center justify-center mx-auto max-w-[var(--kd-navbar-max-width)] p-[var(--kd-navbar-padding)] h-[var(--kd--navbar-height)]"><div class="flex w-full items-center">
<div class="flex-1"></div>
<div class="992:hidden -mr-2 flex items-center">
<div class="relative inline-block text-left not-prose"><button id="popover-button-2" type="button" class="inline-flex w-full justify-center rounded-md p-2 text-lg font-medium text-gray-soft hover:text-gray-inverse" aria-controls="popover-2" aria-expanded="false" aria-haspopup="true"><svg viewBox="0 0 24 24" width="30" height="30"><!-- HTML_TAG_START --><path fill="currentColor" d="M18 18v2H6v-2h12zm3-7v2H3v-2h18zm-3-7v2H6V4h12z"/><!-- HTML_TAG_END --></svg>
<span class="sr-only">Main navigation menu</span>
</button>
<div class="fixed top-0 left-0 bg-black/40 backdrop-blur-sm dark:bg-gray-700/80 transition-opacity duration-75 pointer-events-auto z-40 w-screen h-screen opacity-0 invisible"></div>
<div hidden></div>
</div></div>
<div class="992:flex 992:items-center hidden"><nav><ul class="flex items-center space-x-8 text-lg font-medium"><li class="mt-4 first:mt-0 992:mt-0"><a class="p-1 border-b hover:border-b-2 border-brand text-gray-inverse" href="/latest/get-started">Get started</a></li><li class="mt-4 first:mt-0 992:mt-0"><a class="p-1 text-gray-soft hover:text-gray-inverse" href="/latest/api">API</a></li></ul></nav>
<div class="border-gray-divider ml-6 mr-2.5 h-7 w-2 border-l-[1.5px]"></div>
<div class="hidden 992:flex items-center">
<div class="relative inline-block text-left not-prose"><button id="menu-button-2" type="button" class="inline-flex w-full justify-center rounded-md p-2 text-lg font-medium text-gray-soft hover:text-gray-inverse" aria-controls="menu-2" aria-expanded="false" aria-haspopup="true"><svg viewBox="0 0 24 24" width="1.2em" height="1.2em" class="h-6 w-6"><!-- HTML_TAG_START --><path fill="currentColor" d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05L3.515 4.93zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414l-2.121-2.121zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414l2.121-2.121zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414l2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/><!-- HTML_TAG_END --></svg>
<span class="sr-only">Color Scheme</span>
</button>
<div hidden></div>
</div></div></div></div>
<div class="border-gray-divider 992:hidden flex w-full items-center mt-4 pt-4 border-t"><button id="main-sidebar-button" type="button" class="text-gray-soft hover:text-gray-inverse inline-flex justify-center rounded-md p-2 text-sm font-medium" aria-controls="main-sidebar" aria-expanded="false" aria-haspopup="true"><span class="sr-only">Open main sidebar</span>
<svg viewBox="0 0 24 24" width="28" height="28"><!-- HTML_TAG_START --><path fill="currentColor" d="M21 18v2H3v-2h18zM17.05 3.55L22 8.5l-4.95 4.95v-9.9zM12 11v2H3v-2h9zm0-7v2H3V4h9z"/><!-- HTML_TAG_END --></svg></button>
<ol class="text-md text-gray-soft flex items-center whitespace-nowrap leading-6 mt-px ml-2.5">
<li class="truncate font-semibold text-slate-900 dark:text-slate-200">Get started</li></ol></div>
</div></div>
<div class="mx-auto w-full flex flex-row min-h-full max-w-[var(--kd-content-max-width)] pt-[var(--kd--navbar-height)] z-20"><aside id="main-sidebar" class="sidebar self-start fixed top-0 left-0 transform bg-gray-body z-50 border-gray-divider border-r -translate-x-full transform transition-transform duration-200 ease-out will-change-transform max-h-screen min-h-screen min-w-[var(--kd-sidebar-min-width)] max-w-[var(--kd-sidebar-max-width)] 992:translate-x-0 922:block 992:sticky 992:z-0 overflow-y-auto p-[var(--kd-sidebar-padding)] 992:top-[var(--kd--navbar-height)] 992:min-h-[calc(100vh-var(--kd--navbar-height))] 992:max-h-[calc(100vh-var(--kd--navbar-height))]" role="dialog" aria-modal="true" style=""><div class="992:hidden sticky top-0 left-0 flex items-center"><div class="flex-1"></div>
<button class="text-gray-soft hover:text-gray-inverse p-4 -mx-6 pointer-events-none"><svg viewBox="0 0 24 24" width="24" height="24"><!-- HTML_TAG_START --><path fill="currentColor" d="m12 10.586l4.95-4.95l1.414 1.414l-4.95 4.95l4.95 4.95l-1.414 1.414l-4.95-4.95l-4.95 4.95l-1.414-1.414l4.95-4.95l-4.95-4.95L7.05 5.636z"/><!-- HTML_TAG_END --></svg>
<span class="sr-only">Close sidebar</span></button></div>
<nav class="992:px-1">
<ul class="mt-8 pb-28 992:pb-0">
<li class="992:mt-10 mt-12 first:mt-0"><h5 class="text-gray-strong 992:mb-3 mb-8 text-lg font-semibold">
</h5>
<ul class="border-gray-divider space-y-3 border-l"><li class="first:mt-6"><a class="992:py-1.5 -ml-px flex items-center border-l-2 py-2 pl-4 text-brand font-semibold" href="/latest/get-started" style="border-color: var(--kd-sidebar-border-active);">
Get started
</a>
</li><li class="first:mt-6"><a class="992:py-1.5 -ml-px flex items-center border-l-2 py-2 pl-4 hover:border-gray-inverse text-gray-soft hover:text-gray-inverse border-transparent font-normal" href="/latest/api" style="">
API
</a>
</li></ul>
</li></ul>
</nav></aside>
<div class="992:hidden z-40"><div class="fixed top-0 left-0 bg-black/40 backdrop-blur-sm dark:bg-gray-700/80 transition-opacity duration-75 pointer-events-auto z-40 w-screen h-screen opacity-0 invisible"></div></div>
<main class="w-full overflow-x-hidden 992:min-h-[calc(100vh-var(--kd--navbar-height))] min-h-[calc(100vh-var(--kd--navbar-height))] px-8 992:px-16 pt-8" style="max-width: var(--kd-main-max-width, var(--kd-article-max-width));">
<article class="markdown prose dark:prose-invert z-10 max-w-[var(--kd-article-max-width)]">
<h1>updeep-remeda</h1>
<blockquote><p>Easily update nested frozen objects and arrays in a declarative and immutable
manner.</p></blockquote>
<h2 id="about" tabindex="-1">
<a class="header-anchor" href="#about" aria-hidden="true">#</a> About</h2>
<div class="svelte-ns3bhs"><h4 class="svelte-ns3bhs">💡 Info</h4>
<p>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 <code>updeep</code> refers to this
fork.</p>
</div>
<p>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.</p>
<p>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.</p>
<p>This fork of updeep requires Remeda, but works very well with any other utility function ([lodash], [Ramda], etc).</p>
<h2 id="differences-with-the-original-updeep" tabindex="-1">
<a class="header-anchor" href="#differences-with-the-original-updeep" aria-hidden="true">#</a> Differences with the original Updeep</h2>
<ul><li><p>Under the hood, the use of lodash has
been replaced by Remeda (for better type support and tree-shaking abilities).</p></li>
<li><p>The codebase has been ported to TypeScript (mostly for the lulz).</p></li>
<li><p>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&#39;s the first.</p></li></ul>
<div class="code-fence overflow-y-auto relative max-h-[60vh] 576:max-h-[32rem] my-8 rounded-md shadow-lg mx-auto border border-gray-divider lang-javascript ext-js" style="background-color: var(--kd-code-fence-bg);">
<div class="code relative z-0 overflow-hidden"><div class=""><!-- HTML_TAG_START --><pre><code><span class="line"><span style="color: #676E95">// original updeep</span></span>
<span class="line"><span style="color: #C792EA">const</span><span style="color: #A6ACCD"> dataIn </span><span style="color: #89DDFF">=</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">{</span><span style="color: #A6ACCD"> </span><span style="color: #F07178">a</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> </span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">,</span><span style="color: #A6ACCD"> </span><span style="color: #F07178">b</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> </span><span style="color: #F78C6C">2</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #C792EA">let</span><span style="color: #A6ACCD"> dataOut </span><span style="color: #89DDFF">=</span><span style="color: #A6ACCD"> </span><span style="color: #82AAFF">u</span><span style="color: #A6ACCD">(</span><span style="color: #89DDFF">{</span><span style="color: #A6ACCD"> </span><span style="color: #F07178">c</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> </span><span style="color: #F78C6C">3</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">},</span><span style="color: #A6ACCD"> dataIn)</span><span style="color: #89DDFF">;</span><span style="color: #A6ACCD"> </span><span style="color: #676E95">// simple call</span></span>
<span class="line"><span style="color: #A6ACCD">dataOut </span><span style="color: #89DDFF">=</span><span style="color: #A6ACCD"> </span><span style="color: #82AAFF">u</span><span style="color: #A6ACCD">(</span><span style="color: #89DDFF">{</span><span style="color: #A6ACCD"> </span><span style="color: #F07178">c</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> </span><span style="color: #F78C6C">3</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">}</span><span style="color: #A6ACCD">)(dataIn)</span><span style="color: #89DDFF">;</span><span style="color: #A6ACCD"> </span><span style="color: #676E95">// curried</span></span>
<span class="line"></span>
<span class="line"><span style="color: #676E95">// updeep-remeda</span></span>
<span class="line"><span style="color: #A6ACCD">dataOut </span><span style="color: #89DDFF">=</span><span style="color: #A6ACCD"> </span><span style="color: #82AAFF">u</span><span style="color: #A6ACCD">(dataIn</span><span style="color: #89DDFF">,</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">{</span><span style="color: #A6ACCD"> </span><span style="color: #F07178">c</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> </span><span style="color: #F78C6C">3</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">}</span><span style="color: #A6ACCD">)</span><span style="color: #89DDFF">;</span><span style="color: #A6ACCD"> </span><span style="color: #676E95">// simple call</span></span>
<span class="line"><span style="color: #A6ACCD">dataOut </span><span style="color: #89DDFF">=</span><span style="color: #A6ACCD"> </span><span style="color: #82AAFF">u</span><span style="color: #A6ACCD">(</span><span style="color: #89DDFF">{</span><span style="color: #A6ACCD"> </span><span style="color: #F07178">c</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> </span><span style="color: #F78C6C">3</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">}</span><span style="color: #A6ACCD">)(dataIn)</span><span style="color: #89DDFF">;</span><span style="color: #A6ACCD"> </span><span style="color: #676E95">// curried</span></span>
<span class="line"></span></code></pre><!-- HTML_TAG_END --></div>
</div></div><ul><li><p><code>withDefault</code> has been removed as the behavior can be implemented using
Remeda&#39;s <code>pipe</code>, or a simple <code>??</code>.</p></li>
<li><p><code>u.omitted</code> has been renamed <code>u.skip</code>.</p></li></ul>
<h2 id="installation" tabindex="-1">
<a class="header-anchor" href="#installation" aria-hidden="true">#</a> Installation</h2>
<div class="code-fence overflow-y-auto relative max-h-[60vh] 576:max-h-[32rem] my-8 rounded-md shadow-lg mx-auto border border-gray-divider lang-bash ext-sh" style="background-color: var(--kd-code-fence-bg);">
<div class="code relative z-0 overflow-hidden"><div class=""><!-- HTML_TAG_START --><pre><code><span class="line"><span style="color: #A6ACCD">$ npm install @yanick/updeep-remeda</span></span>
<span class="line"><span style="color: #676E95"># or</span></span>
<span class="line"><span style="color: #A6ACCD">$ pnpm install @yanick/updeep-remeda</span></span>
<span class="line"></span></code></pre><!-- HTML_TAG_END --></div>
</div></div><h2 id="full-example" tabindex="-1">
<a class="header-anchor" href="#full-example" aria-hidden="true">#</a> Full example</h2>
<div class="code-fence overflow-y-auto relative max-h-[60vh] 576:max-h-[32rem] my-8 rounded-md shadow-lg mx-auto border border-gray-divider lang-javascript ext-js" style="background-color: var(--kd-code-fence-bg);">
<div class="code relative z-0 overflow-hidden"><div class=""><!-- HTML_TAG_START --><pre><code><span class="line"><span style="color: #89DDFF">import</span><span style="color: #A6ACCD"> u </span><span style="color: #89DDFF">from</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">&quot;</span><span style="color: #C3E88D">@yanick/updeep-remeda</span><span style="color: #89DDFF">&quot;</span><span style="color: #89DDFF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #C792EA">const</span><span style="color: #A6ACCD"> person </span><span style="color: #89DDFF">=</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #A6ACCD"> </span><span style="color: #F07178">name</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">{</span><span style="color: #A6ACCD"> </span><span style="color: #F07178">first</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">&quot;</span><span style="color: #C3E88D">Bill</span><span style="color: #89DDFF">&quot;</span><span style="color: #89DDFF">,</span><span style="color: #A6ACCD"> </span><span style="color: #F07178">last</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">&quot;</span><span style="color: #C3E88D">Sagat</span><span style="color: #89DDFF">&quot;</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">},</span></span>
<span class="line"><span style="color: #A6ACCD"> </span><span style="color: #F07178">children</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> [</span></span>
<span class="line"><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">{</span><span style="color: #A6ACCD"> </span><span style="color: #F07178">name</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">&quot;</span><span style="color: #C3E88D">Mary-Kate</span><span style="color: #89DDFF">&quot;</span><span style="color: #89DDFF">,</span><span style="color: #A6ACCD"> </span><span style="color: #F07178">age</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> </span><span style="color: #F78C6C">7</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">},</span></span>
<span class="line"><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">{</span><span style="color: #A6ACCD"> </span><span style="color: #F07178">name</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">&quot;</span><span style="color: #C3E88D">Ashley</span><span style="color: #89DDFF">&quot;</span><span style="color: #89DDFF">,</span><span style="color: #A6ACCD"> </span><span style="color: #F07178">age</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> </span><span style="color: #F78C6C">7</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">},</span></span>
<span class="line"><span style="color: #A6ACCD"> ]</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #A6ACCD"> </span><span style="color: #F07178">todo</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> [</span><span style="color: #89DDFF">&quot;</span><span style="color: #C3E88D">Be funny</span><span style="color: #89DDFF">&quot;</span><span style="color: #89DDFF">,</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">&quot;</span><span style="color: #C3E88D">Manage household</span><span style="color: #89DDFF">&quot;</span><span style="color: #A6ACCD">]</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #A6ACCD"> </span><span style="color: #F07178">email</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">&quot;</span><span style="color: #C3E88D">bill@example.com</span><span style="color: #89DDFF">&quot;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #A6ACCD"> </span><span style="color: #F07178">version</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> </span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #89DDFF">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #C792EA">const</span><span style="color: #A6ACCD"> inc </span><span style="color: #89DDFF">=</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">(</span><span style="color: #A6ACCD">i</span><span style="color: #89DDFF">)</span><span style="color: #A6ACCD"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #A6ACCD"> i </span><span style="color: #89DDFF">+</span><span style="color: #A6ACCD"> </span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #C792EA">const</span><span style="color: #A6ACCD"> eq </span><span style="color: #89DDFF">=</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">(</span><span style="color: #A6ACCD">x</span><span style="color: #89DDFF">)</span><span style="color: #A6ACCD"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">(</span><span style="color: #A6ACCD">y</span><span style="color: #89DDFF">)</span><span style="color: #A6ACCD"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #A6ACCD"> x </span><span style="color: #89DDFF">===</span><span style="color: #A6ACCD"> y</span><span style="color: #89DDFF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #C792EA">const</span><span style="color: #A6ACCD"> newPerson </span><span style="color: #89DDFF">=</span><span style="color: #A6ACCD"> </span><span style="color: #82AAFF">u</span><span style="color: #A6ACCD">(person</span><span style="color: #89DDFF">,</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #89DDFF"> </span><span style="color: #676E95">// Change first name</span></span>
<span class="line"><span style="color: #A6ACCD"> </span><span style="color: #F07178">name</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">{</span><span style="color: #A6ACCD"> </span><span style="color: #F07178">first</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">&quot;</span><span style="color: #C3E88D">Bob</span><span style="color: #89DDFF">&quot;</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">},</span></span>
<span class="line"><span style="color: #89DDFF"> </span><span style="color: #676E95">// Increment all children&#39;s ages</span></span>
<span class="line"><span style="color: #A6ACCD"> </span><span style="color: #F07178">children</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> u</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">map</span><span style="color: #A6ACCD">(</span><span style="color: #89DDFF">{</span><span style="color: #A6ACCD"> </span><span style="color: #F07178">age</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> inc </span><span style="color: #89DDFF">}</span><span style="color: #A6ACCD">)</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #89DDFF"> </span><span style="color: #676E95">// Update email</span></span>
<span class="line"><span style="color: #A6ACCD"> </span><span style="color: #F07178">email</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">&quot;</span><span style="color: #C3E88D">bob@example.com</span><span style="color: #89DDFF">&quot;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #89DDFF"> </span><span style="color: #676E95">// Remove todo</span></span>
<span class="line"><span style="color: #A6ACCD"> </span><span style="color: #F07178">todo</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> u</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">reject</span><span style="color: #A6ACCD">(</span><span style="color: #82AAFF">eq</span><span style="color: #A6ACCD">(</span><span style="color: #89DDFF">&quot;</span><span style="color: #C3E88D">Be funny</span><span style="color: #89DDFF">&quot;</span><span style="color: #A6ACCD">))</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #89DDFF"> </span><span style="color: #676E95">// Increment version</span></span>
<span class="line"><span style="color: #A6ACCD"> </span><span style="color: #F07178">version</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> inc</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #89DDFF">}</span><span style="color: #A6ACCD">)</span><span style="color: #89DDFF">;</span></span>
<span class="line"><span style="color: #676E95">// =&gt; {</span></span>
<span class="line"><span style="color: #676E95">// name: { first: &#39;Bob&#39;, last: &#39;Sagat&#39; },</span></span>
<span class="line"><span style="color: #676E95">// children: [</span></span>
<span class="line"><span style="color: #676E95">// { name: &#39;Mary-Kate&#39;, age: 8 },</span></span>
<span class="line"><span style="color: #676E95">// { name: &#39;Ashley&#39;, age: 8 }</span></span>
<span class="line"><span style="color: #676E95">// ],</span></span>
<span class="line"><span style="color: #676E95">// todo: [</span></span>
<span class="line"><span style="color: #676E95">// &#39;Manage household&#39;</span></span>
<span class="line"><span style="color: #676E95">// ],</span></span>
<span class="line"><span style="color: #676E95">// email: &#39;bob@example.com&#39;,</span></span>
<span class="line"><span style="color: #676E95">// version: 2</span></span>
<span class="line"><span style="color: #676E95">//}</span></span>
<span class="line"></span></code></pre><!-- HTML_TAG_END --></div>
</div></div></article>
<hr class="border-gray-divider mt-20">
<div class="992:text-xl flex items-center pt-12 pb-20 text-lg font-semibold text-gray-300">
<div class="ml-auto mb-4 flex flex-col items-end"><span class="text-gray-inverse mr-3 mb-4 inline-block">Next</span>
<a class="group transform-gpu text-lg font-medium transition-transform hover:scale-105 hover:text-gray-inverse" href="/latest/api" data-sveltekit-prefetch>
<span class="inline-block transform transition-transform duration-100 group-hover:translate-x-0 translate-x-2">API</span>
<span class="opacity-0 transition-opacity duration-100 group-hover:visible group-hover:opacity-100 inline-block">-&gt;</span></a></div></div>
</main>
<div class="992:flex-1"></div>
<div class="on-this-page pt-8 pb-8 hidden overflow-auto min-w-[160px] sticky right-4 pr-4 1440:right-6 1440:pr-2 1280:block pl-0.5 top-[var(--kd--navbar-height)] max-h-[calc(100vh-var(--kd--navbar-height))]" style=""><h5 class="font-semibold w-full text-left text-gray-inverse text-lg">On this page</h5>
<ul class="space-y-4 mt-4"><li class="text-gray-soft hover:text-gray-inverse"><a href="#about">About</a></li>
<li class="text-gray-soft hover:text-gray-inverse"><a href="#differences-with-the-original-updeep">Differences with the original Updeep</a></li>
<li class="text-gray-soft hover:text-gray-inverse"><a href="#installation">Installation</a></li>
<li class="text-gray-soft hover:text-gray-inverse"><a href="#full-example">Full example</a></li>
</ul></div></div></div>
<script type="module" data-sveltekit-hydrate="13ln1h8">
import { start } from "../_app/immutable/start-4894d21d.js";
start({
env: {},
paths: {"base":"","assets":""},
target: document.querySelector('[data-sveltekit-hydrate="13ln1h8"]').parentNode,
version: "1673374967075",
hydrate: {
node_ids: [0, 5],
data: [null,null],
form: null
}
});
</script>
<script type="application/json" data-sveltekit-fetched data-url="/kit-docs/latest_get-started.meta">{"status":200,"statusText":"","headers":{},"body":"{\"excerpt\":\"\",\"headers\":[{\"level\":2,\"title\":\"About\",\"slug\":\"about\",\"children\":[]},{\"level\":2,\"title\":\"Differences with the original Updeep\",\"slug\":\"differences-with-the-original-updeep\",\"children\":[]},{\"level\":2,\"title\":\"Installation\",\"slug\":\"installation\",\"children\":[]},{\"level\":2,\"title\":\"Full example\",\"slug\":\"full-example\",\"children\":[]}],\"title\":\"Get Started\",\"frontmatter\":{\"title\":\"Get Started\"},\"lastUpdated\":1673371541420}"}</script></div>
</body>
</html>
Reference in New Issue Copy Permalink