Hello,
I have a typescript setup like follows:
The problem occurs when i import the codemirror-lang-homescript package, which was created according to the language feature example repository.
I get following error (using Vite as my build tool)
index.js:2004 Uncaught Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.
at inner (index.js:2004:23)
at inner (index.js:1979:17)
at inner (index.js:2005:13)
at inner (index.js:1979:17)
at inner (index.js:2005:13)
at inner (index.js:1979:17)
at flatten (index.js:2008:5)
at Configuration.resolve (index.js:1916:25)
at EditorState.create (index.js:2741:43)
at HmsEditor.svelte:82:32
import { EditorState, EditorView, basicSetup } from '@codemirror/basic-setup'
import { indentWithTab } from '@codemirror/commands'
import { keymap } from '@codemirror/view'
import { linter, lintGutter, type Diagnostic } from '@codemirror/lint'
import { createEventDispatcher, onMount } from 'svelte'
// import { tags } from "@lezer/highlight";
// import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
// import { completeFromList } from "@codemirror/autocomplete";
// TODO: move local files to separate repository
import { Homescript } from 'codemirror-lang-homescript'
import { oneDark } from './oneDark'
import { lintHomescriptCode } from '../../../homescript'
import { createSnackbar } from '../../../global'
const dispatch = createEventDispatcher()
// Specifies whether the editor should register a CTRL+S catcher
// This catcher is intended to prevent the browser's default action
// However, the catcher also emits a change event when the key combination is pressed
export let registerCtrlSCatcher = false
// Represents the editor's value
export let code = ''
$: setCode(code)
function setCode(cd: string) {
if (editor === undefined || editor.state.doc.toString() === cd) return
editor.dispatch(
editor.state.update({
changes: { from: 0, to: editor.state.doc.length, insert: cd },
}),
)
}
// Will later be bound to the target of the CodeMirror editor
let editorDiv: HTMLElement
let editor: EditorView
// eslint-disable-next-line no-undef
let timer: NodeJS.Timeout
const HMSlinter = linter(async () => {
let diagnostics: Diagnostic[] = []
try {
const result = await lintHomescriptCode(code, [])
diagnostics = result.error.map(e => {
const lines = code.split('\n')
let startPos: number = e.location.column - 1 // Starts at -1 because the last line does not end with '\n'
for (let lineIndex = 0; lineIndex < e.location.line - 1; lineIndex++) {
startPos += lines[lineIndex].length + 1
}
return Object.create({
from: startPos,
to: startPos,
severity: e.errorType === 'Panic' ? 'warning' : 'error',
message: `${e.errorType}: ${e.message}`,
source: 'HMS',
})
})
} catch (err) {
$createSnackbar(`Failed to lint: ${err}`)
}
return diagnostics
})
onMount(() => {
if (registerCtrlSCatcher)
document.addEventListener('keydown', e => {
if (e.ctrlKey && e.key === 's') {
e.preventDefault()
dispatch('update', code)
}
})
editor = new EditorView({
state: EditorState.create({
extensions: [
basicSetup,
keymap.of([indentWithTab]),
Homescript(),
oneDark,
// Linting
HMSlinter,
lintGutter(),
// Emit the `update` event 500 ms after the last keystroke
EditorView.updateListener.of(v => {
if (v.docChanged) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
dispatch('update', code)
}, 500)
}
}),
// Update the component code on every change
EditorView.updateListener.of(v => {
if (v.docChanged) {
code = editor.state.doc.toString()
}
}),
],
doc: code,
}),
parent: editorDiv,
})
/*
editor.dispatch(
editor.state.changeByRange((range) => ({
changes: [{ from: range.from, insert: "switch('id', on)" }],
range: EditorSelection.range(range.from + 2, range.to + 2),
}))
);
*/
})