增加Computed装饰器

Author: kaokei

README.md

@@ -43,4 +43,19 @@ npm install @kaokei/use-vue-service @kaokei/di
 
 ## todo
 
-支持ssr功能 https://pinia.vuejs.org/zh/ssr/
+1. 支持ssr功能 https://pinia.vuejs.org/zh/ssr/
+
+1. getter支持缓存，使用computed支持缓存
+
+应该在use-vue-service中实现
+
+https://yuanbao.tencent.com/bot/app/share/chat/tUbGmhHdY1Ta
+
+2. 优化 https://github.com/kaokei/utils/blob/main/src/index.ts 的文档
+
+
+```ts
+function useAppService<T>(token: interfaces.ServiceIdentifier<T>, app: any) {
+  return app.runWithContext(() => useService(token));
+}
+```

docs/notes/DeepSeek支持SSR的方案.md

@@ -185,3 +185,9 @@ if (import.meta.server) {
 9. 需要研究container.snapshort是否容易实现，以及是否包含子容器的snapshort
 
 10. 需要研究angular是怎么支持ssr的
+
+11. container需要有一个唯一ID，binding需要一个唯一ID。
+需要提供一个serializeState方法，可以序列化所有的container-binding-cache对象。
+需要在useService方法中根据容器唯一ID，binding唯一ID，从水合数据中找到对应的初始化数据。
+可能需要在useService/useRootService中向ssr context中注册cache对象，ssr context --> container id --> binding id --> cache
+通过这样的结构，方便序列化和反序列化

src/component-container.ts

@@ -1,15 +1,15 @@
-import { ComponentInternalInstance } from 'vue';
-import { Container } from '@kaokei/di';
+import type { ComponentInternalInstance } from 'vue';
+import type { Container } from '@kaokei/di';
 
-const key = Symbol('container');
+const map = new WeakMap<ComponentInternalInstance, Container>();
 
 export function setContainer(
   component: ComponentInternalInstance,
   container: Container
 ) {
-  (component as any)[key] = container;
+  map.set(component, container);
 }
 
 export function getContainer(component: ComponentInternalInstance) {
-  return (component as any)[key];
+  return map.get(component);
 }

src/computed.ts

@@ -0,0 +1,49 @@
+import { computed, reactive } from 'vue';
+
+const map = new WeakMap<object, Map<string, any>>();
+
+export function Computed(
+  _target: any,
+  key: string,
+  descriptor: PropertyDescriptor
+) {
+  const originalGet = descriptor.get!;
+  const originalSet = descriptor.set;
+
+  return {
+    configurable: true,
+    enumerable: true,
+    get<T, S = T>() {
+      const that = reactive(this);
+
+      if (!map.has(that)) {
+        map.set(that, new Map());
+      }
+
+      const keyRefMap = map.get(that)!;
+      let computedRef = keyRefMap.get(key);
+
+      if (!computedRef) {
+        if (originalSet) {
+          computedRef = computed({
+            get: () => originalGet.call(that) as T,
+            set: (v: S) => originalSet.call(that, v),
+          });
+        } else {
+          computedRef = computed<T>(() => originalGet.call(that));
+        }
+        keyRefMap.set(key, computedRef);
+      }
+
+      return computedRef.value;
+    },
+    set<T>(value: T) {
+      const that = reactive(this);
+      const computedRef = map.get(that)?.get(key);
+
+      if (computedRef && originalSet) {
+        computedRef.value = value;
+      }
+    },
+  } as PropertyDescriptor;
+}

src/constants.ts

@@ -1,5 +1,5 @@
-import { Container, Token } from '@kaokei/di';
-import { ComponentInternalInstance } from 'vue';
+import { type Container, Token } from '@kaokei/di';
+import type { ComponentInternalInstance } from 'vue';
 import { createContainer } from './utils';
 
 // 给依赖注入库使用的token

src/core.ts

@@ -6,7 +6,7 @@ import {
   hasInjectionContext,
   App,
 } from 'vue';
-import { Container } from '@kaokei/di';
+import type { Container } from '@kaokei/di';
 import type { Newable, CommonToken } from '@kaokei/di';
 import { createContainer } from './utils';
 import { CONTAINER_TOKEN, DEFAULT_CONTAINER } from './constants';
@@ -23,8 +23,7 @@ function bindProviders(container: Container, providers: Provider) {
     providers(container);
   } else {
     for (let i = 0; i < providers.length; i++) {
-      const s = providers[i];
-      container.bind(s).toSelf();
+      container.bind(providers[i]).toSelf();
     }
   }
 }
@@ -56,9 +55,7 @@ function getCurrentContainer(): Container | undefined {
 // 直接借助vue的inject方法
 function getProvideContainer(): Container {
   if (hasInjectionContext()) {
-    const token = CONTAINER_TOKEN;
-    const defaultValue = DEFAULT_CONTAINER;
-    return inject(token, defaultValue);
+    return inject(CONTAINER_TOKEN, DEFAULT_CONTAINER);
   } else {
     throw new Error('getProvideContainer 只能在 setup 中使用');
   }
@@ -74,7 +71,7 @@ export function useRootService<T>(token: CommonToken<T>) {
 }
 
 export function useAppService<T>(token: CommonToken<T>, app: App) {
-  return app.runWithContext(() => useService(token));
+  return app.runWithContext(() => getProvideContainer().get(token));
 }
 
 export function declareProviders(providers: FunctionProvider): void;

src/find-service.ts

@@ -1,5 +1,5 @@
 import type { CommonToken } from '@kaokei/di';
-import {
+import type {
   VNode,
   VNodeChild,
   VNodeArrayChildren,

src/index.ts

@@ -11,3 +11,5 @@ export {
   useAppService,
   useRootService,
 } from './core';
+
+export { Computed } from './computed';

src/utils.ts

@@ -1,5 +1,5 @@
 import { Container } from '@kaokei/di';
-import { reactive, ComponentInternalInstance, markRaw } from 'vue';
+import { reactive, type ComponentInternalInstance, markRaw } from 'vue';
 import { setContainer } from './component-container';
 import { CURRENT_COMPONENT, CURRENT_CONTAINER } from './constants';
 
@@ -20,6 +20,7 @@ export function createContainer(
   }
   if (instance) {
     // 组件实例绑定容器-方便后续通过组件实例获取容器对象
+    // 目前只是提供给findService使用
     setContainer(instance, container);
     // 容器绑定组件实例-方便后续通过依赖注入获取当前组件实例
     container.bind(CURRENT_COMPONENT).toConstantValue(markRaw(instance));

tests/test20/demo.test.ts

@@ -0,0 +1,200 @@
+import { Computed } from '@/index';
+import { reactive } from 'vue';
+
+describe('test20', () => {
+  it('get DemoService instance', async () => {
+    class DemoService {
+      public id = 1;
+      public name = 'demo';
+
+      public get age() {
+        return this.getAge() + 100;
+      }
+
+      public getAge() {
+        return this.id + 10;
+      }
+    }
+
+    const spyOnGetAge = vi.spyOn(DemoService.prototype, 'getAge');
+
+    const demo = new DemoService();
+    const reactiveDemo = demo;
+
+    expect(reactiveDemo).toBeInstanceOf(DemoService);
+
+    expect(reactiveDemo.id).toBe(1);
+    expect(reactiveDemo.name).toBe('demo');
+
+    expect(spyOnGetAge).not.toHaveBeenCalled();
+
+    expect(reactiveDemo.age).toBe(111);
+
+    expect(spyOnGetAge).toHaveBeenCalledOnce();
+
+    reactiveDemo.id = 2;
+
+    expect(spyOnGetAge).toHaveBeenCalledOnce();
+
+    expect(reactiveDemo.age).toBe(112);
+
+    expect(spyOnGetAge).toHaveBeenCalledTimes(2);
+
+    expect(reactiveDemo.age).toBe(112);
+
+    expect(spyOnGetAge).toHaveBeenCalledTimes(3);
+  });
+
+  it('get DemoService instance', async () => {
+    class DemoService {
+      public id = 1;
+      public name = 'demo';
+
+      @Computed
+      public get age() {
+        return this.getAge() + 100;
+      }
+
+      public getAge() {
+        return this.id + 10;
+      }
+    }
+
+    const spyOnGetAge = vi.spyOn(DemoService.prototype, 'getAge');
+
+    const demo = new DemoService();
+    const reactiveDemo = demo;
+
+    expect(reactiveDemo).toBeInstanceOf(DemoService);
+
+    expect(reactiveDemo.id).toBe(1);
+    expect(reactiveDemo.name).toBe('demo');
+
+    expect(spyOnGetAge).not.toHaveBeenCalled();
+
+    expect(reactiveDemo.age).toBe(111);
+
+    expect(spyOnGetAge).toHaveBeenCalledOnce();
+
+    reactiveDemo.id = 2;
+
+    expect(spyOnGetAge).toHaveBeenCalledOnce();
+
+    expect(reactiveDemo.age).toBe(111);
+
+    expect(spyOnGetAge).toHaveBeenCalledTimes(1);
+
+    expect(reactiveDemo.age).toBe(111);
+
+    expect(spyOnGetAge).toHaveBeenCalledTimes(1);
+  });
+
+  it('get DemoService instance', async () => {
+    class DemoService {
+      public id = 1;
+      public name = 'demo';
+
+      @Computed
+      public get age() {
+        return this.getAge() + 100;
+      }
+
+      public getAge() {
+        return this.id + 10;
+      }
+    }
+
+    const spyOnGetAge = vi.spyOn(DemoService.prototype, 'getAge');
+
+    const demo = new DemoService();
+    const reactiveDemo = reactive(demo);
+
+    expect(reactiveDemo).toBeInstanceOf(DemoService);
+
+    expect(reactiveDemo.id).toBe(1);
+    expect(reactiveDemo.name).toBe('demo');
+
+    expect(spyOnGetAge).not.toHaveBeenCalled();
+
+    expect(reactiveDemo.age).toBe(111);
+
+    expect(spyOnGetAge).toHaveBeenCalledOnce();
+
+    reactiveDemo.id = 2;
+
+    expect(spyOnGetAge).toHaveBeenCalledOnce();
+
+    expect(reactiveDemo.age).toBe(112);
+
+    expect(spyOnGetAge).toHaveBeenCalledTimes(2);
+
+    expect(reactiveDemo.age).toBe(112);
+
+    expect(spyOnGetAge).toHaveBeenCalledTimes(2);
+  });
+
+  it('get DemoService instance', async () => {
+    class DemoService {
+      public id = 1;
+      public name = 'demo';
+
+      @Computed
+      public get age() {
+        return this.getAge() + 100;
+      }
+
+      @Computed
+      public get age2() {
+        return this.getAge() + 200;
+      }
+
+      public getAge() {
+        return this.id + 10;
+      }
+    }
+
+    const spyOnGetAge = vi.spyOn(DemoService.prototype, 'getAge');
+
+    const demo = new DemoService();
+    const reactiveDemo = reactive(demo);
+
+    expect(reactiveDemo).toBeInstanceOf(DemoService);
+
+    expect(reactiveDemo.id).toBe(1);
+    expect(reactiveDemo.name).toBe('demo');
+
+    expect(spyOnGetAge).not.toHaveBeenCalled();
+
+    expect(reactiveDemo.age).toBe(111);
+
+    expect(spyOnGetAge).toHaveBeenCalledOnce();
+
+    reactiveDemo.id = 2;
+
+    expect(spyOnGetAge).toHaveBeenCalledOnce();
+
+    expect(reactiveDemo.age).toBe(112);
+
+    expect(spyOnGetAge).toHaveBeenCalledTimes(2);
+
+    expect(reactiveDemo.age).toBe(112);
+
+    expect(spyOnGetAge).toHaveBeenCalledTimes(2);
+
+    expect(reactiveDemo.age2).toBe(212);
+
+    expect(spyOnGetAge).toHaveBeenCalledTimes(3);
+
+    expect(reactiveDemo.age2).toBe(212);
+
+    expect(spyOnGetAge).toHaveBeenCalledTimes(3);
+
+    expect(reactiveDemo.age).toBe(112);
+
+    expect(spyOnGetAge).toHaveBeenCalledTimes(3);
+
+    expect(reactiveDemo.age).toBe(112);
+
+    expect(spyOnGetAge).toHaveBeenCalledTimes(3);
+  });
+});