Slot: Strengthen type checking for lazy components

Author: chaance

packages/react/slot/src/slot.tsx

@@ -11,28 +11,39 @@ const REACT_LAZY_TYPE = Symbol.for('react.lazy');
 
 interface LazyReactElement extends React.ReactElement {
   $$typeof: typeof REACT_LAZY_TYPE;
-  _payload: any;
+  _payload: PromiseLike<Exclude<React.ReactNode, PromiseLike<any>>>;
 }
 
 /* -------------------------------------------------------------------------------------------------
  * Slot
  * -----------------------------------------------------------------------------------------------*/
 
+export type Usable<T> = PromiseLike<T> | React.Context<T>;
+const use: typeof React.use | undefined = (React as any)[' use '.trim().toString()];
+
 interface SlotProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
 }
 
+function isPromiseLike(value: unknown): value is PromiseLike<unknown> {
+  return typeof value === 'object' && value !== null && 'then' in value;
+}
+
 function isLazyComponent(element: React.ReactNode): element is LazyReactElement {
-  // has to be done in a roundabout way unless we want to add a dependency on react-is
-  return React.isValidElement(element) && element.$$typeof === REACT_LAZY_TYPE;
+  return (
+    React.isValidElement(element) &&
+    element.$$typeof === REACT_LAZY_TYPE &&
+    '_payload' in element &&
+    isPromiseLike(element._payload)
+  );
 }
 
 /* @__NO_SIDE_EFFECTS__ */ export function createSlot(ownerName: string) {
   const SlotClone = createSlotClone(ownerName);
   const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
     let { children, ...slotProps } = props;
-    if (isLazyComponent(children)) {
-      children = React.use(children._payload);
+    if (isLazyComponent(children) && typeof use === 'function') {
+      children = use(children._payload);
     }
     const childrenArray = React.Children.toArray(children);
     const slottable = childrenArray.find(isSlottable);
@@ -87,8 +98,8 @@ interface SlotCloneProps {
 /* @__NO_SIDE_EFFECTS__ */ function createSlotClone(ownerName: string) {
   const SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {
     let { children, ...slotProps } = props;
-    if (isLazyComponent(children)) {
-      children = React.use(children._payload);
+    if (isLazyComponent(children) && typeof use === 'function') {
+      children = use(children._payload);
     }
 
     if (React.isValidElement(children)) {