import { app, Component } from './apprun';
declare var CodeMirror;
const styles = `
.CodeMirror, .apprun-play iframe {
height: 100%;
border: dotted gray 1px;
}
.apprun-play {
height: 100%;
display: flex;
font-size: 1.1rem;
}
.apprun-play .col {
margin: 2px;
}
.apprun-play .editor, .apprun-play .preview {
width: 100%;
height: 100%;
}
`;
const encodeHTML = code => {
return code.replace(/&/g, '&')
.replace(//g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
const code_html = code => `
AppRun Playground
${encodeHTML(code)}
`;
class Play extends Component {
view = ({ code, hide_code }) => {
return <>
{hide_code ?
:
}
;
}
mounted = props => {
const element = this['element'];
const code_id = props['code-id'];
const hide_code = props['hide-code'];
const code_width = props['code-width'];
let code_area;
if (code_id) {
code_area = document.getElementById(code_id);
} else {
code_area = element.previousElementSibling ||
element.parentElement.previousElementSibling;
}
const code = code_area?.innerText // from div
|| code_area?.value // from textarea
|| element.textContent // from child node
if (code_area) code_area.style.display = 'none';
return { code, hide_code, code_width };
}
rendered = ({ code, hide_code, code_width }) => {
const element = this['element'];
const textarea = element.querySelector(".apprun-play .editor") as any;
let iframe = element.querySelector('.apprun-play .preview');
if (!iframe || !textarea) return;
const run_code = code => {
const iframe_clone = iframe.cloneNode();
iframe.parentNode?.replaceChild(iframe_clone, iframe);
iframe = iframe_clone;
const doc = iframe.contentWindow?.document;
if (!doc) return;
doc.open();
if (code.indexOf('= 0)
doc.write(code);
else
doc.write(code_html(code));
doc.close();
}
if (code) run_code(code);
if (hide_code || !textarea) return;
if (code_width) textarea.parentElement.style.width = code_width;
if (typeof CodeMirror === 'undefined') {
textarea.onkeyup = () => run_code(textarea.value);
} else {
const editor = CodeMirror.fromTextArea(textarea, {
lineNumbers: true,
mode: 'jsx'
});
editor.setValue(code);
editor.on('change', (cm) => run_code(cm.getValue()));
}
}
}
app.webComponent('apprun-code', Play);