@mui/internal-docs-infra 0.1.1-canary.9 → 0.2.0-alpha.1

package/esm/CodeHighlighter/types.d.ts

@@ -0,0 +1,276 @@
+import type { Root, RootData } from 'hast';
+import type { Delta } from 'jsondiffpatch';
+export type Components = {
+  [key: string]: React.ReactNode;
+};
+type CodeMeta = {
+  /** Name of the file (e.g., 'Button.tsx') */
+  fileName?: string;
+  /** Flattened path for the file */
+  path?: string;
+};
+export type Transforms = Record<string, {
+  delta: Delta;
+  fileName?: string;
+}>;
+export interface ExternalImportItem {
+  name: string;
+  type: 'named' | 'default' | 'namespace';
+  isType?: boolean;
+}
+export type Externals = Record<string, ExternalImportItem[]>;
+export interface HastRoot extends Root {
+  data?: RootData & {
+    totalLines?: number;
+  };
+}
+export type VariantSource = string | HastRoot | {
+  hastJson: string;
+};
+/**
+ * Additional files associated with a code variant.
+ * Can be either simple string content or objects with source and transformation options.
+ */
+export type VariantExtraFiles = {
+  [fileName: string]: string | {
+    /** Source content for this file */
+    source?: VariantSource;
+    /** Transformations that can be applied to this file */
+    transforms?: Transforms;
+    /** Skip generating source transformers for this file */
+    skipTransforms?: boolean;
+    /** Include metadata for this file */
+    metadata?: boolean;
+    /** File system path for this file */
+    path?: string;
+  };
+};
+/**
+ * Complete code variant definition with source, metadata, and configuration.
+ * Extends CodeMeta with all the information needed to display and process a code example.
+ */
+export type VariantCode = CodeMeta & {
+  /** Source URL where this variant originates */
+  url?: string;
+  /** Main source content for this variant */
+  source?: VariantSource;
+  /** Additional files associated with this variant */
+  extraFiles?: VariantExtraFiles;
+  /** Prefix for metadata keys, e.g. /src */
+  metadataPrefix?: string;
+  /** External module dependencies */
+  externals?: string[];
+  /** The name of the export for this variant's entrypoint */
+  namedExport?: string;
+  /** Order in which files should be displayed */
+  filesOrder?: string[];
+  /** Transformations that can be applied to the source */
+  transforms?: Transforms;
+  /** Whether all files in the variant are explicitly listed */
+  allFilesListed?: boolean;
+  /** Skip generating source transformers for this variant */
+  skipTransforms?: boolean;
+};
+export type Code = {
+  [key: string]: undefined | string | VariantCode;
+};
+export type ControlledVariantExtraFiles = {
+  [fileName: string]: {
+    source: string | null;
+  };
+};
+export type ControlledVariantCode = CodeMeta & {
+  url?: string;
+  source?: string | null;
+  extraFiles?: ControlledVariantExtraFiles;
+  filesOrder?: string[];
+};
+export type ControlledCode = {
+  [key: string]: undefined | null | ControlledVariantCode;
+};
+/**
+ * Base props passed to Content components for rendering code examples.
+ * These props provide the necessary data for displaying code, previews, and metadata.
+ */
+type BaseContentProps = CodeIdentityProps & Pick<CodeContentProps, 'code' | 'components' | 'variantType'>;
+export type ContentProps<T extends {}> = BaseContentProps & T;
+export type ContentLoadingVariant = {
+  fileNames?: string[];
+  source?: React.ReactNode;
+  extraSource?: {
+    [fileName: string]: React.ReactNode;
+  };
+};
+export type BaseContentLoadingProps = ContentLoadingVariant & CodeIdentityProps & {
+  extraVariants?: Record<string, ContentLoadingVariant>;
+};
+export type ContentLoadingProps<T extends {}> = BaseContentLoadingProps & T & {
+  component: React.ReactNode;
+  components?: Record<string, React.ReactNode>;
+  initialFilename?: string;
+};
+export type LoadCodeMeta = (url: string) => Promise<Code>;
+export type LoadVariantMeta = (variantName: string, url: string) => Promise<VariantCode>;
+export type LoadSource = (url: string) => Promise<{
+  source: string;
+  extraFiles?: VariantExtraFiles;
+  extraDependencies?: string[];
+  externals?: Externals;
+}>;
+export type TransformSource = (source: string, fileName: string) => Promise<Record<string, {
+  source: string;
+  fileName?: string;
+}> | undefined>;
+export type ParseSource = (source: string, fileName: string) => HastRoot;
+export type SourceTransformer = {
+  extensions: string[];
+  transformer: TransformSource;
+};
+export type SourceTransformers = Array<SourceTransformer>;
+/**
+ * Options for controlling file loading behavior
+ */
+export interface LoadFileOptions {
+  /** Disable applying source transformers */
+  disableTransforms?: boolean;
+  /** Disable parsing source strings to AST */
+  disableParsing?: boolean;
+  /** Maximum recursion depth for loading nested extra files */
+  maxDepth?: number;
+  /** Set of already loaded file URLs to prevent circular dependencies */
+  loadedFiles?: Set<string>;
+  /** Side effects code to inject into extraFiles */
+  globalsCode?: Array<VariantCode | string>;
+}
+/**
+ * Options for the loadVariant function, extending LoadFileOptions with required function dependencies
+ */
+export interface LoadVariantOptions extends LoadFileOptions, Pick<CodeFunctionProps, 'sourceParser' | 'loadSource' | 'loadVariantMeta' | 'sourceTransformers'> {}
+/**
+ * Options for loading fallback code with various configuration flags
+ */
+export interface LoadFallbackCodeOptions extends LoadFileOptions, CodeFunctionProps, Pick<CodeContentProps, 'variants'>, Pick<CodeLoadingProps, 'fallbackUsesExtraFiles' | 'fallbackUsesAllVariants'> {
+  /** Flag to indicate if syntax highlighting should be performed */
+  shouldHighlight?: boolean;
+  /** Specific filename to initially display */
+  initialFilename?: string;
+  /** Array of global code to include (overrides LoadFileOptions.globalsCode with different type) */
+  globalsCode?: Array<Code | string>;
+}
+/**
+ * Basic identification and metadata props for code examples
+ */
+export interface CodeIdentityProps {
+  /** Display name for the code example, used for identification and titles */
+  name?: string;
+  /** URL-friendly identifier for deep linking and navigation */
+  slug?: string;
+  /** Source URL where the code content originates from */
+  url?: string;
+}
+/**
+ * Core code content and variant management props
+ */
+export interface CodeContentProps {
+  /** Static code content with variants and metadata */
+  code?: Code;
+  /** React components for live preview alongside code */
+  components?: Components;
+  /** What type of variants are available (e.g., a type `packageManager` when variants `npm` and `yarn` are available) */
+  variantType?: string;
+  /** Static variant names that should be fetched at runtime */
+  variants?: string[];
+  /** Currently selected variant name */
+  variant?: string;
+  /** Currently selected file name */
+  fileName?: string;
+  /** Default variant to show on first load */
+  initialVariant?: string;
+  /** Fallback variant when the requested variant is not available */
+  defaultVariant?: string;
+  /** Global static code snippets to inject, typically for styling or tooling */
+  globalsCode?: Array<Code | string>;
+}
+/**
+ * Loading and processing configuration props
+ */
+export interface CodeLoadingProps {
+  /** Pre-computed code data from build-time optimization */
+  precompute?: Code;
+  /** Whether fallback content should include extra files */
+  fallbackUsesExtraFiles?: boolean;
+  /** Whether fallback content should include all variants */
+  fallbackUsesAllVariants?: boolean;
+  /** Enable controlled mode for external code state management */
+  controlled?: boolean;
+  /** Raw code string for simple use cases */
+  children?: string;
+  /**
+   * When to perform syntax highlighting and code processing
+   * @default 'stream'
+   */
+  highlightAt?: 'init' | 'stream' | 'hydration' | 'idle';
+  /** Force client-side rendering even when server rendering is available */
+  forceClient?: boolean;
+}
+/**
+ * Function props for loading and transforming code
+ */
+export interface CodeFunctionProps {
+  /** Function to load code metadata from a URL */
+  loadCodeMeta?: LoadCodeMeta;
+  /** Function to load specific variant metadata */
+  loadVariantMeta?: LoadVariantMeta;
+  /** Function to load raw source code and dependencies */
+  loadSource?: LoadSource;
+  /** Array of source transformers for code processing (e.g., TypeScript to JavaScript) */
+  sourceTransformers?: SourceTransformers;
+  /** Promise resolving to a source parser for syntax highlighting */
+  sourceParser?: Promise<ParseSource>;
+}
+/**
+ * Component and rendering props
+ */
+export interface CodeRenderingProps<T extends {}> {
+  /** Component to render the code content and preview */
+  Content: React.ComponentType<ContentProps<T>>;
+  /** Additional props passed to the Content component */
+  contentProps?: T;
+}
+/**
+ * Client-specific rendering props
+ */
+export interface CodeClientRenderingProps {
+  /** The CodeContent component that renders the code display and syntax highlighting */
+  children: React.ReactNode;
+  /** Loading placeholder shown while code is being processed */
+  fallback?: React.ReactNode;
+  /** Skip showing fallback content entirely */
+  skipFallback?: boolean;
+}
+/**
+ * Base props containing essential properties shared across CodeHighlighter components and helper functions.
+ * This serves as the foundation for other CodeHighlighter-related interfaces.
+ */
+export interface CodeHighlighterBaseProps<T extends {}> extends CodeIdentityProps, CodeContentProps, CodeLoadingProps, CodeFunctionProps, CodeRenderingProps<T> {}
+/**
+ * Props for the client-side CodeHighlighter component.
+ * Used when rendering happens in the browser with lazy loading and interactive features.
+ */
+export interface CodeHighlighterClientProps extends CodeIdentityProps, CodeContentProps, Omit<CodeLoadingProps, 'children'>, CodeClientRenderingProps {
+  /**
+   * When to perform syntax highlighting for performance optimization
+   * @default 'hydration'
+   */
+  highlightAt?: 'init' | 'hydration' | 'idle';
+}
+/**
+ * Main props for the CodeHighlighter component.
+ * Supports both build-time precomputation and runtime code loading with extensive customization options.
+ * Generic type T allows for custom props to be passed to Content and ContentLoading components.
+ */
+export interface CodeHighlighterProps<T extends {}> extends CodeHighlighterBaseProps<T> {
+  /** Component to show while code is being loaded or processed */
+  ContentLoading?: React.ComponentType<ContentLoadingProps<T>>;
+}
+export {};

package/esm/CodeHighlighter/types.js

@@ -0,0 +1 @@
+export {};

package/esm/CodeProvider/CodeContext.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import type { LoadCodeMeta, LoadSource, LoadVariantMeta, ParseSource, SourceTransformers, Code, ControlledCode, LoadFallbackCodeOptions, LoadVariantOptions, Externals, VariantCode } from "../CodeHighlighter/types.js";
+export type LoadFallbackCodeFn = (url: string, initialVariant: string, loaded: Code | undefined, options?: LoadFallbackCodeOptions) => Promise<{
+  code: Code;
+  processedGlobalsCode?: Array<Code>;
+}>;
+export type LoadVariantFn = (url: string | undefined, variantName: string, variant: VariantCode | string | undefined, options?: LoadVariantOptions) => Promise<{
+  code: VariantCode;
+  dependencies: string[];
+  externals: Externals;
+}>;
+export type ParseCodeFn = (code: Code, parseSource: ParseSource) => Code;
+export type ParseControlledCodeFn = (controlledCode: ControlledCode, parseSource: ParseSource) => Code;
+export type ApplyTransformsFn = (parsedCode: Code, parseSource: ParseSource) => Promise<Code>;
+export type GetAvailableTransformsFn = (parsedCode: Code | undefined, variantName: string) => string[];
+export interface CodeContext {
+  sourceParser?: Promise<ParseSource>;
+  parseSource?: ParseSource;
+  sourceTransformers?: SourceTransformers;
+  loadSource?: LoadSource;
+  loadVariantMeta?: LoadVariantMeta;
+  loadCodeMeta?: LoadCodeMeta;
+  loadFallbackCode?: LoadFallbackCodeFn;
+  loadVariant?: LoadVariantFn;
+  parseCode?: ParseCodeFn;
+  parseControlledCode?: ParseControlledCodeFn;
+  applyTransforms?: ApplyTransformsFn;
+  getAvailableTransforms?: GetAvailableTransformsFn;
+}
+export declare const CodeContext: React.Context<CodeContext>;
+export declare const useCodeContext: () => CodeContext;

package/esm/CodeProvider/CodeContext.js

@@ -0,0 +1,12 @@
+'use client';
+
+import * as React from 'react';
+
+// Type definitions for the heavy functions we're moving to context
+
+export var CodeContext = /*#__PURE__*/React.createContext({});
+if (process.env.NODE_ENV !== "production") CodeContext.displayName = "CodeContext";
+export var useCodeContext = function useCodeContext() {
+  var context = React.useContext(CodeContext);
+  return context;
+};

package/esm/CodeProvider/CodeProvider.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { LoadCodeMeta, LoadSource, LoadVariantMeta } from "../CodeHighlighter/types.js";
+export declare function CodeProvider({
+  children,
+  loadCodeMeta,
+  loadVariantMeta,
+  loadSource
+}: {
+  children: React.ReactNode;
+  loadCodeMeta?: LoadCodeMeta;
+  loadVariantMeta?: LoadVariantMeta;
+  loadSource?: LoadSource;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/CodeProvider/CodeProvider.js

@@ -0,0 +1,83 @@
+'use client';
+
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import { createStarryNight } from '@wooorm/starry-night';
+import { CodeContext } from "./CodeContext.js";
+import { extensionMap, grammars } from "../pipeline/parseSource/grammars.js";
+import { starryNightGutter } from "../pipeline/parseSource/addLineGutters.js";
+// Import the heavy functions
+import { loadFallbackCode } from "../CodeHighlighter/loadFallbackCode.js";
+import { loadVariant } from "../CodeHighlighter/loadVariant.js";
+import { parseCode } from "../CodeHighlighter/parseCode.js";
+import { parseControlledCode } from "../CodeHighlighter/parseControlledCode.js";
+import { applyTransforms, getAvailableTransforms } from "../CodeHighlighter/transformCode.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CodeProvider(_ref) {
+  var children = _ref.children,
+    loadCodeMeta = _ref.loadCodeMeta,
+    loadVariantMeta = _ref.loadVariantMeta,
+    loadSource = _ref.loadSource;
+  var _React$useState = React.useState(undefined),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    parseSource = _React$useState2[0],
+    setParseSource = _React$useState2[1];
+  var sourceParser = React.useMemo(function () {
+    // Only initialize Starry Night in the browser, not during SSR
+    if (typeof window === 'undefined') {
+      return Promise.resolve(function () {
+        throw new Error('parseSource not available during SSR');
+      });
+    }
+    return createStarryNight(grammars).then(function (starryNight) {
+      var parseSourceFn = function parseSourceFn(source, fileName) {
+        var fileType = fileName.slice(fileName.lastIndexOf('.'));
+        if (!extensionMap[fileType]) {
+          // Return a basic HAST root node with the source text for unsupported file types
+          return {
+            type: 'root',
+            children: [{
+              type: 'text',
+              value: source
+            }]
+          };
+        }
+        var highlighted = starryNight.highlight(source, extensionMap[fileType]);
+        var sourceLines = source.split(/\r?\n|\r/);
+        starryNightGutter(highlighted, sourceLines); // mutates the tree to add line gutters
+
+        return highlighted;
+      };
+      return parseSourceFn;
+    });
+  }, []);
+  React.useEffect(function () {
+    // Update the sync version when available
+    sourceParser.then(function (parseSourceFn) {
+      return setParseSource(function () {
+        return parseSourceFn;
+      });
+    });
+  }, [sourceParser]);
+  var context = React.useMemo(function () {
+    return {
+      sourceParser: sourceParser,
+      parseSource: parseSource,
+      // Sync version when available
+      loadSource: loadSource,
+      loadVariantMeta: loadVariantMeta,
+      loadCodeMeta: loadCodeMeta,
+      // Provide the heavy functions
+      loadFallbackCode: loadFallbackCode,
+      loadVariant: loadVariant,
+      parseCode: parseCode,
+      parseControlledCode: parseControlledCode,
+      applyTransforms: applyTransforms,
+      getAvailableTransforms: getAvailableTransforms
+    };
+  }, [sourceParser, parseSource, loadSource, loadVariantMeta, loadCodeMeta]);
+  return /*#__PURE__*/_jsx(CodeContext.Provider, {
+    value: context,
+    children: children
+  });
+}

package/esm/CodeProvider/index.d.ts

@@ -0,0 +1 @@
+export * from "./CodeProvider.js";

package/esm/CodeProvider/index.js

@@ -0,0 +1 @@
+export * from "./CodeProvider.js";

package/esm/abstractCreateDemo/abstractCreateDemo.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import type { Code, CodeHighlighterProps, ContentLoadingProps, ContentProps, LoadCodeMeta, LoadSource, LoadVariantMeta, ParseSource } from "../CodeHighlighter/types.js";
+import { DemoGlobalData } from "../createDemoData/types.js";
+type CreateDemoMeta = {
+  name?: string;
+  slug?: string;
+  displayName?: string;
+  variantType?: string;
+  skipPrecompute?: boolean;
+  highlightAt?: CodeHighlighterProps<{}>['highlightAt'];
+  precompute?: Code;
+  ClientProvider?: React.ComponentType<{
+    children: React.ReactNode;
+  }>;
+};
+type AbstractCreateDemoOptions<T extends {}> = {
+  DemoContent: React.ComponentType<ContentProps<T>>;
+  DemoContentLoading?: React.ComponentType<ContentLoadingProps<T>>;
+  DemoTitle?: React.ComponentType<{
+    slug?: string;
+    children?: string;
+  }>;
+  controlled?: boolean;
+  demoGlobalData?: DemoGlobalData[];
+  variantTypes?: Record<string, string>;
+  highlightAt?: CodeHighlighterProps<{}>['highlightAt'];
+  fallbackUsesExtraFiles?: boolean;
+  fallbackUsesAllVariants?: boolean;
+  loadCodeMeta?: LoadCodeMeta;
+  loadVariantMeta?: LoadVariantMeta;
+  loadSource?: LoadSource;
+  sourceParser?: Promise<ParseSource>;
+};
+export declare function abstractCreateDemo<T extends {}>(options: AbstractCreateDemoOptions<T>, url: string, variants: {
+  [key: string]: React.ComponentType;
+}, meta: CreateDemoMeta | undefined): React.ComponentType<T> & {
+  Title: React.ComponentType;
+};
+export declare function createDemoFactory<T extends {}>(options: AbstractCreateDemoOptions<T>): (url: string, component: React.ComponentType, meta?: CreateDemoMeta) => React.ComponentType<T> & {
+  Title: React.ComponentType;
+};
+export declare function createDemoWithVariantsFactory<T extends {}>(options: AbstractCreateDemoOptions<T>): (url: string, variants: Record<string, React.ComponentType>, meta?: CreateDemoMeta) => React.ComponentType<T> & {
+  Title: React.ComponentType;
+};
+export {};

package/esm/abstractCreateDemo/abstractCreateDemo.js

@@ -0,0 +1,100 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import { CodeHighlighter } from "../CodeHighlighter/index.js";
+import { createDemoDataWithVariants } from "../createDemoData/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function abstractCreateDemo(options, url, variants, meta) {
+  var demoData = createDemoDataWithVariants(url, variants, meta);
+  var variantType = options.variantTypes && options.variantTypes[Object.keys(variants).sort().join(':')];
+  var globalCode = [];
+  if (options.demoGlobalData) {
+    options.demoGlobalData.forEach(function (data) {
+      globalCode.push(data.precompute || data.url);
+    });
+  }
+  function DemoComponent(props) {
+    var renderedComponents = Object.entries(demoData.components).reduce(function (acc, _ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        Component = _ref2[1];
+      acc[key] = /*#__PURE__*/React.createElement(Component);
+      return acc;
+    }, {});
+    var highlighter = /*#__PURE__*/_jsx(CodeHighlighter, {
+      url: demoData.url,
+      name: demoData.name,
+      slug: demoData.slug,
+      variantType: (meta == null ? void 0 : meta.variantType) || variantType,
+      precompute: demoData.precompute,
+      globalsCode: globalCode,
+      components: renderedComponents,
+      contentProps: props,
+      Content: options.DemoContent,
+      ContentLoading: options.DemoContentLoading,
+      loadCodeMeta: options.loadCodeMeta,
+      loadVariantMeta: options.loadVariantMeta,
+      loadSource: options.loadSource,
+      sourceParser: options.sourceParser,
+      highlightAt: (meta == null ? void 0 : meta.highlightAt) || options.highlightAt,
+      controlled: options.controlled,
+      fallbackUsesExtraFiles: options.fallbackUsesExtraFiles,
+      fallbackUsesAllVariants: options.fallbackUsesAllVariants
+    });
+
+    // Use client provider if available
+    var ClientProvider = meta == null ? void 0 : meta.ClientProvider;
+    if (ClientProvider) {
+      return /*#__PURE__*/_jsx(ClientProvider, {
+        children: highlighter
+      });
+    }
+    return highlighter;
+  }
+  function Title() {
+    if (options.DemoTitle) {
+      return /*#__PURE__*/_jsx(options.DemoTitle, {
+        slug: demoData.slug,
+        children: demoData.name
+      });
+    }
+    return /*#__PURE__*/_jsx("h3", {
+      id: demoData.slug,
+      children: demoData.name
+    });
+  }
+  DemoComponent.Title = Title;
+  if (process.env.NODE_ENV !== 'production') {
+    DemoComponent.displayName = demoData.displayName;
+    DemoComponent.Title.displayName = "".concat(demoData.displayName, "Title");
+  }
+  return DemoComponent;
+}
+export function createDemoFactory(options) {
+  /**
+   * Creates a demo component for displaying code examples with syntax highlighting.
+   * @param url Depends on `import.meta.url` to determine the source file location.
+   * @param component The component to be rendered in the demo.
+   * @param meta Additional meta for the demo.
+   */
+  var createDemo = function createDemo(url, component, meta) {
+    return abstractCreateDemo(options, url, {
+      Default: component
+    },
+    // precomputed code will use the 'Default' key
+    meta);
+  };
+  return createDemo;
+}
+export function createDemoWithVariantsFactory(options) {
+  /**
+   * Creates a demo component for displaying code examples with syntax highlighting.
+   * A variant is a different implementation style of the same component.
+   * @param url Depends on `import.meta.url` to determine the source file location.
+   * @param variants The variants of the component to be rendered in the demo.
+   * @param meta Additional meta for the demo.
+   */
+  var createDemoWithVariants = function createDemoWithVariants(url, variants, meta) {
+    return abstractCreateDemo(options, url, variants, meta);
+  };
+  return createDemoWithVariants;
+}

package/esm/abstractCreateDemo/index.d.ts

@@ -0,0 +1 @@
+export * from "./abstractCreateDemo.js";

package/esm/abstractCreateDemo/index.js

@@ -0,0 +1 @@
+export * from "./abstractCreateDemo.js";

package/esm/abstractCreateDemoClient/abstractCreateDemoClient.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { Externals } from "../CodeHighlighter/types.js";
+type CreateDemoClientMeta = {
+  name?: string;
+  slug?: string;
+  displayName?: string;
+  variantType?: string;
+  skipPrecompute?: boolean;
+  precompute?: {
+    externals?: Externals;
+    [key: string]: any;
+  };
+  [key: string]: any;
+};
+type AbstractCreateDemoClientOptions = {
+  live?: boolean;
+  [key: string]: any;
+};
+/**
+ * Abstract factory function for creating demo client providers.
+ * This creates a provider component that supplies externals to child components.
+ *
+ * @param options Configuration options for the demo client factory
+ * @returns A function that creates demo client providers
+ */
+export declare function abstractCreateDemoClient(options: AbstractCreateDemoClientOptions, url: string, meta?: CreateDemoClientMeta): React.ComponentType<{
+  children: React.ReactNode;
+}>;
+export declare function createDemoClientFactory(options: AbstractCreateDemoClientOptions): (url: string, meta?: CreateDemoClientMeta) => React.ComponentType<{
+  children: React.ReactNode;
+}>;
+export {};

package/esm/abstractCreateDemoClient/abstractCreateDemoClient.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { CodeExternalsContext } from "../CodeExternalsContext/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Abstract factory function for creating demo client providers.
+ * This creates a provider component that supplies externals to child components.
+ *
+ * @param options Configuration options for the demo client factory
+ * @returns A function that creates demo client providers
+ */
+export function abstractCreateDemoClient(options, url, meta) {
+  var _meta$precompute;
+  // Extract externals from precomputed data
+  var externals = (meta == null || (_meta$precompute = meta.precompute) == null ? void 0 : _meta$precompute.externals) || {};
+  var context = {
+    externals: externals
+  };
+
+  // Create a provider component that makes externals available to children
+  function ClientProvider(_ref) {
+    var children = _ref.children;
+    // In a real implementation, this would provide the externals via context
+    // For now, just render children - the externals are already injected as imports
+    return /*#__PURE__*/_jsx(CodeExternalsContext.Provider, {
+      value: context,
+      children: children
+    });
+  }
+  if (process.env.NODE_ENV !== 'production') {
+    ClientProvider.displayName = "ClientProvider(".concat((meta == null ? void 0 : meta.name) || 'Demo', ")");
+  }
+
+  // Attach metadata to the provider for debugging/inspection
+  ClientProvider.clientMeta = {
+    url: url,
+    options: options,
+    meta: meta,
+    externals: externals
+  };
+  return ClientProvider;
+}
+export function createDemoClientFactory(options) {
+  /**
+   * Creates a demo client provider for live editing with precomputed externals.
+   * @param url Depends on `import.meta.url` to determine the source file location.
+   * @param meta Additional meta and configuration for the demo client.
+   */
+  var createDemoClient = function createDemoClient(url, meta) {
+    return abstractCreateDemoClient(options, url, meta);
+  };
+  return createDemoClient;
+}

package/esm/abstractCreateDemoClient/index.d.ts

@@ -0,0 +1 @@
+export * from "./abstractCreateDemoClient.js";

package/esm/abstractCreateDemoClient/index.js

@@ -0,0 +1 @@
+export * from "./abstractCreateDemoClient.js";