0?u:["plain"],s=d):(u=Xe(u,d.type),d.alias&&(u=Xe(u,d.alias)),s=d.content),"string"==typeof s){var m=s.split(Je),p=m.length;i.push({types:u,content:m[0]});for(var v=1;v0&&(i=o.getRangeAt(0)),a.append(r),r.select(),r.selectionStart=0,r.selectionEnd=e.length;var c=!1;try{c=document.execCommand("copy")}catch(s){}r.remove(),i&&(o.removeAllRanges(),o.addRange(i)),l&&l.focus()}(t),o(!0),i.current=window.setTimeout((function(){o(!1)}),1e3)}),[t]);return(0,a.useEffect)((function(){return function(){return window.clearTimeout(i.current)}}),[]),a.createElement("button",{type:"button","aria-label":l?(0,p.I)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,p.I)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,p.I)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,u.Z)("clean-btn",n,ot.copyButton,l&&ot.copyButtonCopied),onClick:c},a.createElement("span",{className:ot.copyButtonIcons,"aria-hidden":"true"},a.createElement("svg",{className:ot.copyButtonIcon,viewBox:"0 0 24 24"},a.createElement("path",{d:"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"})),a.createElement("svg",{className:ot.copyButtonSuccessIcon,viewBox:"0 0 24 24"},a.createElement("path",{d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"}))))}const ct="wordWrapButtonIcon_Bwma",st="wordWrapButtonEnabled_EoeP";function ut(e){var t=e.className,n=e.onClick,r=e.isEnabled,l=(0,p.I)({id:"theme.CodeBlock.wordWrapToggle",message:"Toggle word wrap",description:"The title attribute for toggle word wrapping button of code block lines"});return a.createElement("button",{type:"button",onClick:n,className:(0,u.Z)("clean-btn",t,r&&st),"aria-label":l,title:l},a.createElement("svg",{className:ct,viewBox:"0 0 24 24","aria-hidden":"true"},a.createElement("path",{fill:"currentColor",d:"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"})))}function dt(e){var t,n,r,l,o,i,c,s,d,p,v,f=e.children,h=e.className,g=void 0===h?"":h,b=e.metastring,E=e.title,y=e.showLineNumbers,k=e.language,N=(0,$.L)().prism,L=N.defaultLanguage,C=N.magicComments,Z=null!=(t=null!=k?k:null==(n=g.split(" ").find((function(e){return e.startsWith("language-")})))?void 0:n.replace(/language-/,""))?t:L,T=Be(),_=(r=(0,a.useState)(!1),l=r[0],o=r[1],i=(0,a.useState)(!1),c=i[0],s=i[1],d=(0,a.useRef)(null),p=(0,a.useCallback)((function(){var e=d.current.querySelector("code");l?e.removeAttribute("style"):(e.style.whiteSpace="pre-wrap",e.style.overflowWrap="anywhere"),o((function(e){return!e}))}),[d,l]),v=(0,a.useCallback)((function(){var e=d.current,t=e.scrollWidth>e.clientWidth||d.current.querySelector("code").hasAttribute("style");s(t)}),[d]),Fe(d,v),(0,a.useEffect)((function(){v()}),[l,v]),(0,a.useEffect)((function(){return window.addEventListener("resize",v,{passive:!0}),function(){window.removeEventListener("resize",v)}}),[v]),{codeBlockRef:d,isEnabled:l,isCodeScrollable:c,toggle:p}),w=function(e){var t,n;return null!=(t=null==e||null==(n=e.match(He))?void 0:n.groups.title)?t:""}(b)||E,x=Pe(f,{metastring:b,language:Z,magicComments:C}),B=x.lineClassNames,O=x.code,j=null!=y?y:function(e){return Boolean(null==e?void 0:e.includes("showLineNumbers"))}(b);return a.createElement(Ve,{as:"div",className:(0,u.Z)(g,Z&&!g.includes("language-"+Z)&&"language-"+Z)},w&&a.createElement("div",{className:De.codeBlockTitle},w),a.createElement("div",{className:De.codeBlockContent},a.createElement(tt,(0,m.Z)({},Ge,{theme:T,code:O,language:null!=Z?Z:"text"}),(function(e){var t=e.className,n=e.tokens,r=e.getLineProps,l=e.getTokenProps;return a.createElement("pre",{tabIndex:0,ref:_.codeBlockRef,className:(0,u.Z)(t,De.codeBlock,"thin-scrollbar")},a.createElement("code",{className:(0,u.Z)(De.codeBlockLines,j&&De.codeBlockLinesWithNumbering)},n.map((function(e,t){return a.createElement(lt,{key:t,line:e,getLineProps:r,getTokenProps:l,classNames:B[t],showLineNumbers:j})}))))})),a.createElement("div",{className:De.buttonGroup},(_.isEnabled||_.isCodeScrollable)&&a.createElement(ut,{className:De.codeButton,onClick:function(){return _.toggle()},isEnabled:_.isEnabled}),a.createElement(it,{className:De.codeButton,code:O}))))}var mt=["children"];function pt(e){var t=e.children,n=(0,j.Z)(e,mt),r=(0,we.Z)(),l=function(e){return a.Children.toArray(e).some((function(e){return(0,a.isValidElement)(e)}))?e:Array.isArray(e)?e.join(""):e}(t),o="string"==typeof l?dt:Re;return a.createElement(o,(0,m.Z)({key:String(r)},n),l)}const vt="details_lb9f",ft="isBrowser_bmU9",ht="collapsibleContent_i85q";var gt=["summary","children"];function bt(e){return!!e&&("SUMMARY"===e.tagName||bt(e.parentElement))}function Et(e,t){return!!e&&(e===t||Et(e.parentElement,t))}function yt(e){var t=e.summary,n=e.children,r=(0,j.Z)(e,gt),l=(0,we.Z)(),o=(0,a.useRef)(null),i=(0,Y.u)({initialState:!r.open}),c=i.collapsed,s=i.setCollapsed,d=(0,a.useState)(r.open),p=d[0],v=d[1],f=a.isValidElement(t)?t:a.createElement("summary",null,null!=t?t:"Details");return a.createElement("details",(0,m.Z)({},r,{ref:o,open:p,"data-collapsed":c,className:(0,u.Z)(vt,l&&ft,r.className),onMouseDown:function(e){bt(e.target)&&e.detail>1&&e.preventDefault()},onClick:function(e){e.stopPropagation();var t=e.target;bt(t)&&Et(t,o.current)&&(e.preventDefault(),c?(s(!1),v(!0)):s(!0))}}),f,a.createElement(Y.z,{lazy:!1,collapsed:c,disableSSRStyle:!0,onCollapseTransitionEnd:function(e){s(e),v(!e)}},a.createElement("div",{className:ht},n)))}const kt="details_b_Ee";function Nt(e){var t=Object.assign({},(function(e){if(null==e)throw new TypeError("Cannot destructure "+e)}(e),e));return a.createElement(yt,(0,m.Z)({},t,{className:(0,u.Z)("alert alert--info",kt,t.className)}))}function Lt(e){return a.createElement(Ce,e)}const Ct="containsTaskList_mC6p";const Zt="img_ev3q";const Tt="admonition_LlT9",_t="admonitionHeading_tbUL",wt="admonitionIcon_kALy",xt="admonitionContent_S0QG";var Bt={note:{infimaClassName:"secondary",iconComponent:function(){return a.createElement("svg",{viewBox:"0 0 14 16"},a.createElement("path",{fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"}))},label:a.createElement(p.Z,{id:"theme.admonition.note",description:"The default label used for the Note admonition (:::note)"},"note")},tip:{infimaClassName:"success",iconComponent:function(){return a.createElement("svg",{viewBox:"0 0 12 16"},a.createElement("path",{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))},label:a.createElement(p.Z,{id:"theme.admonition.tip",description:"The default label used for the Tip admonition (:::tip)"},"tip")},danger:{infimaClassName:"danger",iconComponent:function(){return a.createElement("svg",{viewBox:"0 0 12 16"},a.createElement("path",{fillRule:"evenodd",d:"M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"}))},label:a.createElement(p.Z,{id:"theme.admonition.danger",description:"The default label used for the Danger admonition (:::danger)"},"danger")},info:{infimaClassName:"info",iconComponent:function(){return a.createElement("svg",{viewBox:"0 0 14 16"},a.createElement("path",{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))},label:a.createElement(p.Z,{id:"theme.admonition.info",description:"The default label used for the Info admonition (:::info)"},"info")},caution:{infimaClassName:"warning",iconComponent:function(){return a.createElement("svg",{viewBox:"0 0 16 16"},a.createElement("path",{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"}))},label:a.createElement(p.Z,{id:"theme.admonition.caution",description:"The default label used for the Caution admonition (:::caution)"},"caution")}},Ot={secondary:"note",important:"info",success:"tip",warning:"danger"};function jt(e){var t,n=function(e){var t=a.Children.toArray(e),n=t.find((function(e){var t;return a.isValidElement(e)&&"mdxAdmonitionTitle"===(null==(t=e.props)?void 0:t.mdxType)})),r=a.createElement(a.Fragment,null,t.filter((function(e){return e!==n})));return{mdxAdmonitionTitle:n,rest:r}}(e.children),r=n.mdxAdmonitionTitle,l=n.rest;return Object.assign({},e,{title:null!=(t=e.title)?t:r,children:l})}const At={head:function(e){var t=a.Children.map(e.children,(function(e){return a.isValidElement(e)?function(e){var t;if(null!=(t=e.props)&&t.mdxType&&e.props.originalType){var n=e.props,r=(n.mdxType,n.originalType,(0,j.Z)(n,_e));return a.createElement(e.props.originalType,r)}return e}(e):e}));return a.createElement(Te.Z,e,t)},code:function(e){var t=["a","abbr","b","br","button","cite","code","del","dfn","em","i","img","input","ins","kbd","label","object","output","q","ruby","s","small","span","strong","sub","sup","time","u","var","wbr"];return a.Children.toArray(e.children).every((function(e){var n;return"string"==typeof e&&!e.includes("\n")||(0,a.isValidElement)(e)&&t.includes(null==(n=e.props)?void 0:n.mdxType)}))?a.createElement("code",e):a.createElement(pt,e)},a:function(e){return a.createElement(v.Z,e)},pre:function(e){var t;return a.createElement(pt,(0,a.isValidElement)(e.children)&&"code"===(null==(t=e.children.props)?void 0:t.originalType)?e.children.props:Object.assign({},e))},details:function(e){var t=a.Children.toArray(e.children),n=t.find((function(e){var t;return a.isValidElement(e)&&"summary"===(null==(t=e.props)?void 0:t.mdxType)})),r=a.createElement(a.Fragment,null,t.filter((function(e){return e!==n})));return a.createElement(Nt,(0,m.Z)({},e,{summary:n}),r)},ul:function(e){return a.createElement("ul",(0,m.Z)({},e,{className:(t=e.className,(0,u.Z)(t,(null==t?void 0:t.includes("contains-task-list"))&&Ct))}));var t},img:function(e){return a.createElement("img",(0,m.Z)({loading:"lazy"},e,{className:(t=e.className,(0,u.Z)(t,Zt))}));var t},h1:function(e){return a.createElement(Lt,(0,m.Z)({as:"h1"},e))},h2:function(e){return a.createElement(Lt,(0,m.Z)({as:"h2"},e))},h3:function(e){return a.createElement(Lt,(0,m.Z)({as:"h3"},e))},h4:function(e){return a.createElement(Lt,(0,m.Z)({as:"h4"},e))},h5:function(e){return a.createElement(Lt,(0,m.Z)({as:"h5"},e))},h6:function(e){return a.createElement(Lt,(0,m.Z)({as:"h6"},e))},admonition:function(e){var t=jt(e),n=t.children,r=t.type,l=t.title,o=t.icon,i=function(e){var t,n=null!=(t=Ot[e])?t:e,a=Bt[n];return a||(console.warn('No admonition config found for admonition type "'+n+'". Using Info as fallback.'),Bt.info)}(r),c=null!=l?l:i.label,s=i.iconComponent,d=null!=o?o:a.createElement(s,null);return a.createElement("div",{className:(0,u.Z)(y.k.common.admonition,y.k.common.admonitionType(e.type),"alert","alert--"+i.infimaClassName,Tt)},a.createElement("div",{className:_t},a.createElement("span",{className:wt},d),c),a.createElement("div",{className:xt},n))},mermaid:n(1875).Z};function Ht(e){var t=e.children;return a.createElement(Ze.Zo,{components:At},t)}function Mt(e){var t,n,r,l,o=e.children,i=(t=c(),n=t.metadata,r=t.frontMatter,l=t.contentTitle,r.hide_title||void 0!==l?null:n.title);return a.createElement("div",{className:(0,u.Z)(y.k.docs.docMarkdown,"markdown")},i&&a.createElement("header",null,a.createElement(Ce,{as:"h1"},i)),a.createElement(Ht,null,o))}var St=n(3651),It=n(8596),Pt=n(4996);function Ut(e){return a.createElement("svg",(0,m.Z)({viewBox:"0 0 24 24"},e),a.createElement("path",{d:"M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z",fill:"currentColor"}))}const zt="breadcrumbHomeIcon_YNFT";function Vt(){var e=(0,Pt.Z)("/");return a.createElement("li",{className:"breadcrumbs__item"},a.createElement(v.Z,{"aria-label":(0,p.I)({id:"theme.docs.breadcrumbs.home",message:"Home page",description:"The ARIA label for the home page in the breadcrumbs"}),className:"breadcrumbs__link",href:e},a.createElement(Ut,{className:zt})))}const Dt="breadcrumbsContainer_Z_bl";function Rt(e){var t=e.children,n=e.href,r="breadcrumbs__link";return e.isLast?a.createElement("span",{className:r,itemProp:"name"},t):n?a.createElement(v.Z,{className:r,href:n,itemProp:"item"},a.createElement("span",{itemProp:"name"},t)):a.createElement("span",{className:r},t)}function Wt(e){var t=e.children,n=e.active,r=e.index,l=e.addMicrodata;return a.createElement("li",(0,m.Z)({},l&&{itemScope:!0,itemProp:"itemListElement",itemType:"https://schema.org/ListItem"},{className:(0,u.Z)("breadcrumbs__item",{"breadcrumbs__item--active":n})}),t,a.createElement("meta",{itemProp:"position",content:String(r+1)}))}function Ft(){var e=(0,St.s1)(),t=(0,It.Ns)();return e?a.createElement("nav",{className:(0,u.Z)(y.k.docs.docBreadcrumbs,Dt),"aria-label":(0,p.I)({id:"theme.docs.breadcrumbs.navAriaLabel",message:"Breadcrumbs",description:"The ARIA label for the breadcrumbs"})},a.createElement("ul",{className:"breadcrumbs",itemScope:!0,itemType:"https://schema.org/BreadcrumbList"},t&&a.createElement(Vt,null),e.map((function(t,n){var r=n===e.length-1;return a.createElement(Wt,{key:n,active:r,index:n,addMicrodata:!!t.href},a.createElement(Rt,{href:t.href,isLast:r},t.label))})))):null}const qt="docItemContainer_Djhp",Gt="docItemCol_VOVn";function Yt(e){var t,n,r,l,o,i,s=e.children,m=(t=c(),n=t.frontMatter,r=t.toc,l=(0,d.i)(),o=n.hide_table_of_contents,i=!o&&r.length>0,{hidden:o,mobile:i?a.createElement(he,null):void 0,desktop:!i||"desktop"!==l&&"ssr"!==l?void 0:a.createElement(ye,null)});return a.createElement("div",{className:"row"},a.createElement("div",{className:(0,u.Z)("col",!m.hidden&&Gt)},a.createElement(_,null),a.createElement("div",{className:qt},a.createElement("article",null,a.createElement(Ft,null),a.createElement(w,null),m.mobile,a.createElement(Mt,null,s),a.createElement(G,null)),a.createElement(g,null))),m.desktop&&a.createElement("div",{className:"col col--3"},m.desktop))}function $t(e){var t="docs-doc-id-"+e.content.metadata.unversionedId,n=e.content;return a.createElement(i,{content:e.content},a.createElement(r.FG,{className:t},a.createElement(s,null),a.createElement(Yt,null,a.createElement(n,null))))}},4477:(e,t,n)=>{"use strict";n.d(t,{E:()=>i,q:()=>o});var a=n(7294),r=n(4700),l=a.createContext(null);function o(e){var t=e.children,n=e.version;return a.createElement(l.Provider,{value:n},t)}function i(){var e=(0,a.useContext)(l);if(null===e)throw new r.i6("DocsVersionProvider");return e}},7594:(e,t)=>{function n(e){let t,n=[];for(let a of e.split(",").map((e=>e.trim())))if(/^-?\d+$/.test(a))n.push(parseInt(a,10));else if(t=a.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/)){let[e,a,r,l]=t;if(a&&l){a=parseInt(a),l=parseInt(l);const e=a{n.r(t),n.d(t,{default:()=>xe});var a=n(7294),r=n(6010),l=n(1944),i=n(5281),o=n(3320),c=n(3651),s=n(4477),d=n(1116),m=n(7961),u=n(5999),b=n(2466),p=n(5936);const v="backToTopButton_sjWU",h="backToTopButtonShow_xfvO";function E(){var e=function(e){var t=e.threshold,n=(0,a.useState)(!1),r=n[0],l=n[1],i=(0,a.useRef)(!1),o=(0,b.Ct)(),c=o.startScroll,s=o.cancelScroll;return(0,b.RF)((function(e,n){var a=e.scrollY,r=null==n?void 0:n.scrollY;r&&(i.current?i.current=!1:a>=r?(s(),l(!1)):a{n.r(t),n.d(t,{default:()=>o});var a=n(7294),r=n(5999),l=n(1944),i=n(7961);function o(){return a.createElement(a.Fragment,null,a.createElement(l.d,{title:(0,r.I)({id:"theme.NotFound.title",message:"Page Not Found"})}),a.createElement(i.Z,null,a.createElement("main",{className:"container margin-vert--xl"},a.createElement("div",{className:"row"},a.createElement("div",{className:"col col--6 col--offset-3"},a.createElement("h1",{className:"hero__title"},a.createElement(r.Z,{id:"theme.NotFound.title",description:"The title of the 404 page"},"Page Not Found")),a.createElement("p",null,a.createElement(r.Z,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page"},"We could not find what you were looking for.")),a.createElement("p",null,a.createElement(r.Z,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page"},"Please contact the owner of the site that linked you to the original URL and let them know their link is broken.")))))))}},4477:(e,t,n)=>{n.d(t,{E:()=>o,q:()=>i});var a=n(7294),r=n(4700),l=a.createContext(null);function i(e){var t=e.children,n=e.version;return a.createElement(l.Provider,{value:n},t)}function o(){var e=(0,a.useContext)(l);if(null===e)throw new r.i6("DocsVersionProvider");return e}}}]);
\ No newline at end of file
diff --git a/assets/js/2b810e00.dd4c0b92.js b/assets/js/2b810e00.dd4c0b92.js
new file mode 100644
index 00000000..732b7de9
--- /dev/null
+++ b/assets/js/2b810e00.dd4c0b92.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkimmer_website=self.webpackChunkimmer_website||[]).push([[222],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>f});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function d(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),p=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):d(d({},t),e)),n},u=function(e){var t=p(e.components);return r.createElement(s.Provider,{value:t},e.children)},l="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),l=p(n),m=a,f=l["".concat(s,".").concat(m)]||l[m]||c[m]||o;return n?r.createElement(f,d(d({ref:t},u),{},{components:n})):r.createElement(f,d({ref:t},u))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,d=new Array(o);d[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[l]="string"==typeof e?e:a,d[1]=i;for(var p=2;p{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>s,default:()=>m,frontMatter:()=>i,metadata:()=>p,toc:()=>l});var r=n(3117),a=n(102),o=(n(7294),n(3905)),d=["components"],i={id:"update-patterns",title:"Update patterns"},s=void 0,p={unversionedId:"update-patterns",id:"update-patterns",title:"Update patterns",description:"Working with immutable data, before Immer, used to mean learning all the immutable update patterns.",source:"@site/docs/update-patterns.md",sourceDirName:".",slug:"/update-patterns",permalink:"/immer/update-patterns",draft:!1,editUrl:"https://github.com/immerjs/immer/edit/main/website/docs/update-patterns.md",tags:[],version:"current",frontMatter:{id:"update-patterns",title:"Update patterns"},sidebar:"Immer",previous:{title:"React & Immer",permalink:"/immer/example-setstate"},next:{title:"API overview",permalink:"/immer/api"}},u={},l=[{value:"Object mutations",id:"object-mutations",level:3},{value:"Array mutations",id:"array-mutations",level:3},{value:"Nested data structures",id:"nested-data-structures",level:3}],c={toc:l};function m(e){var t=e.components,n=(0,a.Z)(e,d);return(0,o.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("center",null,(0,o.kt)("div",{"data-ea-publisher":"immerjs","data-ea-type":"image",className:"horizontal bordered"})),(0,o.kt)("p",null,"Working with immutable data, before Immer, used to mean learning all the immutable update patterns."),(0,o.kt)("p",null,"To help 'unlearning' those patterns here is an overview how you can leverage the built-in JavaScript APIs to update objects and collections:"),(0,o.kt)("h3",{id:"object-mutations"},"Object mutations"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-javascript"},'import {produce} from "immer"\n\nconst todosObj = {\n id1: {done: false, body: "Take out the trash"},\n id2: {done: false, body: "Check Email"}\n}\n\n// add\nconst addedTodosObj = produce(todosObj, draft => {\n draft["id3"] = {done: false, body: "Buy bananas"}\n})\n\n// delete\nconst deletedTodosObj = produce(todosObj, draft => {\n delete draft["id1"]\n})\n\n// update\nconst updatedTodosObj = produce(todosObj, draft => {\n draft["id1"].done = true\n})\n')),(0,o.kt)("h3",{id:"array-mutations"},"Array mutations"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-javascript"},'import {produce} from "immer"\n\nconst todosArray = [\n {id: "id1", done: false, body: "Take out the trash"},\n {id: "id2", done: false, body: "Check Email"}\n]\n\n// add\nconst addedTodosArray = produce(todosArray, draft => {\n draft.push({id: "id3", done: false, body: "Buy bananas"})\n})\n\n// delete by index\nconst deletedTodosArray = produce(todosArray, draft => {\n draft.splice(3 /*the index */, 1)\n})\n\n// update by index\nconst updatedTodosArray = produce(todosArray, draft => {\n draft[3].done = true\n})\n\n// insert at index\nconst updatedTodosArray = produce(todosArray, draft => {\n draft.splice(3, 0, {id: "id3", done: false, body: "Buy bananas"})\n})\n\n// remove last item\nconst updatedTodosArray = produce(todosArray, draft => {\n draft.pop()\n})\n\n// remove first item\nconst updatedTodosArray = produce(todosArray, draft => {\n draft.shift()\n})\n\n// add item at the beginning of the array\nconst addedTodosArray = produce(todosArray, draft => {\n draft.unshift({id: "id3", done: false, body: "Buy bananas"})\n})\n\n// delete by id\nconst deletedTodosArray = produce(todosArray, draft => {\n const index = draft.findIndex(todo => todo.id === "id1")\n if (index !== -1) draft.splice(index, 1)\n})\n\n// update by id\nconst updatedTodosArray = produce(todosArray, draft => {\n const index = draft.findIndex(todo => todo.id === "id1")\n if (index !== -1) draft[index].done = true\n})\n\n// filtering items\nconst updatedTodosArray = produce(todosArray, draft => {\n // creating a new state is simpler in this example\n // (note that we don\'t need produce in this case,\n // but as shown below, if the filter is not on the top\n // level produce is still pretty useful)\n return draft.filter(todo => todo.done)\n})\n')),(0,o.kt)("h3",{id:"nested-data-structures"},"Nested data structures"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-javascript"},'import {produce} from "immer"\n\n// example complex data structure\nconst store = {\n users: new Map([\n [\n "17",\n {\n name: "Michel",\n todos: [\n {\n title: "Get coffee",\n done: false\n }\n ]\n }\n ]\n ])\n}\n\n// updating something deeply in-an-object-in-an-array-in-a-map-in-an-object:\nconst nextStore = produce(store, draft => {\n draft.users.get("17").todos[0].done = true\n})\n\n// filtering out all unfinished todo\'s\nconst nextStore = produce(store, draft => {\n const user = draft.users.get("17")\n // when filtering, creating a fresh collection is simpler than\n // removing irrelevant items\n user.todos = user.todos.filter(todo => todo.done)\n})\n')),(0,o.kt)("p",null,"Note that many array operations can be used to insert multiple items at once by passing multiple arguments or using the spread operation: ",(0,o.kt)("inlineCode",{parentName:"p"},"todos.unshift(...items)"),"."),(0,o.kt)("p",null,"Note that when working with arrays that contain objects that are typically identified by some id, we recommend to use ",(0,o.kt)("inlineCode",{parentName:"p"},"Map")," or index based objects (as shown above) instead of performing frequent find operations, lookup tables perform much better in general."))}m.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/assets/js/5fbc5cf1.01b5063b.js b/assets/js/5fbc5cf1.01b5063b.js
new file mode 100644
index 00000000..75120e58
--- /dev/null
+++ b/assets/js/5fbc5cf1.01b5063b.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkimmer_website=self.webpackChunkimmer_website||[]).push([[207],{3905:(t,e,a)=>{a.d(e,{Zo:()=>d,kt:()=>k});var n=a(7294);function r(t,e,a){return e in t?Object.defineProperty(t,e,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[e]=a,t}function l(t,e){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),a.push.apply(a,n)}return a}function i(t){for(var e=1;e=0||(r[a]=t[a]);return r}(t,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(t,a)&&(r[a]=t[a])}return r}var o=n.createContext({}),m=function(t){var e=n.useContext(o),a=e;return t&&(a="function"==typeof t?t(e):i(i({},e),t)),a},d=function(t){var e=m(t.components);return n.createElement(o.Provider,{value:e},t.children)},s="mdxType",u={inlineCode:"code",wrapper:function(t){var e=t.children;return n.createElement(n.Fragment,{},e)}},c=n.forwardRef((function(t,e){var a=t.components,r=t.mdxType,l=t.originalType,o=t.parentName,d=p(t,["components","mdxType","originalType","parentName"]),s=m(a),c=r,k=s["".concat(o,".").concat(c)]||s[c]||u[c]||l;return a?n.createElement(k,i(i({ref:e},d),{},{components:a})):n.createElement(k,i({ref:e},d))}));function k(t,e){var a=arguments,r=e&&e.mdxType;if("string"==typeof t||r){var l=a.length,i=new Array(l);i[0]=c;var p={};for(var o in e)hasOwnProperty.call(e,o)&&(p[o]=e[o]);p.originalType=t,p[s]="string"==typeof t?t:r,i[1]=p;for(var m=2;m{a.r(e),a.d(e,{assets:()=>d,contentTitle:()=>o,default:()=>c,frontMatter:()=>p,metadata:()=>m,toc:()=>s});var n=a(3117),r=a(102),l=(a(7294),a(3905)),i=["components"],p={id:"api",title:"API overview"},o=void 0,m={unversionedId:"api",id:"api",title:"API overview",description:"| Exported name | Description | Section |",source:"@site/docs/api.md",sourceDirName:".",slug:"/api",permalink:"/immer/api",draft:!1,editUrl:"https://github.com/immerjs/immer/edit/main/website/docs/api.md",tags:[],version:"current",frontMatter:{id:"api",title:"API overview"},sidebar:"Immer",previous:{title:"Update patterns",permalink:"/immer/update-patterns"},next:{title:"Map and Set",permalink:"/immer/map-set"}},d={},s=[{value:"Importing immer",id:"importing-immer",level:2}],u={toc:s};function c(t){var e=t.components,a=(0,r.Z)(t,i);return(0,l.kt)("wrapper",(0,n.Z)({},u,a,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("center",null,(0,l.kt)("div",{"data-ea-publisher":"immerjs","data-ea-type":"image",className:"horizontal bordered"})),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"Exported name"),(0,l.kt)("th",{parentName:"tr",align:null},"Description"),(0,l.kt)("th",{parentName:"tr",align:null},"Section"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"produce")),(0,l.kt)("td",{parentName:"tr",align:null},"The core API of Immer: ",(0,l.kt)("inlineCode",{parentName:"td"},'import {produce} from "immer"')),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("a",{parentName:"td",href:"/immer/produce"},"Produce"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"applyPatches")),(0,l.kt)("td",{parentName:"tr",align:null},"Given a base state or draft, and a set of patches, applies the patches"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("a",{parentName:"td",href:"/immer/patches"},"Patches"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"castDraft")),(0,l.kt)("td",{parentName:"tr",align:null},"Converts any immutable type to its mutable counterpart. This is just a cast and doesn't actually do anything."),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("a",{parentName:"td",href:"/immer/typescript"},"TypeScript"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"castImmutable")),(0,l.kt)("td",{parentName:"tr",align:null},"Converts any mutable type to its immutable counterpart. This is just a cast and doesn't actually do anything."),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("a",{parentName:"td",href:"/immer/typescript"},"TypeScript"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"createDraft")),(0,l.kt)("td",{parentName:"tr",align:null},"Given a base state, creates a mutable draft for which any modifications will be recorded"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("a",{parentName:"td",href:"/immer/async"},"Async"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"current")),(0,l.kt)("td",{parentName:"tr",align:null},"Given a draft object (doesn't have to be a tree root), takes a snapshot of the current state of the draft"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("a",{parentName:"td",href:"/immer/current"},"Current"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Draft")),(0,l.kt)("td",{parentName:"tr",align:null},"Exposed TypeScript type to convert an immutable type to a mutable type"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("a",{parentName:"td",href:"/immer/typescript"},"TypeScript"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"enableMapSet()")),(0,l.kt)("td",{parentName:"tr",align:null},"Enables support for ",(0,l.kt)("inlineCode",{parentName:"td"},"Map")," and ",(0,l.kt)("inlineCode",{parentName:"td"},"Set")," collections."),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("a",{parentName:"td",href:"/immer/installation#pick-your-immer-version"},"Installation"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"enablePatches()")),(0,l.kt)("td",{parentName:"tr",align:null},"Enables support for JSON patches."),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("a",{parentName:"td",href:"./installation#pick-your-immer-version"},"Installation"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"finishDraft")),(0,l.kt)("td",{parentName:"tr",align:null},"Given an draft created using ",(0,l.kt)("inlineCode",{parentName:"td"},"createDraft"),", seals the draft and produces and returns the next immutable state that captures all the changes"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("a",{parentName:"td",href:"/immer/async"},"Async"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"freeze(obj, deep?)")),(0,l.kt)("td",{parentName:"tr",align:null},"Freezes draftable objects. Returns the original object. By default freezes shallowly, but if the second argument is ",(0,l.kt)("inlineCode",{parentName:"td"},"true")," it will freeze recursively."),(0,l.kt)("td",{parentName:"tr",align:null})),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Immer")),(0,l.kt)("td",{parentName:"tr",align:null},'constructor that can be used to create a second "immer" instance (exposing all APIs listed in this instance), that doesn\'t share its settings with global instance.'),(0,l.kt)("td",{parentName:"tr",align:null})),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"immerable")),(0,l.kt)("td",{parentName:"tr",align:null},"Symbol that can be added to a constructor or prototype, to indicate that Immer should treat the class as something that can be safely drafted"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("a",{parentName:"td",href:"/immer/complex-objects"},"Classes"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Immutable")),(0,l.kt)("td",{parentName:"tr",align:null},"Exposed TypeScript type to convert mutable types to immutable types"),(0,l.kt)("td",{parentName:"tr",align:null})),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"isDraft")),(0,l.kt)("td",{parentName:"tr",align:null},"Returns true if the given object is a draft object"),(0,l.kt)("td",{parentName:"tr",align:null})),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"isDraftable")),(0,l.kt)("td",{parentName:"tr",align:null},"Returns true if Immer is capable of turning this object into a draft. Which is true for: arrays, objects without prototype, objects with ",(0,l.kt)("inlineCode",{parentName:"td"},"Object")," as their prototype, objects that have the ",(0,l.kt)("inlineCode",{parentName:"td"},"immerable")," symbol on their constructor or prototype"),(0,l.kt)("td",{parentName:"tr",align:null})),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"nothing")),(0,l.kt)("td",{parentName:"tr",align:null},"Value that can be returned from a recipe, to indicate that the value ",(0,l.kt)("inlineCode",{parentName:"td"},"undefined")," should be produced"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("a",{parentName:"td",href:"/immer/return"},"Return"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"original")),(0,l.kt)("td",{parentName:"tr",align:null},"Given a draft object (doesn't have to be a tree root), returns the original object at the same path in the original state tree, if present"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("a",{parentName:"td",href:"/immer/original"},"Original"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Patch")),(0,l.kt)("td",{parentName:"tr",align:null},"Exposed TypeScript type, describes the shape of an (inverse) patch object"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("a",{parentName:"td",href:"/immer/patches"},"Patches"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"produceWithPatches")),(0,l.kt)("td",{parentName:"tr",align:null},"Works the same as ",(0,l.kt)("inlineCode",{parentName:"td"},"produce"),", but instead of just returning the produced object, it returns a tuple, consisting of ",(0,l.kt)("inlineCode",{parentName:"td"},"[result, patches, inversePatches]"),"."),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("a",{parentName:"td",href:"/immer/patches"},"Patches"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"setAutoFreeze")),(0,l.kt)("td",{parentName:"tr",align:null},"Enables / disables automatic freezing of the trees produces. By default enabled."),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("a",{parentName:"td",href:"/immer/freezing"},"Freezing"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"setUseStrictShallowCopy")),(0,l.kt)("td",{parentName:"tr",align:null},"Can be used to enable strict shallow copy. If enable, immer copies non-enumerable properties as much as possible."),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("a",{parentName:"td",href:"/immer/complex-objects"},"Classes"))))),(0,l.kt)("h2",{id:"importing-immer"},"Importing immer"),(0,l.kt)("p",null,"In most cases, the only thing you need to import from Immer is ",(0,l.kt)("inlineCode",{parentName:"p"},"produce"),":"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript"},'import {produce} from "immer"\n')),(0,l.kt)("p",null,"Note that in older versions, ",(0,l.kt)("inlineCode",{parentName:"p"},"produce")," was also available as default export (e.g. ",(0,l.kt)("inlineCode",{parentName:"p"},'import produce from "immer"')," was also valid, but that is no longer the case to improve eco system compatibility."))}c.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/assets/js/62d444b9.96d43566.js b/assets/js/62d444b9.96d43566.js
new file mode 100644
index 00000000..8656f5f4
--- /dev/null
+++ b/assets/js/62d444b9.96d43566.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkimmer_website=self.webpackChunkimmer_website||[]).push([[285],{3905:(e,t,r)=>{r.d(t,{Zo:()=>m,kt:()=>f});var a=r(7294);function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function i(e){for(var t=1;t=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var l=a.createContext({}),p=function(e){var t=a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},m=function(e){var t=p(e.components);return a.createElement(l.Provider,{value:t},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,l=e.parentName,m=s(e,["components","mdxType","originalType","parentName"]),c=p(r),u=n,f=c["".concat(l,".").concat(u)]||c[u]||d[u]||o;return r?a.createElement(f,i(i({ref:t},m),{},{components:r})):a.createElement(f,i({ref:t},m))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=u;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[c]="string"==typeof e?e:n,i[1]=s;for(var p=2;p{r.r(t),r.d(t,{assets:()=>m,contentTitle:()=>l,default:()=>u,frontMatter:()=>s,metadata:()=>p,toc:()=>c});var a=r(3117),n=r(102),o=(r(7294),r(3905)),i=["components"],s={id:"performance",title:"Immer performance"},l=void 0,p={unversionedId:"performance",id:"performance",title:"Immer performance",description:" d.push(x))")," is exponentially slower than ",(0,o.kt)("inlineCode",{parentName:"p"},"produce(base, d => { for (let x of y) d.push(x)})")))}u.isMDXComponent=!0},9943:(e,t,r)=>{r.d(t,{Z:()=>a});const a=r.p+"assets/images/performance-c7f59d06ec36f4a05b6403daada96542.png"}}]);
\ No newline at end of file
diff --git a/assets/js/74860b1a.14c24b29.js b/assets/js/74860b1a.14c24b29.js
new file mode 100644
index 00000000..69993100
--- /dev/null
+++ b/assets/js/74860b1a.14c24b29.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkimmer_website=self.webpackChunkimmer_website||[]).push([[133],{3905:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>f});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t
=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=n.createContext({}),d=function(e){var t=n.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},p=function(e){var t=d(e.components);return n.createElement(l.Provider,{value:t},e.children)},u="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=d(r),m=a,f=u["".concat(l,".").concat(m)]||u[m]||c[m]||o;return r?n.createElement(f,i(i({ref:t},p),{},{components:r})):n.createElement(f,i({ref:t},p))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,i=new Array(o);i[0]=m;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:a,i[1]=s;for(var d=2;d{r.r(t),r.d(t,{assets:()=>p,contentTitle:()=>l,default:()=>m,frontMatter:()=>s,metadata:()=>d,toc:()=>u});var n=r(3117),a=r(102),o=(r(7294),r(3905)),i=["components"],s={id:"pitfalls",title:"Pitfalls"},l=void 0,d={unversionedId:"pitfalls",id:"pitfalls",title:"Pitfalls",description:"Performance tips",source:"@site/docs/pitfalls.md",sourceDirName:".",slug:"/pitfalls",permalink:"/immer/pitfalls",draft:!1,editUrl:"https://github.com/immerjs/immer/edit/main/website/docs/pitfalls.md",tags:[],version:"current",frontMatter:{id:"pitfalls",title:"Pitfalls"},sidebar:"Immer",previous:{title:"FAQ",permalink:"/immer/faq"},next:{title:"Built with Immer",permalink:"/immer/built-with"}},p={},u=[{value:"Performance tips",id:"performance-tips",level:3},{value:"Don't reassign the recipe argument",id:"dont-reassign-the-recipe-argument",level:3},{value:"Immer only supports unidirectional trees",id:"immer-only-supports-unidirectional-trees",level:3},{value:"Never explicitly return undefined
from a producer",id:"never-explicitly-return-undefined-from-a-producer",level:3},{value:"Don't mutate exotic objects",id:"dont-mutate-exotic-objects",level:3},{value:"Classes should be made draftable or not mutated",id:"classes-should-be-made-draftable-or-not-mutated",level:3},{value:"Only valid indices and length can be mutated on Arrays",id:"only-valid-indices-and-length-can-be-mutated-on-arrays",level:3},{value:"Data not originating from the state will never be drafted",id:"data-not-originating-from-the-state-will-never-be-drafted",level:3},{value:"Immer patches are not necessarily optimal",id:"immer-patches-are-not-necessarily-optimal",level:3},{value:"Always use the result of nested producers",id:"always-use-the-result-of-nested-producers",level:3},{value:"Drafts aren't referentially equal",id:"drafts-arent-referentially-equal",level:3}],c={toc:u};function m(e){var t=e.components,r=(0,a.Z)(e,i);return(0,o.kt)("wrapper",(0,n.Z)({},c,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("center",null,(0,o.kt)("div",{"data-ea-publisher":"immerjs","data-ea-type":"image",className:"horizontal bordered"})),(0,o.kt)("h3",{id:"performance-tips"},"Performance tips"),(0,o.kt)("p",null,"For performance tips, see ",(0,o.kt)("a",{parentName:"p",href:"/immer/performance#performance-tips"},"Performance Tips"),"."),(0,o.kt)("h3",{id:"dont-reassign-the-recipe-argument"},"Don't reassign the recipe argument"),(0,o.kt)("p",null,"Never reassign the ",(0,o.kt)("inlineCode",{parentName:"p"},"draft")," argument (example: ",(0,o.kt)("inlineCode",{parentName:"p"},"draft = myCoolNewState"),"). Instead, either modify the ",(0,o.kt)("inlineCode",{parentName:"p"},"draft")," or return a new state. See ",(0,o.kt)("a",{parentName:"p",href:"/immer/return"},"Returning data from producers"),"."),(0,o.kt)("h3",{id:"immer-only-supports-unidirectional-trees"},"Immer only supports unidirectional trees"),(0,o.kt)("p",null,"Immer assumes your state to be a unidirectional tree. That is, no object should appear twice in the tree, there should be no circular references. There should be exactly one path from the root to any node of the tree."),(0,o.kt)("h3",{id:"never-explicitly-return-undefined-from-a-producer"},"Never explicitly return ",(0,o.kt)("inlineCode",{parentName:"h3"},"undefined")," from a producer"),(0,o.kt)("p",null,"It is possible to return values from producers, except, it is not possible to return ",(0,o.kt)("inlineCode",{parentName:"p"},"undefined")," that way, as it is indistinguishable from not updating the draft at all! If you want to replace the draft with ",(0,o.kt)("inlineCode",{parentName:"p"},"undefined"),", just return ",(0,o.kt)("inlineCode",{parentName:"p"},"nothing")," from the producer."),(0,o.kt)("h3",{id:"dont-mutate-exotic-objects"},"Don't mutate exotic objects"),(0,o.kt)("p",null,"Immer ",(0,o.kt)("a",{parentName:"p",href:"https://github.com/immerjs/immer/issues/504"},"does not support exotic objects")," such as window.location."),(0,o.kt)("h3",{id:"classes-should-be-made-draftable-or-not-mutated"},"Classes should be made draftable or not mutated"),(0,o.kt)("p",null,"You will need to enable your own classes to work properly with Immer. For docs on the topic, check out the section on ",(0,o.kt)("a",{parentName:"p",href:"/immer/complex-objects"},"working with complex objects"),"."),(0,o.kt)("h3",{id:"only-valid-indices-and-length-can-be-mutated-on-arrays"},"Only valid indices and length can be mutated on Arrays"),(0,o.kt)("p",null,"For arrays, only numeric properties and the ",(0,o.kt)("inlineCode",{parentName:"p"},"length")," property can be mutated. Custom properties are not preserved on arrays."),(0,o.kt)("h3",{id:"data-not-originating-from-the-state-will-never-be-drafted"},"Data not originating from the state will never be drafted"),(0,o.kt)("p",null,"Note that data that comes from the closure, and not from the base state, will never be drafted, even when the data has become part of the new draft."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-javascript"},"function onReceiveTodo(todo) {\n const nextTodos = produce(todos, draft => {\n draft.todos[todo.id] = todo\n // Note, because 'todo' is coming from external, and not from the 'draft',\n // it isn't draft so the following modification affects the original todo!\n draft.todos[todo.id].done = true\n\n // The reason for this, is that it means that the behavior of the 2 lines above\n // is equivalent to code, making this whole process more consistent\n todo.done = true\n draft.todos[todo.id] = todo\n })\n}\n")),(0,o.kt)("h3",{id:"immer-patches-are-not-necessarily-optimal"},"Immer patches are not necessarily optimal"),(0,o.kt)("p",null,"The set of patches generated by Immer should be correct, that is, applying them to an equal base object should result in the same end state. However Immer does not guarantee the generated set of patches will be optimal, that is, the minimum set of patches possible."),(0,o.kt)("h3",{id:"always-use-the-result-of-nested-producers"},"Always use the result of nested producers"),(0,o.kt)("p",null,"Nested ",(0,o.kt)("inlineCode",{parentName:"p"},"produce")," calls are supported, but note that ",(0,o.kt)("inlineCode",{parentName:"p"},"produce")," will ",(0,o.kt)("em",{parentName:"p"},"always")," produce a new state. So even when passing a draft to a nested produce, the changes made by the inner produce won't be visible in the draft of the outer produce; those changes will only be visible in the output that the inner ",(0,o.kt)("inlineCode",{parentName:"p"},"produce")," returns. In other words, when using nested produce, you get a draft of a draft and the result of the inner produce should be merged back into the original draft (or returned). For example ",(0,o.kt)("inlineCode",{parentName:"p"},'produce(state, draft => { produce(draft.user, userDraft => { userDraft.name += "!" })})')," won't work as the output of the inner produce isn't used. The correct way to use nested producers is:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-javascript"},'produce(state, draft => {\n draft.user = produce(draft.user, userDraft => {\n userDraft.name += "!"\n })\n})\n')),(0,o.kt)("h3",{id:"drafts-arent-referentially-equal"},"Drafts aren't referentially equal"),(0,o.kt)("p",null,"Draft objects in Immer are wrapped in ",(0,o.kt)("inlineCode",{parentName:"p"},"Proxy"),", so you cannot use ",(0,o.kt)("inlineCode",{parentName:"p"},"==")," or ",(0,o.kt)("inlineCode",{parentName:"p"},"===")," to test equality between an original object and its equivalent draft (eg. when matching a specific element in an array). Instead, you can use the ",(0,o.kt)("inlineCode",{parentName:"p"},"original")," helper:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-javascript"},"const remove = produce((list, element) => {\n const index = list.indexOf(element) // this won't work!\n const index = original(list).indexOf(element) // do this instead\n if (index > -1) list.splice(index, 1)\n})\n\nconst values = [a, b, c]\nremove(values, a)\n")),(0,o.kt)("p",null,"If possible, it's recommended to perform the comparison outside the ",(0,o.kt)("inlineCode",{parentName:"p"},"produce")," function, or to use a unique identifier property like ",(0,o.kt)("inlineCode",{parentName:"p"},".id")," instead, to avoid needing to use ",(0,o.kt)("inlineCode",{parentName:"p"},"original"),"."))}m.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/assets/js/78f86360.36d82662.js b/assets/js/78f86360.36d82662.js
new file mode 100644
index 00000000..0fc1e0ba
--- /dev/null
+++ b/assets/js/78f86360.36d82662.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkimmer_website=self.webpackChunkimmer_website||[]).push([[973],{3905:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>h});var a=r(7294);function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function n(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function m(e){for(var t=1;t=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}var l=a.createContext({}),p=function(e){var t=a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):m(m({},t),e)),r},u=function(e){var t=p(e.components);return a.createElement(l.Provider,{value:t},e.children)},s="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var r=e.components,i=e.mdxType,n=e.originalType,l=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),s=p(r),d=i,h=s["".concat(l,".").concat(d)]||s[d]||c[d]||n;return r?a.createElement(h,m(m({ref:t},u),{},{components:r})):a.createElement(h,m({ref:t},u))}));function h(e,t){var r=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var n=r.length,m=new Array(n);m[0]=d;var o={};for(var l in t)hasOwnProperty.call(t,l)&&(o[l]=t[l]);o.originalType=e,o[s]="string"==typeof e?e:i,m[1]=o;for(var p=2;p{r.r(t),r.d(t,{assets:()=>u,contentTitle:()=>l,default:()=>d,frontMatter:()=>o,metadata:()=>p,toc:()=>s});var a=r(3117),i=r(102),n=(r(7294),r(3905)),m=["components"],o={id:"built-with",title:"Built with Immer"},l=void 0,p={unversionedId:"built-with",id:"built-with",title:"Built with Immer",description:"- react-copy-write Immutable state with a mutable API",source:"@site/docs/built-with.md",sourceDirName:".",slug:"/built-with",permalink:"/immer/built-with",draft:!1,editUrl:"https://github.com/immerjs/immer/edit/main/website/docs/built-with.md",tags:[],version:"current",frontMatter:{id:"built-with",title:"Built with Immer"},sidebar:"Immer",previous:{title:"Pitfalls",permalink:"/immer/pitfalls"},next:{title:"Supporting immer",permalink:"/immer/support"}},u={},s=[],c={toc:s};function d(e){var t=e.components,r=(0,i.Z)(e,m);return(0,n.kt)("wrapper",(0,a.Z)({},c,r,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("center",null,(0,n.kt)("div",{"data-ea-publisher":"immerjs","data-ea-type":"image",className:"horizontal bordered"})),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/aweary/react-copy-write"},"react-copy-write")," ",(0,n.kt)("em",{parentName:"li"},"Immutable state with a mutable API")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/reduxjs/redux-toolkit"},"redux-toolkit")," ",(0,n.kt)("em",{parentName:"li"},"The official, opinionated, batteries-included toolset for efficient Redux development")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://gist.github.com/kitze/fb65f527803a93fb2803ce79a792fff8"},"immer based handleActions")," ",(0,n.kt)("em",{parentName:"li"},"Boilerplate free actions for Redux")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/anish000kumar/redux-box"},"redux-box")," ",(0,n.kt)("em",{parentName:"li"},"Modular and easy-to-grasp redux based state management, with least boilerplate")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/jeffreyyoung/quick-redux"},"quick-redux")," ",(0,n.kt)("em",{parentName:"li"},"tools to make redux development quicker and easier")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/jamiebuilds/bey"},"bey")," ",(0,n.kt)("em",{parentName:"li"},"Simple immutable state for React using Immer")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/Maxvien/cool-store"},"cool-store")," ",(0,n.kt)("em",{parentName:"li"},"CoolStore is an immutable state store built on top of ImmerJS and RxJS")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/drcmda/immer-wieder#readme"},"immer-wieder")," ",(0,n.kt)("em",{parentName:"li"},"State management lib that combines React 16 Context and immer for Redux semantics")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/neurosnap/robodux"},"robodux")," ",(0,n.kt)("em",{parentName:"li"},"flexible way to reduce redux boilerplate")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/epeli/immer-reducer"},"immer-reducer")," ",(0,n.kt)("em",{parentName:"li"},"Type-safe and terse React (useReducer()) and Redux reducers with Typescript")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/knpwrs/redux-ts-utils"},"redux-ts-utils")," ",(0,n.kt)("em",{parentName:"li"},"Everything you need to create type-safe applications with Redux with a strong emphasis on simplicity")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/suchipi/react-state-tree"},"react-state-tree")," ",(0,n.kt)("em",{parentName:"li"},"Drop-in replacement for useState that persists your state into a redux-like state tree")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/salvoravida/redux-immer"},"redux-immer")," ",(0,n.kt)("em",{parentName:"li"},"is used to create an equivalent function of Redux combineReducers that works with ",(0,n.kt)("inlineCode",{parentName:"em"},"immer")," state. Like ",(0,n.kt)("inlineCode",{parentName:"em"},"redux-immutable")," but for ",(0,n.kt)("inlineCode",{parentName:"em"},"immer"))),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/nilsmehlhorn/ngrx-wieder"},"ngrx-wieder")," ",(0,n.kt)("em",{parentName:"li"},"Lightweight yet configurable solution for implementing undo-redo in Angular apps on top of NgRx and Immer")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/sep2/immer-yjs"},"immer-yjs")," ",(0,n.kt)("em",{parentName:"li"},"Combine ",(0,n.kt)("inlineCode",{parentName:"em"},"immer")," with CRDT library ",(0,n.kt)("inlineCode",{parentName:"em"},"y.js")," for easy json data manipulation")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/webstudio-is/immerhin"},"immerhin")," Sync state with undo/redo"),(0,n.kt)("li",{parentName:"ul"},"... and ",(0,n.kt)("a",{parentName:"li",href:"https://www.npmjs.com/browse/depended/immer"},"many more"))))}d.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/assets/js/7956b02b.15560020.js b/assets/js/7956b02b.15560020.js
new file mode 100644
index 00000000..a0a20d25
--- /dev/null
+++ b/assets/js/7956b02b.15560020.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkimmer_website=self.webpackChunkimmer_website||[]).push([[91],{3905:(e,t,r)=>{r.d(t,{Zo:()=>d,kt:()=>u});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function o(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=n.createContext({}),l=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},d=function(e){var t=l(e.components);return n.createElement(c.Provider,{value:t},e.children)},p="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,i=e.originalType,c=e.parentName,d=s(e,["components","mdxType","originalType","parentName"]),p=l(r),f=a,u=p["".concat(c,".").concat(f)]||p[f]||m[f]||i;return r?n.createElement(u,o(o({ref:t},d),{},{components:r})):n.createElement(u,o({ref:t},d))}));function u(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=r.length,o=new Array(i);o[0]=f;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s[p]="string"==typeof e?e:a,o[1]=s;for(var l=2;l{r.r(t),r.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>f,frontMatter:()=>s,metadata:()=>l,toc:()=>p});var n=r(3117),a=r(102),i=(r(7294),r(3905)),o=["components"],s={id:"async",title:"createDraft / finishDraft",sidebar_label:"createDraft / finishDraft"},c=void 0,l={unversionedId:"async",id:"async",title:"createDraft / finishDraft",description:"