@gjsify/adwaita-web 0.56.0 → 0.57.0

package/src/gobject-elements.ts

@@ -0,0 +1,172 @@
+// `connect` / `disconnect` / `emit` / `notify` on the elements a template builds (ADR 0096 § 3).
+//
+// A registered class gets these from the core. The widgets it holds are plain custom elements,
+// which talk in DOM events, so a template instance that binds to one or connects a handler needs
+// the same four methods on it — over the events the element DECLARES in `static signals`, never
+// over a name it merely might dispatch.
+//
+// NOTIFY ON AN ELEMENT THAT IS NOT CONNECTED (the gap ADR 0093 Progress row 4 names, measured
+// in `gobject-door.spec.ts`): an element dispatches `notify::<property>` from its
+// `attributeChangedCallback`, which returns early until the element has been connected once. The
+// children of a template are built in the constructor and attached on the first
+// `connectedCallback`, so every write to them in between is silent, and a `bidirectional` bind
+// never hears its target. {@link ensureNotifying} closes it per instance: the property's own
+// setter is wrapped, and a change the element did not announce itself is announced here. When
+// the element does announce, nothing is added, so a connected element still notifies once.
+
+import { attributeOf, propertyOf } from '@gjsify/adwaita-core/tags';
+
+import { dispatchedSignalsOf } from './signals.js';
+
+type Handler = (emitter: HTMLElement, ...args: unknown[]) => unknown;
+
+/** Events {@link dispatchElement} created, whose `detail` is the argument list of an `emit`. */
+const EMITTED = new WeakSet<Event>();
+const NOTIFYING = new WeakMap<Element, Set<string>>();
+const WITH_API = new WeakSet<Element>();
+let nextHandlerId = 0;
+
+/** Whether `el` got its four methods from {@link installElementApi} (a registered class has the core's). */
+export function hasElementApi(el: object): boolean {
+    return WITH_API.has(el as Element);
+}
+
+/** The DOM event `signal` arrives as on `el`, or a refusal naming what the element does declare. */
+function eventOf(el: Element, signal: string): string {
+    const declared = dispatchedSignalsOf(el);
+    const event =
+        declared[signal] ??
+        (signal.startsWith('notify::')
+            ? declared[`notify::${attributeOf(signal.slice('notify::'.length))}`]
+            : undefined);
+    if (event === undefined) {
+        throw new Error(
+            `<${el.localName}> declares no signal '${signal}'. It dispatches: ${Object.keys(declared).join(', ') || 'none'}.`,
+        );
+    }
+    return event;
+}
+
+/** The nearest descriptor of `member` above `el`'s own properties. */
+function inheritedDescriptor(el: object, member: string): PropertyDescriptor | undefined {
+    for (
+        let at = Object.getPrototypeOf(el) as object | null;
+        at !== null;
+        at = Object.getPrototypeOf(at) as object | null
+    ) {
+        const descriptor = Object.getOwnPropertyDescriptor(at, member);
+        if (descriptor !== undefined) return descriptor;
+    }
+    return undefined;
+}
+
+function notifyElement(el: HTMLElement, name: string): void {
+    const member = propertyOf(name);
+    el.dispatchEvent(
+        new CustomEvent(eventOf(el, `notify::${name}`), {
+            bubbles: true,
+            detail: { [member]: (el as unknown as Record<string, unknown>)[member] },
+        }),
+    );
+}
+
+/** Makes every change of `property` on `el` reach a `notify::<property>` listener, connected or not. */
+export function ensureNotifying(el: HTMLElement, property: string): void {
+    const member = propertyOf(property);
+    const patched = NOTIFYING.get(el) ?? new Set<string>();
+    if (patched.has(member)) return;
+    patched.add(member);
+    NOTIFYING.set(el, patched);
+    if (Object.getOwnPropertyDescriptor(el, member) !== undefined) return;
+    const inherited = inheritedDescriptor(el, member);
+    if (inherited?.get === undefined || inherited.set === undefined) return;
+    const { get, set } = inherited;
+    const event = eventOf(el, `notify::${property}`);
+    Object.defineProperty(el, member, {
+        configurable: true,
+        enumerable: false,
+        get() {
+            return get.call(this);
+        },
+        set(this: HTMLElement, value: unknown) {
+            const before = get.call(this);
+            let announced = false;
+            const mark = (domEvent: Event) => {
+                if (domEvent.target === this) announced = true;
+            };
+            this.addEventListener(event, mark);
+            try {
+                set.call(this, value);
+            } finally {
+                this.removeEventListener(event, mark);
+            }
+            if (!announced && get.call(this) !== before) notifyElement(this, property);
+        },
+    });
+}
+
+/** Calls `handler(el, ...args)` for `signal`; returns the disconnect. */
+export function listenElement(el: HTMLElement, signal: string, handler: Handler): () => void {
+    const event = eventOf(el, signal);
+    const notification = signal.startsWith('notify::');
+    if (notification) ensureNotifying(el, signal.slice('notify::'.length));
+    const listener = (domEvent: Event) => {
+        // A notification bubbles, and a parent must not hear its child's property as its own.
+        if (notification && domEvent.target !== el) return;
+        handler(el, ...(EMITTED.has(domEvent) ? ((domEvent as CustomEvent).detail as unknown[]) : []));
+    };
+    el.addEventListener(event, listener);
+    return () => el.removeEventListener(event, listener);
+}
+
+export function dispatchElement(el: HTMLElement, signal: string, args: readonly unknown[]): void {
+    const event = eventOf(el, signal);
+    const domEvent = new CustomEvent(event, { detail: args, bubbles: event.startsWith('notify::') });
+    EMITTED.add(domEvent);
+    el.dispatchEvent(domEvent);
+}
+
+/** Gives `el` the instance API of a registered class, over the events it declares. */
+export function installElementApi(el: HTMLElement): void {
+    // A registered class already has the core's four methods on its prototype.
+    if (typeof (el as unknown as Record<string, unknown>).connect === 'function') return;
+    WITH_API.add(el);
+    const connections = new Map<number, () => void>();
+    const define = (name: string, value: unknown) =>
+        Object.defineProperty(el, name, { value, configurable: true, writable: true, enumerable: false });
+    define('connect', (signal: string, handler: Handler): number => {
+        const unlisten = listenElement(el, signal, handler);
+        const id = ++nextHandlerId;
+        connections.set(id, unlisten);
+        return id;
+    });
+    define('disconnect', (id: number): void => {
+        const unlisten = connections.get(id);
+        if (unlisten === undefined) throw new Error(`No handler with id ${id} is connected to <${el.localName}>`);
+        connections.delete(id);
+        unlisten();
+    });
+    define('emit', (signal: string, ...args: unknown[]): void => dispatchElement(el, signal, args));
+    define('notify', (name: string): void => notifyElement(el, name));
+}
+
+const API_MEMBERS = new Set(['connect', 'disconnect', 'emit', 'notify']);
+
+/**
+ * The end of a bind the core's engine drives. An element speaks camelCase members where a `.blp`
+ * says `dash-name`, so a built element is wrapped to translate the name; a registered class
+ * already has the core's accessors and aliases and is returned as it is.
+ */
+export function endpointOf(el: HTMLElement): HTMLElement {
+    if (!hasElementApi(el)) return el;
+    return new Proxy(el, {
+        get(target, key) {
+            if (typeof key !== 'string' || API_MEMBERS.has(key)) return Reflect.get(target, key, target);
+            const value = Reflect.get(target, propertyOf(key), target);
+            return typeof value === 'function' ? value.bind(target) : value;
+        },
+        set(target, key, value) {
+            return Reflect.set(target, typeof key === 'string' ? propertyOf(key) : key, value, target);
+        },
+    });
+}

package/src/gtksource/gtk-source-view.spec.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from '@gjsify/unit';
+import {
+    GTKSOURCE_BUFFER_VECTORS,
+    GTKSOURCE_VIEW_DEFAULT_VECTORS,
+    GTKSOURCE_VIEW_SURFACE_VECTORS,
+    type GtkSourceViewSurfaceLike,
+    type GtkSourceBufferLike,
+} from '@gjsify/gtksource-core/conformance';
+
+import * as Gtk from '../namespace/gtk.js';
+import * as GtkSource from '../namespace/gtksource.js';
+
+import './gtk-source-view.js';
+import { GtkSourceView } from './gtk-source-view.js';
+
+export const GtkSourceViewTest = async () => {
+    await describe('<gtk-source-view>: GtkSource.View', async () => {
+        for (const vector of GTKSOURCE_BUFFER_VECTORS) {
+            await it(`GtkSource.Buffer: ${vector.rule}`, () => {
+                expect(vector.observe(GtkSource as unknown as GtkSourceBufferLike)).toStrictEqual(vector.shows);
+            });
+        }
+
+        for (const vector of GTKSOURCE_VIEW_DEFAULT_VECTORS) {
+            await it(`${vector.property} defaults to ${vector.shows}`, () => {
+                const view = new GtkSourceView();
+                expect((view as unknown as Record<string, unknown>)[vector.member]).toStrictEqual(vector.shows);
+            });
+        }
+
+        for (const vector of GTKSOURCE_VIEW_SURFACE_VECTORS) {
+            await it(`surface: ${vector.rule}`, () => {
+                expect(vector.observe({ Gtk, GtkSource } as unknown as GtkSourceViewSurfaceLike)).toStrictEqual(
+                    vector.shows,
+                );
+            });
+        }
+
+        await it('refuses get_gutter by name until slice 6', () => {
+            expect(() => new GtkSourceView().get_gutter(Gtk.TextWindowType.LEFT)).toThrow(/get_gutter/);
+        });
+
+        await it('writes through attributes with GTK semantics', () => {
+            const view = document.createElement('gtk-source-view') as GtkSourceView;
+            view.setAttribute('show-line-numbers', 'true');
+            view.setAttribute('indent-width', '4');
+            view.setAttribute('left-margin', '12');
+            expect(view.showLineNumbers).toBe(true);
+            expect(view.indentWidth).toBe(4);
+            expect(view.leftMargin).toBe(12);
+        });
+
+        await it('refuses a value that is not a boolean, by name', () => {
+            const view = new GtkSourceView();
+            expect(() => (view.editable = 'maybe')).toThrow(/GtkSource.View.editable/);
+        });
+
+        await it('shows the buffer text in the textarea and takes a user edit back into the buffer', () => {
+            const view = document.createElement('gtk-source-view') as GtkSourceView;
+            document.body.append(view);
+            view.buffer.text = 'LDA #$01';
+            expect(view.textarea.value).toBe('LDA #$01');
+            view.textarea.value = 'LDA #$02';
+            view.textarea.dispatchEvent(new Event('input'));
+            expect(view.buffer.text).toBe('LDA #$02');
+            view.remove();
+        });
+    });
+};

package/src/gtksource/gtk-source-view.ts

@@ -0,0 +1,379 @@
+// <gtk-source-view> — `GtkSource.View`, built on `@gjsify/gtksource-core`.
+//
+// WHY NOT <adw-source-view>. That element is CodeMirror with its own grammar; this one reads the
+// same `.lang` and style-scheme files GtkSourceView does, through the same `EditorSession` the
+// Android port runs, so GNOME, Android and the web have one source of truth for highlighting.
+//
+// THE SURFACE IS A TRUE SUBSET of GtkSource.View: the names and semantics below are GtkSourceView's,
+// and what is absent is absent. The editing itself is the browser's (see `web-editor-driver.ts`).
+//
+// IN THIS SLICE: `buffer`, `auto-indent`, `indent-width` (held and read back, as on Android),
+// `show-line-numbers`, `highlight-current-line`, `monospace`, `editable`, `cursor-visible`, the four
+// margins, `connect`/`disconnect`, the GJS snake_case accessors, `vadjustment`/`hadjustment`,
+// `set_direction`, `get_first_child`/`get_next_sibling`. Not yet: gutters (`get_gutter` throws).
+//
+// Reference: GtkSourceView 5 gtksourceview.c, upstream GNOME/gtksourceview (properties and defaults)
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+import { adwaitaColorScheme, GtkAdjustment, onAdwaitaColorSchemeChanged } from '@gjsify/adwaita-core';
+import type { Buffer } from '@gjsify/gtksource-core';
+import { EditorSession, toBoolean, toNumber } from '@gjsify/gtksource-core';
+
+import { WebEditorDriver } from './web-editor-driver.js';
+
+const STYLE_ID = 'gjsify-gtk-source-view-style';
+
+const STYLE = `
+gtk-source-view {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 12em;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  background: var(--gsv-bg, var(--view-bg-color));
+  color: var(--gsv-fg, var(--view-fg-color));
+  font: inherit;
+  --gsv-line-height: 1.4;
+}
+gtk-source-view.monospace { font-family: var(--monospace-font-family, ui-monospace, monospace); }
+gtk-source-view .gsv-gutter {
+  display: none;
+  flex: none;
+  overflow: hidden;
+  box-sizing: content-box;
+  padding: var(--gsv-margin-top, 0px) var(--gsv-gutter-padding, 8px) 0;
+  width: var(--gsv-gutter-width, 2ch);
+  text-align: end;
+  line-height: var(--gsv-line-height);
+  color: var(--gsv-number-fg);
+  background: var(--gsv-number-bg);
+  user-select: none;
+}
+gtk-source-view.show-line-numbers .gsv-gutter { display: block; }
+gtk-source-view .gsv-number.current { color: var(--gsv-current-number-fg); background: var(--gsv-current-number-bg); }
+gtk-source-view .gsv-stage { position: relative; flex: 1 1 auto; min-width: 0; }
+gtk-source-view .gsv-backdrop,
+gtk-source-view .gsv-area {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  border: 0;
+  box-sizing: border-box;
+  padding: var(--gsv-margin-top, 0px) var(--gsv-margin-right, 0px) var(--gsv-margin-bottom, 0px) var(--gsv-margin-left, 0px);
+  font: inherit;
+  line-height: var(--gsv-line-height);
+  white-space: pre;
+  tab-size: 8;
+  letter-spacing: normal;
+}
+gtk-source-view .gsv-backdrop { overflow: hidden; pointer-events: none; }
+gtk-source-view .gsv-line { min-height: calc(1em * var(--gsv-line-height)); }
+gtk-source-view .gsv-line.current { background: var(--gsv-current-line); }
+gtk-source-view .gsv-area {
+  resize: none;
+  overflow: auto;
+  outline: none;
+  background: transparent;
+  color: transparent;
+  caret-color: var(--gsv-fg, currentColor);
+}
+gtk-source-view.cursor-hidden .gsv-area { caret-color: transparent; }
+gtk-source-view .gsv-area::selection { background: var(--gsv-selection); color: transparent; }
+`;
+
+function ensureStyleInjected(): void {
+    if (typeof document === 'undefined' || document.getElementById(STYLE_ID) !== null) return;
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = STYLE;
+    document.head.appendChild(style);
+}
+
+type Coerce = (value: unknown, name: string) => boolean | number;
+
+/** attribute → [property, default, coercion] */
+const ATTRIBUTES: Readonly<Record<string, readonly [string, boolean | number, Coerce]>> = {
+    'auto-indent': ['autoIndent', false, toBoolean],
+    'indent-width': ['indentWidth', -1, toNumber],
+    'show-line-numbers': ['showLineNumbers', false, toBoolean],
+    'highlight-current-line': ['highlightCurrentLine', false, toBoolean],
+    monospace: ['monospace', false, toBoolean],
+    editable: ['editable', true, toBoolean],
+    'cursor-visible': ['cursorVisible', true, toBoolean],
+    'left-margin': ['leftMargin', 0, toNumber],
+    'right-margin': ['rightMargin', 0, toNumber],
+    'top-margin': ['topMargin', 0, toNumber],
+    'bottom-margin': ['bottomMargin', 0, toNumber],
+};
+
+const OBSERVED_ATTRIBUTES = [
+    'auto-indent',
+    'indent-width',
+    'show-line-numbers',
+    'highlight-current-line',
+    'monospace',
+    'editable',
+    'cursor-visible',
+    'left-margin',
+    'right-margin',
+    'top-margin',
+    'bottom-margin',
+];
+
+export class GtkSourceView extends HTMLElement {
+    static get observedAttributes(): string[] {
+        return OBSERVED_ATTRIBUTES;
+    }
+
+    private readonly session: EditorSession;
+    private readonly driver: WebEditorDriver;
+    private unsubscribe: (() => void) | null = null;
+    private built = false;
+    private readonly gutter = document.createElement('div');
+    private readonly backdrop = document.createElement('div');
+    private readonly area = document.createElement('textarea');
+    private readonly vadj = new GtkAdjustment();
+    private readonly hadj = new GtkAdjustment();
+    private direction = 1;
+
+    constructor() {
+        super();
+        this.gutter.className = 'gsv-gutter';
+        this.backdrop.className = 'gsv-backdrop';
+        this.area.className = 'gsv-area';
+        this.area.wrap = 'off';
+        this.area.spellcheck = false;
+        this.area.autocapitalize = 'off';
+        this.area.autocomplete = 'off';
+        this.driver = new WebEditorDriver({
+            root: this,
+            area: this.area,
+            backdrop: this.backdrop,
+            gutter: this.gutter,
+        });
+        this.session = new EditorSession(this.driver, undefined, adwaitaColorScheme());
+    }
+
+    private syncAdjustments(): void {
+        const { area } = this;
+        this.vadj.configure(area.scrollTop, 0, area.scrollHeight, 20, area.clientHeight, area.clientHeight);
+        this.hadj.configure(area.scrollLeft, 0, area.scrollWidth, 20, area.clientWidth, area.clientWidth);
+    }
+
+    private readonly onAreaScroll = (): void => this.syncAdjustments();
+
+    connectedCallback(): void {
+        ensureStyleInjected();
+        this.area.addEventListener('scroll', this.onAreaScroll);
+        if (!this.built) {
+            this.built = true;
+            const stage = document.createElement('div');
+            stage.className = 'gsv-stage';
+            stage.append(this.backdrop, this.area);
+            this.append(this.gutter, stage);
+        }
+        this.driver.attach();
+        this.unsubscribe = onAdwaitaColorSchemeChanged(() => this.session.setColorScheme(adwaitaColorScheme()));
+        this.session.setColorScheme(adwaitaColorScheme());
+    }
+
+    disconnectedCallback(): void {
+        this.area.removeEventListener('scroll', this.onAreaScroll);
+        this.unsubscribe?.();
+        this.unsubscribe = null;
+        this.driver.detach();
+    }
+
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
+        const [property, fallback, coerce] = ATTRIBUTES[name];
+        // Presence is true for a boolean written as a bare attribute (`toggleAttribute`).
+        const next =
+            value === null
+                ? fallback
+                : value === '' && typeof fallback === 'boolean'
+                  ? true
+                  : coerce(value, `GtkSource.View.${property}`);
+        (this as unknown as Record<string, unknown>)[property] = next;
+    }
+
+    /** `GtkSource.View:buffer`. */
+    get buffer(): Buffer {
+        return this.session.buffer;
+    }
+    set buffer(value: Buffer) {
+        this.session.buffer = value;
+    }
+
+    get autoIndent(): boolean {
+        return this.session.autoIndent;
+    }
+    set autoIndent(value: boolean | string) {
+        this.session.autoIndent = toBoolean(value, 'GtkSource.View.autoIndent');
+    }
+
+    /** Held and read back; a textarea has no indent step to apply it to (ADR 0094). */
+    get indentWidth(): number {
+        return this.session.indentWidth;
+    }
+    set indentWidth(value: number | string) {
+        this.session.indentWidth = toNumber(value, 'GtkSource.View.indentWidth');
+    }
+
+    get showLineNumbers(): boolean {
+        return this.session.showLineNumbers;
+    }
+    set showLineNumbers(value: boolean | string) {
+        this.session.showLineNumbers = toBoolean(value, 'GtkSource.View.showLineNumbers');
+    }
+
+    get highlightCurrentLine(): boolean {
+        return this.session.highlightCurrentLine;
+    }
+    set highlightCurrentLine(value: boolean | string) {
+        this.session.highlightCurrentLine = toBoolean(value, 'GtkSource.View.highlightCurrentLine');
+    }
+
+    get monospace(): boolean {
+        return this.session.monospace;
+    }
+    set monospace(value: boolean | string) {
+        this.session.monospace = toBoolean(value, 'GtkSource.View.monospace');
+    }
+
+    get editable(): boolean {
+        return this.session.editable;
+    }
+    set editable(value: boolean | string) {
+        this.session.editable = toBoolean(value, 'GtkSource.View.editable');
+    }
+
+    /** `GtkTextView:cursor-visible` — whether the insertion cursor is drawn; TRUE by default. */
+    get cursorVisible(): boolean {
+        return this.session.cursorVisible;
+    }
+    set cursorVisible(value: boolean | string) {
+        this.session.cursorVisible = toBoolean(value, 'GtkSource.View.cursorVisible');
+    }
+
+    // The GJS snake_case names of the same properties.
+    get cursor_visible(): boolean {
+        return this.cursorVisible;
+    }
+    set cursor_visible(value: boolean) {
+        this.cursorVisible = value;
+    }
+    get_cursor_visible(): boolean {
+        return this.cursorVisible;
+    }
+    set_cursor_visible(value: boolean): void {
+        this.cursorVisible = value;
+    }
+    get_editable(): boolean {
+        return this.editable;
+    }
+    set_editable(value: boolean): void {
+        this.editable = value;
+    }
+    get highlight_current_line(): boolean {
+        return this.highlightCurrentLine;
+    }
+    set highlight_current_line(value: boolean) {
+        this.highlightCurrentLine = value;
+    }
+    get show_line_numbers(): boolean {
+        return this.showLineNumbers;
+    }
+    set show_line_numbers(value: boolean) {
+        this.showLineNumbers = value;
+    }
+
+    /** `GtkScrollable:vadjustment` — one stable adjustment that follows the textarea's scroll. */
+    get vadjustment(): GtkAdjustment {
+        return this.vadj;
+    }
+    get hadjustment(): GtkAdjustment {
+        return this.hadj;
+    }
+    get_vadjustment(): GtkAdjustment {
+        return this.vadj;
+    }
+    get_hadjustment(): GtkAdjustment {
+        return this.hadj;
+    }
+
+    /** `gtk_widget_set_direction`: held, and mirrored onto `dir` for LTR and RTL. */
+    set_direction(direction: number): void {
+        if (![0, 1, 2].includes(direction)) {
+            throw new TypeError(`${direction} is not a valid value for enum argument dir`);
+        }
+        this.direction = direction;
+        if (direction === 0) this.removeAttribute('dir');
+        else this.dir = direction === 2 ? 'rtl' : 'ltr';
+    }
+    get_direction(): number {
+        return this.direction;
+    }
+
+    /** A view has no widget children of its own here: its parts are the browser's. */
+    get_first_child(): null {
+        return null;
+    }
+    get_next_sibling(): Element | null {
+        return this.nextElementSibling;
+    }
+    get_parent(): Element | null {
+        return this.parentElement;
+    }
+
+    /** Gutters are slice 6 (ADR 0094). */
+    get_gutter(_window_type: number): never {
+        throw new Error('GtkSource.View.get_gutter is not implemented');
+    }
+
+    get leftMargin(): number {
+        return this.session.leftMargin;
+    }
+    set leftMargin(value: number | string) {
+        this.session.leftMargin = toNumber(value, 'GtkSource.View.leftMargin');
+    }
+
+    get rightMargin(): number {
+        return this.session.rightMargin;
+    }
+    set rightMargin(value: number | string) {
+        this.session.rightMargin = toNumber(value, 'GtkSource.View.rightMargin');
+    }
+
+    get topMargin(): number {
+        return this.session.topMargin;
+    }
+    set topMargin(value: number | string) {
+        this.session.topMargin = toNumber(value, 'GtkSource.View.topMargin');
+    }
+
+    get bottomMargin(): number {
+        return this.session.bottomMargin;
+    }
+    set bottomMargin(value: number | string) {
+        this.session.bottomMargin = toNumber(value, 'GtkSource.View.bottomMargin');
+    }
+
+    /** GJS `connect(name, cb) → id`; the handler's first argument is this view. */
+    connect(name: string, callback: (self: GtkSourceView, ...args: never[]) => void): number {
+        return this.session.connect(name, ((_session: unknown, ...args: never[]) => callback(this, ...args)) as never);
+    }
+
+    disconnect(id: number): void {
+        this.session.disconnect(id);
+    }
+
+    /** The inner textarea, for focus and tests. */
+    get textarea(): HTMLTextAreaElement {
+        return this.area;
+    }
+}
+
+customElements.define('gtk-source-view', GtkSourceView);