Update playground

docs/index.html

@@ -9,7 +9,7 @@
   <div class="editor-container">
     <ul class="editor-header">
       <li><span>Grammar</span></li>
-      <li><span id="grammar-validation" class="editor-validation">Valid</span></li>
+      <li class="validation-indicator"><span id="grammar-validation" class="editor-validation">Valid</span></li>
     </ul>
     <pre id="grammar-editor" class="editor-area">{{syntax}}</pre>
     <div id="grammar-info" class="editor-info"></div>
@@ -17,20 +17,20 @@
   <div class="editor-container">
     <ul class="editor-header">
       <li><span>Source Code</span></li>
-      <li><span id="code-validation" class="editor-validation">Valid</span></li>
+      <li class="validation-indicator"><span id="code-validation" class="editor-validation">Valid</span></li>
     </ul>
     <pre id="code-editor" class="editor-area">{{source}}</pre>
     <div id="code-info" class="editor-info"></div>
   </div>
   <div class="editor-container">
     <ul class="editor-header">
-      <li><span>Output</span></li>
+      <li class="option"><span><input id="packrat" type="checkbox"><label>Packrat</label></span></li>
-      <li><span></span></li>
+      <li class="option"><span><input id="auto-refresh" type="checkbox"><label>Auto Refresh</label><button id="parse" class="parse">Parse</button></span></li>
     </ul>
     <div class="editor-sub-header">AST</div>
     <pre id="code-ast" class="editor-area"></pre>
     <div class="editor-sub-header">Optimized AST&nbsp;&nbsp;&nbsp;&nbsp;
-      mode:&nbsp;<select id="opt_mode" type="checkbox"><option value="all">All</option><option value="only">Only</option></select>
+      mode:&nbsp;<select id="opt-mode" type="checkbox"><option value="all">All</option><option value="only">Only</option></select>
     </div>
     <pre id="code-ast-optimized" class="editor-area"></pre>
     <div class="editor-sub-header">Profile</div>

docs/index.js

@@ -26,7 +26,10 @@ const codeAst = setupInfoArea("code-ast");
 const codeAstOptimized = setupInfoArea("code-ast-optimized");
 const profile = setupInfoArea("profile");
 
-$('#opt_mode').val(localStorage.getItem('optimazationMode') || 'all');
+$('#opt-mode').val(localStorage.getItem('optimazationMode') || 'all');
+$('#packrat').prop('checked', localStorage.getItem('packrat') === 'true');
+$('#auto-refresh').prop('checked', localStorage.getItem('autoRefresh') === 'true');
+$('#parse').prop('disabled', $('#auto-refresh').prop('checked'));
 
 // Parse
 function escapeHtml(unsafe) {
@@ -50,6 +53,14 @@ function generateErrorListHTML(errors) {
   return html;
 }
 
+function updateLocalStorage() {
+  localStorage.setItem('grammarText', grammar.getValue());
+  localStorage.setItem('codeText', code.getValue());
+  localStorage.setItem('optimazationMode', $('#opt-mode').val());
+  localStorage.setItem('packrat', $('#packrat').prop('checked'));
+  localStorage.setItem('autoRefresh', $('#auto-refresh').prop('checked'));
+}
+
 function parse() {
   const $grammarValidation = $('#grammar-validation');
   const $grammarInfo = $('#grammar-info');
@@ -59,11 +70,9 @@ function parse() {
   const $codeInfo = $('#code-info');
   const codeText = code.getValue();
 
-  const optimazationMode = $('#opt_mode').val();
+  const optimazationMode = $('#opt-mode').val();
-
+  const packrat = $('#packrat').prop('checked');
-  localStorage.setItem('grammarText', grammarText);
+  const autoRefresh = $('#auto-refresh').prop('checked');
-  localStorage.setItem('codeText', codeText);
-  localStorage.setItem('optimazationMode', optimazationMode);
 
   $grammarInfo.html('');
   $grammarValidation.hide();
@@ -78,7 +87,8 @@ function parse() {
   }
 
   const mode = optimazationMode == 'all';
-  const data = JSON.parse(Module.lint(grammarText, codeText, mode));
+  console.log({packrat});
+  const data = JSON.parse(Module.lint(grammarText, codeText, mode, packrat));
 
   if (data.grammar_valid) {
     $grammarValidation.removeClass('editor-validation-invalid').text('Valid').show();
@@ -111,7 +121,12 @@ function parse() {
 let timer;
 function setupTimer() {
   clearTimeout(timer);
-  timer = setTimeout(parse, 750);
+  timer = setTimeout(() => {
+    updateLocalStorage();
+    if ($('#auto-refresh').prop('checked')) {
+      parse();
+    }
+  }, 750);
 };
 grammar.getSession().on('change', setupTimer);
 code.getSession().on('change', setupTimer);
@@ -129,7 +144,14 @@ $('#grammar-info').on('click', 'li', makeOnClickInInfo(grammar));
 $('#code-info').on('click', 'li', makeOnClickInInfo(code));
 
 // Event handing in the AST optimazation
-$('#opt_mode').on('change', setupTimer);
+$('#opt-mode').on('change', setupTimer);
+$('#packrat').on('change', setupTimer);
+$('#auto-refresh').on('change', () => {
+  updateLocalStorage();
+  $('#parse').prop('disabled', $('#auto-refresh').prop('checked'));
+  setupTimer();
+});
+$('#parse').on('click', parse);
 
 // Show page
 $('#main').css({

docs/native.cpp

@@ -54,7 +54,7 @@ bool parse_code(const std::string &text, peg::parser &peg, std::string &json,
   return ret;
 }
 
-std::string lint(const std::string &grammarText, const std::string &codeText, bool opt_mode) {
+std::string lint(const std::string &grammarText, const std::string &codeText, bool opt_mode, bool packrat) {
   std::string grammarResult;
   std::string codeResult;
   std::string astResult;
@@ -69,6 +69,10 @@ std::string lint(const std::string &grammarText, const std::string &codeText, bo
     std::stringstream ss;
     peg::enable_profiling(peg, ss);
 
+    if (packrat) {
+      peg.enable_packrat_parsing();
+    }
+
     std::shared_ptr<peg::Ast> ast;
     is_source_valid = parse_code(codeText, peg, codeResult, ast);
 

docs/style.css

@@ -29,9 +29,6 @@ body {
   height: 48px;
   padding: 4px 8px;
 }
-.editor-header > li:last-child {
-  margin-left: auto;
-}
 .editor-header > li > span {
   height: 38px;
   line-height: 38px;
@@ -42,6 +39,9 @@ body {
   padding: .3em .5em;
   border: 1px solid red;
 }
+.editor-header > li.validation-indicator {
+  margin-left: auto;
+}
 .editor-validation {
   padding: 9px 11px;
   color: green;
@@ -72,3 +72,13 @@ body {
 .editor-sub-header {
   padding: 4px 8px;
 }
+.option {
+  margin-right: 12px;
+}
+.option > span > * {
+  margin-right: 8px;
+}
+.option .parse {
+  cursor: pointer;
+  padding: 9px 11px;
+}