You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
jsdoc-tester/index.html

207 lines
7.6 KiB

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>JSDoc tester</title>
<script type="module" defer>
import CodeMirror from 'https://dev.jspm.io/npm:codemirror@5.65.2';
import 'https://dev.jspm.io/npm:codemirror@5.65.2/mode/javascript/javascript.js';
import 'https://dev.jspm.io/npm:codemirror@5.65.2/addon/edit/closebrackets';
import bycontract from 'https://dev.jspm.io/npm:bycontract@2.0.11';
import JSONfn from 'https://dev.jspm.io/npm:jsonfn@0.31.0';
const
createEditor = ({
parentElement,
mimeType,
isReadOnly
}) => CodeMirror(
parentElement,
{
mode: mimeType,
theme: 'rubyblue',
lineNumbers: true,
indentUnit: 4,
autoCloseBrackets: true,
readOnly: isReadOnly
}
),
jsInputEditor = createEditor({
parentElement: document.querySelector('.App__JsInput__Editor'),
mimeType: 'application/javascript'
}),
jsOutputEditor = createEditor({
parentElement: document.querySelector('.App__JsonOutput__Editor'),
mimeType: 'application/json',
isReadOnly: true
}),
jsdocInputField = document.querySelector('.App__Main__JsdocInput__Input__Field'),
jsdocOutputField = document.querySelector('.App__Main__JsdocOutput__Input__Field'),
onInput = () => {
const
jsDocInputValue = jsdocInputField.value,
jsInputValue = jsInputEditor.getValue();
if(jsDocInputValue && jsInputValue){
try {
jsOutputEditor.setValue(
JSON.stringify(
JSON.parse(
JSONfn.JSONfn.stringify(
bycontract.validate(
eval(`(() => {\n${jsInputValue}\n})()`),
jsDocInputValue
)
)
),
null,
4
)
);
jsdocOutputField.value = '';
}
catch(error){
jsdocOutputField.value = error.message;
jsOutputEditor.setValue('');
}
}
else {
jsdocOutputField.value = '';
}
},
resetButton = document.querySelector('.App__Nav__Reset'),
reset = () => {
jsdocInputField.value = 'string';
jsInputEditor.setValue(`return 'Lorem ipsum dolor sit amet';`);
};
jsdocInputField.addEventListener('input', onInput);
jsInputEditor.on('change', onInput);
resetButton.addEventListener('click', event => {
event.preventDefault();
reset();
});
reset();
</script>
<style>
@import 'https://cdn.jsdelivr.net/npm/@picocss/pico@1.5.0/css/pico.min.css';
@import 'https://cdn.jsdelivr.net/npm/codemirror@5.25.0/lib/codemirror.css';
@import 'https://cdn.jsdelivr.net/npm/codemirror@5.25.0/theme/rubyblue.css';
.App__Nav *,
.App__Main__JsdocInput__Input,
.App__Main__JsdocInput__Input__Field,
.App__Main__JsdocOutput__Input,
.App__Main__JsdocOutput__Input__Field {
margin: 0;
}
.App__Footer {
padding: 0;
}
.CodeMirror {
height: 100%;
}
.App {
height: 100vh;
padding: 0.5rem;
display: flex;
flex-direction: column;
}
.App__Nav {
align-items: center;
}
.App__Main {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
'App__Main__JsdocInput App__JsInput'
'App__Main__JsdocOutput App__JsonOutput';
}
.App__Main__JsdocInput,
.App__JsInput,
.App__Main__JsdocOutput,
.App__JsonOutput {
padding: 0.5rem;
}
.App__Main__JsdocInput__Input,
.App__Main__JsdocInput__Input__Field,
.App__Main__JsdocOutput__Input,
.App__Main__JsdocOutput__Input__Field {
height: 100%;
}
.App__Main__JsdocInput__Input__Field {
resize: none;
font-family: monospace;
}
.App__JsInput,
.App__JsonOutput {
display: flex;
flex-direction: column;
overflow: auto;
}
.App__JsInput__Editor,
.App__JsonOutput__Editor {
height: 0;
flex: 1 1 auto;
}
.App__Footer {
text-align: center;
}
</style>
</head>
<body class="App">
<nav class="App__Nav">
<h1>JSDoc Tester</h1>
<ul>
<li>
<a
href="https://jsdoc.app/"
target="_blank"
>Documentation</a>
<a
class="App__Nav__Reset"
href="#"
>Reset</a>
</li>
</ul>
</nav>
<main class="App__Main">
<div
class="App__Main__JsdocInput"
style="grid-area: App__Main__JsdocInput"
><label
class="App__Main__JsdocInput__Input"
><textarea
class="App__Main__JsdocInput__Input__Field"
></textarea></label></div>
<div
class="App__JsInput"
style="grid-area: App__JsInput"
><div
class="App__JsInput__Editor"
></div></div>
<div
class="App__Main__JsdocOutput"
style="grid-area: App__Main__JsdocOutput"
><label
class="App__Main__JsdocOutput__Input"
><textarea
class="App__Main__JsdocOutput__Input__Field"
readonly
></textarea></label></div>
<div
class="App__JsonOutput"
style="grid-area: App__JsonOutput"
><div
class="App__JsonOutput__Editor"
></div></div>
</main>
<footer class="App__Footer">
<a href="https://git.kaki87.net/KaKi87/jsdoc-tester" target="_blank">Source code</a>
</footer>
</body>
</html>