@react5/dom-jsx 0.1.3 → 0.1.5

package/README.md

@@ -24,22 +24,33 @@ The runtime also works with Vite. Vite discovers the package's ESM `jsx-runtime`
 Function components may return DOM nodes with an attached API:
 
 ```tsx
-type ModalContext = { open?(): void; close?(): void }
+type ModalContext = { open(): void; close(): void }
 
 function Modal() {
-  const element = <dialog />
-  return element as HTMLDialogElement & { context: ModalContext }
+  const element = <dialog /> as HTMLDialogElement
+  const context: ModalContext = {
+    open: () => element.showModal(),
+    close: () => element.close()
+  }
+
+  return Object.assign(element, { context }) satisfies
+    HTMLDialogElement & { context: ModalContext }
 }
 
 const modal = <Modal />
-modal.context.open?.()
+modal.context?.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.
+TSX. The library's JSX element type therefore allows an optional `context`
+property, typed loosely as `Record<string, any>`, on every JSX result.
+Accessing any other property directly on the node (e.g. a typo'd DOM
+property) is still checked normally. `context` is optional because plain
+intrinsic elements don't have one, so calling through it via `<Tag />` JSX
+syntax needs `?.`. To get the component's exact, non-optional `context`
+type instead, call the component directly or call `jsx(Modal, null)` /
+`jsxDEV(Modal, null)`.
 
 ## Runtime behavior
 

package/dist/jsx-runtime.d.ts

@@ -26,7 +26,9 @@ export declare function createRef<T>(): {
     current: T | null;
 };
 export declare namespace JSX {
-    type Element = Node & Record<string, any>;
+    type Element = Node & {
+        context?: Record<string, any>;
+    };
     type IntrinsicElements = {
         [K in keyof HTMLElementTagNameMap]: ElementProps<HTMLElementTagNameMap[K]>;
     };

package/package.json

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