@react5/dom-jsx 0.1.4 → 0.1.6

package/README.md

@@ -24,26 +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 ModalApi = { open(): void; close(): void }
 
 function Modal() {
   const element = <dialog /> as HTMLDialogElement
-
-  return Object.assign(element, {
+  const api: ModalApi = {
     open: () => element.showModal(),
     close: () => element.close()
-  }) satisfies HTMLDialogElement & ModalContext
+  }
+
+  return Object.assign(element, { api }) satisfies
+    HTMLDialogElement & { api: ModalApi }
 }
 
 const modal = <Modal />
-modal.open()
+modal.api?.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 `api`
+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. `api` 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 `api`
+type instead, call the component directly or call `jsx(Modal, null)` /
+`jsxDEV(Modal, null)`.
 
 ## Runtime behavior
 
@@ -52,7 +59,7 @@ Intrinsic JSX tags become DOM elements. `class` sets `className`, `style` accept
 The public entry points are:
 
 ```ts
-import { createRef, jsx, jsxs, Fragment } from '@react5/dom-jsx'
+import { createRef, createContext, useContext, jsx, jsxs, Fragment } from '@react5/dom-jsx'
 import { jsx, jsxs, jsxDEV, Fragment } from '@react5/dom-jsx/jsx-dev-runtime'
 ```
 
@@ -77,6 +84,38 @@ inputRef.current // HTMLInputElement
 
 A callback ref (`ref={(el) => ...}`) is also supported and is invoked with the element once it's created.
 
+### Context
+
+Pass values down to nested components without threading props through every level:
+
+```tsx
+import { createContext, useContext } from '@react5/dom-jsx'
+
+const ThemeContext = createContext({ color: 'black' })
+
+function Title(props: { text: string }) {
+  const theme = useContext(ThemeContext)
+  return <h1 style={{ color: theme.color }}>{props.text}</h1>
+}
+
+const page = (
+  <ThemeContext.Provider value={{ color: 'red' }}>
+    {() => <Title text="Hello" />}
+  </ThemeContext.Provider>
+)
+```
+
+JSX in this runtime is evaluated eagerly from the inside out: children are
+created before their parent component runs. A Provider's child must
+therefore be a render function (`{() => ...}`); the Provider calls it while
+its value is active, so every component rendered inside sees that value.
+Providers can be nested, and the innermost value wins.
+
+`useContext` returns the nearest Provider's value only while rendering is in
+progress. Call it synchronously in a component body and keep the result.
+Called later, for example from an event handler or a `setTimeout`, it
+returns the context's default value.
+
 ## Development
 
 ```sh

package/dist/index.js

@@ -1 +1 @@
-import{Fragment as r,createRef as m,jsx as o,jsxs as t}from"./jsx-runtime.js";export{r as Fragment,m as createRef,o as jsx,t as jsxs};
+import{Fragment as r,createContext as m,createRef as o,jsx as t,jsxs as e,useContext as i}from"./jsx-runtime.js";export{r as Fragment,m as createContext,o as createRef,t as jsx,e as jsxs,i as useContext};

package/dist/jsx-runtime.d.ts

@@ -25,13 +25,24 @@ export type ElementProps<T extends HTMLElement> = Partial<Omit<T, 'children' | '
 export declare function createRef<T>(): {
     current: T | null;
 };
+export type ProviderProps<T> = {
+    value: T;
+    children: () => Child;
+};
+export type Context<T> = {
+    Provider: (props: ProviderProps<T>) => Node;
+};
+export declare function createContext<T>(defaultValue: T): Context<T>;
+export declare function useContext<T>(context: Context<T>): T;
 export declare namespace JSX {
-    type Element = Node & Record<string, any>;
+    type Element = Node & {
+        api?: Record<string, any>;
+    };
     type IntrinsicElements = {
         [K in keyof HTMLElementTagNameMap]: ElementProps<HTMLElementTagNameMap[K]>;
     };
 }
-export declare function jsx<R extends Node>(tag: (props: any) => R, props: Props | null, _key?: string | number): R;
+export declare function jsx<P, R extends Node>(tag: (props: P) => R, props: {} extends P ? P | null : P, _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;

package/dist/jsx-runtime.js

@@ -1 +1 @@
-function e(){return{current:null}}function t(e,t,n){return function(e,t){const n=t??{};if("function"==typeof e)return e(n);const r=document.createElement(e);for(const[i,o]of Object.entries(n))if("children"!==i&&"ref"!==i)if(i.startsWith("on")&&"function"==typeof o)r.addEventListener(i.slice(2).toLowerCase(),o);else if("class"!==i){if("style"===i&&o&&"object"==typeof o)Object.assign(r.style,o);else if(null!=o)if(i.includes("-"))r.setAttribute(i,String(o));else{if(i in r){if(!1===o)continue;try{r[i]=o;continue}catch{}}r.setAttribute(i,!0===o?"":String(o))}}else r.className=String(o??"");i(r,n.children);const c=n.ref;"function"==typeof c?c(r):c&&(c.current=r);return r}(e,t)}var n=t;function r(e){const t=document.createDocumentFragment();return i(t,e.children),t}function i(e,t){if(Array.isArray(t))for(const n of t)i(e,n);else t instanceof Node?e.appendChild(t):null!=t&&!1!==t&&!0!==t&&e.appendChild(document.createTextNode(String(t)))}export{r as Fragment,e as createRef,t as jsx,n as jsxs};
+function e(){return{current:null}}var t=/* @__PURE__ */new WeakMap;function n(e){const n=[],r={Provider({value:e,children:t}){if("function"!=typeof t)throw new TypeError("Context Provider expects a single function child: {() => ...}");n.push(e);try{const e=t();if(e instanceof Node)return e;const n=document.createDocumentFragment();return s(n,e),n}finally{n.pop()}}};return t.set(r,{defaultValue:e,stack:n}),r}function r(e){const n=t.get(e);if(!n)throw new TypeError("useContext expects a context created by createContext");const{defaultValue:r,stack:o}=n;return o.length>0?o[o.length-1]:r}function o(e,t,n){return function(e,t){const n=t??{};if("function"==typeof e)return e(n);const r=document.createElement(e);for(const[c,i]of Object.entries(n))if("children"!==c&&"ref"!==c)if(c.startsWith("on")&&"function"==typeof i)r.addEventListener(c.slice(2).toLowerCase(),i);else if("class"!==c){if("style"===c&&i&&"object"==typeof i)Object.assign(r.style,i);else if(null!=i)if(c.includes("-"))r.setAttribute(c,String(i));else{if(c in r){if(!1===i)continue;try{r[c]=i;continue}catch{}}r.setAttribute(c,!0===i?"":String(i))}}else r.className=String(i??"");s(r,n.children);const o=n.ref;"function"==typeof o?o(r):o&&(o.current=r);return r}(e,t)}var c=o;function i(e){const t=document.createDocumentFragment();return s(t,e.children),t}function s(e,t){if(Array.isArray(t))for(const n of t)s(e,n);else t instanceof Node?e.appendChild(t):null!=t&&!1!==t&&!0!==t&&e.appendChild(document.createTextNode(String(t)))}export{i as Fragment,n as createContext,e as createRef,o as jsx,c as jsxs,r as useContext};

package/package.json

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