From 0937bc28586c777d2b248dba15bfb11a5eb9d669 Mon Sep 17 00:00:00 2001
From: Joe Hildebrand <joe-github@cursive.net>
Date: Wed, 23 Apr 2025 23:07:51 -0600
Subject: [PATCH] Download other parser types.  Fixes #188.

---
 docs/css/content.css | 20 +++++++++++------
 docs/js/online.js    | 52 +++++++++++++++++++++++++-------------------
 docs/online.html     | 13 +++++++----
 3 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/docs/css/content.css b/docs/css/content.css
index ba330b53..e4e9295f 100644
--- a/docs/css/content.css
+++ b/docs/css/content.css
@@ -147,21 +147,27 @@
 #content #settings label { padding-right: 1em; }
 #content #parser-var { width: 15em; }
 #content #options { padding-top: 1em; }
+
+#content #download-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: baseline;
+  gap: .5rem;
+}
+
 #content .download-button {
-  float: right;
-  width: 10em;
-  margin-top: 2em;
+  width: 6em;
   border-width: 0;
-  padding: .5em; border-radius: .4em; -moz-border-radius: .4em;
+  padding: .25em;
+  border-radius: .4em; -moz-border-radius: .4em;
   font-family: "Trebuchet MS", lucida, sans-serif;
   font-size: 1em;
   line-height: 1.5;
   text-align: center; text-decoration: none;
   color: #e0ffe0; background-color: #499149;
 }
-#content .download-button:not(:first-of-type) {
-  margin-right: .5rem;
-}
 #content .download-button:hover { background-color: #006000; }
 #content .download-button.disabled { color: #e0e0e0; background-color: gray; }
 
diff --git a/docs/js/online.js b/docs/js/online.js
index 6608a557..b38b8d51 100644
--- a/docs/js/online.js
+++ b/docs/js/online.js
@@ -77,6 +77,23 @@ $(function() {
       : e.message;
   }
 
+  function saveParser(format, filename) {
+    try { // If this button was enabled, the source was already validated by 'rebuildGrammar'
+      const esSource = peggy.generate(editor.getValue(), {
+        cache: $("#option-cache").is(":checked"),
+        output: "source",
+        exportVar: $( "#parser-var" ).val(),
+        format,
+      })
+
+      console.log({filename})
+      const blob = new Blob([esSource], {type: "application/javascript"});
+      window.saveAs(blob, filename);
+    } catch (e) {
+      console.error('Unable to save parser', e);
+    }
+  }
+
   /**
    * Generates code from the parser, collects problems in `problems` in CodeMirror
    * lint format.
@@ -93,7 +110,9 @@ $(function() {
     $("#output").addClass("disabled").text("Output not available.");
     $("#parser-var").attr("disabled", "disabled");
     $("#option-cache").attr("disabled", "disabled");
-    $("#parser-download").attr("disabled", "disabled");
+    $("#parser-download-globals").attr("disabled", "disabled");
+    $("#parser-download-umd").attr("disabled", "disabled");
+    $("#parser-download-cjs").attr("disabled", "disabled");
     $("#parser-download-es6").attr("disabled", "disabled");
 
     let result = false;
@@ -135,7 +154,9 @@ $(function() {
       $("#input").removeAttr("disabled");
       $("#parser-var").removeAttr("disabled");
       $("#option-cache").removeAttr("disabled");
-      $("#parser-download").removeAttr("disabled");
+      $("#parser-download-globals").removeAttr("disabled");
+      $("#parser-download-umd").removeAttr("disabled");
+      $("#parser-download-cjs").removeAttr("disabled");
       $("#parser-download-es6").removeAttr("disabled");
 
       result = true;
@@ -222,30 +243,17 @@ $(function() {
     .on('keyup', rebuildGrammar)
     .on('keypress', rebuildGrammar);
 
-  $( "#parser-download" )
-    .on('click', function(){
+  $( "#parser-download-globals" )
+    .on('click', () => saveParser("globals", "parser.js"));
 
-      const blob = new Blob( [$( "#parser-var" ).val() + " = " + parserSource + ";\n"], {type: "application/javascript"} );
-      window.saveAs( blob, "parser.js" );
+  $( "#parser-download-umd" )
+    .on('click', () => saveParser("umd", "parser.js"));
 
-    });
+  $( "#parser-download-cjs" )
+    .on('click', () => saveParser("commonjs", "parser.cjs"));
 
   $( "#parser-download-es6" )
-    .on('click', function(){
-      try { // If this button was enabled, the source was already validated by 'rebuildGrammar'
-        const esSource = peggy.generate(editor.getValue(), {
-          cache: $("#option-cache").is(":checked"),
-          output: "source",
-          format: 'es'
-        })
-
-        const blob = new Blob([esSource], {type: "application/javascript"});
-        window.saveAs(blob, "parser.mjs");
-      } catch (e) {
-        console.error('Unable to save parser', e);
-      }
-
-    });
+    .on('click', () => saveParser("es", "parser.mjs"));
 
   doLayout();
   $(window).resize(doLayout);
diff --git a/docs/online.html b/docs/online.html
index e5b978f9..1e581cb9 100644
--- a/docs/online.html
+++ b/docs/online.html
@@ -121,16 +121,21 @@ <h2 class="suggestion">
         </tr>
         <tr>
           <td class="content-height">
-              <input type="submit" id="parser-download-es6" class="download-button" value="Download ES6 parser" disabled>
-              <input type="submit" id="parser-download" class="download-button" value="Download CJS parser" disabled>
             <div id="settings">
-              <label for="parser-var">Parser variable <span style="font-size: .7rem">For CommonJS</span>:</label>
-              <input type="text" id="parser-var" value="module.exports" placeholder="module.exports" disabled>
+              <label for="parser-var">Parser variable for UMD or Global:</label>
+              <input type="text" id="parser-var" value="Peggy" placeholder="module.exports" disabled>
               <div id="options">
                 <input type="checkbox" id="option-cache" disabled>
                 <label for="option-cache">Use results cache</label>
               </div>
             </div>
+            <div id="download-container">
+              <div>Download parser:</div>
+              <input type="submit" id="parser-download-globals" class="download-button" value="Globals" disabled>
+              <input type="submit" id="parser-download-umd" class="download-button" value="UMD" disabled>
+              <input type="submit" id="parser-download-cjs" class="download-button" value="CommonJS" disabled>
+              <input type="submit" id="parser-download-es6" class="download-button" value="ES6" disabled>
+            </div>
           </td>
         </tr>
       </table>