14.964eff51382135c42f9d.chunk.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{270:function(n,s,a){"use strict";a.r(s),s.default='<p>If <a href="/concepts/hot-module-replacement">Hot Module Replacement</a> has been enabled via the <a href="/plugins/hot-module-replacement-plugin"><code>HotModuleReplacementPlugin</code></a>, its interface will be exposed under the <a href="/api/module-variables/#modulehot-webpack-specific"><code>module.hot</code> property</a>. Typically, users will check to see if the interface is accessible, then begin working with it. As an example, here\'s how you might <code>accept</code> an updated module:</p>\n<pre><code class="hljs language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span>module<span class="token punctuation">.</span>hot<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  module<span class="token punctuation">.</span>hot<span class="token punctuation">.</span><span class="token function">accept</span><span class="token punctuation">(</span><span class="token string">\'./library.js\'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token comment">// Do something with the updated library module...</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>\n<p>The following methods are supported...</p>\n<h2 id="module-api">Module API<a href="#module-api" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<h3 id="accept"><code>accept</code><a href="#accept" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Accept updates for the given <code>dependencies</code> and fire a <code>callback</code> to react to those updates.</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>hot<span class="token punctuation">.</span><span class="token function">accept</span><span class="token punctuation">(</span>\n  dependencies<span class="token punctuation">,</span> <span class="token comment">// Either a string or an array of strings</span>\n  callback <span class="token comment">// Function to fire when the dependencies are updated</span>\n<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<p>When using ESM <code>import</code> all imported symbols from <code>dependencies</code> are automatically updated. Note: The dependency string must match exactly with the <code>from</code> string in the <code>import</code>. In some cases <code>callback</code> can even be omitted. Using <code>require()</code> in the <code>callback</code> doesn\'t make sense here.</p>\n<p>When using CommonJS you need to update dependencies manually by using <code>require()</code> in the <code>callback</code>. Omitting the <code>callback</code> doesn\'t make sense here.</p>\n<h3 id="accept-self"><code>accept</code> (self)<a href="#accept-self" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Accept updates for itself.</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>hot<span class="token punctuation">.</span><span class="token function">accept</span><span class="token punctuation">(</span>\n  errorHandler <span class="token comment">// Function to handle errors when evaluating the new version</span>\n<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<p>When this module or dependencies are updated, this module can be disposed and re-evaluated without informing parents. This makes sense if this module has no exports (or exports are updated in another way).</p>\n<p>The <code>errorHandler</code> is fired when the evaluation of this module (or dependencies) has thrown an exception.</p>\n<h3 id="decline"><code>decline</code><a href="#decline" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Reject updates for the given <code>dependencies</code> forcing the update to fail with a <code>\'decline\'</code> code.</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>hot<span class="token punctuation">.</span><span class="token function">decline</span><span class="token punctuation">(</span>\n  dependencies <span class="token comment">// Either a string or an array of strings</span>\n<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<p>Flag a dependency as not-update-able. This makes sense when changing exports of this dependency can be handled or handling is not implemented yet. Depending on your HMR management code an update to these dependencies (or unaccepted dependencies of it) usually causes a full-reload of the page.</p>\n<h3 id="decline-self"><code>decline</code> (self)<a href="#decline-self" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Reject updates for itself.</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>hot<span class="token punctuation">.</span><span class="token function">decline</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<p>Flag this module as not-update-able. This makes sense when this module has irreversible side-effects, or HMR handling is not implemented for this module yet. Depending on your HMR management code an update to this module (or unaccepted dependencies) usually causes a full-reload of the page.</p>\n<h3 id="dispose-or-adddisposehandler"><code>dispose</code> (or <code>addDisposeHandler</code>)<a href="#dispose-or-adddisposehandler" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Add a handler which is executed when the current module code is replaced. This should be used to remove any persistent resource you have claimed or created. If you want to transfer state to the updated module, add it to the given <code>data</code> parameter. This object will be available at <code>module.hot.data</code> after the update.</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>hot<span class="token punctuation">.</span><span class="token function">dispose</span><span class="token punctuation">(</span>data <span class="token operator">=></span> <span class="token punctuation">{</span>\n  <span class="token comment">// Clean up and pass data to the updated module...</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<h3 id="removedisposehandler"><code>removeDisposeHandler</code><a href="#removedisposehandler" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Remove the handler added via <code>dispose</code> or <code>addDisposeHandler</code>.</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>hot<span class="token punctuation">.</span><span class="token function">removeDisposeHandler</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<h2 id="management-api">Management API<a href="#management-api" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<h3 id="status"><code>status</code><a href="#status" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Retrieve the current status of the hot module replacement process.</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>hot<span class="token punctuation">.</span><span class="token function">status</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Will return one of the following strings...</span></code></pre>\n<table>\n<thead>\n<tr>\n<th>Status</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><div class="title"><p>Status</p><p>Description</p></div>\n<div class="content"><p>idle<p class="description mobile">The process is waiting for a call to <code>check</code> (see below)</p></p></div></td>\n<td class="description desktop">The process is waiting for a call to \n<code>check</code>\n (see below)</td>\n</tr>\n<tr>\n<td><div class="title"><p>Status</p><p>Description</p></div>\n<div class="content"><p>check<p class="description mobile">The process is checking for updates</p></p></div></td>\n<td class="description desktop">The process is checking for updates</td>\n</tr>\n<tr>\n<td><div class="title"><p>Status</p><p>Description</p></div>\n<div class="content"><p>prepare<p class="description mobile">The process is getting ready for the update (e.g. downloading the updated module)</p></p></div></td>\n<td class="description desktop">The process is getting ready for the update (e.g. downloading the updated module)</td>\n</tr>\n<tr>\n<td><div class="title"><p>Status</p><p>Description</p></div>\n<div class="content"><p>ready<p class="description mobile">The update is prepared and available</p></p></div></td>\n<td class="description desktop">The update is prepared and available</td>\n</tr>\n<tr>\n<td><div class="title"><p>Status</p><p>Description</p></div>\n<div class="content"><p>dispose<p class="description mobile">The process is calling the <code>dispose</code> handlers on the modules that will be replaced</p></p></div></td>\n<td class="description desktop">The process is calling the \n<code>dispose</code>\n handlers on the modules that will be replaced</td>\n</tr>\n<tr>\n<td><div class="title"><p>Status</p><p>Description</p></div>\n<div class="content"><p>apply<p class="description mobile">The process is calling the <code>accept</code> handlers and re-executing self-accepted modules</p></p></div></td>\n<td class="description desktop">The process is calling the \n<code>accept</code>\n handlers and re-executing self-accepted modules</td>\n</tr>\n<tr>\n<td><div class="title"><p>Status</p><p>Description</p></div>\n<div class="content"><p>abort<p class="description mobile">An update was aborted, but the system is still in its previous state</p></p></div></td>\n<td class="description desktop">An update was aborted, but the system is still in its previous state</td>\n</tr>\n<tr>\n<td><div class="title"><p>Status</p><p>Description</p></div>\n<div class="content"><p>fail<p class="description mobile">An update has thrown an exception and the system\'s state has been compromised</p></p></div></td>\n<td class="description desktop">An update has thrown an exception and the system\'s state has been compromised</td>\n</tr>\n</tbody>\n</table>\n<h3 id="check"><code>check</code><a href="#check" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Test all loaded modules for updates and, if updates exist, <code>apply</code> them.</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>hot<span class="token punctuation">.</span><span class="token function">check</span><span class="token punctuation">(</span>autoApply<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>outdatedModules <span class="token operator">=></span> <span class="token punctuation">{</span>\n  <span class="token comment">// outdated modules...</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span>error <span class="token operator">=></span> <span class="token punctuation">{</span>\n  <span class="token comment">// catch errors</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<p>The <code>autoApply</code> parameter can either be a boolean or <code>options</code> to pass to the <code>apply</code> method when called.</p>\n<h3 id="apply"><code>apply</code><a href="#apply" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Continue the update process (as long as <code>module.hot.status() === \'ready\'</code>).</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>hot<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>outdatedModules <span class="token operator">=></span> <span class="token punctuation">{</span>\n  <span class="token comment">// outdated modules...</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span>error <span class="token operator">=></span> <span class="token punctuation">{</span>\n  <span class="token comment">// catch errors</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<p>The optional <code>options</code> object can include the following properties:</p>\n<ul>\n<li><code>ignoreUnaccepted</code> (boolean): Ignore changes made to unaccepted modules.</li>\n<li><code>ignoreDeclined</code> (boolean): Ignore changes made to declined modules.</li>\n<li><code>ignoreErrored</code> (boolean): Ignore errors thrown in accept handlers, error handlers and while reevaluating module.</li>\n<li><code>onDeclined</code> (function(info)): Notifier for declined modules</li>\n<li><code>onUnaccepted</code> (function(info)): Notifier for unaccepted modules</li>\n<li><code>onAccepted</code> (function(info)): Notifier for accepted modules</li>\n<li><code>onDisposed</code> (function(info)): Notifier for disposed modules</li>\n<li><code>onErrored</code> (function(info)): Notifier for errors</li>\n</ul>\n<p>The <code>info</code> parameter will be an object containing some of the following values:</p>\n\x3c!-- eslint-skip --\x3e\n<pre><code class="hljs language-js"><span class="token punctuation">{</span>\n  type<span class="token punctuation">:</span> <span class="token string">"self-declined"</span> <span class="token operator">|</span> <span class="token string">"declined"</span> <span class="token operator">|</span>\n        <span class="token string">"unaccepted"</span> <span class="token operator">|</span> <span class="token string">"accepted"</span> <span class="token operator">|</span>\n        <span class="token string">"disposed"</span> <span class="token operator">|</span> <span class="token string">"accept-errored"</span> <span class="token operator">|</span>\n        <span class="token string">"self-accept-errored"</span> <span class="token operator">|</span> <span class="token string">"self-accept-error-handler-errored"</span><span class="token punctuation">,</span>\n  moduleId<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token comment">// The module in question.</span>\n  dependencyId<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token comment">// For errors: the module id owning the accept handler.</span>\n  chain<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// For declined/accepted/unaccepted: the chain from where the update was propagated.</span>\n  parentId<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token comment">// For declined: the module id of the declining parent</span>\n  outdatedModules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// For accepted: the modules that are outdated and will be disposed</span>\n  outdatedDependencies<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token comment">// For accepted: The location of accept handlers that will handle the update</span>\n    <span class="token number">5</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  error<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// For errors: the thrown error</span>\n  originalError<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span> <span class="token comment">// For self-accept-error-handler-errored:</span>\n                                <span class="token comment">// the error thrown by the module before the error handler tried to handle it.</span>\n<span class="token punctuation">}</span></code></pre>\n<h3 id="addstatushandler"><code>addStatusHandler</code><a href="#addstatushandler" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Register a function to listen for changes in <code>status</code>.</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>hot<span class="token punctuation">.</span><span class="token function">addStatusHandler</span><span class="token punctuation">(</span>status <span class="token operator">=></span> <span class="token punctuation">{</span>\n  <span class="token comment">// React to the current status...</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<h3 id="removestatushandler"><code>removeStatusHandler</code><a href="#removestatushandler" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Remove a registered status handler.</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>hot<span class="token punctuation">.</span><span class="token function">removeStatusHandler</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n'}}]);