@reckona/mreact-compat 0.0.91 → 0.0.93

package/src/dom-props.ts

@@ -6,6 +6,7 @@ import {
   ensureDelegatedEventListener,
   toEventNames,
 } from "./host-event-binder.js";
+import { HOST_OWN_PROPS_META } from "./element.js";
 import { reportRecoverable, type RenderOptions } from "./hydration.js";
 import type { SyntheticEvent } from "./event-types.js";
 import {
@@ -14,39 +15,67 @@ import {
   isUnsafeUrlAttribute,
   isUrlAttribute,
 } from "./url-safety.js";
+import {
+  serializeClientStyleValue,
+  styleNameToCssName,
+  type HostElement,
+} from "./dom-host-rules.js";
 
 export function applyProps(
-  element: HTMLElement,
+  element: HostElement,
   props: Record<string, unknown>,
   path: string,
   options: RenderOptions,
 ): void {
-  const previous: AppliedProps = getAppliedProps(element) ?? {
-    props: {},
-    listeners: new Map<string, AppliedEventListener>(),
-  };
-  const nextAttributeNames = collectAttributeNames(props);
   const preserveHydrationAttributes = options.preserveHydrationAttributes === true;
+  const previous = getAppliedProps(element);
+
+  if (previous === undefined && !preserveHydrationAttributes) {
+    if (applyInitialRowProps(element, props)) {
+      setAppliedProps(element, { props });
+      return;
+    }
+
+    setAppliedProps(element, {
+      props,
+      ...applyInitialProps(element, props, path, options),
+    });
+    return;
+  }
+
+  const previousProps = previous?.props ?? {};
+  let listeners = previous?.listeners;
+  const previousAttributeNames = collectAttributeNames(previousProps);
+  const nextAttributeNames = collectAttributeNames(props);
 
   if (!preserveHydrationAttributes) {
-    for (const attribute of Array.from(element.attributes)) {
-      if (!nextAttributeNames.has(attribute.name)) {
-        reportRecoverable(
-          options,
-          "attribute",
-          path,
-          new Error(`Hydration attribute mismatch: ${attribute.name}.`),
-        );
-        element.removeAttribute(attribute.name);
+    for (const attributeName of previousAttributeNames) {
+      if (!nextAttributeNames.has(attributeName)) {
+        if (attributeName === "style") {
+          removePreviousStyle(element, previousProps.style, path, options);
+          continue;
+        }
+
+        if (element.hasAttribute(attributeName)) {
+          reportRecoverable(
+            options,
+            "attribute",
+            path,
+            new Error(`Hydration attribute mismatch: ${attributeName}.`),
+          );
+          element.removeAttribute(attributeName);
+        }
       }
     }
   }
 
-  for (const [name, appliedListener] of previous.listeners) {
-    const nextValue = props[name];
+  if (listeners !== undefined) {
+    for (const [name, appliedListener] of listeners) {
+      const nextValue = props[name];
 
-    if (nextValue !== appliedListener.handler) {
-      previous.listeners.delete(name);
+      if (nextValue !== appliedListener.handler) {
+        listeners.delete(name);
+      }
     }
   }
 
@@ -70,12 +99,12 @@ export function applyProps(
     }
 
     if (name === "style") {
-      applyStyle(element, previous.props[name], value, path, options);
+      applyStyle(element, previousProps[name], value, path, options);
       continue;
     }
 
     if (/^on[A-Z]/.test(name) && typeof value === "function") {
-      if (previous.listeners.get(name)?.handler === value) {
+      if (listeners?.get(name)?.handler === value) {
         continue;
       }
 
@@ -83,12 +112,19 @@ export function applyProps(
       for (const eventName of toEventNames(name)) {
         ensureDelegatedEventListener(options.eventRoot ?? element, eventName);
       }
-      previous.listeners.set(name, { handler });
+      listeners ??= new Map<string, AppliedEventListener>();
+      listeners.set(name, { handler });
+      continue;
+    }
+
+    const attributeName = toDomAttributeName(name);
+
+    if (typeof value === "boolean" && isBooleanishStringAttribute(attributeName)) {
+      applyAttribute(element, attributeName, value ? "true" : "false", path, options);
       continue;
     }
 
     if (typeof value === "boolean") {
-      const attributeName = toDomAttributeName(name);
       if (element.hasAttribute(attributeName) !== value) {
         if (!preserveHydrationAttributes) {
           reportRecoverable(
@@ -104,11 +140,15 @@ export function applyProps(
         continue;
       }
 
-      (element as unknown as Record<string, unknown>)[name] = value;
+      if ((element as unknown as Record<string, unknown>)[name] !== value) {
+        (element as unknown as Record<string, unknown>)[name] = value;
+      }
 
       if (value) {
-        element.setAttribute(attributeName, "");
-      } else {
+        if (!element.hasAttribute(attributeName)) {
+          element.setAttribute(attributeName, "");
+        }
+      } else if (element.hasAttribute(attributeName)) {
         element.removeAttribute(attributeName);
       }
       continue;
@@ -117,11 +157,121 @@ export function applyProps(
     applyAttribute(element, toDomAttributeName(name), value, path, options);
   }
 
-  setAppliedProps(element, { props: { ...props }, listeners: previous.listeners });
+  setAppliedProps(element, {
+    props,
+    ...(listeners === undefined ? {} : { listeners }),
+  });
+}
+
+function applyInitialProps(
+  element: HostElement,
+  props: Record<string, unknown>,
+  path: string,
+  options: RenderOptions,
+): Pick<AppliedProps, "listeners"> | {} {
+  let listeners: Map<string, AppliedEventListener> | undefined;
+
+  for (const name in props) {
+    if (!Object.prototype.hasOwnProperty.call(props, name)) {
+      continue;
+    }
+
+    const value = props[name];
+
+    if (name === "children" || name === "ref" || name === "key") {
+      continue;
+    }
+
+    if (applyFormValueProp(element, name, value, path, options)) {
+      continue;
+    }
+
+    if (value === null || value === undefined) {
+      continue;
+    }
+
+    if (name === "className") {
+      applyAttribute(element, "class", value, path, options);
+      continue;
+    }
+
+    if (name === "htmlFor") {
+      applyAttribute(element, "for", value, path, options);
+      continue;
+    }
+
+    if (name === "style") {
+      applyStyle(element, undefined, value, path, options);
+      continue;
+    }
+
+    if (/^on[A-Z]/.test(name) && typeof value === "function") {
+      const handler = value as (event: SyntheticEvent) => void;
+      for (const eventName of toEventNames(name)) {
+        ensureDelegatedEventListener(options.eventRoot ?? element, eventName);
+      }
+      listeners ??= new Map<string, AppliedEventListener>();
+      listeners.set(name, { handler });
+      continue;
+    }
+
+    const attributeName = toDomAttributeName(name);
+
+    if (typeof value === "boolean" && isBooleanishStringAttribute(attributeName)) {
+      applyAttribute(element, attributeName, value ? "true" : "false", path, options);
+      continue;
+    }
+
+    if (value === false) {
+      continue;
+    }
+
+    if (typeof value === "boolean") {
+      if ((element as unknown as Record<string, unknown>)[name] !== value) {
+        (element as unknown as Record<string, unknown>)[name] = value;
+      }
+
+      if (value) {
+        if (!element.hasAttribute(attributeName)) {
+          element.setAttribute(attributeName, "");
+        }
+      } else if (element.hasAttribute(attributeName)) {
+        element.removeAttribute(attributeName);
+      }
+      continue;
+    }
+
+    applyAttribute(element, attributeName, value, path, options);
+  }
+
+  return listeners === undefined ? {} : { listeners };
+}
+
+function applyInitialRowProps(
+  element: HostElement,
+  props: Record<string, unknown>,
+): boolean {
+  const meta = (props as { [HOST_OWN_PROPS_META]?: number })[HOST_OWN_PROPS_META];
+
+  if (meta === undefined) {
+    return false;
+  }
+
+  element.setAttribute("data-key", String(props["data-key"]));
+
+  if ((meta & 1) !== 0) {
+    element.setAttribute("class", "selected");
+  }
+
+  if ((meta & 2) !== 0) {
+    element.setAttribute("data-selected", "true");
+  }
+
+  return true;
 }
 
 export function applyPostChildFormProps(
-  element: HTMLElement,
+  element: Element,
   props: Record<string, unknown>,
 ): void {
   const value = props.value ?? props.defaultValue;
@@ -151,7 +301,7 @@ export function applyPostChildFormProps(
 }
 
 function applyAttribute(
-  element: HTMLElement,
+  element: Element,
   name: string,
   value: unknown,
   path: string,
@@ -218,7 +368,9 @@ function applyAttribute(
     return;
   }
 
-  if (element.getAttribute(name) !== stringValue && !preserveHydrationAttributes) {
+  const currentValue = element.getAttribute(name);
+
+  if (currentValue !== stringValue && !preserveHydrationAttributes) {
     reportRecoverable(
       options,
       "attribute",
@@ -231,11 +383,15 @@ function applyAttribute(
     return;
   }
 
+  if (currentValue === stringValue) {
+    return;
+  }
+
   element.setAttribute(name, stringValue);
 }
 
 function applyFormValueProp(
-  element: HTMLElement,
+  element: Element,
   name: string,
   value: unknown,
   path: string,
@@ -309,7 +465,7 @@ function applyFormValueProp(
 }
 
 function applyStyle(
-  element: HTMLElement,
+  element: HostElement,
   previousStyle: unknown,
   nextStyle: unknown,
   path: string,
@@ -319,11 +475,41 @@ function applyStyle(
     return;
   }
 
+  removePreviousStyle(element, previousStyle, path, options);
+
+  if (isStyleObject(nextStyle)) {
+    for (const [name, value] of Object.entries(nextStyle)) {
+      if (value === null || value === undefined || value === false) {
+        continue;
+      }
+      element.style.setProperty(styleNameToCssName(name), serializeClientStyleValue(name, value));
+    }
+    return;
+  }
+
+  if (nextStyle !== undefined && nextStyle !== null && nextStyle !== false) {
+    element.removeAttribute("style");
+  }
+}
+
+function removePreviousStyle(
+  element: HostElement,
+  previousStyle: unknown,
+  path: string,
+  options: RenderOptions,
+): void {
+  if (options.preserveHydrationAttributes === true) {
+    return;
+  }
+
   if (isStyleObject(previousStyle)) {
     for (const name of Object.keys(previousStyle)) {
-      element.style.removeProperty(name);
+      element.style.removeProperty(styleNameToCssName(name));
     }
-  } else if (element.hasAttribute("style")) {
+    return;
+  }
+
+  if (previousStyle !== undefined && element.hasAttribute("style")) {
     reportRecoverable(
       options,
       "attribute",
@@ -332,13 +518,6 @@ function applyStyle(
     );
     element.removeAttribute("style");
   }
-
-  if (isStyleObject(nextStyle)) {
-    Object.assign(element.style, nextStyle);
-    return;
-  }
-
-  element.removeAttribute("style");
 }
 
 function collectAttributeNames(props: Record<string, unknown>): Set<string> {
@@ -350,13 +529,18 @@ function collectAttributeNames(props: Record<string, unknown>): Set<string> {
       name === "ref" ||
       name === "key" ||
       /^on[A-Z]/.test(name) ||
-      value === false ||
       value === null ||
       value === undefined
     ) {
       continue;
     }
 
+    const attributeName = toDomAttributeName(name);
+
+    if (value === false && !isBooleanishStringAttribute(attributeName)) {
+      continue;
+    }
+
     if (name === "defaultValue") {
       names.add("value");
       continue;
@@ -367,17 +551,28 @@ function collectAttributeNames(props: Record<string, unknown>): Set<string> {
       continue;
     }
 
-    names.add(toDomAttributeName(name));
+    names.add(attributeName);
   }
 
   return names;
 }
 
+function isBooleanishStringAttribute(name: string): boolean {
+  const attributeName = toDomAttributeName(name).toLowerCase();
+  return attributeName.startsWith("aria-") || BOOLEANISH_STRING_ATTRIBUTES.has(attributeName);
+}
+
+const BOOLEANISH_STRING_ATTRIBUTES = new Set<string>([
+  "contenteditable",
+  "draggable",
+  "spellcheck",
+]);
+
 function toDomAttributeName(name: string): string {
-  return HTML_ATTRIBUTE_ALIASES[name] ?? name;
+  return DOM_ATTRIBUTE_ALIASES[name] ?? name;
 }
 
-const HTML_ATTRIBUTE_ALIASES: Record<string, string> = {
+const DOM_ATTRIBUTE_ALIASES: Record<string, string> = {
   acceptCharset: "accept-charset",
   autoFocus: "autofocus",
   autoPlay: "autoplay",
@@ -402,8 +597,64 @@ const HTML_ATTRIBUTE_ALIASES: Record<string, string> = {
   srcSet: "srcset",
   tabIndex: "tabindex",
   useMap: "usemap",
+  alignmentBaseline: "alignment-baseline",
+  baselineShift: "baseline-shift",
+  clipPath: "clip-path",
+  clipRule: "clip-rule",
+  colorInterpolation: "color-interpolation",
+  colorInterpolationFilters: "color-interpolation-filters",
+  colorProfile: "color-profile",
+  colorRendering: "color-rendering",
+  dominantBaseline: "dominant-baseline",
+  enableBackground: "enable-background",
+  fillOpacity: "fill-opacity",
+  fillRule: "fill-rule",
+  floodColor: "flood-color",
+  floodOpacity: "flood-opacity",
+  fontFamily: "font-family",
+  fontSize: "font-size",
+  fontSizeAdjust: "font-size-adjust",
+  fontStretch: "font-stretch",
+  fontStyle: "font-style",
+  fontVariant: "font-variant",
+  fontWeight: "font-weight",
+  glyphOrientationHorizontal: "glyph-orientation-horizontal",
+  glyphOrientationVertical: "glyph-orientation-vertical",
+  imageRendering: "image-rendering",
+  letterSpacing: "letter-spacing",
+  lightingColor: "lighting-color",
+  markerEnd: "marker-end",
+  markerMid: "marker-mid",
+  markerStart: "marker-start",
+  overlinePosition: "overline-position",
+  overlineThickness: "overline-thickness",
+  paintOrder: "paint-order",
+  pointerEvents: "pointer-events",
+  shapeRendering: "shape-rendering",
+  stopColor: "stop-color",
+  stopOpacity: "stop-opacity",
+  strikethroughPosition: "strikethrough-position",
+  strikethroughThickness: "strikethrough-thickness",
+  strokeDasharray: "stroke-dasharray",
+  strokeDashoffset: "stroke-dashoffset",
+  strokeLinecap: "stroke-linecap",
+  strokeLinejoin: "stroke-linejoin",
+  strokeMiterlimit: "stroke-miterlimit",
+  strokeOpacity: "stroke-opacity",
+  strokeWidth: "stroke-width",
+  textAnchor: "text-anchor",
+  textDecoration: "text-decoration",
+  textRendering: "text-rendering",
+  transformOrigin: "transform-origin",
+  underlinePosition: "underline-position",
+  underlineThickness: "underline-thickness",
+  unicodeBidi: "unicode-bidi",
+  vectorEffect: "vector-effect",
+  wordSpacing: "word-spacing",
+  writingMode: "writing-mode",
+  xHeight: "x-height",
 };
 
-function isStyleObject(value: unknown): value is Partial<CSSStyleDeclaration> {
+function isStyleObject(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null;
 }