<p dir="auto">Now I know this is something not inline with web specs, with how Deno handles modules and all. But an API to "invalidate" a module would be so handy for implementing some rudimentary HMR. <code class="notranslate">import.meta.invalidate('./path/to/module.js')</code> for instance</p>
<p dir="auto">I've got this <code class="notranslate">dev.ts</code> module which I run with <code class="notranslate">deno run -A dev.ts ./server.tsx</code> that creates a Worker of <code class="notranslate">./server.tsx</code>.<br>
I'm then watching project directory for changes and posting a message to that worker. Server is then listening for messages posted to it and sending a message via websocket to the browser to reload.... phew. Problem is, any modules imported in the server, aren't "fresh". So on my frontend, the window reloads, yet I get hydration mismatch, since the "server" is still using the old modules.</p>
<p dir="auto">I hope this makes sense.</p>
<p dir="auto">My <code class="notranslate">dev.ts</code> contents below. Server is kind of irrelavant, so have left that out of this issue.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {
  join,
  SEP,
  toFileUrl,
} from &quot;https://deno.land/std@0.153.0/path/mod.ts&quot;;

const cwd = join(Deno.cwd(), SEP);
const watcher = Deno.watchFs(cwd);

// args[0] will be something like ./server.tsx
const mainModule = new URL(Deno.args[0], toFileUrl(cwd)).href;

let mainWorker = new Worker(mainModule, {
  type: &quot;module&quot;,
  name: &quot;main&quot;,
});

for await (const event of watcher) {
  if (event.kind === &quot;modify&quot;) {
    mainWorker.postMessage({
      type: &quot;reload&quot;,
      paths: [mainModule, ...event.paths],
    });

    queueMicrotask(() =&gt; {
      mainWorker.terminate();
      mainWorker = new Worker(mainModule + `?t=${new Date().getTime()}`, {
        type: &quot;module&quot;,
        name: &quot;main&quot;,
      });

      console.log(Deno.resources());
    });
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span>
  <span class="pl-s1">join</span><span class="pl-kos">,</span>
  <span class="pl-smi">SEP</span><span class="pl-kos">,</span>
  <span class="pl-s1">toFileUrl</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"https://deno.land/std@0.153.0/path/mod.ts"</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">cwd</span> <span class="pl-c1">=</span> <span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-smi">Deno</span><span class="pl-kos">.</span><span class="pl-en">cwd</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-smi">SEP</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">watcher</span> <span class="pl-c1">=</span> <span class="pl-smi">Deno</span><span class="pl-kos">.</span><span class="pl-en">watchFs</span><span class="pl-kos">(</span><span class="pl-s1">cwd</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// args[0] will be something like ./server.tsx</span>
<span class="pl-k">const</span> <span class="pl-s1">mainModule</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">URL</span><span class="pl-kos">(</span><span class="pl-smi">Deno</span><span class="pl-kos">.</span><span class="pl-c1">args</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-en">toFileUrl</span><span class="pl-kos">(</span><span class="pl-s1">cwd</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">href</span><span class="pl-kos">;</span>

<span class="pl-k">let</span> <span class="pl-s1">mainWorker</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">Worker</span><span class="pl-kos">(</span><span class="pl-s1">mainModule</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
  <span class="pl-c1">type</span>: <span class="pl-s">"module"</span><span class="pl-kos">,</span>
  <span class="pl-c1">name</span>: <span class="pl-s">"main"</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">for</span> <span class="pl-k">await</span> <span class="pl-kos">(</span><span class="pl-k">const</span> <span class="pl-s1">event</span> <span class="pl-k">of</span> <span class="pl-s1">watcher</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">kind</span> <span class="pl-c1">===</span> <span class="pl-s">"modify"</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">mainWorker</span><span class="pl-kos">.</span><span class="pl-en">postMessage</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-c1">type</span>: <span class="pl-s">"reload"</span><span class="pl-kos">,</span>
      <span class="pl-c1">paths</span>: <span class="pl-kos">[</span><span class="pl-s1">mainModule</span><span class="pl-kos">,</span> ...<span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">paths</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-en">queueMicrotask</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
      <span class="pl-s1">mainWorker</span><span class="pl-kos">.</span><span class="pl-en">terminate</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-s1">mainWorker</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">Worker</span><span class="pl-kos">(</span><span class="pl-s1">mainModule</span> <span class="pl-c1">+</span> <span class="pl-s">`?t=<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-k">new</span> <span class="pl-smi">Date</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">getTime</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
        <span class="pl-c1">type</span>: <span class="pl-s">"module"</span><span class="pl-kos">,</span>
        <span class="pl-c1">name</span>: <span class="pl-s">"main"</span><span class="pl-kos">,</span>
      <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

      <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-smi">Deno</span><span class="pl-kos">.</span><span class="pl-en">resources</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Basically, assume we have a file <code class="notranslate">1.ts</code>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import &quot;2.ts&quot;;
console.log(&quot;1.ts&quot;);"><pre class="notranslate"><code class="notranslate">import "2.ts";
console.log("1.ts");
</code></pre></div>
<p dir="auto">and another file <code class="notranslate">2.ts</code>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import &quot;1.ts&quot;;
console.log(&quot;2.ts&quot;);"><pre class="notranslate"><code class="notranslate">import "1.ts";
console.log("2.ts");
</code></pre></div>
<p dir="auto">With latest master, running <code class="notranslate">deno 1.ts --recompile</code> would generate the following:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Compiling /Users/kevinqian/Desktop/Programming/Deno/test/deps/1.ts
Compiling /Users/kevinqian/Desktop/Programming/Deno/test/deps/2.ts
Compiling /Users/kevinqian/Desktop/Programming/Deno/test/deps/1.ts  &lt;== duplicate compilation
2.ts
1.ts"><pre class="notranslate"><code class="notranslate">Compiling /Users/kevinqian/Desktop/Programming/Deno/test/deps/1.ts
Compiling /Users/kevinqian/Desktop/Programming/Deno/test/deps/2.ts
Compiling /Users/kevinqian/Desktop/Programming/Deno/test/deps/1.ts  &lt;== duplicate compilation
2.ts
1.ts
</code></pre></div>