codemirror / lang-example

Example/template repository for building a language package

CodeMirror 6 language package template

This is an example repository containing a minimal CodeMirror language support package. The idea is to clone it, rename it, and edit it to create support for a new language.

Things you'll need to do (see the language support example for a more detailed tutorial):

• git grep EXAMPLE and replace all instances with your language name.

• Rewrite the grammar in src/syntax.grammar to cover your language. See the Lezer system guide for information on this file format.

• Adjust the metadata in src/index.ts to work with your new grammar.

• Adjust the grammar tests in test/cases.txt.

• Build (npm run prepare) and test (npm test).

• Rewrite this readme file.

• Optionally add a license.

• Publish. Put your package on npm under a name like codemirror-lang-EXAMPLE.

lang-example's Issues

Parser/runtime version mismatch

I'm getting the following error when I try to run the output of this template as a play language using the latest CodeMirror:

Uncaught RangeError: Parser version (14) doesn't match runtime version (13)

I've tried it with the latest version of codemirror 6's individual packages:

"@codemirror/autocomplete": "^6.1.0",
"@codemirror/commands": "^6.0.1",
"@codemirror/lang-javascript": "^6.0.2",
"@codemirror/language": "^6.2.1",
"@codemirror/lint": "^6.0.0",
"@codemirror/search": "^6.0.1",
"@codemirror/state": "^6.1.0",
"@codemirror/view": "^6.1.2"

and with just [email protected].

Looks like some dependency in CodeMirror wasn't updated when this commit dropped but I didn't look into it enough to figure out exactly what needed to be updated.

[!] (plugin Typescript) TypeError: Cannot read properties of undefined (reading 'text')

When I try to npm run prepare I am getting the following error. I tried even without changing anything from the code but still, without any changes, I am getting the following. Any help will be appreciated.

src/index.ts → dist/index.cjs, ./dist...
[!] (plugin Typescript) TypeError: Cannot read properties of undefined (reading 'text')
TypeError: Cannot read properties of undefined (reading 'text')
    at getExportedSymbolFromExportSpecifier (/Users/eya/Downloads/lang-example-main-copy/node_modules/rollup-plugin-ts/dist/cjs/index.js:2082:41)
    at createExportSpecifierFromNameAndModifiers (/Users/eya/Downloads/lang-example-main-copy/node_modules/rollup-plugin-ts/dist/cjs/index.js:2103:29)
    at visitVariableStatement$5 (/Users/eya/Downloads/lang-example-main-copy/node_modules/rollup-plugin-ts/dist/cjs/index.js:2434:36)
    at visitNode$c (/Users/eya/Downloads/lang-example-main-copy/node_modules/rollup-plugin-ts/dist/cjs/index.js:2537:16)
    at /Users/eya/Downloads/lang-example-main-copy/node_modules/rollup-plugin-ts/dist/cjs/index.js:2554:13
    at visitNodes (/Users/eya/Downloads/lang-example-main-copy/node_modules/typescript/lib/typescript.js:29880:30)
    at Object.forEachChild (/Users/eya/Downloads/lang-example-main-copy/node_modules/typescript/lib/typescript.js:30122:24)
    at Object.childContinuation (/Users/eya/Downloads/lang-example-main-copy/node_modules/rollup-plugin-ts/dist/cjs/index.js:2553:52)
    at visitModuleDeclaration$8 (/Users/eya/Downloads/lang-example-main-copy/node_modules/rollup-plugin-ts/dist/cjs/index.js:2455:28)
    at visitNode$c (/Users/eya/Downloads/lang-example-main-copy/node_modules/rollup-plugin-ts/dist/cjs/index.js:2534:16)

Error: Unrecognized extension value in extension set ([object Object])

Hi, I followed the README in this repo and follow this tutorial to bundle codemirror with rollup.

However, when I replace the lang-javascript package with my own, I get the following error:

Uncaught Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

It happens without changing lang-example at all, and all the tests pass.

I made sure to use compatible versions of the @codemirror/x packages (tried originally with 0.18.x, and updated to 0.19.x), but the issue persists.

I am having trouble loading my language. I believe my language plugin is in error.

I'm trying to create an FSL language plugin for CodeMirror.

I have a decent set of test cases that cover the basic common sense first steps of the language. It appears to parse happily, and the way that I expect.

> mocha test/test.js

  cases
    ✔ Simple arrow statements between atoms
    ✔ Simple arrow statements between strings
    ✔ Simple arrow statements mixed between atoms and strings
    ✔ Simple arrow statements using list spread
    ✔ Simple arrow statements over various arrow types
    ✔ Simple arrow chains
    ✔ Left Actions
    ✔ Right Actions
    ✔ Both Actions
    ✔ Empty state claim
    ✔ Active state claim
    ✔ Line Comment
    ✔ Machine Author attribute
    ✔ Machine Contributor attribute
    ✔ Machine Comment attribute
    ✔ Machine Definition attribute
    ✔ Machine Name attribute
    ✔ Machine Reference attribute
    ✔ Machine Version attribute
    ✔ Machine License attribute
    ✔ Machine Language attribute
    ✔ FSL Version attribute
    ✔ Theme attribute
    ✔ Hooks attribute
    ✔ DOT Preamble attribute
    ✔ Real program

  26 passing (20ms)

I was trying to add a demo editor. The editor itself works: it has the characteristic CodeMirror appearance, the line highlight moves with the cursor, braces and parentheses match, et cetera.

However, it's treating the text as if it was plain text. The language itself isn't being invoked.

I do not believe that it's a question of the language being recognized and going unstyled. In the browser inspector, in j mode, there are spans in common sense places to apply styling. There are none where I'd expect for my language; only rows.

I believe the editor invocation is correct because if I install the j language plugin and switch to that, J code highlights as expected.

It's not clear to me what I could do wrong, that the test cases would pass, but a working editor would not adopt my language plugin.

I've done my best to stay within the vanilla guidelines of your lang example. Most of the code is unchanged, and the grammar is currently very simple.

There are no errors in the console.

All three of these breakpoints land:

I was hoping to ask for help? I can't find a discord or an irc channel, and I'm not sure what to do next.

• My language plugin
• My grammar
• My test cases
• A live editor, set up for FSL, acting like plain text
• The editor's source

.gitignore should not exclude package-lock.json

Your tooling is excellent

One small point: package-lock should be in the repo, for three reasons.

1. This is how supply chain attacks can be investigated and prevented
2. A ci/cd path needs package.lock to do its installs; otherwise if it creates one on the spot it's not testing code as committed, but code as would have been created at any given time, and is subject to library drift
3. Several code scanners eg snyk treat it as positive signal and rank upwards for it

This PR removes package-lock from .gitignore. A subsequent PR will add an actual package lockfile, so that if you decide you want to do that yourself you can merge this, but if you don't want to be bothered you can just merge both.

build script

Idiomatically and for CI, node modules should have an npm build which does the thing, because your users and all users are Bolin and don't read instructions, and don't know what to do

I know, nobody watches Korra and that metaphor definitely won't make sense

Users want to just npm run build and have it go vroom before they understand, so they can make sure it works (you know, does the, the, does the thing)

Submitting fix PR

Make this repo a template

Make this repo a template so multiple repos can be generated from it. Instructions here.

Use @rollup/plugin-typescript

rollup-plugin-ts is the unnoficial typescript plugin, versus @rollup/plugin-typescript.

TypeError: path.charCodeAt is not a function

When trying to build the language example I get the following error:

[!] (plugin Typescript) TypeError: path.charCodeAt is not a function
src/index.ts
TypeError: path.charCodeAt is not a function
    at getEncodedRootLength (/home/arno/development/lang-example/node_modules/typescript/lib/typescript.js:7660:24)
    at Object.isRootedDiskPath (/home/arno/development/lang-example/node_modules/typescript/lib/typescript.js:7567:16)
    at Object.isExternalModuleNameRelative (/home/arno/development/lang-example/node_modules/typescript/lib/typescript.js:12360:52)
    at tryLoadModuleUsingOptionalResolutionSettings (/home/arno/development/lang-example/node_modules/typescript/lib/typescript.js:43172:17)
    at tryResolve (/home/arno/development/lang-example/node_modules/typescript/lib/typescript.js:43375:28)
    at /home/arno/development/lang-example/node_modules/typescript/lib/typescript.js:43371:69
    at Object.forEach (/home/arno/development/lang-example/node_modules/typescript/lib/typescript.js:377:30)
    at nodeModuleNameResolverWorker (/home/arno/development/lang-example/node_modules/typescript/lib/typescript.js:43371:25)
    at nodeModuleNameResolver (/home/arno/development/lang-example/node_modules/typescript/lib/typescript.js:43346:16)
    at Object.resolveModuleName (/home/arno/development/lang-example/node_modules/typescript/lib/typescript.js:43073:30)

Is this import correct?

lang-example/src/index.ts

Line 1 in d7c23d6

import {parser} from "./syntax.grammar"

Is this import correct?

I'm running into a lot of errors with the newer version of the language package and wanted to check this example was working.