Use ESM and upgrade Eleventy version

CHANGELOG.md

@@ -6,6 +6,8 @@ Most changes are breaking changes.
 
 - Move the bulk of the compiler to the `acutis.internals` library and make the
   `acutis` library a simple wrapper around it.
+- Change the JavaScript API.
+- Change the Eleventy plugin API and now require Eleventy 3.0.
 
 ## 0.25.0
 

acutis_js.ml

@@ -178,7 +178,7 @@ let () =
            (input_uint8Array src |> Lexing.from_function)
          |> Acutis.compile components
 
-       method toJSString x =
+       method toESMString x =
          Acutis.esm Format.str_formatter x;
          Format.flush_str_formatter () |> Js.string
 

docs/_data/eleventyComputed.js

@@ -6,19 +6,19 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
 
-module.exports = {
+export default {
   /* Wrap page data in a tagged union so we can safely handle unpublished
    * pages. */
   published: (data) => {
     if (data.page.url) {
       return {
         tag: true,
-        page: data.page
-      }
+        page: data.page,
+      };
     } else {
       return {
-        tag: false
-      }
+        tag: false,
+      };
     }
-  }
-}
+  },
+};

docs/_data/site.js

@@ -6,9 +6,11 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
 
+import module from "node:module";
+let require = module.createRequire(import.meta.url);
 let acutisPkg = require("acutis-lang/package.json");
 
-module.exports = {
+export default {
   title: "Acutis",
   subtitle: acutisPkg.description,
   pathPrefix: "/acutis/",

docs/_includes/eleventyComponents.js

@@ -6,12 +6,14 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
 
-const { Typescheme } = require("acutis-lang");
-const site = require("../_data/site");
+import acutis from "acutis-lang";
+import site from "../_data/site.js";
 
-module.exports.Footer = function Footer(props) {
-  const year = props.year ? props.year : new Date().getFullYear();
-  const name = props.link
+let Typescheme = acutis.Typescheme;
+
+export function Footer(props) {
+  let year = props.year ? props.year : new Date().getFullYear();
+  let name = props.link
     ? `<a href="${props.link}">${props.name}</a>`
     : props.name;
   return Promise.resolve(`
@@ -23,22 +25,22 @@ module.exports.Footer = function Footer(props) {
         <a href="${props.siteUrl}/license/">View the license</a>.
       </p>
     </footer>`);
-};
-module.exports.Footer.interface = Typescheme.make([
+}
+Footer.interface = Typescheme.make([
   ["year", Typescheme.nullable(Typescheme.string())],
   ["link", Typescheme.nullable(Typescheme.string())],
   ["name", Typescheme.string()],
   ["siteUrl", Typescheme.string()],
 ]);
 
-module.exports.Link = function Link({ path, page, children }) {
-  const current = path === page.url ? "true" : "false";
-  const href = site.url + path;
+export function Link({ path, page, children }) {
+  let current = path === page.url ? "true" : "false";
+  let href = site.url + path;
   return Promise.resolve(
-    `<a href="${href}" aria-current="${current}">${children}</a>`
+    `<a href="${href}" aria-current="${current}">${children}</a>`,
   );
-};
-module.exports.Link.interface = Typescheme.make([
+}
+Link.interface = Typescheme.make([
   ["path", Typescheme.string()],
   ["page", Typescheme.record([["url", Typescheme.string()]])],
   ["children", Typescheme.string()],

docs/eleventy.config.js

@@ -6,16 +6,18 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
 
-const path = require("path");
-const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
-const markdownItAnchor = require("markdown-it-anchor");
-const markdownItToc = require("markdown-it-table-of-contents");
-const acutisEleventy = require("acutis-lang/eleventy");
-const { pathPrefix } = require("./_data/site");
+import path from "node:path";
+import module from "node:module";
+import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
+import markdownItAnchor from "markdown-it-anchor";
+import markdownItToc from "markdown-it-table-of-contents";
+import * as acutisEleventy from "acutis-lang/eleventy";
+import siteData from "./_data/site.js";
+import * as eleventyComponents from "./_includes/eleventyComponents.js";
 
-function acutisSyntax(Prism) {
+async function acutisSyntax({ Prism }) {
   // Make sure markup-templating is loaded.
-  require("prismjs/components/prism-markup-templating");
+  await import("prismjs/components/prism-markup-templating.js");
 
   Prism.languages.acutis = {
     comment: /^{\*[\s\S]*?\*}$/,
@@ -47,30 +49,26 @@ function acutisSyntax(Prism) {
     punctuation: /[{}[\],.:/=()<>|]/,
   };
 
-  var pattern = /{({?)%[\s\S]*?%(}?)}|{\*[\s\S]*?\*}/g;
-  var markupTemplating = Prism.languages["markup-templating"];
+  let pattern = /{({?)%[\s\S]*?%(}?)}|{\*[\s\S]*?\*}/g;
+  let markupTemplating = Prism.languages["markup-templating"];
 
   Prism.hooks.add("before-tokenize", (env) =>
-    markupTemplating.buildPlaceholders(env, "acutis", pattern)
+    markupTemplating.buildPlaceholders(env, "acutis", pattern),
   );
   Prism.hooks.add("after-tokenize", (env) =>
-    markupTemplating.tokenizePlaceholders(env, "acutis")
+    markupTemplating.tokenizePlaceholders(env, "acutis"),
   );
 }
 
-const acutisPath = require.resolve("acutis-lang");
-const acutisDirPath = path.dirname(require.resolve("acutis-lang/package.json"));
+let require = module.createRequire(import.meta.url);
+let acutisPath = require.resolve("acutis-lang");
+let acutisDirPath = path.dirname(acutisPath);
 
-module.exports = (eleventyConfig) => {
-  eleventyConfig.addPlugin(syntaxHighlight, {
-    init: ({ Prism }) => acutisSyntax(Prism),
-  });
-  // eleventyConfig.addPlugin(acutisEleventy, {
-  //   components: require("./_includes/eleventyComponents"),
-  // });
-  eleventyConfig.addPlugin(acutisEleventy.printJs, {
-    components: require("./_includes/eleventyComponents"),
-    componentsPath: "./_includes/eleventyComponents",
+export default (eleventyConfig) => {
+  eleventyConfig.addPlugin(syntaxHighlight, { init: acutisSyntax });
+  eleventyConfig.addPlugin(acutisEleventy.printESM, {
+    components: eleventyComponents,
+    componentsPath: "./_includes/eleventyComponents.js",
   });
   // We gitignore generated files, but we don't want 11ty to ignore them.
   eleventyConfig.setUseGitIgnore(false);
@@ -94,12 +92,12 @@ module.exports = (eleventyConfig) => {
         containerFooterHtml: `</details>`,
         listType: "ol",
         includeLevel: [1, 2, 3],
-      })
+      }),
   );
   eleventyConfig.addWatchTarget("style.css");
   return {
     markdownTemplateEngine: false,
-    pathPrefix,
+    pathPrefix: siteData.pathPrefix,
     dir: {
       layouts: "_layouts",
     },