collabmd 0.1.18

package/src/client/application/preview-render-executor.js

@@ -0,0 +1,153 @@
+import {
+  cancelIdleRender,
+  IDLE_RENDER_TIMEOUT_MS,
+  requestIdleRender,
+} from './preview-diagram-utils.js';
+
+function createPreviewWorker() {
+  return new Worker(new URL('./preview-render-worker.js', import.meta.url), { type: 'module' });
+}
+
+export class PreviewRenderExecutor {
+  constructor({
+    cancelIdleRenderFn = cancelIdleRender,
+    compilePreviewDocumentLoader = () => import('./preview-render-compiler.js'),
+    createWorkerFn = createPreviewWorker,
+    getFileList,
+    idleTimeoutMs = IDLE_RENDER_TIMEOUT_MS,
+    requestIdleRenderFn = requestIdleRender,
+  } = {}) {
+    this.cancelIdleRenderFn = cancelIdleRenderFn;
+    this.compilePreviewDocumentLoader = compilePreviewDocumentLoader;
+    this.createWorkerFn = createWorkerFn;
+    this.getFileList = getFileList;
+    this.idleTimeoutMs = idleTimeoutMs;
+    this.requestIdleRenderFn = requestIdleRenderFn;
+    this.worker = null;
+    this.workerDisabled = false;
+    this.workerJob = null;
+    this.workerPrewarmId = null;
+
+    this.handleWorkerMessage = (event) => {
+      if (!this.workerJob || event.data?.renderVersion !== this.workerJob.renderVersion) {
+        return;
+      }
+
+      const job = this.workerJob;
+      this.workerJob = null;
+
+      if (event.data?.error) {
+        job.reject(new Error(event.data.error));
+        return;
+      }
+
+      job.resolve({
+        html: event.data.html,
+        stats: event.data.stats,
+      });
+    };
+
+    this.handleWorkerError = (event) => {
+      const error = new Error(event.message || 'Preview worker failed');
+      if (this.workerJob) {
+        this.workerJob.reject(error);
+        this.workerJob = null;
+      }
+
+      this.reset('Preview worker failed', { disable: true });
+    };
+  }
+
+  hasPendingJob() {
+    return this.workerJob !== null;
+  }
+
+  schedulePrewarm({ timeout = this.idleTimeoutMs } = {}) {
+    if (this.workerDisabled || this.worker || this.workerPrewarmId !== null) {
+      return;
+    }
+
+    this.workerPrewarmId = this.requestIdleRenderFn(() => {
+      this.workerPrewarmId = null;
+      this.ensureWorker();
+    }, timeout);
+  }
+
+  ensureWorker() {
+    if (this.workerDisabled) {
+      return null;
+    }
+
+    if (this.worker) {
+      return this.worker;
+    }
+
+    try {
+      this.worker = this.createWorkerFn();
+      this.worker.addEventListener('message', this.handleWorkerMessage);
+      this.worker.addEventListener('error', this.handleWorkerError);
+      return this.worker;
+    } catch {
+      this.workerDisabled = true;
+      return null;
+    }
+  }
+
+  async compile(markdownText, renderVersion) {
+    const worker = this.ensureWorker();
+
+    if (worker) {
+      if (this.workerJob) {
+        this.reset('Superseded preview render');
+      }
+
+      const activeWorker = this.ensureWorker();
+      return new Promise((resolve, reject) => {
+        this.workerJob = { reject, renderVersion, resolve };
+        activeWorker.postMessage({
+          fileList: this.getFileList?.() ?? [],
+          markdownText,
+          renderVersion,
+        });
+      });
+    }
+
+    const { compilePreviewDocument } = await this.compilePreviewDocumentLoader();
+    return compilePreviewDocument({
+      fileList: this.getFileList?.() ?? [],
+      markdownText,
+    });
+  }
+
+  cancelWorkerJob(reason) {
+    if (!this.workerJob) {
+      return;
+    }
+
+    this.workerJob.reject(new Error(reason));
+    this.workerJob = null;
+  }
+
+  reset(reason, { disable = false } = {}) {
+    this.cancelWorkerJob(reason);
+
+    if (this.worker) {
+      this.worker.removeEventListener('message', this.handleWorkerMessage);
+      this.worker.removeEventListener('error', this.handleWorkerError);
+      this.worker.terminate();
+      this.worker = null;
+    }
+
+    if (disable) {
+      this.workerDisabled = true;
+    }
+  }
+
+  destroy(reason = 'Preview renderer destroyed') {
+    if (this.workerPrewarmId !== null) {
+      this.cancelIdleRenderFn(this.workerPrewarmId);
+    }
+    this.workerPrewarmId = null;
+    this.reset(reason);
+  }
+}

package/src/client/application/preview-render-profile.js

@@ -0,0 +1,63 @@
+export const LARGE_DOCUMENT_CHAR_THRESHOLD = 150000;
+export const LARGE_DOCUMENT_MERMAID_THRESHOLD = 20;
+export const LARGE_DOCUMENT_EXCALIDRAW_THRESHOLD = 8;
+export const LARGE_DOCUMENT_PLANTUML_THRESHOLD = 12;
+
+function countMatches(source, pattern) {
+  return source.match(pattern)?.length ?? 0;
+}
+
+export function analyzeMarkdownComplexity(markdownText = '') {
+  const source = String(markdownText);
+  const mermaidEmbeds = countMatches(source, /!\[\[[^\]]+\.(?:mmd|mermaid)(?:\|[^\]]+)?\]\]/gi);
+  const plantUmlFences = countMatches(source, /(^|\n)```(?:plantuml|puml)\b/gi);
+  const plantUmlEmbeds = countMatches(source, /!\[\[[^\]]+\.(?:puml|plantuml)(?:\|[^\]]+)?\]\]/gi);
+
+  return {
+    chars: source.length,
+    excalidrawEmbeds: countMatches(source, /!\[\[[^\]]+\.excalidraw(?:\|[^\]]+)?\]\]/gi),
+    mermaidBlocks: countMatches(source, /(^|\n)```mermaid\b/gi) + mermaidEmbeds,
+    plantumlBlocks: plantUmlFences + plantUmlEmbeds,
+  };
+}
+
+export function isLargeDocumentStats(stats) {
+  return Boolean(
+    stats
+    && (
+      stats.chars >= LARGE_DOCUMENT_CHAR_THRESHOLD
+      || stats.mermaidBlocks >= LARGE_DOCUMENT_MERMAID_THRESHOLD
+      || stats.excalidrawEmbeds >= LARGE_DOCUMENT_EXCALIDRAW_THRESHOLD
+      || stats.plantumlBlocks >= LARGE_DOCUMENT_PLANTUML_THRESHOLD
+    )
+  );
+}
+
+export function getRenderProfile(markdownText = '') {
+  const source = String(markdownText);
+  const hasMermaid = /(^|\n)```mermaid\b/i.test(source)
+    || /!\[\[[^\]]+\.(?:mmd|mermaid)(?:\|[^\]]+)?\]\]/i.test(source);
+  const hasExcalidrawEmbed = /!\[\[[^\]]+\.excalidraw(?:\|[^\]]+)?\]\]/i.test(source);
+  const hasPlantUml = /(^|\n)```(?:plantuml|puml)\b/i.test(source)
+    || /!\[\[[^\]]+\.(?:puml|plantuml)(?:\|[^\]]+)?\]\]/i.test(source);
+  const isLargeByLength = source.length >= LARGE_DOCUMENT_CHAR_THRESHOLD;
+
+  if (isLargeByLength) {
+    return {
+      debounceMs: 500,
+      deferUntilIdle: true,
+    };
+  }
+
+  if (hasMermaid || hasExcalidrawEmbed || hasPlantUml) {
+    return {
+      debounceMs: 0,
+      deferUntilIdle: false,
+    };
+  }
+
+  return {
+    debounceMs: 100,
+    deferUntilIdle: false,
+  };
+}

package/src/client/application/preview-render-scheduler.js

@@ -0,0 +1,73 @@
+import {
+  cancelIdleRender,
+  IDLE_RENDER_TIMEOUT_MS,
+  requestIdleRender,
+} from './preview-diagram-utils.js';
+import { getRenderProfile } from './preview-render-profile.js';
+
+export class PreviewRenderScheduler {
+  constructor({
+    cancelAnimationFrameFn = (frameId) => cancelAnimationFrame(frameId),
+    cancelIdleRenderFn = cancelIdleRender,
+    clearTimeoutFn = (timeoutId) => clearTimeout(timeoutId),
+    getRenderProfileFn = getRenderProfile,
+    idleTimeoutMs = IDLE_RENDER_TIMEOUT_MS,
+    requestAnimationFrameFn = (callback) => requestAnimationFrame(callback),
+    requestIdleRenderFn = requestIdleRender,
+    setTimeoutFn = (callback, delay) => setTimeout(callback, delay),
+  } = {}) {
+    this.cancelAnimationFrameFn = cancelAnimationFrameFn;
+    this.cancelIdleRenderFn = cancelIdleRenderFn;
+    this.clearTimeoutFn = clearTimeoutFn;
+    this.getRenderProfileFn = getRenderProfileFn;
+    this.idleTimeoutMs = idleTimeoutMs;
+    this.requestAnimationFrameFn = requestAnimationFrameFn;
+    this.requestIdleRenderFn = requestIdleRenderFn;
+    this.setTimeoutFn = setTimeoutFn;
+    this.frameId = null;
+    this.idleId = null;
+    this.timeoutId = null;
+  }
+
+  queue({ markdownText, onRenderRequested, renderVersion }) {
+    const renderProfile = this.getRenderProfileFn(markdownText);
+    this.cancel();
+
+    const scheduleFrame = () => {
+      this.frameId = this.requestAnimationFrameFn(() => {
+        this.frameId = null;
+        this.timeoutId = null;
+        onRenderRequested?.(markdownText, renderVersion);
+      });
+    };
+
+    const scheduleRender = () => {
+      if (renderProfile.deferUntilIdle) {
+        this.idleId = this.requestIdleRenderFn(() => {
+          this.idleId = null;
+          scheduleFrame();
+        }, this.idleTimeoutMs);
+        return;
+      }
+
+      scheduleFrame();
+    };
+
+    this.timeoutId = this.setTimeoutFn(scheduleRender, renderProfile.debounceMs);
+  }
+
+  cancel() {
+    this.clearTimeoutFn(this.timeoutId);
+    if (this.frameId) {
+      this.cancelAnimationFrameFn(this.frameId);
+    }
+    this.cancelIdleRenderFn(this.idleId);
+    this.frameId = null;
+    this.idleId = null;
+    this.timeoutId = null;
+  }
+
+  destroy() {
+    this.cancel();
+  }
+}

package/src/client/application/preview-render-worker.js

@@ -0,0 +1,19 @@
+import { compilePreviewDocument } from './preview-render-compiler.js';
+
+self.onmessage = (event) => {
+  const { fileList, markdownText, renderVersion } = event.data ?? {};
+
+  try {
+    const result = compilePreviewDocument({ fileList, markdownText });
+    self.postMessage({
+      html: result.html,
+      renderVersion,
+      stats: result.stats,
+    });
+  } catch (error) {
+    self.postMessage({
+      error: error instanceof Error ? error.message : String(error),
+      renderVersion,
+    });
+  }
+};