@reckona/mreact-compat 0.0.137 → 0.0.139

package/src/dom-props.ts

@@ -12,6 +12,8 @@ import type { SyntheticEvent } from "./event-types.js";
 import {
   isDangerousHtmlAttribute,
   isDangerousHtmlOptIn,
+  isSrcsetAttribute,
+  isUnsafeMetaRefreshContent,
   isUnsafeUrlAttribute,
   isUrlAttribute,
 } from "./url-safety.js";
@@ -29,28 +31,34 @@ export function applyProps(
 ): void {
   const preserveHydrationAttributes = options.preserveHydrationAttributes === true;
   const previous = getAppliedProps(element);
+  const nextProps = sanitizeMetaRefreshElementProps(element, props);
 
   if (previous === undefined && !preserveHydrationAttributes) {
-    if (applyInitialRowProps(element, props)) {
-      setAppliedProps(element, { props });
+    if (applyInitialRowProps(element, nextProps)) {
+      setAppliedProps(element, {
+        attributeNames: collectAttributeNames(nextProps),
+        props: nextProps,
+      });
       return;
     }
 
+    const attributeNames = collectAttributeNames(nextProps);
     setAppliedProps(element, {
-      props,
-      ...applyInitialProps(element, props, path, options),
+      attributeNames,
+      props: nextProps,
+      ...applyInitialProps(element, nextProps, path, options),
     });
     return;
   }
 
   const previousProps = previous?.props ?? {};
   let listeners = previous?.listeners;
-  const previousAttributeNames = collectAttributeNames(previousProps);
-  const nextAttributeNames = collectAttributeNames(props);
+  const previousAttributeNames = previous?.attributeNames ?? collectAttributeNames(previousProps);
+  const nextAttributeNames = collectAttributeNames(nextProps);
 
   if (!preserveHydrationAttributes) {
     for (const attributeName of previousAttributeNames) {
-      if (!nextAttributeNames.has(attributeName)) {
+      if (!nextAttributeNames.includes(attributeName)) {
         if (attributeName === "style") {
           removePreviousStyle(element, previousProps.style, path, options);
           continue;
@@ -71,7 +79,7 @@ export function applyProps(
 
   if (listeners !== undefined) {
     for (const [name, appliedListener] of listeners) {
-      const nextValue = props[name];
+      const nextValue = nextProps[name];
 
       if (nextValue !== appliedListener.handler) {
         listeners.delete(name);
@@ -79,7 +87,13 @@ export function applyProps(
     }
   }
 
-  for (const [name, value] of Object.entries(props)) {
+  for (const name in nextProps) {
+    if (!Object.prototype.hasOwnProperty.call(nextProps, name)) {
+      continue;
+    }
+
+    const value = nextProps[name];
+
     if (name === "children" || name === "ref" || name === "key") {
       continue;
     }
@@ -117,6 +131,10 @@ export function applyProps(
       continue;
     }
 
+    if (/^on/i.test(name)) {
+      continue;
+    }
+
     const attributeName = toDomAttributeName(name);
 
     if (typeof value === "boolean" && isBooleanishStringAttribute(attributeName)) {
@@ -163,7 +181,8 @@ export function applyProps(
   }
 
   setAppliedProps(element, {
-    props,
+    attributeNames: nextAttributeNames,
+    props: nextProps,
     ...(listeners === undefined ? {} : { listeners }),
   });
 }
@@ -220,6 +239,10 @@ function applyInitialProps(
       continue;
     }
 
+    if (/^on/i.test(name)) {
+      continue;
+    }
+
     const attributeName = toDomAttributeName(name);
 
     if (typeof value === "boolean" && isBooleanishStringAttribute(attributeName)) {
@@ -338,6 +361,13 @@ function applyAttribute(
     return;
   }
 
+  if (/^on/i.test(name)) {
+    if (element.hasAttribute(name) && !preserveHydrationAttributes) {
+      element.removeAttribute(name);
+    }
+    return;
+  }
+
   if (value === null || value === undefined || value === false) {
     if (element.hasAttribute(name) && !preserveHydrationAttributes) {
       reportRecoverable(
@@ -363,7 +393,10 @@ function applyAttribute(
   // value is unsafe we treat it as if it were null -- remove the
   // existing attribute, log a recoverable mismatch, and stop. This
   // matches react-dom's sanitizeURL posture.
-  if (isUrlAttribute(name) && isUnsafeUrlAttribute(name, stringValue)) {
+  if (
+    (isUrlAttribute(name) || isSrcsetAttribute(name)) &&
+    isUnsafeUrlAttribute(name, stringValue)
+  ) {
     if (element.hasAttribute(name) && !preserveHydrationAttributes) {
       reportRecoverable(
         options,
@@ -530,15 +563,21 @@ function removePreviousStyle(
   }
 }
 
-function collectAttributeNames(props: Record<string, unknown>): Set<string> {
-  const names = new Set<string>();
+function collectAttributeNames(props: Record<string, unknown>): string[] {
+  const names: string[] = [];
+
+  for (const name in props) {
+    if (!Object.prototype.hasOwnProperty.call(props, name)) {
+      continue;
+    }
+
+    const value = props[name];
 
-  for (const [name, value] of Object.entries(props)) {
     if (
       name === "children" ||
       name === "ref" ||
       name === "key" ||
-      /^on[A-Z]/.test(name) ||
+      /^on/i.test(name) ||
       value === null ||
       value === undefined
     ) {
@@ -556,21 +595,49 @@ function collectAttributeNames(props: Record<string, unknown>): Set<string> {
     }
 
     if (name === "defaultValue") {
-      names.add("value");
+      pushUniqueAttributeName(names, "value");
       continue;
     }
 
     if (name === "defaultChecked") {
-      names.add("checked");
+      pushUniqueAttributeName(names, "checked");
       continue;
     }
 
-    names.add(attributeName);
+    pushUniqueAttributeName(names, attributeName);
   }
 
   return names;
 }
 
+function pushUniqueAttributeName(names: string[], name: string): void {
+  if (!names.includes(name)) {
+    names.push(name);
+  }
+}
+
+function sanitizeMetaRefreshElementProps(
+  element: Element,
+  props: Record<string, unknown>,
+): Record<string, unknown> {
+  if (element.tagName.toLowerCase() !== "meta") {
+    return props;
+  }
+
+  const httpEquiv = props["http-equiv"] ?? props.httpEquiv ?? element.getAttribute("http-equiv");
+  const content = props.content;
+  if (typeof httpEquiv !== "string" || typeof content !== "string") {
+    return props;
+  }
+  if (!isUnsafeMetaRefreshContent(httpEquiv, content)) {
+    return props;
+  }
+
+  const sanitized = { ...props };
+  delete sanitized.content;
+  return sanitized;
+}
+
 function isBooleanishStringAttribute(name: string): boolean {
   const attributeName = toDomAttributeName(name).toLowerCase();
   return attributeName.startsWith("aria-") || BOOLEANISH_STRING_ATTRIBUTES.has(attributeName);

package/src/element.ts

@@ -120,6 +120,43 @@ export function createElement<P extends Record<string, unknown>>(
   };
 }
 
+export function createElementFromJsxConfig<P extends Record<string, unknown>>(
+  type: ElementType<P>,
+  config: (P & ReactReservedProps & { children?: ReactCompatNode }) | null,
+  keyArgument?: unknown,
+): ReactCompatElement<P> {
+  const normalizedType =
+    typeof type === "object" && type !== null ? normalizeElementType(type) : type;
+  const key = keyArgument !== undefined
+    ? String(keyArgument)
+    : config?.key === undefined ? null : String(config.key);
+  const ref = config?.ref ?? null;
+  const hasChildren = config !== null && config !== undefined && hasOwnProperty.call(config, "children");
+  const children = config?.children;
+  const copiedProps = copyElementProps(config, undefined, true);
+  const props = (typeof normalizedType === "string"
+    ? copiedProps
+    : applyDefaultProps(normalizedType, copiedProps)) as P & {
+      children?: ReactCompatNode;
+    };
+
+  if (hasChildren) {
+    props.children = children;
+  }
+
+  if (typeof normalizedType === "string") {
+    setHostOwnPropsMeta(props);
+  }
+
+  return {
+    $$typeof: REACT_COMPAT_ELEMENT_TYPE,
+    type: normalizedType as ElementType<P>,
+    key,
+    ref,
+    props,
+  };
+}
+
 export function isReactCompatElement(
   value: unknown,
 ): value is ReactCompatElement {
@@ -232,6 +269,7 @@ export function cloneElement<P extends Record<string, unknown>>(
 function copyElementProps(
   source: Record<string, unknown> | null | undefined,
   base?: Record<string, unknown>,
+  omitChildren = false,
 ): Record<string, unknown> {
   const props: Record<string, unknown> = base === undefined ? {} : { ...base };
 
@@ -244,7 +282,13 @@ function copyElementProps(
       continue;
     }
 
-    if (name !== "key" && name !== "ref" && name !== "__self" && name !== "__source") {
+    if (
+      name !== "key" &&
+      name !== "ref" &&
+      name !== "__self" &&
+      name !== "__source" &&
+      (!omitChildren || name !== "children")
+    ) {
       props[name] = source[name];
     }
   }

package/src/event-listeners.ts

@@ -1,6 +1,7 @@
 import type { SyntheticEvent } from "./event-types.js";
 
 export interface AppliedProps {
+  attributeNames?: string[];
   props: Record<string, unknown>;
   listeners?: Map<string, AppliedEventListener>;
 }

package/src/hooks.ts

@@ -16,6 +16,7 @@ import { isThenable } from "./thenable.js";
 export interface RootRuntime {
   currentElement?: unknown;
   instances: Map<string, ComponentInstance>;
+  instanceKeysByPrefix: Map<string, Set<string>>;
   activeInstanceKeys: Set<string> | undefined;
   activeProfilerPaths: Set<string> | undefined;
   mountedProfilerPaths: Set<string>;
@@ -55,8 +56,8 @@ interface ComponentInstance {
   dirty: boolean;
   disposed?: boolean;
   contextDependencies?: Map<ReactCompatContextLike<unknown>, unknown>;
-  devToolsHooks: DevToolsHookValue[];
-  devToolsHookTypes: string[];
+  devToolsHooks?: DevToolsHookValue[];
+  devToolsHookTypes?: string[];
   devToolsHookSuppressionDepth: number;
 }
 
@@ -297,6 +298,7 @@ export function createRootRuntime(
 ): RootRuntime {
   return {
     instances: new Map(),
+    instanceKeysByPrefix: new Map(),
     activeInstanceKeys: undefined,
     activeProfilerPaths: undefined,
     mountedProfilerPaths: new Set(),
@@ -491,20 +493,24 @@ export function renderWithRootRuntime<T>(
     hooks: [],
     hookIndex: 0,
     dirty: false,
-    devToolsHooks: [],
-    devToolsHookTypes: [],
     devToolsHookSuppressionDepth: 0,
   };
   instance.owner = owner;
   instance.path = path;
   runtime.instances.set(path, instance);
+  indexInstanceKey(runtime, path);
   runtime.activeInstanceKeys?.add(path);
   instance.hookIndex = 0;
   instance.dirty = false;
   instance.disposed = false;
   delete instance.contextDependencies;
-  instance.devToolsHooks = [];
-  instance.devToolsHookTypes = [];
+  if (hasInstalledDevToolsHook()) {
+    instance.devToolsHooks = [];
+    instance.devToolsHookTypes = [];
+  } else {
+    delete instance.devToolsHooks;
+    delete instance.devToolsHookTypes;
+  }
   instance.devToolsHookSuppressionDepth = 0;
   hookRenderState.currentRuntime = runtime;
   hookRenderState.currentInstance = instance;
@@ -547,13 +553,35 @@ export function hasContextDependency(
   return keys.some((key) => runtime.instances.get(key)?.contextDependencies !== undefined);
 }
 
+export function collectRuntimeInstanceKeys(runtime: RootRuntime, prefix: string): string[] {
+  const keys = runtime.instanceKeysByPrefix.get(prefix);
+
+  if (keys === undefined) {
+    return [];
+  }
+
+  const activeKeys: string[] = [];
+
+  for (const key of keys) {
+    if (runtime.instances.has(key)) {
+      activeKeys.push(key);
+    }
+  }
+
+  return activeKeys;
+}
+
 export function getDevToolsHookState(
   runtime: RootRuntime,
   path: string,
 ): DevToolsHookState | undefined {
   const instance = runtime.instances.get(path);
 
-  if (instance === undefined) {
+  if (
+    instance === undefined ||
+    instance.devToolsHooks === undefined ||
+    instance.devToolsHookTypes === undefined
+  ) {
     return undefined;
   }
 
@@ -966,7 +994,12 @@ function assignRef<T>(ref: unknown, value: T | null): void {
 function recordDevToolsHook(type: string, value: DevToolsHookValue): void {
   const instance = hookRenderState.currentInstance;
 
-  if (instance === undefined || instance.devToolsHookSuppressionDepth > 0) {
+  if (
+    instance === undefined ||
+    instance.devToolsHookSuppressionDepth > 0 ||
+    instance.devToolsHooks === undefined ||
+    instance.devToolsHookTypes === undefined
+  ) {
     return;
   }
 
@@ -974,6 +1007,12 @@ function recordDevToolsHook(type: string, value: DevToolsHookValue): void {
   instance.devToolsHooks.push(value);
 }
 
+function hasInstalledDevToolsHook(): boolean {
+  return typeof (globalThis as {
+    __REACT_DEVTOOLS_GLOBAL_HOOK__?: { inject?: unknown } | undefined;
+  }).__REACT_DEVTOOLS_GLOBAL_HOOK__?.inject === "function";
+}
+
 function runWithoutDevToolsHookTracking<T>(callback: () => T): T {
   const instance = requireInstance();
   instance.devToolsHookSuppressionDepth += 1;
@@ -1941,10 +1980,51 @@ function cleanupInactiveInstances(runtime: RootRuntime): void {
     if (!activeInstanceKeys.has(key)) {
       cleanupInstance(instance);
       runtime.instances.delete(key);
+      removeInstanceKeyFromIndex(runtime, key);
+    }
+  }
+}
+
+function indexInstanceKey(runtime: RootRuntime, key: string): void {
+  for (const prefix of instanceKeyPrefixes(key)) {
+    let keys = runtime.instanceKeysByPrefix.get(prefix);
+
+    if (keys === undefined) {
+      keys = new Set();
+      runtime.instanceKeysByPrefix.set(prefix, keys);
     }
+
+    keys.add(key);
   }
 }
 
+function removeInstanceKeyFromIndex(runtime: RootRuntime, key: string): void {
+  for (const prefix of instanceKeyPrefixes(key)) {
+    const keys = runtime.instanceKeysByPrefix.get(prefix);
+
+    if (keys === undefined) {
+      continue;
+    }
+
+    keys.delete(key);
+
+    if (keys.size === 0) {
+      runtime.instanceKeysByPrefix.delete(prefix);
+    }
+  }
+}
+
+function instanceKeyPrefixes(key: string): string[] {
+  const parts = key.split(".");
+  const prefixes: string[] = [];
+
+  for (let index = 1; index <= parts.length; index += 1) {
+    prefixes.push(parts.slice(0, index).join("."));
+  }
+
+  return prefixes;
+}
+
 function cleanupInstance(instance: ComponentInstance): void {
   instance.disposed = true;
   for (const slot of instance.hooks) {

package/src/host-reconciler.ts

@@ -45,6 +45,7 @@ import {
   restoreRuntimeSnapshot,
   takeRuntimeSnapshot,
   getDevToolsHookState,
+  collectRuntimeInstanceKeys,
   hasContextDependency,
   hasChangedContextDependency,
   type RootRuntime,
@@ -3074,9 +3075,7 @@ function isLazyType(
 }
 
 function collectInstanceKeys(runtime: RootRuntime, prefix: string): string[] {
-  return Array.from(runtime.instances.keys()).filter(
-    (key) => key === prefix || key.startsWith(`${prefix}.`),
-  );
+  return collectRuntimeInstanceKeys(runtime, prefix);
 }
 
 function markActiveInstanceKeys(runtime: RootRuntime, keys: readonly string[]): void {

package/src/jsx-runtime.ts

@@ -1,4 +1,4 @@
-import { createElement, Fragment } from "./element.js";
+import { createElementFromJsxConfig, Fragment } from "./element.js";
 import type {
   ElementType,
   ReactCompatElement,
@@ -99,21 +99,5 @@ function createElementFromJsx<P extends Record<string, unknown>>(
   props: (P & { children?: ReactCompatNode; key?: unknown; ref?: unknown }) | null,
   key: unknown,
 ): ReactCompatElement<P> {
-  const config = { ...props } as P & {
-    children?: ReactCompatNode;
-    key?: unknown;
-    ref?: unknown;
-  };
-  const hasChildren = Object.hasOwn(config, "children");
-  const children = config.children;
-
-  if (key !== undefined) {
-    config.key = key;
-  }
-
-  delete config.children;
-
-  return hasChildren
-    ? createElement(type, config, children)
-    : createElement(type, config);
+  return createElementFromJsxConfig(type, props, key);
 }

package/src/reconciler.ts

@@ -24,6 +24,7 @@ import {
 } from "./context.js";
 import {
   clearRuntimePortalNodes,
+  collectRuntimeInstanceKeys,
   hasStableExternalStores,
   restoreRuntimeSnapshot,
   renderWithProfiler,
@@ -684,9 +685,7 @@ function getMemoRenderStates(runtime: RootRuntime): Map<string, MemoRenderState>
 }
 
 function collectInstanceKeys(runtime: RootRuntime, prefix: string): string[] {
-  return Array.from(runtime.instances.keys()).filter((key) =>
-    key === prefix || key.startsWith(`${prefix}.`),
-  );
+  return collectRuntimeInstanceKeys(runtime, prefix);
 }
 
 function markActiveInstanceKeys(runtime: RootRuntime, keys: readonly string[]): void {

package/src/server-render.ts

@@ -25,7 +25,12 @@ import {
   type RootRuntime,
   type RootRuntimeOptions,
 } from "./hooks.js";
-import { isDangerousHtmlAttribute, isDangerousHtmlOptIn } from "./url-safety.js";
+import {
+  isDangerousHtmlAttribute,
+  isDangerousHtmlOptIn,
+  isUnsafeMetaRefreshContent,
+  isUnsafeUrlAttribute,
+} from "./url-safety.js";
 import { escapeHtmlAttribute as escapeHtml } from "@reckona/mreact-shared/html-escape";
 import { isVoidHtmlElement } from "@reckona/mreact-shared";
 
@@ -195,7 +200,8 @@ function renderElementToString(
 }
 
 function renderAttributesToString(props: Record<string, unknown>): string {
-  const entries = Object.entries(props);
+  const sanitizedProps = sanitizeMetaRefreshProps(props);
+  const entries = Object.entries(sanitizedProps);
   if (
     entries.length === 0 ||
     (entries.length === 1 && entries[0]?.[0] === "children")
@@ -210,6 +216,23 @@ function renderAttributesToString(props: Record<string, unknown>): string {
   return attributes;
 }
 
+function sanitizeMetaRefreshProps(
+  props: Record<string, unknown>,
+): Record<string, unknown> {
+  const httpEquiv = props["http-equiv"] ?? props.httpEquiv;
+  const content = props.content;
+  if (typeof httpEquiv !== "string" || typeof content !== "string") {
+    return props;
+  }
+  if (!isUnsafeMetaRefreshContent(httpEquiv, content)) {
+    return props;
+  }
+
+  const sanitized = { ...props };
+  delete sanitized.content;
+  return sanitized;
+}
+
 function isClassComponentType(
   value: unknown,
 ): value is new (props: Record<string, unknown>) => { render(): ReactCompatNode } {
@@ -305,7 +328,7 @@ function renderHtmlAttribute(name: string, value: unknown): string {
     name === "children" ||
     name === "key" ||
     name === "ref" ||
-    /^on[A-Z]/.test(name) ||
+    /^on/i.test(name) ||
     value === null ||
     value === undefined ||
     typeof value === "function"
@@ -320,6 +343,14 @@ function renderHtmlAttribute(name: string, value: unknown): string {
 
   const attributeName = toHtmlAttributeName(name);
 
+  if (!VALID_ATTRIBUTE_NAME.test(attributeName)) {
+    return "";
+  }
+
+  if (/^on/i.test(attributeName)) {
+    return "";
+  }
+
   if (typeof value === "boolean" && isBooleanishStringAttribute(attributeName)) {
     return ` ${attributeName}="${value ? "true" : "false"}"`;
   }
@@ -346,9 +377,17 @@ function renderHtmlAttribute(name: string, value: unknown): string {
     return ` ${attributeName}=""`;
   }
 
-  return ` ${attributeName}="${escapeHtml(value)}"`;
+  const stringValue = String(value);
+
+  if (isUnsafeUrlAttribute(attributeName, stringValue)) {
+    return "";
+  }
+
+  return ` ${attributeName}="${escapeHtml(stringValue)}"`;
 }
 
+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);

package/src/url-safety.ts

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