@solidjs/web 2.0.0-beta.13 → 2.0.0-beta.14

package/dist/web.js

@@ -1,4 +1,4 @@
-import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, flatten, createRoot, merge, createComponent, omit, enableHydration, flush } from 'solid-js';
+import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, flatten, createRoot, merge, createComponent, omit, createEffect, enableHydration, flush } from 'solid-js';
 export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, untrack } from 'solid-js';
 
 const DOMWithState = {
@@ -30,6 +30,7 @@ const DOMWithState = {
   }
 };
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
+const $$SLOT = /*#__PURE__*/Symbol("slot");
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 const SVGElements = /*#__PURE__*/new Set([
 "altGlyph", "altGlyphDef", "altGlyphItem", "animate", "animateColor", "animateMotion", "animateTransform", "circle", "clipPath", "color-profile", "cursor", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "font", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignObject", "g", "glyph", "glyphRef", "hkern", "image", "line", "linearGradient", "marker", "mask", "metadata", "missing-glyph", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect",
@@ -63,14 +64,18 @@ const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, optio
 } : transparentOptions);
 const memo = fn => createMemo(() => fn(), syncOptions);
 
-function reconcileArrays(parentNode, a, b) {
+function reconcileArrays(parentNode, a, b, marker) {
   let bLength = b.length,
     aEnd = a.length,
     bEnd = bLength,
     aStart = 0,
     bStart = 0,
-    after = a[aEnd - 1].nextSibling,
-    map = null;
+    tail = a[aEnd - 1],
+    tailTag = tail[$$SLOT],
+    after = tail.parentNode === parentNode && (!tailTag || tailTag === marker) ? tail.nextSibling : marker || null,
+    map = null,
+    anchor,
+    anchorTag;
   while (aStart < aEnd || bStart < bEnd) {
     if (a[aStart] === b[bStart]) {
       aStart++;
@@ -82,20 +87,43 @@ function reconcileArrays(parentNode, a, b) {
       bEnd--;
     }
     if (aEnd === aStart) {
-      const node = bEnd < bLength ? bStart ? b[bStart - 1].nextSibling : b[bEnd - bStart] : after;
-      while (bStart < bEnd) parentNode.insertBefore(b[bStart++], node);
+      let node;
+      if (bEnd < bLength) {
+        if (bStart) {
+          const prev = b[bStart - 1];
+          const prevTag = prev[$$SLOT];
+          node = prev.parentNode === parentNode && (!prevTag || prevTag === marker) ? prev.nextSibling : after;
+        } else node = b[bEnd - bStart];
+      } else node = after;
+      while (bStart < bEnd) {
+        const n = b[bStart++];
+        parentNode.insertBefore(n, node);
+        if (marker) n[$$SLOT] = marker;
+      }
     } else if (bEnd === bStart) {
       while (aStart < aEnd) {
-        if (!map || !map.has(a[aStart])) a[aStart].remove();
-        aStart++;
+        const n = a[aStart++];
+        if (!map || !map.has(n)) {
+          const tag = n[$$SLOT];
+          if (n.parentNode === parentNode && (!tag || tag === marker)) n.remove();
+        }
+      }
+    } else if ((anchor = a[aStart]) === b[bEnd - 1] && b[bStart] === a[aEnd - 1] && anchor.parentNode === parentNode && (!(anchorTag = anchor[$$SLOT]) || anchorTag === marker)) {
+      if (marker) {
+        do {
+          const n = a[--aEnd];
+          parentNode.insertBefore(n, anchor);
+          n[$$SLOT] = marker;
+          bStart++;
+          if (aStart >= aEnd - 1 || bStart >= bEnd) break;
+        } while (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]);
+      } else {
+        do {
+          parentNode.insertBefore(a[--aEnd], anchor);
+          bStart++;
+          if (aStart >= aEnd - 1 || bStart >= bEnd) break;
+        } while (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]);
       }
-    } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
-      const anchor = a[aStart];
-      do {
-        parentNode.insertBefore(a[--aEnd], anchor);
-        bStart++;
-        if (aStart >= aEnd - 1 || bStart >= bEnd) break;
-      } while (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]);
     } else {
       if (!map) {
         map = new Map();
@@ -113,33 +141,63 @@ function reconcileArrays(parentNode, a, b) {
             sequence++;
           }
           if (sequence > index - bStart) {
-            const node = a[aStart];
-            while (bStart < index) parentNode.insertBefore(b[bStart++], node);
-          } else parentNode.replaceChild(b[bStart++], a[aStart++]);
+            const head = a[aStart];
+            const headTag = head[$$SLOT];
+            const node = head.parentNode === parentNode && (!headTag || headTag === marker) ? head : after;
+            while (bStart < index) {
+              const n = b[bStart++];
+              parentNode.insertBefore(n, node);
+              if (marker) n[$$SLOT] = marker;
+            }
+          } else {
+            const oldNode = a[aStart++];
+            const newNode = b[bStart++];
+            const oldTag = oldNode[$$SLOT];
+            if (oldNode.parentNode === parentNode && (!oldTag || oldTag === marker)) {
+              parentNode.replaceChild(newNode, oldNode);
+            } else {
+              parentNode.insertBefore(newNode, after);
+            }
+            if (marker) newNode[$$SLOT] = marker;
+          }
         } else aStart++;
-      } else a[aStart++].remove();
+      } else {
+        const n = a[aStart++];
+        const nTag = n[$$SLOT];
+        if (n.parentNode === parentNode && (!nTag || nTag === marker)) n.remove();
+      }
     }
   }
 }
 
-const $$EVENTS = "_$DX_DELEGATE";
+const $$EVENT_OWNER = "_$DX_EVENT_OWNER";
 const INNER_OWNED = {};
+const delegatedEvents = new Set();
+const delegatedContainers = new Map();
 function render$1(code, element, init, options = {}) {
   let disposer;
-  createRoot(dispose => {
-    disposer = dispose;
-    if (element === document) {
-      const tree = code();
-      effect(() => flatten(tree), () => {});
-    } else {
-      const tree = code();
-      insert(element, () => tree, element.firstChild ? null : undefined, init, options.insertOptions);
-    }
-  }, {
-    id: options.renderId
-  });
+  registerDelegatedRoot(element);
+  try {
+    createRoot(dispose => {
+      disposer = dispose;
+      if (element === document) {
+        const tree = code();
+        effect(() => flatten(tree), () => {});
+      } else {
+        const tree = code();
+        insert(element, () => tree, element.firstChild ? null : undefined, init, options.insertOptions);
+      }
+    }, {
+      id: options.renderId
+    });
+  } catch (err) {
+    if (disposer) disposer();
+    unregisterDelegatedRoot(element);
+    throw err;
+  }
   return () => {
     disposer();
+    unregisterDelegatedRoot(element);
     element.textContent = "";
   };
 }
@@ -153,20 +211,66 @@ function template(html, flag) {
   const fn = flag === 1 ? bypassGuard => document.importNode(node || (node = create(html, bypassGuard, flag)), true) : bypassGuard => (node || (node = create(html, bypassGuard, flag))).cloneNode(true);
   return fn;
 }
-function delegateEvents(eventNames, document = window.document) {
-  const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
+function delegateEvents(eventNames) {
   for (let i = 0, l = eventNames.length; i < l; i++) {
     const name = eventNames[i];
-    if (!e.has(name)) {
-      e.add(name);
-      document.addEventListener(name, eventHandler);
+    if (!delegatedEvents.has(name)) {
+      delegatedEvents.add(name);
+      delegatedContainers.forEach((state, container) => attachDelegatedEvent(name, container, state));
     }
   }
 }
-function clearDelegatedEvents(document = window.document) {
-  if (document[$$EVENTS]) {
-    for (let name of document[$$EVENTS].keys()) document.removeEventListener(name, eventHandler);
-    delete document[$$EVENTS];
+function registerDelegatedRoot(root) {
+  const state = registerDelegatedContainer(root, root);
+  if (state) state.roots = (state.roots || 0) + 1;
+}
+function unregisterDelegatedRoot(root) {
+  const state = delegatedContainers.get(root);
+  if (state) state.roots > 1 ? state.roots-- : delete state.roots;
+  unregisterDelegatedContainer(root, root);
+}
+function registerDelegatedContainer(container, owner = container) {
+  if (!container || !owner) return;
+  let state = delegatedContainers.get(container);
+  if (!state) delegatedContainers.set(container, state = {
+    owners: new Map(),
+    handlers: new Map()
+  });
+  state.owners.set(owner, (state.owners.get(owner) || 0) + 1);
+  delegatedEvents.forEach(name => attachDelegatedEvent(name, container, state));
+  return state;
+}
+function unregisterDelegatedContainer(container, owner = container) {
+  const state = delegatedContainers.get(container);
+  if (!state) return;
+  const count = state.owners.get(owner);
+  if (count > 1) state.owners.set(owner, count - 1);else state.owners.delete(owner);
+  if (state.owners.size) return;
+  state.handlers.forEach((handler, name) => container.removeEventListener(name, handler));
+  delegatedContainers.delete(container);
+}
+function attachDelegatedEvent(name, container, state) {
+  if (state.handlers.has(name)) return;
+  const handler = e => eventHandler(e, container, state);
+  state.handlers.set(name, handler);
+  container.addEventListener(name, handler);
+}
+function getDelegatedRoot(node) {
+  while (node) {
+    if (delegatedContainers.get(node)?.roots) return node;
+    node = node._$host || node.parentNode || node.host;
+  }
+}
+function findOwner(target, state) {
+  let node = target;
+  let distance = 0;
+  while (node) {
+    if (state.owners.has(node)) return {
+      owner: node,
+      distance
+    };
+    distance++;
+    node = node._$host || node.parentNode || node.host;
   }
 }
 function setProperty(node, name, value) {
@@ -211,7 +315,7 @@ function className(node, value, prev) {
     node.classList.add(key);
   }
 }
-function addEventListener(node, name, handler, delegate) {
+function addEvent(node, name, handler, delegate) {
   if (delegate) {
     if (Array.isArray(handler)) {
       node[`$$${name}`] = handler[0];
@@ -461,7 +565,17 @@ function runHydrationEvents() {
         const [el, e] = events[0];
         if (!completed.has(el)) return;
         events.shift();
-        eventHandler(e);
+        let match;
+        for (const [container, state] of delegatedContainers) {
+          if (!state.handlers.has(e.type)) continue;
+          const entry = findOwner(e.target, state);
+          if (entry && (!match || entry.distance < match.distance)) match = {
+            container,
+            state,
+            distance: entry.distance
+          };
+        }
+        if (match) eventHandler(e, match.container, match.state);
       }
       if (sharedConfig.done) {
         sharedConfig.events = _$HY.events = null;
@@ -516,7 +630,7 @@ function assignProp(node, prop, value, prev, skipRef, nodeName) {
       node.removeEventListener(name, h);
     }
     if (delegate || value) {
-      addEventListener(node, name, value, delegate);
+      addEvent(node, name, value, delegate);
       delegate && delegateEvents([name]);
     }
   } else if (hasNamespace && prop.slice(0, 5) === "prop:" || ChildProperties.has(prop) || DOMWithState[nodeName]?.[prop]) {
@@ -528,14 +642,18 @@ function assignProp(node, prop, value, prev, skipRef, nodeName) {
   }
   return value;
 }
-function eventHandler(e) {
+function eventHandler(e, container, state) {
   if (sharedConfig.registry && sharedConfig.events) {
     if (sharedConfig.events.find(([el, ev]) => ev === e)) return;
   }
+  if (e[$$EVENT_OWNER]) return;
+  const owner = state && (state.owners.size === 1 && state.owners.has(container) ? container : findOwner(e.target, state)?.owner);
+  if (state && !owner) return;
+  e[$$EVENT_OWNER] = owner || true;
   let node = e.target;
   const key = `$$${e.type}`;
   const oriTarget = e.target;
-  const oriCurrentTarget = e.currentTarget;
+  const boundary = owner || container || e.currentTarget;
   const retarget = value => Object.defineProperty(e, "target", {
     configurable: true,
     value
@@ -551,29 +669,34 @@ function eventHandler(e) {
     return true;
   };
   const walkUpTree = () => {
-    while (handleNode() && (node = node._$host || node.parentNode || node.host));
+    while (handleNode()) {
+      if (node === boundary || node.parentNode === boundary) break;
+      node = node._$host || node.parentNode || node.host;
+    }
   };
   Object.defineProperty(e, "currentTarget", {
     configurable: true,
     get() {
-      return node || document;
+      return node || boundary || document;
     }
   });
   if (e.composedPath) {
     const path = e.composedPath();
-    retarget(path[0]);
-    for (let i = 0; i < path.length - 2; i++) {
-      node = path[i];
-      if (!handleNode()) break;
-      if (node._$host) {
-        node = node._$host;
-        walkUpTree();
-        break;
-      }
-      if (node.parentNode === oriCurrentTarget) {
-        break;
+    if (path.length) {
+      retarget(path[0]);
+      for (let i = 0; i < path.length; i++) {
+        node = path[i];
+        if (!handleNode()) break;
+        if (node._$host) {
+          node = node._$host;
+          walkUpTree();
+          break;
+        }
+        if (node === boundary || node.parentNode === boundary) {
+          break;
+        }
       }
-    }
+    } else walkUpTree();
   }
   else walkUpTree();
   retarget(oriTarget);
@@ -593,9 +716,14 @@ function insertExpression(parent, value, current, marker) {
   } else if (value.nodeType) {
     if (Array.isArray(current)) {
       cleanChildren(parent, current, multi ? marker : null, value);
-    } else if (current === undefined || !parent.firstChild) {
+    } else if (current && current.nodeType) {
+      current.parentNode === parent ? parent.replaceChild(value, current) : parent.appendChild(value);
+    } else if (current && parent.firstChild) {
+      parent.replaceChild(value, parent.firstChild);
+    } else {
       parent.appendChild(value);
-    } else parent.replaceChild(value, parent.firstChild);
+    }
+    if (marker) value[$$SLOT] = marker;
   } else if (Array.isArray(value)) {
     const currentArray = current && Array.isArray(current);
     if (value.length === 0) {
@@ -603,7 +731,7 @@ function insertExpression(parent, value, current, marker) {
     } else if (currentArray) {
       if (current.length === 0) {
         appendNodes(parent, value, marker);
-      } else reconcileArrays(parent, current, value);
+      } else reconcileArrays(parent, current, value, marker);
     } else {
       current && cleanChildren(parent);
       appendNodes(parent, value);
@@ -628,7 +756,11 @@ function normalize(value, current, multi, doNotUnwrap) {
   return value;
 }
 function appendNodes(parent, array, marker = null) {
-  for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
+  for (let i = 0, len = array.length; i < len; i++) {
+    const n = array[i];
+    parent.insertBefore(n, marker);
+    if (marker) n[$$SLOT] = marker;
+  }
 }
 function cleanChildren(parent, current, marker, replacement) {
   if (marker === undefined) return parent.textContent = "";
@@ -637,11 +769,13 @@ function cleanChildren(parent, current, marker, replacement) {
     for (let i = current.length - 1; i >= 0; i--) {
       const el = current[i];
       if (replacement !== el) {
-        const isParent = el.parentNode === parent;
-        if (replacement && !inserted && !i) isParent ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else isParent && el.remove();
+        const tag = el[$$SLOT];
+        const owns = el.parentNode === parent && (!tag || tag === marker);
+        if (replacement && !inserted && !i) owns ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else if (owns) el.remove();
       } else inserted = true;
     }
   } else if (replacement) parent.insertBefore(replacement, marker);
+  if (replacement && marker) replacement[$$SLOT] = marker;
 }
 function gatherHydratable(element, root) {
   const templates = element.querySelectorAll(`*[_hk]`);
@@ -703,8 +837,8 @@ function Portal(props) {
   const treeMarker = document.createTextNode(""),
     startMarker = document.createTextNode(""),
     endMarker = document.createTextNode(""),
-    mount = () => createElementProxy(props.mount || document.body, treeMarker);
-  let content = createMemo(() => [startMarker, props.children]);
+    mount = () => createElementProxy(props.mount || document.body, treeMarker),
+    content = createMemo(() => [startMarker, props.children]);
   createRenderEffect(() => [mount(), content()], ([m, c]) => {
     m.appendChild(endMarker);
     insert(m, c, endMarker);
@@ -717,6 +851,12 @@ function Portal(props) {
       }
     };
   });
+  createEffect(mount, m => {
+    const ownerRoot = getDelegatedRoot(treeMarker);
+    if (!ownerRoot || ownerRoot.contains(m)) return;
+    registerDelegatedContainer(m, ownerRoot);
+    return () => unregisterDelegatedContainer(m, ownerRoot);
+  });
   return treeMarker;
 }
 function dynamic(source) {
@@ -764,4 +904,4 @@ function createElementProxy(el, marker) {
   });
 }
 
-export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, addEventListener, applyRef, assign, className, clearDelegatedEvents, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, mergeProps, ref, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, voidFn as useAssets };
+export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, addEvent, applyRef, assign, className, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getDelegatedRoot, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, mergeProps, ref, registerDelegatedContainer, registerDelegatedRoot, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, voidFn as useAssets };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/web",
   "description": "Solid's web runtime: client rendering, hydration, SSR, and DOM-specific control flow (Portal, Dynamic).",
-  "version": "2.0.0-beta.13",
+  "version": "2.0.0-beta.14",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -137,10 +137,10 @@
     "seroval-plugins": "^1.1.0"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-beta.13"
+    "solid-js": "^2.0.0-beta.14"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-beta.13"
+    "solid-js": "2.0.0-beta.14"
   },
   "scripts": {
     "build": "npm-run-all -nl build:clean types:copy-jsx build:js",

package/types/client.d.ts

@@ -33,8 +33,18 @@ export function insert<T>(
   init?: JSX.Element
 ): JSX.Element;
 export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
-export function delegateEvents(eventNames: string[], d?: Document): void;
-export function clearDelegatedEvents(d?: Document): void;
+export function delegateEvents(eventNames: string[]): void;
+export function registerDelegatedRoot(root: MountableElement): void;
+export function unregisterDelegatedRoot(root: MountableElement): void;
+export function registerDelegatedContainer(
+  container: MountableElement,
+  owner?: MountableElement
+): void;
+export function unregisterDelegatedContainer(
+  container: MountableElement,
+  owner?: MountableElement
+): void;
+export function getDelegatedRoot(node: MountableElement): MountableElement | undefined;
 export function spread<T>(node: Element, accessor: T, skipChildren?: Boolean): void;
 export function assign(
   node: Element,
@@ -45,17 +55,10 @@ export function assign(
 ): void;
 export function setAttribute(node: Element, name: string, value: string): void;
 export function setAttributeNS(node: Element, namespace: string, name: string, value: string): void;
-type ClassList =
-  | Record<string, boolean>
-  | Array<string | number | boolean | null | undefined | Record<string, boolean>>;
-export function className(
-  node: Element,
-  value: string | ClassList,
-  prev?: string | ClassList
-): void;
+export function className(node: Element, value: JSX.ClassValue, prev?: JSX.ClassValue): void;
 export function setProperty(node: Element, name: string, value: any): void;
 export function setStyleProperty(node: Element, name: string, value: any): void;
-export function addEventListener(
+export function addEvent(
   node: Element,
   name: string,
   handler: EventListener | EventListenerObject | (EventListenerObject & AddEventListenerOptions),

package/types/jsx-properties.d.ts

@@ -31,6 +31,7 @@ export type PropValue =
   | MediaSource
   | Blob
   | File
+  | Date
   | Element;
 
 /**

package/types/jsx.d.ts

@@ -224,7 +224,8 @@ export namespace JSX {
   >;
   // end event handlers
 
-  type ClassList =
+  export type ClassValue =
+    | string
     | Record<string, boolean>
     | Array<string | number | boolean | null | undefined | Record<string, boolean>>;
 
@@ -269,11 +270,6 @@ export namespace JSX {
 
   // TODO: Should we allow this?
   // type ClassKeys = `class:${string}`;
-  // type CSSKeys = Exclude<keyof csstype.PropertiesHyphen, `-${string}`>;
-
-  // type CSSAttributes = {
-  //   [key in CSSKeys as `style:${key}`]: csstype.PropertiesHyphen[key];
-  // };
 
   // BOOLEAN
 
@@ -859,6 +855,20 @@ export namespace JSX {
         : never)
     | (string & {});
 
+  type ExtractEventType<T> = {
+    [K in keyof T as K extends `on${infer Name}` ? Name : never]: T[K] extends EventHandlerUnion<
+      Element,
+      infer E
+    >
+      ? E
+      : never;
+  };
+
+  // EventType["click"] = MouseEvent
+
+  type EventType = ExtractEventType<EventHandlersElement<Element>> &
+    ExtractEventType<EventHandlersWindow<Element>>;
+
   // GLOBAL ATTRIBUTES
 
   /**
@@ -890,7 +900,7 @@ export namespace JSX {
      * with reactive values directly; manually-built strings re-run the whole
      * concatenation on every change instead of toggling the affected classes.
      */
-    class?: string | ClassList | RemoveAttribute;
+    class?: ClassValue | RemoveAttribute;
     elementtiming?: string | RemoveAttribute;
     id?: string | RemoveAttribute;
     nonce?: string | RemoveAttribute;
@@ -1532,6 +1542,10 @@ export namespace JSX {
     src?: string | RemoveAttribute;
 
     onEncrypted?: EventHandlerUnion<T, MediaEncryptedEvent> | undefined;
+    onWaitingForKey?: EventHandlerUnion<T, Event> | undefined;
+
+    /** @deprecated */
+    mediagroup?: string | RemoveAttribute;
 
     // special cases locked to properties
 
@@ -1866,6 +1880,11 @@ export namespace JSX {
     width?: number | string | RemoveAttribute;
 
     onEnterPictureInPicture?: EventHandlerUnion<T, PictureInPictureEvent> | undefined;
+    onLeavePictureInPicture?: EventHandlerUnion<T, PictureInPictureEvent> | undefined;
+  }
+
+  interface WebViewHTMLAttributes<T> extends HTMLAttributes<T> {
+    allowpopups?: BooleanAttribute | RemoveAttribute;
     disableblinkfeatures?: string | RemoveAttribute;
     disablewebsecurity?: BooleanAttribute | RemoveAttribute;
     enableblinkfeatures?: string | RemoveAttribute;
@@ -1968,7 +1987,7 @@ export namespace JSX {
      * with reactive values directly; manually-built strings re-run the whole
      * concatenation on every change instead of toggling the affected classes.
      */
-    class?: string | ClassList | RemoveAttribute;
+    class?: ClassValue | RemoveAttribute;
     style?: CSSProperties | string | RemoveAttribute;
   }
   interface TransformableSVGAttributes {
@@ -2140,6 +2159,29 @@ export namespace JSX {
   interface AnimationElementSVGAttributes<T>
     extends SVGAttributes<T>, ExternalResourceSVGAttributes, ConditionalProcessingSVGAttributes {
     onBegin?: EventHandlerUnion<T, TimeEvent> | undefined;
+    onEnd?: EventHandlerUnion<T, TimeEvent> | undefined;
+    onRepeat?: EventHandlerUnion<T, TimeEvent> | undefined;
+  }
+
+  interface ContainerElementSVGAttributes<T>
+    extends
+      SVGAttributes<T>,
+      ShapeElementSVGAttributes<T>,
+      Pick<
+        PresentationSVGAttributes,
+        | "clip-path"
+        | "mask"
+        | "cursor"
+        | "opacity"
+        | "filter"
+        | "enable-background"
+        | "color-interpolation"
+        | "color-rendering"
+      > {}
+
+  interface FilterPrimitiveElementSVGAttributes<T>
+    extends SVGAttributes<T>, Pick<PresentationSVGAttributes, "color-interpolation-filters"> {
+    height?: number | string | RemoveAttribute;
     result?: string | RemoveAttribute;
     width?: number | string | RemoveAttribute;
     x?: number | string | RemoveAttribute;