Test if Import maps type is supported on the html script element

example-module-w-import-maps.js

/*
The import map is defined using a JSON object inside a <script> element with the type attribute set to importmap. 
Note that an import map only applies to the document — the specification does not cover how to apply an import map in a worker or worklet context.

With this map you can now use the property names above as module specifiers. 
If there is no trailing forward slash on the module specifier key then the whole module specifier key is matched and substituted. 
For example, below we match bare module names, and remap a URL to another path.
*/

// Bare module names as module specifiers
import { name as squareNameOne } from "shapes";
import { name as squareNameTwo } from "shapes/square";

// Remap a URL to another URL
import { name as squareNameThree } from "https://example.com/shapes/square.js";

/* 
If the module specifier has a trailing forward slash then the value must have one as well, 
and the key is matched as a "path prefix". This allows remapping of whole classes of URLs.
*/
// Remap a URL as a prefix ( https://example.com/shapes/)
import { name as squareNameFour } from "https://example.com/shapes/moduleshapes/square.js";

importing-using-module-object.js

/*
Creating a module object
My preferred solution is to import each module's features inside a module object. 
The following syntax form does that:

The square.js module export code:
export { name, draw, reportArea, reportPerimeter };

All the exports from the imported module,
are then available as members of an object, 
effectively giving it its own namespace.
*/
import * as Square from "./modules/square.js";

const square = Square.draw(myCanvas.ctx, 50, 50, 100, "blue");
Square.reportArea(square.length, reportList);
Square.reportPerimeter(square.length, reportList);

index.html

<!--
Import maps allow developers to instead specify almost any text they want in the module specifier when importing a module; 
the map provides a corresponding value that will replace the text when the module URL is resolved.

For example, the imports key in the import map below defines a "module specifier map" JSON object where the property names can be used as module specifiers, 
and the corresponding values will be substituted when the browser resolves the module URL. 
The values must be absolute or relative URLs. 
Relative URLs are resolved to absolute URL addresses using the base URL of the document containing the import map.
-->
<script type="importmap">
  {
    "imports": {
      "shapes": "./shapes/square.js",
      "shapes/square": "./modules/shapes/square.js",
      "https://example.com/shapes/square.js": "./shapes/square.js",
      "https://example.com/shapes/": "/shapes/square/",
      "../shapes/square": "./shapes/square.js"
    }
  }
</script>

loading-non-javascript-objects.js

/*
Loading non-JavaScript resources
One exciting feature that a unified module architecture brings is the ability to load non-JavaScript resources as modules. 
For example, you can import JSON as a JavaScript object, or import CSS as a CSSStyleSheet object.

You must explicitly declare what kind of resource you are importing. 
By default, the browser assumes that the resource is JavaScript, and will throw an error if the resolved resource is something else. 
To import JSON, CSS, or other types of resource, use the import attributes syntax:
*/
import colors from "./colors.json" with { type: "json" };
import styles from "./styles.css" with { type: "css" };

/*
Browsers will perform validation on the module type, 
and fail if, for example, ./data.json does not resolve to a JSON file. 
This ensures that you don't accidentally execute code when you intend to import data. 
Once imported successfully, use the imported value as a normal JavaScript object or CSSStyleSheet object.
*/

console.log(colors.map((color) => color.value));
document.adoptedStyleSheets = [styles];

supports-import-maps.js

function supportsImportMaps() {
  // check support for import maps using the HTMLScriptElement.supports() static method (which is itself broadly supported)
  return (HTMLScriptElement.supports?.("importmap"));
}