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

package/types/jsx.d.ts

@@ -224,9 +224,14 @@ export namespace JSX {
   >;
   // end event handlers
 
-  type ClassList =
+  export type ClassValue =
+    | string
+    | number
+    | boolean
+    | null
+    | undefined
     | Record<string, boolean>
-    | Array<string | number | boolean | null | undefined | Record<string, boolean>>;
+    | ClassValue[];
 
   const SERIALIZABLE: unique symbol;
   interface SerializableAttributeValue {
@@ -269,11 +274,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 +859,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 +904,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 +1546,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 +1884,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 +1991,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 +2163,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;

package/types/server.d.ts

@@ -1,4 +1,5 @@
 import { JSX } from "./jsx.js";
+export const DOMWithState: Record<string, Record<string, 1 | 2>>;
 export const ChildProperties: Set<string>;
 export const DelegatedEvents: Set<string>;
 export const DOMElements: Set<string>;
@@ -124,7 +125,23 @@ export function insert<T>(
 export function spread<T>(node: Element, accessor: T, skipChildren?: Boolean): void;
 
 /** @deprecated not supported on the server side */
-export function delegateEvents(eventNames: string[], d?: Document): void;
+export function delegateEvents(eventNames: string[]): void;
+/** @deprecated not supported on the server side */
+export function registerDelegatedRoot(root: MountableElement): void;
+/** @deprecated not supported on the server side */
+export function unregisterDelegatedRoot(root: MountableElement): void;
+/** @deprecated not supported on the server side */
+export function registerDelegatedContainer(
+  container: MountableElement,
+  owner?: MountableElement
+): void;
+/** @deprecated not supported on the server side */
+export function unregisterDelegatedContainer(
+  container: MountableElement,
+  owner?: MountableElement
+): void;
+/** @deprecated not supported on the server side */
+export function getDelegatedRoot(node: MountableElement): MountableElement | undefined;
 /** @deprecated not supported on the server side */
 export function dynamicProperty(props: unknown, key: string): unknown;
 /** @deprecated not supported on the server side */
@@ -133,12 +150,7 @@ export function setAttribute(node: Element, name: string, value: string): void;
 export function setAttributeNS(node: Element, namespace: string, name: string, value: string): void;
 
 /** @deprecated not supported on the server side */
-export function addEventListener(
-  node: Element,
-  name: string,
-  handler: () => void,
-  delegate: boolean
-): void;
+export function addEvent(node: Element, name: string, handler: () => void, delegate: boolean): void;
 
 /** @deprecated not supported on the server side */
 export function render(code: () => JSX.Element, element: MountableElement): () => void;
@@ -172,3 +184,10 @@ export function getNextMatch(start: Node, elementName: string): Element;
 export function getNextMarker(start: Node): [Node, Array<Node>];
 /** @deprecated not supported on the server side */
 export function runHydrationEvents(): void;
+/** @deprecated not supported on the server side */
+export function ref(
+  fn: () => ((element: Element) => void) | ((element: Element) => void)[],
+  element: Element
+): void;
+/** @deprecated not supported on the server side */
+export function setStyleProperty(node: Element, name: string, value: any): void;

package/types-cjs/client.d.cts

@@ -30,11 +30,31 @@ export function insert<T>(
   parent: MountableElement,
   accessor: (() => T) | T,
   marker?: Node | null,
-  init?: JSX.Element
+  init?: JSX.Element,
+  options?: {
+    /**
+     * Live accessor for the slot's logical host in the source tree (portals).
+     * Each top-level node the slot manages is tagged with a `_$host` getter
+     * backed by this accessor so delegated events retarget correctly.
+     */
+    host?: () => Node | null;
+    /** Defer the insert effect to the queue instead of running it inline. */
+    schedule?: boolean;
+  }
 ): 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 +65,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-cjs/jsx-properties.d.cts

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

package/types-cjs/jsx.d.cts

@@ -224,9 +224,14 @@ export namespace JSX {
   >;
   // end event handlers
 
-  type ClassList =
+  export type ClassValue =
+    | string
+    | number
+    | boolean
+    | null
+    | undefined
     | Record<string, boolean>
-    | Array<string | number | boolean | null | undefined | Record<string, boolean>>;
+    | ClassValue[];
 
   const SERIALIZABLE: unique symbol;
   interface SerializableAttributeValue {
@@ -269,11 +274,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 +859,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 +904,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 +1546,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 +1884,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 +1991,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 +2163,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;

package/types-cjs/server.d.cts

@@ -1,4 +1,5 @@
 import { JSX } from "./jsx.cjs";
+export const DOMWithState: Record<string, Record<string, 1 | 2>>;
 export const ChildProperties: Set<string>;
 export const DelegatedEvents: Set<string>;
 export const DOMElements: Set<string>;
@@ -124,7 +125,23 @@ export function insert<T>(
 export function spread<T>(node: Element, accessor: T, skipChildren?: Boolean): void;
 
 /** @deprecated not supported on the server side */
-export function delegateEvents(eventNames: string[], d?: Document): void;
+export function delegateEvents(eventNames: string[]): void;
+/** @deprecated not supported on the server side */
+export function registerDelegatedRoot(root: MountableElement): void;
+/** @deprecated not supported on the server side */
+export function unregisterDelegatedRoot(root: MountableElement): void;
+/** @deprecated not supported on the server side */
+export function registerDelegatedContainer(
+  container: MountableElement,
+  owner?: MountableElement
+): void;
+/** @deprecated not supported on the server side */
+export function unregisterDelegatedContainer(
+  container: MountableElement,
+  owner?: MountableElement
+): void;
+/** @deprecated not supported on the server side */
+export function getDelegatedRoot(node: MountableElement): MountableElement | undefined;
 /** @deprecated not supported on the server side */
 export function dynamicProperty(props: unknown, key: string): unknown;
 /** @deprecated not supported on the server side */
@@ -133,12 +150,7 @@ export function setAttribute(node: Element, name: string, value: string): void;
 export function setAttributeNS(node: Element, namespace: string, name: string, value: string): void;
 
 /** @deprecated not supported on the server side */
-export function addEventListener(
-  node: Element,
-  name: string,
-  handler: () => void,
-  delegate: boolean
-): void;
+export function addEvent(node: Element, name: string, handler: () => void, delegate: boolean): void;
 
 /** @deprecated not supported on the server side */
 export function render(code: () => JSX.Element, element: MountableElement): () => void;
@@ -172,3 +184,10 @@ export function getNextMatch(start: Node, elementName: string): Element;
 export function getNextMarker(start: Node): [Node, Array<Node>];
 /** @deprecated not supported on the server side */
 export function runHydrationEvents(): void;
+/** @deprecated not supported on the server side */
+export function ref(
+  fn: () => ((element: Element) => void) | ((element: Element) => void)[],
+  element: Element
+): void;
+/** @deprecated not supported on the server side */
+export function setStyleProperty(node: Element, name: string, value: any): void;