@mui/internal-docs-infra 0.12.1-canary.12 → 0.12.1-canary.13

package/CodeControllerContext/CodeControllerContext.d.mts

@@ -18,7 +18,7 @@ export interface CodeControllerContext {
    * code is always a string to simplify use. It will be highlighted when it is passed as `code`.
    * This behavior depends on client-side highlighting and the CodeProvider component.
    */
-  code?: ControlledCode;
+  code?: ControlledCode | null;
   /**
    * Controls the state for displaying the given code. This works with build-time and client-side
    * loading. If using server loading, the selection won't work for fallback loading and would
@@ -30,7 +30,7 @@ export interface CodeControllerContext {
    * called when the user interacts with the code highlighting. It's recommended to only set `code`
    * after the first `setCode` event fires to benefit from server or build-time rendering.
    */
-  setCode?: React.Dispatch<React.SetStateAction<ControlledCode | undefined>>;
+  setCode?: React.Dispatch<React.SetStateAction<ControlledCode | null>>;
   /**
    * Setter function for updating the selection state. When provided in the context, this function
    * will be called when the user interacts with the code highlighting interface.
@@ -107,9 +107,9 @@ export declare const CodeControllerContext: React.Context<CodeControllerContext
  *   - components: Override components for the preview
  */
 export declare function useControlledCode(): {
-  code: ControlledCode | undefined;
+  code: ControlledCode | null;
   selection: Selection | undefined;
-  setCode: React.Dispatch<React.SetStateAction<ControlledCode | undefined>> | undefined;
+  setCode: React.Dispatch<React.SetStateAction<ControlledCode | null>> | undefined;
   setSelection: React.Dispatch<React.SetStateAction<Selection>> | undefined;
   components: Record<string, React.ReactNode> | undefined;
   errors: Record<string, string | null> | undefined;

package/CodeControllerContext/CodeControllerContext.mjs

@@ -44,7 +44,7 @@ if (process.env.NODE_ENV !== "production") CodeControllerContext.displayName = "
 export function useControlledCode() {
   const context = React.useContext(CodeControllerContext);
   return {
-    code: context?.code,
+    code: context?.code ?? null,
     selection: context?.selection,
     setCode: context?.setCode,
     setSelection: context?.setSelection,

package/CodeHighlighter/CodeHighlighterClient.mjs

@@ -1372,9 +1372,7 @@ export function CodeHighlighterClient(props) {
     setSelection: controlled?.setSelection || setSelection,
     components: bridgedComponents,
     errors: controlled?.errors,
-    // Only suppress when an external CodeController owns the code; static
-    // `props.code` still needs the locally-computed list.
-    availableTransforms: controlled?.code ? [] : availableTransforms,
+    availableTransforms,
     url: props.url,
     deferHighlight,
     fallbacks: activeFallbacks,
@@ -1384,7 +1382,7 @@ export function CodeHighlighterClient(props) {
     onEditingActivated: handleEditingActivated,
     refresh,
     preParsedCache
-  }), [overlaidCode, controlled?.setCode, selection, controlled?.selection, controlled?.setSelection, bridgedComponents, controlled?.errors, controlled?.code, availableTransforms, props.url, deferHighlight, activeFallbacks, highlightReady, highlightAfter, editActivation, handleEditingActivated, refresh, preParsedCache]);
+  }), [overlaidCode, controlled?.setCode, selection, controlled?.selection, controlled?.setSelection, bridgedComponents, controlled?.errors, availableTransforms, props.url, deferHighlight, activeFallbacks, highlightReady, highlightAfter, editActivation, handleEditingActivated, refresh, preParsedCache]);
   if (!props.variants && !props.components && !activeCode) {
     throw new Errors.ErrorCodeHighlighterClientMissingData();
   }

package/CodeHighlighter/CodeHighlighterContext.d.mts

@@ -14,7 +14,7 @@ export interface PreParsedCacheEntry {
 }
 export interface CodeHighlighterContextType {
   code?: Code;
-  setCode?: React.Dispatch<React.SetStateAction<ControlledCode | undefined>>;
+  setCode?: React.Dispatch<React.SetStateAction<ControlledCode | null>>;
   selection?: Selection;
   setSelection?: React.Dispatch<React.SetStateAction<Selection>>;
   components?: Record<string, React.ReactNode>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-docs-infra",
-  "version": "0.12.1-canary.12",
+  "version": "0.12.1-canary.13",
   "author": "MUI Team",
   "description": "MUI Infra - internal documentation creation tools.",
   "license": "MIT",
@@ -804,5 +804,5 @@
   "bin": {
     "docs-infra": "./cli/index.mjs"
   },
-  "gitSha": "cd265618d793d94a8126db916013526ce860e836"
+  "gitSha": "61f66652a9d92b4ab95273edecf1a19351c89e18"
 }

package/useCode/useCode.mjs

@@ -385,6 +385,17 @@ export function useCode(contentProps, opts) {
   // is in scope and the block isn't hard-`disabled`. Otherwise `setEditable` is omitted,
   // so a host renders no toggle.
   const canToggleEditing = Boolean(controllerContext?.setCode) && !disabled;
+
+  // Discard live edits when the reader switches language.
+  const rawSelectTransform = transformManagement.selectTransform;
+  const resetSource = sourceEditing.reset;
+  const hasControlledEdits = Boolean(controllerContext?.code);
+  const selectTransform = React.useCallback(transformName => {
+    if (hasControlledEdits) {
+      resetSource?.();
+    }
+    rawSelectTransform(transformName);
+  }, [hasControlledEdits, resetSource, rawSelectTransform]);
   return {
     variants: variantSelection.variantKeys,
     selectedVariant: variantSelection.selectedVariantKey,
@@ -404,7 +415,7 @@ export function useCode(contentProps, opts) {
     copyMarkdown: copyFunctionality.copyMarkdown,
     availableTransforms: transformManagement.availableTransforms,
     selectedTransform: transformManagement.selectedTransform,
-    selectTransform: transformManagement.selectTransform,
+    selectTransform,
     pendingTransform: transformManagement.pendingTransform,
     editable: uiState.editable,
     setEditable: canToggleEditing ? uiState.setEditable : undefined,

package/useCode/useSourceEditing.mjs

@@ -246,7 +246,7 @@ export function useSourceEditing({
     // survive the reset and the source viewer could reuse it for the rebuilt original.
     context?.preParsedCache?.clear();
     // Back to an empty controlled state, so the next edit re-tags `.original`.
-    contextSetCode(undefined);
+    contextSetCode(null);
   }, [contextSetCode, context?.preParsedCache]);
   const isEditable = !disabled && Boolean(contextSetCode) && Boolean(selectedVariant);
   const canReset = !disabled && Boolean(contextSetCode);

package/useCode/useTransformManagement.mjs

@@ -122,7 +122,19 @@ export function useTransformManagement({
   // here, otherwise rename-only entries would be dropped from
   // resolution and the storage key would shift whenever a transform's
   // visibility changed between sibling demos.
-  const applicableTransforms = React.useMemo(() => getApplicableTransforms(effectiveCode, selectedVariantKey), [effectiveCode, selectedVariantKey]);
+  const contextAvailableTransforms = context?.availableTransforms;
+  // What the CURRENT (possibly edited) code can actually apply. Empty while
+  // live-editing, since controlled code carries no transform manifest.
+  const applicableFromCode = React.useMemo(() => getApplicableTransforms(effectiveCode, selectedVariantKey), [effectiveCode, selectedVariantKey]);
+  const applicableTransforms = React.useMemo(() => {
+    // Fall back to the controller's visible list while editing so a language
+    // switch still validates — it discards the edit and re-applies to the
+    // pristine build-time source (see `useCode.selectTransform`).
+    if (applicableFromCode.length === 0 && contextAvailableTransforms?.length) {
+      return contextAvailableTransforms;
+    }
+    return applicableFromCode;
+  }, [applicableFromCode, contextAvailableTransforms]);
 
   // Coordinator key. Demos sharing the same applicable transform set
   // belong to the same coordination group: a user click in one demo
@@ -509,6 +521,11 @@ export function useTransformManagement({
   // `onCommit` when its `(variant, transform)` keys match the values
   // about to be rendered.
   const transformedFiles = React.useMemo(() => {
+    // While live-editing, `selectedTransform` may still be e.g. `js`, so
+    // return `undefined` to render the edited source as-is (see `useFileNavigation`).
+    if (delayedAppliedTransform && !applicableFromCode.includes(delayedAppliedTransform)) {
+      return undefined;
+    }
     if (precomputed && precomputed.variant === selectedVariant && precomputed.transform === delayedAppliedTransform) {
       return precomputed.result;
     }
@@ -521,7 +538,7 @@ export function useTransformManagement({
       return undefined;
     }
     return transformEngine(selectedVariant, delayedAppliedTransform, transformRuntimeDeps, context?.fallbacks);
-  }, [precomputed, selectedVariant, delayedAppliedTransform, context?.fallbacks, transformEngine]);
+  }, [precomputed, selectedVariant, delayedAppliedTransform, applicableFromCode, context?.fallbacks, transformEngine]);
   const result = {
     availableTransforms,
     selectedTransform,

package/useDemoController/useDemoController.d.mts

@@ -1,26 +1,15 @@
 import * as React from 'react';
 import type { ControlledCode } from '@mui/internal-docs-infra/CodeHighlighter/types';
-export interface UseDemoControllerOptions {
-  /**
-   * Keep the controlled code in sync across same-origin tabs/windows of the same page
-   * (e.g. a Chrome split view) via a `BroadcastChannel`. On by default; pass `false`
-   * to opt a demo out. SSR-safe — the channel only opens in the browser.
-   */
-  crossTabSync?: boolean;
+import type { CodeControllerContext } from '@mui/internal-docs-infra/CodeControllerContext';
+export interface UseDemoControllerResult {
+  /** The controlled source, keyed by variant. `null` until the first edit. */
+  code: ControlledCode | null;
   /**
-   * The demo's source url (`import.meta.url`) — the demo factory passes it through, so
-   * a `DemoController` can forward its props straight to this hook. Used as the
-   * per-demo `crossTabSync` key (the page path scopes it further) so each demo syncs
-   * only with its counterpart in the other tab. Without it, sync falls back to
-   * page-level — correct only when the page has a single demo.
+   * Updates the controlled source (e.g. as a reader edits a variant). Typed as the
+   * context's `setCode` (`Dispatch<SetStateAction>`) so the whole result drops straight
+   * into a `CodeControllerContext.Provider` with no cast.
    */
-  url?: string;
-}
-export interface UseDemoControllerResult {
-  /** The controlled source, keyed by variant. `undefined` until the first edit. */
-  code: ControlledCode | undefined;
-  /** Updates the controlled source (e.g. as a reader edits a variant). */
-  setCode: React.Dispatch<React.SetStateAction<ControlledCode | undefined>>;
+  setCode: NonNullable<CodeControllerContext['setCode']>;
   /**
    * One live preview node per variant, keyed by variant — for the variants that
    * have finished building. `undefined` until at least one is ready, so a host can
@@ -62,4 +51,4 @@ export interface UseDemoControllerResult {
  * page (via the `crossTabSync` option), so a reader editing a demo in a Chrome split
  * view sees it update in both panes.
  */
-export declare function useDemoController(options?: UseDemoControllerOptions): UseDemoControllerResult;
+export declare function useDemoController(): UseDemoControllerResult;

package/useDemoController/useDemoController.mjs

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import { useCodeExternals } from '@mui/internal-docs-infra/CodeExternalsContext';
-import { useCrossTabState } from '@mui/internal-docs-infra/useCrossTabState';
 import { getTranspile } from "./transpileClientSingleton.mjs";
 import { useVariantBuilds } from "./useVariantBuilds.mjs";
 
@@ -49,22 +48,8 @@ const DemoRunner = /*#__PURE__*/React.lazy(() => preloadBuildEngine().then(modul
  * page (via the `crossTabSync` option), so a reader editing a demo in a Chrome split
  * view sees it update in both panes.
  */
-export function useDemoController(options = {}) {
-  const {
-    crossTabSync = true,
-    url
-  } = options;
-  // The controlled code, owned here and mirrored across same-origin tabs of this page.
-  // The channel name combines the page path with the per-demo `url`, so split-view tabs
-  // of one page sync each demo independently; `null` (disabled, or on the server) opens
-  // no channel and `useCrossTabState` behaves like a plain `useState`.
-  const syncChannel = React.useMemo(() => {
-    if (!crossTabSync || typeof window === 'undefined') {
-      return null;
-    }
-    return `mui-docs-infra:demo-controller:${window.location.pathname}\u0000${url ?? ''}`;
-  }, [crossTabSync, url]);
-  const [code, setControlledCode] = useCrossTabState(syncChannel, undefined);
+export function useDemoController() {
+  const [code, setControlledCode] = React.useState(null);
   // Build errors (transpile/CSS failures) and render errors (the entry throwing) live
   // in SEPARATE maps so they never clobber each other: a build error is owned by
   // `useVariantBuilds` (set on failure, cleared on the next good build); a render
@@ -102,11 +87,10 @@ export function useDemoController(options = {}) {
   // effect; the length guards keep each clear a no-op once its map is empty.
   const setCode = React.useCallback(action => {
     setControlledCode(action);
-    // A reset passes the cleared value directly (never a functional update), so a
-    // falsy argument is the reset — drop stale errors alongside it.
-    if (typeof action !== 'function' && !action) {
-      setBuildErrors(previous => Object.keys(previous).length > 0 ? {} : previous);
-      setRenderErrors(previous => Object.keys(previous).length > 0 ? {} : previous);
+    // Drop stale errors alongside a reset (`code` cleared to `null`).
+    if (!action) {
+      setBuildErrors({});
+      setRenderErrors({});
     }
   }, [setControlledCode]);
 

package/useDemoController/useVariantBuilds.d.mts

@@ -28,4 +28,4 @@ export interface VariantBuild {
  * first-build-done set, and the deferred edit) lives in refs since it never
  * affects render; only the resolved `built` map is state.
  */
-export declare function useVariantBuilds(code: ControlledCode | undefined, transpile: Transpile | null, externals: Record<string, unknown>, report: (variant: string, message: string | null) => void): Record<string, VariantBuild>;
+export declare function useVariantBuilds(code: ControlledCode | null | undefined, transpile: Transpile | null, externals: Record<string, unknown>, report: (variant: string, message: string | null) => void): Record<string, VariantBuild>;

package/useDemoController/useVariantBuilds.mjs

@@ -139,7 +139,7 @@ export function useVariantBuilds(code, transpile, externals, report) {
         }
         // The attempt finished (failed) — later edits may now cancel.
         firstBuildDone.current.add(variant);
-        report(variant, thrown instanceof Error ? thrown.message : String(thrown));
+        report(variant, thrown instanceof Error ? thrown.toString() : String(thrown));
         buildDeferred();
       });
     };