From 50573cf9fb6bea36054b773e6b7a3581d7d975eb Mon Sep 17 00:00:00 2001 From: Ahad Birang Date: Mon, 27 Jun 2022 13:11:41 +0200 Subject: [PATCH 1/3] fix(highlight): warn about languages dynamic loading --- src/runtime/server/api/highlight.ts | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/src/runtime/server/api/highlight.ts b/src/runtime/server/api/highlight.ts index 40938a2f9..43e5f8e2b 100644 --- a/src/runtime/server/api/highlight.ts +++ b/src/runtime/server/api/highlight.ts @@ -42,8 +42,8 @@ const resolveBody = (body: Partial) => { // Remove trailing carriage returns code: body.code.replace(/\n+$/, ''), // Resolve lang & theme (i.e check if shiki supports them) - lang: resolveLang(body.lang), - theme: resolveTheme(body.theme) + lang: resolveLang(body.lang || ''), + theme: resolveTheme(body.theme || '') } } @@ -87,7 +87,14 @@ export default defineLazyEventHandler(async () => { // Load supported language on-demand if (!highlighter.getLoadedLanguages().includes(lang)) { - await highlighter.loadLanguage(lang) + // eslint-disable-next-line no-console + console.warn(`[Nuxt] [Content] Language "${lang}" is not loaded Shiki. Falling back to plain code.`) + // eslint-disable-next-line no-console + console.warn(`[Nuxt] [Content] Please make sure you add "${lang}" to the 'preload' list in your Nuxt config. See https://content.nuxtjs.org/api/configuration#highlight`) + // TODO: Enable autoloading of language when upstream Shiki supports it\ + // See: https://github.com/nuxt/content/issues/1225#issuecomment-1148786924 + // await highlighter.loadLanguage(lang) + return [[{ content: code }]] } // Load supported theme on-demand @@ -119,15 +126,20 @@ export default defineLazyEventHandler(async () => { key: color.key, tokens: color.tokens[line] }) - }, coloredTokens[0].tokens[line]) + }, coloredTokens[0].tokens[line] as HighlightThemedToken[]) } return highlightedCode } }) -function mergeLines (line1, line2) { - const mergedTokens = [] +interface HighlightThemedTokenLine { + key: string + tokens: HighlightThemedToken[] +} + +function mergeLines (line1: HighlightThemedTokenLine, line2: HighlightThemedTokenLine) { + const mergedTokens: HighlightThemedToken[] = [] const getColors = (h, i) => typeof h.tokens[i].color === 'string' ? { [h.key]: h.tokens[i].color } : h.tokens[i].color const [big, small] = line1.tokens.length > line2.tokens.length ? [line1, line2] : [line2, line1] From 2574ad8375f094208fac38bce82fa45013336c2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ya=C3=ABl=20Guilloux?= Date: Mon, 27 Jun 2022 18:41:28 +0200 Subject: [PATCH 2/3] feat(highlighter): improve logging message on missing preload language (use logger) --- src/runtime/server/api/highlight.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/runtime/server/api/highlight.ts b/src/runtime/server/api/highlight.ts index 43e5f8e2b..39feadbe4 100644 --- a/src/runtime/server/api/highlight.ts +++ b/src/runtime/server/api/highlight.ts @@ -2,6 +2,7 @@ import { createError, defineLazyEventHandler, useBody } from 'h3' import { getHighlighter, BUNDLED_LANGUAGES, BUNDLED_THEMES, Lang, Theme } from 'shiki-es' import { HighlightParams, HighlightThemedToken } from '../../types' import mdcTMLanguage from '../../assets/mdc.tmLanguage.json' +import { logger } from '../../../utils' import { useRuntimeConfig } from '#imports' /** @@ -87,10 +88,12 @@ export default defineLazyEventHandler(async () => { // Load supported language on-demand if (!highlighter.getLoadedLanguages().includes(lang)) { - // eslint-disable-next-line no-console - console.warn(`[Nuxt] [Content] Language "${lang}" is not loaded Shiki. Falling back to plain code.`) - // eslint-disable-next-line no-console - console.warn(`[Nuxt] [Content] Please make sure you add "${lang}" to the 'preload' list in your Nuxt config. See https://content.nuxtjs.org/api/configuration#highlight`) + let message = 'Content Highlighter Error\n\n' + message = message + `Language "${lang}" is not loaded Shiki. Falling back to plain code.\n\n` + message = message + `Please make sure you add "${lang}" to the 'preload' list in your Nuxt config.\n\n` + message = message + 'See: https://content.nuxtjs.org/api/configuration#highlight' + logger.warn(message) + // TODO: Enable autoloading of language when upstream Shiki supports it\ // See: https://github.com/nuxt/content/issues/1225#issuecomment-1148786924 // await highlighter.loadLanguage(lang) From d8b9d4eb6fda5cea9e94da94a40ceae40efe6fb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ya=C3=ABl=20Guilloux?= Date: Mon, 27 Jun 2022 18:50:37 +0200 Subject: [PATCH 3/3] fix(tests): fix tests ; cannot import utils from server context --- src/runtime/server/api/highlight.ts | 5 ++++- src/utils.ts | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/runtime/server/api/highlight.ts b/src/runtime/server/api/highlight.ts index 39feadbe4..4d840804c 100644 --- a/src/runtime/server/api/highlight.ts +++ b/src/runtime/server/api/highlight.ts @@ -1,10 +1,13 @@ import { createError, defineLazyEventHandler, useBody } from 'h3' import { getHighlighter, BUNDLED_LANGUAGES, BUNDLED_THEMES, Lang, Theme } from 'shiki-es' +import { useLogger } from '@nuxt/kit' import { HighlightParams, HighlightThemedToken } from '../../types' import mdcTMLanguage from '../../assets/mdc.tmLanguage.json' -import { logger } from '../../../utils' import { useRuntimeConfig } from '#imports' +// Re-create logger locally as utils cannot be imported from here +export const logger = useLogger('@nuxt/content') + /** * Resolve Shiki compatible lang from string. * diff --git a/src/utils.ts b/src/utils.ts index 19f4aae42..6e832485c 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -9,6 +9,7 @@ import type { ModuleOptions, MountOptions } from './module' import type { MarkdownPlugin } from './runtime/types' export const logger = useLogger('@nuxt/content') + /** * Internal version that represents cache format. * This is used to invalidate cache when the format changes.