JsonPath evaluator 페이지 기본

This commit is contained in:
freestrings 2019-03-04 23:07:09 +09:00
parent c2fd05f258
commit 39e6466ea2
11 changed files with 240 additions and 76 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,15 +0,0 @@
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],{
/***/ "./index.js":
/*!******************!*\
!*** ./index.js ***!
\******************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var rs_jsonpath__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! rs-jsonpath */ \"./node_modules/rs-jsonpath/wasm.js\");\n\n\nlet jsonString = \"{\\\"a\\\" : 1}\";\n\nlet template = rs_jsonpath__WEBPACK_IMPORTED_MODULE_0__[\"compile\"](\"$.a\");\nconsole.log(template(jsonString));\nconsole.log(template(JSON.parse(jsonString)));\n\nlet reader1 = rs_jsonpath__WEBPACK_IMPORTED_MODULE_0__[\"reader\"](jsonString);\nconsole.log(reader1(\"$.a\"));\n\nlet reader2 = rs_jsonpath__WEBPACK_IMPORTED_MODULE_0__[\"reader\"](JSON.parse(jsonString));\nconsole.log(reader2(\"$.a\"));\n\nconsole.log(rs_jsonpath__WEBPACK_IMPORTED_MODULE_0__[\"read\"](JSON.parse(jsonString), \"$.a\"));\nconsole.log(rs_jsonpath__WEBPACK_IMPORTED_MODULE_0__[\"read\"](jsonString, \"$.a\"));\n\n//# sourceURL=webpack:///./index.js?");
/***/ })
}]);

48
docs/bootstrap.js vendored
View File

@ -52,41 +52,41 @@
/******/ function promiseResolve() { return Promise.resolve(); }
/******/
/******/ var wasmImportObjects = {
/******/ "./node_modules/rs-jsonpath/wasm_bg.wasm": function() {
/******/ "../pkg/jsonpath_wasm_bg.wasm": function() {
/******/ return {
/******/ "./wasm": {
/******/ "__wbindgen_object_drop_ref": function(p0i32) {
/******/ return installedModules["./node_modules/rs-jsonpath/wasm.js"].exports["__wbindgen_object_drop_ref"](p0i32);
/******/ },
/******/ "__wbindgen_string_new": function(p0i32,p1i32) {
/******/ return installedModules["./node_modules/rs-jsonpath/wasm.js"].exports["__wbindgen_string_new"](p0i32,p1i32);
/******/ },
/******/ "__wbindgen_cb_forget": function(p0i32) {
/******/ return installedModules["./node_modules/rs-jsonpath/wasm.js"].exports["__wbindgen_cb_forget"](p0i32);
/******/ },
/******/ "./jsonpath_wasm": {
/******/ "__wbindgen_json_parse": function(p0i32,p1i32) {
/******/ return installedModules["./node_modules/rs-jsonpath/wasm.js"].exports["__wbindgen_json_parse"](p0i32,p1i32);
/******/ return installedModules["../pkg/jsonpath_wasm.js"].exports["__wbindgen_json_parse"](p0i32,p1i32);
/******/ },
/******/ "__wbindgen_json_serialize": function(p0i32,p1i32) {
/******/ return installedModules["./node_modules/rs-jsonpath/wasm.js"].exports["__wbindgen_json_serialize"](p0i32,p1i32);
/******/ return installedModules["../pkg/jsonpath_wasm.js"].exports["__wbindgen_json_serialize"](p0i32,p1i32);
/******/ },
/******/ "__wbindgen_object_drop_ref": function(p0i32) {
/******/ return installedModules["../pkg/jsonpath_wasm.js"].exports["__wbindgen_object_drop_ref"](p0i32);
/******/ },
/******/ "__wbindgen_string_new": function(p0i32,p1i32) {
/******/ return installedModules["../pkg/jsonpath_wasm.js"].exports["__wbindgen_string_new"](p0i32,p1i32);
/******/ },
/******/ "__wbindgen_cb_forget": function(p0i32) {
/******/ return installedModules["../pkg/jsonpath_wasm.js"].exports["__wbindgen_cb_forget"](p0i32);
/******/ },
/******/ "__wbindgen_is_string": function(p0i32) {
/******/ return installedModules["./node_modules/rs-jsonpath/wasm.js"].exports["__wbindgen_is_string"](p0i32);
/******/ return installedModules["../pkg/jsonpath_wasm.js"].exports["__wbindgen_is_string"](p0i32);
/******/ },
/******/ "__wbindgen_string_get": function(p0i32,p1i32) {
/******/ return installedModules["./node_modules/rs-jsonpath/wasm.js"].exports["__wbindgen_string_get"](p0i32,p1i32);
/******/ return installedModules["../pkg/jsonpath_wasm.js"].exports["__wbindgen_string_get"](p0i32,p1i32);
/******/ },
/******/ "__wbindgen_object_clone_ref": function(p0i32) {
/******/ return installedModules["./node_modules/rs-jsonpath/wasm.js"].exports["__wbindgen_object_clone_ref"](p0i32);
/******/ return installedModules["../pkg/jsonpath_wasm.js"].exports["__wbindgen_object_clone_ref"](p0i32);
/******/ },
/******/ "__wbindgen_throw": function(p0i32,p1i32) {
/******/ return installedModules["./node_modules/rs-jsonpath/wasm.js"].exports["__wbindgen_throw"](p0i32,p1i32);
/******/ return installedModules["../pkg/jsonpath_wasm.js"].exports["__wbindgen_throw"](p0i32,p1i32);
/******/ },
/******/ "__wbindgen_closure_wrapper56": function(p0i32,p1i32,p2i32) {
/******/ return installedModules["./node_modules/rs-jsonpath/wasm.js"].exports["__wbindgen_closure_wrapper56"](p0i32,p1i32,p2i32);
/******/ "__wbindgen_closure_wrapper61": function(p0i32,p1i32,p2i32) {
/******/ return installedModules["../pkg/jsonpath_wasm.js"].exports["__wbindgen_closure_wrapper61"](p0i32,p1i32,p2i32);
/******/ },
/******/ "__wbindgen_closure_wrapper58": function(p0i32,p1i32,p2i32) {
/******/ return installedModules["./node_modules/rs-jsonpath/wasm.js"].exports["__wbindgen_closure_wrapper58"](p0i32,p1i32,p2i32);
/******/ "__wbindgen_closure_wrapper63": function(p0i32,p1i32,p2i32) {
/******/ return installedModules["../pkg/jsonpath_wasm.js"].exports["__wbindgen_closure_wrapper63"](p0i32,p1i32,p2i32);
/******/ }
/******/ }
/******/ };
@ -176,7 +176,7 @@
/******/
/******/ // Fetch + compile chunk loading for webassembly
/******/
/******/ var wasmModules = {"0":["./node_modules/rs-jsonpath/wasm_bg.wasm"]}[chunkId] || [];
/******/ var wasmModules = {"0":["../pkg/jsonpath_wasm_bg.wasm"]}[chunkId] || [];
/******/
/******/ wasmModules.forEach(function(wasmModuleId) {
/******/ var installedWasmModuleData = installedWasmModules[wasmModuleId];
@ -186,7 +186,7 @@
/******/ promises.push(installedWasmModuleData);
/******/ else {
/******/ var importObject = wasmImportObjects[wasmModuleId]();
/******/ var req = fetch(__webpack_require__.p + "" + {"./node_modules/rs-jsonpath/wasm_bg.wasm":"688f272634d1f6200fbb"}[wasmModuleId] + ".module.wasm");
/******/ var req = fetch(__webpack_require__.p + "" + {"../pkg/jsonpath_wasm_bg.wasm":"71d16e2ce98524a4b795"}[wasmModuleId] + ".module.wasm");
/******/ var promise;
/******/ if(importObject instanceof Promise && typeof WebAssembly.compileStreaming === 'function') {
/******/ promise = Promise.all([WebAssembly.compileStreaming(req), importObject]).then(function(items) {
@ -287,7 +287,7 @@
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("// A dependency graph that contains any wasm must all be imported\n// asynchronously. This `bootstrap.js` file does the single async import, so\n// that no one else needs to worry about it again.\nPromise.all(/*! import() */[__webpack_require__.e(0), __webpack_require__.e(1)]).then(__webpack_require__.bind(null, /*! ./index.js */ \"./index.js\"))\n .catch(e => console.error(\"Error importing `index.js`:\", e));\n\n\n//# sourceURL=webpack:///./bootstrap.js?");
eval("// A dependency graph that contains any wasm must all be imported\n// asynchronously. This `bootstrap.js` file does the single async import, so\n// that no one else needs to worry about it again.\n__webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./index.js */ \"./index.js\"))\n .catch(e => console.error(\"Error importing `index.js`:\", e));\n\n\n//# sourceURL=webpack:///./bootstrap.js?");
/***/ })

37
docs/data/example.json Normal file
View File

@ -0,0 +1,37 @@
{
"store": {
"book": [
{
"category": "reference",
"author": "Nigel Rees",
"title": "Sayings of the Century",
"price": 8.95
},
{
"category": "fiction",
"author": "Evelyn Waugh",
"title": "Sword of Honour",
"price": 12.99
},
{
"category": "fiction",
"author": "Herman Melville",
"title": "Moby Dick",
"isbn": "0-553-21311-3",
"price": 8.99
},
{
"category": "fiction",
"author": "J. R. R. Tolkien",
"title": "The Lord of the Rings",
"isbn": "0-395-19395-8",
"price": 22.99
}
],
"bicycle": {
"color": "red",
"price": 19.95
}
},
"expensive": 10
}

View File

@ -1,10 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<title>JsonPath App - Webassembly</title>
</head>
<body>
<script src="./bootstrap.js"></script>
</body>
<title>JsonPath evaluator - Webassembly via Rust</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body role="document">
<div class="container">
<h3 style="margin-top: 15px;">JsonPath evaluator - Webassembly via Rust</h3>
<!--
<div style="margin-top: -12px; margin-bottom: 10px;">
<span id="version" style="font-size: xx-small"></span>&nbsp;-&nbsp;
<span id="timestamp" style="font-size: xx-small"></span>
</div>
-->
<div class="row">
<div class="col-md-6">
<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>
</div>
<div class="form-group">
<div class="input-group mb-3">
<input type="text" id="jsonpath-input" class="form-control" placeholder="Enter path">
<div class="input-group-append">
<span class="input-group-text" id="read-json">Go!</span>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<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>
<script src="./bootstrap.js"></script>
</body>
</html>

View File

@ -1,5 +1,5 @@
[package]
name = "wasm"
name = "jsonpath-wasm"
version = "0.1.0"
authors = ["freestrings <freestrings@gmail.com>"]

View File

@ -7,5 +7,6 @@ cd ./www && \
rm -rf node_modules && \
npm install && \
cd .. && \
wasm-pack build --target=$1 --out-dir=www/node_modules/rs-jsonpath
wasm-pack build --target=$1 && \
cd pkg && npm link && \
cd ../www && npm link jsonpath-wasm

View File

@ -0,0 +1,37 @@
{
"store": {
"book": [
{
"category": "reference",
"author": "Nigel Rees",
"title": "Sayings of the Century",
"price": 8.95
},
{
"category": "fiction",
"author": "Evelyn Waugh",
"title": "Sword of Honour",
"price": 12.99
},
{
"category": "fiction",
"author": "Herman Melville",
"title": "Moby Dick",
"isbn": "0-553-21311-3",
"price": 8.99
},
{
"category": "fiction",
"author": "J. R. R. Tolkien",
"title": "The Lord of the Rings",
"isbn": "0-395-19395-8",
"price": 22.99
}
],
"bicycle": {
"color": "red",
"price": 19.95
}
},
"expensive": 10
}

View File

@ -1,10 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<title>JsonPath Evaluator</title>
</head>
<body>
<script src="./bootstrap.js"></script>
</body>
<title>JsonPath evaluator - Webassembly via Rust</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body role="document">
<div class="container">
<h3 style="margin-top: 15px;">JsonPath evaluator - Webassembly via Rust</h3>
<!--
<div style="margin-top: -12px; margin-bottom: 10px;">
<span id="version" style="font-size: xx-small"></span>&nbsp;-&nbsp;
<span id="timestamp" style="font-size: xx-small"></span>
</div>
-->
<div class="row">
<div class="col-md-6">
<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>
</div>
<div class="form-group">
<div class="input-group mb-3">
<input type="text" id="jsonpath-input" class="form-control" placeholder="Enter path">
<div class="input-group-append">
<span class="input-group-text" id="read-json">Go!</span>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<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>
<script src="./bootstrap.js"></script>
</body>
</html>

View File

@ -1,16 +1,48 @@
import * as jsonpath from "rs-jsonpath";
import * as jsonpath from "jsonpath-wasm";
let jsonString = "{\"a\" : 1}";
function getTextarea() {
return document.querySelector('#json-example');
}
let template = jsonpath.compile("$.a");
console.log(template(jsonString));
console.log(template(JSON.parse(jsonString)));
function getJsonpathInput() {
return document.querySelector('#jsonpath-input');
}
let reader1 = jsonpath.reader(jsonString);
console.log(reader1("$.a"));
function getReadBtn() {
return document.querySelector('#read-json');
}
let reader2 = jsonpath.reader(JSON.parse(jsonString));
console.log(reader2("$.a"));
function getReadResult() {
return document.querySelector('#read-result');
}
console.log(jsonpath.read(JSON.parse(jsonString), "$.a"));
console.log(jsonpath.read(jsonString, "$.a"));
function initData(url) {
return fetch(url)
.then((res) => res.text())
.then((jsonStr) => getTextarea().value = jsonStr)
.catch(console.error);
}
function initEvent() {
getJsonpathInput().onkeyup = function(e) {
var charCode = (typeof e.which === "number") ? e.which : e.keyCode;
if(charCode == 13) {
read();
}
}
getReadBtn().onclick = function() {
read();
}
function read() {
let ret = jsonpath.read(getTextarea().value, getJsonpathInput().value);
if(typeof ret === 'string') {
getReadResult().innerText = ret;
} else {
getReadResult().innerText = JSON.stringify(ret, null, 2);
}
}
}
initData('data/example.json').then(initEvent)