@reckona/mreact-compat 0.0.153 → 0.0.155

package/src/host-reconciler.ts

@@ -4,7 +4,6 @@ import {
   FORWARD_REF_TYPE,
   Fragment,
   HOST_CHILDREN_ONLY_PROPS_META,
-  HOST_OWN_PROPS_META,
   LAZY_TYPE,
   MEMO_TYPE,
   Profiler,
@@ -571,8 +570,8 @@ function getReusableKeyedRowHostFiber(
   const previousRecord = previousProps as Record<string, unknown>;
 
   if (
-    getHostOwnPropsMeta(previousRecord) !== row.meta ||
-    getDirectHostTextChild(previousRecord.children) !== row.text
+    getDirectHostTextChild(previousRecord.children) !== row.text ||
+    !hostOwnPropsEqual(previousRecord, row.element.props)
   ) {
     return undefined;
   }
@@ -591,7 +590,6 @@ interface KeyedRowHostElement {
   element: ReactCompatElement;
   key: string;
   type: string;
-  meta: number;
   text: string;
 }
 
@@ -600,7 +598,6 @@ function createKeyedRowHostElementScratch(): KeyedRowHostElement {
     element: undefined as unknown as ReactCompatElement,
     key: "",
     type: "",
-    meta: 0,
     text: "",
   };
 }
@@ -618,18 +615,17 @@ function readKeyedRowHostElement(
     return false;
   }
 
-  const props = node.props as Record<string, unknown>;
-  const meta = getHostOwnPropsMeta(props);
-  const text = meta === undefined ? undefined : getDirectHostTextChild(props.children);
+  // Any keyed host row whose children collapse to a single text value
+  // qualifies; row props are compared per reuse with hostOwnPropsEqual.
+  const text = getDirectHostTextChild((node.props as Record<string, unknown>).children);
 
-  if (meta === undefined || text === undefined) {
+  if (text === undefined) {
     return false;
   }
 
   row.element = node;
   row.key = node.key;
   row.type = node.type;
-  row.meta = meta;
   row.text = text;
   return true;
 }
@@ -667,13 +663,9 @@ function createKeyedRowHostFiber(
   }
 
   const previousProps = current.memoizedProps ?? current.pendingProps;
-  const previousMeta =
-    typeof previousProps === "object" && previousProps !== null
-      ? getHostOwnPropsMeta(previousProps as Record<string, unknown>)
-      : undefined;
   const previousText = getDirectHostTextChild(hostFiberChildrenProp(previousProps));
 
-  if (previousMeta !== row.meta || previousText !== row.text) {
+  if (previousText !== row.text || !hostOwnPropsEqual(previousProps, row.element.props)) {
     fiber.flags |= Update;
   }
 
@@ -1642,6 +1634,8 @@ function commitHostDirtyFiber(
         hostPropsAreChildrenOnly(fiber.memoizedProps) &&
         hostPropsAreChildrenOnly(props));
     const textOnlyRowUpdate =
+      !propsAreUnchanged &&
+      !propsAreChildrenOnly &&
       fiber.hydrateExisting !== true &&
       isRowTextOnlyUpdate(fiber.memoizedProps, props);
 
@@ -2032,6 +2026,8 @@ function commitHostFiber(
         hostPropsAreChildrenOnly(fiber.memoizedProps) &&
         hostPropsAreChildrenOnly(props));
     const textOnlyRowUpdate =
+      !propsAreUnchanged &&
+      !propsAreChildrenOnly &&
       fiber.hydrateExisting !== true &&
       isRowTextOnlyUpdate(fiber.memoizedProps, props);
 
@@ -2243,12 +2239,6 @@ function hostOwnPropsEqual(previous: unknown, next: Record<string, unknown>): bo
   }
 
   const previousProps = previous as Record<string, unknown>;
-  const previousMeta = getHostOwnPropsMeta(previousProps);
-  const nextMeta = getHostOwnPropsMeta(next);
-
-  if (previousMeta !== undefined && nextMeta !== undefined) {
-    return previousMeta === nextMeta;
-  }
 
   let previousCount = 0;
   let nextCount = 0;
@@ -2276,10 +2266,6 @@ function hostOwnPropsEqual(previous: unknown, next: Record<string, unknown>): bo
   return previousCount === nextCount;
 }
 
-function getHostOwnPropsMeta(props: Record<string, unknown>): number | undefined {
-  return (props as { [HOST_OWN_PROPS_META]?: number })[HOST_OWN_PROPS_META];
-}
-
 function hostDirectTextChildChanged(previous: unknown, next: Record<string, unknown>): boolean {
   const previousText = getDirectHostTextChild(hostFiberChildrenProp(previous));
   const nextText = getDirectHostTextChild(next.children);
@@ -2379,17 +2365,15 @@ function isRowTextOnlyUpdate(previous: unknown, next: Record<string, unknown>):
   }
 
   const previousProps = previous as Record<string, unknown>;
-  const previousMeta = getHostOwnPropsMeta(previousProps);
-  const nextMeta = getHostOwnPropsMeta(next);
-
-  if (previousMeta === undefined || previousMeta !== nextMeta) {
-    return false;
-  }
-
   const previousText = getDirectHostTextChild(previousProps.children);
   const nextText = getDirectHostTextChild(next.children);
 
-  return previousText !== undefined && nextText !== undefined && previousText !== nextText;
+  return (
+    previousText !== undefined &&
+    nextText !== undefined &&
+    previousText !== nextText &&
+    hostOwnPropsEqual(previousProps, next)
+  );
 }
 
 function hostFiberChildrenProp(props: unknown): unknown {
@@ -2404,10 +2388,33 @@ function getDirectHostTextChild(children: unknown): string | undefined {
     : undefined;
 }
 
+// This package has no Node type dependency; declare the minimal process
+// shape needed for the literal process.env.NODE_ENV expression below.
+declare const process: { env: Record<string, string | undefined> };
+
+type HostFastPathMode = "static-fast" | "dynamic";
+
+const hostFastPathMode: HostFastPathMode = (() => {
+  try {
+    // The literal process.env.NODE_ENV member expression is what bundler
+    // define rewriting matches; a globalThis.process indirection is never
+    // rewritten and leaves deployed browser bundles without any fast path.
+    return process.env.NODE_ENV === "production" ? "static-fast" : "dynamic";
+  } catch {
+    // No process global at all: an unbundled browser runtime. Treat it as
+    // production rather than running every host update on the slow path.
+    return "static-fast";
+  }
+})();
+
 function shouldUseDirectHostTextChild(): boolean {
-  const globalProcess = (globalThis as { process?: { env?: Record<string, string | undefined> } })
-    .process;
-  return globalProcess?.env?.NODE_ENV === "production";
+  if (hostFastPathMode === "static-fast") {
+    return true;
+  }
+
+  // Node dev/test environments keep the per-call env read so test harnesses
+  // can flip NODE_ENV (vi.stubEnv) without re-importing this module.
+  return process.env.NODE_ENV === "production";
 }
 
 function syncDirectHostTextChild(element: Element, text: string): Text {

package/src/index.ts

@@ -91,6 +91,6 @@ export {
   useTransition,
   version,
 } from "./hooks.js";
-export { renderToString } from "./server-render.js";
+export { renderChildToString, renderToString } from "./server-render.js";
 export type { StartTransition, TransitionScope } from "./hooks.js";
 export { default } from "./react-default.js";

package/src/react-default.ts

@@ -66,7 +66,7 @@ import {
   useTransition,
   version,
 } from "./hooks.js";
-import { renderToString } from "./server-render.js";
+import { renderChildToString, renderToString } from "./server-render.js";
 
 const ReactCompat = {
   Component,
@@ -123,6 +123,7 @@ const ReactCompat = {
   cache,
   cacheSignal,
   captureOwnerStack,
+  renderChildToString,
   renderToString,
   startTransition,
   unstable_useCacheRefresh,

package/src/server-render.ts

@@ -73,6 +73,30 @@ export function renderToString<TProps>(
   });
 }
 
+// Renders a single child value the way the interpreter renders expression
+// children: primitives escape, null/undefined/boolean render nothing, and
+// react nodes fall back to the interpreter. Compiled compat pages call this
+// for expression children whose runtime type is unknown.
+export function renderChildToString(value: unknown): string {
+  if (value === null || value === undefined || typeof value === "boolean") {
+    return "";
+  }
+
+  if (typeof value === "string" || typeof value === "number") {
+    return escapeHtml(value);
+  }
+
+  const runtime = createRootRuntime(() => undefined, { idMode: "server" });
+
+  return runWithCacheScope(createCacheScope(), () => {
+    try {
+      return renderNodeToString(value as ReactCompatNode, runtime, "0.0");
+    } finally {
+      runtime.dispose();
+    }
+  });
+}
+
 function isThenable(value: unknown): value is PromiseLike<unknown> {
   return (
     typeof value === "object" &&
@@ -131,7 +155,14 @@ function renderElementToString(
       return `<${element.type}${attributes}/>`;
     }
 
-    return `<${element.type}${attributes}>${renderNodeToString(element.props.children, runtime, `${path}.children`)}</${element.type}>`;
+    // Primitive children dominate real markup; serializing them inline skips
+    // one recursive call and one child-path allocation per text leaf.
+    const children = element.props.children;
+    if (typeof children === "string" || typeof children === "number") {
+      return `<${element.type}${attributes}>${escapeHtml(children)}</${element.type}>`;
+    }
+
+    return `<${element.type}${attributes}>${renderNodeToString(children, runtime, `${path}.children`)}</${element.type}>`;
   }
 
   if (element.type === Fragment) {
@@ -216,37 +247,26 @@ function renderElementToString(
 }
 
 function renderAttributesToString(props: Record<string, unknown>): string {
-  const sanitizedProps = sanitizeMetaRefreshProps(props);
-  const entries = Object.entries(sanitizedProps);
-  if (
-    entries.length === 0 ||
-    (entries.length === 1 && entries[0]?.[0] === "children")
-  ) {
-    return "";
-  }
+  const skipUnsafeMetaRefreshContent = hasUnsafeMetaRefreshProps(props);
 
   let attributes = "";
-  for (const [name, value] of entries) {
-    attributes += renderHtmlAttribute(name, value);
+  for (const name in props) {
+    if (skipUnsafeMetaRefreshContent && name === "content") {
+      continue;
+    }
+    attributes += renderHtmlAttribute(name, props[name]);
   }
   return attributes;
 }
 
-function sanitizeMetaRefreshProps(
-  props: Record<string, unknown>,
-): Record<string, unknown> {
-  const httpEquiv = props["http-equiv"] ?? props.httpEquiv;
+function hasUnsafeMetaRefreshProps(props: Record<string, unknown>): boolean {
   const content = props.content;
-  if (typeof httpEquiv !== "string" || typeof content !== "string") {
-    return props;
-  }
-  if (!isUnsafeMetaRefreshContent(httpEquiv, content)) {
-    return props;
+  if (typeof content !== "string") {
+    return false;
   }
 
-  const sanitized = { ...props };
-  delete sanitized.content;
-  return sanitized;
+  const httpEquiv = props["http-equiv"] ?? props.httpEquiv;
+  return typeof httpEquiv === "string" && isUnsafeMetaRefreshContent(httpEquiv, content);
 }
 
 function isClassComponentType(
@@ -339,15 +359,24 @@ function renderInputAttributesToString(props: Record<string, unknown>): string {
     .join("");
 }
 
+// Matches the /^on/i prefix without allocating a fresh regex per attribute.
+function isEventHandlerName(name: string): boolean {
+  return (
+    name.length > 1 &&
+    (name.charCodeAt(0) | 32) === 111 &&
+    (name.charCodeAt(1) | 32) === 110
+  );
+}
+
 function renderHtmlAttribute(name: string, value: unknown): string {
   if (
+    value === null ||
+    value === undefined ||
+    typeof value === "function" ||
     name === "children" ||
     name === "key" ||
     name === "ref" ||
-    /^on/i.test(name) ||
-    value === null ||
-    value === undefined ||
-    typeof value === "function"
+    isEventHandlerName(name)
   ) {
     return "";
   }
@@ -363,7 +392,7 @@ function renderHtmlAttribute(name: string, value: unknown): string {
     return "";
   }
 
-  if (/^on/i.test(attributeName)) {
+  if (isEventHandlerName(attributeName)) {
     return "";
   }
 
@@ -404,13 +433,14 @@ function renderHtmlAttribute(name: string, value: unknown): string {
 
 const VALID_ATTRIBUTE_NAME = /^[A-Za-z_][\w.\-:]*$/;
 
-function isBooleanishStringAttribute(name: string): boolean {
-  const attributeName = toHtmlAttributeName(name).toLowerCase();
-  return attributeName.startsWith("aria-") || BOOLEANISH_STRING_ATTRIBUTES.has(attributeName);
+function isBooleanishStringAttribute(attributeName: string): boolean {
+  // Callers pass the already-mapped HTML attribute name.
+  const lowerCased = attributeName.toLowerCase();
+  return lowerCased.startsWith("aria-") || BOOLEANISH_STRING_ATTRIBUTES.has(lowerCased);
 }
 
-function isDataAttribute(name: string): boolean {
-  return toHtmlAttributeName(name).toLowerCase().startsWith("data-");
+function isDataAttribute(attributeName: string): boolean {
+  return attributeName.toLowerCase().startsWith("data-");
 }
 
 const BOOLEANISH_STRING_ATTRIBUTES = new Set<string>([
@@ -470,17 +500,24 @@ function renderStyleAttribute(value: unknown): string {
     return "";
   }
 
-  return Object.entries(value)
-    .filter(([, propertyValue]) =>
-      propertyValue !== null &&
-      propertyValue !== undefined &&
-      typeof propertyValue !== "boolean" &&
-      propertyValue !== "",
-    )
-    .map(([name, propertyValue]) =>
-      `${toKebabCase(name)}:${renderCssValue(name, propertyValue)}`,
-    )
-    .join(";");
+  const styleProps = value as Record<string, unknown>;
+  let css = "";
+  for (const name in styleProps) {
+    const propertyValue = styleProps[name];
+    if (
+      propertyValue === null ||
+      propertyValue === undefined ||
+      typeof propertyValue === "boolean" ||
+      propertyValue === ""
+    ) {
+      continue;
+    }
+
+    css += css === ""
+      ? `${toKebabCase(name)}:${renderCssValue(name, propertyValue)}`
+      : `;${toKebabCase(name)}:${renderCssValue(name, propertyValue)}`;
+  }
+  return css;
 }
 
 function renderCssValue(name: string, value: unknown): string {
@@ -491,8 +528,30 @@ function renderCssValue(name: string, value: unknown): string {
   return `${value}px`;
 }
 
+const UPPERCASE_LETTER = /[A-Z]/;
+const UPPERCASE_LETTER_GLOBAL = /[A-Z]/g;
+// Distinct camelCase style names per app are few; the cap only guards
+// pathological dynamically-generated property names.
+const KEBAB_CASE_CACHE = new Map<string, string>();
+const KEBAB_CASE_CACHE_LIMIT = 512;
+
+function kebabReplace(letter: string): string {
+  return `-${letter.toLowerCase()}`;
+}
+
 function toKebabCase(value: string): string {
-  return value.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+  if (!UPPERCASE_LETTER.test(value)) {
+    return value;
+  }
+
+  let cached = KEBAB_CASE_CACHE.get(value);
+  if (cached === undefined) {
+    cached = value.replace(UPPERCASE_LETTER_GLOBAL, kebabReplace);
+    if (KEBAB_CASE_CACHE.size < KEBAB_CASE_CACHE_LIMIT) {
+      KEBAB_CASE_CACHE.set(value, cached);
+    }
+  }
+  return cached;
 }
 
 function isUnitlessCssProperty(name: string): boolean {