react-codemirror-runmode 1.0.4 → 2.0.0

package/.eslintignore

@@ -0,0 +1 @@
+dist

package/.eslintrc.yml

@@ -0,0 +1,19 @@
+root: true
+extends:
+  - plugin:@typescript-eslint/eslint-recommended
+  - plugin:@typescript-eslint/recommended
+  - prettier
+parser: '@typescript-eslint/parser'
+parserOptions:
+  ecmaVersion: 2022
+  sourceType: 'module'
+rules:
+  no-useless-escape: 0
+  '@typescript-eslint/no-explicit-any': 0
+  '@typescript-eslint/no-unused-vars':
+    - 2
+    - argsIgnorePattern: ^_
+      varsIgnorePattern: ^_
+  '@typescript-eslint/ban-ts-comment': 0
+  '@typescript-eslint/no-this-alias': 0
+  '@typescript-eslint/no-var-requires': 0

package/.github/workflows/ci.yml

@@ -0,0 +1,21 @@
+name: CI
+on:
+  push:
+  pull_request:
+    branches: [main]
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - run: npm install
+      - run: npm run format:check
+      - run: npm run lint
+      - run: npm run test
+      - run: npm run build
+      - name: Check ESM module resolution
+        run: npx @arethetypeswrong/cli --ignore-rules cjs-resolves-to-esm --pack

package/.prettierignore

@@ -0,0 +1,137 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# IDE
+.idea/
+.vscode/
+
+# Lock files
+pnpm-lock.yaml

package/.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "arrowParens": "avoid",
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "semi": false,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "plugins": []
+}

package/.travis.yml

@@ -1,3 +1,6 @@
 language: node_js
 node_js:
-  - 7
+  - 15
+script:
+  - npm run build
+  - npm test

package/README.md

@@ -1,61 +1,61 @@
-react-codemirror-runmode
-========================
+# react-codemirror-runmode
 
-[![build status](https://secure.travis-ci.org/craftzdog/react-codemirror-runmode.svg)](http://travis-ci.org/craftzdog/react-codemirror-runmode)
-
-Syntax highlighter for React, utilizing CodeMirror's parser
+Syntax highlighter for React, using CodeMirror 6.
+It automatically loads [the language metadata](https://github.com/codemirror/language-data) and dynamically loads language parser modules based on the specified language.
 
 ## Installation
 
 ```sh
-npm install --save react-codemirror-runmode codemirror
+npm install --save react-codemirror-runmode
 ```
 
-You'll also need to provide the CodeMirror language definitions you want to use. We don't bundle these in order to not bloat the component with unused definitions.
-
 ## Usage
 
 ```javascript
-import CodeMirror from 'codemirror'
-import 'codemirror/addon/runmode/runmode'
-import 'codemirror/mode/meta'
-import 'codemirror/mode/javascript/javascript'
-import Highlighter from 'react-codemirror-runmode'
+import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
+import { Highlighter } from 'react-codemirror-runmode'
 import React from 'react'
-import ReactDOM from 'react-dom'
-
-ReactDOM.render(
-  <Highlighter
-    codeMirror={CodeMirror}
-    theme='solarized'
-    value='/* Code to highlight */'
-    language='javascript'
-  />,
-  document.getElementById('root')
+import ReactDOM from 'react-dom/client'
+
+const code = 'const x = 123'
+
+ReactDOM.createRoot(document.getElementById('app')!).render(
+  <Highlighter lang="js" highlightStyle={oneDarkHighlightStyle}>
+    {code}
+  </Highlighter>
 )
 ```
 
-## Styling
+## Theming
 
-Stylesheets are not automatically handled for you - but there is [a bunch of premade styles](https://codemirror.net/demo/theme.html) for CodeMirror which you can simply drop in and they'll "just work". You can either grab these from the source, of pull them in using a CSS loader - whatever works best for you. They're also available on [cdnjs](https://cdnjs.com/libraries/codemirror):
+You can apply custom themes using CodeMirror's theme system. This component uses [`HighlightStyle`](https://codemirror.net/docs/ref#language.HighlightStyle) objects to apply styles, which you can customize or replace.
 
-```html
-<link
-  rel="stylesheet"
-  href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/theme/solarized.min.css"
-/>
-```
+## Reference
+
+### `Highlighter`
+
+Props:
+
+- `lang`: `string` - The name of the language
+- `highlightStyle`: [`HighlightStyle`](https://codemirror.net/docs/ref#language.HighlightStyle) - The highlight style
+- `children`: `string` - The code to highlight
+
+### `highlightCode<Output>(languageName, input, highlightStyle, callback): Promise<Output[]>`
+
+Parameters:
+
+- `languageName`: `string` - The name of the language
+- `input`: `string` - The code to highlight
+- `highlightStyle`: [`HighlightStyle`](https://codemirror.net/docs/ref#language.HighlightStyle) - The highlight style
+- `callback`: `(text: string, style: string | null, from: number, to: number) => Output)` - A callback function that converts the parsed tokens
+
+### `getCodeParser(languageName, defaultLanguage?): Promise<Parser | null>`
 
-## Props
+Parameters:
 
-| Name | Description |
-|------|-------------|
-| `className` | Class name for the outermost `pre` tag. Default: `''` |
-| `language` | Language to use for syntax highlighting this value. Must be registered prior to usage. |
-| `value` | The code snippet to syntax highlight |
-| `prefix` | Class name prefix for individual node. Default: `cm-` |
-| `inline` | Whether code should be displayed inline (no `<pre>` tag, sets `display: inline`) |
+- `languageName: string` - The name of the language
+- `defaultLanguage?: Language` - A fallback language (Optional)
 
 ## License
 
-MIT License. Developed by Takuya Matsuyama <hi@craftz.dog>
+MIT License. Developed by Takuya Matsuyama <hi@craftz.dog>

package/Session.vim

@@ -0,0 +1,260 @@
+let SessionLoad = 1
+let s:so_save = &g:so | let s:siso_save = &g:siso | setg so=0 siso=0 | setl so=-1 siso=-1
+let v:this_session=expand("<sfile>:p")
+silent only
+silent tabonly
+cd ~/.ghq/github.com/craftzdog/react-codemirror-runmode
+if expand('%') == '' && !&modified && line('$') <= 1 && getline(1) == ''
+  let s:wipebuf = bufnr('%')
+endif
+let s:shortmess_save = &shortmess
+if &shortmess =~ 'A'
+  set shortmess=aoOA
+else
+  set shortmess=aoO
+endif
+badd +12 package.json
+badd +1 ~/.ghq/github.com/craftzdog/react-codemirror-runmode/src/highlight.ts
+badd +32 ~/.ghq/github.com/craftzdog/react-codemirror-runmode/src/react-highlighter.tsx
+badd +2 src/index.ts
+badd +7 tsconfig.json
+badd +1 tsconfig.build.json
+badd +10 vite.config.ts
+badd +37 README.md
+badd +68 ~/.ghq/github.com/craftzdog/react-codemirror-runmode/test/index.spec.tsx
+badd +144 ~/.ghq/github.com/craftzdog/react-codemirror-runmode/node_modules/@lezer/common/dist/index.d.ts
+argglobal
+%argdel
+$argadd package.json
+tabnew +setlocal\ bufhidden=wipe
+tabrewind
+edit package.json
+let s:save_splitbelow = &splitbelow
+let s:save_splitright = &splitright
+set splitbelow splitright
+wincmd _ | wincmd |
+vsplit
+wincmd _ | wincmd |
+vsplit
+wincmd _ | wincmd |
+vsplit
+wincmd _ | wincmd |
+vsplit
+4wincmd h
+wincmd w
+wincmd w
+wincmd _ | wincmd |
+split
+1wincmd k
+wincmd w
+wincmd w
+wincmd w
+let &splitbelow = s:save_splitbelow
+let &splitright = s:save_splitright
+wincmd t
+let s:save_winminheight = &winminheight
+let s:save_winminwidth = &winminwidth
+set winminheight=0
+set winheight=1
+set winminwidth=0
+set winwidth=1
+wincmd =
+argglobal
+setlocal fdm=indent
+setlocal fde=0
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=99
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+let s:l = 19 - ((18 * winheight(0) + 36) / 72)
+if s:l < 1 | let s:l = 1 | endif
+keepjumps exe s:l
+normal! zt
+keepjumps 19
+normal! 013|
+wincmd w
+argglobal
+if bufexists(fnamemodify("~/.ghq/github.com/craftzdog/react-codemirror-runmode/test/index.spec.tsx", ":p")) | buffer ~/.ghq/github.com/craftzdog/react-codemirror-runmode/test/index.spec.tsx | else | edit ~/.ghq/github.com/craftzdog/react-codemirror-runmode/test/index.spec.tsx | endif
+if &buftype ==# 'terminal'
+  silent file ~/.ghq/github.com/craftzdog/react-codemirror-runmode/test/index.spec.tsx
+endif
+setlocal fdm=indent
+setlocal fde=0
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=99
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+65
+normal! zo
+66
+normal! zo
+68
+normal! zo
+let s:l = 68 - ((64 * winheight(0) + 36) / 72)
+if s:l < 1 | let s:l = 1 | endif
+keepjumps exe s:l
+normal! zt
+keepjumps 68
+normal! 08|
+wincmd w
+argglobal
+if bufexists(fnamemodify("~/.ghq/github.com/craftzdog/react-codemirror-runmode/src/react-highlighter.tsx", ":p")) | buffer ~/.ghq/github.com/craftzdog/react-codemirror-runmode/src/react-highlighter.tsx | else | edit ~/.ghq/github.com/craftzdog/react-codemirror-runmode/src/react-highlighter.tsx | endif
+if &buftype ==# 'terminal'
+  silent file ~/.ghq/github.com/craftzdog/react-codemirror-runmode/src/react-highlighter.tsx
+endif
+setlocal fdm=indent
+setlocal fde=0
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=99
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+12
+normal! zo
+18
+normal! zo
+19
+normal! zo
+let s:l = 32 - ((31 * winheight(0) + 17) / 35)
+if s:l < 1 | let s:l = 1 | endif
+keepjumps exe s:l
+normal! zt
+keepjumps 32
+normal! 035|
+wincmd w
+argglobal
+if bufexists(fnamemodify("tsconfig.json", ":p")) | buffer tsconfig.json | else | edit tsconfig.json | endif
+if &buftype ==# 'terminal'
+  silent file tsconfig.json
+endif
+balt ~/.ghq/github.com/craftzdog/react-codemirror-runmode/src/react-highlighter.tsx
+setlocal fdm=indent
+setlocal fde=0
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=99
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+2
+normal! zo
+let s:l = 7 - ((6 * winheight(0) + 18) / 36)
+if s:l < 1 | let s:l = 1 | endif
+keepjumps exe s:l
+normal! zt
+keepjumps 7
+normal! 021|
+wincmd w
+argglobal
+if bufexists(fnamemodify("~/.ghq/github.com/craftzdog/react-codemirror-runmode/src/highlight.ts", ":p")) | buffer ~/.ghq/github.com/craftzdog/react-codemirror-runmode/src/highlight.ts | else | edit ~/.ghq/github.com/craftzdog/react-codemirror-runmode/src/highlight.ts | endif
+if &buftype ==# 'terminal'
+  silent file ~/.ghq/github.com/craftzdog/react-codemirror-runmode/src/highlight.ts
+endif
+balt package.json
+setlocal fdm=indent
+setlocal fde=0
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=99
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+14
+normal! zo
+15
+normal! zo
+39
+normal! zo
+41
+normal! zo
+45
+normal! zo
+51
+normal! zo
+let s:l = 1 - ((0 * winheight(0) + 36) / 72)
+if s:l < 1 | let s:l = 1 | endif
+keepjumps exe s:l
+normal! zt
+keepjumps 1
+normal! 010|
+wincmd w
+argglobal
+if bufexists(fnamemodify("~/.ghq/github.com/craftzdog/react-codemirror-runmode/src/highlight.ts", ":p")) | buffer ~/.ghq/github.com/craftzdog/react-codemirror-runmode/src/highlight.ts | else | edit ~/.ghq/github.com/craftzdog/react-codemirror-runmode/src/highlight.ts | endif
+if &buftype ==# 'terminal'
+  silent file ~/.ghq/github.com/craftzdog/react-codemirror-runmode/src/highlight.ts
+endif
+balt package.json
+setlocal fdm=indent
+setlocal fde=0
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=99
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+39
+normal! zo
+41
+normal! zo
+51
+normal! zo
+let s:l = 11 - ((10 * winheight(0) + 36) / 72)
+if s:l < 1 | let s:l = 1 | endif
+keepjumps exe s:l
+normal! zt
+keepjumps 11
+normal! 0
+wincmd w
+2wincmd w
+wincmd =
+tabnext
+edit README.md
+wincmd t
+let s:save_winminheight = &winminheight
+let s:save_winminwidth = &winminwidth
+set winminheight=0
+set winheight=1
+set winminwidth=0
+set winwidth=1
+argglobal
+balt ~/.ghq/github.com/craftzdog/react-codemirror-runmode/src/react-highlighter.tsx
+setlocal fdm=indent
+setlocal fde=0
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=99
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+28
+normal! zo
+let s:l = 28 - ((27 * winheight(0) + 36) / 72)
+if s:l < 1 | let s:l = 1 | endif
+keepjumps exe s:l
+normal! zt
+keepjumps 28
+normal! 04|
+tabnext 1
+if exists('s:wipebuf') && len(win_findbuf(s:wipebuf)) == 0 && getbufvar(s:wipebuf, '&buftype') isnot# 'terminal'
+  silent exe 'bwipe ' . s:wipebuf
+endif
+unlet! s:wipebuf
+set winheight=1 winwidth=20
+let &shortmess = s:shortmess_save
+let &winminheight = s:save_winminheight
+let &winminwidth = s:save_winminwidth
+let s:sx = expand("<sfile>:p:r")."x.vim"
+if filereadable(s:sx)
+  exe "source " . fnameescape(s:sx)
+endif
+let &g:so = s:so_save | let &g:siso = s:siso_save
+set hlsearch
+nohlsearch
+doautoall SessionLoadPost
+unlet SessionLoad
+" vim: set ft=vim :

package/dist/highlight.d.ts

@@ -0,0 +1,4 @@
+import { Parser } from '@lezer/common';
+import { HighlightStyle, Language } from '@codemirror/language';
+export declare function getCodeParser(languageName: string, defaultLanguage?: Language): Promise<Parser | null>;
+export declare function highlightCode<Output>(languageName: string, input: string, highlightStyle: HighlightStyle, callback: (text: string, style: string | null, from: number, to: number) => Output): Promise<Output[]>;

package/dist/highlight.js

@@ -0,0 +1,36 @@
+import { LanguageDescription } from '@codemirror/language';
+import { highlightTree } from '@lezer/highlight';
+import { languages } from '@codemirror/language-data';
+export async function getCodeParser(languageName, defaultLanguage) {
+    if (languageName && languages) {
+        const found = LanguageDescription.matchLanguageName(languages, languageName, true);
+        if (found instanceof LanguageDescription) {
+            if (!found.support)
+                await found.load();
+            return found.support ? found.support.language.parser : null;
+        }
+        else if (found)
+            return found.parser;
+    }
+    return defaultLanguage ? defaultLanguage.parser : null;
+}
+export async function highlightCode(languageName, input, highlightStyle, callback) {
+    const parser = await getCodeParser(languageName);
+    if (parser) {
+        const tree = parser.parse(input);
+        const output = [];
+        let pos = 0;
+        highlightTree(tree, highlightStyle, (from, to, classes) => {
+            if (from > pos)
+                output.push(callback(input.slice(pos, from), null, pos, from));
+            output.push(callback(input.slice(from, to), classes, from, to));
+            pos = to;
+        });
+        pos != tree.length &&
+            output.push(callback(input.slice(pos, tree.length), null, pos, tree.length));
+        return output;
+    }
+    else {
+        return [callback(input, null, 0, input.length)];
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './highlight.js';
+export * from './react-highlighter.js';

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from './highlight.js';
+export * from './react-highlighter.js';

package/dist/react-highlighter.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { HighlightStyle } from '@codemirror/language';
+export type HighlighterProps = {
+    lang: string;
+    children: string;
+    highlightStyle: HighlightStyle;
+};
+export declare const Highlighter: React.NamedExoticComponent<HighlighterProps>;

package/dist/react-highlighter.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useEffect, useState } from 'react';
+import { highlightCode } from './highlight';
+export const Highlighter = memo((props) => {
+    const { lang, children: code, highlightStyle } = props;
+    const [highlightedCode, setHighlightedCode] = useState(null);
+    useEffect(() => {
+        highlightCode(lang, code, highlightStyle, (text, style, from) => {
+            return (_jsx("span", { className: style || '', children: text }, from));
+        }).then(setHighlightedCode);
+    }, [lang, code, highlightStyle]);
+    return _jsx(_Fragment, { children: highlightedCode || code });
+});