| @@ -0,0 +1,186 @@ |
| 1 | +import { |
| 2 | + FileRenderer, |
| 3 | + disposeHighlighter, |
| 4 | + getSharedHighlighter, |
| 5 | + type BaseCodeOptions, |
| 6 | + type DiffsHighlighter, |
| 7 | + type FileContents, |
| 8 | + type HighlightedToken, |
| 9 | +} from "@pierre/diffs"; |
| 10 | +import { TextDocument } from "@pierre/diffs/editor"; |
| 11 | +import { WorkerPoolManager, type WorkerRequest, type WorkerResponse } from "@pierre/diffs/worker"; |
| 12 | +import * as NodeWorkerThreads from "node:worker_threads"; |
| 13 | +import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test"; |
| 14 | + |
| 15 | +type DocumentChange = NonNullable<ReturnType<TextDocument<unknown>["applyEdits"]>>; |
| 16 | +interface Tokenizer { |
| 17 | + tokenize(change: DocumentChange): Map<number, HighlightedToken[]>; |
| 18 | + cleanUp(): void; |
| 19 | +} |
| 20 | + |
| 21 | +const tokenizerUrl = new URL("./editor/tokenizer.js", import.meta.resolve("@pierre/diffs")); |
| 22 | +const { EditorTokenizer } = (await import(/* @vite-ignore */ tokenizerUrl.href)) as { |
| 23 | + EditorTokenizer: new (options: { |
| 24 | + codeOptions: BaseCodeOptions; |
| 25 | + highlighter: DiffsHighlighter; |
| 26 | + textDocument: TextDocument<unknown>; |
| 27 | + setStyle: (style: string) => void; |
| 28 | + onDeferTokenize: () => void; |
| 29 | + }) => Tokenizer; |
| 30 | +}; |
| 31 | + |
| 32 | +const workerModule = import.meta.resolve("@pierre/diffs/worker/worker.js"); |
| 33 | +const options = { |
| 34 | + theme: "pierre-dark", |
| 35 | + themeType: "dark", |
| 36 | + preferredHighlighter: "shiki-wasm", |
| 37 | + useTokenTransformer: true, |
| 38 | +} as const; |
| 39 | +const source = "export const View = () => <div>Ready</div>;"; |
| 40 | +let pool: WorkerPoolManager; |
| 41 | +let renderer: FileRenderer; |
| 42 | +let terminationPromises: Promise<number>[]; |
| 43 | + |
| 44 | +class WorkerTransport { |
| 45 | + private readonly worker = new NodeWorkerThreads.Worker( |
| 46 | + `const { parentPort, workerData } = require("node:worker_threads"); |
| 47 | + globalThis.self = { |
| 48 | + addEventListener(type, listener) { |
| 49 | + if (type === "message") parentPort.on("message", data => listener({ data })); |
| 50 | + if (type === "error") process.on("uncaughtException", listener); |
| 51 | + } |
| 52 | + }; |
| 53 | + globalThis.postMessage = data => parentPort.postMessage(data); |
| 54 | + import(workerData.moduleUrl);`, |
| 55 | + { eval: true, workerData: { moduleUrl: workerModule }, execArgv: [] }, |
| 56 | + ); |
| 57 | + |
| 58 | + addEventListener( |
| 59 | + type: "message" | "error", |
| 60 | + listener: (event: { data: WorkerResponse } | Error) => void, |
| 61 | + ) { |
| 62 | + if (type === "error") this.worker.on("error", listener); |
| 63 | + else this.worker.on("message", (data: WorkerResponse) => listener({ data })); |
| 64 | + } |
| 65 | + |
| 66 | + postMessage(message: WorkerRequest) { |
| 67 | + this.worker.postMessage(message, []); |
| 68 | + } |
| 69 | + |
| 70 | + terminate() { |
| 71 | + terminationPromises.push(this.worker.terminate()); |
| 72 | + } |
| 73 | +} |
| 74 | + |
| 75 | +function firstEnter(highlighter: DiffsHighlighter, file: FileContents, language: string) { |
| 76 | + const document = new TextDocument(file.name, file.contents, language); |
| 77 | + const tokenizer = new EditorTokenizer({ |
| 78 | + codeOptions: options, |
| 79 | + highlighter, |
| 80 | + textDocument: document, |
| 81 | + setStyle: () => {}, |
| 82 | + onDeferTokenize: () => {}, |
| 83 | + }); |
| 84 | + try { |
| 85 | + const end = document.positionAt(file.contents.length); |
| 86 | + const change = document.applyEdits([{ range: { start: end, end }, newText: "\n" }]); |
| 87 | + expect(change).toBeDefined(); |
| 88 | + // This is the synchronous first edit, before the tokenizer's debounced prebuild. |
| 89 | + const dirtyLines = tokenizer.tokenize(change!); |
| 90 | + expect([...dirtyLines.keys()]).toEqual([0, 1]); |
| 91 | + expect(document.getText()).toBe(`${file.contents}\n`); |
| 92 | + } finally { |
| 93 | + tokenizer.cleanUp(); |
| 94 | + } |
| 95 | +} |
| 96 | + |
| 97 | +beforeEach(async () => { |
| 98 | + terminationPromises = []; |
| 99 | + vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => |
| 100 | + setImmediate(() => callback(0)), |
| 101 | + ); |
| 102 | + vi.stubGlobal("cancelAnimationFrame", clearImmediate); |
| 103 | + vi.stubGlobal("window", { matchMedia: () => ({ matches: true }) }); |
| 104 | + await disposeHighlighter(); |
| 105 | + pool = new WorkerPoolManager( |
| 106 | + // Adapt transport only. The installed Pierre worker resolves and highlights the file. |
| 107 | + { workerFactory: () => new WorkerTransport() as unknown as globalThis.Worker, poolSize: 1 }, |
| 108 | + options, |
| 109 | + ); |
| 110 | + await pool.initialize(); |
| 111 | + renderer = new FileRenderer(options, undefined, pool); |
| 112 | +}); |
| 113 | + |
| 114 | +afterEach(async () => { |
| 115 | + renderer?.cleanUp(); |
| 116 | + pool?.terminate(); |
| 117 | + await Promise.all(terminationPromises); |
| 118 | + await disposeHighlighter(); |
| 119 | + vi.unstubAllGlobals(); |
| 120 | +}); |
| 121 | + |
| 122 | +describe("editable file language readiness", () => { |
| 123 | + it.each(["hydrate", "renderFile"] as const)( |
| 124 | + "%s prepares the inferred language before the first edit of a worker-highlighted file", |
| 125 | + async (method) => { |
| 126 | + const file = { name: "cold.tsx", contents: source, cacheKey: "cold-tsx" }; |
| 127 | + await pool.primeFileHighlightCache(file); |
| 128 | + expect(pool.getFileResultCache(file)).toBeDefined(); |
| 129 | + const mainHighlighter = await getSharedHighlighter({ |
| 130 | + themes: ["pierre-dark"], |
| 131 | + langs: ["text"], |
| 132 | + }); |
| 133 | + expect(mainHighlighter.getLoadedLanguages()).not.toContain("tsx"); |
| 134 | + renderer[method](file); |
| 135 | + // Read-only worker rendering must not load editor grammars on the main thread. |
| 136 | + expect(mainHighlighter.getLoadedLanguages()).not.toContain("tsx"); |
| 137 | + const highlighter = await renderer.initializeHighlighter(); |
| 138 | + firstEnter(highlighter, file, "tsx"); |
| 139 | + }, |
| 140 | + ); |
| 141 | + |
| 142 | + it.each(["hydrate", "renderFile"] as const)( |
| 143 | + "%s respects an explicit language when the filename suggests plain text", |
| 144 | + async (method) => { |
| 145 | + const file: FileContents = { |
| 146 | + name: "source.txt", |
| 147 | + lang: "tsx", |
| 148 | + contents: source, |
| 149 | + cacheKey: "explicit-tsx", |
| 150 | + }; |
| 151 | + await pool.primeFileHighlightCache(file); |
| 152 | + renderer[method](file); |
| 153 | + firstEnter(await renderer.initializeHighlighter(), file, "tsx"); |
| 154 | + }, |
| 155 | + ); |
| 156 | + |
| 157 | + it("loads a newly opened language after reusing a worker-backed renderer", async () => { |
| 158 | + const previousFile: FileContents = { |
| 159 | + name: "previous.ts", |
| 160 | + contents: "export const value = 1;", |
| 161 | + cacheKey: "previous-ts", |
| 162 | + }; |
| 163 | + await getSharedHighlighter({ themes: ["pierre-dark"], langs: ["typescript"] }); |
| 164 | + renderer.renderFile(previousFile); |
| 165 | + firstEnter(await renderer.initializeHighlighter(), previousFile, "typescript"); |
| 166 | + const nextFile = { name: "next.tsx", contents: source, cacheKey: "next-tsx" }; |
| 167 | + renderer.renderFile(nextFile); |
| 168 | + firstEnter(await renderer.initializeHighlighter(), nextFile, "tsx"); |
| 169 | + }); |
| 170 | + |
| 171 | + it("prepares a hydrated non-worker file even when its theme was already loaded", async () => { |
| 172 | + renderer.cleanUp(); |
| 173 | + renderer = new FileRenderer(options); |
| 174 | + const file = { name: "local.tsx", contents: source, cacheKey: "local-tsx" }; |
| 175 | + renderer.hydrate(file); |
| 176 | + firstEnter(await renderer.initializeHighlighter(), file, "tsx"); |
| 177 | + }); |
| 178 | + |
| 179 | + it("keeps plain text editable without loading an unrelated grammar", async () => { |
| 180 | + const file = { name: "notes.txt", contents: "Plain text", cacheKey: "plain-text" }; |
| 181 | + renderer.renderFile(file); |
| 182 | + const highlighter = await renderer.initializeHighlighter(); |
| 183 | + firstEnter(highlighter, file, "text"); |
| 184 | + expect(highlighter.getLoadedLanguages()).not.toContain("tsx"); |
| 185 | + }); |
| 186 | +}); |