Typescript modernization with AI

.editorconfig

@@ -16,5 +16,5 @@ tab_width    = 2
 [*.css]
 indent_style = space
 
-[*.coffee]
+[*.ts]
 indent_style = space

.github/workflows/ci.yml

@@ -0,0 +1,69 @@
+name: CI
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+
+jobs:
+  verify:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [22, 24]
+    steps:
+      - uses: actions/checkout@v5
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v5
+        with:
+          node-version: ${{ matrix.node }}
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      # Type check, build, ES5 check, tests on sources (with coverage) and dist
+      - run: pnpm verify
+      - name: Upload coverage
+        if: matrix.node == 24
+        uses: coverallsapp/github-action@v2
+        with:
+          file: coverage/lcov.info
+
+  # Publishes the demos and docs to GitHub Pages (Settings > Pages > Source
+  # must be set to "GitHub Actions")
+  pages:
+    needs: verify
+    if: github.event_name == 'push' && github.ref == 'refs/heads/master'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    concurrency:
+      group: pages
+      cancel-in-progress: false
+    environment:
+      name: github-pages
+      url: ${{ steps.deploy.outputs.page_url }}
+    steps:
+      - uses: actions/checkout@v5
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v5
+        with:
+          node-version: 24
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm build
+      # The demos load ../dist and the test data in spec/fixtures
+      - name: Assemble site
+        run: |
+          mkdir -p site/spec
+          cp -r demo dist docs experimental README.md README.zh_CN.md LICENSE site/
+          cp -r spec/fixtures site/spec/
+      - uses: actions/configure-pages@v5
+      # Renders the Markdown docs (as the old gh-pages branch did)
+      - uses: actions/jekyll-build-pages@v1
+        with:
+          source: site
+          destination: _site
+      - uses: actions/upload-pages-artifact@v4
+      - id: deploy
+        uses: actions/deploy-pages@v4

.gitignore

@@ -8,22 +8,5 @@
 # Ignore Node Modules
 /node_modules/*
 
-# Ignore CI
-/compiled_spec/*
+# Ignore test coverage reports
 /coverage/*
-
-# Ignore temporary core compile output
-/compiled_src/*
-
-# Ignore tscache
-.tscache
-
-# Ignore .baseDir related things
-#  These are only used as transient items due to compiling TypeScript. They may
-#  become useful when the project can fully move to TypeScript.
-.baseDir.ts
-.baseDir.js
-.baseDir.js.map
-
-# Ignore typescript tmp files
-*.tmp.txt

.npmignore

@@ -1,13 +1,16 @@
 # Non-package items
 /spec
-/test
 /docs
 /demo
 /experimental
+/build
+/.github
+
+# Build and test configuration
+/rollup.config.mjs
+/tsconfig*.json
+/vitest*.config.mts
+/pnpm-workspace.yaml
 
 # Temporary files
-.tscache
-/compiled_spec
-/compiled_src
 /coverage
-

BUILDING.md

@@ -1,9 +1,8 @@
 # Building 编译项目
 
-本项目采用 grunt 管理编译，有关 Grunt 系统的使用请参考
-[官方文档](http://gruntjs.com/getting-started) 脚本弹幕部分的编译需要 
-[TypeScript](http://www.typescriptlang.org/) 。
-这些库还会依赖于NodeJS环境。
+本项目源码使用 [TypeScript](http://www.typescriptlang.org/) 编写，通过
+[Rollup](https://rollupjs.org/) 和 [SWC](https://swc.rs/) 编译为 ES5 代码（兼容旧版浏览器）。
+TypeScript 本身只负责类型检查。开发环境需要 NodeJS 和 [pnpm](https://pnpm.io/)。
 
 ### 确定你是否需要编译 Do I need to build CCL?
 CommentCoreLibrary在库外提供了很多可扩展的空间，你可以相对简单的增加新的弹幕格式的支持，新的弹幕
@@ -14,40 +13,62 @@ CommentCoreLibrary在库外提供了很多可扩展的空间，你可以相对
 当然自己编译也会带来一些优势，比如更小的库大小和更加专注的功能支持。还有，希望帮助CCL实现更多支持的
 开发者们也需要知道如何有效的编译。
 
-### 配置编译环境Setup Build Environment
-初次编译请确保你安装了 `node>=1.0.0`，为全局系统安装 grunt 请执行：
+### 配置编译环境 Setup Build Environment
+初次编译请确保你安装了 NodeJS（版本参考 `package.json` 中的 `engines`）以及 pnpm，
+然后在根目录执行：
 
-    npm install -g grunt-cli
+    pnpm install
 
-有些系统下可能需要管理员权限（如 `sudo`）。有关具体如何配置Grunt请参考官方文档。
-
-接下来你需要安装编译所需的库，可以简单的通过 `npm install` 进行安装。CommentCoreLibrary在
-运行时没有任何依赖关系，但是开发环境需要依赖 grunt 的一些部件和 TypeScript（参考下面“代码弹幕”
-章节）。
+CommentCoreLibrary在运行时没有任何依赖关系，开发环境的依赖都会被自动安装。
 
 ### 编译（Building）
 编译项目请在根目录直接运行：
 
-    grunt
+    pnpm build
+
+即可清空并重新生成 `dist/` 目录下的全部产物。除此之外，你还可以改变编译目标：
+
+- `pnpm build:core` ： 只编译弹幕库（不包括代码弹幕支持）以及 CSS。注意：与旧版 Grunt 的
+    `build:core` 不同，弹幕库总是包含 CommentProvider、过滤器和各种解析器。如果不需要这些模块，
+    请使用 ES Module 版本，打包工具（webpack / Rollup / Vite）会通过 tree-shaking 自动去掉未使用的部分
+- `pnpm build:scripting` ： 只编译代码弹幕支持（`dist/scripting/`）
+- `pnpm watch` ： 看管 `src` 源码文件夹，并且在产生变化的时候自动重新编译
 
-即可按照默认模板编译。除此之外，你还可以改变编译目标：
+编译产物 Build outputs:
 
-- `build` ： 只编译项目，不会clean掉build文件夹下的产物
-- `build:core` ： 只编译弹幕核心，不包括CommentProvider和parsers里面的解析器。
-    这个更加适用不需要已有的弹幕格式的各种二次开发
-- `build:scripting` ： 只编译代码弹幕支持
+- `dist/CommentCoreLibrary.js` (`.min.js`) ： UMD 格式，支持 AMD (RequireJS)、CommonJS
+    以及直接通过 `<script>` 引用。直接引用时会创建全局 `CommentCoreLibrary`，同时为了兼容旧版
+    也会把 `CommentManager`、`BilibiliFormat` 等导出为同名全局变量。
+- `dist/CommentCoreLibrary.mjs` ： ES Module 格式，供 webpack / Rollup / Vite 等打包工具使用
+- `dist/types/` ： TypeScript 类型声明
+- `dist/css/style.css` (`.min.css`) ： 样式表（自动添加浏览器前缀）
 
-默认模式会自动看管 `src` 源码文件夹，并且在产生变化的时候自动生成新版。
+所有 JavaScript 产物都必须是 ES5 代码，可以通过 `pnpm check:es5` 验证。
+
+### 测试（Testing）
+
+- `pnpm typecheck` ： TypeScript 类型检查
+- `pnpm test` ： 对源码运行测试（[Vitest](https://vitest.dev/) + jsdom）并生成覆盖率报告
+    （`coverage/` 目录下，含 HTML 和 lcov 格式）
+- `pnpm test:dist` ： 对编译产物运行同样的测试，并测试各种模块系统和代码弹幕的 Worker 脚本
+    （需要先编译）
+- `pnpm verify` ： 依次执行编译和以上全部检查（持续集成使用）
 
 ### 调试（Debugging）
 本地调试的话，可以在本地架设Web Server。默认的 `demo` 文件夹下也有一套简易的调试界面。同时你还
 可以参考这个界面来实现你自己的嵌入调试。
 
+推送到 `master` 后，持续集成会自动编译并把 `demo`、`docs` 等发布到
+[GitHub Pages](http://jabbany.github.io/CommentCoreLibrary/demo)（`.github/workflows/ci.yml`）。
+
 ### 代码弹幕（Scripting Engine）
-默认的代码弹幕支持需要使用 TypeScript 编译。这需要你安装 TypeScript 支持，通过 
-`npm install -g typescript` 即可安装。目前编译项目不会引入代码弹幕支持（考虑到架设难度的增高
-，编译速度降低和潜在受众面相对于弹幕支持要少一些），相关库需要手动引入。
+代码弹幕支持分为两部分，都通过 `pnpm build:scripting` 编译：
 
-如果希望直接 Grunt 编译现在也已经支持。
+- `dist/scripting/Host.js` ： 运行在页面中的宿主部分（UMD 格式，全局变量 `CCLScripting`）
+- `dist/scripting/Worker.js` 和 `dist/scripting/api/` ： 运行在 Web Worker 中的沙箱部分。
+    `api/` 下的每一个模块（Runtime、Tween、Display、Player、Utils）都由
+    `src/scripting/api/<模块>.ts` 编译为一个独立的脚本，并创建同名的全局变量。
+    模块之间只能通过 `import * as Runtime from '../Runtime/Runtime'` 的方式相互引用，
+    且只能引用在 `Worker.js` 中先加载的模块。
 
-参考 `docs/scripting` 了解代码弹幕系统和它的编译方法。
+参考 `docs/scripting` 了解代码弹幕系统。