From d28fa1c7023ae19a3ab7226e48f5d7598baa6014 Mon Sep 17 00:00:00 2001 From: bat Date: Thu, 20 Apr 2023 06:50:24 +0000 Subject: [PATCH] bundle codemirror w/ rollup --- app.js | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 71 insertions(+), 5 deletions(-) diff --git a/app.js b/app.js index 8a05429..657d764 100644 --- a/app.js +++ b/app.js @@ -1,8 +1,51 @@ +// 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' +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 {lintKeymap} from '@codemirror/lint' + +/* */export const basicSetup = (() => [ + lineNumbers(), + highlightActiveLineGutter(), + highlightSpecialChars(), + history(), + foldGutter(), + drawSelection(), + dropCursor(), + EditorState.allowMultipleSelections.of(true), + indentOnInput(), + syntaxHighlighting(defaultHighlightStyle, {fallback: true}), + bracketMatching(), + closeBrackets(), + autocompletion(), + rectangularSelection(), + crosshairCursor(), + highlightActiveLine(), + highlightSelectionMatches(), + keymap.of([ + ...closeBracketsKeymap, + ...defaultKeymap, + ...searchKeymap, + ...historyKeymap, + ...foldKeymap, + ...completionKeymap, + ...lintKeymap + ]) +])()` + function log(message, cls = 'cyan') { const el = document.createElement('pre') el.classList.add(cls) el.innerText = message document.body.append(el) + ;(el.scrollIntoViewIfNeeded ?? el.scrollIntoView).call(el) } class App { @@ -113,10 +156,10 @@ class App { ) script.text = new TextDecoder().decode(ab) } else { - script.text = await resp.text + script.text = await resp.text() script.sha = resp.integrity } - log('[downloaded] ' + url, 'green') + log('[downloaded] ' + url + ` [${script.text.length}]`, 'green') return script.text } @@ -127,6 +170,25 @@ class App { document.head.append(s) } + get loaderPlugin() { + return { + name: 'loader', + resolveId: async source => { + if (source === 'editor.js' || source in this.scripts) { + return source + } + }, + load: async id => { + if (id === 'editor.js') { + return editorSrc + } else if (id in this.scripts) { + log(`[found] ${id}`) + return this.scripts[id].text + } + }, + } + } + async run() { await Promise.allSettled( this.topLevelDeps.map(dep => ( @@ -134,9 +196,13 @@ class App { )) ) await Promise.allSettled(this.downloads) - //await this.loadScript('@rollup/browser') - //const { rollup } = window.rollup - //output.value = `${typeof rollup}` + await this.loadScript('@rollup/browser') + const { rollup } = window.rollup + const input = 'editor.js' + const plugins = [this.loaderPlugin] + const bundle = await rollup({input, plugins}) + const {output} = await bundle.generate({format: 'es'}) + log(output[0].code) } }