From 37fcf190e682e1c3b72d9011dfb616268a649e5a Mon Sep 17 00:00:00 2001 From: Joel Spadin Date: Sun, 21 Jan 2024 19:31:55 -0600 Subject: [PATCH] feat(keymap-upgrader): Highlight changes Updated the keymap upgrader to highlight which lines it changed as well as indicate when nothing needed to be upgraded. Also adjusted the line highlight colors to be more readable in both light and dark color schemes. --- docs/src/components/KeymapUpgrader/index.jsx | 18 ++++- docs/src/css/custom.css | 7 +- docs/src/keymap-upgrade/index.ts | 36 ++++++++- docs/src/keymap-upgrade/keycodes.ts | 4 +- docs/src/keymap-upgrade/properties.ts | 4 +- docs/src/keymap-upgrade/textedit.ts | 85 +++++++++++--------- 6 files changed, 109 insertions(+), 45 deletions(-) diff --git a/docs/src/components/KeymapUpgrader/index.jsx b/docs/src/components/KeymapUpgrader/index.jsx index 90429d834..fdd4db4b2 100644 --- a/docs/src/components/KeymapUpgrader/index.jsx +++ b/docs/src/components/KeymapUpgrader/index.jsx @@ -7,7 +7,11 @@ import React from "react"; import { useAsync } from "react-async"; -import { initParser, upgradeKeymap } from "@site/src/keymap-upgrade"; +import { + initParser, + upgradeKeymap, + rangesToLineNumbers, +} from "@site/src/keymap-upgrade"; import CodeBlock from "@theme/CodeBlock"; import styles from "./styles.module.css"; @@ -28,7 +32,15 @@ export default function KeymapUpgrader() { function Editor() { const [keymap, setKeymap] = React.useState(""); - const upgraded = upgradeKeymap(keymap); + + const { text: upgraded, changedRanges } = upgradeKeymap(keymap); + const highlights = rangesToLineNumbers(upgraded, changedRanges); + + let title = "Upgraded Keymap"; + + if (keymap && upgraded === keymap) { + title += " (No Changes)"; + } return (
@@ -40,7 +52,7 @@ function Editor() { onChange={(e) => setKeymap(e.target.value)} >
- + {upgraded}
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index d9cddb854..c2df00e2c 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -15,10 +15,15 @@ --ifm-color-primary-lighter: #0280e3; --ifm-color-primary-lightest: #0690fc; --ifm-code-font-size: 95%; + + --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 8%); +} + +[data-theme="dark"] { + --docusaurus-highlighted-code-line-bg: rgb(255 255 255 / 8%); } .docusaurus-highlight-code-line { - background-color: rgb(72, 77, 91); display: block; margin: 0 calc(-1 * var(--ifm-pre-padding)); padding: 0 var(--ifm-pre-padding); diff --git a/docs/src/keymap-upgrade/index.ts b/docs/src/keymap-upgrade/index.ts index 4d091e237..3df9bb9df 100644 --- a/docs/src/keymap-upgrade/index.ts +++ b/docs/src/keymap-upgrade/index.ts @@ -1,5 +1,5 @@ import { createParser } from "./parser"; -import { applyEdits } from "./textedit"; +import { applyEdits, Range } from "./textedit"; import { upgradeBehaviors } from "./behaviors"; import { upgradeHeaders } from "./headers"; @@ -23,3 +23,37 @@ export function upgradeKeymap(text: string) { return applyEdits(text, edits); } + +export function rangesToLineNumbers( + text: string, + changedRanges: Range[] +): string { + const lineBreaks = getLineBreakPositions(text); + + const changedLines = changedRanges.map((range) => { + const startLine = positionToLineNumber(range.startIndex, lineBreaks); + const endLine = positionToLineNumber(range.endIndex, lineBreaks); + + return startLine === endLine ? `${startLine}` : `${startLine}-${endLine}`; + }); + + return `{${changedLines.join(",")}}`; +} + +function getLineBreakPositions(text: string) { + const positions: number[] = []; + let index = 0; + + while ((index = text.indexOf("\n", index)) >= 0) { + positions.push(index); + index++; + } + + return positions; +} + +function positionToLineNumber(position: number, lineBreaks: number[]) { + const line = lineBreaks.findIndex((lineBreak) => position <= lineBreak); + + return line < 0 ? 0 : line + 1; +} diff --git a/docs/src/keymap-upgrade/keycodes.ts b/docs/src/keymap-upgrade/keycodes.ts index 9a9ede667..5069556c6 100644 --- a/docs/src/keymap-upgrade/keycodes.ts +++ b/docs/src/keymap-upgrade/keycodes.ts @@ -101,7 +101,7 @@ export function upgradeKeycodes(tree: Tree) { function keycodeReplaceHandler(node: SyntaxNode, replacement: string | null) { if (replacement) { - return [new TextEdit(node, replacement)]; + return [TextEdit.fromNode(node, replacement)]; } const nodes = findBehaviorNodes(node); @@ -110,7 +110,7 @@ function keycodeReplaceHandler(node: SyntaxNode, replacement: string | null) { console.warn( `Found deprecated code "${node.text}" but it is not a parameter to a behavior` ); - return [new TextEdit(node, `/* "${node.text}" no longer exists */`)]; + return [TextEdit.fromNode(node, `/* "${node.text}" no longer exists */`)]; } const oldText = nodes.map((n) => n.text).join(" "); diff --git a/docs/src/keymap-upgrade/properties.ts b/docs/src/keymap-upgrade/properties.ts index 7edc555a9..1cd3210fe 100644 --- a/docs/src/keymap-upgrade/properties.ts +++ b/docs/src/keymap-upgrade/properties.ts @@ -24,9 +24,9 @@ function removeLabels(tree: Tree) { const node = findCapture("prop", captures); if (name?.text === "label" && node) { if (isLayerLabel(node)) { - edits.push(new TextEdit(name, "display-name")); + edits.push(TextEdit.fromNode(name, "display-name")); } else { - edits.push(new TextEdit(node, "")); + edits.push(TextEdit.fromNode(node, "")); } } } diff --git a/docs/src/keymap-upgrade/textedit.ts b/docs/src/keymap-upgrade/textedit.ts index a791c1a6c..263b2ab81 100644 --- a/docs/src/keymap-upgrade/textedit.ts +++ b/docs/src/keymap-upgrade/textedit.ts @@ -1,40 +1,23 @@ import type { SyntaxNode } from "web-tree-sitter"; -export class TextEdit { - startIndex: number; - endIndex: number; +export class Range { + constructor(public startIndex: number, public endIndex: number) {} +} + +export class TextEdit extends Range { newText: string; /** * Creates a text edit to replace a range with new text. */ - constructor(startIndex: number, endIndex: number, newText: string); - /** - * Creates a text edit to replace a node with new text. - */ - constructor(node: SyntaxNode, newText: string); - constructor( - startIndex: number | SyntaxNode, - endIndex: number | string, - newText?: string - ) { - if (typeof startIndex !== "number") { - if (typeof endIndex === "string") { - const node = startIndex; - newText = endIndex; - startIndex = node.startIndex; - endIndex = node.endIndex; - } else { - throw new TypeError(); - } - } else if (typeof endIndex !== "number" || typeof newText !== "string") { - throw new TypeError(); - } - - this.startIndex = startIndex; - this.endIndex = endIndex; + constructor(startIndex: number, endIndex: number, newText: string) { + super(startIndex, endIndex); this.newText = newText; } + + static fromNode(node: SyntaxNode | Range, newText: string) { + return new TextEdit(node.startIndex, node.endIndex, newText); + } } export type MatchFunc = (node: SyntaxNode, text: string) => boolean; @@ -67,7 +50,7 @@ export function getUpgradeEdits( isMatch?: MatchFunc ) { const defaultReplace: ReplaceFunc = (node, replacement) => [ - new TextEdit(node, replacement ?? ""), + TextEdit.fromNode(node, replacement ?? ""), ]; const defaultMatch: MatchFunc = (node, text) => node.text === text; @@ -89,16 +72,26 @@ function sortEdits(edits: TextEdit[]) { return edits.sort((a, b) => a.startIndex - b.startIndex); } +export interface EditResult { + text: string; + changedRanges: Range[]; +} + +interface TextChunk { + text: string; + changed?: boolean; +} + /** - * Returns a string with text replacements applied. + * Returns a string with text replacements applied and a list of ranges within + * that string that were modified. */ export function applyEdits(text: string, edits: TextEdit[]) { // If we are removing text and it's the only thing on a line, remove the whole line. edits = edits.map((e) => (e.newText ? e : expandEditToLine(text, e))); - edits = sortEdits(edits); - const chunks: string[] = []; + const chunks: TextChunk[] = []; let currentIndex = 0; for (let edit of edits) { @@ -107,14 +100,34 @@ export function applyEdits(text: string, edits: TextEdit[]) { continue; } - chunks.push(text.substring(currentIndex, edit.startIndex)); - chunks.push(edit.newText); + chunks.push({ text: text.substring(currentIndex, edit.startIndex) }); + chunks.push({ text: edit.newText, changed: true }); currentIndex = edit.endIndex; } - chunks.push(text.substring(currentIndex)); + chunks.push({ text: text.substring(currentIndex) }); - return chunks.join(""); + // Join all of the text chunks while recording the ranges of any chunks that were changed. + return chunks.reduce( + (prev, current) => { + return { + text: prev.text + current.text, + changedRanges: reduceChangedRanges(prev, current), + }; + }, + { text: "", changedRanges: [] } + ); +} + +function reduceChangedRanges(prev: EditResult, current: TextChunk): Range[] { + if (current.changed) { + return [ + ...prev.changedRanges, + new Range(prev.text.length, prev.text.length + current.text.length), + ]; + } + + return prev.changedRanges; } /**