From 1bff64537f26474b3de27e8d5bb2aeb8a02b0193 Mon Sep 17 00:00:00 2001 From: Luyu Cheng <2239547+chengluyu@users.noreply.github.com> Date: Fri, 24 Oct 2025 08:52:21 +0800 Subject: [PATCH 01/18] Introduce related field effects and states --- editor/blockAttributes.js | 39 ++++++++++++++++++++++++++++++++ editor/decoration.js | 44 +++++++++++++++++++++++++++++------- editor/index.css | 4 ++++ editor/index.js | 39 ++++++++++++++++++++++++++++++-- runtime/index.js | 47 +++++++++++++++++++++++++++++---------- 5 files changed, 151 insertions(+), 22 deletions(-) create mode 100644 editor/blockAttributes.js diff --git a/editor/blockAttributes.js b/editor/blockAttributes.js new file mode 100644 index 0000000..4b67fd5 --- /dev/null +++ b/editor/blockAttributes.js @@ -0,0 +1,39 @@ +import {StateField, StateEffect} from "@codemirror/state"; + +/** + * Effect to set block attributes + * @type {StateEffect<{from: number, to: number, attributes: Object}[]>} + */ +export const setBlockAttributesEffect = StateEffect.define(); + +/** + * StateField that stores block attributes keyed by line ranges + * Structure: Array of {from, to, attributes} + * @type {StateField<{from: number, to: number, attributes: Object}[]>} + */ +export const blockAttributesField = StateField.define({ + create() { + return []; + }, + update(blocks, tr) { + // If document changed, map existing blocks to new positions + if (tr.docChanged) { + blocks = blocks.map(block => ({ + from: tr.changes.mapPos(block.from), + to: tr.changes.mapPos(block.to), + attributes: block.attributes, + })); + } + + // Check for setBlockAttributesEffect + for (const effect of tr.effects) { + if (effect.is(setBlockAttributesEffect)) { + blocks = effect.value; + } + } + + return blocks; + }, +}); + +export const blockAttributes = blockAttributesField.extension; diff --git a/editor/decoration.js b/editor/decoration.js index 6d8d038..5b2272d 100644 --- a/editor/decoration.js +++ b/editor/decoration.js @@ -1,21 +1,46 @@ import {Decoration, ViewPlugin, ViewUpdate, EditorView} from "@codemirror/view"; import {outputLinesField} from "./outputLines"; -import {RangeSetBuilder} from "@codemirror/state"; +import {blockAttributesField} from "./blockAttributes"; +import {RangeSet, RangeSetBuilder} from "@codemirror/state"; const highlight = Decoration.line({attributes: {class: "cm-output-line"}}); const errorHighlight = Decoration.line({attributes: {class: "cm-output-line cm-error-line"}}); +const compactLineDecoration = Decoration.line({attributes: {class: "cm-output-line cm-compact-line"}}); // const linePrefix = Decoration.mark({attributes: {class: "cm-output-line-prefix"}}); // const lineContent = Decoration.mark({attributes: {class: "cm-output-line-content"}}); -function createWidgets(lines) { - const builder = new RangeSetBuilder(); +function createWidgets(lines, blockAttributes, state) { + // Build the range set for output lines. + const builder1 = new RangeSetBuilder(); + // Add output line decorations for (const {from, type} of lines) { - if (type === "output") builder.add(from, from, highlight); - else if (type === "error") builder.add(from, from, errorHighlight); + if (type === "output") builder1.add(from, from, highlight); + else if (type === "error") builder1.add(from, from, errorHighlight); // builder.add(from, from + 3, linePrefix); // builder.add(from + 4, to, lineContent); } - return builder.finish(); + const set1 = builder1.finish(); + + // Build the range set for block attributes. + const builder2 = new RangeSetBuilder(); + // Add block attribute decorations + for (const {from, to, attributes} of blockAttributes) { + // Apply decorations to each line in the block range + const startLine = state.doc.lineAt(from); + const endLine = state.doc.lineAt(to); + + for (let lineNum = startLine.number; lineNum <= endLine.number; lineNum++) { + const line = state.doc.line(lineNum); + if (attributes.compact === true) { + builder2.add(line.from, line.from, compactLineDecoration); + } + } + } + const set2 = builder2.finish(); + + // Range sets are required to be sorted. Fortunately, they provide a method + // to merge multiple range sets into a single sorted range set. + return RangeSet.join([set1, set2]); } export const outputDecoration = ViewPlugin.fromClass( @@ -28,14 +53,17 @@ export const outputDecoration = ViewPlugin.fromClass( /** @param {EditorView} view */ constructor(view) { - this.#decorations = createWidgets(view.state.field(outputLinesField)); + const outputLines = view.state.field(outputLinesField); + const blockAttributes = view.state.field(blockAttributesField); + this.#decorations = createWidgets(outputLines, blockAttributes, view.state); } /** @param {ViewUpdate} update */ update(update) { const newOutputLines = update.state.field(outputLinesField); + const newBlockAttributes = update.state.field(blockAttributesField); // A possible optimization would be to only update the changed lines. - this.#decorations = createWidgets(newOutputLines); + this.#decorations = createWidgets(newOutputLines, newBlockAttributes, update.state); } }, {decorations: (v) => v.decorations}, diff --git a/editor/index.css b/editor/index.css index 29cdb12..110964f 100644 --- a/editor/index.css +++ b/editor/index.css @@ -143,6 +143,10 @@ /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%237d7d7d' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");*/ } + .cm-output-line.cm-compact-line { + line-height: 1; + } + /* We can't see background color, which is conflict with selection background color. * So we use svg pattern to simulate the background color. */ diff --git a/editor/index.js b/editor/index.js index 2b1d2bd..2e9ab1c 100644 --- a/editor/index.js +++ b/editor/index.js @@ -11,6 +11,7 @@ import * as eslint from "eslint-linter-browserify"; import {createRuntime} from "../runtime/index.js"; import {outputDecoration} from "./decoration.js"; import {outputLines} from "./outputLines.js"; +import {blockAttributes, setBlockAttributesEffect} from "./blockAttributes.js"; // import {outputProtection} from "./protection.js"; import {dispatch as d3Dispatch} from "d3-dispatch"; import {controls} from "./controls/index.js"; @@ -68,6 +69,7 @@ export function createEditor(container, options) { ]), javascriptLanguage.data.of({autocomplete: rechoCompletion}), outputLines, + blockAttributes, outputDecoration, controls(runtimeRef), // Disable this for now, because it prevents copying/pasting the code. @@ -89,9 +91,42 @@ export function createEditor(container, options) { window.addEventListener("keyup", onKeyUp); } - function dispatch(changes) { + function dispatch({changes, blockAttributes: blockAttrs}) { + // Map block attributes through the changes to get correct final positions + const effects = []; + + if (blockAttrs && blockAttrs.length > 0) { + // We need to map the block positions through the changes + // Create a simplified change set mapper + const sortedChanges = [...changes].sort((a, b) => a.from - b.from); + + const mapPos = (pos) => { + let mapped = pos; + for (const change of sortedChanges) { + if (change.from <= pos) { + const inserted = change.insert ? change.insert.length : 0; + const deleted = change.to ? change.to - change.from : 0; + mapped += inserted - deleted; + } + } + return mapped; + }; + + const mappedBlockAttrs = blockAttrs.map(({from, to, attributes}) => ({ + from: mapPos(from), + to: mapPos(to), + attributes, + })); + + effects.push(setBlockAttributesEffect.of(mappedBlockAttrs)); + } + // Mark this transaction as from runtime so that it will not be filtered out. - view.dispatch({changes, annotations: [Transaction.remote.of("runtime")]}); + view.dispatch({ + changes, + effects, + annotations: [Transaction.remote.of("runtime")], + }); } function onChange(update) { diff --git a/runtime/index.js b/runtime/index.js index 86a63c5..637306e 100644 --- a/runtime/index.js +++ b/runtime/index.js @@ -125,7 +125,16 @@ export function createRuntime(initialCode) { } } - dispatch(changes); + // Collect block attributes - we need to map positions through the changes + const blockAttributes = nodes + .filter((node) => Object.keys(node.state.attributes).length > 0) + .map((node) => ({ + from: node.start, + to: node.end, + attributes: node.state.attributes, + })); + + dispatch(changes, blockAttributes); }, 0); function setCode(newCode) { @@ -136,8 +145,8 @@ export function createRuntime(initialCode) { isRunning = value; } - function dispatch(changes) { - dispatcher.call("changes", null, changes); + function dispatch(changes, blockAttributes = []) { + dispatcher.call("changes", null, {changes, blockAttributes}); } function onChanges(callback) { @@ -294,7 +303,14 @@ export function createRuntime(initialCode) { for (const node of enter) { const vid = uid(); const {inputs, body, outputs, error = null} = node.transpiled; - const state = {values: [], variables: [], error: null, syntaxError: error, doc: false}; + const state = { + values: [], + variables: [], + error: null, + syntaxError: error, + doc: false, + attributes: Object.create(null), + }; node.state = state; const v = main.variable(observer(state), {shadow: {}}); if (inputs.includes("echo")) { @@ -304,14 +320,21 @@ export function createRuntime(initialCode) { inputs.filter((i) => i !== "echo" && i !== "clear"), () => { const version = v._version; // Capture version on input change. - return (value, ...args) => { - if (version < docVersion) throw new Error("stale echo"); - else if (state.variables[0] !== v) throw new Error("stale echo"); - else if (version > docVersion) clear(state); - docVersion = version; - echo(state, value, ...args); - return args.length ? [value, ...args] : value; - }; + return Object.assign( + function (value, ...args) { + if (version < docVersion) throw new Error("stale echo"); + else if (state.variables[0] !== v) throw new Error("stale echo"); + else if (version > docVersion) clear(state); + docVersion = version; + echo(state, value, ...args); + return args.length ? [value, ...args] : value; + }, + { + set: function (key, value) { + state.attributes[key] = value; + }, + }, + ); }, ); v._shadow.set("echo", vd); From 721b59f57449c1c9abb66d972e09e3eb307331db Mon Sep 17 00:00:00 2001 From: Luyu Cheng <2239547+chengluyu@users.noreply.github.com> Date: Fri, 24 Oct 2025 16:21:35 +0800 Subject: [PATCH 02/18] Initialize block metadata using runtime --- editor/blockAttributes.js | 39 ---- editor/blockMetadata.ts | 54 ++++++ editor/decoration.js | 46 +++-- editor/index.css | 12 ++ editor/index.js | 37 +--- lib/IntervalTree.ts | 369 +++++++++++++++++++++++++++++++++++ runtime/index.js | 94 ++++++--- test/IntervalTree.spec.js | 395 ++++++++++++++++++++++++++++++++++++++ 8 files changed, 929 insertions(+), 117 deletions(-) delete mode 100644 editor/blockAttributes.js create mode 100644 editor/blockMetadata.ts create mode 100644 lib/IntervalTree.ts create mode 100644 test/IntervalTree.spec.js diff --git a/editor/blockAttributes.js b/editor/blockAttributes.js deleted file mode 100644 index 4b67fd5..0000000 --- a/editor/blockAttributes.js +++ /dev/null @@ -1,39 +0,0 @@ -import {StateField, StateEffect} from "@codemirror/state"; - -/** - * Effect to set block attributes - * @type {StateEffect<{from: number, to: number, attributes: Object}[]>} - */ -export const setBlockAttributesEffect = StateEffect.define(); - -/** - * StateField that stores block attributes keyed by line ranges - * Structure: Array of {from, to, attributes} - * @type {StateField<{from: number, to: number, attributes: Object}[]>} - */ -export const blockAttributesField = StateField.define({ - create() { - return []; - }, - update(blocks, tr) { - // If document changed, map existing blocks to new positions - if (tr.docChanged) { - blocks = blocks.map(block => ({ - from: tr.changes.mapPos(block.from), - to: tr.changes.mapPos(block.to), - attributes: block.attributes, - })); - } - - // Check for setBlockAttributesEffect - for (const effect of tr.effects) { - if (effect.is(setBlockAttributesEffect)) { - blocks = effect.value; - } - } - - return blocks; - }, -}); - -export const blockAttributes = blockAttributesField.extension; diff --git a/editor/blockMetadata.ts b/editor/blockMetadata.ts new file mode 100644 index 0000000..2fd826d --- /dev/null +++ b/editor/blockMetadata.ts @@ -0,0 +1,54 @@ +import {StateField, StateEffect} from "@codemirror/state"; + +export const blockMetadataEffect = StateEffect.define(); + +type BlockMetadata = { + output: {from: number; to: number} | null; + source: {from: number; to: number}; + attributes: Record; +}; + +export const blockMetadataField = StateField.define({ + create() { + return []; + }, + update(blocks, tr) { + // Find if the block attributes effect is present. + let blocksFromEffect: BlockMetadata[] | null = null; + for (const effect of tr.effects) { + if (effect.is(blockMetadataEffect)) { + blocksFromEffect = effect.value; + break; + } + } + + if (blocksFromEffect === null) { + // If the block attributes effect is not present, then this transaction + // is made by the user, we need to update the block attributes accroding + // to the latest syntax tree. TODO + return blocks; + } else { + // Otherwise, we need to update the block attributes according to the + // metadata sent from the runtime. Most importantly, we need to translate + // the position of each block after the changes has been made. + for (const block of blocksFromEffect) { + if (block.output === null) { + const from = tr.changes.mapPos(block.source.from, -1); + const to = tr.changes.mapPos(block.source.from, 1); + block.output = {from, to: to - 1}; + } else { + const from = tr.changes.mapPos(block.output.from, -1); + const to = tr.changes.mapPos(block.output.to, 1); + block.output = {from, to: to - 1}; + } + block.source = { + from: tr.changes.mapPos(block.source.from, 1), + to: tr.changes.mapPos(block.source.to, 1), + }; + } + return blocksFromEffect; + } + }, +}); + +export const blockMetadata = blockMetadataField.extension; diff --git a/editor/decoration.js b/editor/decoration.js index 5b2272d..9e4913a 100644 --- a/editor/decoration.js +++ b/editor/decoration.js @@ -1,15 +1,18 @@ import {Decoration, ViewPlugin, ViewUpdate, EditorView} from "@codemirror/view"; import {outputLinesField} from "./outputLines"; -import {blockAttributesField} from "./blockAttributes"; +import {blockMetadataField} from "./blockMetadata"; import {RangeSet, RangeSetBuilder} from "@codemirror/state"; const highlight = Decoration.line({attributes: {class: "cm-output-line"}}); const errorHighlight = Decoration.line({attributes: {class: "cm-output-line cm-error-line"}}); const compactLineDecoration = Decoration.line({attributes: {class: "cm-output-line cm-compact-line"}}); +const debugGreenDecoration = Decoration.mark({attributes: {class: "cm-debug-mark green"}}); +const debugRedDecoration = Decoration.mark({attributes: {class: "cm-debug-mark red"}}); +const debugBlueDecoration = Decoration.mark({attributes: {class: "cm-debug-mark blue"}}); // const linePrefix = Decoration.mark({attributes: {class: "cm-output-line-prefix"}}); // const lineContent = Decoration.mark({attributes: {class: "cm-output-line-content"}}); -function createWidgets(lines, blockAttributes, state) { +function createWidgets(lines, blockMetadata, state) { // Build the range set for output lines. const builder1 = new RangeSetBuilder(); // Add output line decorations @@ -24,23 +27,40 @@ function createWidgets(lines, blockAttributes, state) { // Build the range set for block attributes. const builder2 = new RangeSetBuilder(); // Add block attribute decorations - for (const {from, to, attributes} of blockAttributes) { + for (const {output, attributes} of blockMetadata) { // Apply decorations to each line in the block range - const startLine = state.doc.lineAt(from); - const endLine = state.doc.lineAt(to); + const startLine = state.doc.lineAt(output.from); + const endLine = state.doc.lineAt(output.to); + console.log("from:", output.from); + console.log("to:", output.to); + console.log("startLine:", startLine); + console.log("endLine:", endLine); - for (let lineNum = startLine.number; lineNum <= endLine.number; lineNum++) { - const line = state.doc.line(lineNum); - if (attributes.compact === true) { + if (attributes.compact === true) { + for (let lineNum = startLine.number; lineNum <= endLine.number; lineNum++) { + const line = state.doc.line(lineNum); builder2.add(line.from, line.from, compactLineDecoration); } } } const set2 = builder2.finish(); + const builder3 = new RangeSetBuilder(); + for (const {output} of blockMetadata) { + if (output === null) continue; + builder3.add(output.from, output.to, debugRedDecoration); + } + const set3 = builder3.finish(); + + const builder4 = new RangeSetBuilder(); + for (const {source} of blockMetadata) { + builder4.add(source.from, source.to, debugGreenDecoration); + } + const set4 = builder4.finish(); + // Range sets are required to be sorted. Fortunately, they provide a method // to merge multiple range sets into a single sorted range set. - return RangeSet.join([set1, set2]); + return RangeSet.join([set1, set2, set3, set4]); } export const outputDecoration = ViewPlugin.fromClass( @@ -54,16 +74,16 @@ export const outputDecoration = ViewPlugin.fromClass( /** @param {EditorView} view */ constructor(view) { const outputLines = view.state.field(outputLinesField); - const blockAttributes = view.state.field(blockAttributesField); - this.#decorations = createWidgets(outputLines, blockAttributes, view.state); + const blockMetadata = view.state.field(blockMetadataField); + this.#decorations = createWidgets(outputLines, blockMetadata, view.state); } /** @param {ViewUpdate} update */ update(update) { const newOutputLines = update.state.field(outputLinesField); - const newBlockAttributes = update.state.field(blockAttributesField); + const blockMetadata = update.state.field(blockMetadataField); // A possible optimization would be to only update the changed lines. - this.#decorations = createWidgets(newOutputLines, newBlockAttributes, update.state); + this.#decorations = createWidgets(newOutputLines, blockMetadata, update.state); } }, {decorations: (v) => v.decorations}, diff --git a/editor/index.css b/editor/index.css index 110964f..45579fb 100644 --- a/editor/index.css +++ b/editor/index.css @@ -147,6 +147,18 @@ line-height: 1; } + .cm-debug-mark { + &.red { + background-color: #e4002440; + } + &.green { + background-color: #009a5753; + } + &.blue { + background-color: #0088f653; + } + } + /* We can't see background color, which is conflict with selection background color. * So we use svg pattern to simulate the background color. */ diff --git a/editor/index.js b/editor/index.js index 2e9ab1c..704b3fe 100644 --- a/editor/index.js +++ b/editor/index.js @@ -11,7 +11,7 @@ import * as eslint from "eslint-linter-browserify"; import {createRuntime} from "../runtime/index.js"; import {outputDecoration} from "./decoration.js"; import {outputLines} from "./outputLines.js"; -import {blockAttributes, setBlockAttributesEffect} from "./blockAttributes.js"; +import {blockMetadata, blockMetadataEffect} from "./blockMetadata.ts"; // import {outputProtection} from "./protection.js"; import {dispatch as d3Dispatch} from "d3-dispatch"; import {controls} from "./controls/index.js"; @@ -69,7 +69,7 @@ export function createEditor(container, options) { ]), javascriptLanguage.data.of({autocomplete: rechoCompletion}), outputLines, - blockAttributes, + blockMetadata, outputDecoration, controls(runtimeRef), // Disable this for now, because it prevents copying/pasting the code. @@ -91,41 +91,12 @@ export function createEditor(container, options) { window.addEventListener("keyup", onKeyUp); } - function dispatch({changes, blockAttributes: blockAttrs}) { - // Map block attributes through the changes to get correct final positions - const effects = []; - - if (blockAttrs && blockAttrs.length > 0) { - // We need to map the block positions through the changes - // Create a simplified change set mapper - const sortedChanges = [...changes].sort((a, b) => a.from - b.from); - - const mapPos = (pos) => { - let mapped = pos; - for (const change of sortedChanges) { - if (change.from <= pos) { - const inserted = change.insert ? change.insert.length : 0; - const deleted = change.to ? change.to - change.from : 0; - mapped += inserted - deleted; - } - } - return mapped; - }; - - const mappedBlockAttrs = blockAttrs.map(({from, to, attributes}) => ({ - from: mapPos(from), - to: mapPos(to), - attributes, - })); - - effects.push(setBlockAttributesEffect.of(mappedBlockAttrs)); - } - + function dispatch({changes, effects}) { // Mark this transaction as from runtime so that it will not be filtered out. view.dispatch({ changes, effects, - annotations: [Transaction.remote.of("runtime")], + annotations: [Transaction.remote.of(true)], }); } diff --git a/lib/IntervalTree.ts b/lib/IntervalTree.ts new file mode 100644 index 0000000..82f199e --- /dev/null +++ b/lib/IntervalTree.ts @@ -0,0 +1,369 @@ +/** + * Represents an interval with a low and high endpoint. + */ +export interface Interval { + low: number; + high: number; +} + +/** + * Represents an interval with associated data. + */ +export type IntervalEntry = { + interval: Interval; + data: T; +}; + +/** + * Represents a node in the interval tree. + */ +class IntervalTreeNode { + interval: Interval; + data: T; + max: number; // Maximum high value in subtree + left: IntervalTreeNode | null = null; + right: IntervalTreeNode | null = null; + height: number = 1; + + constructor(interval: Interval, data: T) { + this.interval = interval; + this.data = data; + this.max = interval.high; + } +} + +/** + * A balanced interval tree implementation using AVL tree balancing. + * Supports efficient insertion, deletion, and overlap queries. + */ +export class IntervalTree { + private root: IntervalTreeNode | null = null; + private size: number = 0; + + /** + * Creates an IntervalTree from an array using a mapping function. + * @param items - The array of items to map + * @param mapper - Function that maps each item to an interval and data value + * @returns A new IntervalTree containing all mapped intervals + */ + static from(items: S[], mapper: (item: S, index: number) => IntervalEntry | null): IntervalTree { + const tree = new IntervalTree(); + for (let i = 0, n = items.length; i < n; i++) { + const item = items[i]; + const mapped = mapper(item, i); + if (mapped) tree.insert(mapped.interval, mapped.data); + } + return tree; + } + + /** + * Returns the number of intervals in the tree. + */ + get length(): number { + return this.size; + } + + /** + * Returns true if the tree is empty. + */ + isEmpty(): boolean { + return this.root === null; + } + + /** + * Inserts an interval with associated data into the tree. + */ + insert(interval: Interval, data: T): void { + if (interval.low > interval.high) { + throw new Error("Invalid interval: low must be less than or equal to high"); + } + this.root = this.insertNode(this.root, interval, data); + this.size++; + } + + private insertNode(node: IntervalTreeNode | null, interval: Interval, data: T): IntervalTreeNode { + // Standard BST insertion + if (node === null) { + return new IntervalTreeNode(interval, data); + } + + if (interval.low < node.interval.low) { + node.left = this.insertNode(node.left, interval, data); + } else { + node.right = this.insertNode(node.right, interval, data); + } + + // Update height and max + node.height = 1 + Math.max(this.getHeight(node.left), this.getHeight(node.right)); + node.max = Math.max(node.interval.high, Math.max(this.getMax(node.left), this.getMax(node.right))); + + // Balance the tree + return this.balance(node); + } + + /** + * Deletes an interval from the tree. + * Returns true if the interval was found and deleted, false otherwise. + */ + delete(interval: Interval): boolean { + const initialSize = this.size; + this.root = this.deleteNode(this.root, interval); + return this.size < initialSize; + } + + private deleteNode(node: IntervalTreeNode | null, interval: Interval): IntervalTreeNode | null { + if (node === null) { + return null; + } + + if (interval.low < node.interval.low) { + node.left = this.deleteNode(node.left, interval); + } else if (interval.low > node.interval.low) { + node.right = this.deleteNode(node.right, interval); + } else if (interval.high === node.interval.high) { + // Found the node to delete + this.size--; + + // Node with only one child or no child + if (node.left === null) { + return node.right; + } else if (node.right === null) { + return node.left; + } + + // Node with two children: get inorder successor + const successor = this.findMin(node.right); + node.interval = successor.interval; + node.data = successor.data; + node.right = this.deleteNode(node.right, successor.interval); + } else { + // Continue searching + node.right = this.deleteNode(node.right, interval); + } + + // Update height and max + node.height = 1 + Math.max(this.getHeight(node.left), this.getHeight(node.right)); + node.max = Math.max(node.interval.high, Math.max(this.getMax(node.left), this.getMax(node.right))); + + // Balance the tree + return this.balance(node); + } + + private findMin(node: IntervalTreeNode): IntervalTreeNode { + while (node.left !== null) { + node = node.left; + } + return node; + } + + /** + * Searches for all intervals that overlap with the given interval. + */ + search(interval: Interval): Array> { + const results: Array> = []; + this.searchNode(this.root, interval, results); + return results; + } + + private searchNode(node: IntervalTreeNode | null, interval: Interval, results: Array>): void { + if (node === null) { + return; + } + + // Check if intervals overlap + if (this.doOverlap(node.interval, interval)) { + results.push({interval: node.interval, data: node.data}); + } + + // If left child exists and its max >= interval.low, search left + if (node.left !== null && node.left.max >= interval.low) { + this.searchNode(node.left, interval, results); + } + + // Search right subtree if it can contain overlapping intervals + if (node.right !== null && node.interval.low <= interval.high) { + this.searchNode(node.right, interval, results); + } + } + + /** + * Finds any one interval that overlaps with the given interval. + * Returns null if no overlapping interval is found. + */ + findAny(interval: Interval): IntervalEntry | null { + return this.findAnyNode(this.root, interval); + } + + private findAnyNode(node: IntervalTreeNode | null, interval: Interval): IntervalEntry | null { + if (node === null) { + return null; + } + + // Check if current node overlaps + if (this.doOverlap(node.interval, interval)) { + return {interval: node.interval, data: node.data}; + } + + // If left child can contain overlapping interval, search left first + if (node.left !== null && node.left.max >= interval.low) { + return this.findAnyNode(node.left, interval); + } + + // Otherwise search right + return this.findAnyNode(node.right, interval); + } + + /** + * Finds the first interval that contains the given point. + * Returns null if no interval contains the point. + */ + contains(point: number): IntervalEntry | null { + return this.containsNode(this.root, point); + } + + private containsNode(node: IntervalTreeNode | null, point: number): IntervalEntry | null { + if (node === null) { + return null; + } + + // Check if current node contains the point + if (node.interval.low <= point && point <= node.interval.high) { + return {interval: node.interval, data: node.data}; + } + + // If left child exists and its max >= point, search left first + if (node.left !== null && node.left.max >= point) { + return this.containsNode(node.left, point); + } + + // Otherwise search right + return this.containsNode(node.right, point); + } + + /** + * Returns all intervals in the tree. + */ + toArray(): Array> { + const results: Array> = []; + this.inorderTraversal(this.root, results); + return results; + } + + private inorderTraversal(node: IntervalTreeNode | null, results: Array>): void { + if (node === null) { + return; + } + this.inorderTraversal(node.left, results); + results.push({interval: node.interval, data: node.data}); + this.inorderTraversal(node.right, results); + } + + /** + * Clears all intervals from the tree. + */ + clear(): void { + this.root = null; + this.size = 0; + } + + // AVL tree balancing methods + + private getHeight(node: IntervalTreeNode | null): number { + return node === null ? 0 : node.height; + } + + private getMax(node: IntervalTreeNode | null): number { + return node === null ? -Infinity : node.max; + } + + private getBalanceFactor(node: IntervalTreeNode): number { + return this.getHeight(node.left) - this.getHeight(node.right); + } + + private balance(node: IntervalTreeNode): IntervalTreeNode { + const balanceFactor = this.getBalanceFactor(node); + + // Left heavy + if (balanceFactor > 1) { + if (this.getBalanceFactor(node.left!) < 0) { + // Left-Right case + node.left = this.rotateLeft(node.left!); + } + // Left-Left case + return this.rotateRight(node); + } + + // Right heavy + if (balanceFactor < -1) { + if (this.getBalanceFactor(node.right!) > 0) { + // Right-Left case + node.right = this.rotateRight(node.right!); + } + // Right-Right case + return this.rotateLeft(node); + } + + return node; + } + + private rotateLeft(node: IntervalTreeNode): IntervalTreeNode { + const newRoot = node.right!; + node.right = newRoot.left; + newRoot.left = node; + + // Update heights + node.height = 1 + Math.max(this.getHeight(node.left), this.getHeight(node.right)); + newRoot.height = 1 + Math.max(this.getHeight(newRoot.left), this.getHeight(newRoot.right)); + + // Update max values + node.max = Math.max(node.interval.high, Math.max(this.getMax(node.left), this.getMax(node.right))); + newRoot.max = Math.max(newRoot.interval.high, Math.max(this.getMax(newRoot.left), this.getMax(newRoot.right))); + + return newRoot; + } + + private rotateRight(node: IntervalTreeNode): IntervalTreeNode { + const newRoot = node.left!; + node.left = newRoot.right; + newRoot.right = node; + + // Update heights + node.height = 1 + Math.max(this.getHeight(node.left), this.getHeight(node.right)); + newRoot.height = 1 + Math.max(this.getHeight(newRoot.left), this.getHeight(newRoot.right)); + + // Update max values + node.max = Math.max(node.interval.high, Math.max(this.getMax(node.left), this.getMax(node.right))); + newRoot.max = Math.max(newRoot.interval.high, Math.max(this.getMax(newRoot.left), this.getMax(newRoot.right))); + + return newRoot; + } + + private doOverlap(a: Interval, b: Interval): boolean { + return a.low <= b.high && b.low <= a.high; + } + + /** + * Returns true if the tree is balanced (for testing purposes). + */ + isBalanced(): boolean { + return this.checkBalance(this.root) !== -1; + } + + private checkBalance(node: IntervalTreeNode | null): number { + if (node === null) { + return 0; + } + + const leftHeight = this.checkBalance(node.left); + if (leftHeight === -1) return -1; + + const rightHeight = this.checkBalance(node.right); + if (rightHeight === -1) return -1; + + if (Math.abs(leftHeight - rightHeight) > 1) { + return -1; + } + + return Math.max(leftHeight, rightHeight) + 1; + } +} diff --git a/runtime/index.js b/runtime/index.js index 637306e..723038d 100644 --- a/runtime/index.js +++ b/runtime/index.js @@ -6,6 +6,8 @@ import {dispatch as d3Dispatch} from "d3-dispatch"; import * as stdlib from "./stdlib.js"; import {OUTPUT_MARK, ERROR_MARK} from "./constant.js"; import {Inspector} from "./inspect.js"; +import {blockMetadataEffect} from "../editor/blockMetadata.ts"; +import {IntervalTree} from "../lib/IntervalTree.ts"; const OUTPUT_PREFIX = `//${OUTPUT_MARK}`; @@ -95,9 +97,13 @@ export function createRuntime(initialCode) { const refresh = debounce((code) => { const changes = removeChanges(code); + const removedIntervals = IntervalTree.from(changes, ({from, to}, index) => + from === to ? null : {interval: {low: from, high: to - 1}, data: index}, + ); // Insert new outputs const nodes = Array.from(nodesByKey.values()).flat(Infinity); + const blocks = []; for (const node of nodes) { const start = node.start; const {values} = node.state; @@ -121,20 +127,28 @@ export function createRuntime(initialCode) { } const prefix = error ? ERROR_PREFIX : OUTPUT_PREFIX; const prefixed = addPrefix(output, prefix); - changes.push({from: start, insert: prefixed + "\n"}); + // Search for existing changes and update the inserted text if found. + const entry = removedIntervals.contains(start - 1); + let outputRange = null; + if (entry === null) { + changes.push({from: start, insert: prefixed + "\n"}); + } else { + const change = changes[entry.data]; + change.insert = prefixed + "\n"; + outputRange = {from: change.from, to: change.to}; + } + blocks.push({ + source: {from: node.start, to: node.end}, + output: outputRange, + attributes: node.state.attributes, + }); } } - // Collect block attributes - we need to map positions through the changes - const blockAttributes = nodes - .filter((node) => Object.keys(node.state.attributes).length > 0) - .map((node) => ({ - from: node.start, - to: node.end, - attributes: node.state.attributes, - })); + // Attach block positions and attributes as effects to the transaction. + const effects = [blockMetadataEffect.of(blocks)]; - dispatch(changes, blockAttributes); + dispatch(changes, effects); }, 0); function setCode(newCode) { @@ -145,8 +159,8 @@ export function createRuntime(initialCode) { isRunning = value; } - function dispatch(changes, blockAttributes = []) { - dispatcher.call("changes", null, {changes, blockAttributes}); + function dispatch(changes, effects = []) { + dispatcher.call("changes", null, {changes, effects}); } function onChanges(callback) { @@ -205,30 +219,45 @@ export function createRuntime(initialCode) { } } + /** + * Get the changes that remove the output lines from the code. + * @param {string} code The code to remove changes from. + * @returns {{from: number, to: number, insert: ""}[]} An array of changes. + */ function removeChanges(code) { - const changes = []; - - const oldOutputs = code - .split("\n") - .map((l, i) => [l, i]) - .filter(([l]) => l.startsWith(OUTPUT_PREFIX) || l.startsWith(ERROR_PREFIX)) - .map(([_, i]) => i); - - const lineOf = (i) => { - const lines = code.split("\n"); - const line = lines[i]; - const from = lines.slice(0, i).join("\n").length; - const to = from + line.length; - return {from, to}; - }; + function matchAt(index) { + return code.startsWith(OUTPUT_PREFIX, index) || code.startsWith(ERROR_PREFIX, index); + } - for (const i of oldOutputs) { - const line = lineOf(i); - const from = line.from; - const to = line.to + 1 > code.length ? line.to : line.to + 1; - changes.push({from, to, insert: ""}); + /** Line number ranges (left-closed and right-open) of lines that contain output or error. */ + const lineNumbers = matchAt(0) ? [{begin: 0, end: 1}] : []; + /** + * The index of the first character of each line. + * If the code ends with a newline, the last index is the length of the code. + */ + const lineStartIndices = [0]; + let nextNewlineIndex = code.indexOf("\n", 0); + while (0 <= nextNewlineIndex && nextNewlineIndex < code.length) { + lineStartIndices.push(nextNewlineIndex + 1); + if (matchAt(nextNewlineIndex + 1)) { + const lineNumber = lineStartIndices.length - 1; + if (lineNumbers.length > 0 && lineNumber === lineNumbers[lineNumbers.length - 1].end) { + // Extend the last line number range. + lineNumbers[lineNumbers.length - 1].end += 1; + } else { + // Append a new line number range. + lineNumbers.push({begin: lineNumber, end: lineNumber + 1}); + } + } + nextNewlineIndex = code.indexOf("\n", nextNewlineIndex + 1); } + const changes = lineNumbers.map(({begin, end}) => ({ + from: lineStartIndices[begin], + to: lineStartIndices[end], + insert: "", + })); + return changes; } @@ -332,6 +361,7 @@ export function createRuntime(initialCode) { { set: function (key, value) { state.attributes[key] = value; + return this; }, }, ); diff --git a/test/IntervalTree.spec.js b/test/IntervalTree.spec.js new file mode 100644 index 0000000..876c0a4 --- /dev/null +++ b/test/IntervalTree.spec.js @@ -0,0 +1,395 @@ +import {it, expect, describe, beforeEach} from "vitest"; +import {IntervalTree} from "../lib/IntervalTree.ts"; + +describe("IntervalTree", () => { + let tree; + + beforeEach(() => { + tree = new IntervalTree(); + }); + + describe("static from method", () => { + it("should create tree from array of objects with mapper", () => { + const events = [ + {name: "Event A", start: 10, end: 20}, + {name: "Event B", start: 15, end: 25}, + {name: "Event C", start: 30, end: 40}, + ]; + + const tree = IntervalTree.from(events, (event) => ({ + interval: {low: event.start, high: event.end}, + data: event.name, + })); + + expect(tree.length).toBe(3); + expect(tree.isBalanced()).toBe(true); + + const results = tree.search({low: 18, high: 22}); + expect(results.length).toBe(2); + expect(results.map((r) => r.data).sort()).toEqual(["Event A", "Event B"]); + }); + + it("should create tree from array of numbers", () => { + const numbers = [1, 2, 3, 4, 5]; + + const tree = IntervalTree.from(numbers, (num) => ({ + interval: {low: num, high: num + 10}, + data: num * 2, + })); + + expect(tree.length).toBe(5); + // Intervals: [1,11], [2,12], [3,13], [4,14], [5,15] + // Searching [12, 13] overlaps with [2,12], [3,13], [4,14], [5,15] + const results = tree.search({low: 12, high: 13}); + expect(results.map((r) => r.data).sort((a, b) => a - b)).toEqual([4, 6, 8, 10]); + }); + + it("should create empty tree from empty array", () => { + const tree = IntervalTree.from([], (item) => ({ + interval: {low: 0, high: 0}, + data: item, + })); + + expect(tree.isEmpty()).toBe(true); + expect(tree.length).toBe(0); + }); + + it("should handle complex data types", () => { + const tasks = [ + {id: 1, timeRange: [0, 100], priority: "high"}, + {id: 2, timeRange: [50, 150], priority: "medium"}, + {id: 3, timeRange: [120, 200], priority: "low"}, + ]; + + const tree = IntervalTree.from(tasks, (task) => ({ + interval: {low: task.timeRange[0], high: task.timeRange[1]}, + data: {id: task.id, priority: task.priority}, + })); + + expect(tree.length).toBe(3); + + // Intervals: [0,100], [50,150], [120,200] + // Searching [75, 125] overlaps with all three + const results = tree.search({low: 75, high: 125}); + expect(results.length).toBe(3); + expect(results.find((r) => r.data.id === 1)).toBeDefined(); + expect(results.find((r) => r.data.id === 2)).toBeDefined(); + expect(results.find((r) => r.data.id === 3)).toBeDefined(); + }); + }); + + describe("basic operations", () => { + it("should create an empty tree", () => { + expect(tree.isEmpty()).toBe(true); + expect(tree.length).toBe(0); + }); + + it("should insert intervals", () => { + tree.insert({low: 15, high: 20}, "data1"); + expect(tree.isEmpty()).toBe(false); + expect(tree.length).toBe(1); + + tree.insert({low: 10, high: 30}, "data2"); + expect(tree.length).toBe(2); + }); + + it("should reject invalid intervals", () => { + expect(() => tree.insert({low: 20, high: 10}, "data")).toThrow( + "Invalid interval: low must be less than or equal to high", + ); + }); + + it("should allow single-point intervals", () => { + tree.insert({low: 5, high: 5}, "point"); + expect(tree.length).toBe(1); + }); + + it("should delete intervals", () => { + tree.insert({low: 15, high: 20}, "data1"); + tree.insert({low: 10, high: 30}, "data2"); + tree.insert({low: 17, high: 19}, "data3"); + + const deleted = tree.delete({low: 10, high: 30}); + expect(deleted).toBe(true); + expect(tree.length).toBe(2); + + const notDeleted = tree.delete({low: 100, high: 200}); + expect(notDeleted).toBe(false); + expect(tree.length).toBe(2); + }); + + it("should clear the tree", () => { + tree.insert({low: 15, high: 20}, "data1"); + tree.insert({low: 10, high: 30}, "data2"); + tree.clear(); + expect(tree.isEmpty()).toBe(true); + expect(tree.length).toBe(0); + }); + }); + + describe("contains method", () => { + beforeEach(() => { + tree.insert({low: 15, high: 20}, "interval1"); + tree.insert({low: 10, high: 30}, "interval2"); + tree.insert({low: 17, high: 19}, "interval3"); + tree.insert({low: 5, high: 20}, "interval4"); + tree.insert({low: 12, high: 15}, "interval5"); + tree.insert({low: 30, high: 40}, "interval6"); + }); + + it("should find an interval containing a point", () => { + const result = tree.contains(18); + expect(result).not.toBeNull(); + expect(result.interval.low).toBeLessThanOrEqual(18); + expect(result.interval.high).toBeGreaterThanOrEqual(18); + }); + + it("should return null when no interval contains the point", () => { + const result = tree.contains(45); + expect(result).toBeNull(); + }); + + it("should find interval at lower boundary", () => { + const result = tree.contains(15); + expect(result).not.toBeNull(); + expect(result.interval.low).toBeLessThanOrEqual(15); + expect(result.interval.high).toBeGreaterThanOrEqual(15); + }); + + it("should find interval at upper boundary", () => { + const result = tree.contains(40); + expect(result).not.toBeNull(); + expect(result.data).toBe("interval6"); + }); + + it("should find single-point interval", () => { + tree.clear(); + tree.insert({low: 25, high: 25}, "point"); + const result = tree.contains(25); + expect(result).not.toBeNull(); + expect(result.data).toBe("point"); + }); + + it("should return null for point just outside intervals", () => { + tree.clear(); + tree.insert({low: 10, high: 20}, "range"); + expect(tree.contains(9)).toBeNull(); + expect(tree.contains(21)).toBeNull(); + }); + + it("should work with negative numbers", () => { + tree.clear(); + tree.insert({low: -100, high: -50}, "negative"); + tree.insert({low: -10, high: 10}, "crosses-zero"); + + const result1 = tree.contains(-75); + expect(result1).not.toBeNull(); + expect(result1.data).toBe("negative"); + + const result2 = tree.contains(0); + expect(result2).not.toBeNull(); + expect(result2.data).toBe("crosses-zero"); + }); + + it("should handle overlapping intervals efficiently", () => { + tree.clear(); + // Insert multiple overlapping intervals + tree.insert({low: 0, high: 100}, "large"); + tree.insert({low: 40, high: 60}, "medium"); + tree.insert({low: 48, high: 52}, "small"); + + // Should find at least one + const result = tree.contains(50); + expect(result).not.toBeNull(); + expect(result.interval.low).toBeLessThanOrEqual(50); + expect(result.interval.high).toBeGreaterThanOrEqual(50); + }); + }); + + describe("overlap detection", () => { + beforeEach(() => { + tree.insert({low: 15, high: 20}, "interval1"); + tree.insert({low: 10, high: 30}, "interval2"); + tree.insert({low: 17, high: 19}, "interval3"); + tree.insert({low: 5, high: 20}, "interval4"); + tree.insert({low: 12, high: 15}, "interval5"); + tree.insert({low: 30, high: 40}, "interval6"); + }); + + it("should find all overlapping intervals", () => { + const results = tree.search({low: 14, high: 16}); + expect(results.length).toBe(4); + + const dataValues = results.map((r) => r.data).sort(); + expect(dataValues).toEqual(["interval1", "interval2", "interval4", "interval5"]); + }); + + it("should find single overlapping interval", () => { + const result = tree.findAny({low: 35, high: 37}); + expect(result).not.toBeNull(); + expect(result.data).toBe("interval6"); + }); + + it("should return empty array when no overlaps exist", () => { + const results = tree.search({low: 41, high: 50}); + expect(results.length).toBe(0); + }); + + it("should return null when no single overlap exists", () => { + const result = tree.findAny({low: 41, high: 50}); + expect(result).toBeNull(); + }); + + it("should detect overlap with single-point intervals", () => { + tree.clear(); + tree.insert({low: 10, high: 10}, "point"); + tree.insert({low: 5, high: 15}, "range"); + + const results = tree.search({low: 10, high: 10}); + expect(results.length).toBe(2); + }); + + it("should detect edge overlaps", () => { + tree.clear(); + tree.insert({low: 10, high: 20}, "edge1"); + + // Overlaps at left edge + const leftEdge = tree.search({low: 5, high: 10}); + expect(leftEdge.length).toBe(1); + + // Overlaps at right edge + const rightEdge = tree.search({low: 20, high: 25}); + expect(rightEdge.length).toBe(1); + + // No overlap just outside + const noOverlap = tree.search({low: 21, high: 25}); + expect(noOverlap.length).toBe(0); + }); + }); + + describe("tree structure", () => { + it("should maintain balance after insertions", () => { + // Insert intervals in sorted order (worst case for unbalanced tree) + for (let i = 0; i < 100; i++) { + tree.insert({low: i, high: i + 5}, `data${i}`); + } + expect(tree.isBalanced()).toBe(true); + expect(tree.length).toBe(100); + }); + + it("should maintain balance after deletions", () => { + const intervals = []; + for (let i = 0; i < 50; i++) { + const interval = {low: i, high: i + 5}; + intervals.push(interval); + tree.insert(interval, `data${i}`); + } + + // Delete every other interval + for (let i = 0; i < 50; i += 2) { + tree.delete(intervals[i]); + } + + expect(tree.isBalanced()).toBe(true); + expect(tree.length).toBe(25); + }); + }); + + describe("toArray", () => { + it("should return all intervals in sorted order", () => { + tree.insert({low: 15, high: 20}, "data1"); + tree.insert({low: 10, high: 30}, "data2"); + tree.insert({low: 17, high: 19}, "data3"); + tree.insert({low: 5, high: 8}, "data4"); + + const array = tree.toArray(); + expect(array.length).toBe(4); + + // Check that intervals are sorted by low value + for (let i = 0; i < array.length - 1; i++) { + expect(array[i].interval.low).toBeLessThanOrEqual(array[i + 1].interval.low); + } + }); + + it("should return empty array for empty tree", () => { + const array = tree.toArray(); + expect(array).toEqual([]); + }); + }); + + describe("complex scenarios", () => { + it("should handle many overlapping intervals", () => { + // Create many overlapping intervals centered around [50, 60] + for (let i = 0; i < 20; i++) { + tree.insert({low: 45 + i, high: 55 + i}, `overlap${i}`); + } + + const results = tree.search({low: 50, high: 60}); + expect(results.length).toBeGreaterThan(10); + }); + + it("should handle intervals with large ranges", () => { + tree.insert({low: 0, high: 1000000}, "large"); + tree.insert({low: 500, high: 600}, "small"); + + const results = tree.search({low: 550, high: 560}); + expect(results.length).toBe(2); + }); + + it("should handle negative intervals", () => { + tree.insert({low: -100, high: -50}, "negative1"); + tree.insert({low: -75, high: -25}, "negative2"); + tree.insert({low: -10, high: 10}, "crosses-zero"); + + const results = tree.search({low: -60, high: -40}); + expect(results.length).toBe(2); + + const crossResults = tree.search({low: -5, high: 5}); + expect(crossResults.length).toBe(1); + expect(crossResults[0].data).toBe("crosses-zero"); + }); + + it("should work with different data types", () => { + const tree2 = new IntervalTree(); + + tree2.insert({low: 1, high: 5}, {name: "Alice", age: 30}); + tree2.insert({low: 3, high: 7}, {name: "Bob", age: 25}); + + const results = tree2.search({low: 4, high: 6}); + expect(results.length).toBe(2); + expect(results.find((r) => r.data.name === "Alice")).toBeDefined(); + expect(results.find((r) => r.data.name === "Bob")).toBeDefined(); + }); + }); + + describe("stress test", () => { + it("should handle large number of random intervals efficiently", () => { + const intervals = []; + + // Insert 1000 random intervals + for (let i = 0; i < 1000; i++) { + const low = Math.floor(Math.random() * 10000); + const high = low + Math.floor(Math.random() * 100) + 1; + const interval = {low, high}; + intervals.push(interval); + tree.insert(interval, `data${i}`); + } + + expect(tree.length).toBe(1000); + expect(tree.isBalanced()).toBe(true); + + // Perform random searches + for (let i = 0; i < 100; i++) { + const searchLow = Math.floor(Math.random() * 10000); + const searchHigh = searchLow + Math.floor(Math.random() * 100) + 1; + const results = tree.search({low: searchLow, high: searchHigh}); + + // Verify all results actually overlap + for (const result of results) { + const overlaps = result.interval.low <= searchHigh && searchLow <= result.interval.high; + expect(overlaps).toBe(true); + } + } + }); + }); +}); From 89fda22d11e52ad3373fb2c89bb7ae20b73198a1 Mon Sep 17 00:00:00 2001 From: Luyu Cheng <2239547+chengluyu@users.noreply.github.com> Date: Wed, 29 Oct 2025 02:13:48 +0800 Subject: [PATCH 03/18] Implement automatic block updates when the user changes --- editor/blockIndicator.ts | 82 +++++++++++ editor/blockMetadata.ts | 293 ++++++++++++++++++++++++++++++++++++++- editor/decoration.js | 9 +- editor/index.css | 39 ++++++ editor/index.js | 11 +- runtime/index.js | 28 ++-- 6 files changed, 440 insertions(+), 22 deletions(-) create mode 100644 editor/blockIndicator.ts diff --git a/editor/blockIndicator.ts b/editor/blockIndicator.ts new file mode 100644 index 0000000..7609ab3 --- /dev/null +++ b/editor/blockIndicator.ts @@ -0,0 +1,82 @@ +import {GutterMarker, gutter} from "@codemirror/view"; +import {BlockMetadata, blockMetadataField} from "./blockMetadata"; + +export class BlockIndicator extends GutterMarker { + constructor(private className: string) { + super(); + } + toDOM() { + const div = document.createElement("div"); + div.className = this.className; + return div; + } +} + +const indicatorMarkers = { + output: { + head: new BlockIndicator("cm-block-indicator output head"), + tail: new BlockIndicator("cm-block-indicator output tail"), + sole: new BlockIndicator("cm-block-indicator output head tail"), + body: new BlockIndicator("cm-block-indicator output"), + }, + source: { + head: new BlockIndicator("cm-block-indicator source head"), + tail: new BlockIndicator("cm-block-indicator source tail"), + sole: new BlockIndicator("cm-block-indicator source head tail"), + body: new BlockIndicator("cm-block-indicator source"), + }, + error: { + head: new BlockIndicator("cm-block-indicator error head"), + tail: new BlockIndicator("cm-block-indicator error tail"), + sole: new BlockIndicator("cm-block-indicator error head tail"), + body: new BlockIndicator("cm-block-indicator error"), + }, +}; + +export const blockIndicator = gutter({ + class: "cm-blockIndicators", + lineMarker(view, line) { + const blocks = view.state.field(blockMetadataField, false); + if (blocks === undefined) return null; + const index = findEnclosingBlock(blocks, line.from); + if (index === null) return null; + const currentLine = view.state.doc.lineAt(line.from).number; + const sourceFirstLine = view.state.doc.lineAt(blocks[index].source.from).number; + const group = blocks[index].error + ? indicatorMarkers.error + : currentLine < sourceFirstLine + ? indicatorMarkers.output + : indicatorMarkers.source; + const blockFirstLine = view.state.doc.lineAt(blocks[index].from).number; + const blockLastLine = view.state.doc.lineAt(blocks[index].to).number; + if (blockFirstLine === currentLine) { + return blockLastLine === currentLine ? group.sole : group.head; + } else if (blockLastLine === currentLine) { + return group.tail; + } else { + return group.body; + } + }, + initialSpacer() { + return indicatorMarkers.source.body; + }, +}); + +function findEnclosingBlock(blocks: BlockMetadata[], pos: number): number | null { + let left = 0; + let right = blocks.length - 1; + + while (left <= right) { + const middle = (left + right) >>> 1; + const pivot = blocks[middle]; + if (pos < pivot.from) { + right = middle - 1; + } else if (pos > pivot.to) { + left = middle + 1; + } else { + return middle; + } + } + + return null; +} diff --git a/editor/blockMetadata.ts b/editor/blockMetadata.ts index 2fd826d..5b2e380 100644 --- a/editor/blockMetadata.ts +++ b/editor/blockMetadata.ts @@ -1,11 +1,287 @@ -import {StateField, StateEffect} from "@codemirror/state"; +import {StateField, StateEffect, Transaction} from "@codemirror/state"; +import {syntaxTree} from "@codemirror/language"; +import {OUTPUT_MARK, ERROR_MARK} from "../runtime/constant.js"; +import {EditorState} from "@codemirror/state"; + +const OUTPUT_MARK_CODE_POINT = OUTPUT_MARK.codePointAt(0); +const ERROR_MARK_CODE_POINT = ERROR_MARK.codePointAt(0); + +type Range = {from: number; to: number}; + +export function BlockMetadata(output: Range | null, source: Range, attributes: Record = {}) { + return { + output, + source, + get from() { + return this.output?.from ?? this.source.from; + }, + get to() { + return this.source.to; + }, + attributes, + error: false, + }; +} + +/** + * Detect blocks in a given range by traversing the syntax tree. + * Similar to how runtime/index.js uses acorn to parse blocks, but adapted for CodeMirror. + */ +function rebuiltBlocksWithinRange(state: EditorState, from: number, to: number): BlockMetadata[] { + const blocks: BlockMetadata[] = []; + + // Collect all top-level statements and their preceding output/error comment lines + const statementRanges: Range[] = []; + const outputRanges = new Map(); // Map statement position to output range + + syntaxTree(state).iterate({ + from, + to, + enter: (node) => { + // Detect top-level statements (direct children of Script) + if (node.node.parent?.name === "Script") { + // Check if this is a statement (not a comment) + const isStatement = + node.name.includes("Statement") || + node.name.includes("Declaration") || + node.name === "ExportDeclaration" || + node.name === "ImportDeclaration" || + node.name === "Block"; + + if (isStatement) { + statementRanges.push({from: node.from, to: node.to}); + } + } + + // Detect output/error comment lines (top-level line comments) + if (node.name === "LineComment" && node.node.parent?.name === "Script") { + const line = state.doc.lineAt(node.from); + // Check if the line comment covers the entire line + if (line.from === node.from && line.to === node.to) { + const codePoint = line.text.codePointAt(2); + if (codePoint === OUTPUT_MARK_CODE_POINT || codePoint === ERROR_MARK_CODE_POINT) { + // Find consecutive output/error lines + let outputStart = line.from; + let outputEnd = line.to; + + // Look backwards for more output/error lines + let currentLineNum = line.number - 1; + while (currentLineNum >= 1) { + const prevLine = state.doc.line(currentLineNum); + const prevCodePoint = prevLine.text.codePointAt(2); + if ( + prevLine.text.startsWith("//") && + (prevCodePoint === OUTPUT_MARK_CODE_POINT || prevCodePoint === ERROR_MARK_CODE_POINT) + ) { + outputStart = prevLine.from; + currentLineNum--; + } else { + break; + } + } + + // Look forwards for more output/error lines + currentLineNum = line.number + 1; + const totalLines = state.doc.lines; + while (currentLineNum <= totalLines) { + const nextLine = state.doc.line(currentLineNum); + const nextCodePoint = nextLine.text.codePointAt(2); + if ( + nextLine.text.startsWith("//") && + (nextCodePoint === OUTPUT_MARK_CODE_POINT || nextCodePoint === ERROR_MARK_CODE_POINT) + ) { + outputEnd = nextLine.to; + currentLineNum++; + } else { + break; + } + } + + // Find the next statement after these output lines + // The output belongs to the statement immediately following it + let nextStatementLine = currentLineNum; + if (nextStatementLine <= totalLines) { + const nextStmtLine = state.doc.line(nextStatementLine); + // Store this output range to be associated with the next statement + outputRanges.set(nextStmtLine.from, {from: outputStart, to: outputEnd}); + } + } + } + } + }, + }); + + // Build block metadata from statements + for (const range of statementRanges) { + blocks.push(BlockMetadata(outputRanges.get(range.from) ?? null, range)); + } + + return blocks; +} + +function updateBlocks(blocks: BlockMetadata[], tr: Transaction): void { + console.group("updateBlocks"); + + console.log("Original blocks:", structuredClone(blocks)); + + /** + * Find the block that contains the given position. If such block does not + * exist, return the nearest block that is right before or after the given + * position. When no blocks are before and after the given position, return + * `null`. + * @param pos the position we want to find + * @param side `-1` - lower bound, `1` - upper bound + */ + function findNearestBlock(pos: number, side: -1 | 1): number | null { + let left = 0; + let right = blocks.length; + + console.log(`pos = ${pos}, side = ${side}`); + + loop: while (left < right) { + console.log(`Search range [${left}, ${right})`); + const middle = (left + right) >>> 1; + const pivot = blocks[middle]; + + const from = pivot.output?.from ?? pivot.source.from; + const to = pivot.source.to; + console.log(`Pivot: ${middle} (from = ${from}, to = ${to})`); + + done: { + if (pos < from) { + console.log("Should go left"); + // Go left and search range [left, middle + 1) + if (middle === left) { + // We cannot move left anymore. + break done; + } else { + right = middle; + continue loop; + } + } else if (to <= pos) { + console.log("Should go right"); + // Go right and search range [middle, right) + if (middle === left) { + // We cannot move right anymore. + break done; + } else { + left = middle; + continue loop; + } + } else { + return middle; + } + } + if (side < 0) { + return left; + } else { + return left === 0 ? null : left - 1; + } + } + + return null; + } + + // Collect all ranges that need to be rescanned + type ChangedRange = {oldFrom: number; oldTo: number; newFrom: number; newTo: number}; + const changedRanges: ChangedRange[] = []; + tr.changes.iterChangedRanges((oldFrom, oldTo, newFrom, newTo) => { + changedRanges.push({oldFrom, oldTo, newFrom, newTo}); + }); + + if (changedRanges.length === 0) { + console.log("No changes detected"); + console.groupEnd(); + return; + } + + const affectedBlocks = new Set(); + + // Process changed ranges one by one, because ranges are disjoint. + for (const {oldFrom, oldTo, newFrom, newTo} of changedRanges) { + console.groupCollapsed(`Range ${oldFrom}-${oldTo} -> ${newFrom}-${newTo}`); + + // Step 1: Find the blocks that are affected by the change. + + const leftmost = findNearestBlock(oldFrom, -1); + const rightmost = findNearestBlock(oldTo, 1); + + console.log(`Affected block range: ${leftmost}-${rightmost}`); + + if (leftmost === null || rightmost === null || leftmost > rightmost) { + // No blocks are affected by this change, so we can skip it. + console.groupEnd(); + continue; + } + + // Step 2: Rebuild affected blocks. + + if (leftmost === rightmost) { + // The change affects only one block. We special case this scenario since + // we can possibly reuse the existing block attributes if the changed + // content is still a single block. + const block = blocks[leftmost]; + + const newBlockFrom = tr.changes.mapPos(block.from, -1); + const newBlockTo = tr.changes.mapPos(block.to, 1); + + console.log(`Only one block is affected. Rebuilting from ${block.from} to ${block.to}...`); + const rebuiltBlocks = rebuiltBlocksWithinRange(tr.state, newBlockFrom, newBlockTo); + + console.log(`Rebuilt blocks:`, rebuiltBlocks); + + if (rebuiltBlocks.length === 1) { + const newBlock = rebuiltBlocks[0]; + newBlock.attributes = block.attributes; + affectedBlocks.add(newBlock); + blocks[leftmost] = newBlock; + } else { + blocks.splice(leftmost, 1, ...rebuiltBlocks); + } + affectedBlocks.add(block); + } else { + // Multiple blocks are affected. + const rebuiltBlocks = rebuiltBlocksWithinRange(tr.state, newFrom, newTo); + rebuiltBlocks.forEach((block) => affectedBlocks.add(block)); + blocks.splice(leftmost, rightmost - leftmost + 1, ...rebuiltBlocks); + } + + console.groupEnd(); + } + + // Step 3: Map the unaffected blocks to new positions; + for (let i = 0, n = blocks.length; i < n; i++) { + const block = blocks[i]; + // Skip affected blocks as they have been updated. + if (affectedBlocks.has(block)) continue; + + // Map unaffected blocks to new positions + block.output = block.output + ? { + from: tr.changes.mapPos(block.output.from, -1), + to: tr.changes.mapPos(block.output.to, 1), + } + : null; + block.source = { + from: tr.changes.mapPos(block.source.from, -1), + to: tr.changes.mapPos(block.source.to, 1), + }; + } + + console.log("Updated blocks:", blocks); + + console.groupEnd(); +} export const blockMetadataEffect = StateEffect.define(); -type BlockMetadata = { - output: {from: number; to: number} | null; - source: {from: number; to: number}; +export type BlockMetadata = { + output: Range | null; + source: Range; + readonly from: number; + readonly to: number; attributes: Record; + error: boolean; }; export const blockMetadataField = StateField.define({ @@ -25,12 +301,14 @@ export const blockMetadataField = StateField.define({ if (blocksFromEffect === null) { // If the block attributes effect is not present, then this transaction // is made by the user, we need to update the block attributes accroding - // to the latest syntax tree. TODO + // to the latest syntax tree. + updateBlocks(blocks, tr); return blocks; } else { // Otherwise, we need to update the block attributes according to the // metadata sent from the runtime. Most importantly, we need to translate // the position of each block after the changes has been made. + console.group("Updating blocks from the effect"); for (const block of blocksFromEffect) { if (block.output === null) { const from = tr.changes.mapPos(block.source.from, -1); @@ -45,10 +323,13 @@ export const blockMetadataField = StateField.define({ from: tr.changes.mapPos(block.source.from, 1), to: tr.changes.mapPos(block.source.to, 1), }; + console.log(`output: ${block.output?.from} - ${block.output?.to}`); + console.log(`source: ${block.source.from} - ${block.source.to}`); } + console.groupEnd(); return blocksFromEffect; } }, }); -export const blockMetadata = blockMetadataField.extension; +export const blockMetadataExtension = blockMetadataField.extension; diff --git a/editor/decoration.js b/editor/decoration.js index 9e4913a..6c7c0df 100644 --- a/editor/decoration.js +++ b/editor/decoration.js @@ -25,17 +25,15 @@ function createWidgets(lines, blockMetadata, state) { const set1 = builder1.finish(); // Build the range set for block attributes. + console.groupCollapsed("Decorations for block attributes"); const builder2 = new RangeSetBuilder(); // Add block attribute decorations for (const {output, attributes} of blockMetadata) { + if (output === null) continue; // Apply decorations to each line in the block range const startLine = state.doc.lineAt(output.from); const endLine = state.doc.lineAt(output.to); - console.log("from:", output.from); - console.log("to:", output.to); - console.log("startLine:", startLine); - console.log("endLine:", endLine); - + console.log(`Make lines from ${startLine.number} to ${endLine.number} compact`); if (attributes.compact === true) { for (let lineNum = startLine.number; lineNum <= endLine.number; lineNum++) { const line = state.doc.line(lineNum); @@ -44,6 +42,7 @@ function createWidgets(lines, blockMetadata, state) { } } const set2 = builder2.finish(); + console.groupEnd(); const builder3 = new RangeSetBuilder(); for (const {output} of blockMetadata) { diff --git a/editor/index.css b/editor/index.css index 45579fb..a69a03d 100644 --- a/editor/index.css +++ b/editor/index.css @@ -159,6 +159,45 @@ } } + .cm-blockIndicators { + padding-left: 0.25rem; + + --gap-between-blocks: 2px; + } + + .cm-gutterElement .cm-block-indicator { + width: 0.25rem; + height: 100%; + + &.output { + background: #72aa006e; + } + + &.source { + background: #1f180021; + } + + &.error { + background: #df2600d1; + } + + &.head { + height: calc(100% - var(--gap-between-blocks)); + /*border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem;*/ + + &:not(.tail) { + transform: translate(0, var(--gap-between-blocks)); + } + } + + &.tail { + height: calc(100% - var(--gap-between-blocks)); + /*border-bottom-left-radius: 0.25rem; + border-bottom-right-radius: 0.25rem;*/ + } + } + /* We can't see background color, which is conflict with selection background color. * So we use svg pattern to simulate the background color. */ diff --git a/editor/index.js b/editor/index.js index 704b3fe..d2ab2a3 100644 --- a/editor/index.js +++ b/editor/index.js @@ -11,13 +11,15 @@ import * as eslint from "eslint-linter-browserify"; import {createRuntime} from "../runtime/index.js"; import {outputDecoration} from "./decoration.js"; import {outputLines} from "./outputLines.js"; -import {blockMetadata, blockMetadataEffect} from "./blockMetadata.ts"; +import {blockMetadataExtension, blockMetadataEffect} from "./blockMetadata.ts"; // import {outputProtection} from "./protection.js"; import {dispatch as d3Dispatch} from "d3-dispatch"; import {controls} from "./controls/index.js"; import {rechoCompletion} from "./completion.js"; import {docStringTag} from "./docStringTag.js"; import {commentLink} from "./commentLink.js"; +import {blockIndicator} from "./blockIndicator.ts"; +import {lineNumbers} from "@codemirror/view"; // @see https://github.com/UziTech/eslint-linter-browserify/blob/master/example/script.js // @see https://codemirror.net/examples/lint/ @@ -38,10 +40,13 @@ export function createEditor(container, options) { const dispatcher = d3Dispatch("userInput"); const runtimeRef = {current: null}; + const myBasicSetup = Array.from(basicSetup); + myBasicSetup.splice(2, 0, blockIndicator); + const state = EditorState.create({ doc: code, extensions: [ - basicSetup, + myBasicSetup, javascript(), githubLightInit({ styles: [ @@ -69,7 +74,7 @@ export function createEditor(container, options) { ]), javascriptLanguage.data.of({autocomplete: rechoCompletion}), outputLines, - blockMetadata, + blockMetadataExtension, outputDecoration, controls(runtimeRef), // Disable this for now, because it prevents copying/pasting the code. diff --git a/runtime/index.js b/runtime/index.js index 723038d..d8f21b7 100644 --- a/runtime/index.js +++ b/runtime/index.js @@ -6,7 +6,7 @@ import {dispatch as d3Dispatch} from "d3-dispatch"; import * as stdlib from "./stdlib.js"; import {OUTPUT_MARK, ERROR_MARK} from "./constant.js"; import {Inspector} from "./inspect.js"; -import {blockMetadataEffect} from "../editor/blockMetadata.ts"; +import {BlockMetadata, blockMetadataEffect} from "../editor/blockMetadata.ts"; import {IntervalTree} from "../lib/IntervalTree.ts"; const OUTPUT_PREFIX = `//${OUTPUT_MARK}`; @@ -107,9 +107,10 @@ export function createRuntime(initialCode) { for (const node of nodes) { const start = node.start; const {values} = node.state; + let outputRange = null; + let error = false; if (values.length) { let output = ""; - let error = false; for (let i = 0; i < values.length; i++) { const line = values[i]; const n = line.length; @@ -129,7 +130,6 @@ export function createRuntime(initialCode) { const prefixed = addPrefix(output, prefix); // Search for existing changes and update the inserted text if found. const entry = removedIntervals.contains(start - 1); - let outputRange = null; if (entry === null) { changes.push({from: start, insert: prefixed + "\n"}); } else { @@ -137,14 +137,17 @@ export function createRuntime(initialCode) { change.insert = prefixed + "\n"; outputRange = {from: change.from, to: change.to}; } - blocks.push({ - source: {from: node.start, to: node.end}, - output: outputRange, - attributes: node.state.attributes, - }); } + // Add this block to the block metadata array. + const block = BlockMetadata(outputRange, {from: node.start, to: node.end}, node.state.attributes); + block.error = error; + blocks.push(block); } + blocks.sort((a, b) => a.from - b.from); + + console.log(blocks); + // Attach block positions and attributes as effects to the transaction. const effects = [blockMetadataEffect.of(blocks)]; @@ -195,6 +198,9 @@ export function createRuntime(initialCode) { function split(code) { try { + // The `parse` call here is actually unnecessary. Parsing the entire code + // is quite expensive. If we can perform the splitting operation through + // the editor's syntax tree, we can save the parsing here. return parse(code, {ecmaVersion: "latest", sourceType: "module"}).body; } catch (error) { console.error(error); @@ -282,6 +288,12 @@ export function createRuntime(initialCode) { const nodes = split(code); if (!nodes) return; + console.group("rerun"); + for (const node of nodes) { + console.log(`Node ${node.type} (${node.start}-${node.end})`); + } + console.groupEnd(); + for (const node of nodes) { const cell = code.slice(node.start, node.end); const transpiled = transpile(cell); From 7cc57c23729e3020456396318ffec7f7f92b30e2 Mon Sep 17 00:00:00 2001 From: Luyu Cheng <2239547+chengluyu@users.noreply.github.com> Date: Wed, 29 Oct 2025 15:00:11 +0800 Subject: [PATCH 04/18] Fix failed tests due to changes in `onChanges` --- test/snapshpts.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/snapshpts.spec.js b/test/snapshpts.spec.js index 1157c51..dd605d4 100644 --- a/test/snapshpts.spec.js +++ b/test/snapshpts.spec.js @@ -12,7 +12,7 @@ describe("snapshots", () => { console.error = () => {}; try { const runtime = createRuntime(state.doc.toString()); - runtime.onChanges((changes) => (state = state.update({changes}).state)); + runtime.onChanges((specs) => (state = state.update(specs).state)); runtime.run(); await new Promise((resolve) => setTimeout(resolve, 100)); } catch (error) {} From ddb5cd5cd9adae48d82dd875ed5619333d0df3ef Mon Sep 17 00:00:00 2001 From: Luyu Cheng <2239547+chengluyu@users.noreply.github.com> Date: Thu, 30 Oct 2025 01:18:23 +0800 Subject: [PATCH 05/18] Add the transaction viewer to the test page --- editor/index.js | 3 +- test/index.css | 40 +++ test/index.html | 2 +- test/main.js | 30 ++- test/transactionViewer.css | 305 +++++++++++++++++++++++ test/transactionViewer.js | 496 +++++++++++++++++++++++++++++++++++++ 6 files changed, 871 insertions(+), 5 deletions(-) create mode 100644 test/transactionViewer.css create mode 100644 test/transactionViewer.js diff --git a/editor/index.js b/editor/index.js index d2ab2a3..cc998ac 100644 --- a/editor/index.js +++ b/editor/index.js @@ -36,7 +36,7 @@ const eslintConfig = { }; export function createEditor(container, options) { - const {code, onError} = options; + const {code, onError, extensions = []} = options; const dispatcher = d3Dispatch("userInput"); const runtimeRef = {current: null}; @@ -82,6 +82,7 @@ export function createEditor(container, options) { docStringTag, commentLink, linter(esLint(new eslint.Linter(), eslintConfig)), + ...extensions, ], }); diff --git a/test/index.css b/test/index.css index 99016db..1cf70b0 100644 --- a/test/index.css +++ b/test/index.css @@ -1 +1,41 @@ @import "../editor/index.css"; + +body { + font-family: + system-ui, + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + Oxygen, + Ubuntu, + Cantarell, + "Open Sans", + "Helvetica Neue", + sans-serif; + font-size: 16px; + + margin: 0; + padding: 0.5rem; + box-sizing: border-box; + display: flex; + flex-direction: row; + gap: 0.5rem; + height: 100vh; + width: 100vw; + + main { + flex: 1; + background: #55550003; + border: 1px solid #19130029; + padding: 0.75rem; + } + + aside { + width: 25rem; + padding: 0.75rem; + background: #25250007; + border: 1px solid #19130029; + overflow-y: auto; + } +} diff --git a/test/index.html b/test/index.html index 87fca19..3261143 100644 --- a/test/index.html +++ b/test/index.html @@ -5,9 +5,9 @@ Recho (Test) + -
diff --git a/test/main.js b/test/main.js index f0b60cf..98932dd 100644 --- a/test/main.js +++ b/test/main.js @@ -1,5 +1,15 @@ import * as jsTests from "./js/index.js"; import {createEditor} from "../editor/index.js"; +import {createTransactionViewer} from "./transactionViewer.js"; + +// The main and side panels +const mainPanel = document.createElement("main"); +mainPanel.id = "main-panel"; +document.body.append(mainPanel); + +const sidePanels = document.createElement("aside"); +sidePanels.id = "side-panels"; +document.body.append(sidePanels); // Select const select = createSelect(() => { @@ -9,26 +19,40 @@ const select = createSelect(() => { }); const options = Object.keys(jsTests).map(createOption); select.append(...options); -document.body.append(select); +mainPanel.append(select); const container = document.createElement("div"); container.id = "container"; -document.body.append(container); +mainPanel.append(container); // Init app name. const initialValue = new URL(location).searchParams.get("name"); if (jsTests[initialValue]) select.value = initialValue; let preEditor = null; +let transactionViewer = null; render(); async function render() { container.innerHTML = ""; if (preEditor) preEditor.destroy(); + if (transactionViewer) transactionViewer.destroy(); + + // Clear and reset side panels + sidePanels.innerHTML = ""; + + // Create transaction viewer + transactionViewer = createTransactionViewer(sidePanels); + const editorContainer = document.createElement("div"); const code = jsTests[select.value]; - const editor = createEditor(editorContainer, {code}); + const editor = createEditor(editorContainer, { + code, + extensions: [transactionViewer.plugin], + }); editor.run(); + preEditor = editor; + const runButton = document.createElement("button"); runButton.textContent = "Run"; runButton.onclick = () => editor.run(); diff --git a/test/transactionViewer.css b/test/transactionViewer.css new file mode 100644 index 0000000..23a9443 --- /dev/null +++ b/test/transactionViewer.css @@ -0,0 +1,305 @@ +/* Transaction Viewer Styles */ +.transaction-viewer { + font-size: 14px; + + display: flex; + flex-direction: column; + height: 100%; + + h3 { + margin: 0 0 0.75rem 0; + font-size: 1.1em; + font-weight: 600; + } +} + +.transaction-controls { + display: flex; + gap: 0.5rem; + align-items: center; + margin-bottom: 0.75rem; + padding-bottom: 0.75rem; + border-bottom: 1px solid #19130029; + + button { + padding: 0.25rem 0.5rem; + font-size: 12px; + border: 1px solid #19130029; + background: white; + border-radius: 3px; + cursor: pointer; + + &:hover { + background: #f6f6f6; + } + } + + label { + display: flex; + align-items: center; + gap: 0.25rem; + font-size: 12px; + cursor: pointer; + } +} + +.transaction-list-scrollable { + flex: 1; + min-height: 0; + overflow-y: auto; +} + +.transaction-list { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.no-transactions { + color: #666; + font-style: italic; + text-align: center; + padding: 2rem 0; +} + +.transaction-item { + border: 1px solid #d0d7de; + border-radius: 6px; + background: white; + padding: 0; + transition: all 0.2s; + + &[open] { + border-color: #8b949e; + } + + &.transaction-group { + border-color: #9a6dd7; + background: #faf8ff; + + &[open] { + border-color: #7c3aed; + } + + summary { + background: #f3e8ff; + + &:hover { + background: #e9d5ff; + } + } + } + + summary { + padding: 0.5rem; + cursor: pointer; + font-weight: 500; + font-family: ui-monospace, monospace; + font-size: 12px; + user-select: none; + background: #f6f8fa; + border-radius: 5px; + display: flex; + justify-content: space-between; + align-items: center; + gap: 0.5rem; + + &:hover { + background: #eaeef2; + } + } + + .tr-summary-left { + flex: 1; + min-width: 0; + } + + .tr-summary-right { + flex-shrink: 0; + color: #6e7781; + font-size: 11px; + } + + &.user-transaction summary { + background: #dff6dd; + + &:hover { + background: #c8f0c5; + } + } + + &.remote-transaction summary { + background: #fff8c5; + + &:hover { + background: #fff3b0; + } + } + + &.doc-changed summary { + font-weight: 600; + } +} + +.tr-details { + padding: 0.75rem; + font-size: 12px; + line-height: 1.5; +} + +.tr-field { + margin-bottom: 0.5rem; + + strong { + color: #1f2328; + } +} + +.tr-change { + margin-left: 1rem; + margin-bottom: 0.5rem; + padding: 0.5rem; + background: #f6f8fa; + border-radius: 4px; + font-size: 11px; + + code { + background: #ffffff; + padding: 0.125rem 0.25rem; + border-radius: 3px; + font-family: ui-monospace, monospace; + border: 1px solid #d0d7de; + } +} + +.deleted { + color: #cf222e; + margin-top: 0.25rem; +} + +.inserted { + color: #1a7f37; + margin-top: 0.25rem; +} + +.tr-annotation { + margin-left: 1rem; + padding: 0.25rem 0.5rem; + background: #dff6ff; + border-left: 3px solid #0969da; + font-family: ui-monospace, monospace; + font-size: 11px; + margin-bottom: 0.25rem; + border-radius: 3px; +} + +.tr-effect { + margin-left: 1rem; + padding: 0.25rem 0.5rem; + background: #fbefff; + border-left: 3px solid #8250df; + font-family: ui-monospace, monospace; + font-size: 11px; + margin-bottom: 0.25rem; + border-radius: 3px; +} + +.tr-selection { + margin-left: 1rem; + padding: 0.25rem 0.5rem; + background: #fff8c5; + border-left: 3px solid #bf8700; + font-family: ui-monospace, monospace; + font-size: 11px; + margin-bottom: 0.25rem; + border-radius: 3px; +} + +.tr-property { + margin-left: 1rem; + padding: 0.25rem 0.5rem; + background: #f6f8fa; + border-left: 3px solid #6e7781; + font-family: ui-monospace, monospace; + font-size: 11px; + margin-bottom: 0.25rem; + border-radius: 3px; +} + +.tr-effect-block-metadata { + background: #f3e8ff; + border-left-color: #a855f7; + padding: 0.5rem; +} + +.tr-effect-title { + font-weight: 600; + margin-bottom: 0.5rem; + color: #7c3aed; +} + +.tr-block-metadata { + margin-left: 0.5rem; + margin-top: 0.5rem; + padding: 0.5rem; + background: white; + border: 1px solid #e9d5ff; + border-radius: 3px; +} + +.tr-block-header { + font-weight: 600; + margin-bottom: 0.25rem; + color: #6b21a8; +} + +.tr-block-detail { + font-size: 11px; + margin-left: 0.5rem; + margin-bottom: 0.125rem; + color: #4b5563; +} + +.tr-block-error { + color: #dc2626; + font-weight: 600; +} + +.tr-grouped-list { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.tr-grouped-item { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.375rem 0.5rem; + background: white; + border: 1px solid #e9d5ff; + border-radius: 4px; + font-size: 11px; + font-family: ui-monospace, monospace; +} + +.tr-grouped-index { + font-weight: 600; + color: #7c3aed; + min-width: 2.5rem; +} + +.tr-grouped-selection { + flex: 1; + color: #4b5563; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.tr-grouped-time { + color: #9ca3af; + font-size: 10px; + flex-shrink: 0; +} diff --git a/test/transactionViewer.js b/test/transactionViewer.js new file mode 100644 index 0000000..b7447e7 --- /dev/null +++ b/test/transactionViewer.js @@ -0,0 +1,496 @@ +import {ViewPlugin} from "@codemirror/view"; +import {Transaction} from "@codemirror/state"; +import {blockMetadataEffect} from "../editor/blockMetadata.ts"; + +// Maximum number of transactions to keep in history +const MAX_HISTORY = 100; + +/** + * Creates a transaction tracker plugin and UI viewer + */ +export function createTransactionViewer(container) { + const transactions = []; + const listeners = new Set(); + let nextIndex = 0; // Continuous index counter + + // Notify all listeners when transactions update + function notifyListeners() { + listeners.forEach((fn) => fn(transactions)); + } + + // Create the ViewPlugin to track transactions + const plugin = ViewPlugin.fromClass( + class { + constructor(view) { + // Capture initial state as transaction 0 + const initialTr = { + index: nextIndex++, + docChanged: false, + changes: [], + annotations: {}, + effects: [], + selection: view.state.selection.ranges.map((r) => ({ + from: r.from, + to: r.to, + anchor: r.anchor, + head: r.head, + })), + timestamp: Date.now(), + }; + transactions.push(initialTr); + notifyListeners(); + } + + update(update) { + // Process each transaction in the update + update.transactions.forEach((tr, idx) => { + const transactionData = extractTransactionData(tr, nextIndex++); + + // Add to history + transactions.push(transactionData); + + // Keep only the last MAX_HISTORY transactions + if (transactions.length > MAX_HISTORY) { + transactions.shift(); + } + }); + + if (update.transactions.length > 0) { + notifyListeners(); + } + } + }, + ); + + // Extract data from a transaction + function extractTransactionData(tr, index) { + const data = { + index, + docChanged: tr.docChanged, + changes: [], + annotations: {}, + effects: [], + selection: tr.state.selection.ranges.map((r) => ({ + from: r.from, + to: r.to, + anchor: r.anchor, + head: r.head, + })), + scrollIntoView: tr.scrollIntoView, + filter: tr.filter, + sequential: tr.sequential, + timestamp: Date.now(), + }; + + // Extract changes with line/column information + // Use startState for from/to positions (before the change) + tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => { + const fromLine = tr.startState.doc.lineAt(fromA); + const toLine = tr.startState.doc.lineAt(toA); + + data.changes.push({ + from: fromA, + to: toA, + fromLine: fromLine.number, + fromCol: fromA - fromLine.from, + toLine: toLine.number, + toCol: toA - toLine.from, + insert: inserted.toString(), + }); + }); + + // Extract annotations + const userEvent = tr.annotation(Transaction.userEvent); + if (userEvent !== undefined) { + data.annotations.userEvent = userEvent; + } + + const remote = tr.annotation(Transaction.remote); + if (remote !== undefined) { + data.annotations.remote = remote; + } + + // Check for other common annotations + const addToHistory = tr.annotation(Transaction.addToHistory); + if (addToHistory !== undefined) { + data.annotations.addToHistory = addToHistory; + } + + // Extract effects + for (const effect of tr.effects) { + const effectData = { + value: effect.value, + type: "StateEffect", + }; + + // Check if this is a blockMetadataEffect + if (effect.is(blockMetadataEffect)) { + effectData.type = "blockMetadataEffect"; + effectData.blockMetadata = effect.value; + } + + data.effects.push(effectData); + } + + return data; + } + + // Create the UI + const viewerElement = document.createElement("div"); + viewerElement.className = "transaction-viewer"; + viewerElement.innerHTML = ` +

Transactions

+
+ + +
+
+
+
+ `; + + const listElement = viewerElement.querySelector(".transaction-list"); + const clearButton = viewerElement.querySelector("#clear-transactions"); + const autoScrollCheckbox = viewerElement.querySelector("#auto-scroll"); + + clearButton.onclick = () => { + transactions.length = 0; + nextIndex = 0; // Reset the index counter + renderTransactions(); + }; + + function renderTransactions() { + listElement.innerHTML = ""; + + if (transactions.length === 0) { + listElement.innerHTML = '
No transactions yet
'; + return; + } + + // Group transactions - group consecutive selection transactions + const groups = []; + let currentGroup = null; + + // Process in reverse order (newest first) + for (let i = transactions.length - 1; i >= 0; i--) { + const tr = transactions[i]; + const isSelection = tr.annotations.userEvent === "select" || tr.annotations.userEvent === "select.pointer"; + + if (isSelection) { + if (currentGroup && currentGroup.type === "selection") { + // Add to existing selection group + currentGroup.transactions.push(tr); + } else { + // Start a new selection group + currentGroup = { + type: "selection", + transactions: [tr], + }; + groups.push(currentGroup); + } + } else { + // Non-selection transaction - add as individual + groups.push({ + type: "individual", + transaction: tr, + }); + currentGroup = null; + } + } + + // Render groups + for (const group of groups) { + if (group.type === "individual") { + const item = createTransactionItem(group.transaction); + listElement.appendChild(item); + } else { + const groupItem = createSelectionGroupItem(group.transactions); + listElement.appendChild(groupItem); + } + } + + // Auto-scroll to top (latest transaction) + if (autoScrollCheckbox.checked) { + listElement.scrollTop = 0; + } + } + + /** + * + * @param {import("@codemirror/state").TransactionSpec} tr + * @returns + */ + function createSelectionGroupItem(transactions) { + const item = document.createElement("details"); + item.className = "transaction-item transaction-group"; + + const count = transactions.length; + const firstTr = transactions[0]; + const lastTr = transactions[transactions.length - 1]; + + // Format timestamps + const firstTime = new Date(firstTr.timestamp); + const lastTime = new Date(lastTr.timestamp); + const firstTimeStr = + firstTime.toLocaleTimeString("en-US", { + hour12: false, + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + }) + + "." + + firstTime.getMilliseconds().toString().padStart(3, "0"); + const lastTimeStr = + lastTime.toLocaleTimeString("en-US", { + hour12: false, + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + }) + + "." + + lastTime.getMilliseconds().toString().padStart(3, "0"); + + const summaryLeft = `#${lastTr.index}-${firstTr.index} [select] (${count} transactions)`; + const summaryRight = `${lastTimeStr} - ${firstTimeStr}`; + + // Create list of individual transactions + const transactionsList = transactions + .map((tr) => { + const time = new Date(tr.timestamp); + const timeStr = + time.toLocaleTimeString("en-US", { + hour12: false, + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + }) + + "." + + time.getMilliseconds().toString().padStart(3, "0"); + + const selectionInfo = tr.selection + .map((range, idx) => { + const isCursor = range.from === range.to; + return isCursor ? `cursor at ${range.from}` : `${range.from}-${range.to}`; + }) + .join(", "); + + return ` +
+ #${tr.index} + ${selectionInfo} + ${timeStr} +
+ `; + }) + .join(""); + + item.innerHTML = ` + + ${summaryLeft} + ${summaryRight} + +
+
+ ${transactionsList} +
+
+ `; + + return item; + } + + function createTransactionItem(tr) { + const item = document.createElement("details"); + item.className = "transaction-item"; + + // Add classes based on transaction type + if (tr.annotations.userEvent) { + item.classList.add("user-transaction"); + } + if (tr.annotations.remote) { + item.classList.add("remote-transaction"); + } + if (tr.docChanged) { + item.classList.add("doc-changed"); + } + + // Format timestamp as HH:MM:SS.mmm + const time = new Date(tr.timestamp); + const timeStr = + time.toLocaleTimeString("en-US", { + hour12: false, + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + }) + + "." + + time.getMilliseconds().toString().padStart(3, "0"); + + let summaryLeft = `#${tr.index}`; + if (tr.annotations.userEvent) { + summaryLeft += ` [${tr.annotations.userEvent}]`; + } else if (tr.annotations.remote) { + summaryLeft += ` [remote: ${JSON.stringify(tr.annotations.remote)}]`; + } + if (tr.docChanged) { + summaryLeft += ` 📝`; + } + + const details = []; + + // Document changed + details.push(`
Doc Changed: ${tr.docChanged}
`); + + // Changes + if (tr.changes.length > 0) { + details.push(`
Changes:
`); + tr.changes.forEach((change, idx) => { + const deleted = change.to - change.from; + const inserted = change.insert.length; + const samePos = change.from === change.to; + const sameLine = change.fromLine === change.toLine; + + let posInfo = `pos ${change.from}-${change.to}`; + if (sameLine) { + posInfo += ` (L${change.fromLine}:${change.fromCol}-${change.toCol})`; + } else { + posInfo += ` (L${change.fromLine}:${change.fromCol} to L${change.toLine}:${change.toCol})`; + } + + details.push(` +
+
Change ${idx + 1}: ${posInfo}
+ ${deleted > 0 ? `
Deleted ${deleted} chars
` : ""} + ${inserted > 0 ? `
Inserted: ${escapeHtml(change.insert)}
` : ""} +
+ `); + }); + } else { + details.push(`
Changes: none
`); + } + + // Annotations + if (Object.keys(tr.annotations).length > 0) { + details.push(`
Annotations:
`); + for (const [key, value] of Object.entries(tr.annotations)) { + details.push(`
${key}: ${JSON.stringify(value)}
`); + } + } else { + details.push(`
Annotations: none
`); + } + + // Effects + if (Array.isArray(tr.effects) && tr.effects.length > 0) { + details.push(`
Effects: ${tr.effects.length}
`); + tr.effects.forEach((effect, idx) => { + if (effect.type === "blockMetadataEffect" && effect.blockMetadata) { + // Special handling for blockMetadataEffect + details.push(` +
+
Effect ${idx + 1}: blockMetadataEffect (${effect.blockMetadata.length} blocks)
+ ${effect.blockMetadata + .map( + (block, blockIdx) => ` +
+
Block ${blockIdx + 1}:
+
+ ${block.output !== null ? `Output: ${block.output.from}-${block.output.to}` : "Output: null"} +
+
+ Source: ${block.source.from}-${block.source.to} +
+ ${ + Object.keys(block.attributes).length > 0 + ? `
Attributes: ${JSON.stringify(block.attributes)}
` + : "" + } + ${block.error ? '
Error: true
' : ""} +
+ `, + ) + .join("")} +
+ `); + } else { + // Generic effect display + details.push(` +
+ Effect ${idx + 1} (${effect.type}): ${JSON.stringify(effect.value).substring(0, 100)} +
+ `); + } + }); + } else { + details.push(`
Effects: none
`); + } + + // Selection + details.push(`
Selection:
`); + tr.selection.forEach((range, idx) => { + const isCursor = range.from === range.to; + details.push(` +
+ Range ${idx + 1}: ${isCursor ? `cursor at ${range.from}` : `${range.from}-${range.to}`} + ${!isCursor ? `(anchor: ${range.anchor}, head: ${range.head})` : ""} +
+ `); + }); + + // Additional transaction properties + const additionalProps = []; + if (tr.scrollIntoView !== undefined) { + additionalProps.push(`scrollIntoView: ${tr.scrollIntoView}`); + } + if (tr.filter !== undefined) { + additionalProps.push(`filter: ${tr.filter}`); + } + if (tr.sequential !== undefined) { + additionalProps.push(`sequential: ${tr.sequential}`); + } + + if (additionalProps.length > 0) { + details.push(`
Other Properties:
`); + additionalProps.forEach((prop) => { + details.push(`
${prop}
`); + }); + } + + item.innerHTML = ` + + ${summaryLeft} + ${timeStr} + +
+ ${details.join("")} +
+ `; + + return item; + } + + function escapeHtml(text) { + const div = document.createElement("div"); + div.textContent = text; + return div.innerHTML; + } + + // Listen for transaction updates + listeners.add(renderTransactions); + + // Initial render + renderTransactions(); + + // Append to container + container.appendChild(viewerElement); + + return { + plugin, + destroy: () => { + listeners.clear(); + viewerElement.remove(); + }, + }; +} From f3a2202b2db69264ff345858feb8629924306995 Mon Sep 17 00:00:00 2001 From: Luyu Cheng <2239547+chengluyu@users.noreply.github.com> Date: Fri, 14 Nov 2025 15:12:14 +0800 Subject: [PATCH 06/18] Implement the playground using React --- package.json | 2 + pnpm-lock.yaml | 380 ++++++++++++++++++++- test/components/App.tsx | 50 +++ test/components/Editor.tsx | 129 +++++++ test/components/TestSelector.tsx | 30 ++ test/components/TransactionViewer.tsx | 471 ++++++++++++++++++++++++++ test/index.html | 5 +- test/main.tsx | 18 + test/store.ts | 61 ++++ test/styles.css | 41 +++ vite.config.js | 2 + 11 files changed, 1182 insertions(+), 7 deletions(-) create mode 100644 test/components/App.tsx create mode 100644 test/components/Editor.tsx create mode 100644 test/components/TestSelector.tsx create mode 100644 test/components/TransactionViewer.tsx create mode 100644 test/main.tsx create mode 100644 test/store.ts create mode 100644 test/styles.css diff --git a/package.json b/package.json index d590b79..29ecad5 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ }, "devDependencies": { "@tailwindcss/postcss": "^4.1.14", + "@vitejs/plugin-react": "^4.3.1", "clsx": "^2.1.1", "eslint": "^9.37.0", "eslint-config-prettier": "^10.1.8", @@ -77,6 +78,7 @@ "d3-require": "^1.3.0", "eslint-linter-browserify": "^9.37.0", "friendly-words": "^1.3.1", + "jotai": "^2.10.3", "next": "^15.5.6", "nstr": "^0.1.3", "object-inspect": "^1.13.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d53fa13..2dbdf11 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -80,9 +80,12 @@ importers: friendly-words: specifier: ^1.3.1 version: 1.3.1 + jotai: + specifier: ^2.10.3 + version: 2.15.1(@babel/core@7.28.5)(@babel/template@7.27.2)(react@19.2.0) next: specifier: ^15.5.6 - version: 15.5.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0) + version: 15.5.6(@babel/core@7.28.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) nstr: specifier: ^0.1.3 version: 0.1.3 @@ -108,6 +111,9 @@ importers: '@tailwindcss/postcss': specifier: ^4.1.14 version: 4.1.14 + '@vitejs/plugin-react': + specifier: ^4.3.1 + version: 4.7.0(vite@7.1.10(jiti@2.6.1)(lightningcss@1.30.1)) clsx: specifier: ^2.1.1 version: 2.1.1 @@ -160,10 +166,93 @@ packages: '@asamuzakjp/css-color@3.2.0': resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==} + '@babel/code-frame@7.27.1': + resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==} + engines: {node: '>=6.9.0'} + + '@babel/compat-data@7.28.5': + resolution: {integrity: sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==} + engines: {node: '>=6.9.0'} + + '@babel/core@7.28.5': + resolution: {integrity: sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==} + engines: {node: '>=6.9.0'} + + '@babel/generator@7.28.5': + resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==} + engines: {node: '>=6.9.0'} + + '@babel/helper-compilation-targets@7.27.2': + resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==} + engines: {node: '>=6.9.0'} + + '@babel/helper-globals@7.28.0': + resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==} + engines: {node: '>=6.9.0'} + + '@babel/helper-module-imports@7.27.1': + resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==} + engines: {node: '>=6.9.0'} + + '@babel/helper-module-transforms@7.28.3': + resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + + '@babel/helper-plugin-utils@7.27.1': + resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==} + engines: {node: '>=6.9.0'} + + '@babel/helper-string-parser@7.27.1': + resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==} + engines: {node: '>=6.9.0'} + + '@babel/helper-validator-identifier@7.28.5': + resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==} + engines: {node: '>=6.9.0'} + + '@babel/helper-validator-option@7.27.1': + resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==} + engines: {node: '>=6.9.0'} + + '@babel/helpers@7.28.4': + resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==} + engines: {node: '>=6.9.0'} + + '@babel/parser@7.28.5': + resolution: {integrity: sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==} + engines: {node: '>=6.0.0'} + hasBin: true + + '@babel/plugin-transform-react-jsx-self@7.27.1': + resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@babel/plugin-transform-react-jsx-source@7.27.1': + resolution: {integrity: sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + '@babel/runtime@7.28.4': resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==} engines: {node: '>=6.9.0'} + '@babel/template@7.27.2': + resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==} + engines: {node: '>=6.9.0'} + + '@babel/traverse@7.28.5': + resolution: {integrity: sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==} + engines: {node: '>=6.9.0'} + + '@babel/types@7.28.5': + resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==} + engines: {node: '>=6.9.0'} + '@codemirror/autocomplete@6.19.0': resolution: {integrity: sha512-61Hfv3cF07XvUxNeC3E7jhG8XNi1Yom1G0lRC936oLnlF+jrbrv8rc/J98XlYzcsAoTVupfsf5fLej1aI8kyIg==} @@ -818,6 +907,9 @@ packages: '@observablehq/runtime@6.0.0': resolution: {integrity: sha512-t3UXP69O0JK20HY/neF4/DDDSDorwo92As806Y1pNTgTmj1NtoPyVpesYzfH31gTFOFrXC2cArV+wLpebMk9eA==} + '@rolldown/pluginutils@1.0.0-beta.27': + resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==} + '@rollup/rollup-android-arm-eabi@4.52.4': resolution: {integrity: sha512-BTm2qKNnWIQ5auf4deoetINJm2JzvihvGb9R6K/ETwKLql/Bb3Eg2H1FBp1gUb4YGbydMA3jcmQTR73q7J+GAA==} cpu: [arm] @@ -1048,6 +1140,18 @@ packages: '@tailwindcss/postcss@4.1.14': resolution: {integrity: sha512-BdMjIxy7HUNThK87C7BC8I1rE8BVUsfNQSI5siQ4JK3iIa3w0XyVvVL9SXLWO//CtYTcp1v7zci0fYwJOjB+Zg==} + '@types/babel__core@7.20.5': + resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} + + '@types/babel__generator@7.27.0': + resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==} + + '@types/babel__template@7.4.4': + resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==} + + '@types/babel__traverse@7.28.0': + resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==} + '@types/chai@5.2.2': resolution: {integrity: sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg==} @@ -1091,6 +1195,12 @@ packages: '@ungap/structured-clone@1.3.0': resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==} + '@vitejs/plugin-react@4.7.0': + resolution: {integrity: sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 + '@vitest/expect@3.2.4': resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==} @@ -1246,6 +1356,10 @@ packages: balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} + baseline-browser-mapping@2.8.28: + resolution: {integrity: sha512-gYjt7OIqdM0PcttNYP2aVrr2G0bMALkBaoehD4BuRGjAOtipg0b6wHg1yNL+s5zSnLZZrGHOw4IrND8CD+3oIQ==} + hasBin: true + binary-extensions@2.3.0: resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==} engines: {node: '>=8'} @@ -1267,6 +1381,11 @@ packages: resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==} engines: {node: '>=8'} + browserslist@4.28.0: + resolution: {integrity: sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==} + engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} + hasBin: true + buffer-from@1.1.2: resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==} @@ -1301,6 +1420,9 @@ packages: caniuse-lite@1.0.30001751: resolution: {integrity: sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==} + caniuse-lite@1.0.30001754: + resolution: {integrity: sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg==} + cbor@8.1.0: resolution: {integrity: sha512-DwGjNW9omn6EwP70aXsn7FQJx5kO12tX0bZkaTjzdVFM6/7nhA4t0EENocKGx6D2Bch9PE2KzCUf5SceBdeijg==} engines: {node: '>=12.19'} @@ -1416,6 +1538,9 @@ packages: resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==} engines: {node: '>= 0.6'} + convert-source-map@2.0.0: + resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} + convert-to-spaces@2.0.1: resolution: {integrity: sha512-rcQ1bsQO9799wq24uE5AM2tAILy4gXGIK/njFWcVQkGNZ96edlpY+A7bjwvzjYvLDyzmG1MmMLZhpcsb+klNMQ==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -1565,6 +1690,9 @@ packages: ee-first@1.1.1: resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==} + electron-to-chromium@1.5.251: + resolution: {integrity: sha512-lmyEOp4G0XT3qrYswNB4np1kx90k6QCXpnSHYv2xEsUuEu8JCobpDVYO6vMseirQyyCC6GCIGGxd5szMBa0tRA==} + emittery@1.2.0: resolution: {integrity: sha512-KxdRyyFcS85pH3dnU8Y5yFUm2YJdaHwcBZWrfG8o89ZY9a13/f9itbN+YG3ELbBo9Pg5zvIozstmuV8bX13q6g==} engines: {node: '>=14.16'} @@ -1833,6 +1961,10 @@ packages: resolution: {integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==} engines: {node: '>= 0.4'} + gensync@1.0.0-beta.2: + resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==} + engines: {node: '>=6.9.0'} + get-caller-file@2.0.5: resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==} engines: {node: 6.* || 8.* || >= 10.*} @@ -2128,6 +2260,24 @@ packages: resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==} hasBin: true + jotai@2.15.1: + resolution: {integrity: sha512-yHT1HAZ3ba2Q8wgaUQ+xfBzEtcS8ie687I8XVCBinfg4bNniyqLIN+utPXWKQE93LMF5fPbQSVRZqgpcN5yd6Q==} + engines: {node: '>=12.20.0'} + peerDependencies: + '@babel/core': '>=7.0.0' + '@babel/template': '>=7.0.0' + '@types/react': '>=17.0.0' + react: '>=17.0.0' + peerDependenciesMeta: + '@babel/core': + optional: true + '@babel/template': + optional: true + '@types/react': + optional: true + react: + optional: true + js-string-escape@1.0.1: resolution: {integrity: sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==} engines: {node: '>= 0.8'} @@ -2155,6 +2305,11 @@ packages: canvas: optional: true + jsesc@3.1.0: + resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==} + engines: {node: '>=6'} + hasBin: true + json-buffer@3.0.1: resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==} @@ -2164,6 +2319,11 @@ packages: json-stable-stringify-without-jsonify@1.0.1: resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==} + json5@2.2.3: + resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==} + engines: {node: '>=6'} + hasBin: true + jsx-ast-utils@3.3.5: resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==} engines: {node: '>=4.0'} @@ -2273,6 +2433,9 @@ packages: lru-cache@10.4.3: resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} + lru-cache@5.1.1: + resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} + lucide-react@0.542.0: resolution: {integrity: sha512-w3hD8/SQB7+lzU2r4VdFyzzOzKnUjTZIF/MQJGSSvni7Llewni4vuViRppfRAa2guOsY5k4jZyxw/i9DQHv+dw==} peerDependencies: @@ -2418,6 +2581,9 @@ packages: sass: optional: true + node-releases@2.0.27: + resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==} + nofilter@3.1.0: resolution: {integrity: sha512-l2NNj07e9afPnhAhvgVrCD/oy2Ai1yfLpuo3EpiO1jFTsB4sFz6oIfAfSZyQzVpkZQ9xS8ZS5g1jCBgq4Hwo0g==} engines: {node: '>=12.19'} @@ -2648,6 +2814,10 @@ packages: react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} + react-refresh@0.17.0: + resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==} + engines: {node: '>=0.10.0'} + react-tooltip@5.30.0: resolution: {integrity: sha512-Yn8PfbgQ/wmqnL7oBpz1QiDaLKrzZMdSUUdk7nVeGTwzbxCAJiJzR4VSYW+eIO42F1INt57sPUmpgKv0KwJKtg==} peerDependencies: @@ -3072,6 +3242,12 @@ packages: resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==} engines: {node: '>= 0.8'} + update-browserslist-db@1.1.4: + resolution: {integrity: sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==} + hasBin: true + peerDependencies: + browserslist: '>= 4.21.0' + uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} @@ -3254,6 +3430,9 @@ packages: resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==} engines: {node: '>=10'} + yallist@3.1.1: + resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} + yallist@5.0.0: resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==} engines: {node: '>=18'} @@ -3289,8 +3468,120 @@ snapshots: '@csstools/css-tokenizer': 3.0.4 lru-cache: 10.4.3 + '@babel/code-frame@7.27.1': + dependencies: + '@babel/helper-validator-identifier': 7.28.5 + js-tokens: 4.0.0 + picocolors: 1.1.1 + + '@babel/compat-data@7.28.5': {} + + '@babel/core@7.28.5': + dependencies: + '@babel/code-frame': 7.27.1 + '@babel/generator': 7.28.5 + '@babel/helper-compilation-targets': 7.27.2 + '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5) + '@babel/helpers': 7.28.4 + '@babel/parser': 7.28.5 + '@babel/template': 7.27.2 + '@babel/traverse': 7.28.5 + '@babel/types': 7.28.5 + '@jridgewell/remapping': 2.3.5 + convert-source-map: 2.0.0 + debug: 4.4.3 + gensync: 1.0.0-beta.2 + json5: 2.2.3 + semver: 6.3.1 + transitivePeerDependencies: + - supports-color + + '@babel/generator@7.28.5': + dependencies: + '@babel/parser': 7.28.5 + '@babel/types': 7.28.5 + '@jridgewell/gen-mapping': 0.3.13 + '@jridgewell/trace-mapping': 0.3.31 + jsesc: 3.1.0 + + '@babel/helper-compilation-targets@7.27.2': + dependencies: + '@babel/compat-data': 7.28.5 + '@babel/helper-validator-option': 7.27.1 + browserslist: 4.28.0 + lru-cache: 5.1.1 + semver: 6.3.1 + + '@babel/helper-globals@7.28.0': {} + + '@babel/helper-module-imports@7.27.1': + dependencies: + '@babel/traverse': 7.28.5 + '@babel/types': 7.28.5 + transitivePeerDependencies: + - supports-color + + '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.5)': + dependencies: + '@babel/core': 7.28.5 + '@babel/helper-module-imports': 7.27.1 + '@babel/helper-validator-identifier': 7.28.5 + '@babel/traverse': 7.28.5 + transitivePeerDependencies: + - supports-color + + '@babel/helper-plugin-utils@7.27.1': {} + + '@babel/helper-string-parser@7.27.1': {} + + '@babel/helper-validator-identifier@7.28.5': {} + + '@babel/helper-validator-option@7.27.1': {} + + '@babel/helpers@7.28.4': + dependencies: + '@babel/template': 7.27.2 + '@babel/types': 7.28.5 + + '@babel/parser@7.28.5': + dependencies: + '@babel/types': 7.28.5 + + '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.28.5)': + dependencies: + '@babel/core': 7.28.5 + '@babel/helper-plugin-utils': 7.27.1 + + '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.28.5)': + dependencies: + '@babel/core': 7.28.5 + '@babel/helper-plugin-utils': 7.27.1 + '@babel/runtime@7.28.4': {} + '@babel/template@7.27.2': + dependencies: + '@babel/code-frame': 7.27.1 + '@babel/parser': 7.28.5 + '@babel/types': 7.28.5 + + '@babel/traverse@7.28.5': + dependencies: + '@babel/code-frame': 7.27.1 + '@babel/generator': 7.28.5 + '@babel/helper-globals': 7.28.0 + '@babel/parser': 7.28.5 + '@babel/template': 7.27.2 + '@babel/types': 7.28.5 + debug: 4.4.3 + transitivePeerDependencies: + - supports-color + + '@babel/types@7.28.5': + dependencies: + '@babel/helper-string-parser': 7.27.1 + '@babel/helper-validator-identifier': 7.28.5 + '@codemirror/autocomplete@6.19.0': dependencies: '@codemirror/language': 6.11.3 @@ -4016,6 +4307,8 @@ snapshots: '@observablehq/runtime@6.0.0': {} + '@rolldown/pluginutils@1.0.0-beta.27': {} + '@rollup/rollup-android-arm-eabi@4.52.4': optional: true @@ -4200,6 +4493,27 @@ snapshots: postcss: 8.5.6 tailwindcss: 4.1.14 + '@types/babel__core@7.20.5': + dependencies: + '@babel/parser': 7.28.5 + '@babel/types': 7.28.5 + '@types/babel__generator': 7.27.0 + '@types/babel__template': 7.4.4 + '@types/babel__traverse': 7.28.0 + + '@types/babel__generator@7.27.0': + dependencies: + '@babel/types': 7.28.5 + + '@types/babel__template@7.4.4': + dependencies: + '@babel/parser': 7.28.5 + '@babel/types': 7.28.5 + + '@types/babel__traverse@7.28.0': + dependencies: + '@babel/types': 7.28.5 + '@types/chai@5.2.2': dependencies: '@types/deep-eql': 4.0.2 @@ -4245,6 +4559,18 @@ snapshots: '@ungap/structured-clone@1.3.0': {} + '@vitejs/plugin-react@4.7.0(vite@7.1.10(jiti@2.6.1)(lightningcss@1.30.1))': + dependencies: + '@babel/core': 7.28.5 + '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5) + '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.5) + '@rolldown/pluginutils': 1.0.0-beta.27 + '@types/babel__core': 7.20.5 + react-refresh: 0.17.0 + vite: 7.1.10(jiti@2.6.1)(lightningcss@1.30.1) + transitivePeerDependencies: + - supports-color + '@vitest/expect@3.2.4': dependencies: '@types/chai': 5.2.2 @@ -4462,6 +4788,8 @@ snapshots: balanced-match@1.0.2: {} + baseline-browser-mapping@2.8.28: {} + binary-extensions@2.3.0: {} blueimp-md5@2.19.0: {} @@ -4494,6 +4822,14 @@ snapshots: dependencies: fill-range: 7.1.1 + browserslist@4.28.0: + dependencies: + baseline-browser-mapping: 2.8.28 + caniuse-lite: 1.0.30001754 + electron-to-chromium: 1.5.251 + node-releases: 2.0.27 + update-browserslist-db: 1.1.4(browserslist@4.28.0) + buffer-from@1.1.2: {} bytes@3.1.2: {} @@ -4523,6 +4859,8 @@ snapshots: caniuse-lite@1.0.30001751: {} + caniuse-lite@1.0.30001754: {} + cbor@8.1.0: dependencies: nofilter: 3.1.0 @@ -4659,6 +4997,8 @@ snapshots: content-type@1.0.5: {} + convert-source-map@2.0.0: {} + convert-to-spaces@2.0.1: {} cookie-signature@1.0.6: {} @@ -4801,6 +5141,8 @@ snapshots: ee-first@1.1.1: {} + electron-to-chromium@1.5.251: {} + emittery@1.2.0: {} emoji-regex@8.0.0: {} @@ -5215,6 +5557,8 @@ snapshots: generator-function@2.0.1: {} + gensync@1.0.0-beta.2: {} + get-caller-file@2.0.5: {} get-intrinsic@1.3.0: @@ -5523,6 +5867,12 @@ snapshots: jiti@2.6.1: {} + jotai@2.15.1(@babel/core@7.28.5)(@babel/template@7.27.2)(react@19.2.0): + optionalDependencies: + '@babel/core': 7.28.5 + '@babel/template': 7.27.2 + react: 19.2.0 + js-string-escape@1.0.1: {} js-tokens@4.0.0: {} @@ -5565,12 +5915,16 @@ snapshots: - supports-color - utf-8-validate + jsesc@3.1.0: {} + json-buffer@3.0.1: {} json-schema-traverse@0.4.1: {} json-stable-stringify-without-jsonify@1.0.1: {} + json5@2.2.3: {} + jsx-ast-utils@3.3.5: dependencies: array-includes: 3.1.9 @@ -5660,6 +6014,10 @@ snapshots: lru-cache@10.4.3: {} + lru-cache@5.1.1: + dependencies: + yallist: 3.1.1 + lucide-react@0.542.0(react@19.2.0): dependencies: react: 19.2.0 @@ -5775,7 +6133,7 @@ snapshots: negotiator@0.6.3: {} - next@15.5.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0): + next@15.5.6(@babel/core@7.28.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0): dependencies: '@next/env': 15.5.6 '@swc/helpers': 0.5.15 @@ -5783,7 +6141,7 @@ snapshots: postcss: 8.4.31 react: 19.2.0 react-dom: 19.2.0(react@19.2.0) - styled-jsx: 5.1.6(react@19.2.0) + styled-jsx: 5.1.6(@babel/core@7.28.5)(react@19.2.0) optionalDependencies: '@next/swc-darwin-arm64': 15.5.6 '@next/swc-darwin-x64': 15.5.6 @@ -5798,6 +6156,8 @@ snapshots: - '@babel/core' - babel-plugin-macros + node-releases@2.0.27: {} + nofilter@3.1.0: {} normalize-path@3.0.0: {} @@ -6014,6 +6374,8 @@ snapshots: react-is@16.13.1: {} + react-refresh@0.17.0: {} + react-tooltip@5.30.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0): dependencies: '@floating-ui/dom': 1.7.4 @@ -6393,10 +6755,12 @@ snapshots: style-mod@4.1.3: {} - styled-jsx@5.1.6(react@19.2.0): + styled-jsx@5.1.6(@babel/core@7.28.5)(react@19.2.0): dependencies: client-only: 0.0.1 react: 19.2.0 + optionalDependencies: + '@babel/core': 7.28.5 supertap@3.0.1: dependencies: @@ -6552,6 +6916,12 @@ snapshots: unpipe@1.0.0: {} + update-browserslist-db@1.1.4(browserslist@4.28.0): + dependencies: + browserslist: 4.28.0 + escalade: 3.2.0 + picocolors: 1.1.1 + uri-js@4.4.1: dependencies: punycode: 2.3.1 @@ -6740,6 +7110,8 @@ snapshots: y18n@5.0.8: {} + yallist@3.1.1: {} + yallist@5.0.0: {} yargs-parser@21.1.1: {} diff --git a/test/components/App.tsx b/test/components/App.tsx new file mode 100644 index 0000000..874eb05 --- /dev/null +++ b/test/components/App.tsx @@ -0,0 +1,50 @@ +import {useEffect, useState} from "react"; +import {useAtom} from "jotai"; +import {selectedTestAtom} from "../store"; +import {TestSelector} from "./TestSelector"; +import {Editor} from "./Editor"; +import {TransactionViewer} from "./TransactionViewer"; +import * as testSamples from "../js/index.js"; +import type {ViewPlugin} from "@codemirror/view"; + +export function App() { + const [selectedTest, setSelectedTest] = useAtom(selectedTestAtom); + const [transactionViewerPlugin, setTransactionViewerPlugin] = useState | undefined>(); + + // Initialize from URL on mount + useEffect(() => { + const params = new URLSearchParams(window.location.search); + const testFromUrl = params.get("test"); + if (testFromUrl && testFromUrl in testSamples) { + setSelectedTest(testFromUrl); + } + }, [setSelectedTest]); + + // Get the current test code + const currentCode = (testSamples as Record)[selectedTest] || testSamples.helloWorld; + + return ( +
+ {/* Header */} +
+
+

Recho Playground

+ +
+
+ + {/* Main content */} +
+ {/* Editor panel */} +
+ +
+ + {/* Transaction viewer sidebar */} + +
+
+ ); +} diff --git a/test/components/Editor.tsx b/test/components/Editor.tsx new file mode 100644 index 0000000..0b261c6 --- /dev/null +++ b/test/components/Editor.tsx @@ -0,0 +1,129 @@ +import { useEffect, useRef, useState } from "react"; +import { Play, Square, RefreshCcw } from "lucide-react"; +import { createEditor } from "../../editor/index.js"; +import { cn } from "../../app/cn.js"; +import type { ViewPlugin } from "@codemirror/view"; + +interface EditorProps { + code: string; + transactionViewerPlugin?: ViewPlugin; + onError?: (error: Error) => void; +} + +function debounce(fn: (...args: any[]) => void, delay = 0) { + let timeout: ReturnType; + return (...args: any[]) => { + clearTimeout(timeout); + timeout = setTimeout(() => fn(...args), delay); + }; +} + +const onDefaultError = debounce(() => { + setTimeout(() => { + alert("Something unexpected happened. Please check the console for details."); + }, 100); +}, 0); + +export function Editor({ code, transactionViewerPlugin, onError = onDefaultError }: EditorProps) { + const containerRef = useRef(null); + const editorRef = useRef(null); + const [needRerun, setNeedRerun] = useState(false); + + useEffect(() => { + if (containerRef.current) { + containerRef.current.innerHTML = ""; + + const extensions = transactionViewerPlugin ? [transactionViewerPlugin] : []; + + editorRef.current = createEditor(containerRef.current, { + code, + extensions, + onError, + }); + + // Auto-run on mount + editorRef.current.run(); + } + + return () => { + if (editorRef.current) { + editorRef.current.destroy(); + } + }; + }, [code, transactionViewerPlugin, onError]); + + useEffect(() => { + const onInput = () => { + setNeedRerun(true); + }; + + if (editorRef.current) { + editorRef.current.on("userInput", onInput); + } + }, [code]); + + useEffect(() => { + const onKeyDown = (e: KeyboardEvent) => { + if (e.metaKey && e.key === "s") { + e.preventDefault(); + onRun(); + } + }; + window.addEventListener("keydown", onKeyDown); + return () => window.removeEventListener("keydown", onKeyDown); + }, []); + + function onRun() { + setNeedRerun(false); + editorRef.current?.run(); + } + + function onStop() { + setNeedRerun(false); + editorRef.current?.stop(); + } + + function onRerun() { + setNeedRerun(false); + editorRef.current?.stop(); + editorRef.current?.run(); + } + + function metaKey() { + return typeof navigator !== "undefined" && navigator.userAgent.includes("Mac") ? "⌘" : "Ctrl"; + } + + return ( +
+
+
Editor
+
+ + + +
+
+
+ 
{code}
+
+
+ ); +} diff --git a/test/components/TestSelector.tsx b/test/components/TestSelector.tsx new file mode 100644 index 0000000..3dcd275 --- /dev/null +++ b/test/components/TestSelector.tsx @@ -0,0 +1,30 @@ +import { useAtom } from "jotai"; +import { selectedTestAtom, getTestSampleName } from "../store"; +import * as testSamples from "../js/index.js"; + +export function TestSelector() { + const [selectedTest, setSelectedTest] = useAtom(selectedTestAtom); + + const handleChange = (e: React.ChangeEvent) => { + const newTest = e.target.value; + setSelectedTest(newTest); + // Update URL + const url = new URL(window.location.href); + url.searchParams.set("test", newTest); + window.history.pushState({}, "", url); + }; + + return ( + + ); +} diff --git a/test/components/TransactionViewer.tsx b/test/components/TransactionViewer.tsx new file mode 100644 index 0000000..7df4b36 --- /dev/null +++ b/test/components/TransactionViewer.tsx @@ -0,0 +1,471 @@ +import { useState, useEffect, useRef } from "react"; +import { ViewPlugin } from "@codemirror/view"; +import { Transaction as CMTransaction } from "@codemirror/state"; +import { blockMetadataEffect } from "../../editor/blockMetadata.ts"; +import { cn } from "../../app/cn.js"; + +// Maximum number of transactions to keep in history +const MAX_HISTORY = 100; + +interface TransactionRange { + from: number; + to: number; + anchor: number; + head: number; +} + +interface TransactionChange { + from: number; + to: number; + fromLine: number; + fromCol: number; + toLine: number; + toCol: number; + insert: string; +} + +interface TransactionEffect { + value: any; + type: string; + blockMetadata?: any[]; +} + +interface TransactionData { + index: number; + docChanged: boolean; + changes: TransactionChange[]; + annotations: Record; + effects: TransactionEffect[]; + selection: TransactionRange[]; + scrollIntoView?: boolean; + filter?: boolean; + sequential?: boolean; + timestamp: number; +} + +interface TransactionGroup { + type: "individual" | "selection"; + transaction?: TransactionData; + transactions?: TransactionData[]; +} + +interface TransactionViewerProps { + onPluginCreate: (plugin: ViewPlugin) => void; +} + +export function TransactionViewer({ onPluginCreate }: TransactionViewerProps) { + const [transactions, setTransactions] = useState([]); + const [autoScroll, setAutoScroll] = useState(true); + const listRef = useRef(null); + const nextIndexRef = useRef(0); + + useEffect(() => { + const transactionsList: TransactionData[] = []; + const listeners = new Set<(transactions: TransactionData[]) => void>(); + + function notifyListeners() { + listeners.forEach((fn) => fn([...transactionsList])); + } + + function extractTransactionData(tr: CMTransaction, index: number): TransactionData { + const data: TransactionData = { + index, + docChanged: tr.docChanged, + changes: [], + annotations: {}, + effects: [], + selection: tr.state.selection.ranges.map((r) => ({ + from: r.from, + to: r.to, + anchor: r.anchor, + head: r.head, + })), + scrollIntoView: tr.scrollIntoView, + filter: tr.filter, + sequential: tr.sequential, + timestamp: Date.now(), + }; + + // Extract changes + tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => { + const fromLine = tr.startState.doc.lineAt(fromA); + const toLine = tr.startState.doc.lineAt(toA); + + data.changes.push({ + from: fromA, + to: toA, + fromLine: fromLine.number, + fromCol: fromA - fromLine.from, + toLine: toLine.number, + toCol: toA - toLine.from, + insert: inserted.toString(), + }); + }); + + // Extract annotations + const userEvent = tr.annotation(CMTransaction.userEvent); + if (userEvent !== undefined) { + data.annotations.userEvent = userEvent; + } + + const remote = tr.annotation(CMTransaction.remote); + if (remote !== undefined) { + data.annotations.remote = remote; + } + + const addToHistory = tr.annotation(CMTransaction.addToHistory); + if (addToHistory !== undefined) { + data.annotations.addToHistory = addToHistory; + } + + // Extract effects + for (const effect of tr.effects) { + const effectData: TransactionEffect = { + value: effect.value, + type: "StateEffect", + }; + + if (effect.is(blockMetadataEffect)) { + effectData.type = "blockMetadataEffect"; + effectData.blockMetadata = effect.value; + } + + data.effects.push(effectData); + } + + return data; + } + + const plugin = ViewPlugin.fromClass( + class { + constructor(view: any) { + const initialTr: TransactionData = { + index: nextIndexRef.current++, + docChanged: false, + changes: [], + annotations: {}, + effects: [], + selection: view.state.selection.ranges.map((r: any) => ({ + from: r.from, + to: r.to, + anchor: r.anchor, + head: r.head, + })), + timestamp: Date.now(), + }; + transactionsList.push(initialTr); + notifyListeners(); + } + + update(update: any) { + update.transactions.forEach((tr: CMTransaction) => { + const transactionData = extractTransactionData(tr, nextIndexRef.current++); + transactionsList.push(transactionData); + + if (transactionsList.length > MAX_HISTORY) { + transactionsList.shift(); + } + }); + + if (update.transactions.length > 0) { + notifyListeners(); + } + } + } + ); + + listeners.add((newTransactions) => { + setTransactions(newTransactions); + }); + + onPluginCreate(plugin); + + return () => { + listeners.clear(); + }; + }, [onPluginCreate]); + + useEffect(() => { + if (autoScroll && listRef.current) { + listRef.current.scrollTop = 0; + } + }, [transactions, autoScroll]); + + const handleClear = () => { + setTransactions([]); + nextIndexRef.current = 0; + }; + + const groupTransactions = (): TransactionGroup[] => { + const groups: TransactionGroup[] = []; + let currentGroup: TransactionGroup | null = null; + + for (let i = transactions.length - 1; i >= 0; i--) { + const tr = transactions[i]; + const isSelection = + tr.annotations.userEvent === "select" || tr.annotations.userEvent === "select.pointer"; + + if (isSelection) { + if (currentGroup && currentGroup.type === "selection") { + currentGroup.transactions!.push(tr); + } else { + currentGroup = { + type: "selection", + transactions: [tr], + }; + groups.push(currentGroup); + } + } else { + groups.push({ + type: "individual", + transaction: tr, + }); + currentGroup = null; + } + } + + return groups; + }; + + return ( +
+
+

Transactions

+
+ + +
+
+
+ {transactions.length === 0 ? ( +
No transactions yet
+ ) : ( + groupTransactions().map((group, idx) => + group.type === "individual" ? ( + + ) : ( + + ) + ) + )} +
+
+ ); +} + +function TransactionItem({ transaction: tr }: { transaction: TransactionData }) { + const [isOpen, setIsOpen] = useState(false); + + const formatTime = (timestamp: number) => { + const time = new Date(timestamp); + return ( + time.toLocaleTimeString("en-US", { + hour12: false, + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + }) + + "." + + time.getMilliseconds().toString().padStart(3, "0") + ); + }; + + let summaryLeft = `#${tr.index}`; + if (tr.annotations.userEvent) { + summaryLeft += ` [${tr.annotations.userEvent}]`; + } else if (tr.annotations.remote) { + summaryLeft += ` [remote: ${JSON.stringify(tr.annotations.remote)}]`; + } + if (tr.docChanged) { + summaryLeft += ` 📝`; + } + + return ( +
setIsOpen((e.target as HTMLDetailsElement).open)} + className={cn( + "mb-2 border border-gray-200 rounded text-xs", + tr.annotations.userEvent && "bg-blue-50", + tr.docChanged && "border-l-4 border-l-blue-500" + )} + > + + {summaryLeft} + {formatTime(tr.timestamp)} + +
+
+ Doc Changed: {tr.docChanged.toString()} +
+ + {tr.changes.length > 0 ? ( +
+ Changes: + {tr.changes.map((change, idx) => { + const deleted = change.to - change.from; + const inserted = change.insert.length; + const sameLine = change.fromLine === change.toLine; + + let posInfo = `pos ${change.from}-${change.to}`; + if (sameLine) { + posInfo += ` (L${change.fromLine}:${change.fromCol}-${change.toCol})`; + } else { + posInfo += ` (L${change.fromLine}:${change.fromCol} to L${change.toLine}:${change.toCol})`; + } + + return ( +
+
Change {idx + 1}: {posInfo}
+ {deleted > 0 &&
Deleted {deleted} chars
} + {inserted > 0 && ( +
+ Inserted: {change.insert} +
+ )} +
+ ); + })} +
+ ) : ( +
+ Changes: none +
+ )} + + {Object.keys(tr.annotations).length > 0 ? ( +
+ Annotations: + {Object.entries(tr.annotations).map(([key, value]) => ( +
+ {key}: {JSON.stringify(value)} +
+ ))} +
+ ) : ( +
+ Annotations: none +
+ )} + + {tr.effects.length > 0 ? ( +
+ Effects: {tr.effects.length} + {tr.effects.map((effect, idx) => ( +
+ {effect.type === "blockMetadataEffect" && effect.blockMetadata ? ( +
+
Effect {idx + 1}: blockMetadataEffect ({effect.blockMetadata.length} blocks)
+ {effect.blockMetadata.map((block: any, blockIdx: number) => ( +
+
Block {blockIdx + 1}:
+
+ {block.output !== null + ? `Output: ${block.output.from}-${block.output.to}` + : "Output: null"} +
+
Source: {block.source.from}-{block.source.to}
+ {Object.keys(block.attributes).length > 0 && ( +
Attributes: {JSON.stringify(block.attributes)}
+ )} + {block.error &&
Error: true
} +
+ ))} +
+ ) : ( +
Effect {idx + 1} ({effect.type}): {JSON.stringify(effect.value).substring(0, 100)}
+ )} +
+ ))} +
+ ) : ( +
+ Effects: none +
+ )} + +
+ Selection: + {tr.selection.map((range, idx) => { + const isCursor = range.from === range.to; + return ( +
+ Range {idx + 1}: {isCursor ? `cursor at ${range.from}` : `${range.from}-${range.to}`} + {!isCursor && ` (anchor: ${range.anchor}, head: ${range.head})`} +
+ ); + })} +
+
+
+ ); +} + +function SelectionGroupItem({ transactions }: { transactions: TransactionData[] }) { + const [isOpen, setIsOpen] = useState(false); + + const formatTime = (timestamp: number) => { + const time = new Date(timestamp); + return ( + time.toLocaleTimeString("en-US", { + hour12: false, + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + }) + + "." + + time.getMilliseconds().toString().padStart(3, "0") + ); + }; + + const count = transactions.length; + const firstTr = transactions[0]; + const lastTr = transactions[transactions.length - 1]; + + const summaryLeft = `#${lastTr.index}-${firstTr.index} [select] (${count} transactions)`; + const summaryRight = `${formatTime(lastTr.timestamp)} - ${formatTime(firstTr.timestamp)}`; + + return ( +
setIsOpen((e.target as HTMLDetailsElement).open)} + className="mb-2 border border-gray-300 rounded text-xs bg-gray-50" + > + + {summaryLeft} + {summaryRight} + +
+ {transactions.map((tr) => { + const selectionInfo = tr.selection + .map((range) => { + const isCursor = range.from === range.to; + return isCursor ? `cursor at ${range.from}` : `${range.from}-${range.to}`; + }) + .join(", "); + + return ( +
+ #{tr.index} + {selectionInfo} + {formatTime(tr.timestamp)} +
+ ); + })} +
+
+ ); +} diff --git a/test/index.html b/test/index.html index 3261143..3de6502 100644 --- a/test/index.html +++ b/test/index.html @@ -4,10 +4,9 @@ Recho (Test) - - - +
+ diff --git a/test/main.tsx b/test/main.tsx new file mode 100644 index 0000000..bb9e3e9 --- /dev/null +++ b/test/main.tsx @@ -0,0 +1,18 @@ +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import { Provider as JotaiProvider } from "jotai"; +import { App } from "./components/App"; +import "./styles.css"; + +const root = document.getElementById("root"); +if (!root) { + throw new Error("Root element not found"); +} + +createRoot(root).render( + + + + + +); diff --git a/test/store.ts b/test/store.ts new file mode 100644 index 0000000..70c6836 --- /dev/null +++ b/test/store.ts @@ -0,0 +1,61 @@ +import { atom } from "jotai"; + +// Types +export interface Transaction { + time: number; + docChanged: boolean; + selection: { from: number; to: number } | null; + effects: string[]; + annotations: string[]; +} + +export interface TestSample { + name: string; + code: string; +} + +// Atoms +export const selectedTestAtom = atom("helloWorld"); +export const transactionHistoryAtom = atom([]); +export const autoScrollAtom = atom(true); + +// Factory functions for state operations +export function createTransaction(data: { + time: number; + docChanged: boolean; + selection: { from: number; to: number } | null; + effects: string[]; + annotations: string[]; +}): Transaction { + return { + time: data.time, + docChanged: data.docChanged, + selection: data.selection, + effects: data.effects, + annotations: data.annotations, + }; +} + +export function addTransaction( + history: Transaction[], + transaction: Transaction +): Transaction[] { + const newHistory = [...history, transaction]; + // Keep max 100 transactions + if (newHistory.length > 100) { + return newHistory.slice(-100); + } + return newHistory; +} + +export function clearTransactionHistory(): Transaction[] { + return []; +} + +export function getTestSampleName(key: string): string { + // Convert camelCase to Title Case with spaces + return key + .replace(/([A-Z])/g, " $1") + .replace(/^./, (str) => str.toUpperCase()) + .trim(); +} diff --git a/test/styles.css b/test/styles.css new file mode 100644 index 0000000..37de1dd --- /dev/null +++ b/test/styles.css @@ -0,0 +1,41 @@ +@import "tailwindcss"; +@import "../editor/index.css"; +@import "@fontsource-variable/inter"; +@import "@fontsource-variable/spline-sans-mono"; + +@theme { + --default-font-family: "Inter Variable"; + --font-mono: "Spline Sans Mono Variable"; +} + +button { + cursor: pointer; +} + +.cm-gutters { + background-color: white !important; + border-right: none !important; + padding-left: 8px !important; +} + +.cm-editor.cm-focused { + outline: none !important; +} + +/* Details/Summary styling for transaction viewer */ +details summary { + list-style: none; +} + +details summary::-webkit-details-marker { + display: none; +} + +details summary::marker { + display: none; +} + +details[open] > summary { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} diff --git a/vite.config.js b/vite.config.js index cb4a843..1abada3 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,7 +1,9 @@ import {defineConfig} from "vite"; +import react from "@vitejs/plugin-react"; export default defineConfig({ root: "test", + plugins: [react()], test: { environment: "jsdom", }, From bd2e1fde5ad6e34ec45d90f723f270a576a795fb Mon Sep 17 00:00:00 2001 From: Luyu Cheng <2239547+chengluyu@users.noreply.github.com> Date: Sun, 16 Nov 2025 14:50:02 +0800 Subject: [PATCH 07/18] Configure TypeScript in the repo --- package.json | 1 + pnpm-lock.yaml | 3 +++ tsconfig.json | 45 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 49 insertions(+) create mode 100644 tsconfig.json diff --git a/package.json b/package.json index 29ecad5..ffcbb59 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "react-tooltip": "^5.30.0", "tailwind-merge": "^3.3.1", "tailwindcss": "^4.1.14", + "typescript": "^5.9.3", "vite": "^7.1.10", "vitest": "^3.2.4" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2dbdf11..6290f6e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -150,6 +150,9 @@ importers: tailwindcss: specifier: ^4.1.14 version: 4.1.14 + typescript: + specifier: ^5.9.3 + version: 5.9.3 vite: specifier: ^7.1.10 version: 7.1.10(jiti@2.6.1)(lightningcss@1.30.1) diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..cd321c4 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,45 @@ +{ + // Visit https://aka.ms/tsconfig to read more about this file + "compilerOptions": { + // File Layout + // "rootDir": "./src", + // "outDir": "./dist", + + // Environment Settings + // See also https://aka.ms/tsconfig/module + "module": "nodenext", + "target": "esnext", + "types": [], + "moduleResolution": "nodenext", + // For nodejs: + "lib": ["esnext", "DOM"], + // "types": ["node"], + // and npm install -D @types/node + + // Other Outputs + "sourceMap": true, + "declaration": true, + "declarationMap": true, + + // Stricter Typechecking Options + "noUncheckedIndexedAccess": true, + "exactOptionalPropertyTypes": true, + + // Style Options + // "noImplicitReturns": true, + // "noImplicitOverride": true, + // "noUnusedLocals": true, + // "noUnusedParameters": true, + // "noFallthroughCasesInSwitch": true, + // "noPropertyAccessFromIndexSignature": true, + + // Recommended Options + "strict": true, + "jsx": "react-jsx", + "verbatimModuleSyntax": true, + "isolatedModules": true, + "noUncheckedSideEffectImports": true, + "moduleDetection": "force", + "skipLibCheck": true + } +} From 1bd634c87ece1298c220541c8716b392a27f529d Mon Sep 17 00:00:00 2001 From: Luyu Cheng <2239547+chengluyu@users.noreply.github.com> Date: Wed, 19 Nov 2025 08:43:22 +0800 Subject: [PATCH 08/18] WIP --- next-env.d.ts | 6 +++++ package.json | 2 ++ pnpm-lock.yaml | 71 ++++++++++++++++++++++++++++++++++++-------------- tsconfig.json | 35 ++++++++++++++++++------- 4 files changed, 86 insertions(+), 28 deletions(-) create mode 100644 next-env.d.ts diff --git a/next-env.d.ts b/next-env.d.ts new file mode 100644 index 0000000..830fb59 --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,6 @@ +/// +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/package.json b/package.json index ffcbb59..aceb790 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,8 @@ }, "devDependencies": { "@tailwindcss/postcss": "^4.1.14", + "@types/node": "24.10.1", + "@types/react": "19.2.6", "@vitejs/plugin-react": "^4.3.1", "clsx": "^2.1.1", "eslint": "^9.37.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6290f6e..a2c6ab1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -46,7 +46,7 @@ importers: version: 1.2.2 '@observablehq/notebook-kit': specifier: ^1.4.1 - version: 1.4.1(@types/markdown-it@14.1.2)(jiti@2.6.1)(lightningcss@1.30.1) + version: 1.4.1(@types/markdown-it@14.1.2)(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.1) '@observablehq/runtime': specifier: ^6.0.0 version: 6.0.0 @@ -82,7 +82,7 @@ importers: version: 1.3.1 jotai: specifier: ^2.10.3 - version: 2.15.1(@babel/core@7.28.5)(@babel/template@7.27.2)(react@19.2.0) + version: 2.15.1(@babel/core@7.28.5)(@babel/template@7.27.2)(@types/react@19.2.6)(react@19.2.0) next: specifier: ^15.5.6 version: 15.5.6(@babel/core@7.28.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) @@ -111,9 +111,15 @@ importers: '@tailwindcss/postcss': specifier: ^4.1.14 version: 4.1.14 + '@types/node': + specifier: 24.10.1 + version: 24.10.1 + '@types/react': + specifier: 19.2.6 + version: 19.2.6 '@vitejs/plugin-react': specifier: ^4.3.1 - version: 4.7.0(vite@7.1.10(jiti@2.6.1)(lightningcss@1.30.1)) + version: 4.7.0(vite@7.1.10(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.1)) clsx: specifier: ^2.1.1 version: 2.1.1 @@ -155,10 +161,10 @@ importers: version: 5.9.3 vite: specifier: ^7.1.10 - version: 7.1.10(jiti@2.6.1)(lightningcss@1.30.1) + version: 7.1.10(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.1) vitest: specifier: ^3.2.4 - version: 3.2.4(@edge-runtime/vm@3.2.0)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.1) + version: 3.2.4(@edge-runtime/vm@3.2.0)(@types/node@24.10.1)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.1) packages: @@ -1182,6 +1188,12 @@ packages: '@types/mdurl@2.0.0': resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==} + '@types/node@24.10.1': + resolution: {integrity: sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==} + + '@types/react@19.2.6': + resolution: {integrity: sha512-p/jUvulfgU7oKtj6Xpk8cA2Y1xKTtICGpJYeJXz2YVO2UcvjQgeRMLDGfDeqeRW2Ta+0QNFwcc8X3GH8SxZz6w==} + '@types/unist@3.0.3': resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==} @@ -1573,6 +1585,9 @@ packages: resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==} engines: {node: '>=18'} + csstype@3.2.3: + resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==} + currently-unhandled@0.4.1: resolution: {integrity: sha512-/fITjgjGU50vjQ4FH6eUoYu+iUoUKIXws2hL15JJpIR+BbTxaXQsMuuyjtNh2WqsSBS5nsaZHFsFecyw5CCAng==} engines: {node: '>=0.10.0'} @@ -3222,6 +3237,9 @@ packages: resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==} engines: {node: '>= 0.4'} + undici-types@7.16.0: + resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==} + undici@7.16.0: resolution: {integrity: sha512-QEg3HPMll0o3t2ourKwOeUAZ159Kn9mx5pnzHRQO8+Wixmh88YdZRiIwat0iNzNNXn0yoEtXJqFpyW7eM8BV7g==} engines: {node: '>=20.18.1'} @@ -4262,7 +4280,7 @@ snapshots: dependencies: isoformat: 0.2.1 - '@observablehq/notebook-kit@1.4.1(@types/markdown-it@14.1.2)(jiti@2.6.1)(lightningcss@1.30.1)': + '@observablehq/notebook-kit@1.4.1(@types/markdown-it@14.1.2)(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.1)': dependencies: '@fontsource/inter': 5.2.8 '@fontsource/source-serif-4': 5.2.9 @@ -4284,7 +4302,7 @@ snapshots: markdown-it: 14.1.0 markdown-it-anchor: 9.2.0(@types/markdown-it@14.1.2)(markdown-it@14.1.0) typescript: 5.9.3 - vite: 7.1.10(jiti@2.6.1)(lightningcss@1.30.1) + vite: 7.1.10(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.1) transitivePeerDependencies: - '@types/markdown-it' - '@types/node' @@ -4544,6 +4562,14 @@ snapshots: '@types/mdurl@2.0.0': {} + '@types/node@24.10.1': + dependencies: + undici-types: 7.16.0 + + '@types/react@19.2.6': + dependencies: + csstype: 3.2.3 + '@types/unist@3.0.3': {} '@uiw/codemirror-theme-github@4.25.2(@codemirror/language@6.11.3)(@codemirror/state@6.5.2)(@codemirror/view@6.38.6)': @@ -4562,7 +4588,7 @@ snapshots: '@ungap/structured-clone@1.3.0': {} - '@vitejs/plugin-react@4.7.0(vite@7.1.10(jiti@2.6.1)(lightningcss@1.30.1))': + '@vitejs/plugin-react@4.7.0(vite@7.1.10(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.1))': dependencies: '@babel/core': 7.28.5 '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5) @@ -4570,7 +4596,7 @@ snapshots: '@rolldown/pluginutils': 1.0.0-beta.27 '@types/babel__core': 7.20.5 react-refresh: 0.17.0 - vite: 7.1.10(jiti@2.6.1)(lightningcss@1.30.1) + vite: 7.1.10(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.1) transitivePeerDependencies: - supports-color @@ -4582,13 +4608,13 @@ snapshots: chai: 5.3.3 tinyrainbow: 2.0.0 - '@vitest/mocker@3.2.4(vite@7.1.10(jiti@2.6.1)(lightningcss@1.30.1))': + '@vitest/mocker@3.2.4(vite@7.1.10(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.1))': dependencies: '@vitest/spy': 3.2.4 estree-walker: 3.0.3 magic-string: 0.30.19 optionalDependencies: - vite: 7.1.10(jiti@2.6.1)(lightningcss@1.30.1) + vite: 7.1.10(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.1) '@vitest/pretty-format@3.2.4': dependencies: @@ -5031,6 +5057,8 @@ snapshots: '@asamuzakjp/css-color': 3.2.0 rrweb-cssom: 0.8.0 + csstype@3.2.3: {} + currently-unhandled@0.4.1: dependencies: array-find-index: 1.0.2 @@ -5870,10 +5898,11 @@ snapshots: jiti@2.6.1: {} - jotai@2.15.1(@babel/core@7.28.5)(@babel/template@7.27.2)(react@19.2.0): + jotai@2.15.1(@babel/core@7.28.5)(@babel/template@7.27.2)(@types/react@19.2.6)(react@19.2.0): optionalDependencies: '@babel/core': 7.28.5 '@babel/template': 7.27.2 + '@types/react': 19.2.6 react: 19.2.0 js-string-escape@1.0.1: {} @@ -6892,6 +6921,8 @@ snapshots: has-symbols: 1.1.0 which-boxed-primitive: 1.1.1 + undici-types@7.16.0: {} + undici@7.16.0: {} unist-util-is@6.0.1: @@ -6945,13 +6976,13 @@ snapshots: '@types/unist': 3.0.3 vfile-message: 4.0.3 - vite-node@3.2.4(jiti@2.6.1)(lightningcss@1.30.1): + vite-node@3.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.1): dependencies: cac: 6.7.14 debug: 4.4.3 es-module-lexer: 1.7.0 pathe: 2.0.3 - vite: 7.1.10(jiti@2.6.1)(lightningcss@1.30.1) + vite: 7.1.10(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.1) transitivePeerDependencies: - '@types/node' - jiti @@ -6966,7 +6997,7 @@ snapshots: - tsx - yaml - vite@7.1.10(jiti@2.6.1)(lightningcss@1.30.1): + vite@7.1.10(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.1): dependencies: esbuild: 0.25.11 fdir: 6.5.0(picomatch@4.0.3) @@ -6975,15 +7006,16 @@ snapshots: rollup: 4.52.4 tinyglobby: 0.2.15 optionalDependencies: + '@types/node': 24.10.1 fsevents: 2.3.3 jiti: 2.6.1 lightningcss: 1.30.1 - vitest@3.2.4(@edge-runtime/vm@3.2.0)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.1): + vitest@3.2.4(@edge-runtime/vm@3.2.0)(@types/node@24.10.1)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.1): dependencies: '@types/chai': 5.2.2 '@vitest/expect': 3.2.4 - '@vitest/mocker': 3.2.4(vite@7.1.10(jiti@2.6.1)(lightningcss@1.30.1)) + '@vitest/mocker': 3.2.4(vite@7.1.10(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.1)) '@vitest/pretty-format': 3.2.4 '@vitest/runner': 3.2.4 '@vitest/snapshot': 3.2.4 @@ -7001,11 +7033,12 @@ snapshots: tinyglobby: 0.2.15 tinypool: 1.1.1 tinyrainbow: 2.0.0 - vite: 7.1.10(jiti@2.6.1)(lightningcss@1.30.1) - vite-node: 3.2.4(jiti@2.6.1)(lightningcss@1.30.1) + vite: 7.1.10(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.1) + vite-node: 3.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.1) why-is-node-running: 2.3.0 optionalDependencies: '@edge-runtime/vm': 3.2.0 + '@types/node': 24.10.1 jsdom: 26.1.0 transitivePeerDependencies: - jiti diff --git a/tsconfig.json b/tsconfig.json index cd321c4..70c1ea2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,7 +4,6 @@ // File Layout // "rootDir": "./src", // "outDir": "./dist", - // Environment Settings // See also https://aka.ms/tsconfig/module "module": "nodenext", @@ -12,19 +11,19 @@ "types": [], "moduleResolution": "nodenext", // For nodejs: - "lib": ["esnext", "DOM"], + "lib": [ + "esnext", + "DOM" + ], // "types": ["node"], // and npm install -D @types/node - // Other Outputs "sourceMap": true, "declaration": true, "declarationMap": true, - // Stricter Typechecking Options "noUncheckedIndexedAccess": true, "exactOptionalPropertyTypes": true, - // Style Options // "noImplicitReturns": true, // "noImplicitOverride": true, @@ -32,14 +31,32 @@ // "noUnusedParameters": true, // "noFallthroughCasesInSwitch": true, // "noPropertyAccessFromIndexSignature": true, - // Recommended Options "strict": true, - "jsx": "react-jsx", + "jsx": "preserve", "verbatimModuleSyntax": true, "isolatedModules": true, "noUncheckedSideEffectImports": true, "moduleDetection": "force", - "skipLibCheck": true - } + "skipLibCheck": true, + "allowJs": true, + "noEmit": true, + "incremental": true, + "esModuleInterop": true, + "resolveJsonModule": true, + "plugins": [ + { + "name": "next" + } + ] + }, + "include": [ + "next-env.d.ts", + ".next/types/**/*.ts", + "**/*.ts", + "**/*.tsx" + ], + "exclude": [ + "node_modules" + ] } From d23ee70ebd9ae84d0600a619dfb715129614d60e Mon Sep 17 00:00:00 2001 From: Luyu Cheng <2239547+chengluyu@users.noreply.github.com> Date: Wed, 19 Nov 2025 13:03:55 +0800 Subject: [PATCH 09/18] Add block section to the sidebar --- test/components/App.tsx | 18 ++- test/components/BlockViewer.tsx | 211 ++++++++++++++++++++++++++ test/components/Editor.tsx | 25 ++- test/components/ResizableSplit.tsx | 70 +++++++++ test/components/TransactionViewer.tsx | 52 ++++--- 5 files changed, 338 insertions(+), 38 deletions(-) create mode 100644 test/components/BlockViewer.tsx create mode 100644 test/components/ResizableSplit.tsx diff --git a/test/components/App.tsx b/test/components/App.tsx index 874eb05..9d9c2e6 100644 --- a/test/components/App.tsx +++ b/test/components/App.tsx @@ -4,12 +4,15 @@ import {selectedTestAtom} from "../store"; import {TestSelector} from "./TestSelector"; import {Editor} from "./Editor"; import {TransactionViewer} from "./TransactionViewer"; +import {BlockViewer} from "./BlockViewer"; +import {ResizableSplit} from "./ResizableSplit"; import * as testSamples from "../js/index.js"; import type {ViewPlugin} from "@codemirror/view"; export function App() { const [selectedTest, setSelectedTest] = useAtom(selectedTestAtom); const [transactionViewerPlugin, setTransactionViewerPlugin] = useState | undefined>(); + const [blockViewerPlugin, setBlockViewerPlugin] = useState | undefined>(); // Initialize from URL on mount useEffect(() => { @@ -37,12 +40,21 @@ export function App() {
{/* Editor panel */}
- +
- {/* Transaction viewer sidebar */} + {/* Sidebar with blocks and transactions */}
diff --git a/test/components/BlockViewer.tsx b/test/components/BlockViewer.tsx new file mode 100644 index 0000000..b1c7d5a --- /dev/null +++ b/test/components/BlockViewer.tsx @@ -0,0 +1,211 @@ +import {useState, useEffect, useRef} from "react"; +import {ViewPlugin, EditorView} from "@codemirror/view"; +import {EditorSelection} from "@codemirror/state"; +import {blockMetadataField} from "../../editor/blockMetadata.ts"; +import {Locate} from "lucide-react"; + +interface BlockData { + index: number; + sourceFrom: number; + sourceTo: number; + outputFrom: number | null; + outputTo: number | null; + hasError: boolean; + attributes: Record; +} + +interface BlockViewerProps { + onPluginCreate: (plugin: ViewPlugin) => void; +} + +export function BlockViewer({onPluginCreate}: BlockViewerProps) { + const [blocks, setBlocks] = useState([]); + const [autoScroll, setAutoScroll] = useState(true); + const listRef = useRef(null); + const viewRef = useRef(null); + + useEffect(() => { + let currentBlocks: BlockData[] = []; + const listeners = new Set<(blocks: BlockData[]) => void>(); + + function notifyListeners() { + listeners.forEach((fn) => fn([...currentBlocks])); + } + + function extractBlockData(view: any): BlockData[] { + const blockMetadata = view.state.field(blockMetadataField, false); + if (!blockMetadata) return []; + + return blockMetadata.map((block: any, index: number) => ({ + index, + sourceFrom: block.source.from, + sourceTo: block.source.to, + outputFrom: block.output?.from ?? null, + outputTo: block.output?.to ?? null, + hasError: block.error || false, + attributes: block.attributes || {}, + })); + } + + const plugin = ViewPlugin.fromClass( + class { + constructor(view: any) { + viewRef.current = view; + currentBlocks = extractBlockData(view); + notifyListeners(); + } + + update(update: any) { + viewRef.current = update.view; + if ( + update.docChanged || + update.transactions.some((tr: any) => tr.effects.some((e: any) => e.is(blockMetadataField.init))) + ) { + currentBlocks = extractBlockData(update.view); + notifyListeners(); + } + } + }, + ); + + listeners.add((newBlocks) => { + setBlocks(newBlocks); + }); + + onPluginCreate(plugin); + + return () => { + listeners.clear(); + }; + }, [onPluginCreate]); + + useEffect(() => { + if (autoScroll && listRef.current) { + listRef.current.scrollTop = 0; + } + }, [blocks, autoScroll]); + + const handleLocateBlock = (block: BlockData) => { + if (!viewRef.current) return; + + const view = viewRef.current; + // The block starts at output.from (if output exists) or source.from + // The block ends at source.to + const from = block.outputFrom ?? block.sourceFrom; + const to = block.sourceTo; + + // Scroll the block into view and select the range + view.dispatch({ + effects: EditorView.scrollIntoView(from, {y: "center"}), + selection: EditorSelection.range(from, to), + }); + + view.focus(); + }; + + return ( +
+
+

Blocks ({blocks.length})

+
+ +
+
+
+ {blocks.length === 0 ? ( +
No blocks yet
+ ) : ( + blocks.map((block) => ) + )} +
+
+ ); +} + +function BlockItem({block, onLocate}: {block: BlockData; onLocate: (block: BlockData) => void}) { + const [isOpen, setIsOpen] = useState(false); + + const hasOutput = block.outputFrom !== null && block.outputTo !== null; + const hasAttributes = Object.keys(block.attributes).length > 0; + + return ( +
setIsOpen((e.target as HTMLDetailsElement).open)} + className={`mb-2 border rounded text-xs ${ + block.hasError + ? "border-red-300 bg-red-50" + : hasOutput + ? "border-green-300 bg-green-50" + : "border-gray-200 bg-white" + }`} + > + + + Block {block.index + 1} + {block.hasError && " ✗"} + {hasOutput && !block.hasError && " ➜"} + +
+ + + {block.sourceFrom}-{block.sourceTo} + +
+ +
+
+ Source Range: {block.sourceFrom}-{block.sourceTo} + ({block.sourceTo - block.sourceFrom} chars) +
+ + {hasOutput ? ( +
+ Output Range: {block.outputFrom}-{block.outputTo} + ({block.outputTo! - block.outputFrom!} chars) +
+ ) : ( +
+ Output Range: none +
+ )} + +
+ Total Range: {hasOutput ? block.outputFrom : block.sourceFrom}-{block.sourceTo} + + ({block.sourceTo - (hasOutput ? block.outputFrom! : block.sourceFrom)} chars) + +
+ + {block.hasError &&
✗ Has Error
} + + {hasAttributes && ( +
+ Attributes: +
+ {JSON.stringify(block.attributes, null, 2)} +
+
+ )} +
+
+ ); +} diff --git a/test/components/Editor.tsx b/test/components/Editor.tsx index 0b261c6..69d3ab6 100644 --- a/test/components/Editor.tsx +++ b/test/components/Editor.tsx @@ -1,12 +1,13 @@ -import { useEffect, useRef, useState } from "react"; -import { Play, Square, RefreshCcw } from "lucide-react"; -import { createEditor } from "../../editor/index.js"; -import { cn } from "../../app/cn.js"; -import type { ViewPlugin } from "@codemirror/view"; +import {useEffect, useRef, useState} from "react"; +import {Play, Square, RefreshCcw} from "lucide-react"; +import {createEditor} from "../../editor/index.js"; +import {cn} from "../../app/cn.js"; +import type {ViewPlugin} from "@codemirror/view"; interface EditorProps { code: string; transactionViewerPlugin?: ViewPlugin; + blockViewerPlugin?: ViewPlugin; onError?: (error: Error) => void; } @@ -24,7 +25,7 @@ const onDefaultError = debounce(() => { }, 100); }, 0); -export function Editor({ code, transactionViewerPlugin, onError = onDefaultError }: EditorProps) { +export function Editor({code, transactionViewerPlugin, blockViewerPlugin, onError = onDefaultError}: EditorProps) { const containerRef = useRef(null); const editorRef = useRef(null); const [needRerun, setNeedRerun] = useState(false); @@ -33,7 +34,9 @@ export function Editor({ code, transactionViewerPlugin, onError = onDefaultError if (containerRef.current) { containerRef.current.innerHTML = ""; - const extensions = transactionViewerPlugin ? [transactionViewerPlugin] : []; + const extensions = []; + if (transactionViewerPlugin) extensions.push(transactionViewerPlugin); + if (blockViewerPlugin) extensions.push(blockViewerPlugin); editorRef.current = createEditor(containerRef.current, { code, @@ -50,7 +53,7 @@ export function Editor({ code, transactionViewerPlugin, onError = onDefaultError editorRef.current.destroy(); } }; - }, [code, transactionViewerPlugin, onError]); + }, [code, transactionViewerPlugin, blockViewerPlugin, onError]); useEffect(() => { const onInput = () => { @@ -112,11 +115,7 @@ export function Editor({ code, transactionViewerPlugin, onError = onDefaultError > - diff --git a/test/components/ResizableSplit.tsx b/test/components/ResizableSplit.tsx new file mode 100644 index 0000000..2127635 --- /dev/null +++ b/test/components/ResizableSplit.tsx @@ -0,0 +1,70 @@ +import { useState, useRef, useEffect, ReactNode } from "react"; + +interface ResizableSplitProps { + top: ReactNode; + bottom: ReactNode; + defaultRatio?: number; // 0 to 1, representing top panel's height ratio +} + +export function ResizableSplit({ top, bottom, defaultRatio = 0.5 }: ResizableSplitProps) { + const [ratio, setRatio] = useState(defaultRatio); + const [isDragging, setIsDragging] = useState(false); + const containerRef = useRef(null); + + useEffect(() => { + if (!isDragging) return; + + const handleMouseMove = (e: MouseEvent) => { + if (!containerRef.current) return; + + const container = containerRef.current; + const rect = container.getBoundingClientRect(); + const y = e.clientY - rect.top; + const newRatio = Math.max(0.1, Math.min(0.9, y / rect.height)); + setRatio(newRatio); + }; + + const handleMouseUp = () => { + setIsDragging(false); + }; + + document.addEventListener("mousemove", handleMouseMove); + document.addEventListener("mouseup", handleMouseUp); + + return () => { + document.removeEventListener("mousemove", handleMouseMove); + document.removeEventListener("mouseup", handleMouseUp); + }; + }, [isDragging]); + + const handleMouseDown = (e: React.MouseEvent) => { + e.preventDefault(); + setIsDragging(true); + }; + + return ( +
+ {/* Top panel */} +
+ {top} +
+ + {/* Resize handle */} +
+
+
+
+
+ + {/* Bottom panel */} +
+ {bottom} +
+
+ ); +} diff --git a/test/components/TransactionViewer.tsx b/test/components/TransactionViewer.tsx index 7df4b36..9e47e2f 100644 --- a/test/components/TransactionViewer.tsx +++ b/test/components/TransactionViewer.tsx @@ -1,8 +1,8 @@ -import { useState, useEffect, useRef } from "react"; -import { ViewPlugin } from "@codemirror/view"; -import { Transaction as CMTransaction } from "@codemirror/state"; -import { blockMetadataEffect } from "../../editor/blockMetadata.ts"; -import { cn } from "../../app/cn.js"; +import {useState, useEffect, useRef} from "react"; +import {ViewPlugin} from "@codemirror/view"; +import {Transaction as CMTransaction} from "@codemirror/state"; +import {blockMetadataEffect} from "../../editor/blockMetadata.ts"; +import {cn} from "../../app/cn.js"; // Maximum number of transactions to keep in history const MAX_HISTORY = 100; @@ -53,7 +53,7 @@ interface TransactionViewerProps { onPluginCreate: (plugin: ViewPlugin) => void; } -export function TransactionViewer({ onPluginCreate }: TransactionViewerProps) { +export function TransactionViewer({onPluginCreate}: TransactionViewerProps) { const [transactions, setTransactions] = useState([]); const [autoScroll, setAutoScroll] = useState(true); const listRef = useRef(null); @@ -171,7 +171,7 @@ export function TransactionViewer({ onPluginCreate }: TransactionViewerProps) { notifyListeners(); } } - } + }, ); listeners.add((newTransactions) => { @@ -202,8 +202,7 @@ export function TransactionViewer({ onPluginCreate }: TransactionViewerProps) { for (let i = transactions.length - 1; i >= 0; i--) { const tr = transactions[i]; - const isSelection = - tr.annotations.userEvent === "select" || tr.annotations.userEvent === "select.pointer"; + const isSelection = tr.annotations.userEvent === "select" || tr.annotations.userEvent === "select.pointer"; if (isSelection) { if (currentGroup && currentGroup.type === "selection") { @@ -228,7 +227,7 @@ export function TransactionViewer({ onPluginCreate }: TransactionViewerProps) { }; return ( -
+

Transactions

@@ -258,7 +257,7 @@ export function TransactionViewer({ onPluginCreate }: TransactionViewerProps) { ) : ( - ) + ), ) )}
@@ -266,7 +265,7 @@ export function TransactionViewer({ onPluginCreate }: TransactionViewerProps) { ); } -function TransactionItem({ transaction: tr }: { transaction: TransactionData }) { +function TransactionItem({transaction: tr}: {transaction: TransactionData}) { const [isOpen, setIsOpen] = useState(false); const formatTime = (timestamp: number) => { @@ -300,7 +299,7 @@ function TransactionItem({ transaction: tr }: { transaction: TransactionData }) className={cn( "mb-2 border border-gray-200 rounded text-xs", tr.annotations.userEvent && "bg-blue-50", - tr.docChanged && "border-l-4 border-l-blue-500" + tr.docChanged && "border-l-4 border-l-blue-500", )} > @@ -329,7 +328,9 @@ function TransactionItem({ transaction: tr }: { transaction: TransactionData }) return (
-
Change {idx + 1}: {posInfo}
+
+ Change {idx + 1}: {posInfo} +
{deleted > 0 &&
Deleted {deleted} chars
} {inserted > 0 && (
@@ -368,16 +369,18 @@ function TransactionItem({ transaction: tr }: { transaction: TransactionData })
{effect.type === "blockMetadataEffect" && effect.blockMetadata ? (
-
Effect {idx + 1}: blockMetadataEffect ({effect.blockMetadata.length} blocks)
+
+ Effect {idx + 1}: blockMetadataEffect ({effect.blockMetadata.length} blocks) +
{effect.blockMetadata.map((block: any, blockIdx: number) => (
Block {blockIdx + 1}:
- {block.output !== null - ? `Output: ${block.output.from}-${block.output.to}` - : "Output: null"} + {block.output !== null ? `Output: ${block.output.from}-${block.output.to}` : "Output: null"} +
+
+ Source: {block.source.from}-{block.source.to}
-
Source: {block.source.from}-{block.source.to}
{Object.keys(block.attributes).length > 0 && (
Attributes: {JSON.stringify(block.attributes)}
)} @@ -386,7 +389,9 @@ function TransactionItem({ transaction: tr }: { transaction: TransactionData }) ))}
) : ( -
Effect {idx + 1} ({effect.type}): {JSON.stringify(effect.value).substring(0, 100)}
+
+ Effect {idx + 1} ({effect.type}): {JSON.stringify(effect.value).substring(0, 100)} +
)}
))} @@ -414,7 +419,7 @@ function TransactionItem({ transaction: tr }: { transaction: TransactionData }) ); } -function SelectionGroupItem({ transactions }: { transactions: TransactionData[] }) { +function SelectionGroupItem({transactions}: {transactions: TransactionData[]}) { const [isOpen, setIsOpen] = useState(false); const formatTime = (timestamp: number) => { @@ -458,7 +463,10 @@ function SelectionGroupItem({ transactions }: { transactions: TransactionData[] .join(", "); return ( -
+
#{tr.index} {selectionInfo} {formatTime(tr.timestamp)} From 6f25d058ea4dad3f34bbfcd7af5818662f34fe93 Mon Sep 17 00:00:00 2001 From: Luyu Cheng <2239547+chengluyu@users.noreply.github.com> Date: Wed, 19 Nov 2025 13:12:46 +0800 Subject: [PATCH 10/18] Fix not displaying debug decorations --- editor/decoration.js | 57 ++++++++++++++++++++++++++++++++++---------- editor/index.css | 2 +- editor/index.js | 3 ++- 3 files changed, 47 insertions(+), 15 deletions(-) diff --git a/editor/decoration.js b/editor/decoration.js index 6c7c0df..3f8793b 100644 --- a/editor/decoration.js +++ b/editor/decoration.js @@ -44,22 +44,30 @@ function createWidgets(lines, blockMetadata, state) { const set2 = builder2.finish(); console.groupEnd(); - const builder3 = new RangeSetBuilder(); - for (const {output} of blockMetadata) { - if (output === null) continue; - builder3.add(output.from, output.to, debugRedDecoration); - } - const set3 = builder3.finish(); + // Range sets are required to be sorted. Fortunately, they provide a method + // to merge multiple range sets into a single sorted range set. + return RangeSet.join([set1, set2]); +} + +function createDebugMarks(blockMetadata, state) { + // Build mark decorations separately from line decorations to avoid conflicts + const builder = new RangeSetBuilder(); + + for (const {output, source} of blockMetadata) { + // Add red marks for output ranges + if (output !== null && output.from < output.to) { + console.log(`Adding red decoration for output: ${output.from}-${output.to}`); + builder.add(output.from, output.to, debugRedDecoration); + } - const builder4 = new RangeSetBuilder(); - for (const {source} of blockMetadata) { - builder4.add(source.from, source.to, debugGreenDecoration); + // Add green marks for source ranges + if (source.from < source.to) { + console.log(`Adding green decoration for source: ${source.from}-${source.to}`); + builder.add(source.from, source.to, debugGreenDecoration); + } } - const set4 = builder4.finish(); - // Range sets are required to be sorted. Fortunately, they provide a method - // to merge multiple range sets into a single sorted range set. - return RangeSet.join([set1, set2, set3, set4]); + return builder.finish(); } export const outputDecoration = ViewPlugin.fromClass( @@ -87,3 +95,26 @@ export const outputDecoration = ViewPlugin.fromClass( }, {decorations: (v) => v.decorations}, ); + +export const debugDecoration = ViewPlugin.fromClass( + class { + #decorations; + + get decorations() { + return this.#decorations; + } + + /** @param {EditorView} view */ + constructor(view) { + const blockMetadata = view.state.field(blockMetadataField); + this.#decorations = createDebugMarks(blockMetadata, view.state); + } + + /** @param {ViewUpdate} update */ + update(update) { + const blockMetadata = update.state.field(blockMetadataField); + this.#decorations = createDebugMarks(blockMetadata, update.state); + } + }, + {decorations: (v) => v.decorations}, +); diff --git a/editor/index.css b/editor/index.css index a69a03d..97699c1 100644 --- a/editor/index.css +++ b/editor/index.css @@ -149,7 +149,7 @@ .cm-debug-mark { &.red { - background-color: #e4002440; + background-color: #fbbf2440; } &.green { background-color: #009a5753; diff --git a/editor/index.js b/editor/index.js index cc998ac..5268d18 100644 --- a/editor/index.js +++ b/editor/index.js @@ -9,7 +9,7 @@ import {indentWithTab} from "@codemirror/commands"; import {browser} from "globals"; import * as eslint from "eslint-linter-browserify"; import {createRuntime} from "../runtime/index.js"; -import {outputDecoration} from "./decoration.js"; +import {outputDecoration, debugDecoration} from "./decoration.js"; import {outputLines} from "./outputLines.js"; import {blockMetadataExtension, blockMetadataEffect} from "./blockMetadata.ts"; // import {outputProtection} from "./protection.js"; @@ -76,6 +76,7 @@ export function createEditor(container, options) { outputLines, blockMetadataExtension, outputDecoration, + debugDecoration, controls(runtimeRef), // Disable this for now, because it prevents copying/pasting the code. // outputProtection(), From aa66f2c5b1929ab12a1f14957bbefb4f3052d80c Mon Sep 17 00:00:00 2001 From: Luyu Cheng <2239547+chengluyu@users.noreply.github.com> Date: Tue, 9 Dec 2025 05:26:19 +0800 Subject: [PATCH 11/18] Add an example for sorting algorithms --- app/examples/sorting-algorithms.recho.js | 274 +++++++++++++++++++++++ runtime/controls/button.js | 6 +- 2 files changed, 277 insertions(+), 3 deletions(-) create mode 100644 app/examples/sorting-algorithms.recho.js diff --git a/app/examples/sorting-algorithms.recho.js b/app/examples/sorting-algorithms.recho.js new file mode 100644 index 0000000..7f9eebe --- /dev/null +++ b/app/examples/sorting-algorithms.recho.js @@ -0,0 +1,274 @@ +/** + * @title Sorting Algorithms + * @author Luyu Cheng + * @created 2025-12-09 + * @pull_request 86 + * @github chengluyu + * @label Algorithm + */ + +/** + * ============================================================================ + * = Sorting Algorithms = + * ============================================================================ + */ + +//➜ ▁▂▃ +//➜ ▂▄▅▅▇▇███ +//➜ ▁█████████ +//➜ ▃▅▆▇▇██████████ +//➜ ▁▃▇████████████████ +//➜ ▆▇▇███████████████████ +//➜ ▁▄███████████████████████ +//➜ ▂▂▅▆█████████████████████████ +//➜ ▁▅█████████████████████████████ +//➜ ▃▆▇▇███████████████████████████████ +//➜ ▁▅▆▆▇███████████████████████████████████ +//➜ ▁▇████████████████████████████████████████ +//➜ ▄▇▇██████████████████████████████████████████ +//➜ +//➜ ────────────────────────────────────────────── +{ echo.set("compact", true); echo(renderNumbers(numbers.data, numbers.highlight)); } + +const maximum = recho.number(100); +const length = recho.number(46); +const swapsPerSecond = recho.number(43); + +recho.button("Insertion Sort", () => { + const numbers = randomArray(maximum, length); + setNumbers({data: numbers, highlight: null}); + play(insertionSortSwaps(numbers)); +}); + +recho.button("Selection Sort", () => { + const numbers = randomArray(maximum, length); + setNumbers({data: numbers, highlight: null}); + play(selectionSortSwaps(numbers)); +}); + +recho.button("Merge Sort", () => { + const numbers = randomArray(maximum, length); + setNumbers({data: numbers, highlight: null}); + play(mergeSortSwaps(numbers)); +}); + +recho.button("Quick Sort", () => { + const numbers = randomArray(maximum, length); + setNumbers({data: numbers, highlight: null}); + play(quickSortSwaps(numbers)); +}); + +function insertionSortSwaps(arr) { + const swaps = []; + const copy = [...arr]; // work with a copy + for (let i = 1; i < copy.length; i++) { + let j = i; + // Move element at position i to its correct position + while (j > 0 && copy[j] < copy[j - 1]) { + swaps.push([j - 1, j]); + // Swap elements + [copy[j - 1], copy[j]] = [copy[j], copy[j - 1]]; + j--; + } + } + return swaps; +} + +function selectionSortSwaps(arr) { + const swaps = []; + const copy = [...arr]; + + for (let i = 0; i < copy.length - 1; i++) { + let minIndex = i; + // Find minimum element in remaining unsorted portion + for (let j = i + 1; j < copy.length; j++) { + swaps.push([j]) + if (copy[j] < copy[minIndex]) { + minIndex = j; + } + } + // Swap if minimum is not at current position + if (minIndex !== i) { + swaps.push([i, minIndex]); + [copy[i], copy[minIndex]] = [copy[minIndex], copy[i]]; + } + } + + return swaps; +} + +function mergeSortSwaps(arr) { + const swaps = []; + const copy = [...arr]; + + function merge(left, mid, right) { + const leftArr = copy.slice(left, mid + 1); + const rightArr = copy.slice(mid + 1, right + 1); + + let i = 0, j = 0, k = left; + + while (i < leftArr.length && j < rightArr.length) { + if (leftArr[i] <= rightArr[j]) { + copy[k] = leftArr[i]; + i++; + } else { + // Element from right half needs to move before elements from left half + // This represents multiple swaps in the original array + copy[k] = rightArr[j]; + // Record swaps: right element moves past remaining left elements + const sourcePos = mid + 1 + j; + for (let pos = sourcePos; pos > k; pos--) { + swaps.push([pos - 1, pos]); + } + j++; + } + k++; + } + + // Copy remaining elements (no swaps needed as they're already in place) + while (i < leftArr.length) { + copy[k] = leftArr[i]; + i++; + k++; + } + while (j < rightArr.length) { + copy[k] = rightArr[j]; + j++; + k++; + } + } + + function mergeSort(left, right) { + if (left < right) { + const mid = Math.floor((left + right) / 2); + mergeSort(left, mid); + mergeSort(mid + 1, right); + merge(left, mid, right); + } + } + + mergeSort(0, copy.length - 1); + return swaps; +} + +function quickSortSwaps(arr) { + const swaps = []; + const copy = [...arr]; + + function medianOfThree(left, right) { + const mid = Math.floor((left + right) / 2); + const a = copy[left], b = copy[mid], c = copy[right]; + + // Find median and return its index + if ((a <= b && b <= c) || (c <= b && b <= a)) return mid; + if ((b <= a && a <= c) || (c <= a && a <= b)) return left; + return right; + } + + function partition(left, right) { + // Choose pivot using median-of-three + const pivotIndex = medianOfThree(left, right); + + // Move pivot to end + if (pivotIndex !== right) { + swaps.push([pivotIndex, right]); + [copy[pivotIndex], copy[right]] = [copy[right], copy[pivotIndex]]; + } + + const pivot = copy[right]; + let i = left - 1; + + for (let j = left; j < right; j++) { + if (copy[j] <= pivot) { + i++; + if (i !== j) { + swaps.push([i, j]); + [copy[i], copy[j]] = [copy[j], copy[i]]; + } + } + } + + // Move pivot to its final position + i++; + if (i !== right) { + swaps.push([i, right]); + [copy[i], copy[right]] = [copy[right], copy[i]]; + } + + return i; + } + + function quickSort(left, right) { + if (left < right) { + const pivotIndex = partition(left, right); + quickSort(left, pivotIndex - 1); + quickSort(pivotIndex + 1, right); + } + } + + quickSort(0, copy.length - 1); + return swaps; +} + +function play(swaps) { + if (playing !== null) { + clearInterval(playing); + } + let current = 0; + const id = setInterval(takeStep, Math.floor(1000 / swapsPerSecond)); + setPlaying(id); + function takeStep() { + if (current >= swaps.length) { + clearInterval(playing); + setPlaying(null); + return; + } + const swap = swaps[current]; + if (swap.length === 2) { + const [left, right] = swap; + setNumbers(({ data }) => { + const cloned = structuredClone(data); + const temp = cloned[left]; + cloned[left] = cloned[right]; + cloned[right] = temp; + return { data: cloned, highlight: null }; + }); + } else if (swap.length === 1) { + const [index] = swap; + setNumbers(({ data }) => { + return { data, highlight: index}; + }); + } + current++; + } +} + +function randomArray(maximum, length) { + const buffer = []; + const gen = d3.randomInt(maximum); + for (let i = 0; i < length; i++) { + buffer.push(gen()); + } + return buffer; +} + +function renderNumbers(numbers, highlight) { + const min = d3.min(numbers), max = d3.max(numbers); + const segmentCount = (max >>> 3) + ((max & 7) === 0 ? 0 : 1); + const buffer = d3.transpose(numbers.map((n, i) => { + const head = (n & 7) === 0 ? "" : blocks[n & 7]; + const body = fullBlock.repeat(n >>> 3); + const padding = " ".repeat(segmentCount - (head.length + body.length)); + const ending = i === highlight ? "╻┸" : " ─"; + return padding + head + body + ending; + })); + return buffer.map(xs => xs.join("")).join("\n"); +} + +const [playing, setPlaying] = recho.state(null); +const [numbers, setNumbers] = recho.state({ data: [], highlight: null }) + +const blocks = Array.from(" ▁▂▃▄▅▆▇"); +const fullBlock = "█"; + +const d3 = recho.require("d3"); diff --git a/runtime/controls/button.js b/runtime/controls/button.js index 6ae595b..e901262 100644 --- a/runtime/controls/button.js +++ b/runtime/controls/button.js @@ -25,9 +25,9 @@ export class ButtonRegistry { */ register(id, callback) { // Check if this ID was already registered in the current execution - if (this.currentExecutionIds.has(id)) { - return false; // Duplicate in current execution - } + // if (this.currentExecutionIds.has(id)) { + // return false; // Duplicate in current execution + // } this.callbackMap.set(id, callback); this.currentExecutionIds.add(id); From c27cad2ba5442ca27cee081ce753629b2583eeb0 Mon Sep 17 00:00:00 2001 From: Luyu Cheng <2239547+chengluyu@users.noreply.github.com> Date: Fri, 12 Dec 2025 10:01:21 +0800 Subject: [PATCH 12/18] Improve tracking blocks --- editor/blockMetadata.ts | 323 +++++++++++++++++++++----------- editor/decoration.js | 10 +- editor/deduplication.ts | 159 ++++++++++++++++ runtime/index.js | 14 +- test/components/BlockViewer.tsx | 7 +- 5 files changed, 391 insertions(+), 122 deletions(-) create mode 100644 editor/deduplication.ts diff --git a/editor/blockMetadata.ts b/editor/blockMetadata.ts index 5b2e380..e884e19 100644 --- a/editor/blockMetadata.ts +++ b/editor/blockMetadata.ts @@ -2,6 +2,7 @@ import {StateField, StateEffect, Transaction} from "@codemirror/state"; import {syntaxTree} from "@codemirror/language"; import {OUTPUT_MARK, ERROR_MARK} from "../runtime/constant.js"; import {EditorState} from "@codemirror/state"; +import {mergeOverlappingBlocks} from "./deduplication.js"; const OUTPUT_MARK_CODE_POINT = OUTPUT_MARK.codePointAt(0); const ERROR_MARK_CODE_POINT = ERROR_MARK.codePointAt(0); @@ -27,7 +28,7 @@ export function BlockMetadata(output: Range | null, source: Range, attributes: R * Detect blocks in a given range by traversing the syntax tree. * Similar to how runtime/index.js uses acorn to parse blocks, but adapted for CodeMirror. */ -function rebuiltBlocksWithinRange(state: EditorState, from: number, to: number): BlockMetadata[] { +function detectBlockWithinRange(state: EditorState, from: number, to: number): BlockMetadata[] { const blocks: BlockMetadata[] = []; // Collect all top-level statements and their preceding output/error comment lines @@ -41,69 +42,91 @@ function rebuiltBlocksWithinRange(state: EditorState, from: number, to: number): // Detect top-level statements (direct children of Script) if (node.node.parent?.name === "Script") { // Check if this is a statement (not a comment) - const isStatement = + if ( node.name.includes("Statement") || node.name.includes("Declaration") || node.name === "ExportDeclaration" || node.name === "ImportDeclaration" || - node.name === "Block"; - - if (isStatement) { + node.name === "Block" + ) { + // Note: The range here is right-exclusive. + console.log(`Found "${node.name}" spans from ${node.from} to ${node.to}`); statementRanges.push({from: node.from, to: node.to}); - } - } - // Detect output/error comment lines (top-level line comments) - if (node.name === "LineComment" && node.node.parent?.name === "Script") { - const line = state.doc.lineAt(node.from); - // Check if the line comment covers the entire line - if (line.from === node.from && line.to === node.to) { - const codePoint = line.text.codePointAt(2); - if (codePoint === OUTPUT_MARK_CODE_POINT || codePoint === ERROR_MARK_CODE_POINT) { - // Find consecutive output/error lines - let outputStart = line.from; - let outputEnd = line.to; - - // Look backwards for more output/error lines - let currentLineNum = line.number - 1; - while (currentLineNum >= 1) { - const prevLine = state.doc.line(currentLineNum); - const prevCodePoint = prevLine.text.codePointAt(2); - if ( - prevLine.text.startsWith("//") && - (prevCodePoint === OUTPUT_MARK_CODE_POINT || prevCodePoint === ERROR_MARK_CODE_POINT) - ) { - outputStart = prevLine.from; - currentLineNum--; - } else { - break; + let outputRange: Range | null = null; + let currentNode = node.node.prevSibling; + + console.log(`Previous node: ${currentNode}`); + while (currentNode?.name === "LineComment") { + const line = state.doc.lineAt(currentNode.from); + if (line.from === currentNode.from && line.to === currentNode.to) { + const codePoint = line.text.codePointAt(2); + if (codePoint === OUTPUT_MARK_CODE_POINT || codePoint === ERROR_MARK_CODE_POINT) { + outputRange = + outputRange === null ? {from: line.from, to: line.to} : {from: line.from, to: outputRange.to}; } } + currentNode = currentNode.prevSibling; + } + console.log(`Output Range:`, outputRange); + if (outputRange !== null) { + outputRanges.set(node.from, outputRange); + } + } + // Detect output/error comment lines (top-level line comments) + else if (node.name === "LineComment") { + // Get the line containing the comment. + const line = state.doc.lineAt(node.from); + + // Check if the line comment covers the entire line + if (line.from === node.from && line.to === node.to) { + const codePoint = line.text.codePointAt(2); + if (codePoint === OUTPUT_MARK_CODE_POINT || codePoint === ERROR_MARK_CODE_POINT) { + // Find consecutive output/error lines + let outputStart = line.from; + let outputEnd = line.to; + + // Look backwards for more output/error lines + let currentLineNum = line.number - 1; + while (currentLineNum >= 1) { + const prevLine = state.doc.line(currentLineNum); + const prevCodePoint = prevLine.text.codePointAt(2); + if ( + prevLine.text.startsWith("//") && + (prevCodePoint === OUTPUT_MARK_CODE_POINT || prevCodePoint === ERROR_MARK_CODE_POINT) + ) { + outputStart = prevLine.from; + currentLineNum--; + } else { + break; + } + } - // Look forwards for more output/error lines - currentLineNum = line.number + 1; - const totalLines = state.doc.lines; - while (currentLineNum <= totalLines) { - const nextLine = state.doc.line(currentLineNum); - const nextCodePoint = nextLine.text.codePointAt(2); - if ( - nextLine.text.startsWith("//") && - (nextCodePoint === OUTPUT_MARK_CODE_POINT || nextCodePoint === ERROR_MARK_CODE_POINT) - ) { - outputEnd = nextLine.to; - currentLineNum++; - } else { - break; + // Look forwards for more output/error lines + currentLineNum = line.number + 1; + const totalLines = state.doc.lines; + while (currentLineNum <= totalLines) { + const nextLine = state.doc.line(currentLineNum); + const nextCodePoint = nextLine.text.codePointAt(2); + if ( + nextLine.text.startsWith("//") && + (nextCodePoint === OUTPUT_MARK_CODE_POINT || nextCodePoint === ERROR_MARK_CODE_POINT) + ) { + outputEnd = nextLine.to; + currentLineNum++; + } else { + break; + } } - } - // Find the next statement after these output lines - // The output belongs to the statement immediately following it - let nextStatementLine = currentLineNum; - if (nextStatementLine <= totalLines) { - const nextStmtLine = state.doc.line(nextStatementLine); - // Store this output range to be associated with the next statement - outputRanges.set(nextStmtLine.from, {from: outputStart, to: outputEnd}); + // Find the next statement after these output lines + // The output belongs to the statement immediately following it + let nextStatementLine = currentLineNum; + if (nextStatementLine <= totalLines) { + const nextStmtLine = state.doc.line(nextStatementLine); + // Store this output range to be associated with the next statement + outputRanges.set(nextStmtLine.from, {from: outputStart, to: outputEnd}); + } } } } @@ -119,10 +142,22 @@ function rebuiltBlocksWithinRange(state: EditorState, from: number, to: number): return blocks; } +/** + * Update block metadata according to the given transaction. + * + * @param blocks the current blocks + * @param tr the editor transaction + */ function updateBlocks(blocks: BlockMetadata[], tr: Transaction): void { - console.group("updateBlocks"); - - console.log("Original blocks:", structuredClone(blocks)); + // If the transaction does not change the document, then we return early. + if (!tr.docChanged) return; + + const userEvent = tr.annotation(Transaction.userEvent); + if (userEvent) { + console.group(`updateBlocks (${userEvent})`); + } else { + console.groupCollapsed(`updateBlocks`); + } /** * Find the block that contains the given position. If such block does not @@ -136,50 +171,61 @@ function updateBlocks(blocks: BlockMetadata[], tr: Transaction): void { let left = 0; let right = blocks.length; - console.log(`pos = ${pos}, side = ${side}`); - - loop: while (left < right) { - console.log(`Search range [${left}, ${right})`); - const middle = (left + right) >>> 1; - const pivot = blocks[middle]; - - const from = pivot.output?.from ?? pivot.source.from; - const to = pivot.source.to; - console.log(`Pivot: ${middle} (from = ${from}, to = ${to})`); - - done: { - if (pos < from) { - console.log("Should go left"); - // Go left and search range [left, middle + 1) - if (middle === left) { - // We cannot move left anymore. - break done; - } else { - right = middle; - continue loop; - } - } else if (to <= pos) { - console.log("Should go right"); - // Go right and search range [middle, right) - if (middle === left) { - // We cannot move right anymore. - break done; + console.groupCollapsed(`findNearestBlock(${pos}, ${side})`); + + try { + loop: while (left < right) { + console.log(`Search range [${left}, ${right})`); + const middle = (left + right) >>> 1; + const pivot = blocks[middle]!; + + const from = pivot.output?.from ?? pivot.source.from; + const to = pivot.source.to; + console.log(`Pivot: ${middle} (from = ${from}, to = ${to})`); + + done: { + if (pos < from) { + console.log(`Should go left as ${pos} < ${from}`); + // Go left and search range [left, middle + 1) + if (middle === left) { + // We cannot move left anymore. + break done; + } else { + right = middle; + continue loop; + } + } else if (to < pos) { + console.log(`Should go right as ${to} < ${pos}`); + // Go right and search range [middle, right) + if (middle === left) { + // We cannot move right anymore. + break done; + } else { + left = middle; + continue loop; + } } else { - left = middle; - continue loop; + return middle; } + } + + // After the binary search, the `left` represents the index of the first + // block that is before the given position. + console.log(`Final range: [${left}, ${right})`); + console.log(`Final pivot: ${middle} (from = ${from}, to = ${to})`); + if (side < 0) { + // If we are looking for the block before `pos`, then just return it. + return left; } else { - return middle; + // Otherwise, return the block after `pos`, if it exists. + return left + 1 < blocks.length ? left + 1 : null; } } - if (side < 0) { - return left; - } else { - return left === 0 ? null : left - 1; - } - } - return null; + return null; + } finally { + console.groupEnd(); + } } // Collect all ranges that need to be rescanned @@ -208,42 +254,92 @@ function updateBlocks(blocks: BlockMetadata[], tr: Transaction): void { console.log(`Affected block range: ${leftmost}-${rightmost}`); - if (leftmost === null || rightmost === null || leftmost > rightmost) { - // No blocks are affected by this change, so we can skip it. + if (leftmost === null || rightmost === null) { + // No blocks are affected by this change. But we might have to introduce + // new blocks within the new range. + const newBlocks = detectBlockWithinRange(tr.state, newFrom, newTo); + newBlocks.forEach((block) => affectedBlocks.add(block)); + + // However, in some cases, the newly introduced blocks might overlap with + // existing blocks. Here I illustrate with an example. + // - First, we type `let x`, and it will add a block for `let x`. + // - Then, we continue typing ` `. The space is not a part of `let x` + // because `let x` is a complete block. + // - Next, we type `=`. The input triggers `detectBlockWithinRange`, which + // recognizes `let x =` as a new block. + // In this example, if we just add `let x =` to the `blocks` array, there + // would be two overlapping blocks `let x` and `let x =`. + + if (rightmost === null) { + blocks.push(...newBlocks); + } else { + blocks.unshift(...newBlocks); + } + console.groupEnd(); continue; } + // This should never happen. + if (leftmost > rightmost) { + throw new RangeError(`Invalid block range: ${leftmost}-${rightmost}`); + } + // Step 2: Rebuild affected blocks. if (leftmost === rightmost) { - // The change affects only one block. We special case this scenario since - // we can possibly reuse the existing block attributes if the changed - // content is still a single block. - const block = blocks[leftmost]; + // The change affects only one block and the `pos` must be in the block. + // This means that the user is editing the block. + // + // We special case this scenario since we can possibly reuse the existing + // block attributes if the changed content is still a single block. + const block = blocks[leftmost]!; const newBlockFrom = tr.changes.mapPos(block.from, -1); const newBlockTo = tr.changes.mapPos(block.to, 1); console.log(`Only one block is affected. Rebuilting from ${block.from} to ${block.to}...`); - const rebuiltBlocks = rebuiltBlocksWithinRange(tr.state, newBlockFrom, newBlockTo); + const rebuiltBlocks = detectBlockWithinRange(tr.state, newBlockFrom, newBlockTo); - console.log(`Rebuilt blocks:`, rebuiltBlocks); + console.log(`Rebuilt blocks:`, structuredClone(rebuiltBlocks)); + // If only one block is rebuilt, we can reuse the existing attributes. if (rebuiltBlocks.length === 1) { - const newBlock = rebuiltBlocks[0]; + const newBlock = rebuiltBlocks[0]!; newBlock.attributes = block.attributes; affectedBlocks.add(newBlock); blocks[leftmost] = newBlock; - } else { + } + // Otherwise, we have to insert the rebuilt blocks. + else { blocks.splice(leftmost, 1, ...rebuiltBlocks); } - affectedBlocks.add(block); + rebuiltBlocks.forEach((block) => affectedBlocks.add(block)); } else { - // Multiple blocks are affected. - const rebuiltBlocks = rebuiltBlocksWithinRange(tr.state, newFrom, newTo); + console.log(`Multiple blocks from ${leftmost} to ${rightmost} are affected`); + + // Otherwise, multiple blocks are affected. + const rebuiltBlocks = detectBlockWithinRange(tr.state, newFrom, newTo); + + const leftmostBlock = blocks[leftmost]!; + const rightmostBlock = blocks[rightmost]!; + + console.log(`touchesLeftmost: ${oldFrom < leftmostBlock.to}`); + console.log(`touchesRightmost: ${rightmostBlock.from < oldTo}`); + rebuiltBlocks.forEach((block) => affectedBlocks.add(block)); - blocks.splice(leftmost, rightmost - leftmost + 1, ...rebuiltBlocks); + + // If the range touches the rightmost block, then we need to delete one more block. + const deleteCount = rightmost - leftmost + (rightmostBlock.from <= oldTo ? 1 : 0); + console.log(`deleteCount: ${deleteCount}`); + + // If the range does not touch the leftmost block, we need to delete one + // less block and adjust the `start` parameter. + if (oldFrom <= leftmostBlock.to) { + blocks.splice(leftmost, deleteCount, ...rebuiltBlocks); + } else { + blocks.splice(leftmost + 1, deleteCount - 1, ...rebuiltBlocks); + } } console.groupEnd(); @@ -251,10 +347,12 @@ function updateBlocks(blocks: BlockMetadata[], tr: Transaction): void { // Step 3: Map the unaffected blocks to new positions; for (let i = 0, n = blocks.length; i < n; i++) { - const block = blocks[i]; + const block = blocks[i]!; // Skip affected blocks as they have been updated. if (affectedBlocks.has(block)) continue; + console.log(`Processing unaffected block at ${i}`); + // Map unaffected blocks to new positions block.output = block.output ? { @@ -268,7 +366,12 @@ function updateBlocks(blocks: BlockMetadata[], tr: Transaction): void { }; } - console.log("Updated blocks:", blocks); + console.log("Updated blocks:", structuredClone(blocks)); + + // Lastly, we will merge blocks. We have elaborated on why there might exist + // overlapping blocks. Here, we employs a segment tree. + + mergeOverlappingBlocks(blocks); console.groupEnd(); } diff --git a/editor/decoration.js b/editor/decoration.js index 3f8793b..585150f 100644 --- a/editor/decoration.js +++ b/editor/decoration.js @@ -25,7 +25,7 @@ function createWidgets(lines, blockMetadata, state) { const set1 = builder1.finish(); // Build the range set for block attributes. - console.groupCollapsed("Decorations for block attributes"); + // console.groupCollapsed("Decorations for block attributes"); const builder2 = new RangeSetBuilder(); // Add block attribute decorations for (const {output, attributes} of blockMetadata) { @@ -33,7 +33,7 @@ function createWidgets(lines, blockMetadata, state) { // Apply decorations to each line in the block range const startLine = state.doc.lineAt(output.from); const endLine = state.doc.lineAt(output.to); - console.log(`Make lines from ${startLine.number} to ${endLine.number} compact`); + // console.log(`Make lines from ${startLine.number} to ${endLine.number} compact`); if (attributes.compact === true) { for (let lineNum = startLine.number; lineNum <= endLine.number; lineNum++) { const line = state.doc.line(lineNum); @@ -42,7 +42,7 @@ function createWidgets(lines, blockMetadata, state) { } } const set2 = builder2.finish(); - console.groupEnd(); + // console.groupEnd(); // Range sets are required to be sorted. Fortunately, they provide a method // to merge multiple range sets into a single sorted range set. @@ -56,13 +56,13 @@ function createDebugMarks(blockMetadata, state) { for (const {output, source} of blockMetadata) { // Add red marks for output ranges if (output !== null && output.from < output.to) { - console.log(`Adding red decoration for output: ${output.from}-${output.to}`); + // console.log(`Adding red decoration for output: ${output.from}-${output.to}`); builder.add(output.from, output.to, debugRedDecoration); } // Add green marks for source ranges if (source.from < source.to) { - console.log(`Adding green decoration for source: ${source.from}-${source.to}`); + // console.log(`Adding green decoration for source: ${source.from}-${source.to}`); builder.add(source.from, source.to, debugGreenDecoration); } } diff --git a/editor/deduplication.ts b/editor/deduplication.ts new file mode 100644 index 0000000..c458bd1 --- /dev/null +++ b/editor/deduplication.ts @@ -0,0 +1,159 @@ +import {BlockMetadata} from "./blockMetadata.js"; + +export interface Interval { + from: number; + to: number; +} + +type Block = BlockMetadata; + +interface IntervalWithIndex extends Interval { + index: number; +} + +interface MergeGroup { + indices: number[]; + from: number; + to: number; +} + +/** + * Detects overlapping blocks and returns groups of indices that should be merged. + * + * @param blocks Array of blocks to check for overlaps + * @returns Array of merge groups, where each group contains indices of overlapping blocks + */ +export function detectOverlappingBlocks(blocks: Block[]): MergeGroup[] { + if (blocks.length === 0) return []; + + // Create a sorted array of block intervals with their indices + const intervals: IntervalWithIndex[] = blocks.map((block, index) => ({ + from: block.from, + to: block.to, + index, + })); + + // Sort by start position, then by end position + intervals.sort((a, b) => { + if (a.from !== b.from) return a.from - b.from; + return a.to - b.to; + }); + + // Track which blocks overlap + const overlappingIndices = new Set(); + + // Simple sweep line algorithm to detect overlaps + for (let i = 0; i < intervals.length - 1; i++) { + const current = intervals[i]!; + const next = intervals[i + 1]!; + + // If next block starts before or at the end of current block, they overlap + if (next.from < current.to) { + overlappingIndices.add(current.index); + overlappingIndices.add(next.index); + } + } + + if (overlappingIndices.size === 0) { + return []; + } + + // Group consecutive overlapping blocks + const sortedOverlapping = Array.from(overlappingIndices).sort((a, b) => a - b); + const mergeGroups: MergeGroup[] = []; + let currentGroup: number[] = []; + + for (const idx of sortedOverlapping) { + if (currentGroup.length === 0) { + currentGroup.push(idx); + } else { + const lastIdx = currentGroup[currentGroup.length - 1]!; + const lastBlock = blocks[lastIdx]!; + const currentBlock = blocks[idx]!; + + // Check if blocks overlap + if (currentBlock.from <= lastBlock.to) { + currentGroup.push(idx); + } else { + // Finalize current group + const groupFrom = Math.min(...currentGroup.map((i) => blocks[i]!.from)); + const groupTo = Math.max(...currentGroup.map((i) => blocks[i]!.to)); + mergeGroups.push({indices: currentGroup, from: groupFrom, to: groupTo}); + currentGroup = [idx]; + } + } + } + + // Don't forget the last group + if (currentGroup.length > 0) { + const groupFrom = Math.min(...currentGroup.map((i) => blocks[i]!.from)); + const groupTo = Math.max(...currentGroup.map((i) => blocks[i]!.to)); + mergeGroups.push({indices: currentGroup, from: groupFrom, to: groupTo}); + } + + return mergeGroups; +} + +/** + * Merges overlapping blocks in place. + * + * @param blocks Array of blocks to merge (will be modified in place) + */ +export function mergeOverlappingBlocks(blocks: Block[]): void { + const mergeGroups = detectOverlappingBlocks(blocks); + + console.log("Merge groups:", mergeGroups); + mergeGroups.forEach((group) => { + group.indices.forEach((index) => { + const block = blocks[index]!; + console.log(block); + }); + }); + + if (mergeGroups.length === 0) return; + + console.log(`Found ${mergeGroups.length} groups of overlapping blocks to merge`); + + // Process groups in reverse order to avoid index shifting issues when removing + for (const group of mergeGroups.reverse()) { + if (group.indices.length < 2) continue; + + console.log(`Merging blocks at indices ${group.indices.join(", ")} into range ${group.from}-${group.to}`); + + // Find the block with the most complete information (prefer blocks with output) + let primaryIdx = group.indices[0]!; + let primaryBlock = blocks[primaryIdx]!; + + for (const idx of group.indices) { + const block = blocks[idx]!; + if (block.output && !primaryBlock.output) { + primaryIdx = idx; + primaryBlock = block; + } + } + + // Update the primary block's range to encompass all merged blocks + if (primaryBlock.output) { + const outputFrom = Math.min( + primaryBlock.output.from, + ...group.indices.map((idx) => blocks[idx]!.output?.from ?? Infinity), + ); + const outputTo = Math.max( + primaryBlock.output.to, + ...group.indices.map((idx) => blocks[idx]!.output?.to ?? -Infinity), + ); + primaryBlock.output = {from: outputFrom, to: outputTo}; + } + + primaryBlock.source = {from: group.from, to: group.to}; + + // Keep the primary block at the first index, remove all others + const firstIdx = group.indices[0]!; + blocks[firstIdx] = primaryBlock; + + // Remove other blocks (iterate backwards to avoid index shifting) + for (let i = group.indices.length - 1; i > 0; i--) { + blocks.splice(group.indices[i]!, 1); + } + } +} diff --git a/runtime/index.js b/runtime/index.js index a1affdc..f7f8a6b 100644 --- a/runtime/index.js +++ b/runtime/index.js @@ -144,14 +144,20 @@ export function createRuntime(initialCode) { for (const node of nodes) { const start = node.start; const {values} = node.state; - if (!values.length) continue; + const sourceRange = {from: node.start, to: node.end}; + + if (!values.length) { + // Create a block even if there are no values. + blocks.push(BlockMetadata(null, sourceRange, node.state.attributes)); + continue; + } // Group values by key. Each group is a row if using table, otherwise a column. const groupValues = groups(values, (v) => v.options?.key); // We need to remove the trailing newline for table. const format = withTable(groupValues) ? (...V) => table(...V).trimEnd() : columns; - + // The range of line numbers of output lines. let outputRange = null; @@ -213,9 +219,7 @@ export function createRuntime(initialCode) { blocks.sort((a, b) => a.from - b.from); } - - console.log("Dear blocks", blocks); - + // Attach block positions and attributes as effects to the transaction. const effects = [blockMetadataEffect.of(blocks)]; diff --git a/test/components/BlockViewer.tsx b/test/components/BlockViewer.tsx index b1c7d5a..e10fb52 100644 --- a/test/components/BlockViewer.tsx +++ b/test/components/BlockViewer.tsx @@ -166,8 +166,11 @@ function BlockItem({block, onLocate}: {block: BlockData; onLocate: (block: Block > - - {block.sourceFrom}-{block.sourceTo} + + [ + {block.sourceFrom}, + {block.sourceTo} + )
From 342dbc3412db2fbe0f71f92c810e0cbe78707b94 Mon Sep 17 00:00:00 2001 From: Luyu Cheng <2239547+chengluyu@users.noreply.github.com> Date: Sat, 13 Dec 2025 22:43:38 +0800 Subject: [PATCH 13/18] Reimplement the block shifting computation --- editor/blockIndicator.ts | 3 +- editor/blockMetadata.ts | 422 +++++---------------------- editor/blocks/BlockMetadata.ts | 37 +++ editor/{ => blocks}/deduplication.ts | 2 +- editor/index.js | 2 +- eslint.config.mjs | 2 +- lib/blocks.ts | 194 ++++++++++++ lib/blocks/detect.ts | 130 +++++++++ lib/containers/heap.ts | 144 +++++++++ package.json | 1 + pnpm-lock.yaml | 3 + runtime/index.js | 7 +- test/blocks.spec.ts | 294 +++++++++++++++++++ test/blocks/affected.spec.ts | 403 +++++++++++++++++++++++++ test/blocks/detect.spec.ts | 38 +++ test/containers/heap.spec.ts | 286 ++++++++++++++++++ tsconfig.json | 17 +- 17 files changed, 1621 insertions(+), 364 deletions(-) create mode 100644 editor/blocks/BlockMetadata.ts rename editor/{ => blocks}/deduplication.ts (98%) create mode 100644 lib/blocks.ts create mode 100644 lib/blocks/detect.ts create mode 100644 lib/containers/heap.ts create mode 100644 test/blocks.spec.ts create mode 100644 test/blocks/affected.spec.ts create mode 100644 test/blocks/detect.spec.ts create mode 100644 test/containers/heap.spec.ts diff --git a/editor/blockIndicator.ts b/editor/blockIndicator.ts index 7609ab3..2425a5f 100644 --- a/editor/blockIndicator.ts +++ b/editor/blockIndicator.ts @@ -1,5 +1,6 @@ import {GutterMarker, gutter} from "@codemirror/view"; -import {BlockMetadata, blockMetadataField} from "./blockMetadata"; +import {BlockMetadata} from "./blocks/BlockMetadata.js"; +import {blockMetadataField} from "./blockMetadata.ts"; export class BlockIndicator extends GutterMarker { constructor(private className: string) { diff --git a/editor/blockMetadata.ts b/editor/blockMetadata.ts index e884e19..89fd5a6 100644 --- a/editor/blockMetadata.ts +++ b/editor/blockMetadata.ts @@ -1,156 +1,20 @@ import {StateField, StateEffect, Transaction} from "@codemirror/state"; +import {mergeOverlappingBlocks} from "./blocks/deduplication.ts"; +import {blockRangeLength, findAffectedBlockRange, getOnlyOneBlock} from "../lib/blocks.ts"; +import {detectBlocksWithinRange} from "../lib/blocks/detect.ts"; import {syntaxTree} from "@codemirror/language"; -import {OUTPUT_MARK, ERROR_MARK} from "../runtime/constant.js"; -import {EditorState} from "@codemirror/state"; -import {mergeOverlappingBlocks} from "./deduplication.js"; - -const OUTPUT_MARK_CODE_POINT = OUTPUT_MARK.codePointAt(0); -const ERROR_MARK_CODE_POINT = ERROR_MARK.codePointAt(0); - -type Range = {from: number; to: number}; - -export function BlockMetadata(output: Range | null, source: Range, attributes: Record = {}) { - return { - output, - source, - get from() { - return this.output?.from ?? this.source.from; - }, - get to() { - return this.source.to; - }, - attributes, - error: false, - }; -} - -/** - * Detect blocks in a given range by traversing the syntax tree. - * Similar to how runtime/index.js uses acorn to parse blocks, but adapted for CodeMirror. - */ -function detectBlockWithinRange(state: EditorState, from: number, to: number): BlockMetadata[] { - const blocks: BlockMetadata[] = []; - - // Collect all top-level statements and their preceding output/error comment lines - const statementRanges: Range[] = []; - const outputRanges = new Map(); // Map statement position to output range - - syntaxTree(state).iterate({ - from, - to, - enter: (node) => { - // Detect top-level statements (direct children of Script) - if (node.node.parent?.name === "Script") { - // Check if this is a statement (not a comment) - if ( - node.name.includes("Statement") || - node.name.includes("Declaration") || - node.name === "ExportDeclaration" || - node.name === "ImportDeclaration" || - node.name === "Block" - ) { - // Note: The range here is right-exclusive. - console.log(`Found "${node.name}" spans from ${node.from} to ${node.to}`); - statementRanges.push({from: node.from, to: node.to}); - - let outputRange: Range | null = null; - let currentNode = node.node.prevSibling; - - console.log(`Previous node: ${currentNode}`); - while (currentNode?.name === "LineComment") { - const line = state.doc.lineAt(currentNode.from); - if (line.from === currentNode.from && line.to === currentNode.to) { - const codePoint = line.text.codePointAt(2); - if (codePoint === OUTPUT_MARK_CODE_POINT || codePoint === ERROR_MARK_CODE_POINT) { - outputRange = - outputRange === null ? {from: line.from, to: line.to} : {from: line.from, to: outputRange.to}; - } - } - currentNode = currentNode.prevSibling; - } - console.log(`Output Range:`, outputRange); - if (outputRange !== null) { - outputRanges.set(node.from, outputRange); - } - } - // Detect output/error comment lines (top-level line comments) - else if (node.name === "LineComment") { - // Get the line containing the comment. - const line = state.doc.lineAt(node.from); - - // Check if the line comment covers the entire line - if (line.from === node.from && line.to === node.to) { - const codePoint = line.text.codePointAt(2); - if (codePoint === OUTPUT_MARK_CODE_POINT || codePoint === ERROR_MARK_CODE_POINT) { - // Find consecutive output/error lines - let outputStart = line.from; - let outputEnd = line.to; - - // Look backwards for more output/error lines - let currentLineNum = line.number - 1; - while (currentLineNum >= 1) { - const prevLine = state.doc.line(currentLineNum); - const prevCodePoint = prevLine.text.codePointAt(2); - if ( - prevLine.text.startsWith("//") && - (prevCodePoint === OUTPUT_MARK_CODE_POINT || prevCodePoint === ERROR_MARK_CODE_POINT) - ) { - outputStart = prevLine.from; - currentLineNum--; - } else { - break; - } - } - - // Look forwards for more output/error lines - currentLineNum = line.number + 1; - const totalLines = state.doc.lines; - while (currentLineNum <= totalLines) { - const nextLine = state.doc.line(currentLineNum); - const nextCodePoint = nextLine.text.codePointAt(2); - if ( - nextLine.text.startsWith("//") && - (nextCodePoint === OUTPUT_MARK_CODE_POINT || nextCodePoint === ERROR_MARK_CODE_POINT) - ) { - outputEnd = nextLine.to; - currentLineNum++; - } else { - break; - } - } - - // Find the next statement after these output lines - // The output belongs to the statement immediately following it - let nextStatementLine = currentLineNum; - if (nextStatementLine <= totalLines) { - const nextStmtLine = state.doc.line(nextStatementLine); - // Store this output range to be associated with the next statement - outputRanges.set(nextStmtLine.from, {from: outputStart, to: outputEnd}); - } - } - } - } - } - }, - }); - - // Build block metadata from statements - for (const range of statementRanges) { - blocks.push(BlockMetadata(outputRanges.get(range.from) ?? null, range)); - } - - return blocks; -} +import {MaxHeap} from "../lib/containers/heap.ts"; +import {type Range, BlockMetadata} from "./blocks/BlockMetadata.ts"; /** * Update block metadata according to the given transaction. * - * @param blocks the current blocks + * @param oldBlocks the current blocks * @param tr the editor transaction */ -function updateBlocks(blocks: BlockMetadata[], tr: Transaction): void { +function updateBlocks(oldBlocks: BlockMetadata[], tr: Transaction): BlockMetadata[] { // If the transaction does not change the document, then we return early. - if (!tr.docChanged) return; + if (!tr.docChanged) return oldBlocks; const userEvent = tr.annotation(Transaction.userEvent); if (userEvent) { @@ -159,75 +23,6 @@ function updateBlocks(blocks: BlockMetadata[], tr: Transaction): void { console.groupCollapsed(`updateBlocks`); } - /** - * Find the block that contains the given position. If such block does not - * exist, return the nearest block that is right before or after the given - * position. When no blocks are before and after the given position, return - * `null`. - * @param pos the position we want to find - * @param side `-1` - lower bound, `1` - upper bound - */ - function findNearestBlock(pos: number, side: -1 | 1): number | null { - let left = 0; - let right = blocks.length; - - console.groupCollapsed(`findNearestBlock(${pos}, ${side})`); - - try { - loop: while (left < right) { - console.log(`Search range [${left}, ${right})`); - const middle = (left + right) >>> 1; - const pivot = blocks[middle]!; - - const from = pivot.output?.from ?? pivot.source.from; - const to = pivot.source.to; - console.log(`Pivot: ${middle} (from = ${from}, to = ${to})`); - - done: { - if (pos < from) { - console.log(`Should go left as ${pos} < ${from}`); - // Go left and search range [left, middle + 1) - if (middle === left) { - // We cannot move left anymore. - break done; - } else { - right = middle; - continue loop; - } - } else if (to < pos) { - console.log(`Should go right as ${to} < ${pos}`); - // Go right and search range [middle, right) - if (middle === left) { - // We cannot move right anymore. - break done; - } else { - left = middle; - continue loop; - } - } else { - return middle; - } - } - - // After the binary search, the `left` represents the index of the first - // block that is before the given position. - console.log(`Final range: [${left}, ${right})`); - console.log(`Final pivot: ${middle} (from = ${from}, to = ${to})`); - if (side < 0) { - // If we are looking for the block before `pos`, then just return it. - return left; - } else { - // Otherwise, return the block after `pos`, if it exists. - return left + 1 < blocks.length ? left + 1 : null; - } - } - - return null; - } finally { - console.groupEnd(); - } - } - // Collect all ranges that need to be rescanned type ChangedRange = {oldFrom: number; oldTo: number; newFrom: number; newTo: number}; const changedRanges: ChangedRange[] = []; @@ -238,155 +33,113 @@ function updateBlocks(blocks: BlockMetadata[], tr: Transaction): void { if (changedRanges.length === 0) { console.log("No changes detected"); console.groupEnd(); - return; + return oldBlocks; } + /** + * Keep track of all blocks that are affected by the change. They will not be + * added to the array of new blocks. + */ const affectedBlocks = new Set(); + const newlyCreatedBlocks = new MaxHeap( + (block) => block.from, + (a, b) => b - a, + ); + // Process changed ranges one by one, because ranges are disjoint. for (const {oldFrom, oldTo, newFrom, newTo} of changedRanges) { - console.groupCollapsed(`Range ${oldFrom}-${oldTo} -> ${newFrom}-${newTo}`); + if (oldFrom === oldTo) { + if (newFrom === oldFrom) { + console.groupCollapsed(`Insert ${newTo - newFrom} characters at ${oldFrom}`); + } else { + console.groupCollapsed(`Insert ${newTo - newFrom} characters: ${oldFrom} -> ${newFrom}-${newTo}`); + } + } else { + console.groupCollapsed(`Update: ${oldFrom}-${oldTo} -> ${newFrom}-${newTo}`); + } // Step 1: Find the blocks that are affected by the change. - const leftmost = findNearestBlock(oldFrom, -1); - const rightmost = findNearestBlock(oldTo, 1); - - console.log(`Affected block range: ${leftmost}-${rightmost}`); - - if (leftmost === null || rightmost === null) { - // No blocks are affected by this change. But we might have to introduce - // new blocks within the new range. - const newBlocks = detectBlockWithinRange(tr.state, newFrom, newTo); - newBlocks.forEach((block) => affectedBlocks.add(block)); - - // However, in some cases, the newly introduced blocks might overlap with - // existing blocks. Here I illustrate with an example. - // - First, we type `let x`, and it will add a block for `let x`. - // - Then, we continue typing ` `. The space is not a part of `let x` - // because `let x` is a complete block. - // - Next, we type `=`. The input triggers `detectBlockWithinRange`, which - // recognizes `let x =` as a new block. - // In this example, if we just add `let x =` to the `blocks` array, there - // would be two overlapping blocks `let x` and `let x =`. - - if (rightmost === null) { - blocks.push(...newBlocks); - } else { - blocks.unshift(...newBlocks); - } + const affectedBlockRange = findAffectedBlockRange(oldBlocks, oldFrom, oldTo); - console.groupEnd(); - continue; - } + console.log(`Affected block range: ${affectedBlockRange[0]}-${affectedBlockRange[1]}`); - // This should never happen. - if (leftmost > rightmost) { - throw new RangeError(`Invalid block range: ${leftmost}-${rightmost}`); + // Add the affected blocks to the set. + for (let i = affectedBlockRange[0] ?? 0, n = affectedBlockRange[1] ?? oldBlocks.length; i < n; i++) { + affectedBlocks.add(oldBlocks[i]!); } - // Step 2: Rebuild affected blocks. + // Check a corner case where the affected block range is empty but there are blocks. + if (blockRangeLength(oldBlocks.length, affectedBlockRange) === 0 && oldBlocks.length > 0) { + reportError("This should never happen"); + } - if (leftmost === rightmost) { - // The change affects only one block and the `pos` must be in the block. - // This means that the user is editing the block. - // - // We special case this scenario since we can possibly reuse the existing - // block attributes if the changed content is still a single block. - const block = blocks[leftmost]!; + // Now, we are going to compute the range which should be re-parsed. + const reparseFrom = affectedBlockRange[0] === null ? 0 : oldBlocks[affectedBlockRange[0]]!.from; + const reparseTo = affectedBlockRange[1] === null ? tr.state.doc.length : oldBlocks[affectedBlockRange[1] - 1]!.to; + const newBlocks = detectBlocksWithinRange(syntaxTree(tr.state), tr.state.doc, reparseFrom, reparseTo); - const newBlockFrom = tr.changes.mapPos(block.from, -1); - const newBlockTo = tr.changes.mapPos(block.to, 1); + // If only one block is affected and only one new block is created, we can + // simply inherit the attributes from the old block. + const soleBlockIndex = getOnlyOneBlock(oldBlocks.length, affectedBlockRange); + if (typeof soleBlockIndex === "number" && newBlocks.length === 1) { + newBlocks[0]!.attributes = oldBlocks[soleBlockIndex]!.attributes; + } - console.log(`Only one block is affected. Rebuilting from ${block.from} to ${block.to}...`); - const rebuiltBlocks = detectBlockWithinRange(tr.state, newBlockFrom, newBlockTo); + // Add new blocks to the heap, which sorts blocks by their `from` position. + for (let i = 0, n = newBlocks.length; i < n; i++) { + newlyCreatedBlocks.insert(newBlocks[i]!); + } - console.log(`Rebuilt blocks:`, structuredClone(rebuiltBlocks)); + console.groupEnd(); + } - // If only one block is rebuilt, we can reuse the existing attributes. - if (rebuiltBlocks.length === 1) { - const newBlock = rebuiltBlocks[0]!; - newBlock.attributes = block.attributes; - affectedBlocks.add(newBlock); - blocks[leftmost] = newBlock; - } - // Otherwise, we have to insert the rebuilt blocks. - else { - blocks.splice(leftmost, 1, ...rebuiltBlocks); - } - rebuiltBlocks.forEach((block) => affectedBlocks.add(block)); - } else { - console.log(`Multiple blocks from ${leftmost} to ${rightmost} are affected`); + // Step 3: Combine the array of old blocks and the heap of new blocks. - // Otherwise, multiple blocks are affected. - const rebuiltBlocks = detectBlockWithinRange(tr.state, newFrom, newTo); + const newBlocks: BlockMetadata[] = []; - const leftmostBlock = blocks[leftmost]!; - const rightmostBlock = blocks[rightmost]!; + for (let i = 0, n = oldBlocks.length; i < n; i++) { + const oldBlock = oldBlocks[i]!; - console.log(`touchesLeftmost: ${oldFrom < leftmostBlock.to}`); - console.log(`touchesRightmost: ${rightmostBlock.from < oldTo}`); + // Skip affected blocks, as they have been updated. + if (affectedBlocks.has(oldBlock)) continue; - rebuiltBlocks.forEach((block) => affectedBlocks.add(block)); + const newBlock = oldBlock.map(tr); - // If the range touches the rightmost block, then we need to delete one more block. - const deleteCount = rightmost - leftmost + (rightmostBlock.from <= oldTo ? 1 : 0); - console.log(`deleteCount: ${deleteCount}`); + // Peek the heap. Check the positional relationship between its foremost + // block and the current old block. - // If the range does not touch the leftmost block, we need to delete one - // less block and adjust the `start` parameter. - if (oldFrom <= leftmostBlock.to) { - blocks.splice(leftmost, deleteCount, ...rebuiltBlocks); - } else { - blocks.splice(leftmost + 1, deleteCount - 1, ...rebuiltBlocks); - } + while (newlyCreatedBlocks.nonEmpty() && newlyCreatedBlocks.peek.from < newBlock.from) { + newBlocks.push(newlyCreatedBlocks.peek); + newlyCreatedBlocks.extractMax(); } - console.groupEnd(); + // At this point, the heap is either empty or the foremost block is after + // the current old block's `from` position. + + newBlocks.push(newBlock); } - // Step 3: Map the unaffected blocks to new positions; - for (let i = 0, n = blocks.length; i < n; i++) { - const block = blocks[i]!; - // Skip affected blocks as they have been updated. - if (affectedBlocks.has(block)) continue; - - console.log(`Processing unaffected block at ${i}`); - - // Map unaffected blocks to new positions - block.output = block.output - ? { - from: tr.changes.mapPos(block.output.from, -1), - to: tr.changes.mapPos(block.output.to, 1), - } - : null; - block.source = { - from: tr.changes.mapPos(block.source.from, -1), - to: tr.changes.mapPos(block.source.to, 1), - }; + // In the end, push any remaining blocks from the heap. + while (newlyCreatedBlocks.nonEmpty()) { + newBlocks.push(newlyCreatedBlocks.peek); + newlyCreatedBlocks.extractMax(); } - console.log("Updated blocks:", structuredClone(blocks)); + console.log("New blocks:", newBlocks); // Lastly, we will merge blocks. We have elaborated on why there might exist // overlapping blocks. Here, we employs a segment tree. - mergeOverlappingBlocks(blocks); + // mergeOverlappingBlocks(oldBlocks); console.groupEnd(); + return newBlocks; } export const blockMetadataEffect = StateEffect.define(); -export type BlockMetadata = { - output: Range | null; - source: Range; - readonly from: number; - readonly to: number; - attributes: Record; - error: boolean; -}; - export const blockMetadataField = StateField.define({ create() { return []; @@ -405,32 +158,13 @@ export const blockMetadataField = StateField.define({ // If the block attributes effect is not present, then this transaction // is made by the user, we need to update the block attributes accroding // to the latest syntax tree. - updateBlocks(blocks, tr); - return blocks; + return updateBlocks(blocks, tr); } else { // Otherwise, we need to update the block attributes according to the // metadata sent from the runtime. Most importantly, we need to translate // the position of each block after the changes has been made. - console.group("Updating blocks from the effect"); - for (const block of blocksFromEffect) { - if (block.output === null) { - const from = tr.changes.mapPos(block.source.from, -1); - const to = tr.changes.mapPos(block.source.from, 1); - block.output = {from, to: to - 1}; - } else { - const from = tr.changes.mapPos(block.output.from, -1); - const to = tr.changes.mapPos(block.output.to, 1); - block.output = {from, to: to - 1}; - } - block.source = { - from: tr.changes.mapPos(block.source.from, 1), - to: tr.changes.mapPos(block.source.to, 1), - }; - console.log(`output: ${block.output?.from} - ${block.output?.to}`); - console.log(`source: ${block.source.from} - ${block.source.to}`); - } - console.groupEnd(); - return blocksFromEffect; + // TODO: Does this really happen??? + return blocksFromEffect.map((block) => block.map(tr)); } }, }); diff --git a/editor/blocks/BlockMetadata.ts b/editor/blocks/BlockMetadata.ts new file mode 100644 index 0000000..1f7b12a --- /dev/null +++ b/editor/blocks/BlockMetadata.ts @@ -0,0 +1,37 @@ +import type {Transaction} from "@codemirror/state"; + +export type Range = {from: number; to: number}; + +export class BlockMetadata { + public constructor( + public readonly output: Range | null, + public readonly source: Range, + public attributes: Record = {}, + public error: boolean = false, + ) {} + + get from() { + return this.output?.from ?? this.source.from; + } + + get to() { + return this.source.to; + } + + public map(tr: Transaction): BlockMetadata { + if (!tr.docChanged) return this; + const output = this.output + ? { + from: tr.changes.mapPos(this.output.from, 1), + to: tr.changes.mapPos(this.output.to, -1), + } + : null; + const source = { + from: tr.changes.mapPos(this.source.from, 1), + to: tr.changes.mapPos(this.source.to, -1), + }; + const attributes = this.attributes; + const error = this.error; + return new BlockMetadata(output, source, attributes, error); + } +} diff --git a/editor/deduplication.ts b/editor/blocks/deduplication.ts similarity index 98% rename from editor/deduplication.ts rename to editor/blocks/deduplication.ts index c458bd1..5b59a1b 100644 --- a/editor/deduplication.ts +++ b/editor/blocks/deduplication.ts @@ -1,4 +1,4 @@ -import {BlockMetadata} from "./blockMetadata.js"; +import {BlockMetadata} from "./BlockMetadata.js"; export interface Interval { from: number; diff --git a/editor/index.js b/editor/index.js index 5deacbb..6e3bacc 100644 --- a/editor/index.js +++ b/editor/index.js @@ -11,7 +11,7 @@ import * as eslint from "eslint-linter-browserify"; import {createRuntime} from "../runtime/index.js"; import {outputDecoration, debugDecoration} from "./decoration.js"; import {outputLines} from "./outputLines.js"; -import {blockMetadataExtension, blockMetadataEffect} from "./blockMetadata.ts"; +import {blockMetadataExtension} from "./blockMetadata.ts"; // import {outputProtection} from "./protection.js"; import {dispatch as d3Dispatch} from "d3-dispatch"; import {controls} from "./controls/index.js"; diff --git a/eslint.config.mjs b/eslint.config.mjs index f812d4a..57bcb5e 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -6,7 +6,7 @@ import hooksPlugin from "eslint-plugin-react-hooks"; export default defineConfig([ { - files: ["editor/**/*.js", "runtime/**/*.js", "test/**/*.js", "app/**/*.js", "app/**/*.jsx"], + files: ["editor/**/*.js", "runtime/**/*.js", "test/**/*.js", "app/**/*.js", "app/**/*.jsx", "lib/**/*.js"], plugins: { react: reactPlugin, "react-hooks": hooksPlugin, diff --git a/lib/blocks.ts b/lib/blocks.ts new file mode 100644 index 0000000..ba3eb60 --- /dev/null +++ b/lib/blocks.ts @@ -0,0 +1,194 @@ +/** + * Find the block where the given position is adjacent to. There are a few + * possible cases. + * + * - If `pos` is inside a block, return the block directly. + * - Otherwise, `pos` is not inside any block. We return the block before + * and the block after `pos`. If any one of them does not exist, return + * `null` instead. + * @param blocks The array of blocks. The right boundary `to` is exclusive. + * @param pos The position of the selection + * @returns If `pos` is inside a block, return the block index. If `pos` is + * between two blocks, return the indices of the two blocks. Note that if + * `pos` is before the first block, return `[-1, 0]`. If `pos` is after + * the last block, return `[blocks.length - 1, blocks.length]`. Lastly, if + * `blocks` is empty, return `null`. + */ +export function findAdjacentBlocks( + blocks: {from: number; to: number}[], + pos: number, +): number | [number, number] | null { + try { + // console.groupCollapsed(`findAdjacentBlocks(${pos})`); + + // We maintain a binary search range [left, right). Note that the right + // boundary is exclusive, i.e., the range is empty when `left === right`. + let left = 0; + let right = blocks.length; + let DEBUG_hasEnteredLoop = false; + + // When the range is non-empty. + loop: while (left < right) { + DEBUG_hasEnteredLoop = true; + + const middle = (left + right) >>> 1; + const pivot = blocks[middle]!; + + if (pos < pivot.from) { + // We should move to the left sub-range [left, middle). + if (left === middle) { + return [middle - 1, middle]; + } else { + right = middle; + continue loop; + } + } else if (pivot.to <= pos) { + // We should move to the right sub-range [middle, right). + if (left === middle) { + return [middle, middle + 1]; + } else { + left = middle; + } + } else { + // Good news: `pos` is inside `pivot`. + return middle; + } + } + + // We can only reach here if we haven't enter the loop. + // console.assert(!DEBUG_hasEnteredLoop, "Did not return in the loop."); + + return null; + } finally { + // console.groupEnd(); + } +} + +export type BlockRange = [from: number | null, to: number | null]; + +export function blockRangeLength(blockCount: number, [from, to]: BlockRange): number { + if (from === null) { + if (to === null) { + return blockCount; + } else { + return to; + } + } else { + if (to === null) { + return blockCount - from; + } else { + return to - from; + } + } +} + +/** + * If there is only one block in the range, return its index. Otherwise, return + * `null`. + * + * @param blockCount the number of blocks + * @param param1 the range of blocks + * @returns the range of the block + */ +export function getOnlyOneBlock(blockCount: number, [from, to]: BlockRange): number | null { + if (from === null) { + if (to === null) { + return null; + } else { + return to === 1 ? 0 : null; + } + } else { + if (to === null) { + return blockCount - from === 1 ? from : null; + } else { + return to - from === 1 ? from : null; + } + } +} + +/** + * Finds the range of affected blocks in an array of disjoint and sorted blocks. + * The ranges of blocks whose indices within the returned range should be + * overlapping with range [from, to). The indices of blocks whose ranges are + * overlapping with range [from, to) should be returned. + * + * Note that the returned range does not represent the relationship between the + * edited area and the blocks. An edit may affect nearby blocks even if those + * blocks are not directly modified. For example, adding a plus `+` between two + * function calls would merge the two blocks into a new expression. + * + * @param blocks The array of blocks. Blocks are disjoint and sorted. + * @param from The starting index of the edited range. + * @param to The ending index (exclusive) of the edited range. + * @returns The range of affected blocks. The + */ +export function findAffectedBlockRange( + blocks: {from: number; to: number}[], + from: number, + to: number, +): [from: number | null, to: number | null] { + if (from > to) { + throw new RangeError("`from` must be less than or equal to `to`"); + } + + if (from < 0) { + throw new RangeError("`from` must be greater than or equal to 0"); + } + + const fromResult = findAdjacentBlocks(blocks, from); + + // In insertion transactions, `from` and `to` are identical because they do + // not delete any characters from the document. + if (from === to) { + if (typeof fromResult === "number") { + // This means that the insertion point is in a block, thus only the block + // is affected. We return [index, index + 1). + return [fromResult, fromResult + 1]; + } else if (fromResult === null) { + // There is no block at all. We should re-parse the entire document. + return [null, null]; + } else { + // The insertion point is between blocks. We should include two blocks. + const [blockIndexBefore, blockIndexAfter] = fromResult; + return [ + // `null` means we should the caller should use the beginning of the document. + blockIndexBefore === -1 ? null : blockIndexBefore, + blockIndexAfter === blocks.length ? null : blockIndexAfter + 1, + ]; + } + } + + // Otherwise, the transaction deletes characters from the document. + // Note that we use `to - 1` because we want to locate the last character. + // Using `to` is wrong because it would locate the first character of the next block. + const toResult = findAdjacentBlocks(blocks, to - 1); + + // This means that we are deleting from non-block region. + if (fromResult === null || toResult === null) { + // If there is no block at all, then both of them should be `null`. + if (fromResult !== toResult) { + throw new RangeError("`from` and `to` should be located to nowhere at the same time", { + cause: {ranges: blocks.map((block) => ({from: block.from, to: block.to})), from, to}, + }); + } + return [null, null]; + } + + if (typeof fromResult === "number") { + if (typeof toResult === "number") { + return [fromResult, toResult === blocks.length ? null : toResult + 1]; + } else { + const blockIndexAfterTo = toResult[1]; + return [fromResult, blockIndexAfterTo === blocks.length ? null : blockIndexAfterTo + 1]; + } + } else { + const blockIndexBeforeFrom = fromResult[0]; + const rangeFrom = blockIndexBeforeFrom === -1 ? null : blockIndexBeforeFrom; + if (typeof toResult === "number") { + return [rangeFrom, toResult === blocks.length ? null : toResult + 1]; + } else { + const blockIndexAfterTo = toResult[1]; + return [rangeFrom, blockIndexAfterTo === blocks.length ? null : blockIndexAfterTo + 1]; + } + } +} diff --git a/lib/blocks/detect.ts b/lib/blocks/detect.ts new file mode 100644 index 0000000..44b06df --- /dev/null +++ b/lib/blocks/detect.ts @@ -0,0 +1,130 @@ +import {type Text} from "@codemirror/state"; +import {OUTPUT_MARK, ERROR_MARK} from "../../runtime/constant.js"; +import {syntaxTree} from "@codemirror/language"; +import {BlockMetadata, type Range} from "../../editor/blocks/BlockMetadata.ts"; + +const OUTPUT_MARK_CODE_POINT = OUTPUT_MARK.codePointAt(0); +const ERROR_MARK_CODE_POINT = ERROR_MARK.codePointAt(0); + +// Since CodeMirror does not export `SyntaxNode`, we have to get it in this way. +type Tree = ReturnType; +type SyntaxNode = Tree["topNode"]; + +function extendOutputForward(doc: Text, node: SyntaxNode): Range | null { + let outputRange: Range | null = null; + let currentNode = node.node.prevSibling; + + while (currentNode?.name === "LineComment") { + const line = doc.lineAt(currentNode.from); + if (line.from === currentNode.from && line.to === currentNode.to) { + const codePoint = line.text.codePointAt(2); + if (codePoint === OUTPUT_MARK_CODE_POINT || codePoint === ERROR_MARK_CODE_POINT) { + outputRange = outputRange === null ? {from: line.from, to: line.to} : {from: line.from, to: outputRange.to}; + } + } + currentNode = currentNode.prevSibling; + } + + return outputRange; +} + +/** + * Detect blocks in a given range by traversing the syntax tree. + * Similar to how runtime/index.js uses acorn to parse blocks, but adapted for CodeMirror. + */ +export function detectBlocksWithinRange(tree: Tree, doc: Text, from: number, to: number): BlockMetadata[] { + const blocks: BlockMetadata[] = []; + + // Collect all top-level statements and their preceding output/error comment lines + const statementRanges: Range[] = []; + const outputRanges = new Map(); // Map statement position to output range + + tree.iterate({ + from, + to, + enter: (node) => { + // Detect top-level statements (direct children of Script) + if (node.node.parent?.name === "Script") { + // Check if this is a statement (not a comment) + if ( + node.name.includes("Statement") || + node.name.includes("Declaration") || + node.name === "ExportDeclaration" || + node.name === "ImportDeclaration" || + node.name === "Block" + ) { + statementRanges.push({from: node.from, to: node.to}); + + const outputRange = extendOutputForward(doc, node.node); + if (outputRange !== null) { + outputRanges.set(node.from, outputRange); + } + } + // Detect output/error comment lines (top-level line comments) + else if (node.name === "LineComment") { + // Get the line containing the comment. + const line = doc.lineAt(node.from); + + // Check if the line comment covers the entire line + if (line.from === node.from && line.to === node.to) { + const codePoint = line.text.codePointAt(2); + if (codePoint === OUTPUT_MARK_CODE_POINT || codePoint === ERROR_MARK_CODE_POINT) { + // Find consecutive output/error lines + let outputStart = line.from; + let outputEnd = line.to; + + // Look backwards for more output/error lines + let currentLineNum = line.number - 1; + while (currentLineNum >= 1) { + const prevLine = doc.line(currentLineNum); + const prevCodePoint = prevLine.text.codePointAt(2); + if ( + prevLine.text.startsWith("//") && + (prevCodePoint === OUTPUT_MARK_CODE_POINT || prevCodePoint === ERROR_MARK_CODE_POINT) + ) { + outputStart = prevLine.from; + currentLineNum--; + } else { + break; + } + } + + // Look forwards for more output/error lines + currentLineNum = line.number + 1; + const totalLines = doc.lines; + while (currentLineNum <= totalLines) { + const nextLine = doc.line(currentLineNum); + const nextCodePoint = nextLine.text.codePointAt(2); + if ( + nextLine.text.startsWith("//") && + (nextCodePoint === OUTPUT_MARK_CODE_POINT || nextCodePoint === ERROR_MARK_CODE_POINT) + ) { + outputEnd = nextLine.to; + currentLineNum++; + } else { + break; + } + } + + // Find the next statement after these output lines + // The output belongs to the statement immediately following it + let nextStatementLine = currentLineNum; + if (nextStatementLine <= totalLines) { + const nextStmtLine = doc.line(nextStatementLine); + // Store this output range to be associated with the next statement + outputRanges.set(nextStmtLine.from, {from: outputStart, to: outputEnd}); + } + } + } + } + } + }, + }); + + // Build block metadata from statements + for (const range of statementRanges) { + blocks.push(new BlockMetadata(outputRanges.get(range.from) ?? null, range)); + } + + return blocks; +} diff --git a/lib/containers/heap.ts b/lib/containers/heap.ts new file mode 100644 index 0000000..dcc34d8 --- /dev/null +++ b/lib/containers/heap.ts @@ -0,0 +1,144 @@ +export class MaxHeap { + private heap: T[] = []; + private weights: number[] = []; + private indexMap: Map = new Map(); + private keyFn: (value: T) => number; + private compareFn: (a: number, b: number) => number; + + constructor(keyFn: (value: T) => number, compareFn: (a: number, b: number) => number = (a, b) => a - b) { + this.keyFn = keyFn; + this.compareFn = compareFn; + } + + private parent(i: number): number { + return Math.floor((i - 1) / 2); + } + + private leftChild(i: number): number { + return 2 * i + 1; + } + + private rightChild(i: number): number { + return 2 * i + 2; + } + + private swap(i: number, j: number): void { + [this.heap[i], this.heap[j]] = [this.heap[j], this.heap[i]]; + [this.weights[i], this.weights[j]] = [this.weights[j], this.weights[i]]; + this.indexMap.set(this.heap[i]!, i); + this.indexMap.set(this.heap[j]!, j); + } + + private percolateUp(i: number): void { + while (i > 0) { + const p = this.parent(i); + if (this.compareFn(this.weights[i]!, this.weights[p]!) > 0) { + this.swap(i, p); + i = p; + } else { + break; + } + } + } + + private percolateDown(i: number): void { + const size = this.heap.length; + while (true) { + let largest = i; + const left = this.leftChild(i); + const right = this.rightChild(i); + + if (left < size && this.compareFn(this.weights[left], this.weights[largest]) > 0) { + largest = left; + } + if (right < size && this.compareFn(this.weights[right], this.weights[largest]) > 0) { + largest = right; + } + + if (largest !== i) { + this.swap(i, largest); + i = largest; + } else { + break; + } + } + } + + insert(value: T): void { + const weight = this.keyFn(value); + const existingIndex = this.indexMap.get(value); + + if (existingIndex !== undefined) { + const oldWeight = this.weights[existingIndex]; + if (weight !== oldWeight) { + this.weights[existingIndex] = weight; + const cmp = this.compareFn(weight, oldWeight); + if (cmp > 0) { + this.percolateUp(existingIndex); + } else if (cmp < 0) { + this.percolateDown(existingIndex); + } + } + } else { + const index = this.heap.length; + this.heap.push(value); + this.weights.push(weight); + this.indexMap.set(value, index); + this.percolateUp(index); + } + } + + extractMax(): T | undefined { + if (this.heap.length === 0) { + return undefined; + } + + const max = this.heap[0]; + this.indexMap.delete(max); + + if (this.heap.length === 1) { + this.heap.pop(); + this.weights.pop(); + return max; + } + + this.heap[0] = this.heap.pop()!; + this.weights[0] = this.weights.pop()!; + this.indexMap.set(this.heap[0], 0); + this.percolateDown(0); + + return max; + } + + get peek(): T | undefined { + return this.heap[0]; + } + + peekWeight(): number | undefined { + return this.weights[0]; + } + + has(value: T): boolean { + return this.indexMap.has(value); + } + + get size(): number { + return this.heap.length; + } + + get isEmpty(): boolean { + return this.heap.length === 0; + } + + nonEmpty(): this is NonEmptyHeap { + return this.heap.length > 0; + } + + clear(): void { + this.heap = []; + this.weights = []; + this.indexMap.clear(); + } +} + +type NonEmptyHeap = Omit, "peek"> & {readonly peek: T}; diff --git a/package.json b/package.json index 21c89b7..1cfac53 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "@fontsource-variable/inter": "^5.2.8", "@fontsource-variable/spline-sans-mono": "^5.2.8", "@lezer/highlight": "^1.2.2", + "@lezer/javascript": "^1.5.4", "@observablehq/notebook-kit": "^1.4.1", "@observablehq/runtime": "^6.0.0", "@uiw/codemirror-theme-github": "^4.25.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 43e7cbb..ac4f334 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -44,6 +44,9 @@ importers: '@lezer/highlight': specifier: ^1.2.2 version: 1.2.2 + '@lezer/javascript': + specifier: ^1.5.4 + version: 1.5.4 '@observablehq/notebook-kit': specifier: ^1.4.1 version: 1.4.1(@types/markdown-it@14.1.2)(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.1) diff --git a/runtime/index.js b/runtime/index.js index f7f8a6b..f5c41c2 100644 --- a/runtime/index.js +++ b/runtime/index.js @@ -6,7 +6,8 @@ import {dispatch as d3Dispatch} from "d3-dispatch"; import * as stdlib from "./stdlib/index.js"; import {Inspector} from "./stdlib/inspect.js"; import {OUTPUT_MARK, ERROR_MARK} from "./constant.js"; -import {BlockMetadata, blockMetadataEffect} from "../editor/blockMetadata.ts"; +import {BlockMetadata} from "../editor/blocks/BlockMetadata.ts"; +import {blockMetadataEffect} from "../editor/blockMetadata.ts"; import {IntervalTree} from "../lib/IntervalTree.ts"; import {transpileRechoJavaScript} from "./transpile.js"; import {table, getBorderCharacters} from "table"; @@ -148,7 +149,7 @@ export function createRuntime(initialCode) { if (!values.length) { // Create a block even if there are no values. - blocks.push(BlockMetadata(null, sourceRange, node.state.attributes)); + blocks.push(new BlockMetadata(null, sourceRange, node.state.attributes)); continue; } @@ -213,7 +214,7 @@ export function createRuntime(initialCode) { } // Add this block to the block metadata array. - const block = BlockMetadata(outputRange, {from: node.start, to: node.end}, node.state.attributes); + const block = new BlockMetadata(outputRange, {from: node.start, to: node.end}, node.state.attributes); block.error = error; blocks.push(block); diff --git a/test/blocks.spec.ts b/test/blocks.spec.ts new file mode 100644 index 0000000..46c1c51 --- /dev/null +++ b/test/blocks.spec.ts @@ -0,0 +1,294 @@ +import {it, expect, describe} from "vitest"; +import {findAdjacentBlocks} from "../lib/blocks.js"; + +describe("findAdjacentBlocks", () => { + describe("with sorted non-continuous ranges", () => { + it("should handle comprehensive test with all possible positions", () => { + // Generate sorted but non-continuous ranges + // For example: [2, 5), [7, 10), [15, 18), [20, 23) + const blocks = [ + {from: 2, to: 5}, + {from: 7, to: 10}, + {from: 15, to: 18}, + {from: 20, to: 23}, + ]; + + const maxPos = blocks[blocks.length - 1]!.to; + + // Test every position from 0 to maxPos + 1 + for (let pos = 0; pos <= maxPos + 1; pos++) { + const result = findAdjacentBlocks(blocks, pos); + + // Determine expected result + let expectedResult; + + // Check if pos is inside any block + const blockIndex = blocks.findIndex((block) => pos >= block.from && pos < block.to); + + if (blockIndex !== -1) { + // pos is inside a block + expectedResult = blockIndex; + } else { + // pos is not inside any block, find adjacent blocks + let beforeBlock = null; + let afterBlock = null; + + for (let i = 0; i < blocks.length; i++) { + if (blocks[i]!.to <= pos) { + beforeBlock = i; + } + } + for (let i = blocks.length - 1; i >= 0; i--) { + if (blocks[i]!.from > pos) { + afterBlock = i; + } + } + + if (beforeBlock === null) { + if (afterBlock === null) { + expectedResult = null; + } else { + expectedResult = [afterBlock - 1, afterBlock]; + } + } else if (afterBlock === null) { + expectedResult = [beforeBlock, beforeBlock + 1]; + } else { + expectedResult = [beforeBlock, afterBlock]; + } + } + + expect(result).toEqual(expectedResult); + } + }); + + it("should handle position 0 before first block [2, 5)", () => { + const blocks = [{from: 2, to: 5}]; + expect(findAdjacentBlocks(blocks, 0)).toEqual([-1, 0]); + }); + + it("should handle position 1 before first block [2, 5)", () => { + const blocks = [{from: 2, to: 5}]; + expect(findAdjacentBlocks(blocks, 1)).toEqual([-1, 0]); + }); + + it("should handle position 2 at start of block [2, 5)", () => { + const blocks = [{from: 2, to: 5}]; + expect(findAdjacentBlocks(blocks, 2)).toBe(0); + }); + + it("should handle position 3 inside block [2, 5)", () => { + const blocks = [{from: 2, to: 5}]; + expect(findAdjacentBlocks(blocks, 3)).toBe(0); + }); + + it("should handle position 4 at end-1 of block [2, 5)", () => { + const blocks = [{from: 2, to: 5}]; + expect(findAdjacentBlocks(blocks, 4)).toBe(0); + }); + + it("should handle position 5 after block [2, 5)", () => { + const blocks = [{from: 2, to: 5}]; + expect(findAdjacentBlocks(blocks, 5)).toEqual([0, 1]); + }); + + it("should handle position 6 after block [2, 5)", () => { + const blocks = [{from: 2, to: 5}]; + expect(findAdjacentBlocks(blocks, 6)).toEqual([0, 1]); + }); + + it("should handle gap between two blocks", () => { + const blocks = [ + {from: 2, to: 5}, + {from: 7, to: 10}, + ]; + expect(findAdjacentBlocks(blocks, 5)).toEqual([0, 1]); + expect(findAdjacentBlocks(blocks, 6)).toEqual([0, 1]); + }); + + it("should handle position inside second block", () => { + const blocks = [ + {from: 2, to: 5}, + {from: 7, to: 10}, + ]; + expect(findAdjacentBlocks(blocks, 7)).toBe(1); + expect(findAdjacentBlocks(blocks, 8)).toBe(1); + expect(findAdjacentBlocks(blocks, 9)).toBe(1); + }); + + it("should handle position after all blocks", () => { + const blocks = [ + {from: 2, to: 5}, + {from: 7, to: 10}, + ]; + expect(findAdjacentBlocks(blocks, 10)).toEqual([1, 2]); + expect(findAdjacentBlocks(blocks, 100)).toEqual([1, 2]); + }); + + it("should handle multiple blocks with various positions", () => { + const blocks = [ + {from: 5, to: 10}, + {from: 15, to: 20}, + {from: 25, to: 30}, + ]; + + // Before all blocks + expect(findAdjacentBlocks(blocks, 0)).toEqual([-1, 0]); + expect(findAdjacentBlocks(blocks, 4)).toEqual([-1, 0]); + + // Inside first block + expect(findAdjacentBlocks(blocks, 5)).toBe(0); + expect(findAdjacentBlocks(blocks, 7)).toBe(0); + expect(findAdjacentBlocks(blocks, 9)).toBe(0); + + // Between first and second block + expect(findAdjacentBlocks(blocks, 10)).toEqual([0, 1]); + expect(findAdjacentBlocks(blocks, 12)).toEqual([0, 1]); + expect(findAdjacentBlocks(blocks, 14)).toEqual([0, 1]); + + // Inside second block + expect(findAdjacentBlocks(blocks, 15)).toBe(1); + expect(findAdjacentBlocks(blocks, 17)).toBe(1); + expect(findAdjacentBlocks(blocks, 19)).toBe(1); + + // Between second and third block + expect(findAdjacentBlocks(blocks, 20)).toEqual([1, 2]); + expect(findAdjacentBlocks(blocks, 22)).toEqual([1, 2]); + expect(findAdjacentBlocks(blocks, 24)).toEqual([1, 2]); + + // Inside third block + expect(findAdjacentBlocks(blocks, 25)).toBe(2); + expect(findAdjacentBlocks(blocks, 27)).toBe(2); + expect(findAdjacentBlocks(blocks, 29)).toBe(2); + + // After all blocks + expect(findAdjacentBlocks(blocks, 30)).toEqual([2, 3]); + expect(findAdjacentBlocks(blocks, 50)).toEqual([2, 3]); + }); + }); + + describe("edge cases", () => { + it("should handle empty blocks array", () => { + const blocks: [] = []; + expect(findAdjacentBlocks(blocks, 0)).toEqual(null); + expect(findAdjacentBlocks(blocks, 5)).toEqual(null); + expect(findAdjacentBlocks(blocks, 100)).toEqual(null); + }); + + it("should handle single block", () => { + const blocks = [{from: 10, to: 20}]; + + expect(findAdjacentBlocks(blocks, 0)).toEqual([-1, 0]); + expect(findAdjacentBlocks(blocks, 9)).toEqual([-1, 0]); + expect(findAdjacentBlocks(blocks, 10)).toBe(0); + expect(findAdjacentBlocks(blocks, 15)).toBe(0); + expect(findAdjacentBlocks(blocks, 19)).toBe(0); + expect(findAdjacentBlocks(blocks, 20)).toEqual([0, 1]); + expect(findAdjacentBlocks(blocks, 25)).toEqual([0, 1]); + }); + + it("should handle adjacent blocks (no gap)", () => { + const blocks = [ + {from: 0, to: 5}, + {from: 5, to: 10}, + ]; + + expect(findAdjacentBlocks(blocks, 4)).toBe(0); + expect(findAdjacentBlocks(blocks, 5)).toBe(1); + expect(findAdjacentBlocks(blocks, 6)).toBe(1); + }); + + it("should handle blocks starting at 0", () => { + const blocks = [ + {from: 0, to: 3}, + {from: 5, to: 8}, + ]; + + expect(findAdjacentBlocks(blocks, 0)).toBe(0); + expect(findAdjacentBlocks(blocks, 1)).toBe(0); + expect(findAdjacentBlocks(blocks, 2)).toBe(0); + expect(findAdjacentBlocks(blocks, 3)).toEqual([0, 1]); + expect(findAdjacentBlocks(blocks, 4)).toEqual([0, 1]); + expect(findAdjacentBlocks(blocks, 5)).toBe(1); + }); + + it("should handle single-width blocks", () => { + const blocks = [ + {from: 0, to: 1}, + {from: 3, to: 4}, + {from: 6, to: 7}, + ]; + + expect(findAdjacentBlocks(blocks, 0)).toBe(0); + expect(findAdjacentBlocks(blocks, 1)).toEqual([0, 1]); + expect(findAdjacentBlocks(blocks, 2)).toEqual([0, 1]); + expect(findAdjacentBlocks(blocks, 3)).toBe(1); + expect(findAdjacentBlocks(blocks, 4)).toEqual([1, 2]); + expect(findAdjacentBlocks(blocks, 5)).toEqual([1, 2]); + expect(findAdjacentBlocks(blocks, 6)).toBe(2); + expect(findAdjacentBlocks(blocks, 7)).toEqual([2, 3]); + }); + + it("should handle large gaps between blocks", () => { + const blocks = [ + {from: 0, to: 5}, + {from: 100, to: 105}, + {from: 1000, to: 1005}, + ]; + + expect(findAdjacentBlocks(blocks, 50)).toEqual([0, 1]); + expect(findAdjacentBlocks(blocks, 99)).toEqual([0, 1]); + expect(findAdjacentBlocks(blocks, 100)).toBe(1); + expect(findAdjacentBlocks(blocks, 500)).toEqual([1, 2]); + expect(findAdjacentBlocks(blocks, 999)).toEqual([1, 2]); + expect(findAdjacentBlocks(blocks, 1000)).toBe(2); + expect(findAdjacentBlocks(blocks, 2000)).toEqual([2, 3]); + }); + }); + + function generateBlocks(blockCount: number) { + const blocks = []; + let currentPos = Math.floor(Math.random() * 5); + + for (let i = 0; i < blockCount; i++) { + const width = Math.floor(Math.random() * 5) + 1; + const gap = Math.floor(Math.random() * 5) + 1; + blocks.push({from: currentPos, to: currentPos + width}); + currentPos += width + gap; + } + + const maxPos = blocks[blocks.length - 1]!.to; + + return {blocks, maxPos}; + } + + describe("randomized comprehensive tests", () => { + it("should handle random sorted non-continuous ranges", () => { + for (let z = 0; z < 10; z++) { + const {blocks, maxPos} = generateBlocks(2 ** z); + + // Test every position from 0 to maxPos + 1 + for (let pos = 0; pos <= maxPos + 1; pos++) { + const result = findAdjacentBlocks(blocks, pos); + + // Verify the result is correct + const blockIndex = blocks.findIndex((block) => pos >= block.from && pos < block.to); + + if (blockIndex !== -1) { + expect(result).toBe(blockIndex); + } else { + expect(Array.isArray(result)).toBe(true); + const [before, after] = result as [number, number]; + + if (0 <= before && before < blocks.length) { + expect(blocks[before]!.to).toBeLessThanOrEqual(pos); + } + if (0 <= after && after < blocks.length) { + expect(blocks[after]!.from).toBeGreaterThan(pos); + } + expect(before + 1).toBe(after); + } + } + } + }); + }); +}); diff --git a/test/blocks/affected.spec.ts b/test/blocks/affected.spec.ts new file mode 100644 index 0000000..cc6d353 --- /dev/null +++ b/test/blocks/affected.spec.ts @@ -0,0 +1,403 @@ +import {it, expect, describe} from "vitest"; +import {findAffectedBlockRange} from "../../lib/blocks.js"; + +describe("findAffectedBlockRange", () => { + function generateBlocks(blockCount: number) { + const blocks = []; + let currentPos = Math.floor(Math.random() * 5); + + for (let i = 0; i < blockCount; i++) { + const width = Math.floor(Math.random() * 5) + 1; + const gap = Math.floor(Math.random() * 5) + 1; + blocks.push({from: currentPos, to: currentPos + width}); + currentPos += width + gap; + } + + const maxPos = blocks.length > 0 ? blocks[blocks.length - 1]!.to : 0; + + return {blocks, maxPos}; + } + + describe("error cases", () => { + it("should throw when from > to", () => { + const blocks = [{from: 5, to: 10}]; + expect(() => findAffectedBlockRange(blocks, 10, 5)).toThrow("`from` must be less than or equal to `to`"); + }); + + it("should throw when from < 0", () => { + const blocks = [{from: 5, to: 10}]; + expect(() => findAffectedBlockRange(blocks, -1, 5)).toThrow("`from` must be greater than or equal to 0"); + }); + }); + + describe("insertion cases (from === to)", () => { + it("should return [index, index+1) when insertion point is inside a block", () => { + const blocks = [ + {from: 5, to: 10}, + {from: 15, to: 20}, + ]; + + // Insert at position 7 (inside first block) + expect(findAffectedBlockRange(blocks, 7, 7)).toEqual([0, 1]); + + // Insert at position 17 (inside second block) + expect(findAffectedBlockRange(blocks, 17, 17)).toEqual([1, 2]); + }); + + it("should return a range contains two blocks when insertion point is between two blocks", () => { + const blocks = [ + {from: 5, to: 10}, + {from: 15, to: 20}, + ]; + + // Insert at position 12 (between blocks) + expect(findAffectedBlockRange(blocks, 12, 12)).toStrictEqual([0, 2]); + + // Insert at position 10 (right after first block) + expect(findAffectedBlockRange(blocks, 10, 10)).toStrictEqual([0, 2]); + + // Insert at position 10 (right before first block) + expect(findAffectedBlockRange(blocks, 14, 14)).toStrictEqual([0, 2]); + }); + + it("should return [null, 1] when insertion point is before all blocks", () => { + const blocks = [{from: 5, to: 10}]; + expect(findAffectedBlockRange(blocks, 0, 0)).toStrictEqual([null, 1]); + expect(findAffectedBlockRange(blocks, 3, 3)).toStrictEqual([null, 1]); + }); + + it("should return [N - 1, null] when insertion point is after all blocks", () => { + const blocks = [ + {from: 5, to: 10}, + {from: 12, to: 15}, + ]; + const N = blocks.length; + expect(findAffectedBlockRange(blocks, 15, 15)).toStrictEqual([1, null]); + expect(findAffectedBlockRange(blocks, 16, 16)).toStrictEqual([1, null]); + }); + + it("should return [null, null] for empty blocks array", () => { + const blocks: {from: number; to: number}[] = []; + expect(findAffectedBlockRange(blocks, 5, 5)).toStrictEqual([null, null]); + }); + + it("should return two adjacent blocks when insertion point is between them", () => { + const blocks = [ + {from: 2, to: 4}, + {from: 6, to: 11}, + {from: 16, to: 19}, + {from: 24, to: 25}, + {from: 27, to: 30}, + ]; + expect(findAffectedBlockRange(blocks, 4, 4)).toStrictEqual([0, 2]); + }); + }); + + describe("deletion cases (from < to)", () => { + it("should handle range inside a single block", () => { + const blocks = [ + {from: 5, to: 10}, + {from: 15, to: 20}, + {from: 25, to: 30}, + ]; + + // Delete [6, 8) inside first block. We should only re-parse the block. + expect(findAffectedBlockRange(blocks, 6, 8)).toEqual([0, 1]); + + // Delete [16, 19) inside second block. We should only re-parse the block. + expect(findAffectedBlockRange(blocks, 16, 19)).toEqual([1, 2]); + }); + + it("should handle range spanning multiple blocks", () => { + const blocks = [ + {from: 5, to: 10}, + {from: 15, to: 20}, + {from: 25, to: 30}, + ]; + + // Delete [6, 18) spanning first two blocks + expect(findAffectedBlockRange(blocks, 6, 18)).toEqual([0, 2]); + + // Delete [16, 28) spanning second and third blocks + expect(findAffectedBlockRange(blocks, 16, 28)).toEqual([1, 3]); + + // Delete [6, 28) spanning all three blocks + expect(findAffectedBlockRange(blocks, 6, 28)).toEqual([0, 3]); + }); + + it("should handle range from gap to inside block", () => { + const blocks = [ + {from: 5, to: 10}, + {from: 15, to: 20}, + ]; + + // Delete [12, 18) from gap into second block. The first block also needs + // to be re-parsed. + expect(findAffectedBlockRange(blocks, 12, 18)).toEqual([0, 2]); + }); + + it("should handle range from inside block to gap", () => { + const blocks = [ + {from: 5, to: 10}, + {from: 15, to: 20}, + ]; + + // Delete [7, 12) from first block into gap. The second block also needs + // to be re-parsed because it might be affected by deletion. For example, + // deleting the `//` part of a comment. + expect(findAffectedBlockRange(blocks, 7, 12)).toEqual([0, 2]); + }); + + it("should handle range spanning gap between blocks", () => { + const blocks = [ + {from: 5, to: 10}, + {from: 15, to: 20}, + ]; + + // Delete [10, 15) exactly the gap. The deletion of the gap might affect + // its surrounding blocks. + expect(findAffectedBlockRange(blocks, 10, 15)).toEqual([0, 2]); + }); + + it("should return an empty range when range is entirely in a gap", () => { + const blocks = [ + {from: 5, to: 10}, + {from: 20, to: 25}, + ]; + + // Delete [12, 18) entirely in gap of 0 and 1. The deletion of the gap + // might affect its surrounding blocks. + expect(findAffectedBlockRange(blocks, 12, 18)).toStrictEqual([0, 2]); + }); + + it("should return null when range is before all blocks", () => { + const blocks = [{from: 10, to: 15}]; + + // The returned range means "from the beginning of the document to the + // `to` of the first block". + expect(findAffectedBlockRange(blocks, 0, 5)).toStrictEqual([null, 1]); + }); + + it("should return null when range is after all blocks", () => { + const blocks = [{from: 5, to: 10}]; + + // Similar to the previous test, but now the range is after all blocks. + // The returned range means "from the beginning of the last block to the + // end of the document". + expect(findAffectedBlockRange(blocks, 15, 20)).toStrictEqual([0, null]); + }); + + it("should handle range starting at block boundary", () => { + const blocks = [ + {from: 5, to: 10}, + {from: 15, to: 20}, + ]; + + // Delete [5, 8) starting at block start. Only the first block is affected. + expect(findAffectedBlockRange(blocks, 5, 8)).toEqual([0, 1]); + + // Delete [10, 18) starting at block end. The deletion happens within a + // gap. Thus, the second block is also affected. + expect(findAffectedBlockRange(blocks, 10, 18)).toEqual([0, 2]); + }); + + it("should handle range ending at block boundary", () => { + const blocks = [ + {from: 5, to: 10}, + {from: 15, to: 20}, + ]; + + // Delete [7, 10) ending at block end + expect(findAffectedBlockRange(blocks, 7, 10)).toStrictEqual([0, 1]); + + // Delete [12, 15) ending at block start + expect(findAffectedBlockRange(blocks, 12, 15)).toStrictEqual([0, 2]); + }); + }); + + function overlaps(m: {from: number; to: number}, n: {from: number; to: number}): boolean { + return m.from <= n.to && n.from < m.to; + } + + type Location = + | {type: "contained"; index: number} + | { + type: "between"; + /** + * Note that `previous` ranges from 0 to `blocks.length - 2`. Thus, + * using `previous + 2` is safe. + */ + previous: number; + } + | {type: "afterAll"} + | {type: "beforeAll"}; + + function locateNaive(blocks: {from: number; to: number}[], pos: number): Location { + let location: Location | null = null; + for (let i = 0; i < blocks.length; i++) { + const block = blocks[i]!; + if (block.from <= pos && pos < block.to) { + location = {type: "contained", index: i}; + } + } + if (location === null) { + if (pos < blocks[0]!.from) { + location = {type: "beforeAll"}; + } else { + for (let i = 1; i < blocks.length; i++) { + const previous = blocks[i - 1]!; + const next = blocks[i]!; + if (previous.to <= pos && pos < next.from) { + location = {type: "between", previous: i - 1}; + } + } + if (location === null) { + location = {type: "afterAll"}; + } + } + } + return location; + } + + describe("comprehensive random tests", () => { + it("should verify invariants for all valid ranges", () => { + for (let trial = 0; trial < 10; trial++) { + const {blocks, maxPos} = generateBlocks(2 * trial); + + if (blocks.length === 0) continue; + + // Test all valid ranges [from, to) where from <= to + for (let from = 0; from <= maxPos + 1; from++) { + for (let to = from; to <= maxPos + 1; to++) { + let fromLocation: Location = locateNaive(blocks, from); + let expected: [number | null, number | null]; + if (from === to) { + switch (fromLocation.type) { + case "contained": + // Include the block it is contained in. + expected = [fromLocation.index, fromLocation.index + 1]; + break; + case "between": + // Include the adjacent blocks. + expected = [fromLocation.previous, fromLocation.previous + 2]; + break; + case "beforeAll": + // Extend to the beginning of the document (represented by + // `null`) and include the first element. + expected = [null, 1]; + break; + case "afterAll": + // Extend to the end of the document (represented by `null`) + // and include the last element. + expected = [blocks.length - 1, null]; + break; + } + } else { + let toLocation: Location = locateNaive(blocks, to - 1); + let fromIndex: number | null; + switch (fromLocation.type) { + case "contained": + // Just include the block it is contained in. + fromIndex = fromLocation.index; + break; + case "between": + // To include the previous block. + fromIndex = fromLocation.previous; + break; + case "afterAll": + // To include the last element. + fromIndex = blocks.length - 1; + break; + case "beforeAll": + // Extend to the beginning of the document (represented by `null`). + fromIndex = null; + break; + } + let toIndex: number | null; + switch (toLocation.type) { + case "contained": + // To include the block it is contained in. `+1` because the + // `to` is exclusive. + toIndex = toLocation.index + 1; + break; + case "between": + // To include the block it is contained in. `+2` because the + // `to` is exclusive and it is the previous block's index. + toIndex = toLocation.previous + 2; + break; + case "afterAll": + // Extend to the end of the document (represented by `null`). + toIndex = null; + break; + case "beforeAll": + // Include the first block. `1` because the `to` is exclusive. + toIndex = 1; + break; + } + expected = [fromIndex, toIndex]; + } + + const result = findAffectedBlockRange(blocks, from, to); + + expect( + result, + `Expected affected block range to be [${expected[0]}, ${expected[1]}): (blocks = ${JSON.stringify(blocks)}, from = ${from}, to = ${to})`, + ).toStrictEqual(expected); + } + } + } + }); + + it("should handle edge cases with adjacent blocks", () => { + const blocks = [ + {from: 0, to: 5}, + {from: 5, to: 10}, + {from: 10, to: 15}, + ]; + + // Range exactly covering one block + expect(findAffectedBlockRange(blocks, 0, 5)).toEqual([0, 1]); + expect(findAffectedBlockRange(blocks, 5, 10)).toEqual([1, 2]); + + // Range covering multiple adjacent blocks + expect(findAffectedBlockRange(blocks, 0, 10)).toEqual([0, 2]); + expect(findAffectedBlockRange(blocks, 5, 15)).toEqual([1, 3]); + expect(findAffectedBlockRange(blocks, 0, 15)).toEqual([0, 3]); + + // Single point at boundary + expect(findAffectedBlockRange(blocks, 5, 5)).toEqual([1, 2]); + expect(findAffectedBlockRange(blocks, 10, 10)).toEqual([2, 3]); + }); + + it("should handle single block edge cases", () => { + const blocks = [{from: 10, to: 20}]; + + // Range inside block + expect(findAffectedBlockRange(blocks, 12, 15)).toEqual([0, 1]); + + // Range covering entire block + expect(findAffectedBlockRange(blocks, 10, 20)).toEqual([0, 1]); + + // Range overlapping start + expect(findAffectedBlockRange(blocks, 5, 15)).toEqual([null, 1]); + + // Range overlapping end + expect(findAffectedBlockRange(blocks, 15, 25)).toEqual([0, null]); + + // Range covering block and beyond + expect(findAffectedBlockRange(blocks, 5, 25)).toEqual([null, null]); + + // Range before block + expect(findAffectedBlockRange(blocks, 0, 5)).toStrictEqual([null, 1]); + + // Range after block + expect(findAffectedBlockRange(blocks, 25, 30)).toStrictEqual([0, null]); + + // Range touching start boundary + expect(findAffectedBlockRange(blocks, 5, 10)).toStrictEqual([null, 1]); + + // Range touching end boundary + expect(findAffectedBlockRange(blocks, 20, 25)).toStrictEqual([0, null]); + }); + }); +}); diff --git a/test/blocks/detect.spec.ts b/test/blocks/detect.spec.ts new file mode 100644 index 0000000..8051c66 --- /dev/null +++ b/test/blocks/detect.spec.ts @@ -0,0 +1,38 @@ +import {parser} from "@lezer/javascript"; +import {detectBlocksWithinRange} from "../../lib/blocks/detect.js"; +import {it, expect, describe} from "vitest"; +import {Text} from "@codemirror/state"; + +describe("block detection simple test", () => { + it("test parse", () => { + const code = "const x = 0;"; + const tree = parser.parse(code); + expect(tree).toBeDefined(); + }); + + function viewEachLineAsBlock(lines: string[]) { + const blocks = []; + for (let i = 0, from = 0; i < lines.length; i++) { + const line = lines[i]!; + blocks.push({from, to: from + line.length}); + from += line.length + 1; + } + return blocks; + } + + it("should detect two blocks in a full parse", () => { + const lines = [`const code = "const x = 0;";`, `const y = 1;`]; + const doc = Text.of(lines); + const tree = parser.parse(doc.toString()); + const blocks = detectBlocksWithinRange(tree, doc, 0, doc.length); + expect(blocks).toMatchObject(viewEachLineAsBlock(lines)); + }); + + it("should detect the first block in a partial parse", () => { + const lines = [`const code = "const x = 0;";`, `const y = 1;`]; + const doc = Text.of(lines); + const tree = parser.parse(doc.toString()); + const blocks = detectBlocksWithinRange(tree, doc, 0, 5); + expect(blocks).toMatchObject(viewEachLineAsBlock(lines).slice(0, 1)); + }); +}); diff --git a/test/containers/heap.spec.ts b/test/containers/heap.spec.ts new file mode 100644 index 0000000..404223d --- /dev/null +++ b/test/containers/heap.spec.ts @@ -0,0 +1,286 @@ +import {it, expect, describe} from "vitest"; +import {MaxHeap} from "../../lib/containers/heap.js"; + +describe("MaxHeap", () => { + describe("basic operations", () => { + it("should insert and extract values in max order", () => { + const heap = new MaxHeap((x) => x); + + heap.insert(5); + heap.insert(3); + heap.insert(8); + heap.insert(1); + heap.insert(10); + + expect(heap.size).toBe(5); + expect(heap.extractMax()).toBe(10); + expect(heap.extractMax()).toBe(8); + expect(heap.extractMax()).toBe(5); + expect(heap.extractMax()).toBe(3); + expect(heap.extractMax()).toBe(1); + expect(heap.isEmpty).toBe(true); + }); + + it("should peek without removing", () => { + const heap = new MaxHeap((x) => x); + + heap.insert(5); + heap.insert(10); + heap.insert(3); + + expect(heap.peek).toBe(10); + expect(heap.peekWeight()).toBe(10); + expect(heap.size).toBe(3); + + expect(heap.extractMax()).toBe(10); + expect(heap.peek).toBe(5); + expect(heap.size).toBe(2); + }); + + it("should handle empty heap", () => { + const heap = new MaxHeap((x) => x); + + expect(heap.isEmpty).toBe(true); + expect(heap.size).toBe(0); + expect(heap.peek).toBeUndefined(); + expect(heap.peekWeight()).toBeUndefined(); + expect(heap.extractMax()).toBeUndefined(); + }); + + it("should check if value exists", () => { + const heap = new MaxHeap((x) => x); + + heap.insert(5); + heap.insert(10); + + expect(heap.has(5)).toBe(true); + expect(heap.has(10)).toBe(true); + expect(heap.has(3)).toBe(false); + + heap.extractMax(); + expect(heap.has(10)).toBe(false); + expect(heap.has(5)).toBe(true); + }); + + it("should clear the heap", () => { + const heap = new MaxHeap((x) => x); + + heap.insert(5); + heap.insert(10); + heap.insert(3); + + expect(heap.size).toBe(3); + + heap.clear(); + + expect(heap.isEmpty).toBe(true); + expect(heap.size).toBe(0); + expect(heap.has(5)).toBe(false); + }); + }); + + describe("update existing values", () => { + it("should update value with increased weight and percolate up", () => { + const weights = new Map([ + ["a", 5], + ["b", 10], + ["c", 3], + ]); + + const heap = new MaxHeap((x) => weights.get(x)!); + + heap.insert("a"); + heap.insert("b"); + heap.insert("c"); + + expect(heap.peek).toBe("b"); + + // Update "a" to have weight 15 + weights.set("a", 15); + heap.insert("a"); + + expect(heap.peek).toBe("a"); + expect(heap.peekWeight()).toBe(15); + }); + + it("should update value with decreased weight and percolate down", () => { + const weights = new Map([ + ["a", 5], + ["b", 10], + ["c", 3], + ]); + + const heap = new MaxHeap((x) => weights.get(x)!); + + heap.insert("a"); + heap.insert("b"); + heap.insert("c"); + + expect(heap.peek).toBe("b"); + + // Update "b" to have weight 1 + weights.set("b", 1); + heap.insert("b"); + + expect(heap.peek).toBe("a"); + expect(heap.peekWeight()).toBe(5); + + heap.extractMax(); + expect(heap.peek).toBe("c"); + expect(heap.peekWeight()).toBe(3); + }); + + it("should not change heap when weight stays the same", () => { + const weights = new Map([ + ["a", 5], + ["b", 10], + ]); + + const heap = new MaxHeap((x) => weights.get(x)!); + + heap.insert("a"); + heap.insert("b"); + + expect(heap.size).toBe(2); + expect(heap.peek).toBe("b"); + + // Re-insert "b" with same weight + heap.insert("b"); + + expect(heap.size).toBe(2); + expect(heap.peek).toBe("b"); + }); + + it("should handle multiple updates on same value", () => { + const weights = new Map([["a", 5]]); + + const heap = new MaxHeap((x) => weights.get(x)!); + + heap.insert("a"); + expect(heap.peekWeight()).toBe(5); + + weights.set("a", 10); + heap.insert("a"); + expect(heap.peekWeight()).toBe(10); + + weights.set("a", 3); + heap.insert("a"); + expect(heap.peekWeight()).toBe(3); + + weights.set("a", 7); + heap.insert("a"); + expect(heap.peekWeight()).toBe(7); + + expect(heap.size).toBe(1); + }); + }); + + describe("custom comparator", () => { + it("should use custom comparator for min heap behavior", () => { + // Reverse comparator for min heap + const heap = new MaxHeap( + (x) => x, + (a, b) => b - a, + ); + + heap.insert(5); + heap.insert(3); + heap.insert(8); + heap.insert(1); + + expect(heap.extractMax()).toBe(1); + expect(heap.extractMax()).toBe(3); + expect(heap.extractMax()).toBe(5); + expect(heap.extractMax()).toBe(8); + }); + + it("should work with objects and custom key function", () => { + interface Task { + name: string; + priority: number; + } + + const heap = new MaxHeap((task) => task.priority); + + heap.insert({name: "Low", priority: 1}); + heap.insert({name: "High", priority: 10}); + heap.insert({name: "Medium", priority: 5}); + + expect(heap.extractMax()?.name).toBe("High"); + expect(heap.extractMax()?.name).toBe("Medium"); + expect(heap.extractMax()?.name).toBe("Low"); + }); + }); + + describe("edge cases", () => { + it("should handle single element", () => { + const heap = new MaxHeap((x) => x); + + heap.insert(42); + expect(heap.size).toBe(1); + expect(heap.peek).toBe(42); + expect(heap.extractMax()).toBe(42); + expect(heap.isEmpty).toBe(true); + }); + + it("should handle duplicate weights", () => { + const heap = new MaxHeap((x) => Math.floor(x / 10)); + + heap.insert(15); + heap.insert(12); + heap.insert(18); + + // All have weight 1 + expect(heap.size).toBe(3); + expect(heap.extractMax()).toBe(15); // First inserted with weight 1 + }); + + it("should handle large number of elements", () => { + const heap = new MaxHeap((x) => x); + const values = Array.from({length: 100}, (_, i) => i); + + // Insert in random order + const shuffled = [...values].sort(() => Math.random() - 0.5); + shuffled.forEach((v) => heap.insert(v)); + + expect(heap.size).toBe(100); + + // Extract all and verify descending order + const extracted = []; + while (!heap.isEmpty) { + extracted.push(heap.extractMax()!); + } + + expect(extracted).toEqual(values.reverse()); + }); + + it("should maintain heap property after multiple operations", () => { + const weights = new Map(); + const heap = new MaxHeap((x) => weights.get(x)!); + + // Insert values + weights.set("a", 5); + weights.set("b", 10); + weights.set("c", 3); + weights.set("d", 7); + + heap.insert("a"); + heap.insert("b"); + heap.insert("c"); + heap.insert("d"); + + // Update some values + weights.set("c", 15); + heap.insert("c"); + + weights.set("b", 2); + heap.insert("b"); + + // Extract and verify order + expect(heap.extractMax()).toBe("c"); // 15 + expect(heap.extractMax()).toBe("d"); // 7 + expect(heap.extractMax()).toBe("a"); // 5 + expect(heap.extractMax()).toBe("b"); // 2 + }); + }); +}); diff --git a/tsconfig.json b/tsconfig.json index 70c1ea2..c0fa300 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,11 +10,9 @@ "target": "esnext", "types": [], "moduleResolution": "nodenext", + "allowImportingTsExtensions": true, // For nodejs: - "lib": [ - "esnext", - "DOM" - ], + "lib": ["esnext", "DOM"], // "types": ["node"], // and npm install -D @types/node // Other Outputs @@ -50,13 +48,6 @@ } ] }, - "include": [ - "next-env.d.ts", - ".next/types/**/*.ts", - "**/*.ts", - "**/*.tsx" - ], - "exclude": [ - "node_modules" - ] + "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] } From 477713f5d2d8dace7161bc19b4b25278401fbbfe Mon Sep 17 00:00:00 2001 From: Luyu Cheng <2239547+chengluyu@users.noreply.github.com> Date: Sun, 14 Dec 2025 04:19:04 +0800 Subject: [PATCH 14/18] Improve the UI of Recho Playground --- editor/blocks/BlockMetadata.ts | 3 +- lib/blocks/detect.ts | 6 +- package.json | 2 + pnpm-lock.yaml | 26 +++ runtime/index.js | 6 +- test/components/App.tsx | 62 ++--- test/components/BlockItem.tsx | 87 +++++++ test/components/BlockViewer.tsx | 101 +------- test/components/Editor.tsx | 11 +- test/components/ResizableSplit.tsx | 70 ------ test/components/SelectionGroupItem.tsx | 61 +++++ test/components/TransactionItem.tsx | 166 +++++++++++++ test/components/TransactionViewer.tsx | 309 +++---------------------- test/components/UserEvent.tsx | 99 ++++++++ test/components/types.ts | 56 +++++ tsconfig.json | 3 +- 16 files changed, 589 insertions(+), 479 deletions(-) create mode 100644 test/components/BlockItem.tsx delete mode 100644 test/components/ResizableSplit.tsx create mode 100644 test/components/SelectionGroupItem.tsx create mode 100644 test/components/TransactionItem.tsx create mode 100644 test/components/UserEvent.tsx create mode 100644 test/components/types.ts diff --git a/editor/blocks/BlockMetadata.ts b/editor/blocks/BlockMetadata.ts index 1f7b12a..f6fafec 100644 --- a/editor/blocks/BlockMetadata.ts +++ b/editor/blocks/BlockMetadata.ts @@ -4,6 +4,7 @@ export type Range = {from: number; to: number}; export class BlockMetadata { public constructor( + public readonly name: string, public readonly output: Range | null, public readonly source: Range, public attributes: Record = {}, @@ -32,6 +33,6 @@ export class BlockMetadata { }; const attributes = this.attributes; const error = this.error; - return new BlockMetadata(output, source, attributes, error); + return new BlockMetadata(this.name, output, source, attributes, error); } } diff --git a/lib/blocks/detect.ts b/lib/blocks/detect.ts index 44b06df..b226fd9 100644 --- a/lib/blocks/detect.ts +++ b/lib/blocks/detect.ts @@ -36,7 +36,7 @@ export function detectBlocksWithinRange(tree: Tree, doc: Text, from: number, to: const blocks: BlockMetadata[] = []; // Collect all top-level statements and their preceding output/error comment lines - const statementRanges: Range[] = []; + const statementRanges: (Range & {name: string})[] = []; const outputRanges = new Map(); // Map statement position to output range tree.iterate({ @@ -53,7 +53,7 @@ export function detectBlocksWithinRange(tree: Tree, doc: Text, from: number, to: node.name === "ImportDeclaration" || node.name === "Block" ) { - statementRanges.push({from: node.from, to: node.to}); + statementRanges.push({from: node.from, to: node.to, name: node.name}); const outputRange = extendOutputForward(doc, node.node); if (outputRange !== null) { @@ -123,7 +123,7 @@ export function detectBlocksWithinRange(tree: Tree, doc: Text, from: number, to: // Build block metadata from statements for (const range of statementRanges) { - blocks.push(new BlockMetadata(outputRanges.get(range.from) ?? null, range)); + blocks.push(new BlockMetadata(range.name, outputRanges.get(range.from) ?? null, range)); } return blocks; diff --git a/package.json b/package.json index 1cfac53..c9d1e18 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,8 @@ "lucide-react": "^0.542.0", "postcss": "^8.5.6", "prettier": "^3.6.2", + "react-inspector": "^9.0.0", + "react-resizable-panels": "^3.0.6", "react-tooltip": "^5.30.0", "tailwind-merge": "^3.3.1", "tailwindcss": "^4.1.14", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ac4f334..0435a48 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -156,6 +156,12 @@ importers: prettier: specifier: ^3.6.2 version: 3.6.2 + react-inspector: + specifier: ^9.0.0 + version: 9.0.0(react@19.2.0) + react-resizable-panels: + specifier: ^3.0.6 + version: 3.0.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0) react-tooltip: specifier: ^5.30.0 version: 5.30.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0) @@ -2880,6 +2886,11 @@ packages: peerDependencies: react: ^19.2.0 + react-inspector@9.0.0: + resolution: {integrity: sha512-w/VJucSeHxlwRa2nfM2k7YhpT1r5EtlDOClSR+L7DyQP91QMdfFEDXDs9bPYN4kzP7umFtom7L0b2GGjph4Kow==} + peerDependencies: + react: ^18.0.0 || ^19.0.0 + react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -2887,6 +2898,12 @@ packages: resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==} engines: {node: '>=0.10.0'} + react-resizable-panels@3.0.6: + resolution: {integrity: sha512-b3qKHQ3MLqOgSS+FRYKapNkJZf5EQzuf6+RLiq1/IlTHw99YrZ2NJZLk4hQIzTnnIkRg2LUqyVinu6YWWpUYew==} + peerDependencies: + react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc + react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc + react-tooltip@5.30.0: resolution: {integrity: sha512-Yn8PfbgQ/wmqnL7oBpz1QiDaLKrzZMdSUUdk7nVeGTwzbxCAJiJzR4VSYW+eIO42F1INt57sPUmpgKv0KwJKtg==} peerDependencies: @@ -6487,10 +6504,19 @@ snapshots: react: 19.2.0 scheduler: 0.27.0 + react-inspector@9.0.0(react@19.2.0): + dependencies: + react: 19.2.0 + react-is@16.13.1: {} react-refresh@0.17.0: {} + react-resizable-panels@3.0.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0): + dependencies: + react: 19.2.0 + react-dom: 19.2.0(react@19.2.0) + react-tooltip@5.30.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0): dependencies: '@floating-ui/dom': 1.7.4 diff --git a/runtime/index.js b/runtime/index.js index f5c41c2..f0d26d2 100644 --- a/runtime/index.js +++ b/runtime/index.js @@ -149,7 +149,7 @@ export function createRuntime(initialCode) { if (!values.length) { // Create a block even if there are no values. - blocks.push(new BlockMetadata(null, sourceRange, node.state.attributes)); + blocks.push(new BlockMetadata(node.type, sourceRange, node.state.attributes)); continue; } @@ -214,7 +214,7 @@ export function createRuntime(initialCode) { } // Add this block to the block metadata array. - const block = new BlockMetadata(outputRange, {from: node.start, to: node.end}, node.state.attributes); + const block = new BlockMetadata(node.type, outputRange, {from: node.start, to: node.end}, node.state.attributes); block.error = error; blocks.push(block); @@ -363,7 +363,7 @@ export function createRuntime(initialCode) { const nodes = split(code); if (!nodes) return; - console.group("rerun"); + console.groupCollapsed("rerun"); for (const node of nodes) { console.log(`Node ${node.type} (${node.start}-${node.end})`); } diff --git a/test/components/App.tsx b/test/components/App.tsx index 9d9c2e6..47aac9a 100644 --- a/test/components/App.tsx +++ b/test/components/App.tsx @@ -1,13 +1,13 @@ -import {useEffect, useState} from "react"; +import type {ViewPlugin} from "@codemirror/view"; import {useAtom} from "jotai"; -import {selectedTestAtom} from "../store"; -import {TestSelector} from "./TestSelector"; -import {Editor} from "./Editor"; -import {TransactionViewer} from "./TransactionViewer"; -import {BlockViewer} from "./BlockViewer"; -import {ResizableSplit} from "./ResizableSplit"; +import {useEffect, useState} from "react"; +import {Panel, PanelGroup, PanelResizeHandle} from "react-resizable-panels"; import * as testSamples from "../js/index.js"; -import type {ViewPlugin} from "@codemirror/view"; +import {selectedTestAtom} from "../store.ts"; +import {BlockViewer} from "./BlockViewer.tsx"; +import {Editor} from "./Editor.tsx"; +import {TestSelector} from "./TestSelector.tsx"; +import {TransactionViewer} from "./TransactionViewer.tsx"; export function App() { const [selectedTest, setSelectedTest] = useAtom(selectedTestAtom); @@ -36,27 +36,31 @@ export function App() {
- {/* Main content */} -
- {/* Editor panel */} -
- -
- - {/* Sidebar with blocks and transactions */} - -
+ + +
+ +
+ + + + + + + + + + + + + +
); } diff --git a/test/components/BlockItem.tsx b/test/components/BlockItem.tsx new file mode 100644 index 0000000..d5b6c85 --- /dev/null +++ b/test/components/BlockItem.tsx @@ -0,0 +1,87 @@ +import {CircleXIcon, Locate, SquareTerminalIcon, TerminalIcon} from "lucide-react"; +import {useState} from "react"; +import type {BlockData} from "./types.ts"; + +export function BlockItem({block, onLocate}: {block: BlockData; onLocate: (block: BlockData) => void}) { + const [isOpen, setIsOpen] = useState(false); + + const hasOutput = block.outputFrom !== null && block.outputTo !== null; + const hasAttributes = Object.keys(block.attributes).length > 0; + + return ( +
setIsOpen((e.target as HTMLDetailsElement).open)} + className={`mb-2 border rounded text-xs ${ + block.hasError + ? "border-red-300 bg-red-50" + : hasOutput + ? "border-green-300 bg-green-50" + : "border-gray-200 bg-white" + }`} + > + +
+ {block.index + 1} + {block.hasError && } + {hasOutput && !block.hasError && } +
+ {block.name} +
+ + [ + {block.sourceFrom}, + {block.sourceTo} + ) + + +
+ +
+
+ Source Range: {block.sourceFrom}-{block.sourceTo} + ({block.sourceTo - block.sourceFrom} chars) +
+ + {hasOutput ? ( +
+ Output Range: {block.outputFrom}-{block.outputTo} + ({block.outputTo! - block.outputFrom!} chars) +
+ ) : ( +
+ Output Range: none +
+ )} + +
+ Total Range: {hasOutput ? block.outputFrom : block.sourceFrom}-{block.sourceTo} + + ({block.sourceTo - (hasOutput ? block.outputFrom! : block.sourceFrom)} chars) + +
+ + {block.hasError &&
✗ Has Error
} + + {hasAttributes && ( +
+ Attributes: +
+ {JSON.stringify(block.attributes, null, 2)} +
+
+ )} +
+
+ ); +} diff --git a/test/components/BlockViewer.tsx b/test/components/BlockViewer.tsx index e10fb52..718925e 100644 --- a/test/components/BlockViewer.tsx +++ b/test/components/BlockViewer.tsx @@ -1,18 +1,9 @@ -import {useState, useEffect, useRef} from "react"; -import {ViewPlugin, EditorView} from "@codemirror/view"; import {EditorSelection} from "@codemirror/state"; +import {EditorView, ViewPlugin} from "@codemirror/view"; +import {useEffect, useRef, useState} from "react"; import {blockMetadataField} from "../../editor/blockMetadata.ts"; -import {Locate} from "lucide-react"; - -interface BlockData { - index: number; - sourceFrom: number; - sourceTo: number; - outputFrom: number | null; - outputTo: number | null; - hasError: boolean; - attributes: Record; -} +import type {BlockData} from "./types.ts"; +import {BlockItem} from "./BlockItem.tsx"; interface BlockViewerProps { onPluginCreate: (plugin: ViewPlugin) => void; @@ -37,6 +28,7 @@ export function BlockViewer({onPluginCreate}: BlockViewerProps) { if (!blockMetadata) return []; return blockMetadata.map((block: any, index: number) => ({ + name: block.name, index, sourceFrom: block.source.from, sourceTo: block.source.to, @@ -129,86 +121,3 @@ export function BlockViewer({onPluginCreate}: BlockViewerProps) {
); } - -function BlockItem({block, onLocate}: {block: BlockData; onLocate: (block: BlockData) => void}) { - const [isOpen, setIsOpen] = useState(false); - - const hasOutput = block.outputFrom !== null && block.outputTo !== null; - const hasAttributes = Object.keys(block.attributes).length > 0; - - return ( -
setIsOpen((e.target as HTMLDetailsElement).open)} - className={`mb-2 border rounded text-xs ${ - block.hasError - ? "border-red-300 bg-red-50" - : hasOutput - ? "border-green-300 bg-green-50" - : "border-gray-200 bg-white" - }`} - > - - - Block {block.index + 1} - {block.hasError && " ✗"} - {hasOutput && !block.hasError && " ➜"} - -
- - - [ - {block.sourceFrom}, - {block.sourceTo} - ) - -
- -
-
- Source Range: {block.sourceFrom}-{block.sourceTo} - ({block.sourceTo - block.sourceFrom} chars) -
- - {hasOutput ? ( -
- Output Range: {block.outputFrom}-{block.outputTo} - ({block.outputTo! - block.outputFrom!} chars) -
- ) : ( -
- Output Range: none -
- )} - -
- Total Range: {hasOutput ? block.outputFrom : block.sourceFrom}-{block.sourceTo} - - ({block.sourceTo - (hasOutput ? block.outputFrom! : block.sourceFrom)} chars) - -
- - {block.hasError &&
✗ Has Error
} - - {hasAttributes && ( -
- Attributes: -
- {JSON.stringify(block.attributes, null, 2)} -
-
- )} -
-
- ); -} diff --git a/test/components/Editor.tsx b/test/components/Editor.tsx index 69d3ab6..c588499 100644 --- a/test/components/Editor.tsx +++ b/test/components/Editor.tsx @@ -5,6 +5,7 @@ import {cn} from "../../app/cn.js"; import type {ViewPlugin} from "@codemirror/view"; interface EditorProps { + className?: string; code: string; transactionViewerPlugin?: ViewPlugin; blockViewerPlugin?: ViewPlugin; @@ -25,7 +26,13 @@ const onDefaultError = debounce(() => { }, 100); }, 0); -export function Editor({code, transactionViewerPlugin, blockViewerPlugin, onError = onDefaultError}: EditorProps) { +export function Editor({ + className, + code, + transactionViewerPlugin, + blockViewerPlugin, + onError = onDefaultError, +}: EditorProps) { const containerRef = useRef(null); const editorRef = useRef(null); const [needRerun, setNeedRerun] = useState(false); @@ -97,7 +104,7 @@ export function Editor({code, transactionViewerPlugin, blockViewerPlugin, onErro } return ( -
+
Editor
diff --git a/test/components/ResizableSplit.tsx b/test/components/ResizableSplit.tsx deleted file mode 100644 index 2127635..0000000 --- a/test/components/ResizableSplit.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { useState, useRef, useEffect, ReactNode } from "react"; - -interface ResizableSplitProps { - top: ReactNode; - bottom: ReactNode; - defaultRatio?: number; // 0 to 1, representing top panel's height ratio -} - -export function ResizableSplit({ top, bottom, defaultRatio = 0.5 }: ResizableSplitProps) { - const [ratio, setRatio] = useState(defaultRatio); - const [isDragging, setIsDragging] = useState(false); - const containerRef = useRef(null); - - useEffect(() => { - if (!isDragging) return; - - const handleMouseMove = (e: MouseEvent) => { - if (!containerRef.current) return; - - const container = containerRef.current; - const rect = container.getBoundingClientRect(); - const y = e.clientY - rect.top; - const newRatio = Math.max(0.1, Math.min(0.9, y / rect.height)); - setRatio(newRatio); - }; - - const handleMouseUp = () => { - setIsDragging(false); - }; - - document.addEventListener("mousemove", handleMouseMove); - document.addEventListener("mouseup", handleMouseUp); - - return () => { - document.removeEventListener("mousemove", handleMouseMove); - document.removeEventListener("mouseup", handleMouseUp); - }; - }, [isDragging]); - - const handleMouseDown = (e: React.MouseEvent) => { - e.preventDefault(); - setIsDragging(true); - }; - - return ( -
- {/* Top panel */} -
- {top} -
- - {/* Resize handle */} -
-
-
-
-
- - {/* Bottom panel */} -
- {bottom} -
-
- ); -} diff --git a/test/components/SelectionGroupItem.tsx b/test/components/SelectionGroupItem.tsx new file mode 100644 index 0000000..6a49caa --- /dev/null +++ b/test/components/SelectionGroupItem.tsx @@ -0,0 +1,61 @@ +import {useState} from "react"; +import type {TransactionData} from "./types.ts"; + +export function SelectionGroupItem({transactions}: {transactions: TransactionData[]}) { + const [isOpen, setIsOpen] = useState(false); + + const formatTime = (timestamp: number) => { + const time = new Date(timestamp); + return ( + time.toLocaleTimeString("en-US", { + hour12: false, + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + }) + + "." + + time.getMilliseconds().toString().padStart(3, "0") + ); + }; + + const count = transactions.length; + const firstTr = transactions[0]!; + const lastTr = transactions[transactions.length - 1]!; + + const summaryLeft = `#${lastTr.index}-${firstTr.index} [select] (${count} transactions)`; + const summaryRight = `${formatTime(lastTr.timestamp)} - ${formatTime(firstTr.timestamp)}`; + + return ( +
setIsOpen((e.target as HTMLDetailsElement).open)} + className="mb-2 border border-gray-300 rounded text-xs bg-gray-50" + > + + {summaryLeft} + {summaryRight} + +
+ {transactions.map((tr) => { + const selectionInfo = tr.selection + .map((range) => { + const isCursor = range.from === range.to; + return isCursor ? `cursor at ${range.from}` : `${range.from}-${range.to}`; + }) + .join(", "); + + return ( +
+ #{tr.index} + {selectionInfo} + {formatTime(tr.timestamp)} +
+ ); + })} +
+
+ ); +} diff --git a/test/components/TransactionItem.tsx b/test/components/TransactionItem.tsx new file mode 100644 index 0000000..71b5d42 --- /dev/null +++ b/test/components/TransactionItem.tsx @@ -0,0 +1,166 @@ +import {useState, type ReactNode} from "react"; +import type {TransactionData} from "./types.ts"; +import {ObjectInspector} from "react-inspector"; +import {cn} from "../../app/cn.js"; +import {DeleteIcon, KeyboardIcon} from "lucide-react"; +import {UserEvent} from "./UserEvent.tsx"; + +export function TransactionItem({transaction: tr}: {transaction: TransactionData}) { + const [isOpen, setIsOpen] = useState(false); + + const formatTime = (timestamp: number) => { + const time = new Date(timestamp); + return ( + time.toLocaleTimeString("en-US", { + hour12: false, + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + }) + + "." + + time.getMilliseconds().toString().padStart(3, "0") + ); + }; + + const summaryNodes: ReactNode[] = [#{tr.index}]; + + let summaryLeft = `#${tr.index.toString().padStart(3, "0")}`; + if (typeof tr.annotations.userEvent === "string") { + summaryLeft += ` [${tr.annotations.userEvent}]`; + summaryNodes.push(); + } else if (tr.annotations.remote) { + summaryLeft += ` [remote: ${JSON.stringify(tr.annotations.remote)}]`; + } + if (tr.docChanged) { + summaryLeft += ` 📝`; + } + + return ( +
setIsOpen((e.target as HTMLDetailsElement).open)} + className={cn( + "mb-2 border border-gray-200 rounded text-xs", + tr.annotations.userEvent && "bg-blue-50", + tr.docChanged && "border-l-4 border-l-blue-500", + )} + > + + {summaryNodes} + {formatTime(tr.timestamp)} + +
+
+ Doc Changed: {tr.docChanged.toString()} +
+ + {tr.changes.length > 0 ? ( +
+ Changes: + {tr.changes.map((change, idx) => { + const deleted = change.to - change.from; + const inserted = change.insert.length; + const sameLine = change.fromLine === change.toLine; + + let posInfo = `pos ${change.from}-${change.to}`; + if (sameLine) { + posInfo += ` (L${change.fromLine}:${change.fromCol}-${change.toCol})`; + } else { + posInfo += ` (L${change.fromLine}:${change.fromCol} to L${change.toLine}:${change.toCol})`; + } + + return ( +
+
+ Change {idx + 1}: {posInfo} +
+ {deleted > 0 &&
Deleted {deleted} chars
} + {inserted > 0 && ( +
+ Inserted: {change.insert} +
+ )} +
+ ); + })} +
+ ) : ( +
+ Changes: none +
+ )} + + {Object.keys(tr.annotations).length > 0 ? ( +
+ Annotations: + {Object.entries(tr.annotations).map(([key, value]) => ( +
+ {key}: {JSON.stringify(value)} +
+ ))} +
+ ) : ( +
+ Annotations: none +
+ )} + + {tr.effects.length > 0 ? ( +
+ Effects: {tr.effects.length} + {tr.effects.map((effect, idx) => ( +
+ {effect.type === "blockMetadataEffect" && effect.blockMetadata ? ( +
+
+ Effect {idx + 1}: blockMetadataEffect ({effect.blockMetadata.length} blocks) +
+ {effect.blockMetadata.map((block: any, blockIdx: number) => ( +
+
Block {blockIdx + 1}:
+
+ {block.output !== null ? `Output: ${block.output.from}-${block.output.to}` : "Output: null"} +
+
+ Source: {block.source.from}-{block.source.to} +
+ {Object.keys(block.attributes).length > 0 && ( +
Attributes: {JSON.stringify(block.attributes)}
+ )} + {block.error &&
Error: true
} +
+ ))} +
+ ) : ( +
+ + Effect {idx + 1} ({effect.type}):{" "} + + +
+ )} +
+ ))} +
+ ) : ( +
+ Effects: none +
+ )} + +
+ Selection: + {tr.selection.map((range, idx) => { + const isCursor = range.from === range.to; + return ( +
+ Range {idx + 1}: {isCursor ? `cursor at ${range.from}` : `${range.from}-${range.to}`} + {!isCursor && ` (anchor: ${range.anchor}, head: ${range.head})`} +
+ ); + })} +
+
+
+ ); +} diff --git a/test/components/TransactionViewer.tsx b/test/components/TransactionViewer.tsx index 9e47e2f..11d8bb5 100644 --- a/test/components/TransactionViewer.tsx +++ b/test/components/TransactionViewer.tsx @@ -1,61 +1,19 @@ -import {useState, useEffect, useRef} from "react"; +import {useState, useEffect, useRef, useMemo} from "react"; import {ViewPlugin} from "@codemirror/view"; import {Transaction as CMTransaction} from "@codemirror/state"; import {blockMetadataEffect} from "../../editor/blockMetadata.ts"; import {cn} from "../../app/cn.js"; +import {SelectionGroupItem} from "./SelectionGroupItem.tsx"; +import type {TransactionEffect, TransactionData, TransactionGroup, TransactionViewerProps} from "./types.ts"; +import {TransactionItem} from "./TransactionItem.tsx"; // Maximum number of transactions to keep in history const MAX_HISTORY = 100; -interface TransactionRange { - from: number; - to: number; - anchor: number; - head: number; -} - -interface TransactionChange { - from: number; - to: number; - fromLine: number; - fromCol: number; - toLine: number; - toCol: number; - insert: string; -} - -interface TransactionEffect { - value: any; - type: string; - blockMetadata?: any[]; -} - -interface TransactionData { - index: number; - docChanged: boolean; - changes: TransactionChange[]; - annotations: Record; - effects: TransactionEffect[]; - selection: TransactionRange[]; - scrollIntoView?: boolean; - filter?: boolean; - sequential?: boolean; - timestamp: number; -} - -interface TransactionGroup { - type: "individual" | "selection"; - transaction?: TransactionData; - transactions?: TransactionData[]; -} - -interface TransactionViewerProps { - onPluginCreate: (plugin: ViewPlugin) => void; -} - export function TransactionViewer({onPluginCreate}: TransactionViewerProps) { const [transactions, setTransactions] = useState([]); const [autoScroll, setAutoScroll] = useState(true); + const [showEffects, setShowEffects] = useState(false); const listRef = useRef(null); const nextIndexRef = useRef(0); @@ -81,8 +39,6 @@ export function TransactionViewer({onPluginCreate}: TransactionViewerProps) { head: r.head, })), scrollIntoView: tr.scrollIntoView, - filter: tr.filter, - sequential: tr.sequential, timestamp: Date.now(), }; @@ -120,14 +76,20 @@ export function TransactionViewer({onPluginCreate}: TransactionViewerProps) { // Extract effects for (const effect of tr.effects) { - const effectData: TransactionEffect = { - value: effect.value, - type: "StateEffect", - }; + let effectData: TransactionEffect; if (effect.is(blockMetadataEffect)) { - effectData.type = "blockMetadataEffect"; - effectData.blockMetadata = effect.value; + const value = structuredClone(effect.value); + effectData = { + type: "blockMetadataEffect", + blockMetadata: value, + value: value, + }; + } else { + effectData = { + value: effect.value, + type: "StateEffect", + }; } data.effects.push(effectData); @@ -196,12 +158,16 @@ export function TransactionViewer({onPluginCreate}: TransactionViewerProps) { nextIndexRef.current = 0; }; - const groupTransactions = (): TransactionGroup[] => { + const filteredTransactions = useMemo(() => { + return showEffects ? transactions : transactions.filter((tr) => tr.effects.length === 0); + }, [transactions, showEffects]); + + const groupedTransactions = useMemo(() => { const groups: TransactionGroup[] = []; let currentGroup: TransactionGroup | null = null; - for (let i = transactions.length - 1; i >= 0; i--) { - const tr = transactions[i]; + for (let i = filteredTransactions.length - 1; i >= 0; i--) { + const tr = filteredTransactions[i]!; const isSelection = tr.annotations.userEvent === "select" || tr.annotations.userEvent === "select.pointer"; if (isSelection) { @@ -218,13 +184,14 @@ export function TransactionViewer({onPluginCreate}: TransactionViewerProps) { groups.push({ type: "individual", transaction: tr, + transactions: undefined, }); currentGroup = null; } } return groups; - }; + }, [filteredTransactions]); return (
@@ -246,13 +213,22 @@ export function TransactionViewer({onPluginCreate}: TransactionViewerProps) { /> Auto-scroll +
{transactions.length === 0 ? (
No transactions yet
) : ( - groupTransactions().map((group, idx) => + groupedTransactions.map((group, idx) => group.type === "individual" ? ( ) : ( @@ -264,216 +240,3 @@ export function TransactionViewer({onPluginCreate}: TransactionViewerProps) {
); } - -function TransactionItem({transaction: tr}: {transaction: TransactionData}) { - const [isOpen, setIsOpen] = useState(false); - - const formatTime = (timestamp: number) => { - const time = new Date(timestamp); - return ( - time.toLocaleTimeString("en-US", { - hour12: false, - hour: "2-digit", - minute: "2-digit", - second: "2-digit", - }) + - "." + - time.getMilliseconds().toString().padStart(3, "0") - ); - }; - - let summaryLeft = `#${tr.index}`; - if (tr.annotations.userEvent) { - summaryLeft += ` [${tr.annotations.userEvent}]`; - } else if (tr.annotations.remote) { - summaryLeft += ` [remote: ${JSON.stringify(tr.annotations.remote)}]`; - } - if (tr.docChanged) { - summaryLeft += ` 📝`; - } - - return ( -
setIsOpen((e.target as HTMLDetailsElement).open)} - className={cn( - "mb-2 border border-gray-200 rounded text-xs", - tr.annotations.userEvent && "bg-blue-50", - tr.docChanged && "border-l-4 border-l-blue-500", - )} - > - - {summaryLeft} - {formatTime(tr.timestamp)} - -
-
- Doc Changed: {tr.docChanged.toString()} -
- - {tr.changes.length > 0 ? ( -
- Changes: - {tr.changes.map((change, idx) => { - const deleted = change.to - change.from; - const inserted = change.insert.length; - const sameLine = change.fromLine === change.toLine; - - let posInfo = `pos ${change.from}-${change.to}`; - if (sameLine) { - posInfo += ` (L${change.fromLine}:${change.fromCol}-${change.toCol})`; - } else { - posInfo += ` (L${change.fromLine}:${change.fromCol} to L${change.toLine}:${change.toCol})`; - } - - return ( -
-
- Change {idx + 1}: {posInfo} -
- {deleted > 0 &&
Deleted {deleted} chars
} - {inserted > 0 && ( -
- Inserted: {change.insert} -
- )} -
- ); - })} -
- ) : ( -
- Changes: none -
- )} - - {Object.keys(tr.annotations).length > 0 ? ( -
- Annotations: - {Object.entries(tr.annotations).map(([key, value]) => ( -
- {key}: {JSON.stringify(value)} -
- ))} -
- ) : ( -
- Annotations: none -
- )} - - {tr.effects.length > 0 ? ( -
- Effects: {tr.effects.length} - {tr.effects.map((effect, idx) => ( -
- {effect.type === "blockMetadataEffect" && effect.blockMetadata ? ( -
-
- Effect {idx + 1}: blockMetadataEffect ({effect.blockMetadata.length} blocks) -
- {effect.blockMetadata.map((block: any, blockIdx: number) => ( -
-
Block {blockIdx + 1}:
-
- {block.output !== null ? `Output: ${block.output.from}-${block.output.to}` : "Output: null"} -
-
- Source: {block.source.from}-{block.source.to} -
- {Object.keys(block.attributes).length > 0 && ( -
Attributes: {JSON.stringify(block.attributes)}
- )} - {block.error &&
Error: true
} -
- ))} -
- ) : ( -
- Effect {idx + 1} ({effect.type}): {JSON.stringify(effect.value).substring(0, 100)} -
- )} -
- ))} -
- ) : ( -
- Effects: none -
- )} - -
- Selection: - {tr.selection.map((range, idx) => { - const isCursor = range.from === range.to; - return ( -
- Range {idx + 1}: {isCursor ? `cursor at ${range.from}` : `${range.from}-${range.to}`} - {!isCursor && ` (anchor: ${range.anchor}, head: ${range.head})`} -
- ); - })} -
-
-
- ); -} - -function SelectionGroupItem({transactions}: {transactions: TransactionData[]}) { - const [isOpen, setIsOpen] = useState(false); - - const formatTime = (timestamp: number) => { - const time = new Date(timestamp); - return ( - time.toLocaleTimeString("en-US", { - hour12: false, - hour: "2-digit", - minute: "2-digit", - second: "2-digit", - }) + - "." + - time.getMilliseconds().toString().padStart(3, "0") - ); - }; - - const count = transactions.length; - const firstTr = transactions[0]; - const lastTr = transactions[transactions.length - 1]; - - const summaryLeft = `#${lastTr.index}-${firstTr.index} [select] (${count} transactions)`; - const summaryRight = `${formatTime(lastTr.timestamp)} - ${formatTime(firstTr.timestamp)}`; - - return ( -
setIsOpen((e.target as HTMLDetailsElement).open)} - className="mb-2 border border-gray-300 rounded text-xs bg-gray-50" - > - - {summaryLeft} - {summaryRight} - -
- {transactions.map((tr) => { - const selectionInfo = tr.selection - .map((range) => { - const isCursor = range.from === range.to; - return isCursor ? `cursor at ${range.from}` : `${range.from}-${range.to}`; - }) - .join(", "); - - return ( -
- #{tr.index} - {selectionInfo} - {formatTime(tr.timestamp)} -
- ); - })} -
-
- ); -} diff --git a/test/components/UserEvent.tsx b/test/components/UserEvent.tsx new file mode 100644 index 0000000..a2fc6b8 --- /dev/null +++ b/test/components/UserEvent.tsx @@ -0,0 +1,99 @@ +import { + ArrowDownUpIcon, + ClipboardPasteIcon, + CornerDownLeftIcon, + DeleteIcon, + KeyboardIcon, + LanguagesIcon, + ListPlusIcon, + MoveIcon, + RedoDotIcon, + ScissorsIcon, + SquareDashedMousePointerIcon, + SquareMousePointerIcon, + TextCursorInputIcon, + UndoDotIcon, + type LucideIcon, +} from "lucide-react"; +import {cn} from "../../app/cn.js"; + +export function UserEvent({userEvent}: {userEvent: string}) { + let Icon: LucideIcon; + let className: string = ""; + let text: string; + switch (userEvent) { + case "input": + Icon = CornerDownLeftIcon; + text = "Newline"; + break; + case "input.type": + Icon = KeyboardIcon; + text = "Input"; + break; + case "input.type.compose": + Icon = LanguagesIcon; + text = "Input"; + break; + case "input.paste": + Icon = ClipboardPasteIcon; + text = "Paste"; + break; + case "input.drop": + Icon = SquareMousePointerIcon; + text = "Drop"; + break; + case "input.copyline": + Icon = ListPlusIcon; + text = "Duplicate Line"; + break; + case "input.complete": + Icon = ListPlusIcon; + text = "Complete"; + break; + case "delete.selection": + Icon = TextCursorInputIcon; + text = "Delete Selection"; + break; + case "delete.forward": + Icon = DeleteIcon; + className = "rotate-180"; + text = "Delete"; + break; + case "delete.backward": + Icon = DeleteIcon; + text = "Backspace"; + break; + case "delete.cut": + Icon = ScissorsIcon; + text = "Cut"; + break; + case "move": + Icon = MoveIcon; + text = "Move (External)"; + break; + case "move.line": + Icon = ArrowDownUpIcon; + text = "Move Line"; + break; + case "move.drop": + Icon = SquareDashedMousePointerIcon; + text = "Move"; + break; + case "undo": + Icon = UndoDotIcon; + text = "Undo"; + break; + case "redo": + Icon = RedoDotIcon; + text = "Redo"; + break; + default: + return null; + } + return ( +
+ + {text} +
+ ); +} diff --git a/test/components/types.ts b/test/components/types.ts new file mode 100644 index 0000000..ea50e96 --- /dev/null +++ b/test/components/types.ts @@ -0,0 +1,56 @@ +import type {ViewPlugin} from "@codemirror/view"; + +export interface BlockData { + name: string; + index: number; + sourceFrom: number; + sourceTo: number; + outputFrom: number | null; + outputTo: number | null; + hasError: boolean; + attributes: Record; +} + +export interface TransactionRange { + from: number; + to: number; + anchor: number; + head: number; +} + +export interface TransactionChange { + from: number; + to: number; + fromLine: number; + fromCol: number; + toLine: number; + toCol: number; + insert: string; +} + +export interface TransactionEffect { + value: any; + type: string; + blockMetadata?: any[]; +} + +export interface TransactionData { + index: number; + docChanged: boolean; + changes: TransactionChange[]; + annotations: Record; + effects: TransactionEffect[]; + selection: TransactionRange[]; + scrollIntoView?: boolean; + timestamp: number; +} + +export interface TransactionGroup { + type: "individual" | "selection"; + transaction?: TransactionData; + transactions?: TransactionData[]; +} + +export interface TransactionViewerProps { + onPluginCreate: (plugin: ViewPlugin) => void; +} diff --git a/tsconfig.json b/tsconfig.json index c0fa300..c72a67b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,14 +21,13 @@ "declarationMap": true, // Stricter Typechecking Options "noUncheckedIndexedAccess": true, - "exactOptionalPropertyTypes": true, + // "exactOptionalPropertyTypes": true, // Style Options // "noImplicitReturns": true, // "noImplicitOverride": true, // "noUnusedLocals": true, // "noUnusedParameters": true, // "noFallthroughCasesInSwitch": true, - // "noPropertyAccessFromIndexSignature": true, // Recommended Options "strict": true, "jsx": "preserve", From 949c269f08cf705012f14522e702e63ffc5beff9 Mon Sep 17 00:00:00 2001 From: Luyu Cheng <2239547+chengluyu@users.noreply.github.com> Date: Sun, 14 Dec 2025 05:40:03 +0800 Subject: [PATCH 15/18] Fix duplicated blocks --- editor/blockMetadata.ts | 10 +- editor/blocks/BlockMetadata.ts | 6 +- editor/blocks/dedup.ts | 28 ++++ editor/blocks/deduplication.ts | 2 +- lib/containers/range-tree.ts | 228 +++++++++++++++++++++++++++++++++ runtime/index.js | 13 +- 6 files changed, 273 insertions(+), 14 deletions(-) create mode 100644 editor/blocks/dedup.ts create mode 100644 lib/containers/range-tree.ts diff --git a/editor/blockMetadata.ts b/editor/blockMetadata.ts index 89fd5a6..9498aee 100644 --- a/editor/blockMetadata.ts +++ b/editor/blockMetadata.ts @@ -5,6 +5,7 @@ import {detectBlocksWithinRange} from "../lib/blocks/detect.ts"; import {syntaxTree} from "@codemirror/language"; import {MaxHeap} from "../lib/containers/heap.ts"; import {type Range, BlockMetadata} from "./blocks/BlockMetadata.ts"; +import {deduplicateNaive} from "./blocks/dedup.ts"; /** * Update block metadata according to the given transaction. @@ -129,13 +130,10 @@ function updateBlocks(oldBlocks: BlockMetadata[], tr: Transaction): BlockMetadat console.log("New blocks:", newBlocks); - // Lastly, we will merge blocks. We have elaborated on why there might exist - // overlapping blocks. Here, we employs a segment tree. - - // mergeOverlappingBlocks(oldBlocks); + const deduplicatedBlocks = deduplicateNaive(newBlocks); console.groupEnd(); - return newBlocks; + return deduplicatedBlocks; } export const blockMetadataEffect = StateEffect.define(); @@ -163,7 +161,7 @@ export const blockMetadataField = StateField.define({ // Otherwise, we need to update the block attributes according to the // metadata sent from the runtime. Most importantly, we need to translate // the position of each block after the changes has been made. - // TODO: Does this really happen??? + console.log(blocksFromEffect); return blocksFromEffect.map((block) => block.map(tr)); } }, diff --git a/editor/blocks/BlockMetadata.ts b/editor/blocks/BlockMetadata.ts index f6fafec..4e9a43c 100644 --- a/editor/blocks/BlockMetadata.ts +++ b/editor/blocks/BlockMetadata.ts @@ -23,13 +23,13 @@ export class BlockMetadata { if (!tr.docChanged) return this; const output = this.output ? { - from: tr.changes.mapPos(this.output.from, 1), - to: tr.changes.mapPos(this.output.to, -1), + from: tr.changes.mapPos(this.output.from, -1), + to: tr.changes.mapPos(this.output.to, 1), } : null; const source = { from: tr.changes.mapPos(this.source.from, 1), - to: tr.changes.mapPos(this.source.to, -1), + to: tr.changes.mapPos(this.source.to, 1), }; const attributes = this.attributes; const error = this.error; diff --git a/editor/blocks/dedup.ts b/editor/blocks/dedup.ts new file mode 100644 index 0000000..2198192 --- /dev/null +++ b/editor/blocks/dedup.ts @@ -0,0 +1,28 @@ +import type {BlockMetadata} from "./BlockMetadata.ts"; + +export function deduplicateNaive(blocks: BlockMetadata[]): BlockMetadata[] { + const newBlocks: BlockMetadata[] = []; + let last: BlockMetadata | null = null; + + for (let i = 0, n = blocks.length; i < n; i++) { + const block = blocks[i]!; + if (last === null || last.to <= block.from) { + newBlocks.push((last = block)); + } else if (last.from === block.from && last.to === block.to) { + // The block is a duplicate of the last block, so we skip it. + continue; + } else if (last.source.from === block.source.from && last.source.to === block.source.to) { + // The block is a duplicate of the last block, but doesn't have an output. + // We can also skip it. + continue; + } else { + console.error("Found a weird overlap."); + console.log("newBlocks", newBlocks.slice()); + console.log("i", i); + console.log("last", last); + console.log("block", block); + } + } + + return newBlocks; +} diff --git a/editor/blocks/deduplication.ts b/editor/blocks/deduplication.ts index 5b59a1b..3f4596e 100644 --- a/editor/blocks/deduplication.ts +++ b/editor/blocks/deduplication.ts @@ -1,4 +1,4 @@ -import {BlockMetadata} from "./BlockMetadata.js"; +import {BlockMetadata} from "./BlockMetadata.ts"; export interface Interval { from: number; diff --git a/lib/containers/range-tree.ts b/lib/containers/range-tree.ts new file mode 100644 index 0000000..3e0f632 --- /dev/null +++ b/lib/containers/range-tree.ts @@ -0,0 +1,228 @@ +/** + * Represents a half-open range [from, to) where from is inclusive and to is exclusive. + */ +export interface Range { + from: number; + to: number; +} + +/** + * Node in the AVL-based range tree. + */ +class RangeNode { + range: Range; + max: number; // Maximum to value in this subtree + height: number; + left: RangeNode | null = null; + right: RangeNode | null = null; + + constructor(range: Range) { + this.range = range; + this.max = range.to; + this.height = 1; + } +} + +/** + * A balanced range tree that supports efficient interval operations. + * Ranges are left-inclusive and right-exclusive: [from, to). + */ +export class RangeTree { + private root: RangeNode | null = null; + + /** + * Inserts a new range into the tree. + */ + insert(from: number, to: number): void { + if (from >= to) { + throw new Error("Invalid range: from must be less than to"); + } + this.root = this.insertNode(this.root, {from, to}); + } + + /** + * Checks if any range in the tree overlaps with the given range. + */ + hasOverlap(from: number, to: number): boolean { + if (from >= to) { + throw new Error("Invalid range: from must be less than to"); + } + return this.searchOverlap(this.root, {from, to}) !== null; + } + + /** + * Checks if any range in the tree contains the given position. + */ + contains(position: number): boolean { + return this.searchContains(this.root, position) !== null; + } + + /** + * Retrieves all ranges that overlap with the given range. + */ + findAllOverlapping(from: number, to: number): Range[] { + if (from >= to) { + throw new Error("Invalid range: from must be less than to"); + } + const result: Range[] = []; + this.collectOverlapping(this.root, {from, to}, result); + return result; + } + + private insertNode(node: RangeNode | null, range: Range): RangeNode { + // Standard BST insertion + if (node === null) { + return new RangeNode(range); + } + + if (range.from < node.range.from) { + node.left = this.insertNode(node.left, range); + } else { + node.right = this.insertNode(node.right, range); + } + + // Update height and max + this.updateNode(node); + + // Balance the node + return this.balance(node); + } + + private searchOverlap(node: RangeNode | null, range: Range): RangeNode | null { + if (node === null) { + return null; + } + + // Check if current node's range overlaps with the search range + if (this.overlaps(node.range, range)) { + return node; + } + + // If left child exists and its max is greater than range.from, + // there might be an overlap in the left subtree + if (node.left !== null && node.left.max > range.from) { + const leftResult = this.searchOverlap(node.left, range); + if (leftResult !== null) { + return leftResult; + } + } + + // Search in the right subtree + return this.searchOverlap(node.right, range); + } + + private searchContains(node: RangeNode | null, position: number): RangeNode | null { + if (node === null) { + return null; + } + + // Check if current node's range contains the position + if (node.range.from <= position && position < node.range.to) { + return node; + } + + // If left child exists and its max is greater than position, + // there might be a containing range in the left subtree + if (node.left !== null && node.left.max > position) { + const leftResult = this.searchContains(node.left, position); + if (leftResult !== null) { + return leftResult; + } + } + + // Search in the right subtree + return this.searchContains(node.right, position); + } + + private collectOverlapping(node: RangeNode | null, range: Range, result: Range[]): void { + if (node === null) { + return; + } + + // Check if current node's range overlaps + if (this.overlaps(node.range, range)) { + result.push({...node.range}); + } + + // If left child exists and its max is greater than range.from, + // there might be overlaps in the left subtree + if (node.left !== null && node.left.max > range.from) { + this.collectOverlapping(node.left, range, result); + } + + // Always check right subtree if the range might extend there + if (node.right !== null && node.range.from < range.to) { + this.collectOverlapping(node.right, range, result); + } + } + + private overlaps(a: Range, b: Range): boolean { + // Two half-open ranges [a.from, a.to) and [b.from, b.to) overlap if: + // a.from < b.to AND b.from < a.to + return a.from < b.to && b.from < a.to; + } + + private updateNode(node: RangeNode): void { + const leftHeight = node.left?.height ?? 0; + const rightHeight = node.right?.height ?? 0; + node.height = Math.max(leftHeight, rightHeight) + 1; + + const leftMax = node.left?.max ?? Number.NEGATIVE_INFINITY; + const rightMax = node.right?.max ?? Number.NEGATIVE_INFINITY; + node.max = Math.max(node.range.to, leftMax, rightMax); + } + + private getBalance(node: RangeNode): number { + const leftHeight = node.left?.height ?? 0; + const rightHeight = node.right?.height ?? 0; + return leftHeight - rightHeight; + } + + private balance(node: RangeNode): RangeNode { + const balance = this.getBalance(node); + + // Left heavy + if (balance > 1) { + if (node.left && this.getBalance(node.left) < 0) { + // Left-Right case + node.left = this.rotateLeft(node.left); + } + // Left-Left case + return this.rotateRight(node); + } + + // Right heavy + if (balance < -1) { + if (node.right && this.getBalance(node.right) > 0) { + // Right-Left case + node.right = this.rotateRight(node.right); + } + // Right-Right case + return this.rotateLeft(node); + } + + return node; + } + + private rotateLeft(node: RangeNode): RangeNode { + const newRoot = node.right!; + node.right = newRoot.left; + newRoot.left = node; + + this.updateNode(node); + this.updateNode(newRoot); + + return newRoot; + } + + private rotateRight(node: RangeNode): RangeNode { + const newRoot = node.left!; + node.left = newRoot.right; + newRoot.right = node; + + this.updateNode(node); + this.updateNode(newRoot); + + return newRoot; + } +} diff --git a/runtime/index.js b/runtime/index.js index f0d26d2..8555746 100644 --- a/runtime/index.js +++ b/runtime/index.js @@ -135,6 +135,8 @@ export function createRuntime(initialCode) { const refresh = debounce((code) => { const changes = removeChanges(code); + + // Construct an interval tree containing the ranges to be deleted. const removedIntervals = IntervalTree.from(changes, ({from, to}, index) => from === to ? null : {interval: {low: from, high: to - 1}, data: index}, ); @@ -149,7 +151,7 @@ export function createRuntime(initialCode) { if (!values.length) { // Create a block even if there are no values. - blocks.push(new BlockMetadata(node.type, sourceRange, node.state.attributes)); + blocks.push(new BlockMetadata(node.type, null, sourceRange, node.state.attributes)); continue; } @@ -159,9 +161,6 @@ export function createRuntime(initialCode) { // We need to remove the trailing newline for table. const format = withTable(groupValues) ? (...V) => table(...V).trimEnd() : columns; - // The range of line numbers of output lines. - let outputRange = null; - // If any value is an error, set the error flag. let error = false; @@ -203,10 +202,16 @@ export function createRuntime(initialCode) { }); const prefixed = addPrefix(formatted, error ? ERROR_PREFIX : OUTPUT_PREFIX); + // The range of line numbers of output lines. + let outputRange = null; + // Search for existing changes and update the inserted text if found. const entry = removedIntervals.contains(start - 1); + + // Entry not found. This is a new output. if (entry === null) { changes.push({from: start, insert: prefixed + "\n"}); + outputRange = {from: start, to: start}; } else { const change = changes[entry.data]; change.insert = prefixed + "\n"; From a7337b341d2ba762f5840c1dc833714cf56e1395 Mon Sep 17 00:00:00 2001 From: Luyu Cheng <2239547+chengluyu@users.noreply.github.com> Date: Sun, 14 Dec 2025 14:58:48 +0800 Subject: [PATCH 16/18] Minor refactor --- editor/blocks/BlockMetadata.ts | 21 +++- test/components/TransactionItem.tsx | 55 +++++---- test/components/TransactionViewer.tsx | 160 +++++++++++--------------- test/components/types.ts | 3 +- 4 files changed, 114 insertions(+), 125 deletions(-) diff --git a/editor/blocks/BlockMetadata.ts b/editor/blocks/BlockMetadata.ts index 4e9a43c..497d5e1 100644 --- a/editor/blocks/BlockMetadata.ts +++ b/editor/blocks/BlockMetadata.ts @@ -3,6 +3,14 @@ import type {Transaction} from "@codemirror/state"; export type Range = {from: number; to: number}; export class BlockMetadata { + /** + * Create a new `BlockMetadata` instance. + * @param name a descriptive name of this block + * @param output the range of the output region + * @param source the range of the source region + * @param attributes any user-customized attributes of this block + * @param error whether this block has an error + */ public constructor( public readonly name: string, public readonly output: Range | null, @@ -11,16 +19,25 @@ export class BlockMetadata { public error: boolean = false, ) {} + /** + * Get the start position (inclusive) of this block. + */ get from() { return this.output?.from ?? this.source.from; } + /** + * Get the end position (exclusive) of this block. + */ get to() { return this.source.to; } public map(tr: Transaction): BlockMetadata { + // If no changes were made to the document, return the current instance. if (!tr.docChanged) return this; + + // Otherwise, map the output and source ranges. const output = this.output ? { from: tr.changes.mapPos(this.output.from, -1), @@ -31,8 +48,6 @@ export class BlockMetadata { from: tr.changes.mapPos(this.source.from, 1), to: tr.changes.mapPos(this.source.to, 1), }; - const attributes = this.attributes; - const error = this.error; - return new BlockMetadata(this.name, output, source, attributes, error); + return new BlockMetadata(this.name, output, source, this.attributes, this.error); } } diff --git a/test/components/TransactionItem.tsx b/test/components/TransactionItem.tsx index 71b5d42..04d6c83 100644 --- a/test/components/TransactionItem.tsx +++ b/test/components/TransactionItem.tsx @@ -108,37 +108,34 @@ export function TransactionItem({transaction: tr}: {transaction: TransactionData {tr.effects.length > 0 ? (
Effects: {tr.effects.length} - {tr.effects.map((effect, idx) => ( -
- {effect.type === "blockMetadataEffect" && effect.blockMetadata ? ( -
-
- Effect {idx + 1}: blockMetadataEffect ({effect.blockMetadata.length} blocks) + {tr.blockMetadata ? ( +
+
blockMetadataEffect ({tr.blockMetadata.length} blocks)
+ {tr.blockMetadata.map((block: any, blockIdx: number) => ( +
+
Block {blockIdx + 1}:
+
+ {block.output !== null ? `Output: ${block.output.from}-${block.output.to}` : "Output: null"}
- {effect.blockMetadata.map((block: any, blockIdx: number) => ( -
-
Block {blockIdx + 1}:
-
- {block.output !== null ? `Output: ${block.output.from}-${block.output.to}` : "Output: null"} -
-
- Source: {block.source.from}-{block.source.to} -
- {Object.keys(block.attributes).length > 0 && ( -
Attributes: {JSON.stringify(block.attributes)}
- )} - {block.error &&
Error: true
} -
- ))} -
- ) : ( -
- - Effect {idx + 1} ({effect.type}):{" "} - - +
+ Source: {block.source.from}-{block.source.to} +
+ {Object.keys(block.attributes).length > 0 && ( +
Attributes: {JSON.stringify(block.attributes)}
+ )} + {block.error &&
Error: true
}
- )} + ))} +
+ ) : null} + {tr.effects.map((effect, idx) => ( +
+
+ + Effect {idx + 1} ({effect.type}):{" "} + + +
))}
diff --git a/test/components/TransactionViewer.tsx b/test/components/TransactionViewer.tsx index 11d8bb5..6c819dc 100644 --- a/test/components/TransactionViewer.tsx +++ b/test/components/TransactionViewer.tsx @@ -1,6 +1,6 @@ import {useState, useEffect, useRef, useMemo} from "react"; -import {ViewPlugin} from "@codemirror/view"; -import {Transaction as CMTransaction} from "@codemirror/state"; +import {ViewPlugin, ViewUpdate} from "@codemirror/view"; +import {Transaction as Tr} from "@codemirror/state"; import {blockMetadataEffect} from "../../editor/blockMetadata.ts"; import {cn} from "../../app/cn.js"; import {SelectionGroupItem} from "./SelectionGroupItem.tsx"; @@ -10,6 +10,70 @@ import {TransactionItem} from "./TransactionItem.tsx"; // Maximum number of transactions to keep in history const MAX_HISTORY = 100; +function extractTransactionData(tr: Tr, index: number): TransactionData { + const data: TransactionData = { + index, + docChanged: tr.docChanged, + changes: [], + annotations: {}, + effects: [], + selection: tr.state.selection.ranges.map((r) => ({ + from: r.from, + to: r.to, + anchor: r.anchor, + head: r.head, + })), + scrollIntoView: tr.scrollIntoView, + timestamp: Date.now(), + blockMetadata: null, + }; + + // Extract changes + tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => { + const fromLine = tr.startState.doc.lineAt(fromA); + const toLine = tr.startState.doc.lineAt(toA); + + data.changes.push({ + from: fromA, + to: toA, + fromLine: fromLine.number, + fromCol: fromA - fromLine.from, + toLine: toLine.number, + toCol: toA - toLine.from, + insert: inserted.toString(), + }); + }); + + // Extract annotations + const userEvent = tr.annotation(Tr.userEvent); + if (userEvent !== undefined) { + data.annotations.userEvent = userEvent; + } + + const remote = tr.annotation(Tr.remote); + if (remote !== undefined) { + data.annotations.remote = remote; + } + + const addToHistory = tr.annotation(Tr.addToHistory); + if (addToHistory !== undefined) { + data.annotations.addToHistory = addToHistory; + } + + for (const effect of tr.effects) { + if (effect.is(blockMetadataEffect)) { + data.blockMetadata = Array.from(effect.value); + } else { + data.effects.push({ + value: effect.value, + type: "StateEffect", + }); + } + } + + return data; +} + export function TransactionViewer({onPluginCreate}: TransactionViewerProps) { const [transactions, setTransactions] = useState([]); const [autoScroll, setAutoScroll] = useState(true); @@ -25,102 +89,14 @@ export function TransactionViewer({onPluginCreate}: TransactionViewerProps) { listeners.forEach((fn) => fn([...transactionsList])); } - function extractTransactionData(tr: CMTransaction, index: number): TransactionData { - const data: TransactionData = { - index, - docChanged: tr.docChanged, - changes: [], - annotations: {}, - effects: [], - selection: tr.state.selection.ranges.map((r) => ({ - from: r.from, - to: r.to, - anchor: r.anchor, - head: r.head, - })), - scrollIntoView: tr.scrollIntoView, - timestamp: Date.now(), - }; - - // Extract changes - tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => { - const fromLine = tr.startState.doc.lineAt(fromA); - const toLine = tr.startState.doc.lineAt(toA); - - data.changes.push({ - from: fromA, - to: toA, - fromLine: fromLine.number, - fromCol: fromA - fromLine.from, - toLine: toLine.number, - toCol: toA - toLine.from, - insert: inserted.toString(), - }); - }); - - // Extract annotations - const userEvent = tr.annotation(CMTransaction.userEvent); - if (userEvent !== undefined) { - data.annotations.userEvent = userEvent; - } - - const remote = tr.annotation(CMTransaction.remote); - if (remote !== undefined) { - data.annotations.remote = remote; - } - - const addToHistory = tr.annotation(CMTransaction.addToHistory); - if (addToHistory !== undefined) { - data.annotations.addToHistory = addToHistory; - } - - // Extract effects - for (const effect of tr.effects) { - let effectData: TransactionEffect; - - if (effect.is(blockMetadataEffect)) { - const value = structuredClone(effect.value); - effectData = { - type: "blockMetadataEffect", - blockMetadata: value, - value: value, - }; - } else { - effectData = { - value: effect.value, - type: "StateEffect", - }; - } - - data.effects.push(effectData); - } - - return data; - } - const plugin = ViewPlugin.fromClass( class { constructor(view: any) { - const initialTr: TransactionData = { - index: nextIndexRef.current++, - docChanged: false, - changes: [], - annotations: {}, - effects: [], - selection: view.state.selection.ranges.map((r: any) => ({ - from: r.from, - to: r.to, - anchor: r.anchor, - head: r.head, - })), - timestamp: Date.now(), - }; - transactionsList.push(initialTr); notifyListeners(); } - update(update: any) { - update.transactions.forEach((tr: CMTransaction) => { + update(update: ViewUpdate) { + update.transactions.forEach((tr: Tr) => { const transactionData = extractTransactionData(tr, nextIndexRef.current++); transactionsList.push(transactionData); diff --git a/test/components/types.ts b/test/components/types.ts index ea50e96..8a49467 100644 --- a/test/components/types.ts +++ b/test/components/types.ts @@ -1,4 +1,5 @@ import type {ViewPlugin} from "@codemirror/view"; +import type {BlockMetadata} from "../../editor/blocks/BlockMetadata.ts"; export interface BlockData { name: string; @@ -31,7 +32,6 @@ export interface TransactionChange { export interface TransactionEffect { value: any; type: string; - blockMetadata?: any[]; } export interface TransactionData { @@ -43,6 +43,7 @@ export interface TransactionData { selection: TransactionRange[]; scrollIntoView?: boolean; timestamp: number; + blockMetadata: BlockMetadata[] | null; } export interface TransactionGroup { From a2f03eb63e184241b92e2efc8d0747c2c54870eb Mon Sep 17 00:00:00 2001 From: Luyu Cheng <2239547+chengluyu@users.noreply.github.com> Date: Sun, 14 Dec 2025 15:13:32 +0800 Subject: [PATCH 17/18] Configure ESLint for TypeScript --- editor/blockMetadata.ts | 3 +- editor/blocks/deduplication.ts | 159 -------------------- eslint.config.mjs | 14 +- lib/blocks.ts | 9 +- lib/blocks/detect.ts | 2 +- package.json | 3 + pnpm-lock.yaml | 208 ++++++++++++++++++++++++++ test/components/Editor.tsx | 4 +- test/components/TransactionItem.tsx | 16 +- test/components/TransactionViewer.tsx | 3 +- test/components/types.ts | 10 +- 11 files changed, 244 insertions(+), 187 deletions(-) delete mode 100644 editor/blocks/deduplication.ts diff --git a/editor/blockMetadata.ts b/editor/blockMetadata.ts index 9498aee..0614354 100644 --- a/editor/blockMetadata.ts +++ b/editor/blockMetadata.ts @@ -1,10 +1,9 @@ import {StateField, StateEffect, Transaction} from "@codemirror/state"; -import {mergeOverlappingBlocks} from "./blocks/deduplication.ts"; import {blockRangeLength, findAffectedBlockRange, getOnlyOneBlock} from "../lib/blocks.ts"; import {detectBlocksWithinRange} from "../lib/blocks/detect.ts"; import {syntaxTree} from "@codemirror/language"; import {MaxHeap} from "../lib/containers/heap.ts"; -import {type Range, BlockMetadata} from "./blocks/BlockMetadata.ts"; +import {BlockMetadata} from "./blocks/BlockMetadata.ts"; import {deduplicateNaive} from "./blocks/dedup.ts"; /** diff --git a/editor/blocks/deduplication.ts b/editor/blocks/deduplication.ts deleted file mode 100644 index 3f4596e..0000000 --- a/editor/blocks/deduplication.ts +++ /dev/null @@ -1,159 +0,0 @@ -import {BlockMetadata} from "./BlockMetadata.ts"; - -export interface Interval { - from: number; - to: number; -} - -type Block = BlockMetadata; - -interface IntervalWithIndex extends Interval { - index: number; -} - -interface MergeGroup { - indices: number[]; - from: number; - to: number; -} - -/** - * Detects overlapping blocks and returns groups of indices that should be merged. - * - * @param blocks Array of blocks to check for overlaps - * @returns Array of merge groups, where each group contains indices of overlapping blocks - */ -export function detectOverlappingBlocks(blocks: Block[]): MergeGroup[] { - if (blocks.length === 0) return []; - - // Create a sorted array of block intervals with their indices - const intervals: IntervalWithIndex[] = blocks.map((block, index) => ({ - from: block.from, - to: block.to, - index, - })); - - // Sort by start position, then by end position - intervals.sort((a, b) => { - if (a.from !== b.from) return a.from - b.from; - return a.to - b.to; - }); - - // Track which blocks overlap - const overlappingIndices = new Set(); - - // Simple sweep line algorithm to detect overlaps - for (let i = 0; i < intervals.length - 1; i++) { - const current = intervals[i]!; - const next = intervals[i + 1]!; - - // If next block starts before or at the end of current block, they overlap - if (next.from < current.to) { - overlappingIndices.add(current.index); - overlappingIndices.add(next.index); - } - } - - if (overlappingIndices.size === 0) { - return []; - } - - // Group consecutive overlapping blocks - const sortedOverlapping = Array.from(overlappingIndices).sort((a, b) => a - b); - const mergeGroups: MergeGroup[] = []; - let currentGroup: number[] = []; - - for (const idx of sortedOverlapping) { - if (currentGroup.length === 0) { - currentGroup.push(idx); - } else { - const lastIdx = currentGroup[currentGroup.length - 1]!; - const lastBlock = blocks[lastIdx]!; - const currentBlock = blocks[idx]!; - - // Check if blocks overlap - if (currentBlock.from <= lastBlock.to) { - currentGroup.push(idx); - } else { - // Finalize current group - const groupFrom = Math.min(...currentGroup.map((i) => blocks[i]!.from)); - const groupTo = Math.max(...currentGroup.map((i) => blocks[i]!.to)); - mergeGroups.push({indices: currentGroup, from: groupFrom, to: groupTo}); - currentGroup = [idx]; - } - } - } - - // Don't forget the last group - if (currentGroup.length > 0) { - const groupFrom = Math.min(...currentGroup.map((i) => blocks[i]!.from)); - const groupTo = Math.max(...currentGroup.map((i) => blocks[i]!.to)); - mergeGroups.push({indices: currentGroup, from: groupFrom, to: groupTo}); - } - - return mergeGroups; -} - -/** - * Merges overlapping blocks in place. - * - * @param blocks Array of blocks to merge (will be modified in place) - */ -export function mergeOverlappingBlocks(blocks: Block[]): void { - const mergeGroups = detectOverlappingBlocks(blocks); - - console.log("Merge groups:", mergeGroups); - mergeGroups.forEach((group) => { - group.indices.forEach((index) => { - const block = blocks[index]!; - console.log(block); - }); - }); - - if (mergeGroups.length === 0) return; - - console.log(`Found ${mergeGroups.length} groups of overlapping blocks to merge`); - - // Process groups in reverse order to avoid index shifting issues when removing - for (const group of mergeGroups.reverse()) { - if (group.indices.length < 2) continue; - - console.log(`Merging blocks at indices ${group.indices.join(", ")} into range ${group.from}-${group.to}`); - - // Find the block with the most complete information (prefer blocks with output) - let primaryIdx = group.indices[0]!; - let primaryBlock = blocks[primaryIdx]!; - - for (const idx of group.indices) { - const block = blocks[idx]!; - if (block.output && !primaryBlock.output) { - primaryIdx = idx; - primaryBlock = block; - } - } - - // Update the primary block's range to encompass all merged blocks - if (primaryBlock.output) { - const outputFrom = Math.min( - primaryBlock.output.from, - ...group.indices.map((idx) => blocks[idx]!.output?.from ?? Infinity), - ); - const outputTo = Math.max( - primaryBlock.output.to, - ...group.indices.map((idx) => blocks[idx]!.output?.to ?? -Infinity), - ); - primaryBlock.output = {from: outputFrom, to: outputTo}; - } - - primaryBlock.source = {from: group.from, to: group.to}; - - // Keep the primary block at the first index, remove all others - const firstIdx = group.indices[0]!; - blocks[firstIdx] = primaryBlock; - - // Remove other blocks (iterate backwards to avoid index shifting) - for (let i = group.indices.length - 1; i > 0; i--) { - blocks.splice(group.indices[i]!, 1); - } - } -} diff --git a/eslint.config.mjs b/eslint.config.mjs index 57bcb5e..f4a2295 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -3,10 +3,17 @@ import {defineConfig} from "eslint/config"; import eslintConfigPrettier from "eslint-config-prettier/flat"; import reactPlugin from "eslint-plugin-react"; import hooksPlugin from "eslint-plugin-react-hooks"; +import tseslint from "typescript-eslint"; export default defineConfig([ { - files: ["editor/**/*.js", "runtime/**/*.js", "test/**/*.js", "app/**/*.js", "app/**/*.jsx", "lib/**/*.js"], + files: [ + "editor/**/*.{js,ts,tsx}", + "runtime/**/*.{js,ts}", + "test/**/*.{js,ts,tsx}", + "app/**/*.{js,jsx,ts,tsx}", + "lib/**/*.{js,ts}", + ], plugins: { react: reactPlugin, "react-hooks": hooksPlugin, @@ -34,6 +41,11 @@ export default defineConfig([ "spaced-comment": ["error", "always"], }, }, + // TypeScript-specific configuration + ...tseslint.configs.recommended.map((config) => ({ + ...config, + files: ["editor/**/*.{ts,tsx}", "runtime/**/*.ts", "test/**/*.{ts,tsx}", "app/**/*.{ts,tsx}", "lib/**/*.ts"], + })), { ignores: ["**/*.recho.js", "test/output/**/*"], }, diff --git a/lib/blocks.ts b/lib/blocks.ts index ba3eb60..f51947c 100644 --- a/lib/blocks.ts +++ b/lib/blocks.ts @@ -25,12 +25,9 @@ export function findAdjacentBlocks( // boundary is exclusive, i.e., the range is empty when `left === right`. let left = 0; let right = blocks.length; - let DEBUG_hasEnteredLoop = false; // When the range is non-empty. - loop: while (left < right) { - DEBUG_hasEnteredLoop = true; - + while (left < right) { const middle = (left + right) >>> 1; const pivot = blocks[middle]!; @@ -40,7 +37,6 @@ export function findAdjacentBlocks( return [middle - 1, middle]; } else { right = middle; - continue loop; } } else if (pivot.to <= pos) { // We should move to the right sub-range [middle, right). @@ -55,9 +51,6 @@ export function findAdjacentBlocks( } } - // We can only reach here if we haven't enter the loop. - // console.assert(!DEBUG_hasEnteredLoop, "Did not return in the loop."); - return null; } finally { // console.groupEnd(); diff --git a/lib/blocks/detect.ts b/lib/blocks/detect.ts index b226fd9..be9f6f0 100644 --- a/lib/blocks/detect.ts +++ b/lib/blocks/detect.ts @@ -108,7 +108,7 @@ export function detectBlocksWithinRange(tree: Tree, doc: Text, from: number, to: // Find the next statement after these output lines // The output belongs to the statement immediately following it - let nextStatementLine = currentLineNum; + const nextStatementLine = currentLineNum; if (nextStatementLine <= totalLines) { const nextStmtLine = doc.line(nextStatementLine); // Store this output range to be associated with the next statement diff --git a/package.json b/package.json index c9d1e18..daaeca9 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,8 @@ "@tailwindcss/postcss": "^4.1.14", "@types/node": "24.10.1", "@types/react": "19.2.6", + "@typescript-eslint/eslint-plugin": "^8.49.0", + "@typescript-eslint/parser": "^8.49.0", "@vercel/analytics": "^1.5.0", "@vitejs/plugin-react": "^4.3.1", "clsx": "^2.1.1", @@ -56,6 +58,7 @@ "tailwind-merge": "^3.3.1", "tailwindcss": "^4.1.14", "typescript": "^5.9.3", + "typescript-eslint": "^8.49.0", "vite": "^7.1.10", "vitest": "^3.2.4" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0435a48..213da11 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -123,6 +123,12 @@ importers: '@types/react': specifier: 19.2.6 version: 19.2.6 + '@typescript-eslint/eslint-plugin': + specifier: ^8.49.0 + version: 8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3) + '@typescript-eslint/parser': + specifier: ^8.49.0 + version: 8.49.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3) '@vercel/analytics': specifier: ^1.5.0 version: 1.5.0(next@15.5.6(@babel/core@7.28.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0) @@ -174,6 +180,9 @@ importers: typescript: specifier: ^5.9.3 version: 5.9.3 + typescript-eslint: + specifier: ^8.49.0 + version: 8.49.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3) vite: specifier: ^7.1.10 version: 7.1.10(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.1) @@ -1212,6 +1221,65 @@ packages: '@types/unist@3.0.3': resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==} + '@typescript-eslint/eslint-plugin@8.49.0': + resolution: {integrity: sha512-JXij0vzIaTtCwu6SxTh8qBc66kmf1xs7pI4UOiMDFVct6q86G0Zs7KRcEoJgY3Cav3x5Tq0MF5jwgpgLqgKG3A==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + '@typescript-eslint/parser': ^8.49.0 + eslint: ^8.57.0 || ^9.0.0 + typescript: '>=4.8.4 <6.0.0' + + '@typescript-eslint/parser@8.49.0': + resolution: {integrity: sha512-N9lBGA9o9aqb1hVMc9hzySbhKibHmB+N3IpoShyV6HyQYRGIhlrO5rQgttypi+yEeKsKI4idxC8Jw6gXKD4THA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + eslint: ^8.57.0 || ^9.0.0 + typescript: '>=4.8.4 <6.0.0' + + '@typescript-eslint/project-service@8.49.0': + resolution: {integrity: sha512-/wJN0/DKkmRUMXjZUXYZpD1NEQzQAAn9QWfGwo+Ai8gnzqH7tvqS7oNVdTjKqOcPyVIdZdyCMoqN66Ia789e7g==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + typescript: '>=4.8.4 <6.0.0' + + '@typescript-eslint/scope-manager@8.49.0': + resolution: {integrity: sha512-npgS3zi+/30KSOkXNs0LQXtsg9ekZ8OISAOLGWA/ZOEn0ZH74Ginfl7foziV8DT+D98WfQ5Kopwqb/PZOaIJGg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + '@typescript-eslint/tsconfig-utils@8.49.0': + resolution: {integrity: sha512-8prixNi1/6nawsRYxet4YOhnbW+W9FK/bQPxsGB1D3ZrDzbJ5FXw5XmzxZv82X3B+ZccuSxo/X8q9nQ+mFecWA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + typescript: '>=4.8.4 <6.0.0' + + '@typescript-eslint/type-utils@8.49.0': + resolution: {integrity: sha512-KTExJfQ+svY8I10P4HdxKzWsvtVnsuCifU5MvXrRwoP2KOlNZ9ADNEWWsQTJgMxLzS5VLQKDjkCT/YzgsnqmZg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + eslint: ^8.57.0 || ^9.0.0 + typescript: '>=4.8.4 <6.0.0' + + '@typescript-eslint/types@8.49.0': + resolution: {integrity: sha512-e9k/fneezorUo6WShlQpMxXh8/8wfyc+biu6tnAqA81oWrEic0k21RHzP9uqqpyBBeBKu4T+Bsjy9/b8u7obXQ==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + '@typescript-eslint/typescript-estree@8.49.0': + resolution: {integrity: sha512-jrLdRuAbPfPIdYNppHJ/D0wN+wwNfJ32YTAm10eJVsFmrVpXQnDWBn8niCSMlWjvml8jsce5E/O+86IQtTbJWA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + typescript: '>=4.8.4 <6.0.0' + + '@typescript-eslint/utils@8.49.0': + resolution: {integrity: sha512-N3W7rJw7Rw+z1tRsHZbK395TWSYvufBXumYtEGzypgMUthlg0/hmCImeA8hgO2d2G4pd7ftpxxul2J8OdtdaFA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + eslint: ^8.57.0 || ^9.0.0 + typescript: '>=4.8.4 <6.0.0' + + '@typescript-eslint/visitor-keys@8.49.0': + resolution: {integrity: sha512-LlKaciDe3GmZFphXIc79THF/YYBugZ7FS1pO581E/edlVVNbZKDy93evqmrfQ9/Y4uN0vVhX4iuchq26mK/iiA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@uiw/codemirror-theme-github@4.25.2': resolution: {integrity: sha512-9g3ujmYCNU2VQCp0+XzI1NS5hSZGgXRtH+5yWli5faiPvHGYZUVke+5Pnzdn/1tkgW6NpTQ7U/JHsyQkgbnZ/w==} @@ -1440,6 +1508,9 @@ packages: brace-expansion@1.1.12: resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==} + brace-expansion@2.0.2: + resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==} + braces@3.0.3: resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==} engines: {node: '>=8'} @@ -2152,6 +2223,10 @@ packages: resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==} engines: {node: '>= 4'} + ignore@7.0.5: + resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==} + engines: {node: '>= 4'} + import-fresh@3.3.1: resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==} engines: {node: '>=6'} @@ -2609,6 +2684,10 @@ packages: minimatch@3.1.2: resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} + minimatch@9.0.5: + resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==} + engines: {node: '>=16 || 14 >=14.17'} + minipass@7.1.2: resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==} engines: {node: '>=16 || 14 >=14.17'} @@ -3274,6 +3353,12 @@ packages: trim-lines@3.0.1: resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==} + ts-api-utils@2.1.0: + resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==} + engines: {node: '>=18.12'} + peerDependencies: + typescript: '>=4.8.4' + tslib@2.8.1: resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} @@ -3305,6 +3390,13 @@ packages: resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==} engines: {node: '>= 0.4'} + typescript-eslint@8.49.0: + resolution: {integrity: sha512-zRSVH1WXD0uXczCXw+nsdjGPUdx4dfrs5VQoHnUWmv1U3oNlAKv4FUNdLDhVUg+gYn+a5hUESqch//Rv5wVhrg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + eslint: ^8.57.0 || ^9.0.0 + typescript: '>=4.8.4 <6.0.0' + typescript@5.9.3: resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==} engines: {node: '>=14.17'} @@ -4652,6 +4744,97 @@ snapshots: '@types/unist@3.0.3': {} + '@typescript-eslint/eslint-plugin@8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)': + dependencies: + '@eslint-community/regexpp': 4.12.1 + '@typescript-eslint/parser': 8.49.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3) + '@typescript-eslint/scope-manager': 8.49.0 + '@typescript-eslint/type-utils': 8.49.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3) + '@typescript-eslint/utils': 8.49.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3) + '@typescript-eslint/visitor-keys': 8.49.0 + eslint: 9.37.0(jiti@2.6.1) + ignore: 7.0.5 + natural-compare: 1.4.0 + ts-api-utils: 2.1.0(typescript@5.9.3) + typescript: 5.9.3 + transitivePeerDependencies: + - supports-color + + '@typescript-eslint/parser@8.49.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)': + dependencies: + '@typescript-eslint/scope-manager': 8.49.0 + '@typescript-eslint/types': 8.49.0 + '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.3) + '@typescript-eslint/visitor-keys': 8.49.0 + debug: 4.4.3 + eslint: 9.37.0(jiti@2.6.1) + typescript: 5.9.3 + transitivePeerDependencies: + - supports-color + + '@typescript-eslint/project-service@8.49.0(typescript@5.9.3)': + dependencies: + '@typescript-eslint/tsconfig-utils': 8.49.0(typescript@5.9.3) + '@typescript-eslint/types': 8.49.0 + debug: 4.4.3 + typescript: 5.9.3 + transitivePeerDependencies: + - supports-color + + '@typescript-eslint/scope-manager@8.49.0': + dependencies: + '@typescript-eslint/types': 8.49.0 + '@typescript-eslint/visitor-keys': 8.49.0 + + '@typescript-eslint/tsconfig-utils@8.49.0(typescript@5.9.3)': + dependencies: + typescript: 5.9.3 + + '@typescript-eslint/type-utils@8.49.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)': + dependencies: + '@typescript-eslint/types': 8.49.0 + '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.3) + '@typescript-eslint/utils': 8.49.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3) + debug: 4.4.3 + eslint: 9.37.0(jiti@2.6.1) + ts-api-utils: 2.1.0(typescript@5.9.3) + typescript: 5.9.3 + transitivePeerDependencies: + - supports-color + + '@typescript-eslint/types@8.49.0': {} + + '@typescript-eslint/typescript-estree@8.49.0(typescript@5.9.3)': + dependencies: + '@typescript-eslint/project-service': 8.49.0(typescript@5.9.3) + '@typescript-eslint/tsconfig-utils': 8.49.0(typescript@5.9.3) + '@typescript-eslint/types': 8.49.0 + '@typescript-eslint/visitor-keys': 8.49.0 + debug: 4.4.3 + minimatch: 9.0.5 + semver: 7.7.3 + tinyglobby: 0.2.15 + ts-api-utils: 2.1.0(typescript@5.9.3) + typescript: 5.9.3 + transitivePeerDependencies: + - supports-color + + '@typescript-eslint/utils@8.49.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)': + dependencies: + '@eslint-community/eslint-utils': 4.9.0(eslint@9.37.0(jiti@2.6.1)) + '@typescript-eslint/scope-manager': 8.49.0 + '@typescript-eslint/types': 8.49.0 + '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.3) + eslint: 9.37.0(jiti@2.6.1) + typescript: 5.9.3 + transitivePeerDependencies: + - supports-color + + '@typescript-eslint/visitor-keys@8.49.0': + dependencies: + '@typescript-eslint/types': 8.49.0 + eslint-visitor-keys: 4.2.1 + '@uiw/codemirror-theme-github@4.25.2(@codemirror/language@6.11.3)(@codemirror/state@6.5.2)(@codemirror/view@6.38.6)': dependencies: '@uiw/codemirror-themes': 4.25.2(@codemirror/language@6.11.3)(@codemirror/state@6.5.2)(@codemirror/view@6.38.6) @@ -4941,6 +5124,10 @@ snapshots: balanced-match: 1.0.2 concat-map: 0.0.1 + brace-expansion@2.0.2: + dependencies: + balanced-match: 1.0.2 + braces@3.0.3: dependencies: fill-range: 7.1.1 @@ -5828,6 +6015,8 @@ snapshots: ignore@5.3.2: {} + ignore@7.0.5: {} + import-fresh@3.3.1: dependencies: parent-module: 1.0.1 @@ -6249,6 +6438,10 @@ snapshots: dependencies: brace-expansion: 1.1.12 + minimatch@9.0.5: + dependencies: + brace-expansion: 2.0.2 + minipass@7.1.2: {} minizlib@3.1.0: @@ -6989,6 +7182,10 @@ snapshots: trim-lines@3.0.1: {} + ts-api-utils@2.1.0(typescript@5.9.3): + dependencies: + typescript: 5.9.3 + tslib@2.8.1: {} type-check@0.4.0: @@ -7035,6 +7232,17 @@ snapshots: possible-typed-array-names: 1.1.0 reflect.getprototypeof: 1.0.10 + typescript-eslint@8.49.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3): + dependencies: + '@typescript-eslint/eslint-plugin': 8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3) + '@typescript-eslint/parser': 8.49.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3) + '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.3) + '@typescript-eslint/utils': 8.49.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3) + eslint: 9.37.0(jiti@2.6.1) + typescript: 5.9.3 + transitivePeerDependencies: + - supports-color + typescript@5.9.3: {} uc.micro@2.1.0: {} diff --git a/test/components/Editor.tsx b/test/components/Editor.tsx index c588499..708952b 100644 --- a/test/components/Editor.tsx +++ b/test/components/Editor.tsx @@ -12,9 +12,9 @@ interface EditorProps { onError?: (error: Error) => void; } -function debounce(fn: (...args: any[]) => void, delay = 0) { +function debounce(fn: (...args: Args) => void, delay = 0) { let timeout: ReturnType; - return (...args: any[]) => { + return (...args: Args) => { clearTimeout(timeout); timeout = setTimeout(() => fn(...args), delay); }; diff --git a/test/components/TransactionItem.tsx b/test/components/TransactionItem.tsx index 04d6c83..fe00c3f 100644 --- a/test/components/TransactionItem.tsx +++ b/test/components/TransactionItem.tsx @@ -2,8 +2,8 @@ import {useState, type ReactNode} from "react"; import type {TransactionData} from "./types.ts"; import {ObjectInspector} from "react-inspector"; import {cn} from "../../app/cn.js"; -import {DeleteIcon, KeyboardIcon} from "lucide-react"; import {UserEvent} from "./UserEvent.tsx"; +import {PencilLineIcon, RefreshCcw} from "lucide-react"; export function TransactionItem({transaction: tr}: {transaction: TransactionData}) { const [isOpen, setIsOpen] = useState(false); @@ -22,17 +22,19 @@ export function TransactionItem({transaction: tr}: {transaction: TransactionData ); }; - const summaryNodes: ReactNode[] = [#{tr.index}]; + const summaryNodes: ReactNode[] = [ + + #{tr.index} + , + ]; - let summaryLeft = `#${tr.index.toString().padStart(3, "0")}`; if (typeof tr.annotations.userEvent === "string") { - summaryLeft += ` [${tr.annotations.userEvent}]`; - summaryNodes.push(); + summaryNodes.push(); } else if (tr.annotations.remote) { - summaryLeft += ` [remote: ${JSON.stringify(tr.annotations.remote)}]`; + summaryNodes.push(); } if (tr.docChanged) { - summaryLeft += ` 📝`; + summaryNodes.push(); } return ( diff --git a/test/components/TransactionViewer.tsx b/test/components/TransactionViewer.tsx index 6c819dc..bb8737b 100644 --- a/test/components/TransactionViewer.tsx +++ b/test/components/TransactionViewer.tsx @@ -2,9 +2,8 @@ import {useState, useEffect, useRef, useMemo} from "react"; import {ViewPlugin, ViewUpdate} from "@codemirror/view"; import {Transaction as Tr} from "@codemirror/state"; import {blockMetadataEffect} from "../../editor/blockMetadata.ts"; -import {cn} from "../../app/cn.js"; import {SelectionGroupItem} from "./SelectionGroupItem.tsx"; -import type {TransactionEffect, TransactionData, TransactionGroup, TransactionViewerProps} from "./types.ts"; +import type {TransactionData, TransactionGroup, TransactionViewerProps} from "./types.ts"; import {TransactionItem} from "./TransactionItem.tsx"; // Maximum number of transactions to keep in history diff --git a/test/components/types.ts b/test/components/types.ts index 8a49467..1e0a86c 100644 --- a/test/components/types.ts +++ b/test/components/types.ts @@ -1,4 +1,4 @@ -import type {ViewPlugin} from "@codemirror/view"; +import type {PluginValue, ViewPlugin} from "@codemirror/view"; import type {BlockMetadata} from "../../editor/blocks/BlockMetadata.ts"; export interface BlockData { @@ -9,7 +9,7 @@ export interface BlockData { outputFrom: number | null; outputTo: number | null; hasError: boolean; - attributes: Record; + attributes: Record; } export interface TransactionRange { @@ -30,7 +30,7 @@ export interface TransactionChange { } export interface TransactionEffect { - value: any; + value: unknown; type: string; } @@ -38,7 +38,7 @@ export interface TransactionData { index: number; docChanged: boolean; changes: TransactionChange[]; - annotations: Record; + annotations: Record; effects: TransactionEffect[]; selection: TransactionRange[]; scrollIntoView?: boolean; @@ -53,5 +53,5 @@ export interface TransactionGroup { } export interface TransactionViewerProps { - onPluginCreate: (plugin: ViewPlugin) => void; + onPluginCreate: (plugin: ViewPlugin) => void; } From 2ced0796716064cfca45650cd6ba7a69bc73f0ea Mon Sep 17 00:00:00 2001 From: Luyu Cheng <2239547+chengluyu@users.noreply.github.com> Date: Sun, 14 Dec 2025 15:38:30 +0800 Subject: [PATCH 18/18] Fix type errors and code style --- package.json | 1 + pnpm-lock.yaml | 12 ++++++++++++ test/blocks/affected.spec.ts | 9 ++------- test/components/App.tsx | 6 +++--- test/components/BlockItem.tsx | 2 +- test/components/BlockViewer.tsx | 18 +++++++++--------- test/components/Editor.tsx | 15 +++++++++++---- test/components/TestSelector.tsx | 4 ++-- test/components/TransactionItem.tsx | 2 +- test/components/TransactionViewer.tsx | 2 +- test/main.tsx | 10 +++++----- test/store.ts | 11 ++++------- test/types/css.d.ts | 1 + tsconfig.json | 2 +- 14 files changed, 54 insertions(+), 41 deletions(-) create mode 100644 test/types/css.d.ts diff --git a/package.json b/package.json index 6b2af2a..53e25f9 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "@tailwindcss/postcss": "^4.1.14", "@types/node": "24.10.1", "@types/react": "19.2.6", + "@types/react-dom": "^19.2.3", "@typescript-eslint/eslint-plugin": "^8.49.0", "@typescript-eslint/parser": "^8.49.0", "@vercel/analytics": "^1.6.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e7a90a3..654e951 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -123,6 +123,9 @@ importers: '@types/react': specifier: 19.2.6 version: 19.2.6 + '@types/react-dom': + specifier: ^19.2.3 + version: 19.2.3(@types/react@19.2.6) '@typescript-eslint/eslint-plugin': specifier: ^8.49.0 version: 8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3) @@ -1225,6 +1228,11 @@ packages: '@types/node@24.10.1': resolution: {integrity: sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==} + '@types/react-dom@19.2.3': + resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==} + peerDependencies: + '@types/react': ^19.2.0 + '@types/react@19.2.6': resolution: {integrity: sha512-p/jUvulfgU7oKtj6Xpk8cA2Y1xKTtICGpJYeJXz2YVO2UcvjQgeRMLDGfDeqeRW2Ta+0QNFwcc8X3GH8SxZz6w==} @@ -4757,6 +4765,10 @@ snapshots: dependencies: undici-types: 7.16.0 + '@types/react-dom@19.2.3(@types/react@19.2.6)': + dependencies: + '@types/react': 19.2.6 + '@types/react@19.2.6': dependencies: csstype: 3.2.3 diff --git a/test/blocks/affected.spec.ts b/test/blocks/affected.spec.ts index cc6d353..54c464f 100644 --- a/test/blocks/affected.spec.ts +++ b/test/blocks/affected.spec.ts @@ -71,7 +71,6 @@ describe("findAffectedBlockRange", () => { {from: 5, to: 10}, {from: 12, to: 15}, ]; - const N = blocks.length; expect(findAffectedBlockRange(blocks, 15, 15)).toStrictEqual([1, null]); expect(findAffectedBlockRange(blocks, 16, 16)).toStrictEqual([1, null]); }); @@ -215,10 +214,6 @@ describe("findAffectedBlockRange", () => { }); }); - function overlaps(m: {from: number; to: number}, n: {from: number; to: number}): boolean { - return m.from <= n.to && n.from < m.to; - } - type Location = | {type: "contained"; index: number} | { @@ -269,7 +264,7 @@ describe("findAffectedBlockRange", () => { // Test all valid ranges [from, to) where from <= to for (let from = 0; from <= maxPos + 1; from++) { for (let to = from; to <= maxPos + 1; to++) { - let fromLocation: Location = locateNaive(blocks, from); + const fromLocation = locateNaive(blocks, from); let expected: [number | null, number | null]; if (from === to) { switch (fromLocation.type) { @@ -293,7 +288,7 @@ describe("findAffectedBlockRange", () => { break; } } else { - let toLocation: Location = locateNaive(blocks, to - 1); + const toLocation = locateNaive(blocks, to - 1); let fromIndex: number | null; switch (fromLocation.type) { case "contained": diff --git a/test/components/App.tsx b/test/components/App.tsx index 47aac9a..35d9955 100644 --- a/test/components/App.tsx +++ b/test/components/App.tsx @@ -1,4 +1,4 @@ -import type {ViewPlugin} from "@codemirror/view"; +import type {PluginValue, ViewPlugin} from "@codemirror/view"; import {useAtom} from "jotai"; import {useEffect, useState} from "react"; import {Panel, PanelGroup, PanelResizeHandle} from "react-resizable-panels"; @@ -11,8 +11,8 @@ import {TransactionViewer} from "./TransactionViewer.tsx"; export function App() { const [selectedTest, setSelectedTest] = useAtom(selectedTestAtom); - const [transactionViewerPlugin, setTransactionViewerPlugin] = useState | undefined>(); - const [blockViewerPlugin, setBlockViewerPlugin] = useState | undefined>(); + const [transactionViewerPlugin, setTransactionViewerPlugin] = useState | undefined>(); + const [blockViewerPlugin, setBlockViewerPlugin] = useState | undefined>(); // Initialize from URL on mount useEffect(() => { diff --git a/test/components/BlockItem.tsx b/test/components/BlockItem.tsx index d5b6c85..1c6765c 100644 --- a/test/components/BlockItem.tsx +++ b/test/components/BlockItem.tsx @@ -1,4 +1,4 @@ -import {CircleXIcon, Locate, SquareTerminalIcon, TerminalIcon} from "lucide-react"; +import {CircleXIcon, Locate, SquareTerminalIcon} from "lucide-react"; import {useState} from "react"; import type {BlockData} from "./types.ts"; diff --git a/test/components/BlockViewer.tsx b/test/components/BlockViewer.tsx index 718925e..7826cb9 100644 --- a/test/components/BlockViewer.tsx +++ b/test/components/BlockViewer.tsx @@ -1,12 +1,12 @@ -import {EditorSelection} from "@codemirror/state"; -import {EditorView, ViewPlugin} from "@codemirror/view"; +import {EditorSelection, type Transaction} from "@codemirror/state"; +import {EditorView, ViewPlugin, ViewUpdate, type PluginValue} from "@codemirror/view"; import {useEffect, useRef, useState} from "react"; -import {blockMetadataField} from "../../editor/blockMetadata.ts"; +import {blockMetadataEffect, blockMetadataField} from "../../editor/blockMetadata.ts"; import type {BlockData} from "./types.ts"; import {BlockItem} from "./BlockItem.tsx"; interface BlockViewerProps { - onPluginCreate: (plugin: ViewPlugin) => void; + onPluginCreate: (plugin: ViewPlugin) => void; } export function BlockViewer({onPluginCreate}: BlockViewerProps) { @@ -23,11 +23,11 @@ export function BlockViewer({onPluginCreate}: BlockViewerProps) { listeners.forEach((fn) => fn([...currentBlocks])); } - function extractBlockData(view: any): BlockData[] { + function extractBlockData(view: EditorView): BlockData[] { const blockMetadata = view.state.field(blockMetadataField, false); if (!blockMetadata) return []; - return blockMetadata.map((block: any, index: number) => ({ + return blockMetadata.map((block, index) => ({ name: block.name, index, sourceFrom: block.source.from, @@ -41,17 +41,17 @@ export function BlockViewer({onPluginCreate}: BlockViewerProps) { const plugin = ViewPlugin.fromClass( class { - constructor(view: any) { + constructor(view: EditorView) { viewRef.current = view; currentBlocks = extractBlockData(view); notifyListeners(); } - update(update: any) { + update(update: ViewUpdate) { viewRef.current = update.view; if ( update.docChanged || - update.transactions.some((tr: any) => tr.effects.some((e: any) => e.is(blockMetadataField.init))) + update.transactions.some((tr: Transaction) => tr.effects.some((effect) => effect.is(blockMetadataEffect))) ) { currentBlocks = extractBlockData(update.view); notifyListeners(); diff --git a/test/components/Editor.tsx b/test/components/Editor.tsx index 708952b..a3b204c 100644 --- a/test/components/Editor.tsx +++ b/test/components/Editor.tsx @@ -2,13 +2,13 @@ import {useEffect, useRef, useState} from "react"; import {Play, Square, RefreshCcw} from "lucide-react"; import {createEditor} from "../../editor/index.js"; import {cn} from "../../app/cn.js"; -import type {ViewPlugin} from "@codemirror/view"; +import type {PluginValue, ViewPlugin} from "@codemirror/view"; interface EditorProps { className?: string; code: string; - transactionViewerPlugin?: ViewPlugin; - blockViewerPlugin?: ViewPlugin; + transactionViewerPlugin?: ViewPlugin; + blockViewerPlugin?: ViewPlugin; onError?: (error: Error) => void; } @@ -26,6 +26,13 @@ const onDefaultError = debounce(() => { }, 100); }, 0); +type EditorRuntime = { + run: () => void; + stop: () => void; + on: (event: unknown, callback: () => void) => unknown; + destroy: () => void; +}; + export function Editor({ className, code, @@ -34,7 +41,7 @@ export function Editor({ onError = onDefaultError, }: EditorProps) { const containerRef = useRef(null); - const editorRef = useRef(null); + const editorRef = useRef(null); const [needRerun, setNeedRerun] = useState(false); useEffect(() => { diff --git a/test/components/TestSelector.tsx b/test/components/TestSelector.tsx index 3dcd275..11bbeb1 100644 --- a/test/components/TestSelector.tsx +++ b/test/components/TestSelector.tsx @@ -1,5 +1,5 @@ -import { useAtom } from "jotai"; -import { selectedTestAtom, getTestSampleName } from "../store"; +import {useAtom} from "jotai"; +import {selectedTestAtom, getTestSampleName} from "../store.ts"; import * as testSamples from "../js/index.js"; export function TestSelector() { diff --git a/test/components/TransactionItem.tsx b/test/components/TransactionItem.tsx index fe00c3f..9219d6b 100644 --- a/test/components/TransactionItem.tsx +++ b/test/components/TransactionItem.tsx @@ -113,7 +113,7 @@ export function TransactionItem({transaction: tr}: {transaction: TransactionData {tr.blockMetadata ? (
blockMetadataEffect ({tr.blockMetadata.length} blocks)
- {tr.blockMetadata.map((block: any, blockIdx: number) => ( + {tr.blockMetadata.map((block, blockIdx) => (
Block {blockIdx + 1}:
diff --git a/test/components/TransactionViewer.tsx b/test/components/TransactionViewer.tsx index bb8737b..a7c44a6 100644 --- a/test/components/TransactionViewer.tsx +++ b/test/components/TransactionViewer.tsx @@ -90,7 +90,7 @@ export function TransactionViewer({onPluginCreate}: TransactionViewerProps) { const plugin = ViewPlugin.fromClass( class { - constructor(view: any) { + constructor() { notifyListeners(); } diff --git a/test/main.tsx b/test/main.tsx index bb9e3e9..31df8df 100644 --- a/test/main.tsx +++ b/test/main.tsx @@ -1,7 +1,7 @@ -import { StrictMode } from "react"; -import { createRoot } from "react-dom/client"; -import { Provider as JotaiProvider } from "jotai"; -import { App } from "./components/App"; +import {StrictMode} from "react"; +import {createRoot} from "react-dom/client"; +import {Provider as JotaiProvider} from "jotai"; +import {App} from "./components/App.tsx"; import "./styles.css"; const root = document.getElementById("root"); @@ -14,5 +14,5 @@ createRoot(root).render( - + , ); diff --git a/test/store.ts b/test/store.ts index 70c6836..276f1a1 100644 --- a/test/store.ts +++ b/test/store.ts @@ -1,10 +1,10 @@ -import { atom } from "jotai"; +import {atom} from "jotai"; // Types export interface Transaction { time: number; docChanged: boolean; - selection: { from: number; to: number } | null; + selection: {from: number; to: number} | null; effects: string[]; annotations: string[]; } @@ -23,7 +23,7 @@ export const autoScrollAtom = atom(true); export function createTransaction(data: { time: number; docChanged: boolean; - selection: { from: number; to: number } | null; + selection: {from: number; to: number} | null; effects: string[]; annotations: string[]; }): Transaction { @@ -36,10 +36,7 @@ export function createTransaction(data: { }; } -export function addTransaction( - history: Transaction[], - transaction: Transaction -): Transaction[] { +export function addTransaction(history: Transaction[], transaction: Transaction): Transaction[] { const newHistory = [...history, transaction]; // Keep max 100 transactions if (newHistory.length > 100) { diff --git a/test/types/css.d.ts b/test/types/css.d.ts new file mode 100644 index 0000000..ef6d741 --- /dev/null +++ b/test/types/css.d.ts @@ -0,0 +1 @@ +declare module "*.css" {} diff --git a/tsconfig.json b/tsconfig.json index c72a67b..6df60f3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,7 +20,7 @@ "declaration": true, "declarationMap": true, // Stricter Typechecking Options - "noUncheckedIndexedAccess": true, + // "noUncheckedIndexedAccess": true, // "exactOptionalPropertyTypes": true, // Style Options // "noImplicitReturns": true,