I would like to share my experience developing an extension for CM, and make a suggestion, in case it improves future developer experience.
I’m building a language support, which is a mostly trivial retool of the lang-example template. I was testing against a React app, in a different project, which uses webpack through create-react-app for bundling. This app, of course, also depends on
I added my package under development as a
package.json file dependency to the React app, like so:
When I attempt to add the
LanguageSupport my package generates as an extension, I got the following runtime error:
Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.
It’s an accurate error, but still took me quite a while to figure out was going on; I had to dive into state code with a debugger to see that my FacetProvider was failing an
The reason this happened, as you may have guessed, is that my bundler was using
node_modules of the file dependency, which was causing reference equality problems with my React app’s loaded
This felt harder than it needed to be, and I see at least one other developer struggling with it. A couple of conversation points:
- Guidance on how to perform integration testing, or even an example app, in
lang-examplemay be helpful. I’d be happy to work on a PR for this.
- Are the tradeoffs too large in using duck typing over
instanceofchecks in state.flatten?