@vectojs/markdown 0.1.1 → 0.1.2

package/dist/Markdown.d.ts

@@ -37,6 +37,8 @@ export interface MarkdownTheme {
 export declare class CodeBlock extends UIComponent {
     private lines;
     private grid;
+    /** Raw (unhighlighted) lines of the last build, for prefix reuse in buildLines. */
+    private rawLines;
     private cellWidth;
     private source;
     private lang;
@@ -51,6 +53,18 @@ export declare class CodeBlock extends UIComponent {
     /** Enable or disable browser-native selection for this code block. */
     setSelectable(selectable: boolean): this;
     getContentProjection(): ContentProjection | null;
+    /**
+     * Re-highlight the code, reusing the highlight of any unchanged line prefix.
+     *
+     * Streaming appends to the END of a block, so all but the last line or two are
+     * byte-identical to the previous call — yet this used to re-highlight every
+     * line on every chunk, making a streamed block O(N) per append and O(N^2)
+     * overall. Reusing the stable prefix makes an append proportional to what
+     * actually changed.
+     *
+     * The last previously-seen line is deliberately NOT reused: a chunk usually
+     * lands mid-line, so that line's text (and therefore its tokenization) changes.
+     */
     private buildLines;
     private ensureGrid;
     /** Code blocks are decorative — not interactive. */

package/dist/index.js

@@ -438,6 +438,8 @@ function highlightLine(line, lang, theme) {
 var CodeBlock = class extends import_ui.UIComponent {
   lines;
   grid = null;
+  /** Raw (unhighlighted) lines of the last build, for prefix reuse in buildLines. */
+  rawLines = null;
   cellWidth = 0;
   source;
   lang;
@@ -497,9 +499,36 @@ var CodeBlock = class extends import_ui.UIComponent {
       grid
     };
   }
+  /**
+   * Re-highlight the code, reusing the highlight of any unchanged line prefix.
+   *
+   * Streaming appends to the END of a block, so all but the last line or two are
+   * byte-identical to the previous call — yet this used to re-highlight every
+   * line on every chunk, making a streamed block O(N) per append and O(N^2)
+   * overall. Reusing the stable prefix makes an append proportional to what
+   * actually changed.
+   *
+   * The last previously-seen line is deliberately NOT reused: a chunk usually
+   * lands mid-line, so that line's text (and therefore its tokenization) changes.
+   */
   buildLines(code) {
     const rawLines = code.split(/\r\n|\r|\n/);
-    this.lines = rawLines.map((l) => highlightLine(l, this.lang, this.theme));
+    const previous = this.rawLines;
+    let reusable = 0;
+    if (previous && this.lines.length === previous.length) {
+      const limit = Math.min(previous.length - 1, rawLines.length);
+      while (reusable < limit && previous[reusable] === rawLines[reusable]) reusable++;
+    }
+    if (reusable > 0) {
+      const next = this.lines.slice(0, reusable);
+      for (let i = reusable; i < rawLines.length; i++) {
+        next.push(highlightLine(rawLines[i], this.lang, this.theme));
+      }
+      this.lines = next;
+    } else {
+      this.lines = rawLines.map((l) => highlightLine(l, this.lang, this.theme));
+    }
+    this.rawLines = rawLines;
     this.grid = null;
     this.height = this.pad * 2 + rawLines.length * this.lineH;
   }
@@ -831,7 +860,7 @@ var Markdown = class extends import_ui.UIComponent {
         this.pendingWorkerIds.delete(id);
         this.appendInFlight = false;
         const newTokens = [...oldTokensSnapshot.slice(0, matchLen), ...tail];
-        this.updateTokens(newTokens);
+        this.updateTokens(newTokens, matchLen);
         if (this.appendPending) {
           this.appendPending = false;
           this.dispatchAppend();
@@ -855,21 +884,35 @@ var Markdown = class extends import_ui.UIComponent {
       ...sendRaws ? { oldRaws: oldTokensSnapshot.map((t) => t.raw) } : {}
     });
   }
-  updateTokens(newTokens) {
+  updateTokens(newTokens, knownMatchLen) {
     const oldTokens = this.tokens;
     const oldChildren = [...this.content.children];
-    let matchLen = 0;
+    let matchLen;
     const minLen = Math.min(oldTokens.length, newTokens.length);
-    for (let i = 0; i < minLen; i++) {
-      if (oldTokens[i].raw === newTokens[i].raw) {
-        matchLen++;
-      } else {
-        break;
+    if (knownMatchLen !== void 0 && knownMatchLen >= 0 && knownMatchLen <= minLen) {
+      matchLen = knownMatchLen;
+    } else {
+      matchLen = 0;
+      for (let i = 0; i < minLen; i++) {
+        if (oldTokens[i].raw === newTokens[i].raw) {
+          matchLen++;
+        } else {
+          break;
+        }
       }
     }
     const oldTokenToChild = this.tokenChildPrefix;
     const rawMatchLen = matchLen;
-    if (matchLen === oldTokens.length - 1 && matchLen < newTokens.length && oldTokens[matchLen]?.type === newTokens[matchLen]?.type && newTokens[matchLen]?.type === "paragraph") {
+    const lastTokenSameType = matchLen === oldTokens.length - 1 && matchLen < newTokens.length && oldTokens[matchLen]?.type === newTokens[matchLen]?.type;
+    if (lastTokenSameType && newTokens[matchLen]?.type === "code") {
+      const existingEntity = oldChildren[oldTokenToChild[matchLen]];
+      const codeToken = newTokens[matchLen];
+      if (existingEntity instanceof CodeBlock) {
+        existingEntity.setCode(codeToken.text, codeToken.lang ?? void 0);
+        matchLen++;
+        this.content.resizeLastChild(existingEntity);
+      }
+    } else if (lastTokenSameType && newTokens[matchLen]?.type === "paragraph") {
       const entityIdx = oldTokenToChild[matchLen];
       const existingEntity = oldChildren[entityIdx];
       if (existingEntity && "setSpans" in existingEntity) {

package/dist/index.mjs

@@ -416,6 +416,8 @@ function highlightLine(line, lang, theme) {
 var CodeBlock = class extends UIComponent {
   lines;
   grid = null;
+  /** Raw (unhighlighted) lines of the last build, for prefix reuse in buildLines. */
+  rawLines = null;
   cellWidth = 0;
   source;
   lang;
@@ -475,9 +477,36 @@ var CodeBlock = class extends UIComponent {
       grid
     };
   }
+  /**
+   * Re-highlight the code, reusing the highlight of any unchanged line prefix.
+   *
+   * Streaming appends to the END of a block, so all but the last line or two are
+   * byte-identical to the previous call — yet this used to re-highlight every
+   * line on every chunk, making a streamed block O(N) per append and O(N^2)
+   * overall. Reusing the stable prefix makes an append proportional to what
+   * actually changed.
+   *
+   * The last previously-seen line is deliberately NOT reused: a chunk usually
+   * lands mid-line, so that line's text (and therefore its tokenization) changes.
+   */
   buildLines(code) {
     const rawLines = code.split(/\r\n|\r|\n/);
-    this.lines = rawLines.map((l) => highlightLine(l, this.lang, this.theme));
+    const previous = this.rawLines;
+    let reusable = 0;
+    if (previous && this.lines.length === previous.length) {
+      const limit = Math.min(previous.length - 1, rawLines.length);
+      while (reusable < limit && previous[reusable] === rawLines[reusable]) reusable++;
+    }
+    if (reusable > 0) {
+      const next = this.lines.slice(0, reusable);
+      for (let i = reusable; i < rawLines.length; i++) {
+        next.push(highlightLine(rawLines[i], this.lang, this.theme));
+      }
+      this.lines = next;
+    } else {
+      this.lines = rawLines.map((l) => highlightLine(l, this.lang, this.theme));
+    }
+    this.rawLines = rawLines;
     this.grid = null;
     this.height = this.pad * 2 + rawLines.length * this.lineH;
   }
@@ -809,7 +838,7 @@ var Markdown = class extends UIComponent {
         this.pendingWorkerIds.delete(id);
         this.appendInFlight = false;
         const newTokens = [...oldTokensSnapshot.slice(0, matchLen), ...tail];
-        this.updateTokens(newTokens);
+        this.updateTokens(newTokens, matchLen);
         if (this.appendPending) {
           this.appendPending = false;
           this.dispatchAppend();
@@ -833,21 +862,35 @@ var Markdown = class extends UIComponent {
       ...sendRaws ? { oldRaws: oldTokensSnapshot.map((t) => t.raw) } : {}
     });
   }
-  updateTokens(newTokens) {
+  updateTokens(newTokens, knownMatchLen) {
     const oldTokens = this.tokens;
     const oldChildren = [...this.content.children];
-    let matchLen = 0;
+    let matchLen;
     const minLen = Math.min(oldTokens.length, newTokens.length);
-    for (let i = 0; i < minLen; i++) {
-      if (oldTokens[i].raw === newTokens[i].raw) {
-        matchLen++;
-      } else {
-        break;
+    if (knownMatchLen !== void 0 && knownMatchLen >= 0 && knownMatchLen <= minLen) {
+      matchLen = knownMatchLen;
+    } else {
+      matchLen = 0;
+      for (let i = 0; i < minLen; i++) {
+        if (oldTokens[i].raw === newTokens[i].raw) {
+          matchLen++;
+        } else {
+          break;
+        }
       }
     }
     const oldTokenToChild = this.tokenChildPrefix;
     const rawMatchLen = matchLen;
-    if (matchLen === oldTokens.length - 1 && matchLen < newTokens.length && oldTokens[matchLen]?.type === newTokens[matchLen]?.type && newTokens[matchLen]?.type === "paragraph") {
+    const lastTokenSameType = matchLen === oldTokens.length - 1 && matchLen < newTokens.length && oldTokens[matchLen]?.type === newTokens[matchLen]?.type;
+    if (lastTokenSameType && newTokens[matchLen]?.type === "code") {
+      const existingEntity = oldChildren[oldTokenToChild[matchLen]];
+      const codeToken = newTokens[matchLen];
+      if (existingEntity instanceof CodeBlock) {
+        existingEntity.setCode(codeToken.text, codeToken.lang ?? void 0);
+        matchLen++;
+        this.content.resizeLastChild(existingEntity);
+      }
+    } else if (lastTokenSameType && newTokens[matchLen]?.type === "paragraph") {
       const entityIdx = oldTokenToChild[matchLen];
       const existingEntity = oldChildren[entityIdx];
       if (existingEntity && "setSpans" in existingEntity) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/markdown",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "publishConfig": {
     "access": "public"
   },