Skip to content

(enhancement) - re-worked the Playground page to use CodeMirror #352

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
catull wants to merge 1 commit into
base: master
Choose a base branch
from
Open

(enhancement) - re-worked the Playground page to use CodeMirror #352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 58 additions & 58 deletions playground/src/main/java/no/priv/garshol/jslt/playground/PlaygroundServer.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.eclipse.jetty.http.HttpStatus;
import org.eclipse.jetty.server.Request;
import org.eclipse.jetty.server.Server;
import org.eclipse.jetty.server.handler.AbstractHandler;
Expand All @@ -19,65 +18,66 @@
import com.schibsted.spt.data.jslt.Expression;

public class PlaygroundServer {
private static ObjectMapper mapper = new ObjectMapper();
private static String INDEX_HTML = "lambda.html";

public static class JsltHandler extends AbstractHandler {
public void handle(String target, Request baseRequest, HttpServletRequest request, HttpServletResponse response) {
if (!target.equals("/jslt"))
return;

if (request.getMethod().equals("GET")) {
try (InputStream stream = Parser.class.getClassLoader().getResourceAsStream(INDEX_HTML)) {
byte[] buf = new byte[16384];
int bytes;
while ((bytes = stream.read(buf)) != -1) {
response.getOutputStream().write(buf, 0, bytes);
}

response.setStatus(HttpServletResponse.SC_OK);
response.addHeader("Content-type", "text/html");
} catch (IOException e) {
response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
private static final ObjectMapper mapper = new ObjectMapper();

public static class JsltHandler extends AbstractHandler {
public void handle(String target, Request baseRequest, HttpServletRequest request, HttpServletResponse response) {
if (!target.equals("/jslt"))
return;

String method = request.getMethod();

if ("GET".equals(method)) {
String INDEX_HTML = "lambda.html";
try (InputStream stream = Parser.class.getClassLoader().getResourceAsStream(INDEX_HTML)) {
byte[] buf = new byte[16384];
int bytes;
while ((bytes = stream.read(buf)) != -1) {
response.getOutputStream().write(buf, 0, bytes);
}

response.setStatus(HttpServletResponse.SC_OK);
response.addHeader("Content-type", "text/html");
} catch (IOException e) {
response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
}

baseRequest.setHandled(true);
return;
}

if ("POST".equals(method)) {
try {
JsonNode body = mapper.readTree(request.getReader());
JsonNode input = mapper.readTree(body.get("json").asText());
String jslt = body.get("jslt").asText();

Expression template = Parser.compileString(jslt);
JsonNode output = template.apply(input);
response.setStatus(HttpServletResponse.SC_OK);

response.getOutputStream().write(mapper.writerWithDefaultPrettyPrinter().writeValueAsBytes(output));
} catch (Exception e) {
try (PrintStream ps = new PrintStream(response.getOutputStream())) {
e.printStackTrace(ps);

Check warning

Code scanning / CodeQL

Information exposure through a stack trace Medium

Error information
Loading
can be exposed to an external user.
} catch (IOException ignored) {
}
response.setStatus(HttpServletResponse.SC_BAD_REQUEST);
}

baseRequest.setHandled(true);
}
}

baseRequest.setHandled(true);
return;
}

if (request.getMethod().equals("POST")) {
try {
JsonNode body = mapper.readTree(request.getReader());
JsonNode input = mapper.readTree(body.get("json").asText());
String jslt = body.get("jslt").asText();

Expression template = Parser.compileString(jslt);
JsonNode output = template.apply(input);
response.setStatus(HttpServletResponse.SC_OK);

response.getOutputStream().write(mapper.writerWithDefaultPrettyPrinter().writeValueAsBytes(output));

} catch (Exception e) {
try (PrintStream ps = new PrintStream(response.getOutputStream())) {
e.printStackTrace(ps);
} catch (IOException e2) {
}
response.setStatus(HttpServletResponse.SC_BAD_REQUEST);
}

baseRequest.setHandled(true);
}
}
}

public static void main(String[] argv) throws Exception {
Server server = new Server(Integer.parseInt(argv[0]));
HandlerList handlers = new HandlerList();
handlers.addHandler(new JsltHandler());
server.setHandler(handlers);

server.start();
server.join();
}
public static void main(String[] argv) throws Exception {
int port = argv.length == 0 ? 9999 : Integer.parseInt(argv[0]);
Server server = new Server(port);
HandlerList handlers = new HandlerList();
handlers.addHandler(new JsltHandler());
server.setHandler(handlers);

server.start();
server.join();
}
}
205 changes: 120 additions & 85 deletions playground/src/main/resources/lambda.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,99 +1,134 @@
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}

pre {
background-color: #E3E3E3;
font-family: "Lucida Console", Monaco, "Courier New", monospace;
font-size: 14pt
}

#jslt, #input {
font-family: "Lucida Console", Monaco, "Courier New", monospace;
font-size: 14pt
}

body {
font-family: "Arial", "Helvetica", sans-serif;
margin-left: 36pt;
margin-right: 36pt;
margin-top: 48pt;
}
</style>
<script>
function send() {
var out = document.getElementById('result');
out.firstChild.nodeValue = '...wait...';

var input = document.getElementById('input').value
var jslt = document.getElementById('jslt').value
var data = {"json" : input, "jslt" : jslt }

var http = new XMLHttpRequest();
var url = "jslt-demo";
//var url = "http://localhost:9999/jslt";
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/json");

http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
var out = document.getElementById('result');
out.firstChild.nodeValue = http.responseText;
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>

<title>JSLT demo playground</title>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
}

body {
font-family: 'Arial', 'Helvetica', sans-serif;
font-size: 14px;
margin-left: 36pt;
margin-right: 36pt;
margin-top: 48pt;
}
</style>
</head>

<body>
<script type='application/javascript'>
//<![CDATA[
function send() {
window.resultEditorView.docView.dom.innerText = '... wait ...';

const http = new XMLHttpRequest();
const url = 'jslt';

http.open('POST', url, true);
http.setRequestHeader('Content-type', 'application/json');

http.onreadystatechange = function () {
if (http.readyState === 4 && http.status === 200) {
window.resultEditorView.docView.dom.innerText = http.responseText;
}
}

const json = window.jsonEditorView.state.sliceDoc();
const jslt = window.jstlEditorView.state.sliceDoc();

const data = {json, jslt};
http.send(JSON.stringify(data));
}
}
http.send(JSON.stringify(data));
}
</script>
//]]>
</script>

<title>JSLT demo playground</title>
<h1>JSLT demo playground</h1>
<h1>JSLT demo playground</h1>

<p>Here you can play with
<a href="https://github.com/schibsted/jslt">JSLT</a>
transforms.
Please <a href="https://github.com/schibsted/jslt/issues"
>report any issues</a>.</p>
<p>
Here you can play with <a href='https://github.com/schibsted/jslt'>JSLT</a> transforms.
Please <a href='https://github.com/schibsted/jslt/issues'>report any issues</a>.
</p>

<h2>Result</h2>
<h2>Input</h2>

<pre id="result">
<div id='jsonEditor'></div>

Transform result will appear here
<h2>JSLT</h2>

</pre>
<div id='jsltEditor'></div>

<p><input type=submit value="Run!" class=button onclick="send()">
<p><input id='submit' type='submit' value='Run!' class='button' onclick='send ()'></p>

<h2>JSLT</h2>
<h2>Result</h2>

<textarea id="jslt" name="jslt" cols=80 rows=20>
let idparts = split(.id, "-")
let xxx = [for ($idparts) "x" * size(.)]
<div id='resultEditor'></div>

{
"id" : join($xxx, "-"),
"type" : "Anonymized-View",
* : .
}
</textarea>
<script type="importmap">
{
"imports": {
"@codemirror/": "https://deno.land/x/codemirror_esm@v6.0.1/esm/"
}
}
</script>

<script async="" type='module'>
//<![CDATA[
import {
basicSetup,
EditorView,
} from '@codemirror/codemirror/dist/index.js';
import { javascript } from '@codemirror/lang-javascript/dist/index.js';
import { json } from '@codemirror/lang-json/dist/index.js';
import { oneDark } from '@codemirror/theme-one-dark/dist/index.js';

<h2>Input</h2>
window.jsonEditor = document.getElementById('jsonEditor');
window.jstlEditor = document.getElementById('jsltEditor');
window.resultEditor = document.getElementById('resultEditor');

window.jsonEditorView = new EditorView({
doc: JSON.stringify({
schema: 'http://schemas.schibsted.io/thing/pulse-simple.json#1.json',
id: 'w23q7ca1-8729-24923-922b-1c0517ddffjf1',
published: '2017-05-04T09:13:29+02:00',
type: 'View',
environmentId: 'urn:schibsted.com:environment:uuid',
url: 'http://www.aftenposten.no/'
}, undefined, ' '),
extensions: [basicSetup, json(), oneDark],
parent: window.jsonEditor,
});

window.jstlEditorView = new EditorView({
doc: `let idparts = split (.id, "-")
let xxx = [for ($idparts) "x" * size (.)]

<textarea id="input" name="input" cols=80 rows=20>
{
"schema" : "http://schemas.schibsted.io/thing/pulse-simple.json#1.json",
"id" : "w23q7ca1-8729-24923-922b-1c0517ddffjf1",
"published" : "2017-05-04T09:13:29+02:00",
"type" : "View",
"environmentId" : "urn:schibsted.com:environment:uuid",
"url" : "http://www.aftenposten.no/"
}
</textarea>
"id" : join ($xxx, "-"),
"type" : "Anonymized-View",
* : .
}`,
extensions: [basicSetup, javascript(), oneDark],
parent: window.jstlEditor,
});

window.resultEditorView = new EditorView({
doc: 'Transform result will appear here',
extensions: [basicSetup, json(), oneDark],
parent: window.resultEditor,
});
//]]>
</script>
</body>
</html>
Loading