fix: type not portable error

api-documents/kit.md

@@ -37,6 +37,7 @@ A toolkit for browser extension developing.
 |  [AutomatedTabTaskSharedOptions](./kit.automatedtabtasksharedoptions.md) | Shared options for AutomatedTabTask between the define-time and the runtime. |
 |  [DOMProxy](./kit.domproxy.md) | DOMProxy provide an interface that be stable even dom is changed. |
 |  [DOMProxyOptions](./kit.domproxyoptions.md) | Options for DOMProxy |
+|  [Serialization](./kit.serialization.md) | Define how to do serialization and deserialization of remote procedure call |
 
 ## Namespaces
 

api-documents/kit.messagecenter.md

@@ -22,7 +22,7 @@ export declare class MessageCenter<ITypedMessages>
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
-|  [serialization](./kit.messagecenter.serialization.md) |  | <code>import(&quot;async-call-rpc&quot;).Serialization</code> | How should MessageCenter serialization the message |
+|  [serialization](./kit.messagecenter.serialization.md) |  | <code>Serialization</code> | How should MessageCenter serialization the message |
 |  [writeToConsole](./kit.messagecenter.writetoconsole.md) |  | <code>boolean</code> | Should MessageCenter prints all messages to console? |
 
 ## Methods

api-documents/kit.messagecenter.serialization.md

@@ -9,5 +9,5 @@ How should MessageCenter serialization the message
 <b>Signature:</b>
 
 ```typescript
-serialization: import("async-call-rpc").Serialization;
+serialization: Serialization;
 ```

api-documents/kit.serialization.deserialization.md

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@holoflows/kit](./kit.md) &gt; [Serialization](./kit.serialization.md) &gt; [deserialization](./kit.serialization.deserialization.md)
+
+## Serialization.deserialization() method
+
+Do deserialization
+
+<b>Signature:</b>
+
+```typescript
+deserialization(serialized: unknown): PromiseLike<any>;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  serialized | <code>unknown</code> | Serialized data |
+
+<b>Returns:</b>
+
+`PromiseLike<any>`
+

api-documents/kit.serialization.md

@@ -0,0 +1,21 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@holoflows/kit](./kit.md) &gt; [Serialization](./kit.serialization.md)
+
+## Serialization interface
+
+Define how to do serialization and deserialization of remote procedure call
+
+<b>Signature:</b>
+
+```typescript
+export interface Serialization 
+```
+
+## Methods
+
+|  Method | Description |
+|  --- | --- |
+|  [deserialization(serialized)](./kit.serialization.deserialization.md) | Do deserialization |
+|  [serialization(from)](./kit.serialization.serialization.md) | Do serialization |
+

api-documents/kit.serialization.serialization.md

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@holoflows/kit](./kit.md) &gt; [Serialization](./kit.serialization.md) &gt; [serialization](./kit.serialization.serialization.md)
+
+## Serialization.serialization() method
+
+Do serialization
+
+<b>Signature:</b>
+
+```typescript
+serialization(from: any): PromiseLike<unknown>;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  from | <code>any</code> | original data |
+
+<b>Returns:</b>
+
+`PromiseLike<unknown>`
+

api-documents/kit.valueref.md

@@ -17,10 +17,18 @@ export declare class ValueRef<T>
 
 ```ts
 const ref = new ValueRef(64)
-function useRef() {
-    const [state, setState] = React.useState(ref.value)
-    React.useEffect(() => ref.addListener(e => setState(e)))
-    return state
+function useValueRef<T>(ref: ValueRef<T>) {
+  const { useState, useEffect } = React
+
+  const [value, setValue] = useState<T>(ref.value)
+  useEffect(() => {
+      if (ref.isEqual(value, ref.value) === false) {
+          // The state is outdated before the useEffect runs
+          setValue(ref.value)
+      }
+      return ref.addListener(v => setValue(v))
+  }, [ref, value])
+  return value
 }
 ref.value = 42 // useRef will receive the new value
 

doc/holoflows-kit.api.report.md

@@ -137,7 +137,7 @@ export class MessageCenter<ITypedMessages> {
     off<Key extends keyof ITypedMessages>(event: Key, handler: (data: ITypedMessages[Key]) => void): void;
     on<Key extends keyof ITypedMessages>(event: Key, handler: (data: ITypedMessages[Key]) => void): () => void;
     send(...args: Parameters<MessageCenter<ITypedMessages>['emit']>): ReturnType<MessageCenter<ITypedMessages>['emit']>;
-    serialization: import("async-call-rpc").Serialization;
+    serialization: Serialization;
     writeToConsole: boolean;
 }
 
@@ -160,6 +160,12 @@ export function OnlyRunInContext(context: Contexts | Contexts[], name: string):
 // @public
 export function OnlyRunInContext(context: Contexts | Contexts[], throws: false): boolean;
 
+// @public
+export interface Serialization {
+    deserialization(serialized: unknown): PromiseLike<any>;
+    serialization(from: any): PromiseLike<unknown>;
+}
+
 // @public @eventProperty
 export class ValueRef<T> {
     constructor(_value: T, isEqual?: (a: T, b: T) => boolean);

src/Extension/MessageCenter.ts

@@ -1,5 +1,20 @@
 import mitt from 'mitt'
 import { NoSerialization } from 'async-call-rpc'
+/**
+ * Define how to do serialization and deserialization of remote procedure call
+ */
+export interface Serialization {
+    /**
+     * Do serialization
+     * @param from - original data
+     */
+    serialization(from: any): PromiseLike<unknown>
+    /**
+     * Do deserialization
+     * @param serialized - Serialized data
+     */
+    deserialization(serialized: unknown): PromiseLike<any>
+}
 type InternalMessageType = {
     key: Key
     data: any
@@ -16,7 +31,7 @@ export class MessageCenter<ITypedMessages> {
      * How should MessageCenter serialization the message
      * @defaultValue NoSerialization
      */
-    public serialization = NoSerialization
+    public serialization: Serialization = NoSerialization
     private eventEmitter = mitt()
     private listener = async (request: InternalMessageType | Event) => {
         let { key, data, instanceKey } = await this.serialization.deserialization(