@reckona/mreact-compat 0.0.66 → 0.0.67

package/src/suspense.ts

@@ -0,0 +1,317 @@
+import {
+  Suspense,
+  isReactCompatElement,
+  type ReactCompatElement,
+  type ReactCompatNode,
+} from "./element.js";
+import type { RootRuntime } from "./hooks.js";
+import {
+  reportReactSuspenseServerError,
+  type RenderOptions,
+} from "./hydration.js";
+import type {
+  ReconcileNode,
+  ReconcileResult,
+  ReconcileSequence,
+} from "./reconcile-types.js";
+import { syncScopedChildNodes } from "./dom-children.js";
+import { isThenable } from "./thenable.js";
+
+interface ReactSuspenseBoundary {
+  start: Comment;
+  end: Comment;
+  previousNodes?: Node[];
+  consumed: number;
+  serverError?: {
+    message: string;
+    componentStack?: string;
+  };
+}
+
+let suspensePrimaryRenderDepth = 0;
+
+export function isSuspensePrimaryRenderActive(): boolean {
+  return suspensePrimaryRenderDepth > 0;
+}
+
+export function reconcileSuspense(
+  parent: ParentNode,
+  previousNodes: readonly Node[],
+  element: ReactCompatElement,
+  runtime: RootRuntime,
+  path: string,
+  options: RenderOptions,
+  reconcileNode: ReconcileNode,
+): ReconcileResult {
+  const boundary = findReactSuspenseBoundary(previousNodes);
+  if (boundary?.serverError !== undefined) {
+    reportReactSuspenseServerError(
+      options,
+      path,
+      boundary.serverError.message,
+      boundary.serverError.componentStack,
+    );
+  }
+  const boundaryPreviousNodes =
+    boundary?.serverError === undefined
+      ? boundary?.previousNodes ?? previousNodes
+      : [];
+
+  try {
+    suspensePrimaryRenderDepth += 1;
+    let result: ReconcileResult;
+
+    try {
+      result = reconcileNode(
+        parent,
+        boundaryPreviousNodes,
+        element.props.children,
+        runtime,
+        `${path}.s`,
+        options,
+      );
+    } finally {
+      suspensePrimaryRenderDepth -= 1;
+    }
+
+    return consumeReactSuspenseBoundary(
+      boundary,
+      parent,
+      result,
+    );
+  } catch (error) {
+    if (!isThenable(error)) {
+      throw error;
+    }
+
+    error.then(
+      () => runtime.rerender(),
+      () => runtime.rerender(),
+    );
+    return consumeReactSuspenseBoundary(
+      boundary,
+      parent,
+      reconcileNode(
+        parent,
+        boundaryPreviousNodes,
+        element.props.fallback as ReactCompatNode,
+        runtime,
+        `${path}.fallback`,
+        options,
+      ),
+    );
+  }
+}
+
+export function reconcileSuspenseList(
+  parent: ParentNode,
+  previousNodes: readonly Node[],
+  element: ReactCompatElement,
+  runtime: RootRuntime,
+  path: string,
+  options: RenderOptions,
+  reconcileNode: ReconcileNode,
+  reconcileSequence: ReconcileSequence,
+): ReconcileResult {
+  if (
+    element.props.revealOrder !== "forwards" &&
+    element.props.revealOrder !== "backwards" &&
+    element.props.revealOrder !== "together"
+  ) {
+    return reconcileNode(
+      parent,
+      previousNodes,
+      element.props.children,
+      runtime,
+      `${path}.sl`,
+      options,
+    );
+  }
+
+  const children = Array.isArray(element.props.children)
+    ? element.props.children
+    : [element.props.children];
+
+  if (element.props.revealOrder === "together") {
+    return reconcileSequence(parent, previousNodes, children, runtime, `${path}.sl`, options);
+  }
+
+  const nodes: Node[] = [];
+  let previousIndex = 0;
+
+  if (element.props.revealOrder === "backwards") {
+    for (let index = children.length - 1; index >= 0; index -= 1) {
+      const child = children[index] as ReactCompatNode;
+      const result = reconcileNode(
+        parent,
+        previousNodes.slice(previousIndex),
+        child,
+        runtime,
+        `${path}.sl.${index}`,
+        options,
+      );
+      nodes.unshift(...result.nodes);
+      previousIndex += result.consumed;
+
+      if (isSuspenseFallback(child, result.nodes)) {
+        break;
+      }
+    }
+
+    return { nodes, consumed: previousIndex };
+  }
+
+  for (const [index, child] of children.entries()) {
+    const result = reconcileNode(
+      parent,
+      previousNodes.slice(previousIndex),
+      child,
+      runtime,
+      `${path}.sl.${index}`,
+      options,
+    );
+    nodes.push(...result.nodes);
+    previousIndex += result.consumed;
+
+    if (isSuspenseFallback(child, result.nodes)) {
+      break;
+    }
+  }
+
+  return { nodes, consumed: previousIndex };
+}
+
+function findReactSuspenseBoundary(
+  previousNodes: readonly Node[],
+): ReactSuspenseBoundary | undefined {
+  const startIndex = previousNodes.findIndex(isReactSuspenseStartComment);
+
+  if (startIndex < 0) {
+    return undefined;
+  }
+
+  let depth = 0;
+
+  for (let index = startIndex; index < previousNodes.length; index += 1) {
+    const node = previousNodes[index];
+
+    if (isReactSuspenseStartComment(node)) {
+      depth += 1;
+      continue;
+    }
+
+    if (isReactSuspenseEndComment(node)) {
+      depth -= 1;
+
+      if (depth === 0) {
+        const start = previousNodes[startIndex] as Comment;
+        const boundaryNodes = previousNodes.slice(startIndex + 1, index);
+        const boundary: ReactSuspenseBoundary = {
+          start,
+          end: node,
+          consumed: index - startIndex + 1,
+          ...readReactSuspenseServerError(start, boundaryNodes),
+        };
+
+        if (!isReactSuspenseErrorStartComment(start)) {
+          boundary.previousNodes = isReactSuspensePendingStartComment(start)
+            ? removeReactSuspensePendingTemplate(boundaryNodes)
+            : boundaryNodes;
+        }
+
+        return boundary;
+      }
+    }
+  }
+
+  return undefined;
+}
+
+function consumeReactSuspenseBoundary(
+  boundary: ReactSuspenseBoundary | undefined,
+  parent: ParentNode,
+  result: ReconcileResult,
+): ReconcileResult {
+  if (boundary === undefined) {
+    return result;
+  }
+
+  syncScopedChildNodes(parent, boundary.start, boundary.end, result.nodes);
+  boundary.start.parentNode?.removeChild(boundary.start);
+  boundary.end.parentNode?.removeChild(boundary.end);
+  return { nodes: result.nodes, consumed: boundary.consumed };
+}
+
+function isReactSuspenseStartComment(node: Node | undefined): node is Comment {
+  return node instanceof Comment && reactSuspenseStartComments.has(node.data);
+}
+
+function isReactSuspensePendingStartComment(node: Comment): boolean {
+  return node.data === "$?" || node.data === "$!";
+}
+
+function isReactSuspenseErrorStartComment(node: Comment): boolean {
+  return node.data === "$!";
+}
+
+function isReactSuspenseEndComment(node: Node | undefined): node is Comment {
+  return node instanceof Comment && node.data === "/$";
+}
+
+function removeReactSuspensePendingTemplate(nodes: readonly Node[]): Node[] {
+  const [firstNode, ...remainingNodes] = nodes;
+
+  return firstNode instanceof HTMLTemplateElement
+    ? remainingNodes
+    : [...nodes];
+}
+
+const reactSuspenseStartComments = new Set(["$", "$?", "$!"]);
+
+function readReactSuspenseServerError(
+  start: Comment,
+  boundaryNodes: readonly Node[],
+): { serverError: { message: string; componentStack?: string } } | {} {
+  if (start.data !== "$!") {
+    return {};
+  }
+
+  const template = boundaryNodes[0];
+  const message =
+    template instanceof HTMLTemplateElement
+      ? template.getAttribute("data-msg")
+      : null;
+  const componentStack =
+    template instanceof HTMLTemplateElement
+      ? template.getAttribute("data-stck")
+      : null;
+
+  return {
+    serverError: {
+      message: message ?? "React Suspense server rendering error.",
+      ...(componentStack === null ? {} : { componentStack }),
+    },
+  };
+}
+
+function isSuspenseFallback(
+  node: ReactCompatNode,
+  renderedNodes: readonly Node[],
+): boolean {
+  return (
+    isReactCompatElement(node) &&
+    node.type === Suspense &&
+    renderedNodes.some((renderedNode) =>
+      renderedNode instanceof Element &&
+      renderedNode.tagName.toLowerCase() === getFallbackTagName(node),
+    )
+  );
+}
+
+function getFallbackTagName(node: ReactCompatElement): string | undefined {
+  const fallback = node.props.fallback;
+
+  return isReactCompatElement(fallback) && typeof fallback.type === "string"
+    ? fallback.type
+    : undefined;
+}

package/src/thenable.ts

@@ -0,0 +1,7 @@
+export function isThenable(value: unknown): value is PromiseLike<unknown> {
+  return (
+    (typeof value === "object" || typeof value === "function") &&
+    value !== null &&
+    typeof (value as { then?: unknown }).then === "function"
+  );
+}

package/src/url-safety.ts

@@ -0,0 +1,7 @@
+export {
+  isDangerousHtmlAttribute,
+  isDangerousHtmlOptIn,
+  isSrcsetAttribute,
+  isUnsafeUrlAttribute,
+  isUrlAttribute,
+} from "@reckona/mreact-shared/url-safety";