From 42cbe68468d03ec79143d37db84e7903ff136071 Mon Sep 17 00:00:00 2001 From: bat Date: Mon, 1 May 2023 09:37:29 +0000 Subject: [PATCH] update build w/ language highlighting --- app.js | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/app.js b/app.js index 6b67976..c69c7a7 100644 --- a/app.js +++ b/app.js @@ -33,6 +33,10 @@ 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 = { // @codemirror/view @@ -64,6 +68,14 @@ window.CodeMirrorBasic = { closeBracketsKeymap, // @codemirror/lint lintKeymap, + // @codemirror/lang-javascript + javascriptLanguage, + // @codemirror/lang-css + cssLanguage, + // @codemirror/lang-json + jsonLanguage, + // @codemirror/lang-html + htmlLanguage, }` + "\n" class Builder { @@ -85,6 +97,10 @@ class Builder { "@codemirror/search", "@codemirror/state", "@codemirror/view", + "@codemirror/lang-html", + "@codemirror/lang-css", + "@codemirror/lang-json", + "@codemirror/lang-javascript", ] constructor() { @@ -345,6 +361,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) @@ -359,6 +395,7 @@ class App { async run() { await this.build() + await this.save() await this.display() } @@ -374,6 +411,21 @@ class App { } } + 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}`) + } + } + async display() { await new Promise(r => setTimeout(() => r(), 500)) this.editor = document.createElement('m-editor')