@react5/dom-jsx 0.1.0 → 0.1.1

package/README.md

@@ -28,10 +28,31 @@ Intrinsic JSX tags become DOM elements. `class` sets `className`, `style` accept
 The public entry points are:
 
 ```ts
-import { jsx, jsxs, Fragment } from '@react5/dom-jsx/jsx-runtime'
+import { createRef, jsx, jsxs, Fragment } from '@react5/dom-jsx'
 import { jsx, jsxs, jsxDEV, Fragment } from '@react5/dom-jsx/jsx-dev-runtime'
 ```
 
+`@react5/dom-jsx/jsx-runtime` also re-exports the same names and is what the TypeScript/Vite JSX transform imports automatically; `@react5/dom-jsx` is the shorter path for importing helpers like `createRef` directly in your own code.
+
+### Refs
+
+Capture the created DOM node without a later `querySelector` call using `createRef` or a callback ref:
+
+```tsx
+import { createRef } from '@react5/dom-jsx'
+
+const inputRef = createRef<HTMLInputElement>()
+const form = (
+  <form>
+    <input class="action-form__input" ref={inputRef} />
+  </form>
+) as HTMLFormElement
+
+inputRef.current // HTMLInputElement
+```
+
+A callback ref (`ref={(el) => ...}`) is also supported and is invoked with the element once it's created.
+
 ## Development
 
 ```sh

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './jsx-runtime';

package/dist/index.js

@@ -0,0 +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};

package/dist/jsx-runtime.d.ts

@@ -15,10 +15,17 @@ export type EventProps<T extends HTMLElement> = {
     onKeyDown?: DOMEventHandler<T, KeyboardEvent>;
     onKeyUp?: DOMEventHandler<T, KeyboardEvent>;
 };
+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;
     style?: Partial<CSSStyleDeclaration>;
     children?: unknown;
+    ref?: Ref<T>;
+};
+export declare function createRef<T>(): {
+    current: T | null;
 };
 export declare namespace JSX {
     type Element = Node;

package/dist/jsx-runtime.js

@@ -1 +1 @@
-function e(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,c]of Object.entries(n))if("children"!==i)if(i.startsWith("on")&&"function"==typeof c)r.addEventListener(i.slice(2).toLowerCase(),c);else if("class"!==i){if("style"===i&&c&&"object"==typeof c)Object.assign(r.style,c);else if(null!=c)if(i.includes("-"))r.setAttribute(i,String(c));else if(!1!==c){if(i in r)try{r[i]=c;continue}catch{}r.setAttribute(i,!0===c?"":String(c))}}else r.className=String(c??"");return i(r,n.children),r}(e,t)}var t=e;function n(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{n as Fragment,e as jsx,t as jsxs};
+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};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react5/dom-jsx",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "JSX runtime for vanilla TS/JS projects.",
   "keywords": [
     "JSX"
@@ -21,7 +21,13 @@
     "README.md",
     "LICENSE"
   ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./jsx-runtime": {
       "types": "./dist/jsx-runtime.d.ts",
       "import": "./dist/jsx-runtime.js"