Update playground

This commit is contained in:
yhirose 2022-06-03 22:23:55 -04:00
parent 8f19894e32
commit a2c058d47a
5 changed files with 54 additions and 18 deletions

View File

@ -9,7 +9,7 @@
<div class="editor-container"> <div class="editor-container">
<ul class="editor-header"> <ul class="editor-header">
<li><span>Grammar</span></li> <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> </ul>
<pre id="grammar-editor" class="editor-area">{{syntax}}</pre> <pre id="grammar-editor" class="editor-area">{{syntax}}</pre>
<div id="grammar-info" class="editor-info"></div> <div id="grammar-info" class="editor-info"></div>
@ -17,20 +17,20 @@
<div class="editor-container"> <div class="editor-container">
<ul class="editor-header"> <ul class="editor-header">
<li><span>Source Code</span></li> <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> </ul>
<pre id="code-editor" class="editor-area">{{source}}</pre> <pre id="code-editor" class="editor-area">{{source}}</pre>
<div id="code-info" class="editor-info"></div> <div id="code-info" class="editor-info"></div>
</div> </div>
<div class="editor-container"> <div class="editor-container">
<ul class="editor-header"> <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> </ul>
<div class="editor-sub-header">AST</div> <div class="editor-sub-header">AST</div>
<pre id="code-ast" class="editor-area"></pre> <pre id="code-ast" class="editor-area"></pre>
<div class="editor-sub-header">Optimized AST&nbsp;&nbsp;&nbsp;&nbsp; <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> </div>
<pre id="code-ast-optimized" class="editor-area"></pre> <pre id="code-ast-optimized" class="editor-area"></pre>
<div class="editor-sub-header">Profile</div> <div class="editor-sub-header">Profile</div>

View File

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

View File

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

Binary file not shown.

View File

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