JsonPath evaluator - add sample path list

This commit is contained in:
freestrings 2019-04-09 11:19:03 +09:00
parent 7a106539d1
commit a15abe38fb
14 changed files with 352 additions and 40 deletions

File diff suppressed because one or more lines are too long

Binary file not shown.

File diff suppressed because one or more lines are too long

Binary file not shown.

View File

@ -61,6 +61,9 @@
/******/ "__wbindgen_object_drop_ref": function(p0i32) {
/******/ return installedModules["../browser_pkg/jsonpath_wasm.js"].exports["__wbindgen_object_drop_ref"](p0i32);
/******/ },
/******/ "__wbindgen_object_clone_ref": function(p0i32) {
/******/ return installedModules["../browser_pkg/jsonpath_wasm.js"].exports["__wbindgen_object_clone_ref"](p0i32);
/******/ },
/******/ "__wbindgen_cb_forget": function(p0i32) {
/******/ return installedModules["../browser_pkg/jsonpath_wasm.js"].exports["__wbindgen_cb_forget"](p0i32);
/******/ },
@ -82,17 +85,14 @@
/******/ "__wbindgen_string_get": function(p0i32,p1i32) {
/******/ return installedModules["../browser_pkg/jsonpath_wasm.js"].exports["__wbindgen_string_get"](p0i32,p1i32);
/******/ },
/******/ "__wbindgen_object_clone_ref": function(p0i32) {
/******/ return installedModules["../browser_pkg/jsonpath_wasm.js"].exports["__wbindgen_object_clone_ref"](p0i32);
/******/ },
/******/ "__wbindgen_throw": function(p0i32,p1i32) {
/******/ return installedModules["../browser_pkg/jsonpath_wasm.js"].exports["__wbindgen_throw"](p0i32,p1i32);
/******/ },
/******/ "__wbindgen_closure_wrapper75": function(p0i32,p1i32,p2i32) {
/******/ return installedModules["../browser_pkg/jsonpath_wasm.js"].exports["__wbindgen_closure_wrapper75"](p0i32,p1i32,p2i32);
/******/ },
/******/ "__wbindgen_closure_wrapper77": function(p0i32,p1i32,p2i32) {
/******/ return installedModules["../browser_pkg/jsonpath_wasm.js"].exports["__wbindgen_closure_wrapper77"](p0i32,p1i32,p2i32);
/******/ },
/******/ "__wbindgen_closure_wrapper79": function(p0i32,p1i32,p2i32) {
/******/ return installedModules["../browser_pkg/jsonpath_wasm.js"].exports["__wbindgen_closure_wrapper79"](p0i32,p1i32,p2i32);
/******/ }
/******/ }
/******/ };
@ -192,7 +192,7 @@
/******/ promises.push(installedWasmModuleData);
/******/ else {
/******/ var importObject = wasmImportObjects[wasmModuleId]();
/******/ var req = fetch(__webpack_require__.p + "" + {"../browser_pkg/jsonpath_wasm_bg.wasm":"d76e04eccd58c5a5bb06"}[wasmModuleId] + ".module.wasm");
/******/ var req = fetch(__webpack_require__.p + "" + {"../browser_pkg/jsonpath_wasm_bg.wasm":"215c5418dd8b4be64f60"}[wasmModuleId] + ".module.wasm");
/******/ var promise;
/******/ if(importObject instanceof Promise && typeof WebAssembly.compileStreaming === 'function') {
/******/ promise = Promise.all([WebAssembly.compileStreaming(req), importObject]).then(function(items) {

14
docs/bootstrap.js vendored
View File

@ -61,6 +61,9 @@
/******/ "__wbindgen_object_drop_ref": function(p0i32) {
/******/ return installedModules["../browser_pkg/jsonpath_wasm.js"].exports["__wbindgen_object_drop_ref"](p0i32);
/******/ },
/******/ "__wbindgen_object_clone_ref": function(p0i32) {
/******/ return installedModules["../browser_pkg/jsonpath_wasm.js"].exports["__wbindgen_object_clone_ref"](p0i32);
/******/ },
/******/ "__wbindgen_cb_forget": function(p0i32) {
/******/ return installedModules["../browser_pkg/jsonpath_wasm.js"].exports["__wbindgen_cb_forget"](p0i32);
/******/ },
@ -82,17 +85,14 @@
/******/ "__wbindgen_string_get": function(p0i32,p1i32) {
/******/ return installedModules["../browser_pkg/jsonpath_wasm.js"].exports["__wbindgen_string_get"](p0i32,p1i32);
/******/ },
/******/ "__wbindgen_object_clone_ref": function(p0i32) {
/******/ return installedModules["../browser_pkg/jsonpath_wasm.js"].exports["__wbindgen_object_clone_ref"](p0i32);
/******/ },
/******/ "__wbindgen_throw": function(p0i32,p1i32) {
/******/ return installedModules["../browser_pkg/jsonpath_wasm.js"].exports["__wbindgen_throw"](p0i32,p1i32);
/******/ },
/******/ "__wbindgen_closure_wrapper75": function(p0i32,p1i32,p2i32) {
/******/ return installedModules["../browser_pkg/jsonpath_wasm.js"].exports["__wbindgen_closure_wrapper75"](p0i32,p1i32,p2i32);
/******/ },
/******/ "__wbindgen_closure_wrapper77": function(p0i32,p1i32,p2i32) {
/******/ return installedModules["../browser_pkg/jsonpath_wasm.js"].exports["__wbindgen_closure_wrapper77"](p0i32,p1i32,p2i32);
/******/ },
/******/ "__wbindgen_closure_wrapper79": function(p0i32,p1i32,p2i32) {
/******/ return installedModules["../browser_pkg/jsonpath_wasm.js"].exports["__wbindgen_closure_wrapper79"](p0i32,p1i32,p2i32);
/******/ }
/******/ }
/******/ };
@ -192,7 +192,7 @@
/******/ promises.push(installedWasmModuleData);
/******/ else {
/******/ var importObject = wasmImportObjects[wasmModuleId]();
/******/ var req = fetch(__webpack_require__.p + "" + {"../browser_pkg/jsonpath_wasm_bg.wasm":"d76e04eccd58c5a5bb06"}[wasmModuleId] + ".module.wasm");
/******/ var req = fetch(__webpack_require__.p + "" + {"../browser_pkg/jsonpath_wasm_bg.wasm":"215c5418dd8b4be64f60"}[wasmModuleId] + ".module.wasm");
/******/ var promise;
/******/ if(importObject instanceof Promise && typeof WebAssembly.compileStreaming === 'function') {
/******/ promise = Promise.all([WebAssembly.compileStreaming(req), importObject]).then(function(items) {

View File

@ -4,6 +4,7 @@
<meta charset="utf-8">
<title>JsonPath evaluator - Webassembly via Rust</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="./css/github-corner.css" rel="stylesheet" type="text/css">
</head>
<body role="document">
<div class="container">
@ -15,7 +16,59 @@
</div>
-->
<div class="row">
<div class="col-md-6">
<div class="col-md-3">
<span class="badge badge-dark" style="margin-bottom: 15px">JsonPath</span> <span>(click to try)</span>
<table class="table">
<tbody>
<tr>
<td class="path"><a href="#/$.store.book[*].author">$.store.book[*].author</a></td>
</tr>
<tr>
<td class="path"><a href="#$..author">$..author</a></td>
</tr>
<tr>
<td class="path"><a href="#">$.store.*</a></td>
</tr>
<tr>
<td class="path"><a href="#">$.store..price</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..book[2]</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..book[-2]</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..book[0,1]</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..book[:2]</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..book[1:2]</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..book[-2:]</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..book[2:]</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..book[?(@.isbn)]</a></td>
</tr>
<tr>
<td class="path"><a href="#">$.store.book[?(@.price < 10)]</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..*</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..book[ ?( (@.price < 13 || $.store.bicycle.price < @.price) && @.price <=10 ) ]</a></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<span class="badge badge-dark" style="margin-bottom: 15px">Evaluator</span>
<div class="form-group">
<textarea id="json-example" class="form-control" style="min-width: 100%" rows="20"></textarea>
@ -29,12 +82,19 @@
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-4">
<span class="badge badge-dark" style="margin-bottom: 15px">Result</span>
<pre class="prettyprint result" id="read-result" style="background-color: transparent; border: none;"></pre>
</div>
</div>
</div>
<a href="https://github.com/freestrings/jsonpath" class="github-corner" aria-label="View source on GitHub">
<svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 0px; right: 0px; border: 0px;" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" fill="#151513"></path>
<path class="octo-arm" d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="#ffffff" style="transform-origin: 130px 106px;"></path>
<path class="octo-body" d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="#ffffff"></path>
</svg>
</a>
<script src="./bootstrap.js"></script>
</body>
</html>

View File

@ -0,0 +1,170 @@
/**
* GitHub Corners, page css
* Author: Tim Holman
*/
* {
box-sizing: border-box;
}
html, body {
font-family: Helvetica, Arial, sans-serif;
background: #fff;
margin: 0px;
}
h1 {
font-size: 30px;
}
p {
font-size: 16px;
font-weight: 100;
line-height: 24px;
}
.wrapper {
padding-right: 20px;
padding-left: 20px;
padding-top: 50px;
max-width: 580px;
margin: auto;
}
/**
* Demo Code
*/
.version {
border: 2px solid #eee;
margin-top: 25px;
height: 200px;
display: -webkit-flex;
display: flex;
}
.version-section {
padding: 10px;
height: 100%;
}
.version-section.dark {
background: #151513;
}
.demo {
border-right: 2px solid #eee;
position: relative;
width: 200px;
}
.code {
vertical-align: top;
width: 336px;
}
.code textarea {
border: 2px solid #eee;
outline: 0px;
height: 100%;
width: 100%;
font-family: monospace;
font-size: 10px;
}
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
@keyframes octocat-wave {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(-25deg);
}
40% {
transform: rotate(10deg);
}
60% {
transform: rotate(-25deg);
}
80% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
@media (max-width: 500px) {
.github-corner:hover .octo-arm {
animation: none;
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
}
/**
* Footer
*/
footer {
width: 100%;
margin-top: 25px;
margin-bottom: 100px;
background: #F3F3F3;
height: 50px;
padding: 15px;
padding-left: 25px;
padding-right: 25px;
color: #2D2D2D;
font-size: 13px;
letter-spacing: 1px;
font-family: monospace;
}
footer a {
color: #2d2d2d;
}
footer span {
margin-left: 10px;
margin-right: 10px;
}
.twitter-share-button {
margin-bottom: -4px;
}
/**
* Media
*/
@media (max-width: 500px) {
footer {
text-align: center;
height: auto;
line-height: 30px;
}
footer span {
display: none;
}
footer a {
display: block;
}
.twitter-share-button {
margin-bottom: -8px;
}
}

View File

@ -4,6 +4,7 @@
<meta charset="utf-8">
<title>JsonPath evaluator - Webassembly via Rust</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="./css/github-corner.css" rel="stylesheet" type="text/css">
</head>
<body role="document">
<div class="container">
@ -15,7 +16,59 @@
</div>
-->
<div class="row">
<div class="col-md-6">
<div class="col-md-3">
<span class="badge badge-dark" style="margin-bottom: 15px">JsonPath</span> <span>(click to try)</span>
<table class="table">
<tbody>
<tr>
<td class="path"><a href="#/$.store.book[*].author">$.store.book[*].author</a></td>
</tr>
<tr>
<td class="path"><a href="#$..author">$..author</a></td>
</tr>
<tr>
<td class="path"><a href="#">$.store.*</a></td>
</tr>
<tr>
<td class="path"><a href="#">$.store..price</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..book[2]</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..book[-2]</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..book[0,1]</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..book[:2]</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..book[1:2]</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..book[-2:]</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..book[2:]</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..book[?(@.isbn)]</a></td>
</tr>
<tr>
<td class="path"><a href="#">$.store.book[?(@.price < 10)]</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..*</a></td>
</tr>
<tr>
<td class="path"><a href="#">$..book[ ?( (@.price < 13 || $.store.bicycle.price < @.price) && @.price <=10 ) ]</a></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<span class="badge badge-dark" style="margin-bottom: 15px">Evaluator</span>
<div class="form-group">
<textarea id="json-example" class="form-control" style="min-width: 100%" rows="20"></textarea>
@ -29,12 +82,19 @@
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-4">
<span class="badge badge-dark" style="margin-bottom: 15px">Result</span>
<pre class="prettyprint result" id="read-result" style="background-color: transparent; border: none;"></pre>
</div>
</div>
</div>
<a href="https://github.com/freestrings/jsonpath" class="github-corner" aria-label="View source on GitHub">
<svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 0px; right: 0px; border: 0px;" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" fill="#151513"></path>
<path class="octo-arm" d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="#ffffff" style="transform-origin: 130px 106px;"></path>
<path class="octo-body" d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="#ffffff"></path>
</svg>
</a>
<script src="./bootstrap.js"></script>
</body>
</html>

View File

@ -16,6 +16,10 @@ function getReadResult() {
return document.querySelector('#read-result');
}
function getLinks() {
return document.querySelectorAll('.path>a');
}
function initData(url) {
return fetch(url)
.then((res) => res.text())
@ -35,6 +39,10 @@ function initEvent() {
read();
}
getLinks().forEach(function(anchor) {
anchor.href = "#" + encodeURIComponent(anchor.textContent);
});
function read() {
let ret = jsonpath.select(getTextarea().value, getJsonpathInput().value);
if(typeof ret === 'string') {
@ -46,22 +54,26 @@ function initEvent() {
}
function readPathParam() {
let params = location.search.substr(1)
.split('&')
.map((item) => item.split('='))
.reduce((acc, param) => {
acc[param[0]] = decodeURIComponent(param[1]);
return acc;
}, {});
if(params.path) {
getJsonpathInput().value = params.path;
let doc = getReadBtn().ownerDocument;
let event = doc.createEvent('MouseEvents');
event.initEvent('click', true, true);
event.synthetic = true;
getReadBtn().dispatchEvent(event, true);
if(location.href.indexOf('#') > -1) {
readPath()
}
}
function forceClick(ctrl) {
let doc = ctrl.ownerDocument;
let event = doc.createEvent('MouseEvents');
event.initEvent('click', true, true);
event.synthetic = true;
ctrl.dispatchEvent(event, true);
}
function readPath() {
let query = location.href.substring(location.href.indexOf('#') + 1);
let path = decodeURIComponent(query);
getJsonpathInput().value = path;
forceClick(getReadBtn());
}
window.onpopstate = readPath;
initData('data/example.json').then(initEvent).then(readPathParam);

View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 250 250" fill="#151513" style="position: absolute; top: 0; left: 0">
<path fill="#fff" d="M250 0L135 115h-15l-12 27L0 250V0z"/>
<path class="octo-arm" d="M122 109c15-9 9-19 9-19-3-7-2-11-2-11 1-7-3-2-3-2-4 5-2 11-2 11 3 10-5 15-9 16" style="-webkit-transform-origin: 120px 144px; transform-origin: 120px 144px"/>
<path class="octo-body" d="M135 115s-4 2-5 0l-14-14c-3-2-6-3-8-3 8-11 15-24-2-41-5-5-10-7-16-7-1-2-3-7-12-11 0 0-5 3-7 16-4 2-8 5-12 9s-7 8-9 12c-14 4-17 9-17 9 4 8 9 11 11 11 0 6 2 11 7 16 16 16 30 10 41 2 0 3 1 7 5 11l12 11c1 2-1 6-1 6z"/>
</svg>

After

Width:  |  Height:  |  Size: 644 B

View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 250 250" fill="#151513" style="position: absolute; top: 0; right: 0">
<path d="M0 0l115 115h15l12 27 108 108V0z" fill="#fff"/>
<path class="octo-arm" d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16" style="-webkit-transform-origin: 130px 106px; transform-origin: 130px 106px"/>
<path class="octo-body" d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"/>
</svg>

After

Width:  |  Height:  |  Size: 641 B