import {
DeesElement,
html,
customElement,
TemplateResult,
property,
state,
} from '@designestate/dees-element';
import hlight from 'highlight.js';
import * as smartstring from '@pushrocks/smartstring';
import * as domtools from '@designestate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
'dees-dataview-codebox': DeesDataviewCodebox;
}
}
@customElement('dees-dataview-codebox')
export class DeesDataviewCodebox extends DeesElement {
public static demo = () => html`
import * as text from './hello'; const hiThere = 'nice'; const myFunction = async () => {
console.log('nice one'); }
`;
@property()
public progLang: string = 'typescript';
@property({
type: String,
reflect: true,
})
public codeToDisplay: string = '';
constructor() {
super();
}
render(): TemplateResult {
return html`
${domtools.elementBasic.styles}
${this.progLang}
${(() => {
let lineCounter = 0;
return this.codeToDisplay.split('\n').map(lineArg => {
lineCounter++;
return html`
${lineCounter}
`;
})
})()}
`;
}
@state()
private codeToDisplayStore = '';
public async updated(_changedProperties) {
super.updated(_changedProperties);
console.log('highlighting now');
console.log(this.childNodes);
const slottedCodeNodes: Text[] = [];
this.childNodes.forEach((childNode) => {
if (childNode.nodeName === '#text') {
slottedCodeNodes.push(childNode as Text);
}
});
if (this.codeToDisplay && this.codeToDisplay !== this.codeToDisplayStore) {
this.codeToDisplayStore = smartstring.indent.normalize(this.codeToDisplay).trimStart();
}
if (slottedCodeNodes[0] && slottedCodeNodes[0].wholeText && !this.codeToDisplay) {
this.codeToDisplayStore = smartstring.indent.normalize(slottedCodeNodes[0].wholeText).trimStart();
this.codeToDisplay = this.codeToDisplayStore;
}
await domtools.plugins.smartdelay.delayFor(0);
const localCodeNode = this.shadowRoot.querySelector('code');
const html = hlight.highlight(this.codeToDisplayStore, {language: this.progLang, ignoreIllegals: true});
localCodeNode.innerHTML = html.value;
}
}