@expressive-code/plugin-shiki - npm Package Compare versions

Comparing version 0.38.3 to 0.39.0

dist/index.d.ts

 import { ExpressiveCodeTheme, ExpressiveCodePlugin } from '@expressive-code/core';
 import { MaybeGetter, MaybeArray, LanguageRegistration as LanguageRegistration$1, ShikiTransformer, bundledThemes } from 'shiki';
+export { BundledLanguage as BundledShikiLanguage } from 'shiki';
 
@@ -47,2 +48,12 @@ type IShikiRawRepository = LanguageRegistration$1['repository'];
     /**
+     * Allows defining alias names for languages. The keys are the alias names,
+     * and the values are the language IDs to which they should resolve.
+     *
+     * The values can either be bundled languages, or additional languages
+     * defined in `langs`.
+     *
+     * @example { 'mjs': 'javascript' }
+     */
+    langAlias?: Record<string, string> | undefined;
+    /**
      * By default, the additional languages defined in `langs` are only available in
@@ -79,2 +90,10 @@ * top-level code blocks contained directly in their parent Markdown or MDX document.
     transformers?: ShikiTransformer[] | undefined;
+    /**
+     * The RegExp engine to use for syntax highlighting.
+     *
+     * - `'oniguruma'`: The default engine that supports all grammars,
+     *   but requires WebAssembly support.
+     * - `'javascript'`: A pure JavaScript engine that does not require WebAssembly.
+     */
+    engine?: 'oniguruma' | 'javascript' | undefined;
 }
@@ -85,2 +104,3 @@ /**
 type BundledShikiTheme = Exclude<keyof typeof bundledThemes, 'css-variables'>;
+
 /**
@@ -87,0 +107,0 @@ * Loads a theme bundled with Shiki for use with Expressive Code.

dist/index.js

@@ -7,9 +7,13 @@ // src/index.ts
 import { getStableObjectHash } from "@expressive-code/core";
-import { bundledLanguages, createHighlighter, isSpecialLang } from "shiki";
+import { bundledLanguages, createHighlighterCore, isSpecialLang } from "shiki";
 
 // src/languages.ts
-function getNestedCodeBlockInjectionLangs(lang) {
+function getNestedCodeBlockInjectionLangs(lang, langAlias = {}) {
   const injectionLangs = [];
   const langNameKey = lang.name.replace(/[^a-zA-Z0-9]/g, "_");
   const langNameAndAliases = [lang.name, ...lang.aliases ?? []];
+  Object.entries(langAlias).forEach(([alias, target]) => {
+    if (target === lang.name && !langNameAndAliases.includes(alias))
+      langNameAndAliases.push(alias);
+  });
   injectionLangs.push({
@@ -127,8 +131,8 @@ name: `${lang.name}-fenced-md`,
     highlighterPromise = (async () => {
-      const highlighter = await createHighlighter({
+      const highlighter = await createHighlighterCore({
         themes: [],
-        langs: []
+        langs: [],
+        engine: createRegexEngine(config.engine)
       });
-      if (config.langs?.length)
-        await ensureLanguagesAreLoaded(highlighter, config.langs, config.injectLangsIntoNestedCodeBlocks);
+      await ensureLanguagesAreLoaded({ highlighter, ...config });
       return highlighter;
@@ -140,2 +144,7 @@ })();
 }
+async function createRegexEngine(engine) {
+  if (engine === "javascript")
+    return [(await import("shiki/engine/javascript")).createJavaScriptRegexEngine({ forgiving: true })][0];
+  return [(await import("shiki/engine/oniguruma")).createOnigurumaEngine(import("shiki/wasm"))][0];
+}
 async function ensureThemeIsLoaded(highlighter, theme, styleVariants) {
@@ -159,4 +168,8 @@ let themeCacheKeys = themeCacheKeysByStyleVariants.get(styleVariants);
 }
-async function ensureLanguagesAreLoaded(highlighter, languages, injectLangsIntoNestedCodeBlocks = false) {
-  const errors = [];
+async function ensureLanguagesAreLoaded(options) {
+  const { highlighter, langs = [], langAlias = {}, injectLangsIntoNestedCodeBlocks } = options;
+  const failedLanguages = /* @__PURE__ */ new Set();
+  const failedEmbeddedLanguages = /* @__PURE__ */ new Set();
+  if (!langs.length)
+    return { failedLanguages, failedEmbeddedLanguages };
   await runHighlighterTask(async () => {
@@ -166,5 +179,6 @@ const loadedLanguages = new Set(highlighter.getLoadedLanguages());
     const registrations = /* @__PURE__ */ new Map();
-    async function resolveLanguage(language, referencedBy = "") {
+    async function resolveLanguage(language, isEmbedded = false) {
       let languageInput;
       if (typeof language === "string") {
+        language = langAlias[language] ?? language;
         if (handledLanguageNames.has(language))
@@ -176,3 +190,7 @@ return [];
         if (!Object.keys(bundledLanguages).includes(language)) {
-          errors.push(`Unknown language "${language}"${referencedBy ? `, referenced by language(s): ${referencedBy}` : ""}`);
+          if (isEmbedded) {
+            failedEmbeddedLanguages.add(language);
+          } else {
+            failedLanguages.add(language);
+          }
           return [];
@@ -193,5 +211,5 @@ }
       });
-      if (injectLangsIntoNestedCodeBlocks && !referencedBy) {
+      if (injectLangsIntoNestedCodeBlocks && !isEmbedded) {
         languageRegistrations.forEach((lang) => {
-          const injectionLangs = getNestedCodeBlockInjectionLangs(lang);
+          const injectionLangs = getNestedCodeBlockInjectionLangs(lang, langAlias);
           injectionLangs.forEach((injectionLang) => registrations.set(injectionLang.name, injectionLang));
@@ -201,10 +219,9 @@ });
       const referencedLangs = [...new Set(languageRegistrations.map((lang) => lang.embeddedLangsLazy ?? []).flat())];
-      const referencers = languageRegistrations.map((lang) => lang.name).join(", ");
-      await Promise.all(referencedLangs.map((lang) => resolveLanguage(lang, referencers)));
+      await Promise.all(referencedLangs.map((lang) => resolveLanguage(lang, true)));
     }
-    await Promise.all(languages.map((lang) => resolveLanguage(lang)));
+    await Promise.all(langs.map((lang) => resolveLanguage(lang)));
     if (registrations.size)
       await highlighter.loadLanguage(...[...registrations.values()]);
   });
-  return errors;
+  return { failedLanguages, failedEmbeddedLanguages };
 }
@@ -341,3 +358,3 @@ var taskQueue = [];
 function pluginShiki(options = {}) {
-  const { langs, injectLangsIntoNestedCodeBlocks } = options;
+  const { langs, langAlias = {}, injectLangsIntoNestedCodeBlocks, engine } = options;
   validateTransformers(options);
@@ -355,3 +372,3 @@ return {
         try {
-          highlighter = await getCachedHighlighter({ langs, injectLangsIntoNestedCodeBlocks });
+          highlighter = await getCachedHighlighter({ langs, langAlias, injectLangsIntoNestedCodeBlocks, engine });
         } catch (err) {
@@ -364,8 +381,19 @@ const error = err instanceof Error ? err : new Error(String(err));
         }
-        const languageLoadErrors = await ensureLanguagesAreLoaded(highlighter, [codeBlock.language]);
-        const loadedLanguageName = languageLoadErrors.length ? "txt" : codeBlock.language;
-        if (loadedLanguageName !== codeBlock.language) {
-          logger.warn(
-            `Error while loading code block language "${codeBlock.language}" in ${codeBlock.parentDocument?.sourceFilePath ? `document "${codeBlock.parentDocument?.sourceFilePath}"` : "markdown/MDX document"}. Using "${loadedLanguageName}" instead. You can add custom languages using the "langs" config option. Error details: ${languageLoadErrors.join(", ")}`
-          );
+        const languageLoadErrors = await ensureLanguagesAreLoaded({ highlighter, langs: [codeBlock.language], langAlias });
+        const resolvedLanguage = langAlias[codeBlock.language] ?? codeBlock.language;
+        const primaryLanguageFailed = languageLoadErrors.failedLanguages.has(resolvedLanguage);
+        const embeddedLanguagesFailed = languageLoadErrors.failedEmbeddedLanguages.size > 0;
+        const loadedLanguageName = primaryLanguageFailed ? "txt" : resolvedLanguage;
+        if (primaryLanguageFailed || embeddedLanguagesFailed) {
+          const formatLangs = (langs2) => `language${[...langs2].length !== 1 ? "s" : ""} ${[...langs2].sort().map((lang) => `"${lang}"`).join(", ")}`;
+          const errorParts = [
+            `Error while highlighting code block using ${formatLangs([codeBlock.language])} in ${codeBlock.parentDocument?.sourceFilePath ? `document "${codeBlock.parentDocument?.sourceFilePath}"` : "markdown/MDX document"}.`
+          ];
+          if (primaryLanguageFailed)
+            errorParts.push(`The language could not be found. Using "${loadedLanguageName}" instead.`);
+          if (embeddedLanguagesFailed) {
+            errorParts.push(`The embedded ${formatLangs(languageLoadErrors.failedEmbeddedLanguages)} could not be found, so highlighting may be incomplete.`);
+          }
+          errorParts.push('Ensure that all required languages are either part of the bundle or custom languages provided in the "langs" config option.');
+          logger.warn(errorParts.join(" "));
         }
@@ -385,7 +413,3 @@ for (let styleVariantIndex = 0; styleVariantIndex < styleVariants.length; styleVariantIndex++) {
             await runHighlighterTask(() => {
-              tokenLines = codeToTokensBase(
-                code,
-                // @ts-expect-error: We took care that the language and theme are loaded
-                codeToTokensOptions
-              );
+              tokenLines = codeToTokensBase(code, codeToTokensOptions);
             });
@@ -392,0 +416,0 @@ tokenLines = runTokensHook({ options, code, codeBlock, codeToTokensOptions, tokenLines });

package.json

 {
   "name": "@expressive-code/plugin-shiki",
-  "version": "0.38.3",
+  "version": "0.39.0",
   "description": "Shiki syntax highlighting plugin for Expressive Code, a text marking & annotation engine for presenting source code on the web.",
@@ -25,16 +25,16 @@ "keywords": [],
   "dependencies": {
-    "@expressive-code/core": "^0.38.3",
-    "shiki": "^1.22.2"
+    "@expressive-code/core": "^0.39.0",
+    "shiki": "^1.26.1"
   },
   "devDependencies": {
-    "@internal/test-utils": "^0.2.31"
+    "@internal/test-utils": "^0.2.32"
   },
   "scripts": {
     "build": "tsup ./src/index.ts --format esm --dts --sourcemap --clean",
-    "coverage": "vitest run --coverage",
-    "test": "vitest run --reporter verbose",
-    "test-short": "vitest run --reporter basic",
-    "test-watch": "vitest --reporter verbose",
+    "coverage": "vitest run --coverage --typecheck",
+    "test": "vitest run --reporter verbose --typecheck",
+    "test-short": "vitest run --reporter basic --typecheck",
+    "test-watch": "vitest --reporter verbose --typecheck",
     "watch": "pnpm build --watch src"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

69015

9.59%

Lines of code

579

7.82%

Dependency changes

• + Added

  @expressive-code/core@0.39.0
  (transitive)

• - Removed

  @expressive-code/core@0.38.3
  (transitive)

• Updated

  @expressive-code/core@^0.39.0

• Updated

  shiki@^1.26.1