|
|
@ -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') { |
|
|
function log(message, cls = 'cyan') { |
|
|
const el = document.createElement('pre') |
|
|
const el = document.createElement('pre') |
|
|
el.classList.add(cls) |
|
|
el.classList.add(cls) |
|
|
el.innerText = message |
|
|
el.innerText = message |
|
|
document.body.append(el) |
|
|
document.body.append(el) |
|
|
|
|
|
;(el.scrollIntoViewIfNeeded ?? el.scrollIntoView).call(el) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
class App { |
|
|
class App { |
|
|
@ -113,10 +156,10 @@ class App { |
|
|
) |
|
|
) |
|
|
script.text = new TextDecoder().decode(ab) |
|
|
script.text = new TextDecoder().decode(ab) |
|
|
} else { |
|
|
} else { |
|
|
script.text = await resp.text |
|
|
script.text = await resp.text() |
|
|
script.sha = resp.integrity |
|
|
script.sha = resp.integrity |
|
|
} |
|
|
} |
|
|
log('[downloaded] ' + url, 'green') |
|
|
log('[downloaded] ' + url + ` [${script.text.length}]`, 'green') |
|
|
return script.text |
|
|
return script.text |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -127,6 +170,25 @@ class App { |
|
|
document.head.append(s) |
|
|
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() { |
|
|
async run() { |
|
|
await Promise.allSettled( |
|
|
await Promise.allSettled( |
|
|
this.topLevelDeps.map(dep => ( |
|
|
this.topLevelDeps.map(dep => ( |
|
|
@ -134,9 +196,13 @@ class App { |
|
|
)) |
|
|
)) |
|
|
) |
|
|
) |
|
|
await Promise.allSettled(this.downloads) |
|
|
await Promise.allSettled(this.downloads) |
|
|
//await this.loadScript('@rollup/browser')
|
|
|
await this.loadScript('@rollup/browser') |
|
|
//const { rollup } = window.rollup
|
|
|
const { rollup } = window.rollup |
|
|
//output.value = `${typeof 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) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|