@motionscript/code 0.1.0-alpha.0 → 0.1.0-alpha.3

package/src/node.ts

@@ -2,9 +2,9 @@ import {
     node,
     RenderContext2D, RenderPass2D, Clip, EasingFunction, NodeConfig, Size2D, SizeConstraints,
     Node2D, Node2DProps, MeasureContext2D, InsetsResolved, InsetsProps,
-    property, insetsOps, lerpNumber,
+    property, insetsProperty, lerpNumber,
     command, driveCommand, type AssetScope, type Command, type CommandArgs, type Node, type TweenStepper, type Vector2,
-} from "@motionscript/core";
+} from "@motionscript/sdk";
 import {
     CodeRange,
     rangeToCharOffsets,
@@ -101,11 +101,13 @@ export class Code extends Node2D<CodeProps> {
     // in space-widths (so it scales with fontSize). Only applies when
     // showLineNumbers is on.
     @property({ default: 2 }) declare readonly lineNumberGap: number;
-    @property({ default: 0, mapper: insetsOps.resolve, tween: insetsOps.lerp }) declare readonly padding: InsetsResolved;
+    @insetsProperty() declare readonly padding: InsetsResolved;
 
     /** The settled structure. During an edit, the structure the edit lands on. */
     private tokenLines: IdLine[] = [];
     private tokenized: boolean = false;
+    /** The source `tokenLines` spells, so a frame compares it with `code` without joining every token. */
+    private _linesSource: string = "";
 
     private transitions: CodeTransition[] = [];
 
@@ -140,6 +142,7 @@ export class Code extends Node2D<CodeProps> {
         this.phaseStrategy = props.phaseStrategy ?? defaultCodePhases;
         this.applyProp("width", props.width ?? "hug");
         this.applyProp("height", props.height ?? "hug");
+        this.applyProp("_driven", false);
 
         // Best-effort, for a highlighter constructed outside the asset pipeline
         // entirely (a bare `new Code(...)` in a test or a headless measure). On
@@ -159,7 +162,7 @@ export class Code extends Node2D<CodeProps> {
     }
 
     private tokenize(): void {
-        this.setLines(tokenizeCodeToIdLines(this.code, this.language, this.theme));
+        this.setLines(this._structureFor(this.code), this.code);
         // Only consider ourselves tokenized once we actually highlighted; while
         // the language is still loading we keep retrying on each render.
         this.tokenized = canHighlight(this.language, this.theme);
@@ -172,9 +175,10 @@ export class Code extends Node2D<CodeProps> {
      * counter rather than a hash of the content — a write that skipped the bump
      * would keep serving the previous frame's geometry for the new listing.
      */
-    private setLines(lines: IdLine[]): void {
+    private setLines(lines: IdLine[], source: string): void {
         if (this.tokenLines === lines) return;
         this.tokenLines = lines;
+        this._linesSource = source;
         this.structureVersion++;
         this.layoutCache = null;
         this.layoutCacheKey = null;
@@ -263,6 +267,7 @@ export class Code extends Node2D<CodeProps> {
     }
 
     override measure(constraints: SizeConstraints, scope: MeasureContext2D): Partial<Size2D> {
+        this._sync();
         this.advanceCache.sync(this.advanceCache.signature(this.fontSize, this.fontFamily));
         const wm = this.width;
         const hm = this.height;
@@ -302,6 +307,7 @@ export class Code extends Node2D<CodeProps> {
         // column-by-column rather than merely look different.
         ctx.pushTextStyle(null);
         try {
+            this._sync();
             // Keep retrying until the language+theme have actually loaded, so a frame
             // that rendered as plain text upgrades to full highlighting the moment the
             // asset loader resolves. Never mid-edit: re-tokenizing mints fresh ids,
@@ -359,6 +365,7 @@ export class Code extends Node2D<CodeProps> {
      * silhouette measured against stale metrics.
      */
     protected override hitTestSelf(local: Vector2, tolerance: number): boolean {
+        this._sync();
         const layout = this.hitLayout();
         if (!layout) return super.hitTestSelf(local, tolerance);
 
@@ -409,6 +416,7 @@ export class Code extends Node2D<CodeProps> {
      */
     @command({ args: [{ key: "code", kind: "text", multiline: true }] })
     append(args: CommandArgs<{ code: string }> & { duration: number }): Command<Record<string, never>> {
+        this._sync();
         const { code } = args.data as { code: string };
         return this.editTo(this.joinedSource() + code, args.duration, args.easing);
     }
@@ -416,6 +424,7 @@ export class Code extends Node2D<CodeProps> {
     /** Insert `code` above the listing. */
     @command({ args: [{ key: "code", kind: "text", multiline: true }] })
     prepend(args: CommandArgs<{ code: string }> & { duration: number }): Command<Record<string, never>> {
+        this._sync();
         const { code } = args.data as { code: string };
         return this.editTo(code + this.joinedSource(), args.duration, args.easing);
     }
@@ -443,6 +452,7 @@ export class Code extends Node2D<CodeProps> {
     insert(
         args: CommandArgs<{ position: [number, number]; code: string }> & { duration: number },
     ): Command<Record<string, never>> {
+        this._sync();
         const { position, code } = args.data as { position: [number, number]; code: string };
         const source = this.joinedSource();
         const offset = this.offsetAt(position);
@@ -465,6 +475,7 @@ export class Code extends Node2D<CodeProps> {
     erase(
         args: CommandArgs<{ target: CodeRange }> & { duration: number },
     ): Command<Record<string, never>> {
+        this._sync();
         const { target: codeRange } = args.data as { target: CodeRange };
         const { duration, easing } = args;
         const source = this.joinedSource();
@@ -491,6 +502,7 @@ export class Code extends Node2D<CodeProps> {
     replace(
         args: CommandArgs<{ target: CodeRange; replacement: string }> & { duration: number },
     ): Command<Record<string, never>> {
+        this._sync();
         const { target: codeRange, replacement } = args.data as { target: CodeRange; replacement: string };
         const source = this.joinedSource();
         const { start, end } = rangeToCharOffsets(codeRange, this.lineLengths());
@@ -508,6 +520,7 @@ export class Code extends Node2D<CodeProps> {
     highlight(
         args: CommandArgs<{ target: CodeRange | Iterable<CodeRange>; dim?: number }> & { duration: number },
     ): Command<Record<string, never>> {
+        this._sync();
         const { target: codeRange, dim } = args.data as { target: CodeRange | Iterable<CodeRange>; dim?: number };
         const { duration, easing } = args;
         const toDim = dim ?? 0.4;
@@ -545,6 +558,7 @@ export class Code extends Node2D<CodeProps> {
      */
     @command()
     resetHighlight(args: CommandArgs<Record<string, never>> & { duration: number }): Command<Record<string, never>> {
+        this._sync();
         const { duration, easing } = args;
         if (this.highlightDimOpacity === null) return driveCommand(duration, () => { });
 
@@ -610,6 +624,7 @@ export class Code extends Node2D<CodeProps> {
         this.tokenized = canHighlight(this.language, this.theme);
 
         return driveCommand(duration, (t) => {
+            this._drive();
             const running = t > 0 && t < 1;
             const index = this.transitions.indexOf(transition);
             if (running && index < 0) this.transitions.push(transition);
@@ -621,10 +636,10 @@ export class Code extends Node2D<CodeProps> {
             // starts, the listing is what preceded it; at or past the end, the
             // result. A `finally` could only ever have run forwards.
             if (t <= 0) {
-                this.setLines(from);
+                this.setLines(from, fromCode);
                 this._writeProp("code", fromCode);
             } else {
-                this.setLines(edit.lines);
+                this.setLines(edit.lines, next);
                 this._writeProp("code", next);
             }
         });
@@ -648,6 +663,7 @@ export class Code extends Node2D<CodeProps> {
         const transition = { kind: "dim" as const, tokens, progress: 0 };
 
         return driveCommand(duration, (t) => {
+            this._drive();
             const running = t > 0 && t < 1;
             const index = this.transitions.indexOf(transition);
             if (running && index < 0) this.transitions.push(transition);
@@ -672,6 +688,7 @@ export class Code extends Node2D<CodeProps> {
         duration: number,
         easing?: EasingFunction,
     ): TweenStepper {
+        this._sync();
         const next = to.code;
         if (typeof next !== "string" || next === this.joinedSource()) {
             return super._prepareStep(to, duration, easing);
@@ -707,6 +724,7 @@ export class Code extends Node2D<CodeProps> {
     findAllRanges(text: string): CodeRange[] {
         const ranges: CodeRange[] = [];
         if (!text) return ranges;
+        this._sync();
         const source = this.joinedSource();
         const lineLens = this.lineLengths();
         let from = 0;
@@ -731,9 +749,7 @@ export class Code extends Node2D<CodeProps> {
     }
 
     private joinedSource(): string {
-        return this.tokenLines
-            .map(line => line.tokens.map(t => t.content).join(''))
-            .join('\n');
+        return this._linesSource;
     }
 
     private lineLengths(): number[] {
@@ -802,8 +818,62 @@ export class Code extends Node2D<CodeProps> {
             highlightActive: this.highlightDimOpacity !== null || this.transitions.some(tr => tr.kind === "dim"),
         });
     }
+
+    /**
+     * Whether a listing command has applied since the timeline last restored the
+     * props.
+     *
+     * A slot rather than a field because slots are all a restore puts back. The
+     * structure, highlight and transitions live outside the props, and only a
+     * command that has started writes them, so before the first one starts (or
+     * after a seek back past it) they still hold whatever the last evaluation
+     * left — the end of every command, after compile. This reads false again
+     * there, and `_sync` derives them from the props instead.
+     */
+    declare private readonly _driven: boolean;
+
+    /** Each source the props have named, tokenized once, so a listing derived again keeps the ids a highlight selected. */
+    private readonly _derived = new Map<string, { language: string; theme: CodeTheme; highlighted: boolean; lines: IdLine[] }>();
+
+    /** The first command to apply after a restore starts from the props' listing. */
+    private _drive(): void {
+        this._sync();
+        this._writeProp("_driven", true);
+    }
+
+    private _sync(): void {
+        if (!this._driven) {
+            this.transitions.length = 0;
+            this.highlightDimOpacity = null;
+            if (this.highlightedIds.size > 0) this.highlightedIds = new Set();
+            this.setLines(this._structureFor(this.code), this.code);
+        } else if (this._linesSource !== this.code && !this.activeEdit()) {
+            // A `set` or a binding moved `code` outside a listing command.
+            this.setLines(this._structureFor(this.code), this.code);
+        }
+    }
+
+    private _structureFor(code: string): IdLine[] {
+        const highlighted = canHighlight(this.language, this.theme);
+        let entry = this._derived.get(code);
+        if (!entry || entry.language !== this.language || entry.theme !== this.theme || entry.highlighted !== highlighted) {
+            entry = {
+                language: this.language,
+                theme: this.theme,
+                highlighted,
+                lines: tokenizeCodeToIdLines(code, this.language, this.theme),
+            };
+            this._derived.delete(code);
+            this._derived.set(code, entry);
+            if (this._derived.size > DERIVED_LISTINGS) this._derived.delete(this._derived.keys().next().value as string);
+        }
+        return entry.lines;
+    }
 }
 
+/** Sources a node keeps tokenized, oldest dropped first; a bound `code` can name any number of them. */
+const DERIVED_LISTINGS = 16;
+
 /**
  * Normalize `highlight()`'s `codeRange` argument to a plain array: a single
  * `CodeRange` (a plain object, not iterable) becomes a one-element array; a

package/src/render.ts

@@ -1,4 +1,4 @@
-import { RenderContext2D, Graphics2D, NormalizedColor, parseColor, lerpNumber } from "@motionscript/core";
+import { RenderContext2D, Graphics2D, NormalizedColor, parseColor, lerpNumber } from "@motionscript/sdk";
 import type { CodeLayout, CodeMetrics } from "./layout";
 import type { IdLine } from "./tokens";
 import { windowProgress, moveProgress } from "./transitions";