radiant-docs 0.1.62 → 0.1.63

package/template/src/components/endpoint/PlaygroundForm.astro

@@ -4,6 +4,7 @@ import { withBasePath } from "../../lib/base-path";
 import type { OpenApiRoute } from "../../lib/routes";
 import { getConfig } from "../../lib/validation";
 import { renderMarkdown } from "../../lib/utils";
+import { getClientShikiRuntimeConfig } from "../../lib/client-shiki-config";
 import {
   OPENAPI_REQUEST_SECTION_LABELS,
   type OpenApiRequestFields,
@@ -38,6 +39,7 @@ const {
 } = Astro.props;
 const headers: Record<string, string> = OPENAPI_REQUEST_SECTION_LABELS;
 const config = await getConfig();
+const shikiRuntimeConfig = getClientShikiRuntimeConfig(config);
 const configuredProxyUrl =
   typeof import.meta.env.PUBLIC_PROXY_URL === "string"
     ? import.meta.env.PUBLIC_PROXY_URL.trim()
@@ -77,6 +79,7 @@ const sectionVariantFieldNames = Object.fromEntries(
     queryFieldMeta: ${JSON.stringify(queryFieldMeta)},
     sectionVariantFieldNames: ${JSON.stringify(sectionVariantFieldNames)},
     bodyDefaultKind: ${JSON.stringify(bodyDefaultKind ?? null)},
+    shiki: ${JSON.stringify(shikiRuntimeConfig ?? null)},
     selectedSectionVariants: {},
     inputs: {
       header: {},
@@ -476,7 +479,7 @@ const sectionVariantFieldNames = Object.fromEntries(
             }
           };
         }
-          console.log("SEND", finalUrl, finalOptions)
+
         // 6. Execute Request
         const res = await fetch(finalUrl, finalOptions);
 
@@ -487,11 +490,12 @@ const sectionVariantFieldNames = Object.fromEntries(
           responseHeaders[key] = value;
         });
 
-        let highlightedData;
-        const highlightedHeaders = Prism.highlight(
+        let responseDataText;
+        let responseDataLanguage = 'plaintext';
+        const highlightedHeaders = await window.RadiantPlaygroundHighlightCode(
           JSON.stringify(responseHeaders, null, 2),
-          Prism.languages.json,
-          "json",
+          'json',
+          this.shiki,
         );
         const contentType = res.headers.get('content-type') || '';
         const responseText = await res.text();
@@ -500,25 +504,19 @@ const sectionVariantFieldNames = Object.fromEntries(
           try {
             const parsed =
               responseText.trim().length > 0 ? JSON.parse(responseText) : null;
-            highlightedData = Prism.highlight(
-              JSON.stringify(parsed, null, 2),
-              Prism.languages.json,
-              'json'
-            );
+            responseDataText = JSON.stringify(parsed, null, 2);
+            responseDataLanguage = 'json';
           } catch (parseError) {
-            highlightedData = Prism.highlight(
-              responseText || '(empty response)',
-              Prism.languages.plaintext,
-              'plaintext'
-            );
+            responseDataText = responseText || '(empty response)';
           }
         } else {
-          highlightedData = Prism.highlight(
-            responseText || '(empty response)',
-            Prism.languages.plaintext,
-            'plaintext'
-          );
+          responseDataText = responseText || '(empty response)';
         }
+        const highlightedData = await window.RadiantPlaygroundHighlightCode(
+          responseDataText,
+          responseDataLanguage,
+          this.shiki,
+        );
 
         this.response = {
           status,
@@ -682,45 +680,61 @@ const sectionVariantFieldNames = Object.fromEntries(
 </div>
 
 <script>
-  import Prism from "prismjs";
-  import "prismjs/components/prism-json";
-  // Use a dark theme that matches the #0d1117 background
-  import "prismjs/themes/prism-tomorrow.css";
-  // Make Prism available to Alpine
-  window.Prism = Prism;
-</script>
-
-<style>
-  @reference "../../styles/global.css";
-
-  :global(pre code span.token.punctuation) {
-    color: #24292e;
+  import {
+    highlightAssistantCodeToHtml,
+    type AssistantShikiRuntimeConfig,
+  } from "../../lib/assistant-shiki-client";
+
+  type PlaygroundShikiConfig = AssistantShikiRuntimeConfig | null | undefined;
+
+  function escapeHtml(value: string): string {
+    return value
+      .replaceAll("&", "&amp;")
+      .replaceAll("<", "&lt;")
+      .replaceAll(">", "&gt;")
+      .replaceAll('"', "&quot;")
+      .replaceAll("'", "&#39;");
   }
 
-  :global(pre code span.token.operator) {
-    color: #24292e;
-  }
+  function renderPlainCodeToHtml(code: string): string {
+    const lines = code.split("\n");
+    const normalizedLines = lines.length > 0 ? lines : [""];
 
-  :global(pre code span.token.property) {
-    color: #c62c2c;
-  }
-  :global(pre code span.token.string) {
-    color: #1e7734;
+    return normalizedLines
+      .map((line) => {
+        const lineHtml = line.length > 0 ? escapeHtml(line) : "&nbsp;";
+        return `<span class="flex w-max min-w-full"><span class="flex-1 whitespace-pre pl-3 pr-3">${lineHtml}</span></span>`;
+      })
+      .join("");
   }
 
-  :global(.dark pre code span.token.punctuation) {
-    color: #c9d1d9;
-  }
-
-  :global(.dark pre code span.token.operator) {
-    color: #c9d1d9;
-  }
-
-  :global(.dark pre code span.token.property) {
-    color: #ff7b72;
+  async function highlightPlaygroundCodeToHtml(
+    code: unknown,
+    language: string,
+    config: PlaygroundShikiConfig,
+  ): Promise<string> {
+    const normalizedCode = String(code ?? "");
+    if (!config) return renderPlainCodeToHtml(normalizedCode);
+
+    try {
+      const highlighted = await highlightAssistantCodeToHtml({
+        code: normalizedCode,
+        config,
+        language,
+      });
+      return highlighted.html;
+    } catch (error) {
+      console.error("Playground code highlighting failed", {
+        error,
+        language,
+      });
+      return renderPlainCodeToHtml(normalizedCode);
+    }
   }
 
-  :global(.dark pre code span.token.string) {
-    color: #a5d6ff;
-  }
-</style>
+  (
+    window as typeof window & {
+      RadiantPlaygroundHighlightCode?: typeof highlightPlaygroundCodeToHtml;
+    }
+  ).RadiantPlaygroundHighlightCode = highlightPlaygroundCodeToHtml;
+</script>

package/template/src/components/endpoint/ResponseDisplay.astro

@@ -161,7 +161,7 @@ import { Icon } from "astro-icon/components";
             </div>
             <div x-show="response && response.highlightedData">
               <pre
-                class="relative m-0 min-w-full p-0 text-[13px] leading-6"><code data-rd-code-theme class="block min-w-full px-4 py-2.5 font-mono text-neutral-800 dark:text-neutral-200" x-html="response?.highlightedData" /></pre>
+                class="relative m-0 min-w-full p-0 text-[13px] leading-6"><code data-rd-code-theme class="block min-w-full py-2.5 font-mono text-neutral-800 dark:text-neutral-200" x-html="response?.highlightedData" /></pre>
             </div>
           </div>
 
@@ -185,7 +185,7 @@ import { Icon } from "astro-icon/components";
             </div>
             <div x-show="response && response.highlightedHeaders">
               <pre
-                class="relative m-0 min-w-full bg-(--rd-code-surface) p-0 text-[13px] leading-6"><code data-rd-code-theme class="block min-w-full px-4 py-2.5 font-mono text-neutral-800 dark:text-neutral-200" x-html="response?.highlightedHeaders" /></pre>
+                class="relative m-0 min-w-full bg-(--rd-code-surface) p-0 text-[13px] leading-6"><code data-rd-code-theme class="block min-w-full py-2.5 font-mono text-neutral-800 dark:text-neutral-200" x-html="response?.highlightedHeaders" /></pre>
             </div>
           </div>
         </div>

package/template/src/generated/shiki-platform-assets.json

@@ -1,20 +1,20 @@
 {
-  "assetVersion": "shiki-3.23.0-c5695a7656dd",
+  "assetVersion": "shiki-4.2.0-c0d7e21cea71",
   "counts": {
     "languages": 347,
     "themes": 66
   },
   "manifest": {
-    "bytes": 172640,
+    "bytes": 172635,
     "module": "manifest.json",
-    "sha256": "d8ce64a7c4247eac90030e4dd92a9ac00f1de67114e0ac6c5e003e810c8e9cfb"
+    "sha256": "1840b6f21a79266d9bf3a74d5e6973d407fb06b96d71decd5542ca37eebf182d"
   },
   "packageVersions": {
-    "@shikijs/core": "3.23.0",
-    "@shikijs/engine-javascript": "3.23.0",
-    "@shikijs/langs": "3.23.0",
-    "@shikijs/themes": "3.23.0",
-    "shiki": "3.23.0"
+    "@shikijs/core": "4.2.0",
+    "@shikijs/engine-javascript": "4.2.0",
+    "@shikijs/langs": "4.2.0",
+    "@shikijs/themes": "4.2.0",
+    "shiki": "4.2.0"
   },
   "prefix": "_platform/shiki",
   "runtime": {

package/template/src/lib/assistant-panel-config.ts

@@ -5,12 +5,8 @@ import {
 import { withBasePath } from "./base-path";
 import { getAssistantLauncherIconConfig } from "./assistant-embed-script";
 import type { AssistantShikiRuntimeConfig } from "./assistant-shiki-client";
+import { getClientShikiRuntimeConfig } from "./client-shiki-config";
 import type { DocsConfig } from "./validation";
-import shikiPlatformAssets from "../generated/shiki-platform-assets.json";
-import {
-  DEFAULT_SHIKI_DARK_THEME,
-  DEFAULT_SHIKI_LIGHT_THEME,
-} from "radiant-docs-validator/shiki-theme-config";
 
 export type AssistantPanelRuntimeConfig = {
   apiPath: string;
@@ -35,57 +31,6 @@ export type AssistantPanelRuntimeConfig = {
   shiki?: AssistantShikiRuntimeConfig;
 };
 
-function normalizeStaticAssetHost(value: unknown): string {
-  const rawValue = typeof value === "string" ? value.trim() : "";
-  if (!rawValue) return "";
-
-  const normalizedHost = rawValue.replace(/\/+$/, "");
-  return /^https?:\/\//i.test(normalizedHost)
-    ? normalizedHost
-    : `https://${normalizedHost}`;
-}
-
-function joinUrl(baseUrl: string, path: string): string {
-  return `${baseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
-}
-
-function getConfiguredCodeSyntaxThemes(
-  config: DocsConfig,
-): AssistantShikiRuntimeConfig["syntaxThemes"] {
-  const configuredSyntaxTheme = config.theme?.code?.syntaxTheme;
-
-  if (typeof configuredSyntaxTheme === "string") {
-    return {
-      light: configuredSyntaxTheme,
-      dark: configuredSyntaxTheme,
-    };
-  }
-
-  return {
-    light: configuredSyntaxTheme?.light ?? DEFAULT_SHIKI_LIGHT_THEME,
-    dark: configuredSyntaxTheme?.dark ?? DEFAULT_SHIKI_DARK_THEME,
-  };
-}
-
-function getAssistantShikiRuntimeConfig(
-  config: DocsConfig,
-): AssistantShikiRuntimeConfig | undefined {
-  const staticAssetHost = normalizeStaticAssetHost(
-    import.meta.env.STATIC_ASSET_HOST ?? process.env.STATIC_ASSET_HOST,
-  );
-  if (!staticAssetHost) {
-    return undefined;
-  }
-
-  return {
-    assetBaseUrl: joinUrl(
-      staticAssetHost,
-      `${shikiPlatformAssets.prefix}/${shikiPlatformAssets.assetVersion}`,
-    ),
-    syntaxThemes: getConfiguredCodeSyntaxThemes(config),
-  };
-}
-
 export function getAssistantPanelRuntimeConfig(
   config: DocsConfig,
 ): AssistantPanelRuntimeConfig {
@@ -134,6 +79,6 @@ export function getAssistantPanelRuntimeConfig(
     emptyStateQuestions: assistantConfig?.questions,
     devProxyToken: isDev ? assistantDevProxySecret : undefined,
     chrome: getAssistantChromeConfig(config),
-    shiki: getAssistantShikiRuntimeConfig(config),
+    shiki: getClientShikiRuntimeConfig(config),
   };
 }

package/template/src/lib/assistant-shiki-client.ts

@@ -175,9 +175,20 @@ async function loadRuntime(
   })();
 
   runtimePromiseByKey.set(runtimeCacheKey, runtimePromise);
+  runtimePromise.catch(() => {
+    if (runtimePromiseByKey.get(runtimeCacheKey) === runtimePromise) {
+      runtimePromiseByKey.delete(runtimeCacheKey);
+    }
+  });
   return runtimePromise;
 }
 
+export async function warmAssistantShikiRuntime(
+  config: AssistantShikiRuntimeConfig,
+): Promise<void> {
+  await loadRuntime(config);
+}
+
 function normalizeLanguageToken(rawLanguage: string): string {
   const normalized = rawLanguage.trim().toLowerCase();
   if (!normalized) return "";
@@ -254,6 +265,11 @@ async function ensureLanguageLoaded({
       await highlighter.loadLanguage(...registrations);
     })();
     languageLoadPromiseByKey.set(cacheKey, loadPromise);
+    loadPromise.catch(() => {
+      if (languageLoadPromiseByKey.get(cacheKey) === loadPromise) {
+        languageLoadPromiseByKey.delete(cacheKey);
+      }
+    });
   }
 
   await loadPromise;

package/template/src/lib/client-shiki-config.ts

@@ -0,0 +1,60 @@
+import type { AssistantShikiRuntimeConfig } from "./assistant-shiki-client";
+import type { DocsConfig } from "./validation";
+import shikiPlatformAssets from "../generated/shiki-platform-assets.json";
+import {
+  DEFAULT_SHIKI_DARK_THEME,
+  DEFAULT_SHIKI_LIGHT_THEME,
+} from "radiant-docs-validator/shiki-theme-config";
+
+export type ClientShikiRuntimeConfig = AssistantShikiRuntimeConfig;
+
+function normalizeStaticAssetHost(value: unknown): string {
+  const rawValue = typeof value === "string" ? value.trim() : "";
+  if (!rawValue) return "";
+
+  const normalizedHost = rawValue.replace(/\/+$/, "");
+  return /^https?:\/\//i.test(normalizedHost)
+    ? normalizedHost
+    : `https://${normalizedHost}`;
+}
+
+function joinUrl(baseUrl: string, path: string): string {
+  return `${baseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+}
+
+function getConfiguredCodeSyntaxThemes(
+  config: DocsConfig,
+): ClientShikiRuntimeConfig["syntaxThemes"] {
+  const configuredSyntaxTheme = config.theme?.code?.syntaxTheme;
+
+  if (typeof configuredSyntaxTheme === "string") {
+    return {
+      light: configuredSyntaxTheme,
+      dark: configuredSyntaxTheme,
+    };
+  }
+
+  return {
+    light: configuredSyntaxTheme?.light ?? DEFAULT_SHIKI_LIGHT_THEME,
+    dark: configuredSyntaxTheme?.dark ?? DEFAULT_SHIKI_DARK_THEME,
+  };
+}
+
+export function getClientShikiRuntimeConfig(
+  config: DocsConfig,
+): ClientShikiRuntimeConfig | undefined {
+  const staticAssetHost = normalizeStaticAssetHost(
+    import.meta.env.STATIC_ASSET_HOST ?? process.env.STATIC_ASSET_HOST,
+  );
+  if (!staticAssetHost) {
+    return undefined;
+  }
+
+  return {
+    assetBaseUrl: joinUrl(
+      staticAssetHost,
+      `${shikiPlatformAssets.prefix}/${shikiPlatformAssets.assetVersion}`,
+    ),
+    syntaxThemes: getConfiguredCodeSyntaxThemes(config),
+  };
+}