TypeScript interfaces for implementing MIME renderer extensions in JupyterLab
npx @tessl/cli install tessl/npm-jupyterlab--rendermime-interfaces@3.12.0JupyterLab RenderMime Interfaces provides TypeScript interfaces for implementing MIME renderer extensions in JupyterLab. These interfaces define standardized contracts for rendering various MIME types (text, images, rich media) within the JupyterLab ecosystem, enabling extension authors to create custom renderers with full integration support.
npm install @jupyterlab/rendermime-interfacesimport { IRenderMime } from "@jupyterlab/rendermime-interfaces";
import type { ReadonlyPartialJSONObject } from "@lumino/coreutils";
import { Widget } from "@lumino/widgets";For CommonJS:
const { IRenderMime } = require("@jupyterlab/rendermime-interfaces");
const { Widget } = require("@lumino/widgets");import { IRenderMime } from "@jupyterlab/rendermime-interfaces";
import { Widget } from "@lumino/widgets";
// Define a renderer factory
class MyRendererFactory implements IRenderMime.IRendererFactory {
readonly safe = true;
readonly mimeTypes = ["application/my-custom-type"];
readonly defaultRank = 100;
createRenderer(options: IRenderMime.IRendererOptions): IRenderMime.IRenderer {
return new MyRenderer(options);
}
}
// Create an extension
const extension: IRenderMime.IExtension = {
id: "my-extension:renderer",
rendererFactory: new MyRendererFactory(),
rank: 0,
dataType: "string"
};The package is organized around the core IRenderMime namespace containing several interface groups:
IMimeModel)IRenderer, IRendererFactory)IExtension, IExtensionModule)Core interfaces for handling MIME data, metadata, and toolbar components within the JupyterLab rendering system.
interface IMimeModel {
readonly trusted: boolean;
readonly data: ReadonlyPartialJSONObject;
readonly metadata: ReadonlyPartialJSONObject;
setData(options: IMimeModel.ISetDataOptions): void;
}
interface IToolbarItem {
name: string;
widget: Widget;
}Core rendering interfaces for creating MIME renderers and factories that integrate with JupyterLab's rendering pipeline.
interface IRenderer extends Widget {
renderModel(model: IMimeModel): Promise<void>;
}
interface IRendererFactory {
readonly safe: boolean;
readonly mimeTypes: ReadonlyArray<string>;
readonly defaultRank?: number;
createRenderer(options: IRendererOptions): IRenderer;
}
interface IRendererOptions {
mimeType: string;
sanitizer: ISanitizer;
resolver: IResolver | null;
linkHandler: ILinkHandler | null;
latexTypesetter: ILatexTypesetter | null;
markdownParser?: IMarkdownParser | null;
translator?: ITranslator;
}Interfaces for packaging and registering MIME renderer extensions within the JupyterLab extension system.
interface IExtension {
readonly id: string;
readonly description?: string;
readonly rendererFactory: IRendererFactory;
readonly rank?: number;
readonly renderTimeout?: number;
readonly dataType?: 'string' | 'json';
readonly documentWidgetFactoryOptions?: IDocumentWidgetFactoryOptions | ReadonlyArray<IDocumentWidgetFactoryOptions>;
readonly fileTypes?: ReadonlyArray<IFileType>;
}
interface IExtensionModule {
readonly default: IExtension | ReadonlyArray<IExtension>;
}Interfaces for document widget factories and file type associations that enable full document rendering capabilities.
interface IDocumentWidgetFactoryOptions {
readonly name: string;
readonly label?: string;
readonly modelName?: string;
readonly primaryFileType: string;
readonly fileTypes: ReadonlyArray<string>;
readonly defaultFor?: ReadonlyArray<string>;
readonly defaultRendered?: ReadonlyArray<string>;
readonly translator?: ITranslator;
readonly toolbarFactory?: (widget?: Widget) => IToolbarItem[];
}
interface IFileType {
readonly name: string;
readonly mimeTypes: ReadonlyArray<string>;
readonly extensions: ReadonlyArray<string>;
readonly displayName?: string;
readonly pattern?: string;
readonly icon?: LabIcon.IResolvable;
readonly iconClass?: string;
readonly iconLabel?: string;
readonly fileFormat?: string | null;
}Supporting interfaces for HTML sanitization, URL resolution, LaTeX typesetting, and Markdown parsing.
interface ISanitizer {
getAutolink?(): boolean;
sanitize(dirty: string, options?: ISanitizerOptions): string;
readonly allowNamedProperties?: boolean;
}
interface IResolver {
resolveUrl(url: string): Promise<string>;
getDownloadUrl(url: string): Promise<string>;
isLocal?(url: string, allowRoot?: boolean): boolean;
resolvePath?(path: string): Promise<IResolvedLocation | null>;
}
interface ILatexTypesetter {
typeset(element: HTMLElement): void;
}
interface IMarkdownParser {
render(source: string): Promise<string>;
}Interfaces for defining and rendering icons within the JupyterLab interface, supporting both SVG-based and custom renderers.
namespace LabIcon {
interface IIcon {
readonly name: string;
svgstr: string;
}
interface IRenderer {
readonly render: (container: HTMLElement, options?: any) => void;
readonly unrender?: (container: HTMLElement, options?: any) => void;
}
type IResolvable = string | (IIcon & Partial<IRenderer>);
}Internationalization interfaces providing gettext-based translation support for JupyterLab extensions.
interface ITranslator {
readonly languageCode: string;
load(domain: string): TranslationBundle;
}
type TranslationBundle = {
__(msgid: string, ...args: any[]): string;
_n(msgid: string, msgid_plural: string, n: number, ...args: any[]): string;
_p(msgctxt: string, msgid: string, ...args: any[]): string;
_np(msgctxt: string, msgid: string, msgid_plural: string, n: number, ...args: any[]): string;
gettext(msgid: string, ...args: any[]): string;
ngettext(msgid: string, msgid_plural: string, n: number, ...args: any[]): string;
pgettext(msgctxt: string, msgid: string, ...args: any[]): string;
npgettext(msgctxt: string, msgid: string, msgid_plural: string, n: number, ...args: any[]): string;
dcnpgettext(domain: string, msgctxt: string, msgid: string, msgid_plural: string, n: number, ...args: any[]): string;
};Core type definitions used across the package interfaces:
// From @lumino/coreutils
type ReadonlyPartialJSONObject = Readonly<Partial<Record<string, any>>>;
// From @lumino/widgets
class Widget {
// Base widget class from Lumino
}