nuclo 0.2.24 → 0.2.25

package/README.md

@@ -17,10 +17,10 @@ let count = 0;
 
 const counter = div(
   h1(() => `Count: ${count}`),
-  button('Increment', on('click', () => {
+  button('Increment', { onClick: () => {
     count++;
     update();
-  }))
+  } })
 );
 
 render(counter, document.body);
@@ -92,7 +92,7 @@ import 'nuclo';
 let count = 0;
 const app = div(
   h1(() => `Count: ${count}`),
-  button('Click', on('click', () => { count++; update(); }))
+  button('Click', { onClick: () => { count++; update(); } })
 );
 render(app, document.body);
 ```
@@ -128,8 +128,8 @@ let count = 0;
 
 const app = div(
   h1(() => `Count: ${count}`),
-  button('Increment', on('click', () => { count++; update(); })),
-  button('Reset', on('click', () => { count = 0; update(); }))
+  button('Increment', { onClick: () => { count++; update(); } }),
+  button('Reset', { onClick: () => { count = 0; update(); } })
 );
 
 render(app, document.body);
@@ -162,7 +162,7 @@ const app = div(
       on('input', e => { inputValue = e.target.value; update(); }),
       on('keydown', e => e.key === 'Enter' && addTodo())
     ),
-    button('Add', on('click', addTodo))
+    button('Add', { onClick: addTodo })
   ),
 
   // List
@@ -174,10 +174,10 @@ const app = div(
           on('change', () => { todo.done = !todo.done; update(); })
         ),
         span(() => todo.text),
-        button('×', on('click', () => {
+        button('×', { onClick: () => {
           todos = todos.filter(t => t.id !== todo.id);
           update();
-        }))
+        } })
       )
     )
   ).else(
@@ -283,7 +283,7 @@ const app = div(
       }),
       on('keydown', e => e.key === 'Enter' && fetchProducts())
     ),
-    button('Search', on('click', fetchProducts))
+    button('Search', { onClick: fetchProducts })
   ),
 
   when(() => state.status === 'loading',
@@ -445,26 +445,26 @@ when(() => count > 10,
 
 First matching condition wins. DOM is preserved if the active branch doesn't change.
 
-#### `on(event, handler, options?)`
+#### Events
 
-Attach event listeners:
+Attach strongly typed handlers directly as camel-cased `on*` attribute props such as `onClick`, `onInput`, and `onChange`. The event and `currentTarget` types are inferred from the attribute and element:
 
 ```ts
-button('Click me',
-  on('click', () => console.log('clicked')),
-  on('mouseenter', handleHover, { passive: true })
-)
+button('Remove', { className: 'remove', onClick: () => doDelete(row.id) })
 ```
 
-Standard names are inferred from the common HTML, media, video, and body event maps. Custom events can provide their event type explicitly with `on<"app:ready", CustomEvent<Detail>>(...)`.
+This is the preferred way to wire up events — it reads naturally inside object literals (e.g. row templates in a `list()`).
 
-You can also attach strongly typed handlers directly as camel-cased `on*` attribute props such as `onClick`, `onInput`, and `onChange`. The event and `currentTarget` types are inferred from the attribute and element:
+Use the `on(event, handler, options?)` helper instead when you need multiple listeners for the same event type on one element, or want to pass listener `options` such as `{ passive: true }`:
 
 ```ts
-button('Remove', { className: 'remove', onClick: () => doDelete(row.id) })
+button('Click me',
+  on('click', trackClick),
+  on('click', logClick, { passive: true })
+)
 ```
 
-This reads naturally inside object literals (e.g. row templates in a `list()`), while `on()` composes better when chaining multiple listeners or passing `options` like `{ passive: true }`.
+Standard names are inferred from the common HTML, media, video, and body event maps. Custom events can provide their event type explicitly with `on<"app:ready", CustomEvent<Detail>>(...)`.
 
 #### `scope(...ids)`
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "nuclo",
 	"private": false,
-	"version": "0.2.24",
+	"version": "0.2.25",
 	"description": "Lightweight, type-safe DOM library with plain mutable state and explicit updates — global tag builders, SSR, hydration, and typed CSS, no virtual DOM, no compiler.",
 	"license": "MIT",
 	"author": "Danilo Celestino de Castro (https://github.com/dan2dev)",
@@ -68,7 +68,7 @@
 		"@eslint/markdown": "^8.0.3",
 		"@types/node": "^25.9.5",
 		"@vitest/coverage-v8": "4.1.7",
-		"eslint": "^10.8.0",
+		"eslint": "^10.8.1",
 		"globals": "^17.9.0",
 		"jiti": "^2.7.0",
 		"jsdom": "^29.1.1",