refactor: use esm chevrotain in playground

Chevrotain · Jul 12, 2023 · ad9eb4d · ad9eb4d
1 parent 0b01caf
commit ad9eb4d
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 68 deletions.
diff --git a/playground/chevrotain-esm-to-global.mjs b/playground/chevrotain-esm-to-global.mjs
@@ -0,0 +1,5 @@
+import * as chevrotain from "https://unpkg.com/chevrotain/lib/chevrotain.min.mjs";
+
+// "import * from" returns a `Module` object which needs to be destructured first
+const spreadChevrotain = { ...chevrotain };
+window.chevrotain = spreadChevrotain;
diff --git a/playground/index.html b/playground/index.html
@@ -20,11 +20,24 @@
     />
     <link rel="stylesheet" type="text/css" href="CSS/playground.css" />
 
+    <script>
+      window.ChevrotainLoadedPromise = new Promise((resolve, reject) => {
+        function checkChevLoaded() {
+          if (window.chevrotain !== undefined) {
+            resolve();
+          } else {
+            setTimeout(checkChevLoaded, 100);
+          }
+        }
+        checkChevLoaded();
+      });
+    </script>
+    <script type="module" src="./chevrotain-esm-to-global.mjs"></script>
+
     <script src="../bower_components/lodash/lodash.js"></script>
     <script src="../bower_components/jquery/dist/jquery.js"></script>
     <script src="libs/jquery.svg.js"></script>
     <script src="libs/jquery.svgdom.js"></script>
-    <script src="https://unpkg.com/chevrotain/temp/chevrotain.internal.temp.js"></script>
     <script src="../bower_components/CodeMirror/lib/codemirror.js"></script>
     <script src="../bower_components/CodeMirror/mode/javascript/javascript.js"></script>
     <script src="../bower_components/xregexp/xregexp-all.js"></script>
@@ -157,85 +170,89 @@ <h1>Output</h1>
       var inputEditorDiv = null;
       var outputEditorDiv = null;
 
-      wrapChevrotainLexer();
-
-      $(document).ready(function init() {
-        // defer error handling so we can display error markers visually
-        // instead of using the default chevrotain behavior of throwing exceptions.
-        chevrotain.Parser.DEFER_DEFINITION_ERRORS_HANDLING = true;
+      // hack to wait for Chevrotain ESM bundle to load first as this playground
+      // is legacy code relying on globals and sync "in-order" loading of scripts
+      window.ChevrotainLoadedPromise.then(() => {
+        wrapChevrotainLexer();
 
-        // init global state
-        examplesDropdown = $("#example-choice");
-        samplesDropdown = $("#samples-choice");
-        diagramsDiv = _.first($("#diagramsDiv"));
-        diagramsHeaderOrgHtml = diagramsDiv.innerHTML;
+        $(document).ready(function init() {
+          // defer error handling so we can display error markers visually
+          // instead of using the default chevrotain behavior of throwing exceptions.
+          chevrotain.Parser.DEFER_DEFINITION_ERRORS_HANDLING = true;
 
-        var implTextArea = $("#parserImplementationEditor");
-        javaScriptEditor = CodeMirror.fromTextArea(_.first(implTextArea), {
-          lineNumbers: true,
-          viewportMargin: 10,
-        });
+          // init global state
+          examplesDropdown = $("#example-choice");
+          samplesDropdown = $("#samples-choice");
+          diagramsDiv = _.first($("#diagramsDiv"));
+          diagramsHeaderOrgHtml = diagramsDiv.innerHTML;
 
-        javaScriptEditor.on(
-          "change",
-          _.debounce(onImplementationEditorContentChange, 250)
-        );
-
-        inputEditor = CodeMirror.fromTextArea(
-          _.first($("#parserInputEditor")),
-          {
+          var implTextArea = $("#parserImplementationEditor");
+          javaScriptEditor = CodeMirror.fromTextArea(_.first(implTextArea), {
             lineNumbers: true,
             viewportMargin: 10,
-          }
-        );
+          });
 
-        inputEditor.on("change", _.debounce(onInputEditorContentChange, 250));
+          javaScriptEditor.on(
+            "change",
+            _.debounce(onImplementationEditorContentChange, 250)
+          );
 
-        parserOutput = CodeMirror.fromTextArea(_.first($("#parserOutput")), {
-          lineNumbers: true,
-          viewportMargin: 10,
-          readOnly: true,
-        });
+          inputEditor = CodeMirror.fromTextArea(
+            _.first($("#parserInputEditor")),
+            {
+              lineNumbers: true,
+              viewportMargin: 10,
+            }
+          );
 
-        inputEditor.setOption("mode", "text");
-        parserOutput.setOption("mode", "text");
+          inputEditor.on("change", _.debounce(onInputEditorContentChange, 250));
 
-        javaScriptEditor.setSize("100%", "100%");
-        inputEditor.setSize("100%", "100%");
-        parserOutput.setSize("100%", "100%");
+          parserOutput = CodeMirror.fromTextArea(_.first($("#parserOutput")), {
+            lineNumbers: true,
+            viewportMargin: 10,
+            readOnly: true,
+          });
+
+          inputEditor.setOption("mode", "text");
+          parserOutput.setOption("mode", "text");
+
+          javaScriptEditor.setSize("100%", "100%");
+          inputEditor.setSize("100%", "100%");
+          parserOutput.setSize("100%", "100%");
+
+          initCodeMirrorVScroll();
+
+          initExamplesDropDown();
+          examplesDropdown.change(function () {
+            loadExample(examplesDropdown.val());
+          });
+
+          var urlParamExample = getUrlParameter("example");
+          if (urlParamExample) {
+            examplesDropdown.value = urlParamExample;
+            $(examplesDropdown).val(urlParamExample);
+            loadExample(urlParamExample, true);
+          } else {
+            loadExample("JSON grammar and CST output", true);
+          }
+          updateSamplesDropDown();
 
-        initCodeMirrorVScroll();
+          samplesDropdown.change(function () {
+            loadSamples(samplesDropdown.val());
+          });
 
-        initExamplesDropDown();
-        examplesDropdown.change(function () {
-          loadExample(examplesDropdown.val());
-        });
+          $(document).mouseup(endResize);
+          $(document).mousemove(resizeRoot);
 
-        var urlParamExample = getUrlParameter("example");
-        if (urlParamExample) {
-          examplesDropdown.value = urlParamExample;
-          $(examplesDropdown).val(urlParamExample);
-          loadExample(urlParamExample, true);
-        } else {
-          loadExample("JSON grammar and CST output", true);
-        }
-        updateSamplesDropDown();
+          impelEditorDiv = _.first($("#impel").find(".cm-s-default"));
+          impelEditorDiv.id = "impelEditorDiv";
+          inputEditorDiv = _.first($("#input").find(".cm-s-default"));
+          inputEditorDiv.id = "inputEditorDiv";
+          outputEditorDiv = _.first($("#output").find(".cm-s-default"));
+          outputEditorDiv.id = "outputEditorDiv";
 
-        samplesDropdown.change(function () {
-          loadSamples(samplesDropdown.val());
+          initCodeMirrorDivsViewPortHeight();
         });
-
-        $(document).mouseup(endResize);
-        $(document).mousemove(resizeRoot);
-
-        impelEditorDiv = _.first($("#impel").find(".cm-s-default"));
-        impelEditorDiv.id = "impelEditorDiv";
-        inputEditorDiv = _.first($("#input").find(".cm-s-default"));
-        inputEditorDiv.id = "inputEditorDiv";
-        outputEditorDiv = _.first($("#output").find(".cm-s-default"));
-        outputEditorDiv.id = "outputEditorDiv";
-
-        initCodeMirrorDivsViewPortHeight();
       });
     </script>
   </body>

diff --git a/playground/utils.js b/playground/utils.js
@@ -14,14 +14,13 @@ function getUrlParameter(sParam) {
   }
 }
 
-var orgLexer = chevrotain.Lexer;
-
 /**
  * Modifies chevrotain's Lexer to by default enable the deferred error handling
  * This should not normally be done in productive flows, but it is very important for the playground
  * as the deferred errors are displayed in the UI...
  */
 function wrapChevrotainLexer() {
+  var orgLexer = chevrotain.Lexer;
   chevrotain.Lexer = function (definition, config) {
     if (config) {
       // always override this in playground context