@amriogit/injector 0.2.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，无运行时依赖

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,6 +1,6 @@
 {
   "name": "@amriogit/injector",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "轻量 DI 容器 — Injector, BaseService, InjectionToken。零外部依赖，支持 SSR，Vue 集成。",
   "keywords": [
@@ -24,7 +24,8 @@
   "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"
@@ -33,7 +34,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "vue": "^3.4.0"
+    "vue": "^2.6.0 || ^3.4.0"
   },
   "peerDependenciesMeta": {
     "vue": {
@@ -47,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"