nuclo 0.1.36 → 0.1.38

package/README.md

@@ -203,17 +203,22 @@ render(app, document.body);
 ```ts
 import 'nuclo';
 
-type State = { status: 'idle' | 'loading' | 'error'; data: any[]; error?: string };
+type Product = { id: number; title: string; category: string };
+type State = { status: 'idle' | 'loading' | 'error'; products: Product[]; error?: string };
 
-let state: State = { status: 'idle', data: [] };
+let state: State = { status: 'idle', products: [] };
+let searchQuery = 'phone';
+
+async function fetchProducts() {
+  if (!searchQuery.trim()) return;
 
-async function fetchData() {
   state.status = 'loading';
   update();
 
   try {
-    const response = await fetch('/api/data');
-    state.data = await response.json();
+    const response = await fetch(`https://dummyjson.com/products/search?q=${searchQuery}`);
+    const data = await response.json();
+    state.products = data.products;
     state.status = 'idle';
   } catch (err) {
     state.status = 'error';
@@ -223,16 +228,36 @@ async function fetchData() {
 }
 
 const app = div(
-  button('Load Data', on('click', fetchData)),
+  div(
+    input(
+      {
+        type: 'search',
+        placeholder: 'Search products...',
+        value: () => searchQuery
+      },
+      on('input', e => {
+        searchQuery = e.target.value;
+        update();
+      }),
+      on('keydown', e => e.key === 'Enter' && fetchProducts())
+    ),
+    button('Search', on('click', fetchProducts))
+  ),
 
   when(() => state.status === 'loading',
     div('Loading...')
   ).when(() => state.status === 'error',
     div({ className: 'error' }, () => `Error: ${state.error}`)
-  ).when(() => state.data.length > 0,
-    list(() => state.data, item => div(item.name))
+  ).when(() => state.products.length > 0,
+    list(() => state.products, product =>
+      div(
+        { className: 'product-card' },
+        h3(product.title),
+        p(() => `Category: ${product.category}`)
+      )
+    )
   ).else(
-    div('No data loaded')
+    div('Click search to load products')
   )
 );
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuclo",
   "private": false,
-  "version": "0.1.36",
+  "version": "0.1.38",
   "type": "module",
   "main": "./dist/nuclo.cjs",
   "module": "./dist/nuclo.js",