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; } }