fixup! tools,doc: add support for several flavors of JS code snippets

Author: aduh95

doc/api/wasi.md

@@ -10,7 +10,7 @@ The WASI API provides an implementation of the [WebAssembly System Interface][]
 specification. WASI gives sandboxed WebAssembly applications access to the
 underlying operating system via a collection of POSIX-like functions.
 
-```js esm
+```mjs
 import fs from 'fs';
 import { WASI } from 'wasi';
 
@@ -28,7 +28,7 @@ const instance = await WebAssembly.instantiate(wasm, importObject);
 
 wasi.start(instance);
 ```
-```js cjs
+```cjs
 'use strict';
 const fs = require('fs');
 const { WASI } = require('wasi');

doc/api_assets/style.css

@@ -859,7 +859,7 @@ kbd {
   .js-flavor-selector ~ .cjs {
     background-image: url(./js-flavor-cjs.svg);
   }
-  .js-flavor-selector ~ .esm {
+  .js-flavor-selector ~ .mjs {
     background-image: url(./js-flavor-esm.svg);
   }
 }

test/fixtures/document_with_cjs_and_esm_code_snippet.md

@@ -2,10 +2,10 @@
 
 CJS snippet is first, it should be the one displayed by default.
 
-```js cjs
+```cjs
 require('path');
 ```
 
-```js esm
+```mjs
 import 'node:url';
 ```

test/fixtures/document_with_esm_and_cjs_code_snippet.md

@@ -2,10 +2,10 @@
 
 ESM snippet is first, it should be the one displayed by default.
 
-```js esm
+```mjs
 import 'node:url';
 ```
 
-```js cjs
+```cjs
 require('path');
 ```

tools/doc/html.js

@@ -187,7 +187,7 @@ function linkJsTypeDocs(text) {
   return parts.join('`');
 }
 
-const isJSFlavorSnippet = (node) => node.lang === 'js' && node.meta;
+const isJSFlavorSnippet = (node) => node.lang === 'cjs' || node.lang === 'mjs';
 
 // Preprocess headers, stability blockquotes, and YAML blocks.
 function preprocessElements({ filename }) {
@@ -206,8 +206,11 @@ function preprocessElements({ filename }) {
             `No language set in ${filename}, ` +
             `line ${node.position.start.line}`);
         }
+        const className = isJSFlavorSnippet(node) ?
+          `language-js ${node.lang}` :
+          `language-${node.lang}`;
         const highlighted =
-          `<code class='language-${node.lang} ${node.meta}'>` +
+          `<code class='${className}'>` +
           (getLanguage(node.lang || '') ?
             highlight(node.lang, node.value) : node).value +
           '</code>';
@@ -217,33 +220,26 @@ function preprocessElements({ filename }) {
           const previousNode = parent.children[index - 1] || {};
           const nextNode = parent.children[index + 1] || {};
 
-          if (node.meta !== 'esm' && node.meta !== 'cjs') {
-            console.warn(
-              `Unknown JavaScript flavor in ${filename}` +
-              `:${node.position.start.line}:${node.position.start.column}`);
-            node.value = `<pre>${highlighted}</pre>`;
-            node.meta = null;
-          } else if (!isJSFlavorSnippet(previousNode) &&
-                     isJSFlavorSnippet(nextNode) &&
-                     nextNode.meta !== node.meta) {
+          if (!isJSFlavorSnippet(previousNode) &&
+              isJSFlavorSnippet(nextNode) &&
+              nextNode.lang !== node.lang) {
+            // Saving the highlight code as value to be added in the next node.
             node.value = highlighted;
           } else if (isJSFlavorSnippet(previousNode)) {
             node.value = '<pre>' +
               '<input class="js-flavor-selector" type="checkbox"' +
-              (node.meta === 'cjs' ? ' checked' : '') +
+              // If CJS comes in second, ESM should display by default.
+              (node.lang === 'cjs' ? ' checked' : '') +
               ' aria-label="Show modern ES modules syntax">' +
               previousNode.value +
               highlighted +
               '</pre>';
-            node.meta = null;
+            node.lang = null;
             previousNode.value = '';
-            previousNode.meta = null;
+            previousNode.lang = null;
           } else {
-            console.warn(
-              `Unused JavaScript flavored block in ${filename}` +
-              `:${node.position.start.line}:${node.position.start.column}`);
+            // Isolated JS snippet, no need to add the checkbox.
             node.value = `<pre>${highlighted}</pre>`;
-            node.meta = null;
           }
         } else {
           node.value = `<pre>${highlighted}</pre>`;