@react5/dom-jsx 0.1.7 → 0.1.9

package/README.md

@@ -56,6 +56,10 @@ type instead, call the component directly or call `jsx(Modal, null)` /
 
 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.
 
+Compound event props require camel casing, such as `onMouseEnter`, `onMouseLeave`,
+`onFocusIn`, `onFocusOut`, `onKeyDown`, and `onAnimationEnd`.
+Handlers receive the DOM event with `currentTarget` typed as the element.
+
 The public entry points are:
 
 ```ts

package/dist/jsx-runtime.d.ts

@@ -6,18 +6,23 @@ 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;
+type CompoundEventName = 'AnimationCancel' | 'AnimationEnd' | 'AnimationIteration' | 'AnimationStart' | 'AuxClick' | 'BeforeInput' | 'BeforeMatch' | 'BeforeToggle' | 'CanPlay' | 'CanPlayThrough' | 'CompositionEnd' | 'CompositionStart' | 'CompositionUpdate' | 'ContextLost' | 'ContextMenu' | 'ContextRestored' | 'CueChange' | 'DblClick' | 'DragEnd' | 'DragEnter' | 'DragLeave' | 'DragOver' | 'DragStart' | 'DurationChange' | 'FocusIn' | 'FocusOut' | 'FormData' | 'FullscreenChange' | 'FullscreenError' | 'GotPointerCapture' | 'LostPointerCapture' | 'KeyDown' | 'KeyPress' | 'KeyUp' | 'LoadedData' | 'LoadedMetadata' | 'LoadStart' | 'MouseDown' | 'MouseEnter' | 'MouseLeave' | 'MouseMove' | 'MouseOut' | 'MouseOver' | 'MouseUp' | 'PointerCancel' | 'PointerDown' | 'PointerEnter' | 'PointerLeave' | 'PointerMove' | 'PointerOut' | 'PointerOver' | 'PointerRawUpdate' | 'PointerUp' | 'RateChange' | 'ScrollEnd' | 'SecurityPolicyViolation' | 'SelectionChange' | 'SelectStart' | 'SlotChange' | 'TimeUpdate' | 'TouchCancel' | 'TouchEnd' | 'TouchMove' | 'TouchStart' | 'TransitionCancel' | 'TransitionEnd' | 'TransitionRun' | 'TransitionStart' | 'VolumeChange' | 'WaitingForKey' | 'WebkitAnimationEnd' | 'WebkitAnimationIteration' | 'WebkitAnimationStart' | 'WebkitTransitionEnd';
+type CompoundEventNames = {
+    [K in CompoundEventName as Lowercase<K>]: K;
+};
+type EventPropName<K extends string> = K extends keyof CompoundEventNames ? `on${CompoundEventNames[K]}` : `on${Capitalize<K>}`;
 type MappedEventProps<T extends HTMLElement> = {
-    [K in keyof HTMLElementEventMap as `on${Capitalize<K & string>}`]?: DOMEventHandler<T, HTMLElementEventMap[K]>;
+    [K in keyof HTMLElementEventMap as EventPropName<K & string>]?: DOMEventHandler<T, HTMLElementEventMap[K]>;
 };
-export type EventProps<T extends HTMLElement> = Omit<MappedEventProps<T>, 'onInput' | 'onDblclick'> & {
+export type EventProps<T extends HTMLElement> = Omit<MappedEventProps<T>, 'onInput'> & {
     onInput?: DOMEventHandler<T, InputEvent>;
-    onDblClick?: DOMEventHandler<T, MouseEvent>;
 };
 export type Ref<T> = {
     current: T | null;
 } | ((el: T) => void);
 export type ElementProps<T extends HTMLElement> = Partial<Omit<T, 'children' | 'style' | 'className'>> & EventProps<T> & {
     class?: string;
+    className?: string;
     style?: Partial<CSSStyleDeclaration>;
     children?: unknown;
     ref?: Ref<T>;

package/dist/jsx-runtime.js

@@ -1 +1 @@
-function e(){return{current:null}}var t=/* @__PURE__ */new WeakMap;function n(e){const n=[],o={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 m(n,e),n}finally{n.pop()}}};return t.set(o,{defaultValue:e,stack:n}),o}function o(e){const n=t.get(e);if(!n)throw new TypeError("useContext expects a context created by createContext");const{defaultValue:o,stack:r}=n;return r.length>0?r[r.length-1]:o}var r=/* @__PURE__ */new WeakMap,c=[];function s(e,t){const n=r.get(e);n?n.push(t):r.set(e,[t])}function i(e,t){s(e,()=>t())}function f(e){const t=c[c.length-1];if(!t)throw new Error("onCleanup must be called while a component is rendering; use onDispose(node, fn) instead");t.cleanups.push(e)}function u(e){const t=[];if(l(e,t),1===t.length)throw t[0];if(t.length>1)throw new AggregateError(t,"Multiple cleanups failed during dispose")}function l(e,t){for(const r of Array.from(e.childNodes))l(r,t);const n=r.get(e);if(n){r.delete(e);for(let e=n.length-1;e>=0;e--)try{n[e](t)}catch(o){t.push(o)}}}function a(e,t){for(let o=e.length-1;o>=0;o--)try{e[o]()}catch(n){t.push(n)}}function d(e,t){if(e instanceof Node)t.push(e);else if(Array.isArray(e))for(const n of e)d(n,t)}function p(e,t){const n={cleanups:[],rendered:[]};let o;c.push(n);try{o=e(t)}catch(f){throw c.pop(),function(e,t){const n=[],o=[...e.rendered];for(const r of Object.values(t))d(r,o);for(const r of o)r.isConnected||l(r,n);a(e.cleanups,n)}(n,t),f}c.pop();let r=[o];if(o instanceof DocumentFragment&&(!o.firstChild&&n.cleanups.length>0&&o.appendChild(document.createComment("")),r=Array.from(o.childNodes)),n.cleanups.length>0)if(1===r.length)for(const c of n.cleanups)i(r[0],c);else{let e=r.length;for(const t of r)s(t,t=>{0===--e&&a(n.cleanups,t)})}return c[c.length-1]?.rendered.push(...r),o}function h(e,t,n){return function(e,t){const n=t??{};if("function"==typeof e)return p(e,n);const o=document.createElement(e);for(const[c,s]of Object.entries(n))if("children"!==c&&"ref"!==c)if(c.startsWith("on")&&"function"==typeof s)o.addEventListener(c.slice(2).toLowerCase(),s);else if("class"!==c){if("style"===c&&s&&"object"==typeof s)Object.assign(o.style,s);else if(null!=s)if(c.includes("-"))o.setAttribute(c,String(s));else{if(c in o){if(!1===s)continue;try{o[c]=s;continue}catch{}}o.setAttribute(c,!0===s?"":String(s))}}else o.className=String(s??"");m(o,n.children);const r=n.ref;"function"==typeof r?r(o):r&&(r.current=o);return o}(e,t)}var g=h;function y(e){const t=document.createDocumentFragment();return m(t,e.children),t}function m(e,t){if(Array.isArray(t))for(const n of t)m(e,n);else t instanceof Node?e.appendChild(t):null!=t&&!1!==t&&!0!==t&&e.appendChild(document.createTextNode(String(t)))}export{y as Fragment,n as createContext,e as createRef,u as dispose,h as jsx,g as jsxs,f as onCleanup,i as onDispose,o as useContext};
+function e(){return{current:null}}var t=/* @__PURE__ */new WeakMap;function n(e){const n=[],o={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 y(n,e),n}finally{n.pop()}}};return t.set(o,{defaultValue:e,stack:n}),o}function o(e){const n=t.get(e);if(!n)throw new TypeError("useContext expects a context created by createContext");const{defaultValue:o,stack:r}=n;return r.length>0?r[r.length-1]:o}var r=/* @__PURE__ */new WeakMap,c=[];function s(e,t){const n=r.get(e);n?n.push(t):r.set(e,[t])}function i(e,t){s(e,()=>t())}function f(e){const t=c[c.length-1];if(!t)throw new Error("onCleanup must be called while a component is rendering; use onDispose(node, fn) instead");t.cleanups.push(e)}function l(e){const t=[];if(u(e,t),1===t.length)throw t[0];if(t.length>1)throw new AggregateError(t,"Multiple cleanups failed during dispose")}function u(e,t){for(const r of Array.from(e.childNodes))u(r,t);const n=r.get(e);if(n){r.delete(e);for(let e=n.length-1;e>=0;e--)try{n[e](t)}catch(o){t.push(o)}}}function a(e,t){for(let o=e.length-1;o>=0;o--)try{e[o]()}catch(n){t.push(n)}}function d(e,t){if(e instanceof Node)t.push(e);else if(Array.isArray(e))for(const n of e)d(n,t)}function p(e,t){const n={cleanups:[],rendered:[]};let o;c.push(n);try{o=e(t)}catch(f){throw c.pop(),function(e,t){const n=[],o=[...e.rendered];for(const r of Object.values(t))d(r,o);for(const r of o)r.isConnected||u(r,n);a(e.cleanups,n)}(n,t),f}c.pop();let r=[o];if(o instanceof DocumentFragment&&(!o.firstChild&&n.cleanups.length>0&&o.appendChild(document.createComment("")),r=Array.from(o.childNodes)),n.cleanups.length>0)if(1===r.length)for(const c of n.cleanups)i(r[0],c);else{let e=r.length;for(const t of r)s(t,t=>{0===--e&&a(n.cleanups,t)})}return c[c.length-1]?.rendered.push(...r),o}function h(e,t,n){return function(e,t){const n=t??{};if("function"==typeof e)return p(e,n);const o=document.createElement(e);void 0===n.class&&void 0===n.className||(o.className=String(n.className??n.class??""));for(const[c,s]of Object.entries(n))if("children"!==c&&"ref"!==c)if(c.startsWith("on")&&"function"==typeof s)o.addEventListener(c.slice(2).toLowerCase(),s);else if("class"!==c&&"className"!==c)if("style"===c&&s&&"object"==typeof s)Object.assign(o.style,s);else if(null!=s)if(c.includes("-"))o.setAttribute(c,String(s));else{if(c in o){if(!1===s)continue;try{o[c]=s;continue}catch{}}o.setAttribute(c,!0===s?"":String(s))}y(o,n.children);const r=n.ref;"function"==typeof r?r(o):r&&(r.current=o);return o}(e,t)}var g=h;function m(e){const t=document.createDocumentFragment();return y(t,e.children),t}function y(e,t){if(Array.isArray(t))for(const n of t)y(e,n);else t instanceof Node?e.appendChild(t):null!=t&&!1!==t&&!0!==t&&e.appendChild(document.createTextNode(String(t)))}export{m as Fragment,n as createContext,e as createRef,l as dispose,h as jsx,g as jsxs,f as onCleanup,i as onDispose,o as useContext};

package/package.json

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