@wallarm-org/design-system 4.3.3-rc-fix-WDS-192.1 → 4.3.4

package/dist/components/CodeSnippet/adapters/createShikiHighlighter.d.ts

@@ -0,0 +1 @@
+export declare const createShikiHighlighter: () => Promise<import("@shikijs/types").HighlighterCore>;

package/dist/components/CodeSnippet/adapters/createShikiHighlighter.js

@@ -0,0 +1,52 @@
+import { createHighlighterCore } from "shiki/core";
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+import bash from "shiki/langs/bash.mjs";
+import c from "shiki/langs/c.mjs";
+import cpp from "shiki/langs/cpp.mjs";
+import css from "shiki/langs/css.mjs";
+import go from "shiki/langs/go.mjs";
+import html from "shiki/langs/html.mjs";
+import http from "shiki/langs/http.mjs";
+import java from "shiki/langs/java.mjs";
+import javascript from "shiki/langs/javascript.mjs";
+import json from "shiki/langs/json.mjs";
+import jsx from "shiki/langs/jsx.mjs";
+import lua from "shiki/langs/lua.mjs";
+import markdown from "shiki/langs/markdown.mjs";
+import python from "shiki/langs/python.mjs";
+import rust from "shiki/langs/rust.mjs";
+import sql from "shiki/langs/sql.mjs";
+import tsx from "shiki/langs/tsx.mjs";
+import typescript from "shiki/langs/typescript.mjs";
+import xml from "shiki/langs/xml.mjs";
+import yaml from "shiki/langs/yaml.mjs";
+import github_light from "shiki/themes/github-light.mjs";
+const createShikiHighlighter = ()=>createHighlighterCore({
+        themes: [
+            github_light
+        ],
+        langs: [
+            javascript,
+            typescript,
+            jsx,
+            tsx,
+            bash,
+            json,
+            html,
+            xml,
+            css,
+            python,
+            go,
+            sql,
+            yaml,
+            markdown,
+            lua,
+            rust,
+            java,
+            c,
+            cpp,
+            http
+        ],
+        engine: createOnigurumaEngine(import("shiki/wasm"))
+    });
+export { createShikiHighlighter };

package/dist/components/CodeSnippet/adapters/index.d.ts

@@ -1,20 +1,5 @@
+export { loadHighlightJsAdapter } from './loadHighlightJsAdapter.js';
+export { loadPrismAdapter } from './loadPrismAdapter.js';
+export { loadShikiAdapter } from './loadShikiAdapter.js';
 export { plainAdapter } from './plain.js';
 export type { HighlightJsLanguage, HighlightResult, PlainLanguage, PrismLanguage, ShikiLanguage, SyntaxAdapter, Token, TokenType, } from './types.js';
-/**
- * Lazily load the Prism adapter for syntax highlighting.
- * Lightweight, good for most use cases.
- * Bundle size: ~15KB gzipped
- */
-export declare const loadPrismAdapter: () => Promise<import("./types.js").SyntaxAdapter<import("./types.js").PrismLanguage>>;
-/**
- * Lazily load the Shiki adapter for syntax highlighting.
- * High-quality highlighting with VS Code themes, supports more languages.
- * Bundle size: ~200KB+ gzipped (includes WASM)
- */
-export declare const loadShikiAdapter: () => Promise<import("./types.js").SyntaxAdapter<import("./types.js").ShikiLanguage>>;
-/**
- * Lazily load the highlight.js adapter for syntax highlighting.
- * Well-established library, good language support.
- * Bundle size: ~30KB gzipped (core + common languages)
- */
-export declare const loadHighlightJsAdapter: () => Promise<import("./types.js").SyntaxAdapter<import("./types.js").HighlightJsLanguage>>;

package/dist/components/CodeSnippet/adapters/index.js

@@ -1,14 +1,4 @@
-const loadPrismAdapter = async ()=>{
-    const { prismAdapter } = await import("./prism.js");
-    return prismAdapter;
-};
-const loadShikiAdapter = async ()=>{
-    const { shikiAdapter } = await import("./shiki.js");
-    return shikiAdapter;
-};
-const loadHighlightJsAdapter = async ()=>{
-    const { highlightJsAdapter } = await import("./highlightjs.js");
-    return highlightJsAdapter;
-};
+export { loadHighlightJsAdapter } from "./loadHighlightJsAdapter.js";
+export { loadPrismAdapter } from "./loadPrismAdapter.js";
+export { loadShikiAdapter } from "./loadShikiAdapter.js";
 export { plainAdapter } from "./plain.js";
-export { loadHighlightJsAdapter, loadPrismAdapter, loadShikiAdapter };

package/dist/components/CodeSnippet/adapters/loadHighlightJsAdapter.d.ts

@@ -0,0 +1,2 @@
+/** Lazily load the highlight.js adapter for syntax highlighting. */
+export declare const loadHighlightJsAdapter: () => Promise<import("./types.js").SyntaxAdapter<import("./types.js").HighlightJsLanguage>>;

package/dist/components/CodeSnippet/adapters/loadHighlightJsAdapter.js

@@ -0,0 +1,5 @@
+const loadHighlightJsAdapter = async ()=>{
+    const { highlightJsAdapter } = await import("./highlightjs.js");
+    return highlightJsAdapter;
+};
+export { loadHighlightJsAdapter };

package/dist/components/CodeSnippet/adapters/loadPrismAdapter.d.ts

@@ -0,0 +1,2 @@
+/** Lazily load the Prism adapter for syntax highlighting. */
+export declare const loadPrismAdapter: () => Promise<import("./types.js").SyntaxAdapter<import("./types.js").PrismLanguage>>;

package/dist/components/CodeSnippet/adapters/loadPrismAdapter.js

@@ -0,0 +1,5 @@
+const loadPrismAdapter = async ()=>{
+    const { prismAdapter } = await import("./prism.js");
+    return prismAdapter;
+};
+export { loadPrismAdapter };

package/dist/components/CodeSnippet/adapters/loadShikiAdapter.d.ts

@@ -0,0 +1,2 @@
+/** Lazily load the Shiki adapter. Its highlighter initializes on first use. */
+export declare const loadShikiAdapter: () => Promise<import("./types.js").SyntaxAdapter<import("./types.js").ShikiLanguage>>;

package/dist/components/CodeSnippet/adapters/loadShikiAdapter.js

@@ -0,0 +1,5 @@
+const loadShikiAdapter = async ()=>{
+    const { shikiAdapter } = await import("./shiki.js");
+    return shikiAdapter;
+};
+export { loadShikiAdapter };

package/dist/components/CodeSnippet/adapters/shiki.js

@@ -44,14 +44,7 @@ function mapScopeToTokenType(scopes) {
     return 'plain';
 }
 async function getHighlighter() {
-    if (!highlighterPromise) highlighterPromise = import("shiki").then(async ({ createHighlighter })=>createHighlighter({
-            themes: [
-                'github-light'
-            ],
-            langs: [
-                ...SUPPORTED_LANGUAGES
-            ]
-        }));
+    if (!highlighterPromise) highlighterPromise = import("./createShikiHighlighter.js").then(({ createShikiHighlighter })=>createShikiHighlighter());
     return highlighterPromise;
 }
 const shikiAdapter = {

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "4.3.2",
-  "generatedAt": "2026-10-28T09:00:51.747Z",
+  "version": "4.3.3",
+  "generatedAt": "2026-10-29T18:31:23.304Z",
   "components": [
     {
       "name": "Accordion",
@@ -35770,14 +35770,14 @@
           "code": "import { loadShikiAdapter, CodeSnippetAdapterProvider, CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';\n\nexport const JSONWithShiki = () => (\n  <CodeSnippetAdapterProvider adapter={loadShikiAdapter}>\n    <CodeSnippetRoot code={jsonCode} language='json'>\n      <CodeSnippetContent>\n        <CodeSnippetLineNumbers />\n        <CodeSnippetCode />\n      </CodeSnippetContent>\n    </CodeSnippetRoot>\n  </CodeSnippetAdapterProvider>\n);",
           "storyFile": "CodeSnippet/CodeSnippet.stories.tsx",
           "storyTitle": "Data Display/CodeSnippet/CodeSnippet",
-          "description": "Shiki, supplied through `CodeSnippetAdapterProvider` — VS Code's own grammars, and the\nheaviest of the three adapters at roughly 200KB plus WASM."
+          "description": "Shiki, supplied through `CodeSnippetAdapterProvider`, uses VS Code-style grammars.\nThe adapter lazily initializes its supported languages and github-light theme with\nthe Oniguruma WASM engine on the first highlight call."
         },
         {
           "name": "TypescriptWithPrism",
           "code": "import { loadPrismAdapter, CodeSnippetAdapterProvider, CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';\n\nexport const TypescriptWithPrism = () => (\n  <CodeSnippetAdapterProvider adapter={loadPrismAdapter}>\n    <CodeSnippetRoot code={typescriptCode} language='typescript'>\n      <CodeSnippetContent>\n        <CodeSnippetLineNumbers />\n        <CodeSnippetCode />\n      </CodeSnippetContent>\n    </CodeSnippetRoot>\n  </CodeSnippetAdapterProvider>\n);",
           "storyFile": "CodeSnippet/CodeSnippet.stories.tsx",
           "storyTitle": "Data Display/CodeSnippet/CodeSnippet",
-          "description": "Prism, at roughly 15KB, is the one to reach for unless something forces otherwise;\nthis is TypeScript under it."
+          "description": "TypeScript highlighted with Prism. Its loader emits only the Prism adapter's\ndependencies; unused Shiki and highlight.js loaders are discarded by the consumer."
         },
         {
           "name": "BashWithPrism",
@@ -35791,7 +35791,7 @@
           "code": "import { loadHighlightJsAdapter, CodeSnippetAdapterProvider, CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';\n\nexport const HTMLWithHighlightJs = () => (\n  <CodeSnippetAdapterProvider adapter={loadHighlightJsAdapter}>\n    <CodeSnippetRoot code={htmlCode} language='html'>\n      <CodeSnippetContent>\n        <CodeSnippetLineNumbers />\n        <CodeSnippetCode />\n      </CodeSnippetContent>\n    </CodeSnippetRoot>\n  </CodeSnippetAdapterProvider>\n);",
           "storyFile": "CodeSnippet/CodeSnippet.stories.tsx",
           "storyTitle": "Data Display/CodeSnippet/CodeSnippet",
-          "description": "highlight.js sits between the other two at roughly 30KB, with the longest language list\nof the three."
+          "description": "HTML highlighted with highlight.js. The adapter loads the library lazily and\nexposes the languages listed by its getSupportedLanguages() method."
         },
         {
           "name": "HTTPRequestWithPrism",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "4.3.3-rc-fix-WDS-192.1",
+  "version": "4.3.4",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",
@@ -74,6 +74,7 @@
     "test": "rstest watch",
     "test:coverage": "rstest run --coverage",
     "test:run": "rstest run",
+    "test:bundles": "tsx scripts/check-code-snippet-bundles.ts",
     "storybook": "storybook dev --no-open -p 6006",
     "build-storybook": "storybook build",
     "e2e": "playwright test",