Match-id-de922008e8fef2a8ddf05c5832cc1b7e4c58ac33

libs/horizon/index.ts

@@ -30,7 +30,16 @@ import {
 import { asyncUpdates } from './src/renderer/TreeBuilder';
 import { callRenderQueueImmediate } from './src/renderer/taskExecutor/RenderQueue';
 import { runAsyncEffects } from './src/renderer/submit/HookEffectHandler';
-
+import {
+  isContextProvider,
+  isContextConsumer,
+  isElement,
+  isForwardRef,
+  isFragment,
+  isLazy,
+  isMemo,
+  isPortal,
+} from './src/external/HorizonIs';
 import { createStore, useStore, clearStore } from './src/horizonx/store/StoreHandler';
 import * as reduxAdapter from './src/horizonx/adapters/redux';
 import { watch } from './src/horizonx/proxy/watch';
@@ -87,6 +96,14 @@ const Horizon = {
   clearStore,
   reduxAdapter,
   watch,
+  isFragment,
+  isElement,
+  isForwardRef,
+  isLazy,
+  isMemo,
+  isPortal,
+  isContextProvider,
+  isContextConsumer
 };
 
 export const version = __VERSION__;
@@ -128,6 +145,15 @@ export {
   clearStore,
   reduxAdapter,
   watch,
+  // 兼容ReactIs
+  isFragment,
+  isElement,
+  isForwardRef,
+  isLazy,
+  isMemo,
+  isPortal,
+  isContextProvider,
+  isContextConsumer
 };
 
 export default Horizon;

libs/horizon/src/external/HorizonIs.ts

@@ -0,0 +1,80 @@
+/*
+ * Copyright (c) Huawei Technologies Co., Ltd. 2022-2022. All rights reserved.
+ */
+import {
+  TYPE_COMMON_ELEMENT,
+  TYPE_CONTEXT,
+  TYPE_FORWARD_REF,
+  TYPE_FRAGMENT,
+  TYPE_LAZY,
+  TYPE_MEMO,
+  TYPE_PORTAL,
+  TYPE_PROVIDER,
+  TYPE_SUSPENSE,
+} from './JSXElementType';
+
+function isObject(anyThing) {
+  return Object.prototype.toString.call(anyThing) === '[object Object]';
+}
+
+/**
+ * 获取传入的element的类型
+ * 1. fragment, suspense 属于内置标签，类型位于type
+ * 2. memo, lazy, forwardRef 属于包装函数，产生新的对象，类型位于type.vtype
+ * 3. Context.Provider/Consumer 的类型是框架定义的对象，类型位于type.vtype
+ * 4. portal比较特殊，函数结果直接可以作为element，类型位于vtype
+ * @param ele
+ */
+function getType(ele: any) {
+  if (isObject(ele)) {
+    const type = ele.type;
+    if ([TYPE_FRAGMENT, TYPE_SUSPENSE].includes(type)) {
+      return type;
+    }
+
+    const vtypeOfType = type?.vtype;
+    if ([TYPE_MEMO, TYPE_PROVIDER, TYPE_LAZY, TYPE_FORWARD_REF, TYPE_CONTEXT].includes(vtypeOfType)) {
+      return vtypeOfType;
+    }
+
+    const vtype = ele.vtype;
+    if(TYPE_PORTAL === vtype) {
+      return vtype;
+    }
+  }
+
+  return undefined;
+}
+
+export function isElement(ele: any) {
+  return isObject(ele) && ele.vtype === TYPE_COMMON_ELEMENT;
+}
+
+export function isFragment(ele: any) {
+  return getType(ele) === TYPE_FRAGMENT;
+}
+
+export function isForwardRef(ele: any) {
+  return getType(ele) === TYPE_FORWARD_REF;
+}
+
+export function isLazy(ele: any) {
+  return getType(ele) === TYPE_LAZY;
+}
+
+export function isMemo(ele: any) {
+  return getType(ele) === TYPE_MEMO;
+}
+
+export function isPortal(ele: any) {
+  return getType(ele) === TYPE_PORTAL;
+}
+
+export function isContextProvider(ele: any) {
+  return getType(ele) === TYPE_PROVIDER;
+}
+
+// Context.consumer的类型就是context的类型
+export function isContextConsumer(ele: any) {
+  return getType(ele) === TYPE_CONTEXT;
+}

scripts/__tests__/HorizonIsTest/index.test.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) Huawei Technologies Co., Ltd. 2022-2022. All rights reserved.
+ */
+
+import * as Horizon from '@cloudsop/horizon/index.ts';
+
+function App() {
+  return <></>;
+}
+
+describe('HorizonIs', () => {
+  it('should identify horizon elements', () => {
+    expect(Horizon.isElement(<div />)).toBe(true);
+    expect(Horizon.isElement('span')).toBe(false);
+    expect(Horizon.isElement(111)).toBe(false);
+    expect(Horizon.isElement(false)).toBe(false);
+    expect(Horizon.isElement(null)).toBe(false);
+    expect(Horizon.isElement([])).toBe(false);
+    expect(Horizon.isElement({})).toBe(false);
+    expect(Horizon.isElement(undefined)).toBe(false);
+
+    const TestContext = Horizon.createContext(false);
+    expect(Horizon.isElement(<TestContext.Provider />)).toBe(true);
+    expect(Horizon.isElement(<TestContext.Consumer />)).toBe(true);
+    expect(Horizon.isElement(<></>)).toBe(true);
+    expect(Horizon.isElement(<Horizon.Suspense />)).toBe(true);
+  });
+
+  it('should identify Fragment', () => {
+    expect(Horizon.isFragment(<></>)).toBe(true);
+  });
+
+  it('should identify memo component', () => {
+    const MemoComp = Horizon.memo(App);
+    expect(Horizon.isMemo(<MemoComp />)).toBe(true);
+  });
+
+  it('should identify forwardRef', () => {
+    const ForwardRefComp = Horizon.forwardRef(App);
+    expect(Horizon.isForwardRef(<ForwardRefComp />)).toBe(true);
+  });
+
+  it('should identify lazy', () => {
+    const LazyComp = Horizon.lazy(() => App);
+    expect(Horizon.isLazy(<LazyComp />)).toBe(true);
+  });
+
+  it('should identify portal', () => {
+    const portal = Horizon.createPortal(<div />, container);
+    expect(Horizon.isPortal(portal)).toBe(true);
+  });
+
+  it('should identify ContextProvider', () => {
+    const TestContext = Horizon.createContext(false);
+    expect(Horizon.isContextProvider(<TestContext.Provider />)).toBe(true);
+    expect(Horizon.isContextProvider(<TestContext.Consumer />)).toBe(false);
+    expect(Horizon.isContextConsumer(<TestContext.Provider />)).toBe(false);
+    expect(Horizon.isContextConsumer(<TestContext.Consumer />)).toBe(true);
+  });
+});