Automatically load embedded languages and add make sure all languages…

… can be loaded
stevebauman · Nov 18, 2021 · 02542df · 02542df
1 parent fb33979
commit 02542df
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 7 deletions.
diff --git a/packages/shiki/src/__tests__/simple.test.ts b/packages/shiki/src/__tests__/simple.test.ts
@@ -1,3 +1,4 @@
+import { BUNDLED_LANGUAGES, Lang } from '../../dist'
 import { getHighlighter } from '../index'
 
 test('Nord highlighter highlights simple JavaScript', async () => {
@@ -9,18 +10,72 @@ test('Nord highlighter highlights simple JavaScript', async () => {
   expect(out).toMatchSnapshot()
 })
 
-test('Highlighter can load languages', async () => {
+test('Highlighter loads languages and embedded languages one level deep', async () => {
   const highlighter = await getHighlighter({
     theme: 'nord',
     langs: ['js']
   })
 
   await highlighter.loadLanguage('vue')
-  await highlighter.loadLanguage('css')
-  await highlighter.loadLanguage('yaml')
   await highlighter.loadLanguage('php')
 
   expect(highlighter.getLoadedLanguages()).toEqual(
-    expect.arrayContaining(['javascript', 'js', 'vue', 'css', 'yaml', 'php'])
+    expect.arrayContaining([
+      'javascript',
+      'js',
+      'vue',
+      'json',
+      'haml',
+      'vue-html',
+      'sass',
+      'less',
+      'postcss',
+      'pug',
+      'jade',
+      'stylus',
+      'styl',
+      'coffee',
+      'scss',
+      'markdown',
+      'md',
+      'css',
+      'typescript',
+      'ts',
+      'php',
+      'xml',
+      'sql',
+      'html'
+    ])
+  )
+})
+
+test('Highlighter does not load embedded languages when embedded depth to load is zero', async () => {
+  const highlighter = await getHighlighter({
+    theme: 'nord',
+    langs: ['js']
+  })
+
+  await highlighter.loadLanguage('vue', 0)
+  await highlighter.loadLanguage('php', 0)
+
+  expect(highlighter.getLoadedLanguages()).toEqual(
+    expect.arrayContaining(['javascript', 'js', 'vue', 'php'])
+  )
+})
+
+test('Highlighter can load all languages', async () => {
+  const highlighter = await getHighlighter({
+    theme: 'nord',
+    langs: ['js']
+  })
+
+  await highlighter.loadLanguage('abap')
+
+  await Promise.all(
+    BUNDLED_LANGUAGES.map(async lang => await highlighter.loadLanguage(lang.id as Lang))
+  )
+
+  expect(highlighter.getLoadedLanguages()).toEqual(
+    expect.arrayContaining(BUNDLED_LANGUAGES.map(lang => lang.id as Lang))
   )
 })
diff --git a/packages/shiki/src/highlighter.ts b/packages/shiki/src/highlighter.ts
@@ -138,11 +138,28 @@ export async function getHighlighter(options: HighlighterOptions): Promise<Highl
     await _registry.loadTheme(theme)
   }
 
-  async function loadLanguage(lang: ILanguageRegistration | Lang) {
+  async function loadLanguage(
+    lang: ILanguageRegistration | Lang,
+    embeddedLangMaxDepth: number = 1,
+    depth: number = 0
+  ) {
     const _lang = resolveLang(lang)
 
     _resolver.addLanguage(_lang)
+
     await _registry.loadLanguage(_lang)
+
+    if (depth < embeddedLangMaxDepth) {
+      const notLoaded = (_lang.embeddedLangs ?? []).filter(
+        embeddedLang => !getLoadedLanguages().includes(embeddedLang)
+      )
+
+      await Promise.all(
+        notLoaded.map(
+          async embeddedLang => await loadLanguage(embeddedLang, embeddedLangMaxDepth, ++depth)
+        )
+      )
+    }
   }
 
   function getLoadedThemes() {

diff --git a/packages/shiki/src/types.ts b/packages/shiki/src/types.ts
@@ -64,9 +64,13 @@ export interface Highlighter {
   loadTheme(theme: IThemeRegistration): Promise<void>
 
   /**
-   * Load a language
+   * Load a language with its embedded languages.
    */
-  loadLanguage(lang: ILanguageRegistration | Lang): Promise<void>
+  loadLanguage(
+    lang: ILanguageRegistration | Lang,
+    embeddedLangMaxDepth?: number,
+    depth?: number
+  ): Promise<void>
 
   /**
    * Get all loaded themes