doc update

jsenv · Nov 28, 2023 · d2a6deb · d2a6deb
1 parent d587867
commit d2a6deb
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 23 deletions.
diff --git a/README.MD b/README.MD
@@ -42,7 +42,7 @@ import { writeImportmaps } from "@jsenv/importmap-node-module";
 await writeImportmaps({
   projectDirectoryUrl: new URL("./", import.meta.url),
   importmaps: {
-    "./project.importmap": {
+    "./index.html": {
       mappingsForNodeResolution: true,
     },
   },
@@ -59,7 +59,7 @@ npm install --save-dev @jsenv/importmap-node-module
 
 ```console
 node ./generate_importmap.mjs
--> /Users/d.maillard/importmap-node-module/docs/demo/project.importmap
+<script type="importmap"> content updated into "/demo/index.html"
 ```
 
 # API options
@@ -295,28 +295,13 @@ await writeImportmaps({
 
 # Using import maps
 
-Add _project.importmap_ to your html
-
-```diff
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Title</title>
-    <meta charset="utf-8" />
-    <link rel="icon" href="data:," />
-+   <script type="importmap" src="./project.importmap"></script>
-  </head>
-
-  <body>
-    <script type="module">
-      import lodash from "lodash"
-    </script>
-  </body>
-</html>
+At the time of writing this documentation external importmap are not supported by web browsers:
+
+```console
+External import maps are not yet supported
 ```
 
-If you use a bundler or an other tool, be sure it's compatible with import maps.
-As import map are standard the bundler/tool might be compatible by default or with the help of some plugin/configuration.
+If you plan to use importmap in a web browser you need to tell `@jsenv/importmap-node-module` to inline importmap into the HTML file as show in [API](#API).
 
 # TypeScript
 

diff --git a/docs/demo/generate_importmap.mjs b/docs/demo/generate_importmap.mjs
@@ -3,7 +3,7 @@ import { writeImportmaps } from "@jsenv/importmap-node-module";
 await writeImportmaps({
   projectDirectoryUrl: new URL("./", import.meta.url),
   importmaps: {
-    "./project.importmap": {
+    "./index.html": {
       mappingsForNodeResolution: true,
     },
   },

diff --git a/docs/demo/index.html b/docs/demo/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Title</title>
+    <meta charset="utf-8">
+    <link rel="icon" href="data:,">
+    <script type="importmap" jsenv-injected-by="@jsenv/importmap-node-module">
+      {
+        "imports": {
+          "demo/": "./",
+          "demo": "./index"
+        },
+        "scopes": {}
+      }
+    </script>
+  </head>
+
+  <body>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>
diff --git a/src/step_write_into_files/write_into_files.js b/src/step_write_into_files/write_into_files.js
@@ -55,6 +55,11 @@ const writeIntoHtmlFile = (htmlFileUrl, importmapAsJson, { logger }) => {
     setHtmlNodeAttributes(scriptTypeImportmap, {
       "content-indented": undefined,
     });
+    logger.info(
+      `<script type="importmap"> content updated into "${urlToFileSystemPath(
+        htmlFileUrl,
+      )}"`,
+    );
   } else {
     const importmapNode = createHtmlNode({
       tagName: "script",
@@ -66,6 +71,11 @@ const writeIntoHtmlFile = (htmlFileUrl, importmapAsJson, { logger }) => {
       "jsenv-injected-by": "@jsenv/importmap-node-module",
       "content-indented": undefined,
     });
+    logger.info(
+      `<script type="importmap"> injected into "${urlToFileSystemPath(
+        htmlFileUrl,
+      )}"`,
+    );
   }
   const html = stringifyHtmlAst(htmlAst);
   writeFileSync(new URL(htmlFileUrl), html);