<p dir="auto">Maybe Deno can make web apps more cloud native via a <code class="notranslate">loader</code> option</p>
<p dir="auto">deno.json</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;loaders&quot;: {
    &quot;*.vue&quot;: &quot;https://deno.land/x/aleph@1.0.0-alpha.66/loaders/vue.ts&quot;,
    &quot;*.vue!react&quot;: &quot;https://deno.land/x/vue-loader/vue-react.ts&quot;,
    &quot;*.(css|scss)&quot;: &quot;./style-loader.ts&quot;
  }
}"><pre class="notranslate">{
  <span class="pl-ent">"loaders"</span>: {
    <span class="pl-ent">"*.vue"</span>: <span class="pl-s"><span class="pl-pds">"</span>https://deno.land/x/aleph@1.0.0-alpha.66/loaders/vue.ts<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"*.vue!react"</span>: <span class="pl-s"><span class="pl-pds">"</span>https://deno.land/x/vue-loader/vue-react.ts<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"*.(css|scss)"</span>: <span class="pl-s"><span class="pl-pds">"</span>./style-loader.ts<span class="pl-pds">"</span></span>
  }
}</pre></div>
<p dir="auto">style-loader.ts</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { ModuleLoader, someHelperFunciton } from &quot;https://deno.land/std@0.143.0/loader/mod.ts&quot;

export default class StyleLoader implements ModuleLoader {
  // ...
}

declare module &quot;*.css&quot; {
  // ...
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">ModuleLoader</span><span class="pl-kos">,</span> <span class="pl-s1">someHelperFunciton</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"https://deno.land/std@0.143.0/loader/mod.ts"</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-smi">StyleLoader</span> <span class="pl-k">implements</span> <span class="pl-smi">ModuleLoader</span> <span class="pl-kos">{</span>
  <span class="pl-c">// ...</span>
<span class="pl-kos">}</span>

<span class="pl-k">declare</span> module <span class="pl-s">"*.css"</span> <span class="pl-kos">{</span>
  <span class="pl-c">// ...</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">SomeComponent.tsx</p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import style from &quot;https://esm.sh/some-lib/SomeComponent.css&quot;

// or even import a vue component to react component via a specific loader
import Button from &quot;https://esm.sh/some-ui-lib/Button.vue!react&quot;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s1">style</span> <span class="pl-k">from</span> <span class="pl-s">"https://esm.sh/some-lib/SomeComponent.css"</span>

<span class="pl-c">// or even import a vue component to react component via a specific loader</span>
<span class="pl-k">import</span> <span class="pl-smi">Button</span> <span class="pl-k">from</span> <span class="pl-s">"https://esm.sh/some-ui-lib/Button.vue!react"</span></pre></div>
<ul dir="auto">
<li>What loaders do is transform a non js/ts module to a ts modlue</li>
<li>Deno can provide a <code class="notranslate">cache</code> API for loaders</li>
</ul>
<p dir="auto">example: <a class="commit-link" href="https://github.com/denoland/deno/commit/0ceb554343ff3d311a19f027b7aa8f0806bbb162#diff-b9d53e20d7eb637f2c93606fc9b689b4L36"><tt>0ceb554</tt>#diff-b9d53e20d7eb637f2c93606fc9b689b4L36</a></p>