Match-id-d1470ad66aa6ae0abb2d033347b1f32dcb9ceab8

libs/horizon/index.ts

@@ -69,6 +69,7 @@ import {
 } from './src/dom/DOMExternal';
 
 import { syncUpdates as flushSync } from './src/renderer/TreeBuilder';
+import { toRaw } from './src/horizonx/proxy/ProxyHandler';
 
 const Horizon = {
   Children,
@@ -157,6 +158,7 @@ export {
   clearStore,
   reduxAdapter,
   watch,
+  toRaw,
   // 兼容ReactIs
   isFragment,
   isElement,

libs/horizon/src/horizonx/Constants.ts

@@ -13,4 +13,6 @@
  * See the Mulan PSL v2 for more details.
  */
 
-export const OBSERVER_KEY = '_horizonObserver';
+export const OBSERVER_KEY = typeof Symbol === 'function' ? Symbol('_horizonObserver') : '_horizonObserver';
+
+export const RAW_VALUE = '_rawValue';

libs/horizon/src/horizonx/proxy/ProxyHandler.ts

@@ -20,7 +20,7 @@ import { isArray, isCollection, isObject } from '../CommonUtils';
 import { createArrayProxy } from './handlers/ArrayProxyHandler';
 import { createCollectionProxy } from './handlers/CollectionProxyHandler';
 import type { IObserver } from '../types';
-import { OBSERVER_KEY } from '../Constants';
+import { OBSERVER_KEY, RAW_VALUE } from '../Constants';
 
 // 保存rawObj -> Proxy
 const proxyMap = new WeakMap();
@@ -31,6 +31,18 @@ export function getObserver(rawObj: any): Observer {
   return rawObj[OBSERVER_KEY];
 }
 
+const setObserverKey = typeof OBSERVER_KEY === 'string'
+  ? (rawObj, observer) => {
+    Object.defineProperty(rawObj, OBSERVER_KEY, {
+      configurable: false,
+      enumerable: false,
+      value: observer,
+    });
+  }
+  : (rawObj, observer) => {
+    rawObj[OBSERVER_KEY] = observer;
+  };
+
 export function createProxy(rawObj: any, listener: { current: (...args) => any }, isHookObserver = true): any {
   // 不是对象（是原始数据类型）不用代理
   if (!(rawObj && isObject(rawObj))) {
@@ -52,7 +64,7 @@ export function createProxy(rawObj: any, listener: { current: (...args) => any }
   let observer: IObserver = getObserver(rawObj);
   if (!observer) {
     observer = isHookObserver ? new Observer() : new HooklessObserver();
-    rawObj[OBSERVER_KEY] = observer;
+    setObserverKey(rawObj, observer);
   }
 
   hookObserverMap.set(rawObj, isHookObserver);
@@ -96,3 +108,7 @@ export function createProxy(rawObj: any, listener: { current: (...args) => any }
 
   return proxyObj;
 }
+
+export function toRaw<T>(observed: T): T {
+  return observed && (observed)[RAW_VALUE];
+}

libs/horizon/src/horizonx/proxy/handlers/ArrayProxyHandler.ts

@@ -17,7 +17,7 @@ import { createProxy, getObserver, hookObserverMap } from '../ProxyHandler';
 import { isSame, isValidIntegerKey } from '../../CommonUtils';
 import { resolveMutation } from '../../CommonUtils';
 import { isPanelActive } from '../../devtools';
-import { OBSERVER_KEY } from '../../Constants';
+import { OBSERVER_KEY, RAW_VALUE } from '../../Constants';
 
 function set(rawObj: any[], key: string, value: any, receiver: any) {
   const oldValue = rawObj[key];
@@ -137,6 +137,10 @@ export function createArrayProxy(rawObj: any[], listener: { current: (...args) =
       return objectGet(rawObj, key, receiver);
     }
 
+    if (key === RAW_VALUE) {
+      return rawObj;
+    }
+
     return Reflect.get(rawObj, key, receiver);
   }
 

libs/horizon/src/horizonx/proxy/handlers/MapProxy.ts

@@ -17,6 +17,7 @@ import { createProxy, getObserver, hookObserverMap } from '../ProxyHandler';
 import { isSame } from '../../CommonUtils';
 import { resolveMutation } from '../../CommonUtils';
 import { isPanelActive } from '../../devtools';
+import { RAW_VALUE } from '../../Constants';
 
 const COLLECTION_CHANGE = '_collectionChange';
 
@@ -388,6 +389,10 @@ export function createMapProxy(
       };
     }
 
+    if (key === RAW_VALUE) {
+      return rawObj;
+    }
+
     return Reflect.get(rawObj, key, receiver);
   }
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

libs/horizon/src/horizonx/proxy/handlers/ObjectProxyHandler.ts

@@ -15,7 +15,7 @@
 
 import { isSame, resolveMutation } from '../../CommonUtils';
 import { createProxy, getObserver, hookObserverMap } from '../ProxyHandler';
-import { OBSERVER_KEY } from '../../Constants';
+import { OBSERVER_KEY, RAW_VALUE } from '../../Constants';
 import { isPanelActive } from '../../devtools';
 
 function set(rawObj: object, key: string, value: any, receiver: any): boolean {
@@ -78,6 +78,10 @@ export function createObjectProxy<T extends object>(
       };
     }
 
+    if (key === RAW_VALUE) {
+      return rawObj;
+    }
+
     observer.useProp(key);
 
     const value = Reflect.get(rawObj, key, receiver);

libs/horizon/src/horizonx/proxy/handlers/SetProxy.ts

@@ -15,6 +15,7 @@
 
 import { resolveMutation } from '../../CommonUtils';
 import { createProxy, getObserver, hookObserverMap } from '../ProxyHandler';
+import { RAW_VALUE } from '../../Constants';
 
 const COLLECTION_CHANGE = '_collectionChange';
 
@@ -179,6 +180,11 @@ export function createSetProxy<T extends object>(
         };
       };
     }
+
+    if (key === RAW_VALUE) {
+      return rawObj;
+    }
+
     return Reflect.get(rawObj, key, receiver);
   }
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

libs/horizon/src/horizonx/proxy/handlers/WeakMapProxy.ts

@@ -17,6 +17,7 @@ import { createProxy, getObserver, hookObserverMap } from '../ProxyHandler';
 import { isSame } from '../../CommonUtils';
 import { resolveMutation } from '../../CommonUtils';
 import { isPanelActive } from '../../devtools';
+import { RAW_VALUE } from '../../Constants';
 
 const COLLECTION_CHANGE = '_collectionChange';
 
@@ -96,6 +97,10 @@ export function createWeakMapProxy(
       };
     }
 
+    if (key === RAW_VALUE) {
+      return rawObj;
+    }
+
     return Reflect.get(rawObj, key, receiver);
   }
 

libs/horizon/src/horizonx/proxy/handlers/WeakSetProxy.ts

@@ -15,6 +15,7 @@
 
 import { resolveMutation } from '../../CommonUtils';
 import { createProxy, getObserver, hookObserverMap } from '../ProxyHandler';
+import { RAW_VALUE } from '../../Constants';
 
 export function createWeakSetProxy<T extends object>(
   rawObj: T,
@@ -60,6 +61,11 @@ export function createWeakSetProxy<T extends object>(
         };
       };
     }
+
+    if (key === RAW_VALUE) {
+      return rawObj;
+    }
+
     return Reflect.get(rawObj, key, receiver);
   }
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////