diff --git a/app.js b/app.js index 35d8c60..4f0a8ca 100644 --- a/app.js +++ b/app.js @@ -1,17 +1,42 @@ // based on basicSetup https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts -const editorSrc = `import {keymap, highlightSpecialChars, drawSelection, highlightActiveLine, dropCursor, - rectangularSelection, crosshairCursor, - lineNumbers, highlightActiveLineGutter} from '@codemirror/view' +const editorSrc = ` +import { + keymap, highlightSpecialChars, + drawSelection, highlightActiveLine, dropCursor, + rectangularSelection, crosshairCursor, + lineNumbers, highlightActiveLineGutter, + EditorView +} from '@codemirror/view' import {EditorState} from '@codemirror/state' -import {defaultHighlightStyle, syntaxHighlighting, indentOnInput, bracketMatching, - foldGutter, foldKeymap} from '@codemirror/language' -import {defaultKeymap, history, historyKeymap} from '@codemirror/commands' -import {searchKeymap, highlightSelectionMatches} from '@codemirror/search' -import {autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap} from '@codemirror/autocomplete' +import { + defaultHighlightStyle, + syntaxHighlighting, + indentOnInput, + bracketMatching, + foldGutter, + foldKeymap +} from '@codemirror/language' +import { + defaultKeymap, + history, + historyKeymap +} from '@codemirror/commands' +import { + searchKeymap, + highlightSelectionMatches +} from '@codemirror/search' +import { + autocompletion, + completionKeymap, + closeBrackets, + closeBracketsKeymap +} from '@codemirror/autocomplete' import {lintKeymap} from '@codemirror/lint' -/* */export const basicSetup = (() => [ +console.log('loading file') + +const basicSetup = (() => [ lineNumbers(), highlightActiveLineGutter(), highlightSpecialChars(), @@ -38,7 +63,12 @@ import {lintKeymap} from '@codemirror/lint' ...completionKeymap, ...lintKeymap ]) -])()` +])() + +window.editorLib = { + basicSetup, + EditorView +}` class Builder { jApiBaseUrl = 'https://data.jsdelivr.com/v1/' @@ -258,7 +288,53 @@ class BuildView extends HTMLElement { ` } +class Editor extends HTMLElement { + constructor() { + super() + this.attachShadow({mode: 'open'}) + this.shadowRoot.adoptedStyleSheets = [ + this.constructor.styleSheet + ] + this.el = document.createElement('div') + this.shadowRoot.append(this.el) + } + + connectedCallback() { + const {EditorView, basicSetup} = window.editorLib + new EditorView({ + doc: '', + extensions: [ + basicSetup, + ], + parent: this.el, + root: this.shadowRoot, + }) + } + + static get styleSheet() { + if (this._styleSheet === undefined) { + this._styleSheet = new CSSStyleSheet() + this._styleSheet.replaceSync(this.css) + } + return this._styleSheet + } + + static css = ` + :host { + display: flex; + flex-direction: column; + align-items: stretch; + height: 33vh; + background-color: #fff; + } + :host > * { + flex-grow: 1; + } + ` +} + customElements.define('m-build-view', BuildView) +customElements.define('m-editor', Editor) class App { constructor() { @@ -266,16 +342,33 @@ class App { this.buildView = document.createElement('m-build-view') document.body.append(this.buildView) this.builder.log = this.buildView.log.bind(this.buildView) - this.build() + this.run() + } + + async run() { + await this.build() + await this.display() } async build() { try { await this.builder.build() + const s = document.createElement('script') + s.type = 'module' + s.textContent = this.builder.code + document.head.append(s) + this.buildView.log('skipped appending code') + //this.buildView.log(this.builder.code) } catch (e) { this.buildView.log(`${e}`) } } + + async display() { + await new Promise(r => setTimeout(() => r(), 500)) + this.editor = document.createElement('m-editor') + document.body.append(this.editor) + } } new App() \ No newline at end of file