Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 24, 2022 02:23 pm GMT

ES Modules & Import Maps: Back to the Future

There was a time when creating a web page meant creating an html file, yet nowadays it seems impossible to build any frontend without the bottomless pit of node_modules, yielding a finely chewed yet hefty bundle.xyz.js. Well, I got to learn that it might not be the case soon and, naturally, I feel the urge to share it with the rest of you.

Start with HTML

The barebones page in HTML5 looks like this:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body></body></html>

Hint: I got this template by typing html:5 in my VSCode thanks to Emmet abbreviations

Add a module

Now, let's say we would like to add a framework to it, Preact, for example.
We could do it like this:

 <body>    <div id="app"></div>    <script type="module">       import { h, Component, render } from "https://esm.sh/[email protected]";      import htm from "https://esm.sh/[email protected]";      // Initialize htm with Preact      const html = htm.bind(h);      function App(props) {        return html`<h1>Hello ${props.name}!</h1>`;      }      render(html`<${App} name="World" />`, document.getElementById("app"));    </script>  </body>

You can open the page in your browser as a simple file and see that it actually works. And that is the power of modern ECMAScript modules, that are defined by simply adding type="module" to a script tag.

For such a simple page it works great, but it can quickly become hard to work with once we add more pages.

Let's create another:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Counter</title>  </head>  <body>    <div id="app"></div>    <script type="module">      import { h, Component, render } from "https://esm.sh/[email protected]";      import { useState } from "https://esm.sh/[email protected]/hooks";      import htm from "https://esm.sh/[email protected]";      const html = htm.bind(h);      function Counter() {        const [count, setCount] = useState(0);        return html`<button onClick=${() => setCount((n) => n + 1)}>          Count: ${count}        </button>`;      }      render(html`<${Counter}/>`, document.getElementById("app"));    </script>  </body></html>

It's a good practice to specify the exact version of dependencies to avoid breaking changes, but updating those will be a mess, right?

Gladly, no! Because we could write an import-map!

Import Maps

An import map is a JSON that tells browser where to find a certain import by its alias. For example, we could create an import map with the following contents:

{  "imports": {    "preact": "https://esm.sh/[email protected]",    "preact/": "https://esm.sh/[email protected]/",    "htm": "https://esm.sh/[email protected]"  }}

And include it on both pages like this:

<body>    <div id="app"></div>    <script type="importmap">      {        "imports": {          "preact": "https://esm.sh/[email protected]",          "preact/": "https://esm.sh/[email protected]/",          "htm": "https://esm.sh/[email protected]"        }      }    </script>    <script type="module">      import { h, Component, render } from "preact";      import { useState } from "preact/hooks";      import htm from "htm";      // Initialize htm with Preact      const html = htm.bind(h);      function App(props) {        return html`<h1>Hello ${props.name}!</h1>`;      }      render(html`<${App} name="World" />`, document.getElementById("app"));    </script>  </body>

Quite neat, right? You could also use it to reference your own components and avoid long paths. Ah, future is bright!

... But we're not quite there yet.

Unfortunately, import maps are still unofficial draft and therefore some vital features, like including an external import map from a json file, is not supported or they are not supported at all in some browsers (e.g. Safari).

But I want to use it RIGHT NOW!

I hear you, so am I!

And I do have some good news for us: there is a mature JavaScript runtime, called deno that supports ESM and import maps out of the box. And fresh framework, for example, is a delight to work with.

I've recently migrated my blog to Fresh from Hugo and I can't wait to finally implement some of the dynamic features I have been postponing for too long.


Original Link: https://dev.to/valeriavg/es-modules-import-maps-back-to-the-future-56o

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To