Merge pull request 'run codemirror after building on client side' (#4) from run-codemirror into pages

Reviewed-on: https://codeberg.org/macchiato/editor-lib-codemirror/pulls/4

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()