257 lines
28 KiB
HTML
257 lines
28 KiB
HTML
<!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'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'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">"</span><span style="color: #C3E88D">@yanick/updeep-remeda</span><span style="color: #89DDFF">"</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">"</span><span style="color: #C3E88D">Bill</span><span style="color: #89DDFF">"</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">"</span><span style="color: #C3E88D">Sagat</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">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">"</span><span style="color: #C3E88D">Mary-Kate</span><span style="color: #89DDFF">"</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">"</span><span style="color: #C3E88D">Ashley</span><span style="color: #89DDFF">"</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">"</span><span style="color: #C3E88D">Be funny</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">,</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">Manage household</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">email</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">bill@example.com</span><span style="color: #89DDFF">"</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">=></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">=></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">=></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">"</span><span style="color: #C3E88D">Bob</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">// Increment all children'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">"</span><span style="color: #C3E88D">bob@example.com</span><span style="color: #89DDFF">"</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">"</span><span style="color: #C3E88D">Be funny</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">// 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">// => {</span></span>
|
|
<span class="line"><span style="color: #676E95">// name: { first: 'Bob', last: 'Sagat' },</span></span>
|
|
<span class="line"><span style="color: #676E95">// children: [</span></span>
|
|
<span class="line"><span style="color: #676E95">// { name: 'Mary-Kate', age: 8 },</span></span>
|
|
<span class="line"><span style="color: #676E95">// { name: 'Ashley', 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">// 'Manage household'</span></span>
|
|
<span class="line"><span style="color: #676E95">// ],</span></span>
|
|
<span class="line"><span style="color: #676E95">// email: 'bob@example.com',</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">-></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>
|