@edgeandnode/eds-react 1.0.0 → 1.0.2

package/src/utils/internal/resolveLazy.ts

@@ -0,0 +1,44 @@
+import { Lazy } from 'react-is'
+
+/**
+ * Whether `value` is a lazy value, which is how the React Server Components payload can encode an
+ * element passed as a prop from a server component (e.g. when it's rendered by an async server
+ * component), or the `type` of an element created by a server component (so the client can suspend
+ * on that component's code). `React.lazy()` components are lazy values too.
+ *
+ * Not to be confused with `react-is`'s `isLazy`, which checks whether an element's type is lazy.
+ */
+export function isLazy(
+  value: unknown,
+): value is { _payload: unknown; _init: (payload: unknown) => unknown } {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    '$$typeof' in value &&
+    value.$$typeof === Lazy &&
+    '_payload' in value &&
+    '_init' in value &&
+    typeof value._init === 'function'
+  )
+}
+
+/**
+ * Resolves a lazy value (see `isLazy`) to what it stands for. React resolves lazy values when
+ * rendering them, but code that inspects nodes or element types (`isValidElement`, `cloneElement`,
+ * reading `props`, comparing `type`, etc.) must resolve them first. Suspends (throws) while the
+ * value's content or code is still loading, so it must be called during render.
+ *
+ * React has no public API for this. Its `Children` utilities resolve lazy values but only keep
+ * renderable results, so they drop a function component and throw on a `memo` or `forwardRef` one.
+ * This relies on the same internal `_init` and `_payload` fields they use, which is why it's kept
+ * internal rather than offered as public API. Returns other values as is, including lazy ones in an
+ * unexpected shape.
+ *
+ * The return type is the same as the argument's because TypeScript already types a lazy value as
+ * what it resolves to.
+ */
+export function resolveLazy<Value>(value: Value): Value {
+  let resolvedValue: unknown = value
+  while (isLazy(resolvedValue)) resolvedValue = resolvedValue._init(resolvedValue._payload)
+  return resolvedValue as Value
+}

package/src/utils/isComponentType.ts

@@ -0,0 +1,27 @@
+import type { ComponentType, ReactNode } from 'react'
+import { ForwardRef, Memo } from 'react-is'
+
+import { isLazy, resolveLazy } from './internal/index.ts'
+
+/**
+ * Whether `value` is a component (function, class, `forwardRef`, or `memo`) rather than a node.
+ *
+ * Like React's `Children` utilities, this resolves lazy values (e.g. elements from server
+ * components), which suspends while one is still loading, so call it during render.
+ */
+export function isComponentType<Props>(
+  value: ReactNode | ComponentType<Props>,
+): value is ComponentType<Props> {
+  /**
+   * Unlike `react-is`'s `isValidElementType`, which returns `true` for any lazy value, resolving
+   * tells lazy components (e.g. `React.lazy()`) apart from lazy nodes.
+   */
+  if (isLazy(value)) return isComponentType(resolveLazy(value))
+  return (
+    typeof value === 'function' ||
+    (typeof value === 'object' &&
+      value !== null &&
+      '$$typeof' in value &&
+      (value.$$typeof === ForwardRef || value.$$typeof === Memo))
+  )
+}

package/src/utils/isReactNode.ts

@@ -1,6 +1,17 @@
 import { isValidElement, type ReactNode } from 'react'
 
+import { isLazy, resolveLazy } from './internal/index.ts'
+
+/**
+ * Whether `value` is a React node: `null`, `undefined`, a string, number, or boolean, an element, a
+ * lazy node (e.g. an element from a server component), or an array of these.
+ *
+ * Like React's `Children` utilities, this resolves lazy values (e.g. elements from server
+ * components), which suspends while one is still loading, so call it during render.
+ */
 export function isReactNode(value: unknown): value is ReactNode {
+  // Resolving tells lazy nodes apart from lazy components (e.g. `React.lazy()`)
+  if (isLazy(value)) return isReactNode(resolveLazy(value))
   return (
     value === null ||
     value === undefined ||

package/src/utils/reactNodeToString.ts

@@ -1,15 +1,22 @@
 import { isValidElement, type ReactElement, type ReactNode } from 'react'
 
+import { isLazy, resolveLazy } from './internal/index.ts'
+
 /**
  * Converts a `ReactNode` to a `string` representation. Extracts text content from React elements
  * recursively.
  *
  * Based on `https://github.com/sunknudsen/react-node-to-string`
  *
+ * Like React's `Children` utilities, this resolves lazy values (e.g. elements from server
+ * components), which suspends while one is still loading, so call it during render.
+ *
  * @param reactNode - The React node to convert to string.
  * @returns The string representation of the node, or empty string for null/undefined/boolean.
  */
 export function reactNodeToString(reactNode: ReactNode): string {
+  if (isLazy(reactNode)) return reactNodeToString(resolveLazy(reactNode))
+
   if (typeof reactNode === 'string') {
     return reactNode
   }

package/src/utils/styleObserver.ts

@@ -1,6 +1,6 @@
 import StyleObserver from 'style-observer'
 
-import { styleScheduler } from './styleScheduler.ts'
+import { styleScheduler } from './internal/index.ts'
 
 export interface StyleObserverRecord<T extends string = string> {
   target: Element

package/src/utils/trimReactNode.tsx

@@ -1,5 +1,7 @@
 import { Children, isValidElement, type ReactElement, type ReactNode } from 'react'
 
+import { isLazy, resolveLazy } from './internal/index.ts'
+
 type Side = 'start' | 'end' | 'both'
 
 /**
@@ -15,6 +17,9 @@ type Side = 'start' | 'end' | 'both'
  * When recursing into a non-string edge child (e.g. a nested fragment), only the corresponding side
  * is trimmed, so that whitespace which is internal to the outer node is preserved.
  *
+ * Like React's `Children` utilities, this resolves lazy values (e.g. elements from server
+ * components), which suspends while one is still loading, so call it during render.
+ *
  * @example
  *   ````tsx
  *   trimReactNode('  hello  ') // 'hello'
@@ -30,6 +35,8 @@ type Side = 'start' | 'end' | 'both'
  * @returns A new `ReactNode` with the requested edge whitespace removed.
  */
 export function trimReactNode(reactNode: ReactNode, side: Side = 'both'): ReactNode {
+  if (isLazy(reactNode)) return trimReactNode(resolveLazy(reactNode), side)
+
   // Handle primitives
   if (typeof reactNode === 'string') {
     switch (side) {

package/dist/utils/styleScheduler.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styleScheduler.d.ts","sourceRoot":"","sources":["../../src/utils/styleScheduler.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,cAAM,cAAc;IAClB,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,OAAO,CAAqB;IAEpC;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAiBzC;IAED;;;OAGG;IACH,gBAAgB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAM/D;CACF;AAGD,eAAO,MAAM,cAAc,gBAAuB,CAAA"}

package/dist/utils/styleScheduler.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styleScheduler.js","sourceRoot":"","sources":["../../src/utils/styleScheduler.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,MAAM,cAAc;IACV,KAAK,GAAkB,IAAI,CAAA;IAC3B,OAAO,GAAmB,EAAE,CAAA;IAEpC;;;;OAIG;IACH,QAAQ,CAAC,QAAoB;QAC3B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QAE3B,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,GAAG,qBAAqB,CAAC,GAAG,EAAE;gBACtC,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAA;gBAC9B,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;gBACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;gBAEjB,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAA;YACjC,CAAC,CAAC,CAAA;QACJ,CAAC;QAED,OAAO,GAAG,EAAE;YACV,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;YAC5C,IAAI,KAAK,KAAK,CAAC,CAAC;gBAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QACjD,CAAC,CAAA;IACH,CAAC;IAED;;;OAGG;IACH,gBAAgB,CAAC,OAAgB;QAC/B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;gBACjB,OAAO,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAA;YAC3C,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AAED,kDAAkD;AAClD,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,cAAc,EAAE,CAAA"}