Merge pull request 'add compartment and state effect exports' (#10) from compartment-export into pages

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

app.js

@@ -8,7 +8,11 @@ import {
   lineNumbers, highlightActiveLineGutter,
   EditorView
 } from '@codemirror/view'
-import {EditorState} from '@codemirror/state'
+import {
+  EditorState,
+  Compartment,
+  StateEffect
+} from '@codemirror/state'
 import {
   defaultHighlightStyle,
   syntaxHighlighting,
@@ -33,45 +37,55 @@ 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'
 
-console.log('loading file')
+window.CodeMirrorBasic = {
-
+  // @codemirror/view
-const basicSetup = (() => [
+  keymap, highlightSpecialChars, 
-  lineNumbers(),
+  drawSelection, highlightActiveLine, dropCursor,
-  highlightActiveLineGutter(),
+  rectangularSelection, crosshairCursor,
-  highlightSpecialChars(),
+  lineNumbers, highlightActiveLineGutter,
-  history(),
+  EditorView,
-  foldGutter(),
+  // @codemirror/state
-  drawSelection(),
+  EditorState,
-  dropCursor(),
+  Compartment,
-  EditorState.allowMultipleSelections.of(true),
+  StateEffect,
-  indentOnInput(),
+  // @codemirror/language
-  syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
+  defaultHighlightStyle,
-  bracketMatching(),
+  syntaxHighlighting,
-  closeBrackets(),
+  indentOnInput, 
-  autocompletion(),
+  bracketMatching,
-  rectangularSelection(),
+  foldGutter,
-  crosshairCursor(),
+  foldKeymap,
-  highlightActiveLine(),
+  // @codemirror/commands
-  highlightSelectionMatches(),
+  defaultKeymap,
-  keymap.of([
+  history,
-    ...closeBracketsKeymap,
+  historyKeymap,
-    ...defaultKeymap,
+  // @codemirror/search
-    ...searchKeymap,
+  searchKeymap,
-    ...historyKeymap,
+  highlightSelectionMatches,
-    ...foldKeymap,
+  // @codemirror/autocomplete
-    ...completionKeymap,
+  autocompletion,
-    ...lintKeymap
+  completionKeymap,
-  ])
+  closeBrackets,
-])()
+  closeBracketsKeymap,
-
+  // @codemirror/lint
-window.editorLib = {
+  lintKeymap,
-  basicSetup,
+  // @codemirror/lang-javascript
-  EditorView
+  javascriptLanguage,
-}`
+  // @codemirror/lang-css
+  cssLanguage,
+  // @codemirror/lang-json
+  jsonLanguage,
+  // @codemirror/lang-html
+  htmlLanguage,
+}` + "\n"
 
 class Builder {
-  // any URL that supports pkg/path or pkg@version/path
+  // any URL that supports pkg/path o pkg@version/path
   baseUrl = 'https://unpkg.com'
   scripts = {
     '@rollup/browser': {
@@ -89,6 +103,9 @@ class Builder {
     "@codemirror/search",
     "@codemirror/state",
     "@codemirror/view",
+    "@codemirror/lang-html",
+    "@codemirror/lang-css",
+    "@codemirror/lang-json",
     "@codemirror/lang-javascript",
   ]
 
@@ -220,6 +237,8 @@ class Builder {
       new TextEncoder().encode(this.code)
     )
     this.log(`built ${this.sha}`)
+    const raw = new TextEncoder().encode(this.code)
+    this.log(`${raw.byteLength} bytes`)
   }
 }
 
@@ -284,8 +303,38 @@ class Editor extends HTMLElement {
   }
 
   connectedCallback() {
-    const {EditorView, basicSetup} = window.editorLib
+    const cm = window.CodeMirrorBasic
-    this.view = new EditorView({
+    const basicSetup = [
+      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,
@@ -318,6 +367,26 @@ 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)
 
@@ -332,6 +401,7 @@ class App {
 
   async run() {
     await this.build()
+    await this.save()
     await this.display()
   }
 
@@ -342,8 +412,21 @@ class App {
       s.type = 'module'
       s.textContent = this.builder.code
       document.head.append(s)
-      this.buildView.log('skipped appending code')
+    } catch (e) {
-      //this.buildView.log(this.builder.code)
+      this.buildView.log(`${e}`)
+    }
+  }
+
+  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

@@ -0,0 +1,12 @@
+<!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>