@react5/dom-jsx 0.1.2 → 0.1.4

package/README.md

@@ -21,6 +21,30 @@ For TypeScript automatic JSX, set these compiler options:
 
 The runtime also works with Vite. Vite discovers the package's ESM `jsx-runtime` and `jsx-dev-runtime` exports automatically when compiling TSX.
 
+Function components may return DOM nodes with an attached API:
+
+```tsx
+type ModalContext = { open(): void; close(): void }
+
+function Modal() {
+  const element = <dialog /> as HTMLDialogElement
+
+  return Object.assign(element, {
+    open: () => element.showModal(),
+    close: () => element.close()
+  }) satisfies HTMLDialogElement & ModalContext
+}
+
+const modal = <Modal />
+modal.open()
+```
+
+TypeScript represents all JSX expressions with one `JSX.Element` type, so it
+cannot preserve the exact intersection type of an individual component in
+TSX. The library's JSX element type therefore permits component-specific
+properties. Calling the component directly, or calling `jsx(Modal, null)`,
+preserves its exact return type.
+
 ## Runtime behavior
 
 Intrinsic JSX tags become DOM elements. `class` sets `className`, `style` accepts a style object, DOM properties are assigned when available, boolean attributes use presence semantics, and `onClick`-style function props become event listeners. Text, nested nodes, arrays, fragments, and function components are supported; `null`, `undefined`, and boolean children are ignored.

package/dist/jsx-runtime.d.ts

@@ -2,18 +2,16 @@ export type Child = Node | string | number | boolean | null | undefined | Child[
 export type Props = Record<string, unknown> & {
     children?: Child | Child[];
 };
-export type Component<P = Props> = (props: P) => Node;
+export type Component<P = Props, R extends Node = Node> = (props: P) => R;
 export type DOMEventHandler<T extends EventTarget, E extends Event> = (event: E & {
     currentTarget: T;
 }) => void;
-export type EventProps<T extends HTMLElement> = {
-    onClick?: DOMEventHandler<T, MouseEvent>;
+type MappedEventProps<T extends HTMLElement> = {
+    [K in keyof HTMLElementEventMap as `on${Capitalize<K & string>}`]?: DOMEventHandler<T, HTMLElementEventMap[K]>;
+};
+export type EventProps<T extends HTMLElement> = Omit<MappedEventProps<T>, 'onInput' | 'onDblclick'> & {
     onInput?: DOMEventHandler<T, InputEvent>;
-    onChange?: DOMEventHandler<T, Event>;
-    onFocus?: DOMEventHandler<T, FocusEvent>;
-    onBlur?: DOMEventHandler<T, FocusEvent>;
-    onKeyDown?: DOMEventHandler<T, KeyboardEvent>;
-    onKeyUp?: DOMEventHandler<T, KeyboardEvent>;
+    onDblClick?: DOMEventHandler<T, MouseEvent>;
 };
 export type Ref<T> = {
     current: T | null;
@@ -28,15 +26,13 @@ export declare function createRef<T>(): {
     current: T | null;
 };
 export declare namespace JSX {
-    type Element = Node;
+    type Element = Node & Record<string, any>;
     type IntrinsicElements = {
         [K in keyof HTMLElementTagNameMap]: ElementProps<HTMLElementTagNameMap[K]>;
-    } & {
-        form: ElementProps<HTMLFormElement> & {
-            onSubmit?: DOMEventHandler<HTMLFormElement, SubmitEvent>;
-        };
     };
 }
-export declare function jsx(tag: string | ((props: any) => Node), props: Props | null, _key?: string | number): Node;
+export declare function jsx<R extends Node>(tag: (props: any) => R, props: Props | null, _key?: string | number): R;
+export declare function jsx(tag: string, props: Props | null, _key?: string | number): Node;
 export declare const jsxs: typeof jsx;
 export declare function Fragment(props: Props): DocumentFragment;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react5/dom-jsx",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "JSX runtime for vanilla TS/JS projects.",
   "keywords": [
     "JSX"