ESM rewrite of this plugin

.github/workflows/ci.yml

@@ -8,7 +8,7 @@ jobs:
     strategy:
       matrix:
         os: ["ubuntu-latest", "macos-latest", "windows-latest"]
-        node: ["16", "18", "20", "22", "24"]
+        node: ["18", "20", "22", "24"]
     name: Node.js ${{ matrix.node }} on ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v3

demo/eleventy-config.js

@@ -1,6 +1,6 @@
-const syntaxHighlight = require("../.eleventy.js");
+import syntaxHighlight from "../syntaxHighlight.js";
 
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
   eleventyConfig.addPlugin(syntaxHighlight, {
     // alwaysWrapLineHighlights: true
     preAttributes: { tabindex: 0 }

package.json

@@ -5,10 +5,9 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": ".eleventy.js",
+  "main": "syntaxHighlight.js",
   "scripts": {
     "test": "npx ava",
-    "demo": "npx @11ty/eleventy --input=demo --output=demo/_site --config=demo/eleventy-config.js",
     "start": "npx @11ty/eleventy --input=demo --output=demo/_site --config=demo/eleventy-config.js --serve"
   },
   "repository": {
@@ -42,14 +41,16 @@
     "markdown-it": "^14.1.0"
   },
   "dependencies": {
+    "entities": "^7.0.0",
     "prismjs": "^1.30.0"
   },
   "ava": {
     "environmentVariables": {},
     "failFast": false,
     "files": [
       "./test/*.js",
-      "./test/*.mjs"
+      "./test/*.cjs"
     ]
-  }
+  },
+  "type": "module"
 }

src/HighlightLines.js

@@ -1,4 +1,4 @@
-class HighlightLines {
+export default class HighlightLines {
   constructor(rangeStr) {
     this.highlights = this.convertRangeToHash(rangeStr);
   }
@@ -29,5 +29,3 @@ class HighlightLines {
     return !!this.highlights[lineNumber];
   }
 }
-
-module.exports = HighlightLines;

src/HighlightLinesGroup.js

@@ -1,6 +1,6 @@
-const HighlightLines = require("./HighlightLines");
+import HighlightLines from "./HighlightLines.js";
 
-class HighlightLinesGroup {
+export default class HighlightLinesGroup {
   constructor(str, delimiter) {
     this.init(str, delimiter);
   }
@@ -64,5 +64,3 @@ class HighlightLinesGroup {
     return this.splitLineMarkup( line, `<span class="highlight-line${extraClassesStr}">`, `</span>`);
   }
 }
-
-module.exports = HighlightLinesGroup;

src/HighlightPairedShortcode.js

@@ -1,9 +1,9 @@
-const Prism = require("prismjs");
-const PrismLoader = require("./PrismLoader");
-const HighlightLinesGroup = require("./HighlightLinesGroup");
-const getAttributes = require("./getAttributes");
+import Prism from "prismjs";
+import PrismLoader from "./PrismLoader.js";
+import HighlightLinesGroup from "./HighlightLinesGroup.js";
+import getAttributes from "./getAttributes.js";
 
-module.exports = function (content, language, highlightNumbers, options = {}) {
+export default function (content, language, highlightNumbers, options = {}) {
   // default to on
   if(options.trim === undefined || options.trim === true) {
     content = content.trim();
@@ -21,19 +21,19 @@ module.exports = function (content, language, highlightNumbers, options = {}) {
     }
   }
 
-  let group = new HighlightLinesGroup(highlightNumbers);
-  let lines = highlightedContent.split(/\r?\n/);
-  lines = lines.map(function(line, j) {
-    if(options.alwaysWrapLineHighlights || highlightNumbers) {
-      let lineContent = group.getLineMarkup(j, line);
-      return lineContent;
-    }
-    return line;
-  });
+  let transformedCode = highlightedContent;
+  if(options.alwaysWrapLineHighlights || highlightNumbers) {
+    let group = new HighlightLinesGroup(highlightNumbers);
+    let lines = highlightedContent.split(/\r?\n/);
+    lines = lines.map(function(line, j) {
+      return group.getLineMarkup(j, line);
+    });
+    transformedCode = lines.join(options.lineSeparator || "\n");
+  }
 
   const context = { content: content, language: language,  options: options };
   const preAttributes = getAttributes(options.preAttributes, context);
   const codeAttributes = getAttributes(options.codeAttributes, context);
 
-  return `<pre${preAttributes}><code${codeAttributes}>` + lines.join(options.lineSeparator || "<br>") + "</code></pre>";
+  return `<pre${preAttributes}><code${codeAttributes}>${transformedCode}</code></pre>`;
 };

src/PrismLoader.js

@@ -1,16 +1,17 @@
-const Prism = require("prismjs");
-const PrismLoader = require("prismjs/components/index.js");
+import Prism from "prismjs";
+import PrismLoader from "prismjs/components/index.js";
+
 // Avoid "Language does not exist: " console logs
 PrismLoader.silent = true;
 
-require("prismjs/components/prism-diff.js");
+import "prismjs/components/prism-diff.js";
 
 // Load diff-highlight plugin
-require("prismjs/plugins/diff-highlight/prism-diff-highlight");
+import "prismjs/plugins/diff-highlight/prism-diff-highlight.js";
 
-const PrismAlias = require("./PrismNormalizeAlias");
+import PrismAlias from "./PrismNormalizeAlias.js";
 
-module.exports = function(language, options = {}) {
+export default  function(language, options = {}) {
   let diffRemovedRawName = language;
   if(language.startsWith("diff-")) {
     diffRemovedRawName = language.substr("diff-".length);

src/PrismNormalizeAlias.js

@@ -3,9 +3,13 @@ const HARDCODED_ALIASES = {
   nunjucks: "jinja2",
 };
 
+import { createRequire } from "node:module";
+
+const require = createRequire(import.meta.url);
+
 // This was added to make `ts` resolve to `typescript` correctly.
 // The Prism loader doesn’t seem to always handle aliasing correctly.
-module.exports = function(language) {
+export default function(language) {
   try {
     // Careful this is not public API stuff:
     // https://github.com/PrismJS/prism/issues/2146

src/getAttributes.js

@@ -1,3 +1,5 @@
+import { escapeAttribute } from "entities/escape";
+
 function attributeEntryToString(attribute, context) {
   let [key, value] = attribute;
 
@@ -11,6 +13,9 @@ function attributeEntryToString(attribute, context) {
     );
   }
 
+  if(typeof value === "string") {
+    value = escapeAttribute(value);
+  }
   return `${key}="${value}"`;
 }
 
@@ -34,7 +39,7 @@ function attributeEntryToString(attribute, context) {
  * @param {object} context.options The options passed to the syntax highlighter.
  * @returns {string} A string containing the above HTML attributes preceded by a single space.
  */
-function getAttributes(attributes, context = {}) {
+export default function getAttributes(attributes, context = {}) {
   let langClass = context.language ? `language-${context.language}` : "";
 
   if (!attributes) {
@@ -58,5 +63,3 @@ function getAttributes(attributes, context = {}) {
     throw new Error("Syntax highlighter plugin custom attributes on <pre> and <code> must be an object. Received: " + JSON.stringify(attributes));
   }
 }
-
-module.exports = getAttributes;

src/hasTemplateFormat.js

@@ -1,10 +1,10 @@
-module.exports = function(templateFormats = ["*"], format = false) {
+export default function(templateFormats = ["*"], format = false) {
   if(!Array.isArray(templateFormats)) {
     templateFormats = [templateFormats];
   }
 
   if( Array.isArray(templateFormats) ) {
-    if( templateFormats.indexOf("*") > -1 || templateFormats.indexOf(format) > -1 ) {
+    if(templateFormats.includes("*") || format && templateFormats.includes(format)) {
       return true;
     }
   }

syntax-highlight.webc

@@ -1,5 +1,5 @@
-<script webc:type="render" webc:is="template" webc:raw webc:nokeep>
-function() {
+<script webc:type="js" webc:is="template" webc:raw webc:nokeep>
+export default function() {
 	let errorPrefix = "[11ty/eleventy-plugin-syntaxhighlight] <syntax-highlight> WebC component: ";
 
 	if(!this.slots || !this.slots.text) {