app.js

@@ -8,11 +8,7 @@ import {
   lineNumbers, highlightActiveLineGutter,
   EditorView
 } from '@codemirror/view'
-import {
+import {EditorState} from '@codemirror/state'
-  EditorState,
-  Compartment,
-  StateEffect
-} from '@codemirror/state'
 import {
   defaultHighlightStyle,
   syntaxHighlighting,
@@ -37,55 +33,45 @@ import {
   closeBracketsKeymap
 } from '@codemirror/autocomplete'
 import {lintKeymap} from '@codemirror/lint'
-import { javascriptLanguage } from '@codemirror/lang-javascript'
-import { cssLanguage } from '@codemirror/lang-css'
-import { jsonLanguage } from '@codemirror/lang-json'
-import { htmlLanguage } from '@codemirror/lang-html'
 
-window.CodeMirrorBasic = {
+console.log('loading file')
-  // @codemirror/view
+
-  keymap, highlightSpecialChars, 
+const basicSetup = (() => [
-  drawSelection, highlightActiveLine, dropCursor,
+  lineNumbers(),
-  rectangularSelection, crosshairCursor,
+  highlightActiveLineGutter(),
-  lineNumbers, highlightActiveLineGutter,
+  highlightSpecialChars(),
-  EditorView,
+  history(),
-  // @codemirror/state
+  foldGutter(),
-  EditorState,
+  drawSelection(),
-  Compartment,
+  dropCursor(),
-  StateEffect,
+  EditorState.allowMultipleSelections.of(true),
-  // @codemirror/language
+  indentOnInput(),
-  defaultHighlightStyle,
+  syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
-  syntaxHighlighting,
+  bracketMatching(),
-  indentOnInput, 
+  closeBrackets(),
-  bracketMatching,
+  autocompletion(),
-  foldGutter,
+  rectangularSelection(),
-  foldKeymap,
+  crosshairCursor(),
-  // @codemirror/commands
+  highlightActiveLine(),
-  defaultKeymap,
+  highlightSelectionMatches(),
-  history,
+  keymap.of([
-  historyKeymap,
+    ...closeBracketsKeymap,
-  // @codemirror/search
+    ...defaultKeymap,
-  searchKeymap,
+    ...searchKeymap,
-  highlightSelectionMatches,
+    ...historyKeymap,
-  // @codemirror/autocomplete
+    ...foldKeymap,
-  autocompletion,
+    ...completionKeymap,
-  completionKeymap,
+    ...lintKeymap
-  closeBrackets,
+  ])
-  closeBracketsKeymap,
+])()
-  // @codemirror/lint
+
-  lintKeymap,
+window.editorLib = {
-  // @codemirror/lang-javascript
+  basicSetup,
-  javascriptLanguage,
+  EditorView
-  // @codemirror/lang-css
+}`
-  cssLanguage,
-  // @codemirror/lang-json
-  jsonLanguage,
-  // @codemirror/lang-html
-  htmlLanguage,
-}` + "\n"
 
 class Builder {
-  // any URL that supports pkg/path o pkg@version/path
+  // any URL that supports pkg/path or pkg@version/path
   baseUrl = 'https://unpkg.com'
   scripts = {
     '@rollup/browser': {
@@ -103,9 +89,6 @@ class Builder {
     "@codemirror/search",
     "@codemirror/state",
     "@codemirror/view",
-    "@codemirror/lang-html",
-    "@codemirror/lang-css",
-    "@codemirror/lang-json",
     "@codemirror/lang-javascript",
   ]
 
@@ -237,8 +220,6 @@ class Builder {
       new TextEncoder().encode(this.code)
     )
     this.log(`built ${this.sha}`)
-    const raw = new TextEncoder().encode(this.code)
-    this.log(`${raw.byteLength} bytes`)
   }
 }
 
@@ -303,38 +284,8 @@ class Editor extends HTMLElement {
   }
 
   connectedCallback() {
-    const cm = window.CodeMirrorBasic
+    const {EditorView, basicSetup} = window.editorLib
-    const basicSetup = [
+    this.view = new EditorView({
-      cm.lineNumbers(),
-      cm.highlightActiveLineGutter(),
-      cm.highlightSpecialChars(),
-      cm.history(),
-      cm.foldGutter(),
-      cm.drawSelection(),
-      cm.dropCursor(),
-      cm.EditorState.allowMultipleSelections.of(true),
-      cm.indentOnInput(),
-      cm.syntaxHighlighting(
-        cm.defaultHighlightStyle, {fallback: true}
-      ),
-      cm.bracketMatching(),
-      cm.closeBrackets(),
-      cm.autocompletion(),
-      cm.rectangularSelection(),
-      cm.crosshairCursor(),
-      cm.highlightActiveLine(),
-      cm.highlightSelectionMatches(),
-      cm.keymap.of([
-        ...cm.closeBracketsKeymap,
-        ...cm.defaultKeymap,
-        ...cm.searchKeymap,
-        ...cm.historyKeymap,
-        ...cm.foldKeymap,
-        ...cm.completionKeymap,
-        ...cm.lintKeymap
-      ]),
-    ]
-    this.view = new cm.EditorView({
       doc: '',
       extensions: [
         basicSetup,
@@ -367,26 +318,6 @@ class Editor extends HTMLElement {
   `
 }
 
-function req(method, path, value = undefined) {
-  return new Promise((resolve, reject) => {
-    const ch = new MessageChannel()
-    const port = ch.port1
-    port.onmessage = e => {
-      resolve(e.data)
-      port.close()
-    }
-    window.parent.postMessage(
-      (
-        method === 'get' ?
-        [method, path] :
-        [method, path, value]
-      ),
-      '*',
-      [ch.port2]
-    )
-  })
-}
-
 customElements.define('m-build-view', BuildView)
 customElements.define('m-editor', Editor)
 
@@ -401,7 +332,6 @@ class App {
 
   async run() {
     await this.build()
-    await this.save()
     await this.display()
   }
 
@@ -412,21 +342,8 @@ class App {
       s.type = 'module'
       s.textContent = this.builder.code
       document.head.append(s)
-    } catch (e) {
+      this.buildView.log('skipped appending code')
-      this.buildView.log(`${e}`)
+      //this.buildView.log(this.builder.code)
-    }
-  }
-
-  async save() {
-    try {
-      const resp = await req(
-        'put',
-        '/editor-lib-codemirror/codemirror-bundle.js',
-        this.builder.code
-      )
-      if (resp.status !== 200) {
-        throw new Error(`save attempt returned ${resp.status}`)
-      }
     } catch (e) {
       this.buildView.log(`${e}`)
     }

index.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <title>CodeMirror Build</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta http-equiv="Content-Security-Policy" content="default-src unpkg.com 'self' 'unsafe-inline' 'unsafe-eval'">
-  <link rel="stylesheet" href="/editor-lib-codemirror/style.css">
-</head>
-<body>
-  <script src="/editor-lib-codemirror/app.js"></script>
-</body>
-</html>