@gtkx/codegen 0.21.0 → 1.0.0-rc.1

package/src/store/gi/vtable.ts

@@ -0,0 +1,99 @@
+import { sourceStringLiteral, toCamelIdentifier, toPascalCase } from "@gtkx/utils";
+import {
+    isInlineCallbackRef,
+    isScalarRef,
+    renderDescriptor,
+    renderParamDescriptor,
+} from "../../analysis/descriptor-render.js";
+import type { GirCallback } from "../../gir/callback.js";
+import type { GirClass } from "../../gir/class.js";
+import type { GirField } from "../../gir/field.js";
+import type { ModuleContext } from "../../writer/context.js";
+import { renderBraced } from "../../writer/emit.js";
+import { computeRecordFieldSlots } from "./record-layout.js";
+
+type VtableKind = "class" | "interface";
+
+export const renderVfuncMetadata = (context: ModuleContext, klass: GirClass): string | undefined => {
+    if (klass.glibTypeStruct === undefined) return undefined;
+    const structName = toPascalCase(klass.glibTypeStruct);
+    const kind: VtableKind = klass.isInterface ? "interface" : "class";
+    const entries = vtableEntries(context, structName, kind, klass.glibTypeStruct);
+    if (entries.length === 0) return undefined;
+    return renderBraced(entries.join("\n"));
+};
+
+const vtableEntries = (context: ModuleContext, structName: string, kind: VtableKind, typeStruct: string): string[] => {
+    const resolved = context.library.resolveType(context.namespace.name, typeStruct);
+    if (resolved === undefined || resolved.kind !== "record") return [];
+    const { slots } = computeRecordFieldSlots(context, resolved.value.fields, resolved.value.isUnion);
+    const entries: string[] = [];
+    const claimedNames = new Set<string>();
+    for (const { field, slot } of slots) {
+        if (field.type === undefined) continue;
+        const type = context.library.typeOf(field.type);
+        if (type?.kind !== "callback" || context.library.nameOf(field.type) !== undefined) continue;
+        const key = toCamelIdentifier(field.name);
+        if (key === "constructor" || claimedNames.has(key)) continue;
+        const callback = type.value;
+        if (!isVtableSlotEligible(context, callback)) continue;
+        claimedNames.add(key);
+        entries.push(
+            renderVtableSlotDescriptor(context, {
+                key,
+                structName,
+                kind,
+                field,
+                callback,
+                byteOffset: slot.byteOffset,
+            }),
+        );
+    }
+    return entries;
+};
+
+const isVtableSlotEligible = (context: ModuleContext, callback: GirCallback): boolean => {
+    if (!callback.introspectable) return false;
+    for (const param of callback.parameters) {
+        if (param.isVarargs) return false;
+        if (
+            (param.direction === "out" || param.direction === "inout") &&
+            !param.callerAllocates &&
+            !isScalarRef(context.library, param.type)
+        ) {
+            return false;
+        }
+        if (isInlineCallbackRef(context.library, param.type)) return false;
+    }
+    return !isInlineCallbackRef(context.library, callback.returnValue.type);
+};
+
+type RenderVtableSlotDescriptorOptions = {
+    key: string;
+    structName: string;
+    kind: VtableKind;
+    field: GirField;
+    callback: GirCallback;
+    byteOffset: number;
+};
+
+const renderVtableSlotDescriptor = (context: ModuleContext, options: RenderVtableSlotDescriptorOptions): string => {
+    const { key, structName, kind, field, callback, byteOffset } = options;
+    const argDescriptors = callback.parameters
+        .map((param) => renderParamDescriptor(context, param, param.type))
+        .join(", ");
+    const returnDescriptor = renderDescriptor(
+        context,
+        callback.returnValue.type,
+        callback.returnValue.transferOwnership,
+    );
+    const lines = [
+        `kind: ${sourceStringLiteral(kind)} as const,`,
+        `className: ${sourceStringLiteral(structName)},`,
+        `vfuncName: ${sourceStringLiteral(field.name)},`,
+        `byteOffset: ${byteOffset},`,
+        `argDescriptors: [${argDescriptors}],`,
+        `returnDescriptor: ${returnDescriptor},`,
+    ];
+    return `${key}: ${renderBraced(lines.join("\n"))},`;
+};

package/src/store/gi-store.ts

@@ -0,0 +1,79 @@
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { type CodegenFingerprint, FINGERPRINT_FILENAME } from "../fingerprint.js";
+import { buildManifest, type StoreOptions, subpathExport, writeStore } from "./store-fs.js";
+
+const OVERRIDES_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "..", "..", "overrides");
+
+export type GiStoreOptions = StoreOptions;
+
+export type GiNamespaceInput = {
+    directory: string;
+    rawSource: string;
+};
+
+const overrideFiles = (directory: string): string[] => {
+    const dir = join(OVERRIDES_ROOT, directory);
+    if (!existsSync(dir)) return [];
+    return readdirSync(dir).filter((name) => name.endsWith(".ejs") && name !== "index.ts.ejs");
+};
+
+const barrelSource = (directory: string): string => {
+    const overrideIndex = join(OVERRIDES_ROOT, directory, "index.ts.ejs");
+    if (!existsSync(overrideIndex)) {
+        return `export * from "./${directory}.js";\n`;
+    }
+    return readFileSync(overrideIndex, "utf8");
+};
+
+type CollectedFile = {
+    fileName: string;
+    source: string;
+};
+
+const collectStoreSources = (
+    namespaces: GiNamespaceInput[],
+): { collected: CollectedFile[]; exportsMap: Record<string, unknown> } => {
+    const exportsMap: Record<string, unknown> = {};
+    const collected: CollectedFile[] = [];
+    for (const { directory, rawSource } of namespaces) {
+        collected.push({
+            fileName: `${directory}/${directory}.ts`,
+            source: rawSource,
+        });
+        for (const file of overrideFiles(directory)) {
+            collected.push({
+                fileName: `${directory}/overrides/${file.replace(/\.ejs$/, "")}`,
+                source: readFileSync(join(OVERRIDES_ROOT, directory, file), "utf8"),
+            });
+        }
+        collected.push({
+            fileName: `${directory}/index.ts`,
+            source: barrelSource(directory),
+        });
+        exportsMap[`./${directory}`] = subpathExport(`${directory}/index`);
+    }
+    return { collected, exportsMap };
+};
+
+export const writeGiStore = (
+    options: GiStoreOptions,
+    namespaces: GiNamespaceInput[],
+    fingerprint: CodegenFingerprint,
+): void => {
+    const { collected, exportsMap } = collectStoreSources(namespaces);
+
+    writeStore({
+        storeDir: options.storeDir,
+        linkDir: options.linkDir,
+        files: collected,
+        manifest: buildManifest({
+            name: "@gtkx/gi",
+            version: options.version,
+            exports: exportsMap,
+            peerDependencies: { "@gtkx/runtime": "*" },
+        }),
+        rawFiles: [{ relativePath: FINGERPRINT_FILENAME, content: `${JSON.stringify(fingerprint, null, 2)}\n` }],
+    });
+};

package/src/store/jsx-store.ts

@@ -0,0 +1,27 @@
+import type { JsxNamespaceFile } from "./react/pipeline.js";
+import { buildManifest, type StoreOptions, subpathExport, writeStore } from "./store-fs.js";
+
+export type JsxStoreOptions = StoreOptions;
+
+export const writeJsxStore = (options: JsxStoreOptions, namespaces: JsxNamespaceFile[], metadata: string): void => {
+    const exportsMap: Record<string, unknown> = {
+        "./metadata": subpathExport("metadata"),
+    };
+    const files = [{ fileName: "metadata.ts", source: metadata }];
+    for (const { directory, source } of namespaces) {
+        files.push({ fileName: `${directory}/${directory}.tsx`, source });
+        exportsMap[`./${directory}`] = subpathExport(`${directory}/${directory}`);
+    }
+
+    writeStore({
+        storeDir: options.storeDir,
+        linkDir: options.linkDir,
+        files,
+        manifest: buildManifest({
+            name: "@gtkx/jsx",
+            version: options.version,
+            exports: exportsMap,
+            peerDependencies: { "@gtkx/gi": "*", "@gtkx/react": "*", react: "*" },
+        }),
+    });
+};

package/src/store/react/built-ins.ts

@@ -0,0 +1,260 @@
+import type { Call, ContainerProp, ElementProp } from "@gtkx/config";
+
+export type ElementComponent = { types: string[]; module: string; export: string };
+type ManyMethods = Pick<ContainerProp, "append" | "remove">;
+
+const container = (
+    prop: string,
+    child: string,
+    methods: Omit<ContainerProp, "kind" | "prop" | "child">,
+): ElementProp => ({
+    kind: "container",
+    prop,
+    child,
+    ...methods,
+});
+
+const nullSetter = (method: string): Call => ({ method, args: [{ literal: null }] });
+
+const singleChild = (): ElementProp =>
+    container("children", "GtkWidget", { append: "setChild", remove: nullSetter("setChild") });
+
+const singleContent = (): ElementProp =>
+    container("children", "GtkWidget", { append: "setContent", remove: nullSetter("setContent") });
+
+const boxChildren = (): ElementProp =>
+    container("children", "GtkWidget", {
+        append: "append",
+        remove: "remove",
+        insert: { method: "insertChildAfter", args: ["child", "sibling"] },
+        reorder: { method: "reorderChildAfter", args: ["child", "sibling"] },
+    });
+
+const indexedChildren = (append: string, reorder?: string): ElementProp =>
+    container("children", "GtkWidget", {
+        append,
+        remove: "remove",
+        insert: { method: "insert", args: ["child", "index"] },
+        ...(reorder !== undefined ? { reorder: { method: reorder, args: ["child", "index"] } } : {}),
+    });
+
+const addRemoveChildren = (): ElementProp => container("children", "GtkWidget", { append: "add", remove: "remove" });
+
+const prefixSuffixProps = (): ElementProp[] => [
+    container("prefix", "GtkWidget", { append: "addPrefix" }),
+    container("suffix", "GtkWidget", { append: "addSuffix" }),
+];
+
+const packProps = (): ElementProp[] => [
+    container("start", "GtkWidget", { append: "packStart" }),
+    container("end", "GtkWidget", { append: "packEnd" }),
+];
+
+const autowrapProp = (wrapper: string): ElementProp =>
+    container("children", "GtkWidget", {
+        append: "append",
+        remove: "remove",
+        insert: { method: "insert", args: ["child", "index"] },
+        autowrap: wrapper,
+    });
+
+const forEach = (types: string[], build: () => ElementProp[]): Record<string, ElementProp[]> =>
+    Object.fromEntries(types.map((type) => [type, build()]));
+
+export const BUILT_IN_ELEMENT_COMPONENTS: ElementComponent[] = [
+    { types: ["GtkApplication"], module: "@gtkx/react/internal", export: "createApplicationComponent" },
+    { types: ["GtkWindow"], module: "@gtkx/react/internal", export: "createWindowComponent" },
+    { types: ["AdwDialog"], module: "@gtkx/react/adw", export: "createDialogComponent" },
+];
+
+const CONTROLLER_METHODS = { append: "addController", remove: "removeController" } satisfies ManyMethods;
+const SHORTCUT_METHODS = { append: "addShortcut", remove: "removeShortcut" } satisfies ManyMethods;
+
+const ACTION_METHODS = {
+    append: "addAction",
+    remove: { method: "removeAction", args: [{ prop: "name" }] },
+} satisfies ManyMethods;
+
+const ACTION_GROUP_METHODS = {
+    append: { method: "insertActionGroup", args: [{ prop: "prefix" }, "child"] },
+    remove: { method: "insertActionGroup", args: [{ prop: "prefix" }, { literal: null }] },
+} satisfies ManyMethods;
+
+const SINGLE_CHILD_TYPES = [
+    "AdwBin",
+    "AdwBreakpointBin",
+    "AdwClamp",
+    "AdwClampScrollable",
+    "AdwDialog",
+    "AdwNavigationPage",
+    "AdwSplitButton",
+    "AdwStatusPage",
+    "AdwTabOverview",
+    "AdwToastOverlay",
+    "AdwToggle",
+    "GtkAspectFrame",
+    "GtkButton",
+    "GtkCheckButton",
+    "GtkComboBox",
+    "GtkDragIcon",
+    "GtkExpander",
+    "GtkFlowBoxChild",
+    "GtkFrame",
+    "GtkGraphicsOffload",
+    "GtkListBoxRow",
+    "GtkListHeader",
+    "GtkListItem",
+    "GtkMenuButton",
+    "GtkOverlay",
+    "GtkPopover",
+    "GtkPopoverBin",
+    "GtkRevealer",
+    "GtkScrolledWindow",
+    "GtkSearchBar",
+    "GtkTreeExpander",
+    "GtkViewport",
+    "GtkWindow",
+    "GtkWindowHandle",
+];
+
+const SINGLE_CONTENT_TYPES = [
+    "AdwApplicationWindow",
+    "AdwBottomSheet",
+    "AdwFlap",
+    "AdwNavigationSplitView",
+    "AdwOverlaySplitView",
+    "AdwWindow",
+];
+
+const BOX_TYPES = ["AdwLeaflet", "AdwWrapBox", "GtkBox"];
+
+const ADD_REMOVE_TYPES = [
+    "AdwNavigationView",
+    "AdwPreferencesDialog",
+    "AdwPreferencesGroup",
+    "AdwPreferencesWindow",
+    "AdwSqueezer",
+];
+
+const withBreakpoints = (props: Record<string, ElementProp[]>): Record<string, ElementProp[]> => {
+    for (const type of ["AdwApplicationWindow", "AdwWindow", "AdwDialog"]) {
+        props[type] = [...(props[type] ?? []), container("breakpoints", "AdwBreakpoint", { append: "addBreakpoint" })];
+    }
+    props.AdwBreakpointBin = [
+        ...(props.AdwBreakpointBin ?? []),
+        container("breakpoints", "AdwBreakpoint", { append: "addBreakpoint", remove: "removeBreakpoint" }),
+    ];
+    return props;
+};
+
+export const BUILT_IN_ELEMENT_PROPS: Record<string, ElementProp[]> = withBreakpoints({
+    ...forEach(SINGLE_CHILD_TYPES, () => [singleChild()]),
+    ...forEach(SINGLE_CONTENT_TYPES, () => [singleContent()]),
+    ...forEach(BOX_TYPES, () => [boxChildren()]),
+    ...forEach(ADD_REMOVE_TYPES, () => [addRemoveChildren()]),
+    GtkWidget: [
+        container("controllers", "GtkEventController", CONTROLLER_METHODS),
+        container("layoutManager", "GtkLayoutManager", {
+            append: "setLayoutManager",
+            remove: { method: "setLayoutManager", args: [{ literal: null }] },
+        }),
+        container("actionGroups", "GActionGroup", ACTION_GROUP_METHODS),
+    ],
+    GtkShortcutController: [container("shortcuts", "GtkShortcut", SHORTCUT_METHODS)],
+    GtkTextView: [
+        container("children", "GtkTextBuffer", {
+            append: "setBuffer",
+            remove: { method: "setBuffer", args: [{ literal: null }] },
+        }),
+        container("children", "GtkWidget", { remove: "remove" }),
+    ],
+    GActionMap: [container("actions", "GAction", ACTION_METHODS)],
+    GtkColumnView: [
+        container("children", "GtkColumnViewColumn", {
+            append: "appendColumn",
+            remove: "removeColumn",
+            insert: { method: "insertColumn", args: ["index", "child"] },
+        }),
+    ],
+    AdwShortcutsDialog: [container("children", "AdwShortcutsSection", { append: "add" })],
+    AdwShortcutsSection: [container("children", "AdwShortcutsItem", { append: "add" })],
+    AdwActionRow: prefixSuffixProps(),
+    AdwEntryRow: prefixSuffixProps(),
+    AdwExpanderRow: [
+        ...prefixSuffixProps(),
+        container("rows", "GtkWidget", { append: "addRow" }),
+        container("actions", "GtkWidget", { append: "addAction" }),
+    ],
+    AdwHeaderBar: packProps(),
+    GtkHeaderBar: packProps(),
+    GtkActionBar: packProps(),
+    AdwToolbarView: [
+        container("topBar", "GtkWidget", { append: "addTopBar" }),
+        container("bottomBar", "GtkWidget", { append: "addBottomBar" }),
+        singleContent(),
+    ],
+    AdwCarousel: [indexedChildren("append", "reorder")],
+    AdwPreferencesPage: [indexedChildren("add")],
+    AdwTabView: [
+        container("children", "GtkWidget", {
+            append: "append",
+            insert: { method: "insert", args: ["child", "index"] },
+            reorder: { method: "reorderPage", args: ["adopted", "index"] },
+            remove: { method: "closePage", args: ["adopted"] },
+            adopt: "getPage",
+        }),
+    ],
+    GtkListBox: [autowrapProp("GtkListBoxRow")],
+    GtkFlowBox: [autowrapProp("GtkFlowBoxChild")],
+    GtkStack: [
+        container("children", "GtkWidget", { append: "addChild", remove: "remove", adopt: true }),
+        { kind: "lazy", prop: "visibleChildName", lookup: "getChildByName" },
+    ],
+    AdwViewStack: [
+        container("children", "GtkWidget", { append: "add", remove: "remove", adopt: true }),
+        { kind: "lazy", prop: "visibleChildName", lookup: "getChildByName" },
+    ],
+    GtkNotebook: [
+        container("children", "GtkWidget", {
+            append: { method: "appendPage", args: ["child", { literal: null }] },
+            insert: { method: "insertPage", args: ["child", { literal: null }, "index"] },
+            reorder: { method: "reorderChild", args: ["child", "index"] },
+            remove: "detachTab",
+            adopt: "getPage",
+        }),
+    ],
+    AdwToggleGroup: [
+        container("children", "AdwToggle", { append: "add", remove: "remove" }),
+        { kind: "lazy", prop: "activeName", lookup: "getToggleByName" },
+        { kind: "lazy", prop: "active" },
+    ],
+    GtkDropTarget: [{ kind: "value", prop: "types", call: "setGtypes" }],
+    GtkDrawingArea: [{ kind: "value", prop: "drawFunc", call: "setDrawFunc", after: "queueDraw" }],
+    GtkDragSource: [{ kind: "value", prop: "icon", call: "setIcon" }],
+    GtkEditable: [{ kind: "controlled-text", prop: "text" }],
+    GtkScale: [{ kind: "list", prop: "marks", add: "addMark", clear: "clearMarks" }],
+    GtkCalendar: [{ kind: "list", prop: "markedDays", add: "markDay", clear: "clearMarks" }],
+    GtkLevelBar: [{ kind: "list", prop: "offsets", add: "addOffsetValue", remove: "removeOffsetValue" }],
+    GtkApplication: [
+        container("children", "GtkWindow", { append: "addWindow", remove: "removeWindow" }),
+        {
+            kind: "list",
+            prop: "actionAccels",
+            add: "setAccelsForAction",
+            remove: { method: "setAccelsForAction", args: [{ field: "detailedActionName" }, { literal: [] }] },
+        },
+    ],
+    GtkAboutDialog: [{ kind: "list", prop: "creditSections", add: "addCreditSection" }],
+    AdwAlertDialog: [
+        {
+            kind: "list",
+            prop: "responses",
+            add: [
+                "addResponse",
+                { method: "setResponseAppearance", args: [{ field: "id" }, { field: "appearance", or: 0 }] },
+                { method: "setResponseEnabled", args: [{ field: "id" }, { field: "enabled", or: true }] },
+            ],
+            remove: "removeResponse",
+        },
+    ],
+});

package/src/store/react/element-components.ts

@@ -0,0 +1,138 @@
+import { sourceStringLiteral } from "@gtkx/utils";
+import type { Library } from "../../gir/library.js";
+import type { GirNamespace } from "../../gir/namespace.js";
+import { renderJsDoc } from "../../writer/doc.js";
+import type { ImportsBuilder } from "../../writer/imports.js";
+import { BUILT_IN_ELEMENT_COMPONENTS, type ElementComponent } from "./built-ins.js";
+import type { ElementPropTypegen, LazyElementSpec } from "./element-prop-types.js";
+import { ancestorGlibNames, type GlibNamedClass } from "./intrinsic-elements.js";
+
+type TextNodeElement = {
+    flatName: string;
+    kind: string;
+    propsType: string;
+    parent: string;
+};
+
+const TEXT_NODE_ELEMENTS: TextNodeElement[] = [
+    { flatName: "GtkTextAnchor", kind: "text-anchor", propsType: "TextAnchorProps", parent: "GtkTextView" },
+    { flatName: "GtkTextPaintable", kind: "text-paintable", propsType: "TextPaintableProps", parent: "GtkTextView" },
+];
+
+type ExportCollector = {
+    imports: ImportsBuilder;
+    exportedNames: Set<string>;
+    exportLines: string[];
+};
+
+export const generateElementComponentsSection = (
+    targetNamespace: GirNamespace,
+    library: Library,
+    options: {
+        imports: ImportsBuilder;
+        typegen: ElementPropTypegen;
+        intrinsicElements: GlibNamedClass[];
+        intrinsicElementByGlibName: Map<string, GlibNamedClass>;
+    },
+): { source: string; exportedNames: Set<string> } => {
+    const collector: ExportCollector = { imports: options.imports, exportedNames: new Set(), exportLines: [] };
+
+    const inTargetNamespace = (parentGlibName: string): boolean =>
+        options.intrinsicElementByGlibName.get(parentGlibName)?.namespace.name === targetNamespace.name;
+
+    const lazyElements = options.typegen.lazyElementExports(targetNamespace.name);
+    const textNodes = TEXT_NODE_ELEMENTS.filter((node) => inTargetNamespace(node.parent));
+    const virtualNames = new Set([
+        ...lazyElements.map((entry) => entry.element),
+        ...textNodes.map((node) => node.flatName),
+    ]);
+
+    collectCandidateExports(collector, {
+        targetNamespace,
+        library,
+        virtualNames,
+        intrinsicElements: options.intrinsicElements,
+    });
+    collectLazyElementExports(collector, lazyElements);
+    collectTextNodeExports(collector, textNodes);
+
+    if (textNodes.length > 0) {
+        collector.imports.addNamed("@gtkx/react/internal", "WRAPPER_NODE_ELEMENT", false);
+    }
+    const source = collector.exportLines.join("\n\n");
+    return { source, exportedNames: collector.exportedNames };
+};
+
+type CandidateExportOptions = {
+    targetNamespace: GirNamespace;
+    library: Library;
+    virtualNames: Set<string>;
+    intrinsicElements: GlibNamedClass[];
+};
+
+const collectCandidateExports = (
+    collector: ExportCollector,
+    { targetNamespace, library, virtualNames, intrinsicElements }: CandidateExportOptions,
+): void => {
+    for (const candidate of intrinsicElements) {
+        if (candidate.namespace.name !== targetNamespace.name) continue;
+        if (virtualNames.has(candidate.glibName)) continue;
+        const line = renderCandidateExport(candidate, library, collector.imports);
+        if (line === null) continue;
+        collector.exportLines.push(line);
+        collector.exportedNames.add(candidate.glibName);
+    }
+};
+
+const collectLazyElementExports = (collector: ExportCollector, lazyElements: LazyElementSpec[]): void => {
+    for (const spec of lazyElements) {
+        collector.imports.addNamed("@gtkx/react/internal", "createLazyElementComponent", false);
+        collector.imports.addNamed("react", "ReactNode", true);
+        collector.exportLines.push(renderLazyElementExport(spec));
+        collector.exportedNames.add(spec.element);
+    }
+};
+
+const collectTextNodeExports = (collector: ExportCollector, textNodes: TextNodeElement[]): void => {
+    for (const node of textNodes) {
+        collector.imports.addNamed("@gtkx/react", node.propsType, true);
+        collector.imports.addNamed("react", "ReactNode", true);
+        collector.exportLines.push(renderTextNodeExport(node));
+        collector.exportedNames.add(node.flatName);
+    }
+};
+
+const renderLazyElementExport = (spec: LazyElementSpec): string => {
+    const factory = `createLazyElementComponent<${spec.typeName}>()`;
+    const component = `export const ${spec.element}: (props: ${spec.typeName}) => ReactNode = ${factory};`;
+    return `${spec.typeSource}\n\n${component}`;
+};
+
+const renderTextNodeExport = (node: TextNodeElement): string =>
+    `export const ${node.flatName} = (props: ${node.propsType}): ReactNode => (\n    <WRAPPER_NODE_ELEMENT kind=${sourceStringLiteral(node.kind)} {...props} />\n);`;
+
+const renderCandidateExport = (candidate: GlibNamedClass, library: Library, imports: ImportsBuilder): string | null => {
+    const { glibName, klass, namespace } = candidate;
+    const ancestry = new Set(ancestorGlibNames(klass, namespace, library));
+    const wrapper = resolveElementComponent(ancestry);
+    imports.addNamed("@gtkx/react/internal", "createElementComponent", false);
+    imports.addNamed("react", "ReactNode", true);
+    if (wrapper !== undefined) imports.addNamed(wrapper.module, wrapper.export, false);
+    return `${renderJsDoc(klass.doc)}${renderElementComponentExport(glibName, wrapper)}`;
+};
+
+const resolveElementComponent = (types: Set<string>): ElementComponent | undefined => {
+    for (const entry of BUILT_IN_ELEMENT_COMPONENTS) {
+        if (entry.types.some((type) => types.has(type))) return entry;
+    }
+    return undefined;
+};
+
+const renderElementComponentExport = (glibName: string, wrapper: ElementComponent | undefined): string => {
+    const propsType = `${glibName}Props`;
+    if (wrapper === undefined) {
+        return `export const ${glibName}: (props: ${propsType}) => ReactNode = createElementComponent(${sourceStringLiteral(glibName)});`;
+    }
+    const annotation = `(props: ${propsType}) => ReactNode`;
+    return `export const ${glibName}: ${annotation} = ${wrapper.export}(createElementComponent(${sourceStringLiteral(glibName)}));`;
+};