Convert to ESM (#880)

* Convert to ESM

* Add style-loader

* Use my fork of babel-plugin-prismjs for now

* Use correct branch

* Convert lib/ to ESM

* Fix __dirname references

* Convert mdn-bob to async

* Ensure Browserify can handle ES modules

* Convert tests to ESM

* Fix converted files

__tests__/console-utils.test.js

@@ -1,4 +1,4 @@
-const consoleUtils = require("../editor/js/editor-libs/console-utils");
+import * as consoleUtils from "../editor/js/editor-libs/console-utils";
 
 describe("console utils", () => {
   describe("formatOutput", () => {

__tests__/processor.test.js

@@ -1,4 +1,4 @@
-const processor = require("../lib/processor");
+import * as processor from "../lib/processor";
 
 describe("processor", () => {
   describe("preprocessHTML", () => {

editor/js/css-examples-libs.js

@@ -1 +1 @@
-const Prism = require("prismjs");
+import Prism from "prismjs";

editor/js/editable-css.js

@@ -1,10 +1,8 @@
-(function () {
-  "use strict";
-
-  var clippy = require("./editor-libs/clippy");
-  var mceEvents = require("./editor-libs/events");
-  var mceUtils = require("./editor-libs/mce-utils");
+import * as clippy from "./editor-libs/clippy.js";
+import * as mceEvents from "./editor-libs/events.js";
+import * as mceUtils from "./editor-libs/mce-utils.js";
 
+(function () {
   var exampleChoiceList = document.getElementById("example-choice-list");
   var exampleChoices = exampleChoiceList.querySelectorAll(".example-choice");
   var editorWrapper = document.getElementById("editor-wrapper");

editor/js/editable-js.js

@@ -1,11 +1,9 @@
-(function () {
-  "use strict";
-
-  var featureDetector = require("./editor-libs/feature-detector.js");
-  var mceConsole = require("./editor-libs/console");
-  var mceEvents = require("./editor-libs/events.js");
-  var mceUtils = require("./editor-libs/mce-utils");
+import * as featureDetector from "./editor-libs/feature-detector.js";
+import mceConsole from "./editor-libs/console.js";
+import * as mceEvents from "./editor-libs/events.js";
+import * as mceUtils from "./editor-libs/mce-utils.js";
 
+(function () {
   var codeBlock = document.getElementById("static-js");
   var exampleFeature = codeBlock.dataset["feature"];
   var execute = document.getElementById("execute");

editor/js/editable-wat.js

@@ -1,19 +1,18 @@
-(function () {
-  "use strict";
-
-  var featureDetector = require("./editor-libs/feature-detector.js");
-  var mceConsole = require("./editor-libs/console");
-  var mceEvents = require("./editor-libs/events.js");
-  var mceUtils = require("./editor-libs/mce-utils");
+import * as featureDetector from "./editor-libs/feature-detector.js";
+import mceConsole from "./editor-libs/console.js";
+import * as mceEvents from "./editor-libs/events.js";
+import * as mceUtils from "./editor-libs/mce-utils.js";
+import wabtConstructor from "wabt";
 
+(function () {
   var watCodeBlock = document.getElementById("static-wat");
   var jsCodeBlock = document.getElementById("static-js");
   var exampleFeature = watCodeBlock.dataset["feature"];
   var execute = document.getElementById("execute");
   var liveContainer = "";
   var output = document.querySelector("#console code");
   var reset = document.getElementById("reset");
-  var wabtInitialized = require("wabt")();
+  var wabtInitialized = wabtConstructor();
 
   var tabContainer = document.getElementById("tab-container");
   var tabs = tabContainer.querySelectorAll("button[role='tab']");

editor/js/editor-libs/clippy.js

@@ -1,5 +1,5 @@
-var mceUtils = require("./mce-utils");
-var Clipboard = require("clipboard");
+import * as mceUtils from "./mce-utils.js";
+import Clipboard from "clipboard";
 
 /**
  * Positions the copy to clipboard success message based on the
@@ -8,7 +8,6 @@ var Clipboard = require("clipboard");
  * @param {Object} msgContainer - The feedback message container
  */
 function setClippyPosition(clippyEvent, msgContainer) {
-  "use strict";
   var trigger = clippyEvent.trigger;
   var triggerParent = trigger.offsetParent;
   /* calculate the base top offset by combining the top
@@ -23,60 +22,57 @@ function setClippyPosition(clippyEvent, msgContainer) {
   msgContainer.style.left = positionLeft;
 }
 
-module.exports = {
-  /**
-   * Initialise clipboard.js, and setup success handler
-   */
-  addClippy: function () {
-    "use strict";
-    var clipboard = new Clipboard(".copy", {
-      target: function (clippyButton) {
-        var targetAttr = clippyButton.dataset.clipboardTarget;
-        if (targetAttr) {
-          // The attribute will override the automated target selection
-          return document.querySelector(targetAttr);
-        } else {
-          // Get its parent until it finds an example choice
-          var choiceElem = mceUtils.findParentChoiceElem(clippyButton);
-          // Use the first code element to prevent extra text
-          var firstCodeElem = choiceElem.getElementsByTagName("code")[0];
-          return firstCodeElem;
-        }
-      },
-    });
+/**
+ * Initialise clipboard.js, and setup success handler
+ */
+export function addClippy() {
+  var clipboard = new Clipboard(".copy", {
+    target: function (clippyButton) {
+      var targetAttr = clippyButton.dataset.clipboardTarget;
+      if (targetAttr) {
+        // The attribute will override the automated target selection
+        return document.querySelector(targetAttr);
+      } else {
+        // Get its parent until it finds an example choice
+        var choiceElem = mceUtils.findParentChoiceElem(clippyButton);
+        // Use the first code element to prevent extra text
+        var firstCodeElem = choiceElem.getElementsByTagName("code")[0];
+        return firstCodeElem;
+      }
+    },
+  });
 
-    clipboard.on("success", function (event) {
-      var msgContainer = document.getElementById("user-message");
+  clipboard.on("success", function (event) {
+    var msgContainer = document.getElementById("user-message");
 
-      msgContainer.classList.add("show");
-      msgContainer.setAttribute("aria-hidden", false);
+    msgContainer.classList.add("show");
+    msgContainer.setAttribute("aria-hidden", false);
 
-      setClippyPosition(event, msgContainer);
+    setClippyPosition(event, msgContainer);
 
-      window.setTimeout(function () {
-        msgContainer.classList.remove("show");
-        msgContainer.setAttribute("aria-hidden", true);
-      }, 1000);
+    window.setTimeout(function () {
+      msgContainer.classList.remove("show");
+      msgContainer.setAttribute("aria-hidden", true);
+    }, 1000);
 
-      event.clearSelection();
-    });
-  },
-  /**
-   * Hides all instances of the clippy button, then shows
-   * the button in the container element passed in
-   * @param {Object} container - The container containing the button to show
-   */
-  toggleClippy: function (container) {
-    "use strict";
-    var activeClippy = container.querySelector(".copy");
-    var clippyButtons = document.querySelectorAll(".copy");
+    event.clearSelection();
+  });
+}
 
-    for (var i = 0, l = clippyButtons.length; i < l; i++) {
-      clippyButtons[i].classList.add("hidden");
-      clippyButtons[i].setAttribute("aria-hidden", true);
-    }
+/**
+ * Hides all instances of the clippy button, then shows
+ * the button in the container element passed in
+ * @param {Object} container - The container containing the button to show
+ */
+export function toggleClippy(container) {
+  var activeClippy = container.querySelector(".copy");
+  var clippyButtons = document.querySelectorAll(".copy");
+
+  for (var i = 0, l = clippyButtons.length; i < l; i++) {
+    clippyButtons[i].classList.add("hidden");
+    clippyButtons[i].setAttribute("aria-hidden", true);
+  }
 
-    activeClippy.classList.remove("hidden");
-    activeClippy.setAttribute("aria-hidden", false);
-  },
-};
+  activeClippy.classList.remove("hidden");
+  activeClippy.setAttribute("aria-hidden", false);
+}