feat: ✨ 为方便其他项目使用进行打包

Author: hymbz

package.json

@@ -23,8 +23,7 @@
     "build-storybook": "storybook build",
     "test-storybook": "test-storybook --maxWorkers=1 --testTimeout 60000",
     "percy": "percy exec -- pnpm test-storybook",
-    "wdio": "wdio run ./wdio.conf.ts",
-    "npm:build": "rollup --config --environment NODE_ENV:npm --configPlugin rollup-plugin-ts --configImportAttributesKey with"
+    "wdio": "wdio run ./wdio.conf.ts"
   },
   "dependencies": {
     "@material-design-icons/svg": "^0.14.15",
@@ -70,7 +69,6 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
-    "@rollup/plugin-terser": "^0.4.4",
     "@solidjs/router": "^0.15.3",
     "@storybook/test-runner": "^0.23.0",
     "@types/libarchive.js": "^1.3.4",
@@ -110,6 +108,7 @@
     "release-it": "^19.0.4",
     "rfdc": "^1.4.1",
     "rollup": "^4.46.2",
+    "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-ts": "^3.4.5",
     "rollup-plugin-watch-external": "^1.0.2",
@@ -125,6 +124,7 @@
     "stylelint-prettier": "^5.0.3",
     "svgo": "^4.0.0",
     "sync-fetch": "^0.5.2",
+    "terser": "^5.44.0",
     "tslib": "^2.8.1",
     "type-fest": "^4.41.0",
     "typescript": "^5.9.2",

pnpm-lock.yaml

@@ -10,23 +10,33 @@ import commonjs from '@rollup/plugin-commonjs';
 import json from '@rollup/plugin-json';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
-import terser from '@rollup/plugin-terser';
 import { parse as parseMd } from 'marked';
 import fs from 'node:fs';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { dts } from 'rollup-plugin-dts';
 import styles from 'rollup-plugin-styles';
 import { watchExternal } from 'rollup-plugin-watch-external';
 import shell from 'shelljs';
-
-import { inputPlugins, outputPlugins, solidSvg } from './src/rollup-plugin';
+import { minify } from 'terser';
+
+import {
+  escapeTmplText,
+  inputPlugins,
+  outputPlugins,
+  solidSvg,
+} from './src/rollup-plugin';
 import { getMetaData, updateReadme } from './src/rollup-plugin/metaHeader';
 import { siteUrl } from './src/rollup-plugin/siteUrl';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
 const isDevMode = process.env.NODE_ENV === 'development';
-const isNpmMode = process.env.NODE_ENV === 'npm';
+
+const minifyCode = async (code: string) => {
+  const res = await minify(code, { ecma: 2020, mangle: false });
+  return res.code!;
+};
 
 const latestChangeHtml = await (() => {
   const md = fs
@@ -75,7 +85,7 @@ const packlist = [
   'worker/ImageUpscale',
   'userscript/otherSite',
   'userscript/ehTagRules',
-];
+] as const;
 
 const babelConfig = {
   presets: ['@babel/preset-env', '@babel/preset-typescript', 'solid'],
@@ -123,6 +133,7 @@ const getPlugins = (...otherPlugins: InputPluginOption[]) => [
       isDevMode: `${isDevMode}`,
       'process.env.NODE_ENV': isDevMode ? `'development'` : `'production'`,
       'inject@LatestChange': latestChangeHtml,
+      scriptVersion: `'${meta.version}'`,
     },
     preventAssignment: true,
   }),
@@ -138,8 +149,6 @@ const getPlugins = (...otherPlugins: InputPluginOption[]) => [
   styles({ mode: 'extract', modules: { generateScopedName } }),
   solidSvg(),
 
-  // ts({ transpiler: 'babel', transpileOnly: true, babelConfig }),
-
   babel({
     babelHelpers: 'runtime',
     extensions: ['.ts', '.tsx'],
@@ -166,8 +175,6 @@ export const buildOptions = (
     watchFiles && isDevMode && watchExternal({ entries: watchFiles }),
   );
 
-  if (isNpmMode) options.plugins.push(terser());
-
   Object.assign(options.output, {
     file: `dist/${path.replace(/(\/index)?\.tsx?/, '')}.js`,
     plugins: [
@@ -227,8 +234,7 @@ shell.rm('-rf', resolve(__dirname, 'dist'));
 if (isDevMode)
   shell.exec('serve dist --cors -l 2405', { async: true, silent: true });
 
-// oxlint-disable-next-line no-mutable-exports
-let optionList: RollupOptions[] = [
+const optionList: RollupOptions[] = [
   buildOptions('dev'),
 
   ...packlist.map((path) => buildOptions(path)),
@@ -252,7 +258,8 @@ let optionList: RollupOptions[] = [
             /\s+\/\/ import list/,
             packlist
               .map((path) => {
-                if (path === 'userscript/main') return '';
+                if (path === 'userscript/main')
+                  return `\ncase 'main':\ncode = \`inject('${path}')\`;\nbreak;`;
                 return `\ncase '${path}':\ncode = \`inject('${path}')\`;\nbreak;`;
               })
               .join(''),
@@ -333,6 +340,90 @@ if (!isDevMode)
     }),
   );
 
-if (isNpmMode) optionList = [buildOptions('userscript/dmzjDecrypt')];
+const umdPacklist = [
+  'helper/languages',
+  'helper',
+  'request',
+  'components/Manga',
+  'components/IconButton',
+  'components/Toast',
+  'userscript/detectAd',
+  'worker/detectAd',
+  'worker/ImageRecognition',
+  'worker/ImageUpscale',
+];
+if (!isDevMode)
+  optionList.push(
+    buildOptions(
+      'userscript/import',
+      umdPacklist.map((path) => `dist/${path}.js`),
+      (options) => {
+        options.output.file = 'dist/umd/import.js';
+        options.output.plugins.unshift({
+          name: 'selfImport',
+          async renderChunk(rawCode) {
+            let importListCode = '';
+
+            for (const path of umdPacklist)
+              importListCode += `\ncase '${path}':\ncode = \`inject('${path}')\`;\nbreak;\n`;
+
+            for (const [name, url] of Object.entries(meta.resource)) {
+              const res = await fetch(url);
+              let code = await res.text();
+
+              if (name === '@tensorflow/tfjs-backend-webgpu')
+                code = code.replace(
+                  '@tensorflow/tfjs-core',
+                  '@tensorflow/tfjs',
+                );
+
+              code = await minifyCode(code);
+              importListCode += `\ncase '${name}':\ncode = \`${escapeTmplText(code)}\`;\nbreak;\n`;
+            }
+
+            return rawCode.replace(/\s+\/\/ import list/, () => importListCode);
+          },
+        });
+        return options;
+      },
+    ),
+    buildOptions(
+      'umd',
+      [...umdPacklist.map((path) => `dist/${path}.js`), 'dist/umd/import.js'],
+      (options) => {
+        options.output.plugins.unshift({
+          name: 'selfUMD',
+          async renderChunk(rawCode) {
+            let code = rawCode;
+            const importCode = fs
+              .readFileSync(`dist/umd/import.js`)
+              .toString()
+              .replaceAll('require$1', 'require');
+            code = `${importCode}\n${code}`;
+
+            if (!isDevMode) code = await minifyCode(code);
+
+            const name = 'initComicReader';
+            code = `
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.${name} = global.${name} || {}));
+})(this, (function (exports) {
+${code}
+}));`;
+
+            return code;
+          },
+        });
+        return options;
+      },
+    ),
+    {
+      input: './src/umd.tsx',
+      output: [{ file: 'dist/umd.d.ts', format: 'es' }],
+      plugins: [dts()],
+    },
+  );
 
 export default optionList;

rollup.config.ts

@@ -20,8 +20,12 @@ export const getImgIndexs = (url: string) => {
 };
 
 /** 找到指定 url 图片的 dom */
-export const getImgEle = (url: string) =>
-  refs.mangaFlow.querySelector<HTMLImageElement>(`img[data-src="${url}"]`);
+export const getImgEle = (target: string | number) => {
+  const index =
+    typeof target === 'number' ? target : store.imgList.indexOf(target);
+  if (index === -1) return;
+  return refs.mangaFlow.querySelector<HTMLImageElement>(`#_${index}_0 img`);
+};
 
 /** 找到指定页面所处的图片流 */
 export const findFillIndex = (pageIndex: number, fillEffect: FillEffect) => {

src/components/Manga/actions/helper.ts

@@ -31,12 +31,12 @@ const findUpscaleImage = async (
   for (let i = start; i < end; i++) {
     const img = typeof i === 'number' ? getImg(i) : i;
     if (img.upscaleUrl !== undefined) continue;
-    const imgEle = await wait(() => getImgEle(img.src), 1000);
+    const imgEle = await wait(() => getImgEle(i), 1000);
     if (imgEle) return [img.src, imgEle];
   }
 };
 const handleUpscaleImage = async () => {
-  if (upscaleing || !isUpscale()) return;
+  if (upscaleing || !isUpscale() || store.imgList.length === 0) return;
   // 优先放大 当前显示的图片 > 后面的图片 > 前面的图片
   const targetImg =
     (await findUpscaleImage(activeImgIndex(), store.imgList.length)) ??

src/components/Manga/actions/imageUpscale.ts

@@ -34,7 +34,7 @@ const handlePageClick = (e: MouseEvent) => {
   for (const i of showImgList()) {
     const img = getImg(i);
     if (img.loadType !== 'error') continue;
-    const imgEle = getImgEle(img.src);
+    const imgEle = getImgEle(i);
     if (!imgEle || !findClickEle([imgEle], e)) continue;
     return reloadImg(img.src);
   }

src/components/Manga/actions/pointer.ts

@@ -1,6 +1,5 @@
 import type { Accessor } from 'solid-js';
 
-import { toast } from 'components/Toast';
 import { createRootMemo, range, singleThreaded, t } from 'helper';
 
 import { setState, store } from '../../store';
@@ -12,11 +11,6 @@ import { selfhostedOptions, selfhostedTranslation } from './selfhosted';
 /** 翻译指定图片 */
 export const translationImage = async (url: string) => {
   try {
-    if (typeof GM_xmlhttpRequest === 'undefined') {
-      toast?.error(t('pwa.alert.userscript_not_installed'));
-      throw new Error(t('pwa.alert.userscript_not_installed'));
-    }
-
     if (!url) return;
     const img = store.imgMap[url];
 

src/components/Manga/actions/translation/index.ts

@@ -33,7 +33,7 @@ export const selfhostedTranslation = async (url: string): Promise<string> => {
   } catch (error) {
     log.error(error, url);
     store.prop.onImgError?.(url);
-    throw new Error(t('translation.tip.download_img_failed'));
+    throw new Error(t('translation.tip.download_img_failed'), { cause: error });
   }
 
   // 支持旧版 manga-image-translator
@@ -54,7 +54,7 @@ export const selfhostedTranslation = async (url: string): Promise<string> => {
       ({ task_id } = res.response);
     } catch (error) {
       log.error(error);
-      throw new Error(t('translation.tip.upload_error'));
+      throw new Error(t('translation.tip.upload_error'), { cause: error });
     }
 
     let errorNum = 0;
@@ -75,7 +75,9 @@ export const selfhostedTranslation = async (url: string): Promise<string> => {
       } catch (error) {
         log.error(error);
         if (errorNum > 5)
-          throw new Error(t('translation.tip.check_img_status_failed'));
+          throw new Error(t('translation.tip.check_img_status_failed'), {
+            cause: error,
+          });
         errorNum += 1;
       }
     }

src/components/Manga/actions/translation/selfhosted.ts

@@ -5,10 +5,13 @@ import { zipSync } from 'fflate';
 import { createMemo } from 'solid-js';
 
 import { IconButton } from 'components/IconButton';
-import { downloadImg, imgList, store } from 'components/Manga';
 import { toast } from 'components/Toast';
 import { createEffectOn, FaviconProgress, saveAs, t, useStore } from 'helper';
 
+import { imgList } from '../actions';
+import { downloadImg } from '../helper';
+import { store } from '../store';
+
 const getExtName = (mime: string) => /.+\/([^;]+)/.exec(mime)?.[1] ?? 'jpg';
 
 /** 下载按钮 */

src/components/DownloadButton.tsx …ents/Manga/components/DownloadButton.tsxsrc/components/DownloadButton.tsx renamed to src/components/Manga/components/DownloadButton.tsx src/components/DownloadButton.tsx renamed to src/components/Manga/components/DownloadButton.tsx

@@ -10,7 +10,7 @@ export type SettingsItemProps = {
 
   children?: JSX.Element | JSX.Element[];
   class?: string;
-  classList?: ClassList;
+  classList?: Record<string, boolean | undefined>;
   style?: JSX.CSSProperties;
 };