@live-demo/core/dist/node/index.d.mts

Core components for @live-demo plugins.

import "react/jsx-runtime";
import { ReactCodeMirrorProps } from "@uiw/react-codemirror";
import { ReactElement } from "react";
import { Plugin, Processor } from "unified";
import * as mdast_util_mdx0 from "mdast-util-mdx";
import { MdxJsxFlowElement } from "mdast-util-mdx";
import { Root } from "mdast";

//#region src/web/ui/editor/LiveDemoEditor/LiveDemoEditor.d.ts

/**
 * Props passed to ReactCodeMirror.
 *
 * @defaultValue
 * ```
 * {
 *    basicSetup: {
 *      lineNumbers: false,
 *      foldGutter: false,
 *      autocompletion: false,
 *      tabSize: 2,
 *    }
 * }
 * ```
 */
interface LiveDemoEditorProps extends ReactCodeMirrorProps {}
//#endregion
//#region src/web/ui/editor/LiveDemoFileTabs/LiveDemoFileTabs.d.ts
type LiveDemoFileTabsProps = {
  /**
   * Hide single file tab
   * @defaultValue `false`
   */
  hideSingleTab?: boolean;
};
//#endregion
//#region src/web/ui/liveDemo/LiveDemoResizablePanels/types.d.ts
type LiveDemoResizablePanelsProps = {
  editor?: ReactElement;
  preview?: ReactElement;
  /**
   * Used for auto saving the panel sizes in local storage
   */
  autoSaveId?: string;
  /**
   * Layout width threshold in px.
   * When width of the ResizablePanels' wrapper div is smaller,
   * the panels are arranged vertically.
   * Otherwise, the panels are arranged horizontally.
   * @defaultValue 550
   */
  verticalThreshold?: number;
  /**
   * Default panel sizes in %.
   */
  defaultPanelSizes?: {
    /**
     * Default panel size in %.
     * @defaultValue `50`
     */
    editor?: number;
    /**
     * Default panel size in %.
     * @defaultValue `50`
     */
    preview?: number;
  };
  classes?: {
    wrapper?: string;
    editorPanel?: string;
    previewPanel?: string;
  };
};
//#endregion
//#region src/shared/constants.d.ts
declare enum LiveDemoLanguage {
  ts = "ts",
  tsx = "tsx",
  js = "js",
  jsx = "jsx",
}
//#endregion
//#region src/shared/types.d.ts
type PathWithAllowedExt = `${string}.${LiveDemoLanguage}`;
/**
 * `Record<fileName, fileContentsString>`
 */
type LiveDemoFiles = Record<string, string>;
type DemoDataByPath = Record<string, LiveDemoPropsFromPlugin>;
/**
 * Modules that will be available in demos.
 * @defaultValue `["react"]`
 *
 * These are collected from external demos at build time.
 *
 * You can also use `includeModules` option of the plugin,
 * to make some modules available in inline demos.
 **/
type UniqueImports = Set<string>;
type LiveDemoPropsFromPlugin = {
  files: LiveDemoFiles;
  entryFileName: string;
  options?: LiveDemoPluginOptions["ui"];
};
type LiveDemoPluginOptions = {
  /**
   * Modules that will be available in demos,
   * @example
   * includeModules: ["@mantine/hooks"]
   * Then you can use `import { ... } from "@mantine/hooks"` in any demo.
   **/
  includeModules?: string[];
  /**
   * Props passed from plugin to LiveDemo components.
   * @example
   * ui: {
   *   fileTabs: {
   *     hideSingleTab: true,
   *   },
   *   editor: {
   *     basicSetup: {
   *       lineNumbers: false,
   *       foldGutter: false,
   *       autocompletion: false,
   *       tabSize: 2,
   *     },
   *   },
   *   resizablePanels: {
   *     autoSaveId: "my-auto-save-id",
   *     defaultPanelSizes: {
   *       editor: 50,
   *       preview: 50,
   *     },
   *   },
   * }
   */
  ui?: {
    controlPanel?: {
      hide?: boolean;
    };
    fileTabs?: Pick<LiveDemoFileTabsProps, "hideSingleTab"> & {
      hide?: boolean;
    };
    editor?: LiveDemoEditorProps;
    resizablePanels?: Pick<LiveDemoResizablePanelsProps, "autoSaveId" | "defaultPanelSizes">;
  };
};
//#endregion
//#region src/node/helpers/getFilesAndImports.d.ts
declare const getFilesAndImports: (params: {
  fileName: PathWithAllowedExt;
  absolutePath: PathWithAllowedExt;
  uniqueImports: UniqueImports;
  visited?: Set<string>;
}) => {
  files: {
    [x: string]: string;
  };
};
//#endregion
//#region src/node/helpers/getMdxAst.d.ts
declare const getMdxAst: (filepath: string) => ReturnType<Processor["parse"]>;
//#endregion
//#region src/node/helpers/getMdxJsxAttribute.d.ts
declare const getMdxJsxAttribute: (node: MdxJsxFlowElement, attrName: string) => string | mdast_util_mdx0.MdxJsxAttributeValueExpression | null | undefined;
//#endregion
//#region src/node/helpers/getVirtualModulesCode.d.ts
/**
 * Prepares a string template to be injected into
 * node_modules with RspackVirtualModulePlugin.
 * It will be used to resolve external modules
 * when compiling code in the browser
 *
 * Usage:
 * import getImport from '_live_demo_virtual_modules'
 *
 * getImport('react')
 */
declare const getVirtualModulesCode: (allImports: Set<string>) => string;
//#endregion
//#region src/node/helpers/resolveFileInfo.d.ts
type ResolveFileInfo = {
  importPath: string;
  dirname: string;
};
declare function resolveFileInfo({
  dirname,
  importPath
}: ResolveFileInfo): {
  absolutePath: `${string}.ts` | `${string}.tsx` | `${string}.js` | `${string}.jsx`;
  fileName: `${string}.ts` | `${string}.tsx` | `${string}.js` | `${string}.jsx`;
};
//#endregion
//#region src/node/htmlTags.d.ts
declare const htmlTags: {
  tag: string;
  head: boolean;
  attrs: {
    src: string;
  };
}[];
//#endregion
//#region src/node/remarkPlugin.d.ts
interface RemarkPluginProps {
  options?: LiveDemoPluginOptions["ui"];
  getDemoDataByPath: () => DemoDataByPath;
}
/**
 * Inject <LiveDemo /> into MDX
 */
declare const remarkPlugin: Plugin<[RemarkPluginProps], Root>;
//#endregion
//#region src/node/visitFilePaths.d.ts
declare const visitFilePaths: ({
  filePaths,
  uniqueImports,
  demoDataByPath
}: {
  filePaths: string[];
  uniqueImports: UniqueImports;
  demoDataByPath: DemoDataByPath;
}) => void;
//#endregion
export { DemoDataByPath, LiveDemoFiles, LiveDemoPluginOptions, LiveDemoPropsFromPlugin, PathWithAllowedExt, UniqueImports, getFilesAndImports, getMdxAst, getMdxJsxAttribute, getVirtualModulesCode, htmlTags, remarkPlugin, resolveFileInfo, visitFilePaths };