docs: 📝 更新文档

Author: hymbz

.oxlintrc.json

@@ -26,7 +26,8 @@
     "**/public/**",
     "**/dev-dist/**",
     "**/assets/**",
-    "**/**.js"
+    "**/**.js",
+    "ComicReader.umd.d.ts"
   ],
   "rules": {
     // 目前不支持跳过 return new Promise 的，只能暂时关掉

.prettierignore

@@ -4,3 +4,5 @@
 **/*.json5
 **/public/*
 *.user.js
+*.umd.js
+*.umd.d.ts

README.md

@@ -33,6 +33,8 @@
 
 > 如果喜欢这种阅读模式，也想用来看**本地漫画**的话，欢迎使用「[ComicRead PWA](https://comic-read.pages.dev/)」，只要打开网页拖入本地漫画即可获得完全一致的体验
 
+> 想要在自己的网站或项目上使用脚本的阅读模式的话，可参看[相关文档](https://github.com/hymbz/ComicReadScript/blob/master/docs/NPM%20模块.md)
+
 <blockquote>
   <p>
     对你有帮助的话就点个⭐Star吧

docs/.vitepress/config.mts

@@ -34,6 +34,7 @@ export default defineConfig({
       },
 
       { text: '最简单的本地部署翻译服务流程', link: '/本地部署翻译' },
+      { text: 'NPM 模块', link: '/NPM 模块' },
       { text: '无法解决的问题', link: '/无法解决的问题' },
     ],
 

docs/NPM 模块.md

@@ -0,0 +1,83 @@
+## 导入
+
+### NPM
+
+```js
+import { initComicReader } from '@hymbz/comic-read-script/dist/umd.js'
+
+const ComicReader = initComicReader();
+ComicReader.open(['/1.png', '/2.png', '/3.png']);
+```
+
+### CDN
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@hymbz/comic-read-script/ComicReader.umd.js"></script>
+<script>
+  const { initComicReader } = window.ComicReadScript;
+  const ComicReader = initComicReader();
+  ComicReader.open(['/1.png', '/2.png', '/3.png']);
+</script>
+```
+
+## 配置
+
+正常无需任何配置，就已经可以使用阅读模式的大部分功能了，但仍有一些功能需要提供油猴 API 才能使用。
+
+### GM.getValue / GM.setValue
+
+脚本会用这俩 API 来保存：显示语言设置、3.3M 的图片无损放大模型（模型只在用到时才会下载缓存）。另外也能顺便用这俩 API 来存储脚本的阅读配置和快捷键。
+
+### GM_xmlhttpRequest
+
+不提供这个 API 的话就只能使用 fetch 来发起请求了，如果没有 CORS 之类的限制的话，那除了无法使用 Cotrans 翻译外好像也没什么影响。
+
+### 使用默认配置
+
+```js
+import { initComicReader, defaultConfig } from '@hymbz/comic-read-script'
+
+const ComicReader = initComicReader(defaultConfig());
+```
+
+默认配置并不会默认启用，需要手动传入。
+
+使用 localStorage 来实现 GM.getValue 和 GM.setValue，同时配置好了阅读配置和快捷键设置的存储，并会在版本更新时自动删掉旧的配置，详见[代码](https://github.com/hymbz/ComicReadScript/blob/master/src/umd.tsx#L177-L205)。
+
+### 自定义配置
+
+```js
+import { initComicReader } from '@hymbz/comic-read-script/dist/umd.js'
+
+const getValue = (name, defaultValue) => { /* xxx */ };
+const setValue = (name, value) => { /* xxx */ };
+const GM_xmlhttpRequest = (details) => { /* xxx */ };
+
+const ComicReader = initComicReader({
+  polyfill: {
+    GM: { getValue, setValue },
+    GM_xmlhttpRequest,
+  },
+  props: {
+    option: getValue('@Option'),
+    onOptionChange: (option) => setValue('@Option', option),
+    hotkeys: getValue('@Hotkeys'),
+    onHotkeysChange: (hotkeys) => setValue('@Hotkeys', hotkeys),
+  },
+});
+```
+
+props 的具体定义详见 [ComicReader.umd.d.ts](https://github.com/hymbz/ComicReadScript/blob/master/ComicReader.umd.d.ts#L306-L329) 里的 MangaProps 类型。
+
+## 方法
+
+```js
+const ComicReader = initComicReader();
+
+// 加载显示指定的图片列表。标题用于打包下载时命名压缩包，没有标题时会使用网页标题
+ComicReader.open(['/1.png', '/2.png', '/3.png'], '标题');
+// 关闭阅读模式
+ComicReader.setProps('show', false);
+// 跳到指定页数（注意在双页模式下，页数不等于图片在列表里的序列数）
+ComicReader.goto(1);
+```

docs/index.md

@@ -33,6 +33,8 @@
 
 > 如果喜欢这种阅读模式，也想用来看**本地漫画**的话，欢迎使用「[ComicRead PWA](https://comic-read.pages.dev/)」，只要打开网页拖入本地漫画即可获得完全一致的体验
 
+> 想要在自己的网站或项目上使用脚本的阅读模式的话，可参看[相关文档](https://github.com/hymbz/ComicReadScript/blob/master/docs/NPM%20模块.md)
+
 <blockquote>
   <p>
     对你有帮助的话就点个⭐Star吧

eslint.config.mjs

@@ -30,6 +30,7 @@ export default antfu(
       '**/dev-dist/**',
       '**/assets/**',
       '**/**.js',
+      'ComicReader.umd.d.ts',
     ],
   },
   {

release.mjs

@@ -69,8 +69,8 @@ const exec = (...commands) => {
   }
 
   // 测试
-  exec('pnpm test run');
   exec('pnpm check');
+  exec('pnpm test run');
 
   // 使用 release-it 更新版本，并获得更新日志
   const { changelog } = await release({

src/rollup-plugin/ehRules.ts

@@ -1,4 +1,5 @@
 import type { OutputPluginOption } from 'rollup';
+
 import { codeEdit } from './codeEdit';
 
 /** 调整 ehRules 结构以减少代码量 */