Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@artemave
artemave committed Jan 29, 2023
1 parent 107358a commit ef51973
Show file tree
Hide file tree
Showing 25 changed files with 62 additions and 62 deletions.
8 changes: 4 additions & 4 deletions blog/running-typescript-in-node-with-near-zero-compilation-cost/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ <h4 id="custom-loader" style="position:relative"><a href="#custom-loader" aria-l
<span class="token keyword">return</span> <span class="token function">nextLoad</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> context<span class="token punctuation">)</span>
<span class="token punctuation">}</span></code></pre></div>
<p>And the result is 4 times faster than the faster ts-node:</p>
<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">❯ node --loader ./loader.mjs ts/test.mts
<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">❯ node --loader ./loader.mjs ts/test.mts
0.09s user 0.04s system 109% cpu 0.115 total</code></pre></div>
<p>Node loaders is an experimental feature and as such produces the following warning:</p>
<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">(node:3045614) ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time
Expand All @@ -215,11 +215,11 @@ <h4 id="custom-loader" style="position:relative"><a href="#custom-loader" aria-l
<span class="token keyword">return</span> <span class="token function">defaultEmit</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">)</span>
<span class="token punctuation">}</span></code></pre></div>
<p>Add this to command line arguments and voila:</p>
<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">❯ node --require ./suppress-experimental-warnings.js --loader ./loader.mjs test.mts</code></pre></div>
<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">❯ node --require ./suppress-experimental-warnings.js --loader ./loader.mjs ts/test.mts</code></pre></div>
<p>Finally, adding those to all places where node is invoked (e.g. mocha) is a bit tedious, so you might prefer to have those switches in an environment variable (via dotenv or the like). For example, with this in my <a href="https://direnv.net/" target="_blank" rel="nofollow">.envrc</a>:</p>
<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">export NODE_OPTIONS=&quot;--require ${PWD}/suppress-experimental-warnings.js --loader=${PWD}/loader.mjs&quot;</code></pre></div>
<p>Now I can simply run node as usual:</p>
<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">❯ node ./test.mts</code></pre></div>
<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">❯ node ./ts/test.mts</code></pre></div>
<h3 id="bonus-tsx" style="position:relative"><a href="#bonus-tsx" aria-label="bonus tsx permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Bonus: tsx</h3>
<p>With the following update, our loader can transpile <code class="language-text">.tsx</code> just as well:</p>
<div class="gatsby-highlight" data-language="diff"><pre class="language-diff"><code class="language-diff"><span class="token coord">5c5</span>
Expand All @@ -245,7 +245,7 @@ <h3 id="bonus-tsx" style="position:relative"><a href="#bonus-tsx" aria-label="bo
} Foo bar
node --loader ./loader-tsx.mjs ts/test-tsx.mts 0.13s user 0.05s system 114% cpu 0.160 total</code></pre></div>
<h3 id="type-checking" style="position:relative"><a href="#type-checking" aria-label="type checking permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Type checking</h3>
<p>The code compiles and actually works, but try to run <code class="language-text">tsc</code> and it’s all over the place. This is an unfortunate side effect of using effectively two different typescript configurations - one for type checking with <code class="language-text">tsc</code> and another one for compiling in the <code class="language-text">loader.mjs</code>. So now we need to tweak <code class="language-text">tsconfig.json</code> to marry up with the loader’s one. Good news is, starting from typescript 5 (not yet released as of this writing), this is not hard:</p>
<p>The code compiles and actually works, but try to run <code class="language-text">npx tsc</code> and it’s all over the place. This is an unfortunate side effect of using effectively two different typescript configurations - one for type checking with <code class="language-text">tsc</code> and another one for compiling in the <code class="language-text">loader.mjs</code>. So now we need to tweak <code class="language-text">tsconfig.json</code> to marry up with the loader’s one. Good news is, starting from typescript 5 (not yet released as of this writing), this is not hard:</p>
<div class="gatsby-highlight" data-language="json"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>
<span class="token property">&quot;compilerOptions&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">&quot;noEmit&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// disable compilation</span>
Expand Down
2 changes: 1 addition & 1 deletion case-studies/camden/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@
/static/52779ba9875277eeaecfae29a839727a/a1eb1/laptop-screenshot.jpg 800w,
/static/52779ba9875277eeaecfae29a839727a/8275e/laptop-screenshot.jpg 900w" sizes="(max-width: 900px) 100vw, 900px" /><img loading="lazy" sizes="(max-width: 900px) 100vw, 900px" srcset="/static/52779ba9875277eeaecfae29a839727a/64b17/laptop-screenshot.jpg 400w,
/static/52779ba9875277eeaecfae29a839727a/a1eb1/laptop-screenshot.jpg 800w,
/static/52779ba9875277eeaecfae29a839727a/8275e/laptop-screenshot.jpg 900w" src="/static/52779ba9875277eeaecfae29a839727a/8275e/laptop-screenshot.jpg" alt="laptop-screenshot" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture></noscript></div></div></div></div></div><div style="background-color:#ebede8;padding-left:0;padding-right:0" class="Content__Container-sc-1g3f5s5-0 Content-sc-1g3f5s5-1 Content__ContentFull-sc-1g3f5s5-3 gVWHDU"><div class="Content__Container-sc-1g3f5s5-0 MarkdownContainer-sc-1s12zg4-0 bgoDDE"><div class="PrevNext__Wrapper-sc-fknkt2-0 dntuTT"><div class="PrevNext__Prev-sc-fknkt2-1 kTAHax"><a style="display:flex;align-items:center;justify-content:center" duration="0.55" hex="#07141d" href="/case-studies/imd/"><svg viewBox="0 0 24 24" size="64" style="margin-right:0.5rem" class="CircleIcon__Wrapper-sc-1igkh6j-0 fcEJLH"><circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="0.75" class="CircleIcon__Circle-sc-1igkh6j-1 kkyNDe"></circle><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="0.55"><path d="M15.249 6l-6.498 6.015L15.249 18"></path></g></svg><div><span class="PrevNext__Label-sc-fknkt2-3 jgXSkq">Previous:</span>IMD Business School</div></a></div><div class="PrevNext__Next-sc-fknkt2-2 mmpKp"><a style="display:flex;align-items:center;justify-content:center" duration="0.55" hex="#07141d" href="/case-studies/farmdrop/"><div><span class="PrevNext__Label-sc-fknkt2-3 jgXSkq">Next:</span>Farmdrop</div><svg viewBox="0 0 24 24" size="64" style="margin-left:0.5rem" class="CircleIcon__Wrapper-sc-1igkh6j-0 fcEJLH"><circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="0.75" class="CircleIcon__Circle-sc-1igkh6j-1 kkyNDe"></circle><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="0.55"><path d="M8.751 6l6.498 6.015L8.751 18"></path></g></svg></a></div></div></div></div></div><div class="layout__FooterBackground-sc-2sv4ue-0 kNTPos"><div class="Content__Container-sc-1g3f5s5-0 FooterContent__Footer-sc-14lp62o-0 hkWMSW"><div class="Content__Inner-sc-1g3f5s5-4 FooterContent__FooterInner-sc-14lp62o-1 hqzNIg"><div class="FooterContent__Copyright-sc-14lp62o-2 iOqZkn">©<!-- -->2023<!-- --> Featurist Ltd.</div><div class="FooterContent__SocialWrapper-sc-14lp62o-3 iNQBQW"><div class="FooterContent__List-sc-14lp62o-4 iProPY"><a href="https://github.com/featurist" target="_blank" alt="Github @featurist" class="FooterContent__ListItem-sc-14lp62o-5 emjNbC"><svg viewBox="0 0 24 24" size="42" class="CircleIcon__Wrapper-sc-1igkh6j-0 bLYTqr"><circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="0.75" class="CircleIcon__Circle-sc-1igkh6j-1 kkyNDe"></circle><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="0.55"><path d="M12 3.883a8.02 8.02 0 0 0-2.535 15.628c.401.074.53-.174.53-.385v-1.493c-2.23.485-2.695-.947-2.695-.947-.365-.926-.891-1.173-.891-1.173-.727-.498.056-.487.056-.487.805.056 1.229.826 1.229.826.715 1.226 1.876.872 2.333.667.072-.518.28-.872.51-1.072-1.781-.204-3.654-.892-3.654-3.963 0-.877.314-1.592.826-2.153-.083-.202-.357-1.018.078-2.122 0 0 .674-.215 2.206.822A7.668 7.668 0 0 1 12 7.761a7.69 7.69 0 0 1 2.009.27c1.531-1.037 2.203-.822 2.203-.822.436 1.104.162 1.92.079 2.122.514.561.825 1.277.825 2.153 0 3.079-1.876 3.758-3.661 3.956.287.249.55.737.55 1.485v2.201c0 .213.128.463.535.384A8.02 8.02 0 0 0 12 3.883z"></path></g></svg></a><a href="https://twitter.com/featurists" target="_blank" alt="Twitter @featurists" class="FooterContent__ListItem-sc-14lp62o-5 emjNbC"><svg viewBox="0 0 24 24" size="42" class="CircleIcon__Wrapper-sc-1igkh6j-0 bLYTqr"><circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="0.75" class="CircleIcon__Circle-sc-1igkh6j-1 kkyNDe"></circle><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="0.55"><path d="M18.505 7.965a5.29 5.29 0 0 1-1.533.42 2.67 2.67 0 0 0 1.174-1.477 5.352 5.352 0 0 1-1.695.648 2.672 2.672 0 0 0-4.549 2.434A7.578 7.578 0 0 1 6.4 7.202a2.674 2.674 0 0 0 .826 3.564 2.654 2.654 0 0 1-1.208-.334c-.03 1.236.857 2.393 2.141 2.651a2.68 2.68 0 0 1-1.206.045 2.671 2.671 0 0 0 2.494 1.854 5.367 5.367 0 0 1-3.952 1.106 7.556 7.556 0 0 0 4.091 1.199c4.957 0 7.757-4.186 7.587-7.94a5.418 5.418 0 0 0 1.332-1.382z"></path></g></svg></a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
/static/52779ba9875277eeaecfae29a839727a/8275e/laptop-screenshot.jpg 900w" src="/static/52779ba9875277eeaecfae29a839727a/8275e/laptop-screenshot.jpg" alt="laptop-screenshot" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture></noscript></div></div></div></div></div><div style="background-color:#ebede8;padding-left:0;padding-right:0" class="Content__Container-sc-1g3f5s5-0 Content-sc-1g3f5s5-1 Content__ContentFull-sc-1g3f5s5-3 gVWHDU"><div class="Content__Container-sc-1g3f5s5-0 MarkdownContainer-sc-1s12zg4-0 bgoDDE"><div class="PrevNext__Wrapper-sc-fknkt2-0 dntuTT"><div class="PrevNext__Prev-sc-fknkt2-1 kTAHax"><a style="display:flex;align-items:center;justify-content:center" duration="0.55" hex="#07141d" href="/case-studies/imd/"><svg viewBox="0 0 24 24" size="64" style="margin-right:0.5rem" class="CircleIcon__Wrapper-sc-1igkh6j-0 fcEJLH"><circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="0.75" class="CircleIcon__Circle-sc-1igkh6j-1 kkyNDe"></circle><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="0.55"><path d="M15.249 6l-6.498 6.015L15.249 18"></path></g></svg><div><span class="PrevNext__Label-sc-fknkt2-3 jgXSkq">Previous:</span>IMD Business School</div></a></div><div class="PrevNext__Next-sc-fknkt2-2 mmpKp"><a style="display:flex;align-items:center;justify-content:center" duration="0.55" hex="#07141d" href="/case-studies/scribeasy/"><div><span class="PrevNext__Label-sc-fknkt2-3 jgXSkq">Next:</span>Scribeasy</div><svg viewBox="0 0 24 24" size="64" style="margin-left:0.5rem" class="CircleIcon__Wrapper-sc-1igkh6j-0 fcEJLH"><circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="0.75" class="CircleIcon__Circle-sc-1igkh6j-1 kkyNDe"></circle><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="0.55"><path d="M8.751 6l6.498 6.015L8.751 18"></path></g></svg></a></div></div></div></div></div><div class="layout__FooterBackground-sc-2sv4ue-0 kNTPos"><div class="Content__Container-sc-1g3f5s5-0 FooterContent__Footer-sc-14lp62o-0 hkWMSW"><div class="Content__Inner-sc-1g3f5s5-4 FooterContent__FooterInner-sc-14lp62o-1 hqzNIg"><div class="FooterContent__Copyright-sc-14lp62o-2 iOqZkn">©<!-- -->2023<!-- --> Featurist Ltd.</div><div class="FooterContent__SocialWrapper-sc-14lp62o-3 iNQBQW"><div class="FooterContent__List-sc-14lp62o-4 iProPY"><a href="https://github.com/featurist" target="_blank" alt="Github @featurist" class="FooterContent__ListItem-sc-14lp62o-5 emjNbC"><svg viewBox="0 0 24 24" size="42" class="CircleIcon__Wrapper-sc-1igkh6j-0 bLYTqr"><circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="0.75" class="CircleIcon__Circle-sc-1igkh6j-1 kkyNDe"></circle><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="0.55"><path d="M12 3.883a8.02 8.02 0 0 0-2.535 15.628c.401.074.53-.174.53-.385v-1.493c-2.23.485-2.695-.947-2.695-.947-.365-.926-.891-1.173-.891-1.173-.727-.498.056-.487.056-.487.805.056 1.229.826 1.229.826.715 1.226 1.876.872 2.333.667.072-.518.28-.872.51-1.072-1.781-.204-3.654-.892-3.654-3.963 0-.877.314-1.592.826-2.153-.083-.202-.357-1.018.078-2.122 0 0 .674-.215 2.206.822A7.668 7.668 0 0 1 12 7.761a7.69 7.69 0 0 1 2.009.27c1.531-1.037 2.203-.822 2.203-.822.436 1.104.162 1.92.079 2.122.514.561.825 1.277.825 2.153 0 3.079-1.876 3.758-3.661 3.956.287.249.55.737.55 1.485v2.201c0 .213.128.463.535.384A8.02 8.02 0 0 0 12 3.883z"></path></g></svg></a><a href="https://twitter.com/featurists" target="_blank" alt="Twitter @featurists" class="FooterContent__ListItem-sc-14lp62o-5 emjNbC"><svg viewBox="0 0 24 24" size="42" class="CircleIcon__Wrapper-sc-1igkh6j-0 bLYTqr"><circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="0.75" class="CircleIcon__Circle-sc-1igkh6j-1 kkyNDe"></circle><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="0.55"><path d="M18.505 7.965a5.29 5.29 0 0 1-1.533.42 2.67 2.67 0 0 0 1.174-1.477 5.352 5.352 0 0 1-1.695.648 2.672 2.672 0 0 0-4.549 2.434A7.578 7.578 0 0 1 6.4 7.202a2.674 2.674 0 0 0 .826 3.564 2.654 2.654 0 0 1-1.208-.334c-.03 1.236.857 2.393 2.141 2.651a2.68 2.68 0 0 1-1.206.045 2.671 2.671 0 0 0 2.494 1.854 5.367 5.367 0 0 1-3.952 1.106 7.556 7.556 0 0 0 4.091 1.199c4.957 0 7.757-4.186 7.587-7.94a5.418 5.418 0 0 0 1.332-1.382z"></path></g></svg></a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>

function gaOptout(){document.cookie=disableStr+'=true; expires=Thu, 31 Dec 2099 23:59:59 UTC;path=/',window[disableStr]=!0}var gaProperty='UA-34932868-1',disableStr='ga-disable-'+gaProperty;document.cookie.indexOf(disableStr+'=true')>-1&&(window[disableStr]=!0);
if(!(parseInt(navigator.doNotTrack) === 1 || parseInt(window.doNotTrack) === 1 || parseInt(navigator.msDoNotTrack) === 1 || navigator.doNotTrack === "yes")) {
Expand Down
Loading

0 comments on commit ef51973

Please sign in to comment.