@reckona/mreact-compat 0.0.138 → 0.0.140

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";