@amriogit/injector 0.1.0 → 0.3.0

package/README.md

@@ -61,6 +61,37 @@ const userService = useInject(UserService)
 useProvide(UserService, MockUserService)
 ```
 
+### Vue 2 集成
+
+```ts
+import Vue from 'vue'
+import { ServicePlugin, mapInject } from '@amriogit/injector/vue2'
+
+// 安装插件
+Vue.use(ServicePlugin, {
+  setup(injector) {
+    injector.provide(API_BASE, '/api')
+  },
+})
+
+// 使用 mapInject 在 computed 中批量声明依赖
+export default {
+  computed: {
+    ...mapInject({ UserService, ChannelService }),
+  },
+  created() {
+    this.userService.fetchUsers()
+    this.channelService.load()
+  },
+}
+```
+
+#### Vue 2 注意事项
+
+1. **推荐 `mapInject`**：批量声明、自动 camelCase 转换、类型安全
+2. **无额外依赖**：不依赖 Composition API，Vue 2.0+ 通用
+3. **自动清理**：根组件销毁时自动调用 `injector.reset()`，触发所有 Service 的 `onDestroy` 钩子
+
 ## 特性
 
 - **零依赖** — 纯 TypeScript，无运行时依赖
@@ -71,6 +102,87 @@ useProvide(UserService, MockUserService)
 - **生命周期** — `onInit()` 钩子在依赖就绪后调用
 - **SSR 兼容** — 无 DOM 依赖，InjectionToken 可序列化
 
+## 生命周期
+
+### onInit — 初始化
+
+`onInit()` 在 Service 构造完成、所有 `$inject()` 依赖就绪后自动调用。不要在构造函数中做初始化逻辑。
+
+```ts
+import { BaseService } from '@amriogit/injector'
+
+class TimerService extends BaseService {
+  private logger = this.$inject(LoggerService)
+  private intervalId?: ReturnType<typeof setInterval>
+
+  state = reactive({ ticks: 0 })
+
+  onInit() {
+    // 依赖已就绪，可以安全使用 this.logger
+    this.intervalId = setInterval(() => {
+      this.state.ticks++
+      this.logger.log(`tick ${this.state.ticks}`)
+    }, 1000)
+  }
+}
+```
+
+### onDestroy — 清理
+
+`onDestroy()` 在 Service 被销毁时调用，用于清理定时器、取消订阅、关闭连接等。
+
+触发方式：
+
+- **`injector.destroy(Token)`** — 销毁指定 Service 实例
+- **`injector.reset()`** — 销毁所有 Service 实例
+
+```ts
+import { BaseService, Injector, InjectionToken } from '@amriogit/injector'
+
+// WebSocket 连接示例
+class ConnectionService extends BaseService {
+  private ws?: WebSocket
+
+  connect = (url: string) => {
+    this.ws = new WebSocket(url)
+  }
+
+  onDestroy() {
+    this.ws?.close()
+    this.ws = undefined
+  }
+}
+
+// 定时器清理示例
+class PollingService extends BaseService {
+  private timer?: ReturnType<typeof setInterval>
+
+  onInit() {
+    this.timer = setInterval(() => this.poll(), 5000)
+  }
+
+  private poll = () => { /* ... */ }
+
+  onDestroy() {
+    clearInterval(this.timer)
+  }
+}
+
+const injector = new Injector()
+
+const polling = injector.inject(PollingService)
+
+// 需要替换实现时，先销毁旧实例
+injector.destroy(PollingService)
+// polling.onDestroy() 已调用，定时器已清理
+// 下次 inject(PollingService) 返回新实例
+
+// 或者一次性清理所有
+injector.reset()
+```
+
+`onDestroy` 与 `onInit` 配对使用，确保 Service 的资源生命周期可管理，防止内存泄漏。
+
 ## 测试
 
 ```bash

package/dist/injector-vue2.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Vue 2 集成层，用于对接共享 DI 核心。
+ * 与 injector.ts 分离，使服务端不打包 Vue。
+ *
+ * 通过 `Vue.use(ServicePlugin)` 安装后，所有组件实例
+ * 可使用 `this.$inject(Token)` 注入 Service。
+ *
+ * @module injector-vue2
+ */
+/**
+ * Vue 2 插件预期 `import Vue from 'vue'` 得到 Vue 2 构造函数。
+ * 当前项目 devDep 为 Vue 3（与 ./injector-vue.ts 共享），Vue 3 的 ESM
+ * 无 default export，因此需要 @ts-expect-error。
+ * 在消费方（Vue 2 项目）中，这行能正确解析。
+ */
+import VueConstructor from 'vue';
+import { Injector, InjectionToken, type Token } from './injector';
+type ClassToken<T> = {
+    new (...args: any[]): T;
+};
+type Resolved<T> = T extends InjectionToken<infer V> ? V : T extends ClassToken<infer V> ? V : never;
+/** 将 PascalCase / SCREAMING_SNAKE 转为 camelCase */
+type CamelCase<S extends string, FromSnake extends boolean = false> = S extends `${infer A}_${infer B}` ? `${Lowercase<A>}${Capitalize<CamelCase<B, true>>}` : FromSnake extends true ? Capitalize<Lowercase<S>> : Uncapitalize<S>;
+/** mapInject 的返回类型 */
+type MapInjectResult<T extends Record<string, Token<any>>> = {
+    [K in keyof T as CamelCase<K & string>]: Resolved<T[K]>;
+};
+/** 计算属性定义的类型（每个 key 对应一个 getter） */
+type ComputedGetters<T> = {
+    [K in keyof T]: (this: any) => T[K];
+};
+/**
+ * Vue 2 插件。
+ *
+ * 安装后，所有组件实例可通过 `this.$inject(Token)` 访问 Service。
+ *
+ * 通过 mixin 在根组件销毁时自动清理所有 Service 实例的 onDestroy。
+ *
+ * @example
+ * ```ts
+ * import Vue from 'vue'
+ * import { ServicePlugin } from '@amriogit/injector/vue2'
+ *
+ * Vue.use(ServicePlugin, {
+ *   setup(injector) {
+ *     injector.provide(API_BASE, '/api')
+ *   },
+ * })
+ * ```
+ *
+ * 在组件中使用（推荐 `mapInject`）：
+ * ```ts
+ * import { mapInject } from '@amriogit/injector/vue2'
+ *
+ * export default {
+ *   computed: {
+ *     ...mapInject({ UserService }),
+ *   },
+ *   created() {
+ *     this.userService.fetchUsers()
+ *   },
+ * }
+ * ```
+ */
+export declare const ServicePlugin: {
+    install(VueInstance: typeof VueConstructor, options?: {
+        setup?: (injector: Injector) => void;
+    }): void;
+};
+/**
+ * 批量声明 Service 注入，返回计算属性定义对象。
+ *
+ * 键名自动转换：`ChannelService` → `channelService`，`API_TOKEN` → `apiToken`。
+ * 配合 `...` 展开到 `computed` 中使用。
+ *
+ * @example
+ * ```ts
+ * export default {
+ *   computed: {
+ *     ...mapInject({ ChannelService, UserService, API_TOKEN }),
+ *     // 展开后等价于：
+ *     // channelService() { return this.$inject(ChannelService) },
+ *     // userService()    { return this.$inject(UserService) },
+ *     // apiToken()       { return this.$inject(API_TOKEN) },
+ *   },
+ *   created() {
+ *     this.channelService.fetchChannels()
+ *     console.log(this.apiToken)
+ *   },
+ * }
+ * ```
+ */
+export declare function mapInject<T extends Record<string, Token<any>>>(tokens: T): ComputedGetters<MapInjectResult<T>>;
+export {};

package/dist/injector-vue2.js

@@ -0,0 +1,110 @@
+/**
+ * Vue 2 集成层，用于对接共享 DI 核心。
+ * 与 injector.ts 分离，使服务端不打包 Vue。
+ *
+ * 通过 `Vue.use(ServicePlugin)` 安装后，所有组件实例
+ * 可使用 `this.$inject(Token)` 注入 Service。
+ *
+ * @module injector-vue2
+ */
+import { Injector } from './injector';
+// ─── 工具函数 ──────────────────────────────────────────────
+function toCamelCase(key) {
+    // SCREAMING_SNAKE_CASE → camelCase
+    if (key.includes('_')) {
+        return key
+            .toLowerCase()
+            .split('_')
+            .filter(Boolean)
+            .map((w, i) => (i === 0 ? w : w[0].toUpperCase() + w.slice(1)))
+            .join('');
+    }
+    // PascalCase → camelCase
+    return key[0].toLowerCase() + key.slice(1);
+}
+// ─── Vue 2 Plugin ──────────────────────────────────────────
+/**
+ * Vue 2 插件。
+ *
+ * 安装后，所有组件实例可通过 `this.$inject(Token)` 访问 Service。
+ *
+ * 通过 mixin 在根组件销毁时自动清理所有 Service 实例的 onDestroy。
+ *
+ * @example
+ * ```ts
+ * import Vue from 'vue'
+ * import { ServicePlugin } from '@amriogit/injector/vue2'
+ *
+ * Vue.use(ServicePlugin, {
+ *   setup(injector) {
+ *     injector.provide(API_BASE, '/api')
+ *   },
+ * })
+ * ```
+ *
+ * 在组件中使用（推荐 `mapInject`）：
+ * ```ts
+ * import { mapInject } from '@amriogit/injector/vue2'
+ *
+ * export default {
+ *   computed: {
+ *     ...mapInject({ UserService }),
+ *   },
+ *   created() {
+ *     this.userService.fetchUsers()
+ *   },
+ * }
+ * ```
+ */
+export const ServicePlugin = {
+    install(VueInstance, options) {
+        const injector = new Injector();
+        options?.setup?.(injector);
+        // 全局可访问：this.$injector 和 this.$inject 在所有组件实例上可用
+        VueInstance.prototype.$injector = injector;
+        VueInstance.prototype.$inject = injector.inject.bind(injector);
+        // 全局 mixin：根组件销毁时自动清理所有 Service
+        VueInstance.mixin({
+            beforeDestroy() {
+                if (this.$root === this) {
+                    injector.reset();
+                }
+            },
+        });
+    },
+};
+// ─── mapInject ─────────────────────────────────────────────
+/**
+ * 批量声明 Service 注入，返回计算属性定义对象。
+ *
+ * 键名自动转换：`ChannelService` → `channelService`，`API_TOKEN` → `apiToken`。
+ * 配合 `...` 展开到 `computed` 中使用。
+ *
+ * @example
+ * ```ts
+ * export default {
+ *   computed: {
+ *     ...mapInject({ ChannelService, UserService, API_TOKEN }),
+ *     // 展开后等价于：
+ *     // channelService() { return this.$inject(ChannelService) },
+ *     // userService()    { return this.$inject(UserService) },
+ *     // apiToken()       { return this.$inject(API_TOKEN) },
+ *   },
+ *   created() {
+ *     this.channelService.fetchChannels()
+ *     console.log(this.apiToken)
+ *   },
+ * }
+ * ```
+ */
+export function mapInject(tokens) {
+    const result = {};
+    for (const key of Object.keys(tokens)) {
+        const camelKey = toCamelCase(key);
+        const token = tokens[key];
+        result[camelKey] = function () {
+            return this.$inject(token);
+        };
+    }
+    return result;
+}

package/package.json

@@ -1,9 +1,16 @@
 {
   "name": "@amriogit/injector",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "轻量 DI 容器 — Injector, BaseService, InjectionToken。零外部依赖，支持 SSR，Vue 集成。",
-  "keywords": ["di", "dependency-injection", "injector", "typescript", "vue", "ssr"],
+  "keywords": [
+    "di",
+    "dependency-injection",
+    "injector",
+    "typescript",
+    "vue",
+    "ssr"
+  ],
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -17,14 +24,17 @@
   "types": "./dist/injector.d.ts",
   "exports": {
     ".": "./dist/injector.js",
-    "./vue": "./dist/injector-vue.js"
+    "./vue": "./dist/injector-vue.js",
+    "./vue2": "./dist/injector-vue2.js"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
-    "vue": "^3.4.0"
+    "vue": "^2.6.0 || ^3.4.0"
   },
   "peerDependenciesMeta": {
     "vue": {
@@ -38,6 +48,7 @@
     "prepublishOnly": "npm test && npm run build"
   },
   "devDependencies": {
+    "@types/vue": "^2.0.0",
     "typescript": "^5.8.3",
     "vitest": "^3.2.4",
     "vue": "^3.5.34"