Docs: 一个用于分流突出显示的最小 Web Worker 示例

最佳业绩指导提到卸载 向 Web Worker 突出显示,但该部分仍然是“占位符”。

我最近把它接了起来 结果发现它很小 JavaScript引擎,所以我共享一个最小版本,以防它成为有用的起步点(或省下. 写一个从零开始。

// shiki- worker.ts (日语). 从“ shiki/ core” 导入 { 创建高亮 Core,类型为高亮 Core } 从“ shiki/ engine/ JavaScript” 导入 { 创建 JavaScript RegexEngine }

让出亮点:承诺 < 高亮点Core > QQ 未定义

函数 get Highlighter (){ 返回( 高亮? = 创建高亮 Core( { ) 主题:[进口('@shikijs/theoms/GitHub-dark')], [进口('@shikijs/langs/TypeScript')], 引擎: 创建 JavaScript RegexEngine (), // 没有 WASM - > 较小的工人, 更快启动 (e)) {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢?

self.onmessage = async (e: Message Event = id: 数字,代码:字符串,lang:字符串 = ) #{ Const { id, 代码, lang } = e. data = 数据 Const hl = 等待获得高亮度( ) 自. postMessage ({ id, html: hl.code ToHtml (code, { lang, 主题:"GitHub- Dark") }) {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢?

//主.ts-请求/答复包装,以便同时拨打的电话不会交叉接线
const worker = 新工人(新 URL ('./shiki- worker.ts',导入.meta.url),{类型:'module'})
const 待定 = 新的地图 < 数字, (html: string) QQ 无效 > ()
让下一个 Id = 0

worker.onmessage=(e:Message Event <{ id: number,html: string }> ) =>:
待定. get( e. data. id)?. ( e. data. html)

导出函数突出显示( 代码: 字符串, lang: 字符串): 保证 < 字符串 > {
const id = 下个Id++
返回新承诺( (解析) {{{}
待定. set( id, solution)
postMessage ({ id, 代码, lang })
) (中文(简体) ).
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢?

指南可能想涵盖的几件事(不明显的部分):

• 捆绑工人语法——“新工人(新URL(')/工人.ts',导入.meta.url),{类型:'module'}” (网络包装5/现代捆绑机)
• JS引擎对Oniguruuma WASM特别在工人内部进行权衡
• 匹配对ID请求的响应, 所以多个飞行中亮点不会被交换
• tsconfig'lib: ['webworker']用于自我'打字'
• 与浏览器相邻的节点 " 工人-线程 " 变体

如果你想要一个文件页, 我很乐意打开一个公关—— 让我知道你的形状 偏好(用捆绑/框架来显示,原始的`后Message' vs Comlink).