@readme/syntax-highlighter 14.0.0 → 15.0.0-beta.0

package/dist-utils/modes.d.ts

@@ -0,0 +1,82 @@
+export declare const modes: {
+    readonly asp: "clike";
+    readonly aspx: "clike";
+    readonly bash: "shell";
+    readonly c: "clike";
+    readonly 'c#': readonly ["clike", "text/x-csharp"];
+    readonly 'c++': readonly ["clike", "text/x-c++src"];
+    readonly clj: "clojure";
+    readonly cljc: "clojure";
+    readonly cljx: "clojure";
+    readonly coffeescript: "javascript";
+    readonly cplusplus: readonly ["clike", "text/x-c++src"];
+    readonly cpp: readonly ["clike", "text/x-c++src"];
+    readonly cql: readonly ["sql", "text/x-cassandra"];
+    readonly cs: readonly ["clike", "text/x-csharp"];
+    readonly csharp: readonly ["clike", "text/x-csharp"];
+    readonly curl: "shell";
+    readonly d: "d";
+    readonly diff: "diff";
+    readonly ecmascript: "javascript";
+    readonly erl: "erlang";
+    readonly go: readonly ["go", "text/x-go"];
+    readonly gradle: "groovy";
+    readonly gql: "graphql";
+    readonly handlebars: "htmlmixed";
+    readonly hbs: "htmlmixed";
+    readonly html: "htmlmixed";
+    readonly java: readonly ["clike", "text/x-java"];
+    readonly jl: "julia";
+    readonly js: "javascript";
+    readonly jsx: "jsx";
+    readonly json: readonly ["javascript", "application/ld+json"];
+    readonly jruby: "ruby";
+    readonly kotlin: readonly ["clike", "text/x-kotlin"];
+    readonly kt: readonly ["clike", "text/x-kotlin"];
+    readonly less: "css";
+    readonly liquid: "htmlmixed";
+    readonly lua: "lua";
+    readonly node: "javascript";
+    readonly macruby: "ruby";
+    readonly markdown: "gfm";
+    readonly ml: readonly ["mllike", "text/x-ocaml"];
+    readonly mssql: readonly ["sql", "text/x-mssql"];
+    readonly mysql: readonly ["sql", "text/x-mysql"];
+    readonly objc: readonly ["clike", "text/x-objectivec"];
+    readonly 'objc++': readonly ["clike", "text/x-objectivec++"];
+    readonly objcpp: readonly ["clike", "text/x-objectivec++"];
+    readonly objectivec: readonly ["clike", "text/x-objectivec"];
+    readonly objectivecpp: readonly ["clike", "text/x-objectivec++"];
+    readonly objectivecplusplus: readonly ["clike", "text/x-objectivec++"];
+    readonly ocaml: readonly ["mllike", "text/x-ocaml"];
+    readonly php: readonly ["php", "text/x-php"];
+    readonly pgsql: readonly ["sql", "text/x-pgsql"];
+    readonly pl: "perl";
+    readonly plsql: readonly ["sql", "text/x-plsql"];
+    readonly postgres: readonly ["sql", "text/x-pgsql"];
+    readonly postgresql: readonly ["sql", "text/x-pgsql"];
+    readonly ps1: "powershell";
+    readonly py: "python";
+    readonly r: "r";
+    readonly rake: "ruby";
+    readonly rb: "ruby";
+    readonly rbx: "ruby";
+    readonly rs: "rust";
+    readonly sass: "css";
+    readonly scala: readonly ["clike", "text/x-scala"];
+    readonly scss: "css";
+    readonly sh: "shell";
+    readonly sol: "solidity";
+    readonly solidity: "solidity";
+    readonly sql: readonly ["sql", "text/x-sql"];
+    readonly sqlite: readonly ["sql", "text/x-sqlite"];
+    readonly styl: "css";
+    readonly stylus: "css";
+    readonly text: readonly ["null", "text/plain"];
+    readonly ts: readonly ["javascript", "text/typescript"];
+    readonly typescript: readonly ["javascript", "text/typescript"];
+    readonly xhtml: "htmlmixed";
+    readonly yml: "yaml";
+    readonly zsh: "shell";
+};
+export declare function getMode(lang: string): string;

package/dist-utils/modes.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.modes = void 0;
+exports.getMode = getMode;
+// This is a mapping of languages that we support, but aren't directly loading the mode extension
+// Within `/src/codeMirror/index.jsx` and /src/codeEditor.index.jsx
+//
+// This list also includes a number of language aliases, as because of the way we're using
+// `CodeMirror.runMode` we can't take advantage of its known aliases in the mode extensions that
+// we're loading.
+//
+// There are 2 types of lookup, single and array. e.g. `html` needs to be rendered using
+// `htmlmixed`, but `java`, needs to be rendered using the `clike` mode.
+//
+exports.modes = {
+    asp: 'clike',
+    aspx: 'clike',
+    bash: 'shell',
+    c: 'clike',
+    'c#': ['clike', 'text/x-csharp'],
+    'c++': ['clike', 'text/x-c++src'],
+    clj: 'clojure',
+    cljc: 'clojure',
+    cljx: 'clojure',
+    coffeescript: 'javascript',
+    cplusplus: ['clike', 'text/x-c++src'],
+    cpp: ['clike', 'text/x-c++src'],
+    cql: ['sql', 'text/x-cassandra'],
+    cs: ['clike', 'text/x-csharp'],
+    csharp: ['clike', 'text/x-csharp'],
+    curl: 'shell',
+    d: 'd',
+    diff: 'diff',
+    ecmascript: 'javascript',
+    erl: 'erlang',
+    go: ['go', 'text/x-go'],
+    gradle: 'groovy',
+    gql: 'graphql',
+    handlebars: 'htmlmixed',
+    hbs: 'htmlmixed',
+    html: 'htmlmixed',
+    java: ['clike', 'text/x-java'],
+    jl: 'julia',
+    js: 'javascript',
+    jsx: 'jsx',
+    json: ['javascript', 'application/ld+json'],
+    jruby: 'ruby',
+    kotlin: ['clike', 'text/x-kotlin'],
+    kt: ['clike', 'text/x-kotlin'],
+    less: 'css',
+    liquid: 'htmlmixed',
+    lua: 'lua',
+    node: 'javascript',
+    macruby: 'ruby',
+    markdown: 'gfm',
+    ml: ['mllike', 'text/x-ocaml'],
+    mssql: ['sql', 'text/x-mssql'],
+    mysql: ['sql', 'text/x-mysql'],
+    objc: ['clike', 'text/x-objectivec'],
+    'objc++': ['clike', 'text/x-objectivec++'],
+    objcpp: ['clike', 'text/x-objectivec++'],
+    objectivec: ['clike', 'text/x-objectivec'],
+    objectivecpp: ['clike', 'text/x-objectivec++'],
+    objectivecplusplus: ['clike', 'text/x-objectivec++'],
+    ocaml: ['mllike', 'text/x-ocaml'],
+    php: ['php', 'text/x-php'],
+    pgsql: ['sql', 'text/x-pgsql'],
+    pl: 'perl',
+    plsql: ['sql', 'text/x-plsql'],
+    postgres: ['sql', 'text/x-pgsql'],
+    postgresql: ['sql', 'text/x-pgsql'],
+    ps1: 'powershell',
+    py: 'python',
+    r: 'r',
+    rake: 'ruby',
+    rb: 'ruby',
+    rbx: 'ruby',
+    rs: 'rust',
+    sass: 'css',
+    scala: ['clike', 'text/x-scala'],
+    scss: 'css',
+    sh: 'shell',
+    sol: 'solidity',
+    solidity: 'solidity',
+    sql: ['sql', 'text/x-sql'],
+    sqlite: ['sql', 'text/x-sqlite'],
+    styl: 'css',
+    stylus: 'css',
+    text: ['null', 'text/plain'],
+    ts: ['javascript', 'text/typescript'],
+    typescript: ['javascript', 'text/typescript'],
+    xhtml: 'htmlmixed',
+    yml: 'yaml',
+    zsh: 'shell',
+};
+function getMode(lang) {
+    let mode = lang;
+    if (mode in exports.modes) {
+        mode = exports.modes[mode];
+        if (Array.isArray(mode)) {
+            [, mode] = mode;
+        }
+    }
+    return mode;
+}

package/dist-utils/uppercase.d.ts

@@ -0,0 +1 @@
+export default function uppercase(language: string): string;

package/dist-utils/uppercase.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = uppercase;
+const codeTypes = {
+    asp: 'ASP.NET',
+    aspx: 'ASP.NET',
+    bash: 'Bash',
+    c: 'C',
+    'c#': 'C#',
+    'c++': 'C++',
+    coffeescript: 'CoffeeScript',
+    clj: 'Clojure',
+    cljc: 'Clojure',
+    cljx: 'Clojure',
+    clojure: 'Clojure',
+    cplusplus: 'C++',
+    cpp: 'C++',
+    cql: 'Cassandra',
+    cs: 'C#',
+    csharp: 'C#',
+    css: 'CSS',
+    curl: 'cURL',
+    d: 'D',
+    dart: 'Dart',
+    diff: 'Diff',
+    dockerfile: 'Dockerfile',
+    ecmascript: 'ECMAScript',
+    erl: 'Erlang',
+    erlang: 'Erlang',
+    go: 'Go',
+    gql: 'GraphQL',
+    gradle: 'Gradle',
+    graphql: 'GraphQL',
+    groovy: 'Groovy',
+    handlebars: 'Handlebars',
+    hbs: 'Handlebars',
+    haml: 'HAML',
+    haxe: 'Haxe',
+    html: 'HTML',
+    http: 'HTTP',
+    java: 'Java',
+    javascript: 'JavaScript',
+    jinja2: 'Jinja2',
+    jl: 'Julia',
+    jruby: 'JRuby',
+    js: 'JavaScript',
+    json: 'JSON',
+    jsx: 'JSX',
+    julia: 'Julia',
+    kotlin: 'Kotlin',
+    kt: 'Kotlin',
+    less: 'LESS',
+    liquid: 'Liquid',
+    lua: 'Lua',
+    macruby: 'MacRuby',
+    markdown: 'Markdown',
+    md: 'Markdown',
+    mermaid: 'Mermaid', // syntax highlighting not supported yet
+    ml: 'OCaml',
+    mssql: 'SQL Server',
+    mysql: 'MySQL',
+    node: 'Node',
+    objc: 'Objective-C',
+    'objc++': 'Objective-C++',
+    objcpp: 'Objective-C++',
+    objectivec: 'Objective-C',
+    objectivecpp: 'Objective-C++',
+    objectivecplusplus: 'Objective-C++',
+    ocaml: 'OCaml',
+    perl: 'Perl',
+    php: 'PHP',
+    pl: 'Perl',
+    pgsql: 'PL/pgSQL',
+    plsql: 'PL/SQL',
+    postgres: 'PostgreSQL',
+    postgresql: 'PostgreSQL',
+    powershell: 'PowerShell',
+    ps1: 'PowerShell',
+    python: 'Python',
+    py: 'Python',
+    r: 'R',
+    rake: 'Rake',
+    rb: 'Ruby',
+    rbx: 'Rubinius',
+    rs: 'Rust',
+    ruby: 'Ruby',
+    rust: 'Rust',
+    sass: 'Sass',
+    scala: 'Scala',
+    scss: 'SCSS',
+    sh: 'Shell',
+    shell: 'Shell',
+    smarty: 'Smarty',
+    solidity: 'Solidity',
+    sql: 'SQL',
+    sqlite: 'SQLite',
+    stylus: 'Stylus',
+    styl: 'Stylus',
+    swift: 'Swift',
+    text: 'Text',
+    toml: 'TOML',
+    twig: 'Twig',
+    typescript: 'TypeScript',
+    xhtml: 'XHTML',
+    xml: 'XML',
+    yaml: 'YAML',
+    yml: 'YAML',
+    zsh: 'Zsh',
+};
+function uppercase(language) {
+    if (language in codeTypes)
+        return codeTypes[language];
+    return language;
+}

package/knip.ts

@@ -0,0 +1,12 @@
+import type { KnipConfig } from 'knip';
+
+const config: KnipConfig = {
+  entry: ['src/utils/index.ts', 'public/index.js', 'public/index.legacy.js'],
+  ignore: ['__tests__/__fixtures__/**'],
+  ignoreDependencies: [
+    '@csstools/css-parser-algorithms', // required in order to get vitest/jsdom running in CI
+    'jsdom', // this is installed via vitest
+  ],
+};
+
+export default config;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@readme/syntax-highlighter",
   "description": "ReadMe's React-based syntax highlighter",
-  "version": "14.0.0",
+  "version": "15.0.0-beta.0",
   "main": "dist/index.node.js",
   "browser": "dist/index.js",
   "license": "ISC",
@@ -11,16 +11,34 @@
   },
   "homepage": "https://readmeio.github.io/syntax-highlighter/",
   "engines": {
-    "node": ">=20"
+    "node": ">=22"
+  },
+  "exports": {
+    ".": {
+      "browser": "./dist/index.js",
+      "require": "./dist/index.node.js",
+      "node": "./dist/index.node.js"
+    },
+    "./browser": {
+      "browser": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./utils": {
+      "require": "./dist-utils/index.js",
+      "default": "./dist-utils/index.js"
+    },
+    "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "webpack --progress",
-    "lint": "eslint . --ext .jsx --ext .js",
+    "build": "webpack --progress && tsc",
+    "format": "prettier --write . && eslint . --fix --ext .js,.jsx,.ts,.tsx",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "prebuild": "rm -rf dist && rm -rf dist-utils",
     "prepack": "npm run build",
-    "pretest": "npm run lint && npm run prettier",
-    "prettier": "prettier --list-different --write .",
+    "pretest": "npm run lint && npm run prettier && tsc --noEmit && knip",
+    "prettier": "prettier --check .",
     "start": "webpack serve --open --config ./webpack.config.dev.js",
-    "test": "jest --coverage --runInBand",
+    "test": "vitest run --coverage",
     "watch": "webpack -w --progress"
   },
   "dependencies": {
@@ -30,33 +48,31 @@
     "react-codemirror2": "^8.0.0"
   },
   "peerDependencies": {
-    "@readme/variable": "^17.0.0",
+    "@readme/variable": "^18.0.0",
     "react": "18.x",
     "react-dom": "18.x"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
-    "@readme/eslint-config": "^14.0.0",
+    "@csstools/css-parser-algorithms": "^3.0.5",
+    "@readme/eslint-config": "^14.8.1",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^16.3.0",
-    "babel-jest": "^29.7.0",
+    "@types/node": "^24.10.1",
+    "@vitest/coverage-v8": "^4.0.8",
     "babel-loader": "^10.0.0",
-    "core-js": "^3.36.1",
     "css-loader": "^7.1.1",
     "eslint": "^8.57.0",
-    "glob": "^11.0.0",
     "html-webpack-plugin": "^5.6.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "knip": "^5.69.0",
     "prettier": "^3.2.5",
-    "prettier-2": "npm:prettier@^2.8.8",
-    "regenerator-runtime": "^0.14.1",
     "sass": "^1.89.2",
     "sass-loader": "^13.3.2",
     "style-loader": "^4.0.0",
-    "terser-webpack-plugin": "^5.3.10",
+    "ts-loader": "^9.5.4",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.8",
     "webpack": "^5.91.0",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.0.4"

package/src/codeEditor/{cm.options.js → cm.options.ts}

@@ -2,8 +2,10 @@
  * Full list of config options here:
  *  https://codemirror.net/doc/manual.html#config
  */
-module.exports = {
+const codeMirrorOptions = {
   theme: 'material-palenight',
   tabSize: 2,
   lineNumbers: true,
-};
+} as const;
+
+export default codeMirrorOptions;

package/src/codeEditor/{index.jsx → index.tsx}

@@ -1,4 +1,5 @@
-import PropTypes from 'prop-types';
+import type { ICodeMirror } from 'react-codemirror2';
+
 import React, { useEffect, useState } from 'react';
 import { Controlled as CodeMirror } from 'react-codemirror2';
 
@@ -8,9 +9,25 @@ import { getMode } from '../utils/modes';
 import defaults from './cm.options';
 import './style.scss';
 
-const CodeEditor = ({ className, code, lang, options, children, theme, ...attr }) => {
+const CodeEditor: React.FC<{
+  children?: string;
+  className?: string;
+  code?: string;
+  lang?: string;
+  options?: ICodeMirror['options'];
+  theme?: 'material-palenight' | 'neo' | 'tomorrow-night';
+}> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  className = '', // unused, I think on purpose? but not sure
+  code = '',
+  lang,
+  options = {},
+  children,
+  theme = 'material-palenight',
+  ...attr
+}) => {
   const [value, setValue] = useState(children && typeof children === 'string' ? children : code);
-  const [mode, setMode] = useState(getMode(lang));
+  const [mode, setMode] = useState(getMode(lang as string));
 
   useEffect(() => {
     const incValue = children && typeof children === 'string' ? children : code;
@@ -19,7 +36,7 @@ const CodeEditor = ({ className, code, lang, options, children, theme, ...attr }
 
   useEffect(() => {
     setMode(prevMode => {
-      const newMode = getMode(lang);
+      const newMode = getMode(lang as string);
       if (newMode !== prevMode) return newMode;
       return prevMode;
     });
@@ -31,33 +48,9 @@ const CodeEditor = ({ className, code, lang, options, children, theme, ...attr }
       className="CodeEditor"
       onBeforeChange={(editor, data, updatedCode) => setValue(updatedCode)}
       options={{ ...defaults, ...options, mode, theme }}
-      value={value}
+      value={value as string}
     />
   );
 };
 
-CodeEditor.propTypes = {
-  children: PropTypes.string,
-  className: PropTypes.string,
-  /** Code to show in the editor.
-   */
-  code: PropTypes.string,
-  /** CodeMirror language mode to use.
-   */
-  lang: PropTypes.string,
-  /** Custom CodeMirror configuration.
-   */
-  options: PropTypes.object,
-  /** Syntax highlighting theme.
-   */
-  theme: PropTypes.oneOf(['neo', 'material-palenight', 'tomorrow-night']),
-};
-
-CodeEditor.defaultProps = {
-  className: '',
-  code: '',
-  options: {},
-  theme: 'material-palenight',
-};
-
 export default CodeEditor;

package/src/codeMirror/index.jsx

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import '../utils/cm-mode-imports';
-import { getMode } from '../utils/modes';
+import { getMode } from '../utils/modes.ts';
 
 import './style.scss';
 

package/src/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import codeEditor from './codeEditor';
+import codeEditor from './codeEditor/index.tsx';
 import codemirror, { VariablesContext as cmVariableContext } from './codeMirror';
-import canonical from './utils/canonical';
-import { modes } from './utils/modes';
-import uppercase from './utils/uppercase';
+import canonical from './utils/canonical.ts';
+import { modes } from './utils/modes.ts';
+import uppercase from './utils/uppercase.ts';
 
 const SyntaxHighlighter = (
   code,

package/src/utils/{canonical.js → canonical.ts}

@@ -55,9 +55,11 @@ const modeAliases = {
   xhtml: 'html',
   yml: 'yaml',
   zsh: 'shell',
-};
+} as const;
 
-module.exports = language => {
+const canonical = (language: keyof typeof modeAliases) => {
   if (language in modeAliases) return modeAliases[language];
   return language;
 };
+
+export default canonical;

package/src/utils/index.ts

@@ -0,0 +1,5 @@
+import canonical from './canonical';
+import { modes, getMode } from './modes';
+import uppercase from './uppercase';
+
+export default { uppercase, canonical, modes, getMode };

package/src/utils/{modes.js → modes.ts}

@@ -8,7 +8,7 @@
 // There are 2 types of lookup, single and array. e.g. `html` needs to be rendered using
 // `htmlmixed`, but `java`, needs to be rendered using the `clike` mode.
 //
-const modes = {
+export const modes = {
   asp: 'clike',
   aspx: 'clike',
   bash: 'shell',
@@ -88,18 +88,16 @@ const modes = {
   xhtml: 'htmlmixed',
   yml: 'yaml',
   zsh: 'shell',
-};
+} as const;
 
-function getMode(lang) {
-  let mode = lang;
+export function getMode(lang: string): string {
+  let mode: string | readonly [string, string] = lang;
   if (mode in modes) {
-    mode = modes[mode];
+    mode = modes[mode as keyof typeof modes];
     if (Array.isArray(mode)) {
       [, mode] = mode;
     }
   }
 
-  return mode;
+  return mode as string;
 }
-
-module.exports = { modes, getMode };

package/src/utils/{uppercase.js → uppercase.ts}

@@ -103,9 +103,9 @@ const codeTypes = {
   yaml: 'YAML',
   yml: 'YAML',
   zsh: 'Zsh',
-};
+} as const;
 
-module.exports = function uppercase(language) {
-  if (language in codeTypes) return codeTypes[language];
+export default function uppercase(language: string) {
+  if (language in codeTypes) return codeTypes[language as keyof typeof codeTypes];
   return language;
-};
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "node20",
+    "outDir": "dist-utils",
+    "strict": true,
+    "target": "es2020"
+  },
+  "include": ["src/utils/*.ts"]
+}

package/webpack.config.js

@@ -1,13 +1,11 @@
 const path = require('path');
 
-const TerserPlugin = require('terser-webpack-plugin');
-
 const base = {
   mode: 'production',
   module: {
     rules: [
       {
-        test: /\.js(x?)$/,
+        test: /\.(j|t)s(x?)$/,
         use: {
           loader: 'babel-loader',
           options: {
@@ -15,6 +13,16 @@ const base = {
           },
         },
       },
+      {
+        test: /\.tsx?$/,
+        use: {
+          loader: 'ts-loader',
+          options: {
+            transpileOnly: true,
+          },
+        },
+        exclude: /node_modules/,
+      },
       {
         test: /\.s?css$/,
         use: ['style-loader', 'css-loader', 'sass-loader'],
@@ -22,8 +30,7 @@ const base = {
     ],
   },
   optimization: {
-    minimize: true,
-    minimizer: [new TerserPlugin()],
+    minimize: false,
   },
   externals: {
     react: {
@@ -43,14 +50,14 @@ const base = {
     '@readme/variable': '@readme/variable',
   },
   resolve: {
-    extensions: ['.js', '.jsx'],
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
   },
 };
 
 const serverConfig = {
   ...base,
   target: 'node',
-  entry: ['./src/index.node.js'],
+  entry: ['./src/index.node.ts'],
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'index.node.js',