feat(all): ✨ 新增工具

packages/vue2/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @r-utils/vue2
+
+## 1.4.0
+
+### Minor Changes
+
+- 添加工具

packages/vue2/README.md

@@ -0,0 +1,76 @@
+# @r-utils/vue2
+
+仅用于 Vue2 项目的工具包。
+
+## 适用范围
+
+- 适用于 Vue2 项目。
+- 适用于需要根据页面可见性触发组件 `onShow` / `onHide` 的场景。
+
+## 不适用范围
+
+- 不适用于 Vue3 项目。
+- 如果是 uni-app 专用能力，建议优先使用 `@r-utils/uni-app`。
+
+## 安装
+
+```bash
+pnpm add @r-utils/vue2
+```
+
+## 导入方式
+
+### 推荐：根入口导入
+
+大多数场景推荐从根入口导入，路径简单，使用心智负担更低。
+
+```ts
+import Vue from "vue";
+import { VisibilityPlugin } from "@r-utils/vue2";
+
+Vue.use(VisibilityPlugin);
+```
+
+也可以使用默认导出：
+
+```ts
+import Vue from "vue";
+import VisibilityPlugin from "@r-utils/vue2";
+
+Vue.use(VisibilityPlugin);
+```
+
+### 兼容：子路径导入
+
+如果你希望模块边界更清晰，也可以使用子路径导入。两种方式都支持。
+
+```ts
+import Vue from "vue";
+import VisibilityPlugin from "@r-utils/vue2/plugins/visibility";
+
+Vue.use(VisibilityPlugin);
+```
+
+## 当前能力
+
+| 子路径 | 说明 |
+| --- | --- |
+| `@r-utils/vue2/plugins/visibility` | 基于页面可见性变更触发 `onShow` / `onHide` |
+
+## 使用示例
+
+```ts
+export default {
+  onShow() {
+    console.log("页面显示");
+  },
+  onHide() {
+    console.log("页面隐藏");
+  },
+};
+```
+
+## 注意事项
+
+- 推荐优先使用根入口导入；如果需要更精确的模块边界，也可以使用子路径导入。
+- 本包依赖 Vue2，请确保业务项目已安装兼容版本的 `vue`。

packages/vue2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@r-utils/vue2",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": false,
   "description": "Vue2工具库",
   "type": "module",
@@ -8,13 +8,20 @@
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "sideEffects": false,
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     },
-    "./*": "./*"
+    "./plugins/visibility": {
+      "types": "./dist/plugins/visibility/index.d.ts",
+      "import": "./dist/plugins/visibility/index.mjs",
+      "require": "./dist/plugins/visibility/index.cjs"
+    }
   },
   "keywords": [
     "vue2"
@@ -43,8 +50,9 @@
   "scripts": {
     "build": "vite build",
     "watch": "vite build --watch",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
     "lint": "eslint --ext .js,ts --fix src",
-    "release": "standard-version",
+    "format": "prettier --write src",
     "commit": "cz",
     "lint-staged": "lint-staged",
     "test": "vitest run"

packages/vue2/src/plugins/visibility/index.d.ts

@@ -0,0 +1,22 @@
+import type Vue from "vue";
+import type { PluginObject, VueConstructor } from "vue";
+
+declare module "vue/types/options" {
+  interface ComponentOptions<V extends Vue> {
+    /** 页面变为可见时触发的生命周期钩子 */
+    onShow?: (this: V) => void;
+    /** 页面变为隐藏时触发的生命周期钩子 */
+    onHide?: (this: V) => void;
+  }
+}
+
+/** 安装页面可见性生命周期插件 */
+export declare function install(Vue: VueConstructor): void;
+
+/** 页面可见性生命周期插件 */
+declare const VisibilityPlugin: PluginObject<never> & {
+  /** 安装页面可见性生命周期插件 */
+  install: typeof install;
+};
+
+export default VisibilityPlugin;

packages/vue2/src/plugins/visibility/index.js

@@ -1,3 +1,7 @@
+/**
+ * 安装页面可见性生命周期插件
+ * @param {import("vue").VueConstructor} Vue Vue2 构造器
+ */
 function install(Vue) {
   Vue.mixin({
     created() {
@@ -8,14 +12,14 @@ function install(Vue) {
         this.visibilitychangeCallback();
         document.addEventListener(
           "visibilitychange",
-          this.visibilitychangeCallback
+          this.visibilitychangeCallback,
         );
       }
     },
     destroyed() {
       document.removeEventListener(
         "visibilitychange",
-        this.visibilitychangeCallback
+        this.visibilitychangeCallback,
       );
     },
     methods: {

packages/vue2/tsconfig.json

@@ -6,6 +6,6 @@
     "baseUrl": "./",
     "paths": {
       "@/*": ["src/*"]
-    },
+    }
   }
 }

packages/vue2/vite.config.ts

@@ -1,31 +1,43 @@
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
-import { resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+import { resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 
-const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
 
 export default defineConfig({
   build: {
     lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
-      formats: ['es', 'cjs'],
-      fileName: (format) => `index.${format === 'es' ? 'mjs' : 'cjs'}`,
+      entry: {
+        index: resolve(__dirname, "src/index.ts"),
+        "plugins/visibility/index": resolve(
+          __dirname,
+          "src/plugins/visibility/index.js",
+        ),
+      },
+      formats: ["es", "cjs"],
+      fileName: (format, entryName) =>
+        `${entryName}.${format === "es" ? "mjs" : "cjs"}`,
     },
     rollupOptions: {
-      external: ['vue', 'lodash'],
+      external: ["vue", "lodash"],
+      output: {
+        chunkFileNames: "chunks/[name]-[hash].js",
+        assetFileNames: "assets/[name]-[hash][extname]",
+        exports: "named",
+      },
     },
     sourcemap: true,
   },
   resolve: {
     alias: {
-      '@': resolve(__dirname, 'src'),
+      "@": resolve(__dirname, "src"),
     },
   },
   plugins: [
     dts({
-      include: ['src'],
-      outDir: 'dist',
+      include: ["src"],
+      outDir: "dist",
     }),
   ],
 });