212 lines
No EOL
7.8 KiB
HTML
212 lines
No EOL
7.8 KiB
HTML
<!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">
|
|
<meta name="darkreader-lock">
|
|
<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://cdn.jsdelivr.net/npm/bycontract@2.0.11/+esm';
|
|
|
|
import JSONfn from 'https://cdn.jsdelivr.net/npm/jsonfn@0.31.0/+esm';
|
|
|
|
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 {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
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> |