@mindlogic-ai/logician-ui 5.0.0-alpha.20 → 5.0.0-alpha.21

package/dist/components/Code/shikiAdapter.d.ts

@@ -1,4 +1,6 @@
 import type { BundledLanguage } from 'shiki';
 export declare const BUNDLED_LANGUAGES: BundledLanguage[];
-export declare const shikiAdapter: import("@chakra-ui/react").CodeBlockAdapter;
+declare const baseAdapter: import("@chakra-ui/react").CodeBlockAdapter;
+export declare const shikiAdapter: typeof baseAdapter;
+export {};
 //# sourceMappingURL=shikiAdapter.d.ts.map

package/dist/components/Code/shikiAdapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shikiAdapter.d.ts","sourceRoot":"","sources":["../../../src/components/Code/shikiAdapter.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAoC,MAAM,OAAO,CAAC;AAE/E,eAAO,MAAM,iBAAiB,EAAE,eAAe,EA8B9C,CAAC;AAEF,eAAO,MAAM,YAAY,6CAWvB,CAAC"}
+{"version":3,"file":"shikiAdapter.d.ts","sourceRoot":"","sources":["../../../src/components/Code/shikiAdapter.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAoC,MAAM,OAAO,CAAC;AAE/E,eAAO,MAAM,iBAAiB,EAAE,eAAe,EA8B9C,CAAC;AA+BF,QAAA,MAAM,WAAW,6CAGf,CAAC;AAKH,eAAO,MAAM,YAAY,EAAE,OAAO,WAGjC,CAAC"}

package/dist/components/Code/shikiAdapter.js

@@ -34,16 +34,37 @@ const BUNDLED_LANGUAGES = [
     'xml',
     'yaml',
 ];
-const shikiAdapter = react.createShikiAdapter({
-    async load() {
-        const { createHighlighter } = await Promise.resolve().then(function () { return require('../../node_modules/shiki/dist/index.js'); });
-        return createHighlighter({
-            langs: BUNDLED_LANGUAGES,
-            themes: ['github-dark'],
-        });
-    },
+// One highlighter for the whole app. Every <Code> mounts its own
+// AdapterProvider, and Chakra calls `load()` once per provider. Without this
+// cache a chat with 136 code blocks built 136 highlighters, each compiling all
+// BUNDLED_LANGUAGES, and froze the tab for tens of seconds.
+let highlighterPromise = null;
+const loadHighlighter = () => {
+    highlighterPromise ?? (highlighterPromise = Promise.resolve().then(function () { return require('../../node_modules/shiki/dist/index.js'); })
+        .then(({ createHighlighter }) => createHighlighter({
+        langs: BUNDLED_LANGUAGES,
+        themes: ['github-dark'],
+    }))
+        .catch((error) => {
+        // Chakra does not catch a rejected load, so resolve to null instead: the
+        // block renders as plain text. Clear the cache so the next mount retries.
+        console.error('[logician-ui] Failed to load the Shiki highlighter', error);
+        highlighterPromise = null;
+        return null;
+    }));
+    return highlighterPromise;
+};
+const baseAdapter = react.createShikiAdapter({
+    load: loadHighlighter,
     theme: 'github-dark',
 });
+// Chakra's default `unloadContext` calls `dispose()` when a provider unmounts.
+// The highlighter is shared, so one block unmounting would break highlighting
+// in every other block. Keep it alive for the life of the page.
+const shikiAdapter = {
+    ...baseAdapter,
+    unloadContext: () => { },
+};
 
 exports.BUNDLED_LANGUAGES = BUNDLED_LANGUAGES;
 exports.shikiAdapter = shikiAdapter;

package/dist/components/Code/shikiAdapter.js.map

@@ -1 +1 @@
-{"version":3,"file":"shikiAdapter.js","sources":["../../../src/components/Code/shikiAdapter.ts"],"sourcesContent":[null],"names":["createShikiAdapter"],"mappings":";;;;;AAGO,MAAM,iBAAiB,GAAsB;IAClD,MAAM;IACN,GAAG;IACH,QAAQ;IACR,KAAK;IACL,MAAM;IACN,YAAY;IACZ,IAAI;IACJ,MAAM;IACN,MAAM;IACN,YAAY;IACZ,MAAM;IACN,KAAK;IACL,QAAQ;IACR,KAAK;IACL,UAAU;IACV,QAAQ;IACR,SAAS;IACT,QAAQ;IACR,GAAG;IACH,MAAM;IACN,MAAM;IACN,OAAO;IACP,KAAK;IACL,OAAO;IACP,MAAM;IACN,KAAK;IACL,YAAY;IACZ,KAAK;IACL,MAAM;;AAGD,MAAM,YAAY,GAAGA,wBAAkB,CAE5C;AACA,IAAA,MAAM,IAAI,GAAA;QACR,MAAM,EAAE,iBAAiB,EAAE,GAAG,MAAM,oDAAO,wCAAO,KAAC;AACnD,QAAA,OAAO,iBAAiB,CAAC;AACvB,YAAA,KAAK,EAAE,iBAAiB;YACxB,MAAM,EAAE,CAAC,aAAa,CAAC;AACxB,SAAA,CAAC;IACJ,CAAC;AACD,IAAA,KAAK,EAAE,aAAa;AACrB,CAAA;;;;;"}
+{"version":3,"file":"shikiAdapter.js","sources":["../../../src/components/Code/shikiAdapter.ts"],"sourcesContent":[null],"names":["createShikiAdapter"],"mappings":";;;;;AAGO,MAAM,iBAAiB,GAAsB;IAClD,MAAM;IACN,GAAG;IACH,QAAQ;IACR,KAAK;IACL,MAAM;IACN,YAAY;IACZ,IAAI;IACJ,MAAM;IACN,MAAM;IACN,YAAY;IACZ,MAAM;IACN,KAAK;IACL,QAAQ;IACR,KAAK;IACL,UAAU;IACV,QAAQ;IACR,SAAS;IACT,QAAQ;IACR,GAAG;IACH,MAAM;IACN,MAAM;IACN,OAAO;IACP,KAAK;IACL,OAAO;IACP,MAAM;IACN,KAAK;IACL,YAAY;IACZ,KAAK;IACL,MAAM;;AAKR;AACA;AACA;AACA;AACA,IAAI,kBAAkB,GAAuC,IAAI;AAEjE,MAAM,eAAe,GAAG,MAAkC;AACxD,IAAA,kBAAkB,KAAlB,kBAAkB,GAAK,oDAAO,wCAAO;SAClC,IAAI,CAAC,CAAC,EAAE,iBAAiB,EAAE,KAC1B,iBAAiB,CAAC;AAChB,QAAA,KAAK,EAAE,iBAAiB;QACxB,MAAM,EAAE,CAAC,aAAa,CAAC;AACxB,KAAA,CAAC;AAEH,SAAA,KAAK,CAAC,CAAC,KAAc,KAAI;;;AAGxB,QAAA,OAAO,CAAC,KAAK,CACX,oDAAoD,EACpD,KAAK,CACN;QACD,kBAAkB,GAAG,IAAI;AACzB,QAAA,OAAO,IAAI;AACb,IAAA,CAAC,CAAC,CAAA;AACJ,IAAA,OAAO,kBAAkB;AAC3B,CAAC;AAED,MAAM,WAAW,GAAGA,wBAAkB,CAAqB;AACzD,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,KAAK,EAAE,aAAa;AACrB,CAAA,CAAC;AAEF;AACA;AACA;AACO,MAAM,YAAY,GAAuB;AAC9C,IAAA,GAAG,WAAW;AACd,IAAA,aAAa,EAAE,MAAK,EAAE,CAAC;;;;;;"}

package/dist/components/Code/shikiAdapter.mjs

@@ -32,16 +32,37 @@ const BUNDLED_LANGUAGES = [
     'xml',
     'yaml',
 ];
-const shikiAdapter = createShikiAdapter({
-    async load() {
-        const { createHighlighter } = await import('../../node_modules/shiki/dist/index.mjs');
-        return createHighlighter({
-            langs: BUNDLED_LANGUAGES,
-            themes: ['github-dark'],
-        });
-    },
+// One highlighter for the whole app. Every <Code> mounts its own
+// AdapterProvider, and Chakra calls `load()` once per provider. Without this
+// cache a chat with 136 code blocks built 136 highlighters, each compiling all
+// BUNDLED_LANGUAGES, and froze the tab for tens of seconds.
+let highlighterPromise = null;
+const loadHighlighter = () => {
+    highlighterPromise ?? (highlighterPromise = import('../../node_modules/shiki/dist/index.mjs')
+        .then(({ createHighlighter }) => createHighlighter({
+        langs: BUNDLED_LANGUAGES,
+        themes: ['github-dark'],
+    }))
+        .catch((error) => {
+        // Chakra does not catch a rejected load, so resolve to null instead: the
+        // block renders as plain text. Clear the cache so the next mount retries.
+        console.error('[logician-ui] Failed to load the Shiki highlighter', error);
+        highlighterPromise = null;
+        return null;
+    }));
+    return highlighterPromise;
+};
+const baseAdapter = createShikiAdapter({
+    load: loadHighlighter,
     theme: 'github-dark',
 });
+// Chakra's default `unloadContext` calls `dispose()` when a provider unmounts.
+// The highlighter is shared, so one block unmounting would break highlighting
+// in every other block. Keep it alive for the life of the page.
+const shikiAdapter = {
+    ...baseAdapter,
+    unloadContext: () => { },
+};
 
 export { BUNDLED_LANGUAGES, shikiAdapter };
 //# sourceMappingURL=shikiAdapter.mjs.map

package/dist/components/Code/shikiAdapter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"shikiAdapter.mjs","sources":["../../../src/components/Code/shikiAdapter.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAGO,MAAM,iBAAiB,GAAsB;IAClD,MAAM;IACN,GAAG;IACH,QAAQ;IACR,KAAK;IACL,MAAM;IACN,YAAY;IACZ,IAAI;IACJ,MAAM;IACN,MAAM;IACN,YAAY;IACZ,MAAM;IACN,KAAK;IACL,QAAQ;IACR,KAAK;IACL,UAAU;IACV,QAAQ;IACR,SAAS;IACT,QAAQ;IACR,GAAG;IACH,MAAM;IACN,MAAM;IACN,OAAO;IACP,KAAK;IACL,OAAO;IACP,MAAM;IACN,KAAK;IACL,YAAY;IACZ,KAAK;IACL,MAAM;;AAGD,MAAM,YAAY,GAAG,kBAAkB,CAE5C;AACA,IAAA,MAAM,IAAI,GAAA;QACR,MAAM,EAAE,iBAAiB,EAAE,GAAG,MAAM,OAAO,yCAAO,CAAC;AACnD,QAAA,OAAO,iBAAiB,CAAC;AACvB,YAAA,KAAK,EAAE,iBAAiB;YACxB,MAAM,EAAE,CAAC,aAAa,CAAC;AACxB,SAAA,CAAC;IACJ,CAAC;AACD,IAAA,KAAK,EAAE,aAAa;AACrB,CAAA;;;;"}
+{"version":3,"file":"shikiAdapter.mjs","sources":["../../../src/components/Code/shikiAdapter.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAGO,MAAM,iBAAiB,GAAsB;IAClD,MAAM;IACN,GAAG;IACH,QAAQ;IACR,KAAK;IACL,MAAM;IACN,YAAY;IACZ,IAAI;IACJ,MAAM;IACN,MAAM;IACN,YAAY;IACZ,MAAM;IACN,KAAK;IACL,QAAQ;IACR,KAAK;IACL,UAAU;IACV,QAAQ;IACR,SAAS;IACT,QAAQ;IACR,GAAG;IACH,MAAM;IACN,MAAM;IACN,OAAO;IACP,KAAK;IACL,OAAO;IACP,MAAM;IACN,KAAK;IACL,YAAY;IACZ,KAAK;IACL,MAAM;;AAKR;AACA;AACA;AACA;AACA,IAAI,kBAAkB,GAAuC,IAAI;AAEjE,MAAM,eAAe,GAAG,MAAkC;AACxD,IAAA,kBAAkB,KAAlB,kBAAkB,GAAK,OAAO,yCAAO;SAClC,IAAI,CAAC,CAAC,EAAE,iBAAiB,EAAE,KAC1B,iBAAiB,CAAC;AAChB,QAAA,KAAK,EAAE,iBAAiB;QACxB,MAAM,EAAE,CAAC,aAAa,CAAC;AACxB,KAAA,CAAC;AAEH,SAAA,KAAK,CAAC,CAAC,KAAc,KAAI;;;AAGxB,QAAA,OAAO,CAAC,KAAK,CACX,oDAAoD,EACpD,KAAK,CACN;QACD,kBAAkB,GAAG,IAAI;AACzB,QAAA,OAAO,IAAI;AACb,IAAA,CAAC,CAAC,CAAA;AACJ,IAAA,OAAO,kBAAkB;AAC3B,CAAC;AAED,MAAM,WAAW,GAAG,kBAAkB,CAAqB;AACzD,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,KAAK,EAAE,aAAa;AACrB,CAAA,CAAC;AAEF;AACA;AACA;AACO,MAAM,YAAY,GAAuB;AAC9C,IAAA,GAAG,WAAW;AACd,IAAA,aAAa,EAAE,MAAK,EAAE,CAAC;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "5.0.0-alpha.20",
+  "version": "5.0.0-alpha.21",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/Code/Code.test.tsx

@@ -0,0 +1,116 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { system } from '../../theme';
+
+const shiki = vi.hoisted(() => ({
+  createHighlighter: vi.fn(),
+  dispose: vi.fn(),
+}));
+
+// The real Shiki compiles grammars through WASM, which is slow in jsdom and
+// not what these tests are about. The fake marks highlighted output with a
+// class so a test can tell highlighted text from the plain-text fallback.
+vi.mock('shiki', () => ({
+  createHighlighter: shiki.createHighlighter,
+}));
+
+const fakeHighlighter = {
+  codeToHtml: (code: string) =>
+    `<pre><code><span class="test-highlighted">${code}</span></code></pre>`,
+  dispose: shiki.dispose,
+};
+
+// shikiAdapter caches the highlighter at module level. Re-import Code per test
+// so each one starts with an empty cache.
+const loadCode = async () => (await import('./Code')).Code;
+
+const wrap = (ui: React.ReactNode) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>);
+
+beforeEach(() => {
+  vi.resetModules();
+  shiki.createHighlighter.mockReset();
+  shiki.createHighlighter.mockResolvedValue(fakeHighlighter);
+  shiki.dispose.mockReset();
+});
+
+describe('Code highlighter', () => {
+  it('creates one highlighter for many code blocks', async () => {
+    const Code = await loadCode();
+    const { container } = wrap(
+      <>
+        {Array.from({ length: 20 }, (_, i) => (
+          <Code key={i} language="javascript">{`const n = ${i};`}</Code>
+        ))}
+      </>
+    );
+
+    await waitFor(() =>
+      expect(container.querySelectorAll('.test-highlighted')).toHaveLength(20)
+    );
+    expect(shiki.createHighlighter).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps highlighting the other blocks when one block unmounts', async () => {
+    const Code = await loadCode();
+    const Blocks = ({ showFirst }: { showFirst: boolean }) => (
+      <>
+        {showFirst && <Code language="javascript">first</Code>}
+        <Code language="javascript">second</Code>
+      </>
+    );
+    const { container, rerender } = wrap(<Blocks showFirst />);
+    await waitFor(() =>
+      expect(container.querySelectorAll('.test-highlighted')).toHaveLength(2)
+    );
+
+    rerender(
+      <ChakraProvider value={system}>
+        <Blocks showFirst={false} />
+      </ChakraProvider>
+    );
+
+    expect(shiki.dispose).not.toHaveBeenCalled();
+    expect(container.querySelectorAll('.test-highlighted')).toHaveLength(1);
+
+    // A block mounted later reuses the same highlighter.
+    rerender(
+      <ChakraProvider value={system}>
+        <Blocks showFirst />
+      </ChakraProvider>
+    );
+    await waitFor(() =>
+      expect(container.querySelectorAll('.test-highlighted')).toHaveLength(2)
+    );
+    expect(shiki.createHighlighter).toHaveBeenCalledTimes(1);
+  });
+
+  it('retries on the next mount when loading fails', async () => {
+    const consoleError = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+    shiki.createHighlighter.mockRejectedValueOnce(new Error('load failed'));
+    const Code = await loadCode();
+
+    const first = wrap(<Code language="javascript">a</Code>);
+    await waitFor(() =>
+      expect(consoleError).toHaveBeenCalledWith(
+        expect.stringContaining('Failed to load the Shiki highlighter'),
+        expect.any(Error)
+      )
+    );
+    // The failed block falls back to plain text instead of throwing.
+    expect(first.container).toHaveTextContent('a');
+    expect(first.container.querySelector('.test-highlighted')).toBeNull();
+    first.unmount();
+
+    const { container } = wrap(<Code language="javascript">b</Code>);
+    await waitFor(() =>
+      expect(container.querySelectorAll('.test-highlighted')).toHaveLength(1)
+    );
+    expect(shiki.createHighlighter).toHaveBeenCalledTimes(2);
+    consoleError.mockRestore();
+  });
+});

package/src/components/Code/shikiAdapter.ts

@@ -33,15 +33,44 @@ export const BUNDLED_LANGUAGES: BundledLanguage[] = [
   'yaml',
 ];
 
-export const shikiAdapter = createShikiAdapter<
-  HighlighterGeneric<BundledLanguage, BundledTheme>
->({
-  async load() {
-    const { createHighlighter } = await import('shiki');
-    return createHighlighter({
-      langs: BUNDLED_LANGUAGES,
-      themes: ['github-dark'],
+type Highlighter = HighlighterGeneric<BundledLanguage, BundledTheme>;
+
+// One highlighter for the whole app. Every <Code> mounts its own
+// AdapterProvider, and Chakra calls `load()` once per provider. Without this
+// cache a chat with 136 code blocks built 136 highlighters, each compiling all
+// BUNDLED_LANGUAGES, and froze the tab for tens of seconds.
+let highlighterPromise: Promise<Highlighter | null> | null = null;
+
+const loadHighlighter = (): Promise<Highlighter | null> => {
+  highlighterPromise ??= import('shiki')
+    .then(({ createHighlighter }) =>
+      createHighlighter({
+        langs: BUNDLED_LANGUAGES,
+        themes: ['github-dark'],
+      })
+    )
+    .catch((error: unknown) => {
+      // Chakra does not catch a rejected load, so resolve to null instead: the
+      // block renders as plain text. Clear the cache so the next mount retries.
+      console.error(
+        '[logician-ui] Failed to load the Shiki highlighter',
+        error
+      );
+      highlighterPromise = null;
+      return null;
     });
-  },
+  return highlighterPromise;
+};
+
+const baseAdapter = createShikiAdapter<Highlighter | null>({
+  load: loadHighlighter,
   theme: 'github-dark',
 });
+
+// Chakra's default `unloadContext` calls `dispose()` when a provider unmounts.
+// The highlighter is shared, so one block unmounting would break highlighting
+// in every other block. Keep it alive for the life of the page.
+export const shikiAdapter: typeof baseAdapter = {
+  ...baseAdapter,
+  unloadContext: () => {},
+};