From 7e812e64989773e87eddb24edf4a3cd74af1c480 Mon Sep 17 00:00:00 2001
From: Christoph Knittel <ck@cca.io>
Date: Thu, 27 Nov 2025 20:34:33 +0100
Subject: [PATCH 1/3] Format

---
 demos/BookstoreApp.res | 64 +++++++++++++++++++++++++++---------------
 1 file changed, 41 insertions(+), 23 deletions(-)

diff --git a/demos/BookstoreApp.res b/demos/BookstoreApp.res
index 8bb937c..2a79589 100644
--- a/demos/BookstoreApp.res
+++ b/demos/BookstoreApp.res
@@ -338,7 +338,8 @@ let header = () => {
                 } else {
                   "hidden"
                 }
-              }>
+              }
+            >
               {Component.textSignal(() => Int.toString(Signal.get(cartItemCount)))}
             </span>,
           ],
@@ -374,7 +375,8 @@ let homePage = () => {
     </div>
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
       <div
-        class="bg-white dark:bg-stone-800 rounded-xl p-6 border-2 border-stone-200 dark:border-stone-700">
+        class="bg-white dark:bg-stone-800 rounded-xl p-6 border-2 border-stone-200 dark:border-stone-700"
+      >
         <div class="text-3xl mb-3"> {Component.text("📖")} </div>
         <h3 class="text-xl font-bold text-stone-900 dark:text-white mb-2">
           {Component.text("12 Unique Titles")}
@@ -384,7 +386,8 @@ let homePage = () => {
         </p>
       </div>
       <div
-        class="bg-white dark:bg-stone-800 rounded-xl p-6 border-2 border-stone-200 dark:border-stone-700">
+        class="bg-white dark:bg-stone-800 rounded-xl p-6 border-2 border-stone-200 dark:border-stone-700"
+      >
         <div class="text-3xl mb-3"> {Component.text("🎨")} </div>
         <h3 class="text-xl font-bold text-stone-900 dark:text-white mb-2">
           {Component.text("Fictional Authors")}
@@ -394,7 +397,8 @@ let homePage = () => {
         </p>
       </div>
       <div
-        class="bg-white dark:bg-stone-800 rounded-xl p-6 border-2 border-stone-200 dark:border-stone-700">
+        class="bg-white dark:bg-stone-800 rounded-xl p-6 border-2 border-stone-200 dark:border-stone-700"
+      >
         <div class="text-3xl mb-3"> {Component.text("Ƒ")} </div>
         <h3 class="text-xl font-bold text-stone-900 dark:text-white mb-2">
           {Component.text("Functor Currency")}
@@ -414,7 +418,8 @@ let aboutPage = () => {
       {Component.text("About Functional Bookstore")}
     </h1>
     <div
-      class="bg-white dark:bg-stone-800 rounded-xl p-8 border-2 border-stone-200 dark:border-stone-700 space-y-6">
+      class="bg-white dark:bg-stone-800 rounded-xl p-8 border-2 border-stone-200 dark:border-stone-700 space-y-6"
+    >
       <p class="text-lg text-stone-700 dark:text-stone-300">
         {Component.text(
           "Welcome to the Functional Bookstore, your one-stop shop for the most absurd and delightful functional programming literature in the known universe.",
@@ -471,7 +476,8 @@ let productCard = (props: productCardProps) => {
   })
 
   <div
-    class="bg-white dark:bg-stone-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow border-2 border-stone-200 dark:border-stone-700">
+    class="bg-white dark:bg-stone-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow border-2 border-stone-200 dark:border-stone-700"
+  >
     <div class="text-6xl text-center mb-4"> {Component.text(props.product.cover)} </div>
     <h3 class="text-xl font-bold text-stone-900 dark:text-white mb-2">
       {Component.text(props.product.title)}
@@ -493,7 +499,8 @@ let productCard = (props: productCardProps) => {
           } else {
             "px-4 py-2 bg-stone-900 hover:bg-stone-700 dark:bg-stone-700 dark:hover:bg-stone-600 text-white rounded-lg font-semibold transition-colors"
           }}
-        onClick={_ => addToCart(props.product.id)}>
+        onClick={_ => addToCart(props.product.id)}
+      >
         {Component.textSignal(() =>
           if Signal.get(inCart) {
             "✓ In Cart"
@@ -527,7 +534,8 @@ let cartItemRow = (props: cartItemRowProps) => {
   switch product {
   | Some(p) =>
     <div
-      class="bg-white dark:bg-stone-800 rounded-lg p-4 shadow border-2 border-stone-200 dark:border-stone-700">
+      class="bg-white dark:bg-stone-800 rounded-lg p-4 shadow border-2 border-stone-200 dark:border-stone-700"
+    >
       <div class="flex gap-4">
         <div class="text-4xl"> {Component.text(p.cover)} </div>
         <div class="flex-1">
@@ -543,16 +551,19 @@ let cartItemRow = (props: cartItemRowProps) => {
           <div class="flex items-center gap-2">
             <button
               class="px-3 py-1 bg-stone-200 dark:bg-stone-700 rounded hover:bg-stone-300 dark:hover:bg-stone-600 font-bold"
-              onClick={_ => updateQuantity(p.id, props.item.quantity - 1)}>
+              onClick={_ => updateQuantity(p.id, props.item.quantity - 1)}
+            >
               {Component.text("-")}
             </button>
             <span
-              class="px-4 py-1 bg-stone-100 dark:bg-stone-700 rounded font-semibold text-stone-900 dark:text-white">
+              class="px-4 py-1 bg-stone-100 dark:bg-stone-700 rounded font-semibold text-stone-900 dark:text-white"
+            >
               {Component.text(Int.toString(props.item.quantity))}
             </span>
             <button
               class="px-3 py-1 bg-stone-200 dark:bg-stone-700 rounded hover:bg-stone-300 dark:hover:bg-stone-600 font-bold"
-              onClick={_ => updateQuantity(p.id, props.item.quantity + 1)}>
+              onClick={_ => updateQuantity(p.id, props.item.quantity + 1)}
+            >
               {Component.text("+")}
             </button>
           </div>
@@ -561,7 +572,8 @@ let cartItemRow = (props: cartItemRowProps) => {
           </p>
           <button
             class="text-sm text-red-600 hover:text-red-700 font-semibold"
-            onClick={_ => removeFromCart(p.id)}>
+            onClick={_ => removeFromCart(p.id)}
+          >
             {Component.text("Remove")}
           </button>
         </div>
@@ -585,7 +597,8 @@ let cartView = () => {
           "block"
         } else {
           "hidden"
-        }}>
+        }}
+    >
       <div class="text-center py-12">
         <p class="text-xl text-stone-600 dark:text-stone-400 mb-4">
           {Component.text("Your cart is empty")}
@@ -609,12 +622,12 @@ let cartView = () => {
           "hidden"
         } else {
           "block"
-        }}>
-      <div class="space-y-4 mb-6">
-        {Component.list(cart, item => cartItemRow({item: item}))}
-      </div>
+        }}
+    >
+      <div class="space-y-4 mb-6"> {Component.list(cart, item => cartItemRow({item: item}))} </div>
       <div
-        class="bg-stone-100 dark:bg-stone-800 rounded-lg p-6 border-2 border-stone-300 dark:border-stone-700">
+        class="bg-stone-100 dark:bg-stone-800 rounded-lg p-6 border-2 border-stone-300 dark:border-stone-700"
+      >
         <div class="flex justify-between items-center mb-4">
           <span class="text-2xl font-bold text-stone-900 dark:text-white">
             {Component.text("Total:")}
@@ -664,7 +677,8 @@ let checkoutView = () => {
       {Component.text("Checkout")}
     </h2>
     <div
-      class="bg-white dark:bg-stone-800 rounded-xl p-6 shadow-lg border-2 border-stone-200 dark:border-stone-700 mb-6">
+      class="bg-white dark:bg-stone-800 rounded-xl p-6 shadow-lg border-2 border-stone-200 dark:border-stone-700 mb-6"
+    >
       <h3 class="text-xl font-bold text-stone-900 dark:text-white mb-4">
         {Component.text("Shipping Information")}
       </h3>
@@ -716,7 +730,8 @@ let checkoutView = () => {
       </div>
     </div>
     <div
-      class="bg-white dark:bg-stone-800 rounded-xl p-6 shadow-lg border-2 border-stone-200 dark:border-stone-700 mb-6">
+      class="bg-white dark:bg-stone-800 rounded-xl p-6 shadow-lg border-2 border-stone-200 dark:border-stone-700 mb-6"
+    >
       <h3 class="text-xl font-bold text-stone-900 dark:text-white mb-4">
         {Component.text("Payment Information")}
       </h3>
@@ -733,7 +748,8 @@ let checkoutView = () => {
       </div>
     </div>
     <div
-      class="bg-stone-100 dark:bg-stone-800 rounded-lg p-6 border-2 border-stone-300 dark:border-stone-700 mb-6">
+      class="bg-stone-100 dark:bg-stone-800 rounded-lg p-6 border-2 border-stone-300 dark:border-stone-700 mb-6"
+    >
       <div class="flex justify-between items-center mb-2">
         <span class="text-stone-600 dark:text-stone-400">
           {Component.textSignal(() => "Items (" ++ Int.toString(Signal.get(cartItemCount)) ++ ")")}
@@ -773,7 +789,8 @@ let checkoutView = () => {
       )}
       <button
         class="flex-1 px-6 py-3 bg-stone-900 hover:bg-stone-700 dark:bg-stone-700 dark:hover:bg-stone-600 text-white rounded-lg font-semibold transition-colors"
-        onClick={_ => completeOrder()}>
+        onClick={_ => completeOrder()}
+      >
         {Component.text("Complete Order")}
       </button>
     </div>
@@ -784,7 +801,8 @@ let checkoutView = () => {
 let orderConfirmedView = () => {
   <div class="max-w-2xl mx-auto p-6">
     <div
-      class="bg-white dark:bg-stone-800 rounded-xl p-8 shadow-lg border-2 border-stone-300 dark:border-stone-700 text-center">
+      class="bg-white dark:bg-stone-800 rounded-xl p-8 shadow-lg border-2 border-stone-300 dark:border-stone-700 text-center"
+    >
       <div class="text-6xl mb-4"> {Component.text("✅")} </div>
       <h2 class="text-3xl font-bold text-stone-900 dark:text-white mb-4">
         {Component.text("Order Confirmed!")}

From fc794970e5b35139f03609cfc808df6a24c35cd5 Mon Sep 17 00:00:00 2001
From: Christoph Knittel <ck@cca.io>
Date: Thu, 27 Nov 2025 20:16:49 +0100
Subject: [PATCH 2/3] Use @jsx.component

# Conflicts:
#	demos/BookstoreApp.res
---
 demos/BookstoreApp.res | 89 +++++++++++++++++++++---------------------
 1 file changed, 45 insertions(+), 44 deletions(-)

diff --git a/demos/BookstoreApp.res b/demos/BookstoreApp.res
index 2a79589..85d466f 100644
--- a/demos/BookstoreApp.res
+++ b/demos/BookstoreApp.res
@@ -466,51 +466,52 @@ let aboutPage = () => {
   </div>
 }
 
-/* ProductCard Component using JSX */
-type productCardProps = {product: product}
+module ProductCard = {
+  /* ProductCard Component using JSX */
+  @jsx.component
+  let make = (~product: product) => {
+    let inCart = Computed.make(() => {
+      let item = getCartItem(product.id)
+      Option.isSome(item)
+    })
 
-let productCard = (props: productCardProps) => {
-  let inCart = Computed.make(() => {
-    let item = getCartItem(props.product.id)
-    Option.isSome(item)
-  })
-
-  <div
-    class="bg-white dark:bg-stone-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow border-2 border-stone-200 dark:border-stone-700"
-  >
-    <div class="text-6xl text-center mb-4"> {Component.text(props.product.cover)} </div>
-    <h3 class="text-xl font-bold text-stone-900 dark:text-white mb-2">
-      {Component.text(props.product.title)}
-    </h3>
-    <p class="text-sm text-stone-600 dark:text-stone-400 mb-2">
-      {Component.text("by " ++ props.product.author)}
-    </p>
-    <p class="text-stone-600 dark:text-stone-400 text-sm mb-4 line-clamp-3">
-      {Component.text(props.product.description)}
-    </p>
-    <div class="flex justify-between items-center">
-      <span class="text-2xl font-bold text-stone-700 dark:text-stone-300">
-        {Component.text(formatPrice(props.product.price))}
-      </span>
-      <button
-        class={() =>
-          if Signal.get(inCart) {
-            "px-4 py-2 bg-green-600 text-white rounded-lg font-semibold"
-          } else {
-            "px-4 py-2 bg-stone-900 hover:bg-stone-700 dark:bg-stone-700 dark:hover:bg-stone-600 text-white rounded-lg font-semibold transition-colors"
-          }}
-        onClick={_ => addToCart(props.product.id)}
-      >
-        {Component.textSignal(() =>
-          if Signal.get(inCart) {
-            "✓ In Cart"
-          } else {
-            "Add to Cart"
-          }
-        )}
-      </button>
+    <div
+      class="bg-white dark:bg-stone-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow border-2 border-stone-200 dark:border-stone-700"
+    >
+      <div class="text-6xl text-center mb-4"> {Component.text(product.cover)} </div>
+      <h3 class="text-xl font-bold text-stone-900 dark:text-white mb-2">
+        {Component.text(product.title)}
+      </h3>
+      <p class="text-sm text-stone-600 dark:text-stone-400 mb-2">
+        {Component.text("by " ++ product.author)}
+      </p>
+      <p class="text-stone-600 dark:text-stone-400 text-sm mb-4 line-clamp-3">
+        {Component.text(product.description)}
+      </p>
+      <div class="flex justify-between items-center">
+        <span class="text-2xl font-bold text-stone-700 dark:text-stone-300">
+          {Component.text(formatPrice(product.price))}
+        </span>
+        <button
+          class={() =>
+            if Signal.get(inCart) {
+              "px-4 py-2 bg-green-600 text-white rounded-lg font-semibold"
+            } else {
+              "px-4 py-2 bg-stone-900 hover:bg-stone-700 dark:bg-stone-700 dark:hover:bg-stone-600 text-white rounded-lg font-semibold transition-colors"
+            }}
+          onClick={_ => addToCart(product.id)}
+        >
+          {Component.textSignal(() =>
+            if Signal.get(inCart) {
+              "✓ In Cart"
+            } else {
+              "Add to Cart"
+            }
+          )}
+        </button>
+      </div>
     </div>
-  </div>
+  }
 }
 
 /* CatalogView Component using JSX */
@@ -520,7 +521,7 @@ let catalogView = () => {
       {Component.text("Available Books")}
     </h2>
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-      {Component.fragment(products->Array.map(product => productCard({product: product})))}
+      {Component.fragment(products->Array.map(product => <ProductCard product />))}
     </div>
   </div>
 }

From 260ac7171d2c51e898e37fe8fdec239fff2dc270 Mon Sep 17 00:00:00 2001
From: Christoph Knittel <ck@cca.io>
Date: Thu, 27 Nov 2025 20:26:43 +0100
Subject: [PATCH 3/3] Use JSX.array

---
 demos/BookstoreApp.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demos/BookstoreApp.res b/demos/BookstoreApp.res
index 85d466f..6ca0a8c 100644
--- a/demos/BookstoreApp.res
+++ b/demos/BookstoreApp.res
@@ -521,7 +521,7 @@ let catalogView = () => {
       {Component.text("Available Books")}
     </h2>
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-      {Component.fragment(products->Array.map(product => <ProductCard product />))}
+      {products->Array.map(product => <ProductCard product />)->JSX.array}
     </div>
   </div>
 }