@singapore-editor/lsp-plugin 0.1.1

package/dist/completion.js

@@ -0,0 +1,609 @@
+import { rangeAroundOffset, textReadSnapshotOf } from "./sourceText.js";
+import { fuzzyMatch, looseFuzzyMatch } from "./fuzzyMatch.js";
+import { lspPositionToOffsetInSnapshot } from "@singapore-editor/lsp";
+import { createEditorCapabilityToken, parseSnippet, snippetInitialSelection } from "@singapore-editor/core/extensions";
+import { createAnchoredSurface } from "@singapore-editor/plugin-ui/anchored-surface";
+//#region src/completion.ts
+var LANGUAGE_SERVER_COMPLETION_EDIT_FEATURE_ID = "editor.lsp-plugin.completion-edit";
+var COMPLETION_REQUEST_DEBOUNCE_MS = 80;
+var LANGUAGE_SERVER_COMPLETION_EDIT_FEATURE = createEditorCapabilityToken(LANGUAGE_SERVER_COMPLETION_EDIT_FEATURE_ID);
+var COMPLETION_WIDGET_GAP_PX = 4;
+var COMPLETION_WIDGET_WIDTH_PX = 320;
+var COMPLETION_WIDGET_MAX_HEIGHT_PX = 280;
+var COMPLETION_WIDGET_MARGIN_PX = 12;
+var COMPLETION_WIDGET_CLASS_NAMESPACE = "lsp-plugin";
+var COMPLETION_TRIGGER_CHARACTERS = /* @__PURE__ */ new Set([
+	".",
+	"\"",
+	"'",
+	"`",
+	"/",
+	"@",
+	"<",
+	"#"
+]);
+var COMPLETION_THEME_VARIABLES = [
+	"--editor-background",
+	"--editor-popup-background",
+	"--editor-foreground",
+	"--editor-caret-color"
+];
+function createCompletionWidgetController(options) {
+	const classNames = completionWidgetClassNames(options.classNamespace);
+	const element = createCompletionWidgetElement(options.document, classNames);
+	options.document.body.append(element);
+	const surface = createAnchoredSurface({
+		element,
+		anchorClassName: `${classNames.root}-anchor`,
+		preferredPlacement: "bottom",
+		alignment: "start",
+		gapPx: COMPLETION_WIDGET_GAP_PX,
+		viewportMarginPx: COMPLETION_WIDGET_MARGIN_PX,
+		maxHeightPx: COMPLETION_WIDGET_MAX_HEIGHT_PX
+	});
+	let items = [];
+	let selectedIndex = 0;
+	let disposed = false;
+	const render = () => {
+		element.replaceChildren();
+		for (let index = 0; index < items.length; index += 1) element.append(completionRowElement(element.ownerDocument, items[index], index, classNames));
+		syncSelectedRows(element, selectedIndex, classNames);
+	};
+	const show = (showOptions) => {
+		items = showOptions.items;
+		selectedIndex = clampIndex(showOptions.selectedIndex ?? 0, items.length);
+		syncEditorThemeVariables(element, options.themeSource);
+		render();
+		element.hidden = items.length === 0;
+		if (element.hidden) surface.release();
+		else surface.place(showOptions.anchor);
+	};
+	const reanchor = (anchor) => {
+		if (element.hidden) return;
+		surface.place(anchor);
+	};
+	const hide = () => {
+		element.hidden = true;
+		surface.release();
+		element.replaceChildren();
+		items = [];
+		selectedIndex = 0;
+	};
+	const moveSelection = (delta) => {
+		if (items.length === 0) return;
+		selectedIndex = wrapIndex(selectedIndex + delta, items.length);
+		syncSelectedRows(element, selectedIndex, classNames);
+	};
+	const selectedItem = () => items[selectedIndex] ?? null;
+	const handlePointerDown = (event) => {
+		const row = completionRowTarget(event.target, classNames);
+		if (!row) return;
+		event.preventDefault();
+		event.stopPropagation();
+		selectedIndex = rowIndex(row);
+		syncSelectedRows(element, selectedIndex, classNames);
+		options.onSelect(selectedIndex);
+	};
+	element.addEventListener("pointerdown", handlePointerDown);
+	const dispose = () => {
+		if (disposed) return;
+		disposed = true;
+		element.removeEventListener("pointerdown", handlePointerDown);
+		surface.dispose();
+		element.remove();
+	};
+	return {
+		show,
+		reanchor,
+		hide,
+		isVisible: () => !element.hidden,
+		containsTarget: (target) => target instanceof Node && element.contains(target),
+		moveSelection,
+		selectedItem,
+		dispose
+	};
+}
+function completionListResult(result) {
+	if (!result) return {
+		items: [],
+		isIncomplete: false
+	};
+	if (isCompletionList(result)) return {
+		items: result.items ?? [],
+		isIncomplete: result.isIncomplete === true
+	};
+	return {
+		items: result,
+		isIncomplete: false
+	};
+}
+function completionTriggerFromChange(change) {
+	if (!change || change.kind !== "edit") return null;
+	if (change.edits.length !== 1) return null;
+	const edit = change.edits[0];
+	if (!edit) return null;
+	const character = typedCharacter(edit);
+	if (!character) return null;
+	if (COMPLETION_TRIGGER_CHARACTERS.has(character)) return {
+		triggerKind: 2,
+		triggerCharacter: character
+	};
+	if (isIdentifierCharacter(character)) return { triggerKind: 1 };
+	return null;
+}
+/**
+* The character the user typed, out of an edit that may have written more than it.
+*
+* A delimiter that closes itself arrives as the pair in a single insertion with the caret left
+* between the halves — which is exactly the keystroke a path or a member list is wanted for, so
+* reading only the one-character edits would leave the quote triggers unreachable while the editor
+* completes them. An insertion of one trigger character twice over is the whole of that shape;
+* anything else two characters wide is text arriving from somewhere other than the keyboard.
+*/
+function typedCharacter(edit) {
+	if (edit.text.length === 1) return edit.text;
+	if (edit.from !== edit.to || edit.text.length !== 2) return null;
+	const opener = edit.text[0] ?? "";
+	if (opener !== edit.text[1]) return null;
+	return COMPLETION_TRIGGER_CHARACTERS.has(opener) ? opener : null;
+}
+function completionApplication(request, item) {
+	const primary = completionPrimaryEdit(request, item);
+	if (!primary) return null;
+	const additional = additionalCompletionEdits(request, item.additionalTextEdits ?? []);
+	const edits = [primary.edit, ...additional];
+	const head = completionSelectionHead(primary.edit, additional);
+	const snippet = primary.snippet;
+	if (!snippet) return {
+		edits,
+		selection: {
+			anchor: head,
+			head,
+			affinity: request.caretAffinity
+		}
+	};
+	const insertionOffset = head - primary.edit.text.length;
+	const first = snippetInitialSelection(snippet, insertionOffset);
+	return {
+		edits,
+		selection: {
+			anchor: first.start,
+			head: first.end,
+			affinity: request.caretAffinity
+		},
+		snippetStops: snippetStopRanges(snippet, insertionOffset)
+	};
+}
+/**
+* Whether an item could be applied at all against the text it was answered for.
+*
+* The ranges an item carries are positions in that text, and one that spans lines or that the caret
+* was never inside describes a document this client did not ask about. Nothing downstream can rescue
+* such an item, so a row for it would be one the reader can press Enter on and get nothing for.
+*/
+function completionItemApplies(request, item) {
+	const textEdit = completionTextEdit(item);
+	if (!textEdit) return true;
+	return completionEditRange(request, textEdit.range) !== null;
+}
+function completionAnchorRange(length, offset) {
+	if (length === 0) return {
+		start: 0,
+		end: 0
+	};
+	const end = Math.max(1, Math.min(offset, length));
+	return {
+		start: end - 1,
+		end
+	};
+}
+function createCompletionEditFeature(context, timingName) {
+	return { applyCompletion(application) {
+		if (!context.hasDocument()) return false;
+		context.applyEdits(application.edits, timingName, application.selection);
+		if (application.snippetStops) context.startSnippetSession(application.snippetStops);
+		context.focusEditor();
+		return true;
+	} };
+}
+function createCompletionWidgetElement(document, classNames) {
+	const element = document.createElement("div");
+	element.className = classNames.root;
+	element.hidden = true;
+	element.setAttribute("role", "listbox");
+	Object.assign(element.style, {
+		zIndex: "1001",
+		width: `${COMPLETION_WIDGET_WIDTH_PX}px`,
+		maxWidth: `calc(100vw - 24px)`,
+		maxHeight: `${COMPLETION_WIDGET_MAX_HEIGHT_PX}px`,
+		overflowX: "hidden",
+		overflowY: "auto",
+		padding: "3px",
+		border: "1px solid color-mix(in srgb, var(--editor-foreground, #d4d4d8) 22%, transparent)",
+		borderRadius: "6px",
+		boxSizing: "border-box",
+		background: "var(--editor-popup-background, color-mix(in srgb, var(--editor-background, #18181b) 96%, var(--editor-foreground, #e4e4e7) 4%))",
+		color: "var(--editor-foreground, #e4e4e7)",
+		boxShadow: "0 12px 30px color-mix(in srgb, var(--editor-background, #000000) 60%, transparent)",
+		font: "12px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+		userSelect: "none",
+		scrollbarGutter: "stable"
+	});
+	return element;
+}
+function completionRowElement(document, item, index, classNames) {
+	const row = document.createElement("div");
+	row.className = classNames.item;
+	row.dataset.index = String(index);
+	row.setAttribute("role", "option");
+	Object.assign(row.style, {
+		display: "grid",
+		gridTemplateColumns: "44px minmax(0, 1fr) auto",
+		alignItems: "center",
+		gap: "8px",
+		minHeight: "24px",
+		padding: "2px 7px",
+		borderRadius: "4px",
+		cursor: "default",
+		whiteSpace: "nowrap"
+	});
+	row.append(completionKindElement(document, item.kind), completionLabelElement(document, item, classNames), completionDetailElement(document, item));
+	return row;
+}
+function completionKindElement(document, kind) {
+	const element = document.createElement("span");
+	element.textContent = completionKindLabel(kind);
+	Object.assign(element.style, {
+		minWidth: "0",
+		overflow: "hidden",
+		color: "color-mix(in srgb, var(--editor-foreground, #e4e4e7) 62%, transparent)",
+		fontSize: "10px",
+		textTransform: "uppercase"
+	});
+	return element;
+}
+function completionLabelElement(document, item, classNames) {
+	const element = document.createElement("span");
+	Object.assign(element.style, {
+		minWidth: "0",
+		overflow: "hidden",
+		textOverflow: "ellipsis"
+	});
+	appendCompletionLabel(element, item.label, completionLabelMatches.get(item) ?? [], classNames);
+	const detail = item.labelDetails?.detail;
+	if (detail) element.append(detail);
+	return element;
+}
+/**
+* The label, with each run of characters the filter matched marked up.
+*
+* A list that reorders itself as the user types owes them the reason it did: with nothing marked, an
+* entry that outranks the one above it looks arbitrary rather than earned.
+*/
+function appendCompletionLabel(element, label, positions, classNames) {
+	let plainStart = 0;
+	let cursor = 0;
+	while (cursor < positions.length) {
+		const start = positions[cursor] ?? 0;
+		let end = start + 1;
+		while (positions[cursor + 1] === end) {
+			end += 1;
+			cursor += 1;
+		}
+		cursor += 1;
+		if (start > plainStart) element.append(label.slice(plainStart, start));
+		element.append(completionMatchElement(element.ownerDocument, label.slice(start, end), classNames));
+		plainStart = end;
+	}
+	if (plainStart < label.length) element.append(label.slice(plainStart));
+}
+function completionMatchElement(document, text, classNames) {
+	const element = document.createElement("span");
+	element.className = classNames.match;
+	element.textContent = text;
+	Object.assign(element.style, {
+		color: "color-mix(in srgb, var(--editor-caret-color, #60a5fa) 80%, var(--editor-foreground, #e4e4e7))",
+		fontWeight: "600"
+	});
+	return element;
+}
+function completionDetailElement(document, item) {
+	const element = document.createElement("span");
+	element.textContent = item.labelDetails?.description ?? item.detail ?? "";
+	Object.assign(element.style, {
+		minWidth: "0",
+		maxWidth: "140px",
+		overflow: "hidden",
+		color: "color-mix(in srgb, var(--editor-foreground, #e4e4e7) 58%, transparent)",
+		textOverflow: "ellipsis"
+	});
+	return element;
+}
+function syncSelectedRows(element, selectedIndex, classNames) {
+	const rows = element.querySelectorAll(`.${classNames.item}`);
+	for (const row of rows) {
+		const selected = rowIndex(row) === selectedIndex;
+		syncSelectedRow(row, selected);
+		if (selected) scrollRowIntoView(element, row);
+	}
+}
+/**
+* Keeps the focused row inside the box.
+*
+* A hundred rows are offered in a box a dozen of them fit in, and the widget never takes the focus,
+* so there is no scrollport the browser is moving on anyone's behalf: walking off the bottom edge —
+* or wrapping to the end with a single ArrowUp — would leave a list with no highlight in it while
+* Enter commits a row that was never on screen.
+*/
+function scrollRowIntoView(element, row) {
+	const top = row.offsetTop;
+	const bottom = top + row.offsetHeight;
+	if (top < element.scrollTop) element.scrollTop = top;
+	else if (bottom > element.scrollTop + element.clientHeight) element.scrollTop = bottom - element.clientHeight;
+}
+function syncSelectedRow(row, selected) {
+	row.setAttribute("aria-selected", selected ? "true" : "false");
+	row.style.background = selected ? "color-mix(in srgb, var(--editor-caret-color, #60a5fa) 26%, transparent)" : "transparent";
+}
+function syncEditorThemeVariables(element, source) {
+	const style = source.ownerDocument.defaultView?.getComputedStyle(source);
+	if (!style) return;
+	for (const variable of COMPLETION_THEME_VARIABLES) {
+		const value = style.getPropertyValue(variable);
+		if (value) {
+			element.style.setProperty(variable, value);
+			continue;
+		}
+		element.style.removeProperty(variable);
+	}
+}
+function completionPrimaryEdit(request, item) {
+	const textEdit = completionTextEdit(item);
+	const range = textEdit ? completionEditRange(request, textEdit.range) : defaultCompletionReplacementRange(request.document, request.offset);
+	if (!range) return null;
+	const source = textEdit ? textEdit.newText : item.insertText ?? item.label;
+	const snippet = item.insertTextFormat === 2 ? parseSnippet(source, { insertion: {
+		textSnapshot: textReadSnapshotOf(request.document),
+		offset: range.start
+	} }) : null;
+	return {
+		snippet,
+		edit: {
+			from: range.start,
+			to: Math.max(range.start, range.end + request.caretOffset - request.offset),
+			text: snippet?.text ?? source
+		}
+	};
+}
+function completionTextEdit(item) {
+	const textEdit = item.textEdit;
+	if (!textEdit) return null;
+	if ("range" in textEdit) return textEdit;
+	return {
+		range: textEdit.replace,
+		newText: textEdit.newText
+	};
+}
+/**
+* The item's replacement range in offsets, or null when it describes a document we never asked
+* about: a range spanning lines, or one the caret was not inside, leaves nothing for the typed
+* characters to be measured against.
+*/
+function completionEditRange(request, range) {
+	if (range.start.line !== range.end.line) return null;
+	const start = lspPositionToOffsetInSnapshot(request.document, range.start);
+	const end = lspPositionToOffsetInSnapshot(request.document, range.end);
+	if (start > request.offset || end < request.offset) return null;
+	return {
+		start,
+		end
+	};
+}
+function additionalCompletionEdits(request, edits) {
+	return edits.map((edit) => {
+		const from = lspPositionToOffsetInSnapshot(request.document, edit.range.start);
+		const to = lspPositionToOffsetInSnapshot(request.document, edit.range.end);
+		const shift = from < request.offset ? 0 : request.caretOffset - request.offset;
+		return {
+			from: from + shift,
+			to: to + shift,
+			text: edit.newText
+		};
+	});
+}
+function completionSelectionHead(primary, additional) {
+	let head = primary.from + primary.text.length;
+	for (const edit of additional) {
+		if (edit.to > primary.from) continue;
+		head += edit.text.length - (edit.to - edit.from);
+	}
+	return Math.max(0, head);
+}
+function defaultCompletionReplacementRange(document, offset) {
+	const clamped = Math.max(0, Math.min(offset, document.textSnapshot.length));
+	return rangeAroundOffset(document, clamped, identifierRunAt);
+}
+function identifierRunAt(text, offset) {
+	let start = offset;
+	while (start > 0 && isIdentifierCharacter(text[start - 1] ?? "")) start -= 1;
+	let end = offset;
+	while (end < text.length && isIdentifierCharacter(text[end] ?? "")) end += 1;
+	return {
+		start,
+		end
+	};
+}
+/** Every tab stop in visit order and in document offsets, or undefined when there are none. */
+function snippetStopRanges(snippet, insertionOffset) {
+	const stops = snippet.stops.flatMap((stop) => {
+		const caret = stop.ranges.findIndex((candidate) => !candidate.transform);
+		const range = stop.ranges[caret];
+		if (!range) return [];
+		const mirrors = stop.ranges.flatMap((mirror, index) => index === caret ? [] : [shiftedSnippetRange(mirror, insertionOffset)]);
+		const shifted = shiftedSnippetRange(range, insertionOffset);
+		return [mirrors.length > 0 ? {
+			...shifted,
+			mirrors
+		} : shifted];
+	});
+	return stops.length > 0 ? stops : void 0;
+}
+function shiftedSnippetRange(range, insertionOffset) {
+	const shifted = {
+		end: insertionOffset + range.end,
+		start: insertionOffset + range.start
+	};
+	return range.transform ? {
+		...shifted,
+		transform: range.transform
+	} : shifted;
+}
+function completionRowTarget(target, classNames) {
+	if (!(target instanceof Element)) return null;
+	return target.closest(`.${classNames.item}`);
+}
+function completionWidgetClassNames(namespace = COMPLETION_WIDGET_CLASS_NAMESPACE) {
+	const root = `editor-${namespace}-completion`;
+	return {
+		root,
+		item: `${root}-item`,
+		match: `${root}-match`
+	};
+}
+function rowIndex(row) {
+	const parsed = Number(row.dataset.index);
+	return Number.isFinite(parsed) ? parsed : 0;
+}
+function clampIndex(index, length) {
+	if (length <= 0) return 0;
+	return Math.min(Math.max(0, index), length - 1);
+}
+function wrapIndex(index, length) {
+	if (length <= 0) return 0;
+	return (index % length + length) % length;
+}
+function completionKindLabel(kind) {
+	if (kind === 2) return "meth";
+	if (kind === 3) return "fn";
+	if (kind === 5) return "field";
+	if (kind === 6) return "var";
+	if (kind === 7) return "class";
+	if (kind === 8) return "iface";
+	if (kind === 9) return "mod";
+	if (kind === 10) return "prop";
+	if (kind === 13) return "enum";
+	if (kind === 14) return "key";
+	if (kind === 20) return "member";
+	return "text";
+}
+function isIdentifierCharacter(value) {
+	return /^[A-Za-z0-9_$]$/.test(value);
+}
+function isCompletionList(value) {
+	return !Array.isArray(value);
+}
+/**
+* Whether an accepted item still needs a `completionItem/resolve` round-trip.
+*
+* Servers routinely send a list whose items carry only a label, deferring documentation and — the
+* one that matters — the import edit until resolve. Applying such an item directly is what silently
+* drops auto-imports.
+*/
+function completionNeedsResolve(item, serverCapabilities) {
+	if (item.additionalTextEdits !== void 0) return false;
+	return Boolean(serverCapabilities?.completionProvider?.resolveProvider);
+}
+/**
+* Word being typed at `offset`, which is what the list should be filtered against. The server's
+* answer is for the moment the request was sent; the user has usually typed more since.
+*/
+function completionPrefix(text, offset) {
+	let start = Math.max(0, Math.min(offset, text.length));
+	while (start > 0 && isIdentifierCharacter(text[start - 1] ?? "")) start -= 1;
+	return text.slice(start, Math.max(0, Math.min(offset, text.length)));
+}
+/**
+* Where each ranked item's label matched, kept beside the list instead of inside it.
+*
+* The items in a list are the server's own objects, and one of them goes back to the server on a
+* resolve; the runs to mark are this client's reading of them. The widget is handed the items and
+* nothing else, so this is where it reads that from.
+*/
+var completionLabelMatches = /* @__PURE__ */ new WeakMap();
+/**
+* Each server list's last filter, hung on the list itself.
+*
+* A narrowing is an answer about the one list it was computed from, and that list is held by a
+* single session in a single editor. Here it is out of reach of a second editor filtering its own
+* list, and it is released along with the session holding the list; in a variable of its own it
+* would be neither.
+*/
+var completionRankings = /* @__PURE__ */ new WeakMap();
+/**
+* Filters and orders a completion list against what has been typed.
+*
+* An item earns its place by where the typed characters landed in it, so a word start, a camel-case
+* hump and the far side of a separator all outrank the same letters found in the middle of a word.
+* Ties fall back to the server's own `sortText`, which is how a server expresses relevance it knows
+* and the client does not.
+*/
+function rankCompletionItems(items, prefix) {
+	if (prefix.length === 0) {
+		completionRankings.delete(items);
+		for (const item of items) completionLabelMatches.delete(item);
+		return items;
+	}
+	const scored = [];
+	for (const item of narrowingSource(items, prefix)) {
+		const match = fuzzyMatch(prefix, item.filterText ?? item.label);
+		if (!match) continue;
+		completionLabelMatches.set(item, completionLabelPositions(item, prefix, match));
+		scored.push({
+			item,
+			score: match.score
+		});
+	}
+	const ranked = scored.sort((left, right) => right.score - left.score || compareCompletionOrder(left.item, right.item)).map((entry) => entry.item);
+	completionRankings.set(items, {
+		prefix,
+		ranked
+	});
+	return ranked;
+}
+/**
+* The items worth scoring for this word: the ones that survived the shorter word, when this word is
+* that word plus what has been typed since.
+*
+* Typing a character can only narrow, never widen — no item the longer word matches was passed over
+* by the shorter one — so a server's list is scored in full once for the word it answered, and for
+* every keystroke the list stays up after that, only where it is still standing.
+*/
+function narrowingSource(items, prefix) {
+	const previous = completionRankings.get(items);
+	if (!previous) return items;
+	if (prefix.length <= previous.prefix.length || !prefix.startsWith(previous.prefix)) return items;
+	return previous.ranked;
+}
+/**
+* The label positions to mark for an item, given the match its filter text earned.
+*
+* An item may be filtered by one string and displayed as another, and positions in the string that
+* was matched address nothing in the string on screen. Such a label is matched again on its own
+* terms, and loosely: part of what was typed has no reason to appear in it at all, and marking the
+* part that does beats marking nothing. The rank stays the one the filter text earned.
+*/
+function completionLabelPositions(item, prefix, match) {
+	const filterText = item.filterText;
+	if (filterText === void 0) return match.positions;
+	if (filterText.toLowerCase() === item.label.toLowerCase()) return match.positions;
+	return looseFuzzyMatch(prefix, item.label)?.positions ?? [];
+}
+function compareCompletionOrder(left, right) {
+	const leftKey = left.sortText ?? left.label;
+	const rightKey = right.sortText ?? right.label;
+	return leftKey.localeCompare(rightKey);
+}
+//#endregion
+export { COMPLETION_REQUEST_DEBOUNCE_MS, LANGUAGE_SERVER_COMPLETION_EDIT_FEATURE, LANGUAGE_SERVER_COMPLETION_EDIT_FEATURE_ID, completionAnchorRange, completionApplication, completionItemApplies, completionListResult, completionNeedsResolve, completionPrefix, completionTriggerFromChange, createCompletionEditFeature, createCompletionWidgetController, rankCompletionItems };
+
+//# sourceMappingURL=completion.js.map