@ltw/decoder

前端 LTW 解码器 - Service Worker 虚拟文件系统 + iframe 预览

安装

yarn add @ltw/decoder

最短路径使用

import { LTWPreviewer } from "@ltw/decoder";

// 1. 创建预览器
const previewer = new LTWPreviewer({
  serviceWorkerUrl: "./ltw-sw.js",
});

// 2. 初始化
await previewer.init();

// 3. 加载文件
await previewer.load(file);

// 4. 预览
await previewer.createPreview(container);

核心思路

架构

LTW 文件 → LTWParser (解析) → Service Worker (虚拟文件系统) → iframe (预览)

关键点

1. LTWParser: 解析 LTW 二进制格式，提取文件列表和内容
2. Service Worker: 拦截 /ltw-virtual/* 请求，从内存返回文件
3. LTWPreviewer: 封装完整流程，管理 SW 和 iframe 生命周期

Service Worker 配置

复制 public/ltw-sw.js 到项目 public 目录：

// 核心逻辑：拦截虚拟路径请求
self.addEventListener("fetch", (event) => {
  const url = new URL(event.request.url);
  if (url.pathname.startsWith("/ltw-virtual/")) {
    const filePath = url.pathname.replace("/ltw-virtual/", "");
    const file = virtualFiles.get(filePath);
    event.respondWith(
      new Response(file.data, {
        headers: { "Content-Type": file.mimeType },
      }),
    );
  }
});

API

LTWPreviewer

// 构造
new LTWPreviewer({
  serviceWorkerUrl: string,      // SW 路径
  fallbackMode?: boolean,        // 降级模式（无 SW）
  onReady?: () => void,
  onError?: (error: Error) => void
})

// 方法
init(): Promise<boolean>                    // 初始化 SW
load(file: File): Promise<void>             // 加载 LTW
createPreview(container, options?): Promise // 创建 iframe
getParser(): LTWParser | null               // 获取解析器
cleanup(): void                             // 清理资源

LTWParser

load(file: File): Promise<void>             // 加载文件
listFiles(): string[]                       // 文件列表
getFile(path: string): Promise<LTWFile>     // 读取文件

开发

yarn dev      # 开发模式
yarn build    # 构建（ES + UMD）
yarn buildp   # 构建单文件（压缩混淆）
yarn link     # 本地链接