mirror of
https://github.com/yhirose/cpp-peglib.git
synced 2024-12-22 11:55:30 +00:00
Update playground
This commit is contained in:
parent
8f19894e32
commit
a2c058d47a
@ -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
|
<div class="editor-sub-header">Optimized AST
|
||||||
mode: <select id="opt_mode" type="checkbox"><option value="all">All</option><option value="only">Only</option></select>
|
mode: <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>
|
||||||
|
@ -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({
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
BIN
docs/native.wasm
BIN
docs/native.wasm
Binary file not shown.
@ -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;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user