JsonPath evaluator 페이지 기본

docs/1.bootstrap.js

@@ -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?");
-
-/***/ })
-
-}]);

docs/bootstrap.js

@@ -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": {
+/******/ 				"./jsonpath_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);
-/******/ 					},
 /******/ 					"__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) {
+/******/ 					"__wbindgen_closure_wrapper61": function(p0i32,p1i32,p2i32) {
-/******/ 						return installedModules["./node_modules/rs-jsonpath/wasm.js"].exports["__wbindgen_closure_wrapper56"](p0i32,p1i32,p2i32);
+/******/ 						return installedModules["../pkg/jsonpath_wasm.js"].exports["__wbindgen_closure_wrapper61"](p0i32,p1i32,p2i32);
 /******/ 					},
-/******/ 					"__wbindgen_closure_wrapper58": function(p0i32,p1i32,p2i32) {
+/******/ 					"__wbindgen_closure_wrapper63": function(p0i32,p1i32,p2i32) {
-/******/ 						return installedModules["./node_modules/rs-jsonpath/wasm.js"].exports["__wbindgen_closure_wrapper58"](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?");
 
 /***/ })
 

docs/data/example.json

@@ -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
+}

docs/index.html

@@ -1,10 +1,40 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
     <meta charset="utf-8">
-    <title>JsonPath App - Webassembly</title>
+    <title>JsonPath evaluator - Webassembly via Rust</title>
-  </head>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
-  <body>
+</head>
-    <script src="./bootstrap.js"></script>
+<body role="document">
-  </body>
+<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>

wasm/Cargo.toml

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

wasm/build.sh

@@ -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

wasm/www/data/example.json

@@ -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
+}

wasm/www/index.html

@@ -1,10 +1,40 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
     <meta charset="utf-8">
-    <title>JsonPath Evaluator</title>
+    <title>JsonPath evaluator - Webassembly via Rust</title>
-  </head>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
-  <body>
+</head>
-    <script src="./bootstrap.js"></script>
+<body role="document">
-  </body>
+<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>

wasm/www/index.js

@@ -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");
+function getJsonpathInput() {
-console.log(template(jsonString));
+    return document.querySelector('#jsonpath-input');
-console.log(template(JSON.parse(jsonString)));
+}
 
-let reader1 = jsonpath.reader(jsonString);
+function getReadBtn() {
-console.log(reader1("$.a"));
+    return document.querySelector('#read-json');
+}
 
-let reader2 = jsonpath.reader(JSON.parse(jsonString));
+function getReadResult() {
-console.log(reader2("$.a"));
+    return document.querySelector('#read-result');
+}
 
-console.log(jsonpath.read(JSON.parse(jsonString), "$.a"));
+function initData(url) {
-console.log(jsonpath.read(jsonString, "$.a"));
+    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)