@nocturnium/svelte-ide 1.2.1 → 1.3.0

package/dist/components/editor/CustomEditor.svelte

@@ -7,7 +7,9 @@
 		createKeyboardHandler,
 		createDefaultKeybindings,
 		createFoldManager,
+		extractFunctionAt,
 		type EditorState,
+		type ExtractFunctionResult,
 		type Selection,
 		type SearchMatch,
 		type FoldManager,
@@ -590,6 +592,21 @@
 		hiddenInput?.focus();
 	}
 
+	/**
+	 * Extract the current selection into a new function (Track H). Analyzes the
+	 * current content fresh (not the debounced complexityMetrics, which can lag a
+	 * recent edit) so the enclosing region is always correct, regardless of the
+	 * complexityHighlighting prop. The edit is applied as a single undo step; on
+	 * refusal the editor is untouched. Returns the result so callers can surface
+	 * the reason.
+	 */
+	export function extractFunction(): ExtractFunctionResult {
+		const metrics = complexityAnalyzer.analyze(editorState.lines, language);
+		const result = extractFunctionAt(editorState, metrics);
+		announce(result.ok ? 'Extracted function' : result.reason);
+		return result;
+	}
+
 	function handleFoldIndicatorClick(lineNumber: number, e: MouseEvent) {
 		e.preventDefault();
 		e.stopPropagation();

package/dist/components/editor/CustomEditor.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { EditorPreferences } from '../../types';
-import { type Cursor } from './core';
+import { type ExtractFunctionResult, type Cursor } from './core';
 import { type ComplexityMetrics, type ComplexityRegion } from './core/complexity-analyzer';
 import { type FoldPreset } from './core/semantic-analyzer';
 import type { AIAwareness } from './core/ai-awareness';
@@ -38,6 +38,7 @@ declare const CustomEditor: import("svelte").Component<Props, {
     unfoldAll: () => void;
     flashComplexityRegion: (region: ComplexityRegion) => void;
     scrollToLine: (line: number, region?: ComplexityRegion) => Promise<void>;
+    extractFunction: () => ExtractFunctionResult;
 }, "content">;
 type CustomEditor = ReturnType<typeof CustomEditor>;
 export default CustomEditor;

package/dist/components/editor/core/apply-extract-plan.d.ts

@@ -0,0 +1,26 @@
+import type { EditorState } from './state';
+import { type ExtractPlan, type ExtractRefusal } from './extract-function';
+import type { ComplexityMetrics, ComplexityRegion } from './complexity-analyzer';
+export type ExtractFunctionResult = {
+    ok: true;
+} | ExtractRefusal;
+/**
+ * Find the innermost enclosing region whose [startLine, endLine] (0-based,
+ * inclusive) contains the block. Prefers `function` regions; ties are broken by
+ * the smallest span. Returns undefined when no region encloses the block.
+ */
+export declare function findEnclosingFunctionRegion(metrics: ComplexityMetrics | null, blockStart: number, blockEnd: number): ComplexityRegion | undefined;
+/**
+ * Apply a successful ExtractPlan to a live editor as a SINGLE undo step. Edits
+ * are issued bottom-up: the new function is inserted AFTER the enclosing
+ * function first (it sits below the block, so the block's line numbers stay
+ * valid), then the block is replaced by the call at its original indentation.
+ */
+export declare function applyExtractPlan(editor: EditorState, plan: ExtractPlan, blockStart: number, blockEnd: number): void;
+/**
+ * Extract the editor's current line selection into a new function. Finds the
+ * enclosing function from the complexity metrics, runs the (pure) planner, and
+ * either applies the plan or returns the planner's refusal so the caller can
+ * surface the reason to the user.
+ */
+export declare function extractFunctionAt(editor: EditorState, metrics: ComplexityMetrics | null): ExtractFunctionResult;

package/dist/components/editor/core/apply-extract-plan.js

@@ -0,0 +1,151 @@
+import { planExtractFunction } from './extract-function';
+import { tokenize } from '../tokenizer';
+// Tokens after which a `{` opens an object literal (a value position) rather than
+// a statement block.
+const OBJECT_LITERAL_PRECEDERS = new Set([
+    '=',
+    '(',
+    '[',
+    ',',
+    ':',
+    'return',
+    '=>',
+    '?',
+    '&&',
+    '||',
+    '??',
+    '!'
+]);
+/**
+ * Would the new function — inserted as a sibling after `insertAfterLine` — land
+ * inside a container where a `function` declaration is NOT valid (a class body,
+ * or an object/array literal)? The applier writes a bare `function extracted()`
+ * there, which is a SyntaxError, so the orchestration refuses these. Scans the
+ * brace nesting through the insertion line, classifying each `{` as a class
+ * body, object literal, or statement block.
+ */
+function insertionInNonFunctionContainer(lines, language, insertAfterLine) {
+    const source = lines
+        .slice(0, insertAfterLine + 1)
+        .map((line) => line.text)
+        .join('\n');
+    const tokens = tokenize(source, language)
+        .flatMap((line) => line.tokens)
+        .filter((t) => {
+        if (t.type === 'text')
+            return t.text.trim().length > 0;
+        if (t.type === 'comment' || t.type.startsWith('comment.'))
+            return false;
+        if (t.type === 'string' || t.type.startsWith('string.'))
+            return false;
+        return true;
+    });
+    const stack = [];
+    let prev = '';
+    let pendingClass = false;
+    for (const t of tokens) {
+        const text = t.text;
+        if (text === 'class' && t.type.startsWith('keyword')) {
+            pendingClass = true;
+        }
+        else if (text === '{') {
+            stack.push(pendingClass ? 'class' : OBJECT_LITERAL_PRECEDERS.has(prev) ? 'object' : 'block');
+            pendingClass = false;
+        }
+        else if (text === '}') {
+            stack.pop();
+        }
+        else if (text === '[') {
+            stack.push('object'); // array/computed literal is not a statement container
+        }
+        else if (text === ']') {
+            stack.pop();
+        }
+        prev = text;
+    }
+    const top = stack[stack.length - 1];
+    return top === 'object' || top === 'class';
+}
+/**
+ * Find the innermost enclosing region whose [startLine, endLine] (0-based,
+ * inclusive) contains the block. Prefers `function` regions; ties are broken by
+ * the smallest span. Returns undefined when no region encloses the block.
+ */
+export function findEnclosingFunctionRegion(metrics, blockStart, blockEnd) {
+    if (!metrics)
+        return undefined;
+    const containing = metrics.regions.filter((r) => r.startLine <= blockStart && blockEnd <= r.endLine);
+    if (containing.length === 0)
+        return undefined;
+    const functions = containing.filter((r) => r.type === 'function');
+    const pool = functions.length > 0 ? functions : containing;
+    return pool.reduce((best, r) => r.endLine - r.startLine < best.endLine - best.startLine ? r : best);
+}
+/**
+ * Apply a successful ExtractPlan to a live editor as a SINGLE undo step. Edits
+ * are issued bottom-up: the new function is inserted AFTER the enclosing
+ * function first (it sits below the block, so the block's line numbers stay
+ * valid), then the block is replaced by the call at its original indentation.
+ */
+export function applyExtractPlan(editor, plan, blockStart, blockEnd) {
+    // Geometry captured from the pre-edit document.
+    const indent = editor.getLine(blockStart)?.text.match(/^[ \t]*/)?.[0] ?? '';
+    const insertLine = plan.insertAfterLine;
+    const insertCol = editor.getLine(insertLine)?.text.length ?? 0;
+    const blockEndCol = editor.getLine(blockEnd)?.text.length ?? 0;
+    const callText = indent + plan.callText;
+    editor.transact((tx) => {
+        // 1. New function after the enclosing function's last line.
+        tx.insert({ line: insertLine, column: insertCol }, `\n${plan.functionText}`);
+        // 2. Remove the block's text — the lines collapse to one empty line at blockStart.
+        tx.delete({ line: blockStart, column: 0 }, { line: blockEnd, column: blockEndCol });
+        // 3. Drop in the call at the block's original indent.
+        tx.insert({ line: blockStart, column: 0 }, callText);
+    });
+    // Caret at the end of the new call.
+    editor.setCursor({ line: blockStart, column: callText.length });
+}
+/**
+ * Extract the editor's current line selection into a new function. Finds the
+ * enclosing function from the complexity metrics, runs the (pure) planner, and
+ * either applies the plan or returns the planner's refusal so the caller can
+ * surface the reason to the user.
+ */
+export function extractFunctionAt(editor, metrics) {
+    if (!editor.hasSelection) {
+        return { ok: false, reason: 'Select a block of statements to extract.' };
+    }
+    const { start, end } = editor.normalizedSelection;
+    const blockStart = start.line;
+    // A selection ending at column 0 of a later line covers the full lines above it.
+    const blockEnd = end.column === 0 && end.line > start.line ? end.line - 1 : end.line;
+    const region = findEnclosingFunctionRegion(metrics, blockStart, blockEnd);
+    if (!region) {
+        return { ok: false, reason: 'Place the selection inside a function to extract from.' };
+    }
+    // The applier inserts the new function as a sibling after the enclosing
+    // function's last line. The analyzer types class/object methods as `function`
+    // too, so that insertion can land inside a class body or object/array literal,
+    // where a bare `function extracted()` is a SyntaxError. Refuse rather than
+    // miswrite until method extraction is supported. (The region-based class check
+    // is kept as defense-in-depth alongside the brace-context scan.)
+    const inClassRegion = metrics?.regions.some((r) => r !== region &&
+        r.type === 'class' &&
+        r.startLine <= region.startLine &&
+        region.endLine <= r.endLine);
+    if (inClassRegion ||
+        insertionInNonFunctionContainer(editor.lines, editor.language, region.endLine)) {
+        return { ok: false, reason: 'Extracting from a class or object method is not supported yet.' };
+    }
+    const plan = planExtractFunction({
+        lines: editor.lines.map((line) => ({ text: line.text })),
+        language: editor.language,
+        region: { startLine: region.startLine, endLine: region.endLine, type: region.type },
+        blockStart,
+        blockEnd
+    });
+    if (!plan.ok)
+        return plan;
+    applyExtractPlan(editor, plan, blockStart, blockEnd);
+    return { ok: true };
+}

package/dist/components/editor/core/extract-function.js

@@ -123,7 +123,16 @@ function planExtractFunctionUnsafe(input) {
         return { ok: false, reason: 'Could not safely determine the block inputs and outputs.' };
     }
     for (const decl of insideDeclarations) {
-        if (usedAfterB.has(decl.name) && decl.depth > 0) {
+        // A name declared at depth > 0 inside the block and used after it is only
+        // conditionally defined — extracting it would drop the after-use's binding.
+        // The ONE safe exception is a nested arrow/catch/function PARAM that merely
+        // shadows an outer var (params are excluded from outputs, and the after-use
+        // resolves to the always-defined outer binding). A real lexical
+        // let/const/for-of declaration that shadows an outer name is NOT safe: it
+        // becomes a declared return and the call site emits a duplicate `const`.
+        if (usedAfterB.has(decl.name) &&
+            decl.depth > 0 &&
+            !(decl.kind === 'param' && declaredBeforeB.has(decl.name))) {
             return {
                 ok: false,
                 reason: 'A variable used after the block is only conditionally defined inside it.'
@@ -142,6 +151,18 @@ function planExtractFunctionUnsafe(input) {
     const returnNames = returns.map((item) => item.name);
     const declaredReturnNames = new Set(returnNames.filter((name) => declaredInsideB.has(name)));
     const outerReturnNames = returnNames.filter((name) => !declaredInsideB.has(name));
+    // A `const`-emitted return (a name declared inside the block) that ALSO has an
+    // outer binding before the block would write a duplicate `const <name>` at the
+    // call site (SyntaxError). This is depth-independent, so it covers the
+    // for-/while-header lexical declarations the brace-depth guard above cannot see
+    // (a `for (const v of …)` binding sits before the loop body brace).
+    const duplicateConstReturn = [...declaredReturnNames].find((name) => declaredBeforeB.has(name));
+    if (duplicateConstReturn) {
+        return {
+            ok: false,
+            reason: 'A variable declared in the block shadows an outer variable used after it.'
+        };
+    }
     if (returnNames.length > 1 && outerReturnNames.length > 0) {
         return {
             ok: false,
@@ -633,7 +654,13 @@ function isIdentifierUse(tokens, index) {
     return true;
 }
 function getAssignments(tokens, declarations) {
-    const assigned = declarations.map((decl) => ({
+    // Seed with the block's own let/const/var/function declarations (a declared
+    // value used after the block is a return). Nested fn/arrow/catch params are
+    // NOT outputs — they're bindings scoped to their construct; a real assignment
+    // to one is still picked up by the operator scan below.
+    const assigned = declarations
+        .filter((decl) => decl.kind !== 'param')
+        .map((decl) => ({
         name: decl.name,
         line: decl.line,
         col: decl.col,
@@ -677,6 +704,12 @@ function identifierInIncrement(tokens, index) {
     if (!areAdjacent(first, second))
         return undefined;
     const previous = tokens[index - 1];
+    // A run of 3+ identical operators (e.g. `a+++b` is `a++ + b`) yields overlapping
+    // pairs; only the run's leading pair is a real increment. Skip a pair whose
+    // previous token is the same operator adjacent to it, so the trailing operand
+    // (`b`) is never spuriously modeled as a mutation target.
+    if (previous && previous.text === first.text && areAdjacent(previous, first))
+        return undefined;
     const next = tokens[index + 2];
     const target = isIdentifierToken(previous)
         ? previous

package/dist/components/editor/core/index.d.ts

@@ -18,5 +18,6 @@ export * from './quick-actions';
 export * from './diagnostics';
 export * from './breakpoints';
 export * from './extract-function';
+export * from './apply-extract-plan';
 export type { Position } from './state';
 export type { Diagnostic, Range } from './quick-actions';

package/dist/components/editor/core/index.js

@@ -22,3 +22,4 @@ export * from './quick-actions';
 export * from './diagnostics';
 export * from './breakpoints';
 export * from './extract-function';
+export * from './apply-extract-plan';

package/dist/components/editor/core/state.d.ts

@@ -25,6 +25,16 @@ export interface Selection {
     /** End of selection (head/cursor position) */
     head: Position;
 }
+/**
+ * Primitive edits available inside {@link EditorState.transact}. Every insert
+ * and delete is folded into a single undo step.
+ */
+export interface EditorTransaction {
+    /** Insert text at a position; returns the position after the inserted text. */
+    insert(position: Position, text: string): Position;
+    /** Delete the range [from, to) (end exclusive). */
+    delete(from: Position, to: Position): void;
+}
 /**
  * A single line in the document
  */
@@ -271,6 +281,15 @@ export declare class EditorState {
      * Insert text at all cursor positions
      */
     insert(text: string): void;
+    /**
+     * Run several primitive edits as ONE undoable transaction. Inserts/deletes
+     * performed via the provided `tx` are folded into a single history entry, so
+     * one undo reverts the whole change and one redo reapplies it. Used by
+     * multi-edit refactors such as extract-function. Emits a single content +
+     * selection + cursor change after the body so subscribers (and `bind:content`)
+     * update once.
+     */
+    transact(fn: (tx: EditorTransaction) => void): void;
     /**
      * Insert text at a specific position (internal, doesn't update cursor)
      * @returns New position after insert

package/dist/components/editor/core/state.js

@@ -376,6 +376,30 @@ export class EditorState {
         this.emitCursorChange();
         this.commitHistory(history, 'insert');
     }
+    /**
+     * Run several primitive edits as ONE undoable transaction. Inserts/deletes
+     * performed via the provided `tx` are folded into a single history entry, so
+     * one undo reverts the whole change and one redo reapplies it. Used by
+     * multi-edit refactors such as extract-function. Emits a single content +
+     * selection + cursor change after the body so subscribers (and `bind:content`)
+     * update once.
+     */
+    transact(fn) {
+        // Force a fresh, isolated history entry: don't merge into prior typing, and
+        // (after commit) don't let the next keystroke merge into this one.
+        this.lastHistoryType = null;
+        const history = this.beginHistory('insert');
+        fn({
+            insert: (position, text) => this.insertAtInternal(position, text, history.entry.changes),
+            delete: (from, to) => this.deleteRangeInternal(from, to, history.entry.changes)
+        });
+        // The internal primitives don't move cursors; clamp the primary so it stays
+        // valid against the new content (callers may set a more precise position).
+        this.setCursor(this.clampPosition(this.selection.head));
+        this.emitChange({ type: 'replace', from: { line: 0, column: 0 } });
+        this.commitHistory(history, 'insert');
+        this.lastHistoryType = null;
+    }
     /**
      * Insert text at a specific position (internal, doesn't update cursor)
      * @returns New position after insert

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nocturnium/svelte-ide",
-	"version": "1.2.1",
+	"version": "1.3.0",
 	"description": "Svelte 5 code editor and IDE building blocks — custom editor, syntax highlighting, code folding, multi-cursor, LSP client, and optional realtime collaboration.",
 	"author": "Nocturnium & Jordan Dziat <hello@nocturnium.ai> (https://nocturnium.ai)",
 	"license": "MIT",
@@ -142,6 +142,7 @@
 		"@sveltejs/vite-plugin-svelte": "^5.1.0",
 		"@tailwindcss/vite": "^4.1.0",
 		"@types/node": "^22.15.0",
+		"acorn": "^8.16.0",
 		"eslint": "^9.39.0",
 		"eslint-plugin-svelte": "^3.9.0",
 		"globals": "^16.2.0",