🔤 intro

docs/components/examples/introducing/3ps-before.js

@@ -0,0 +1,14 @@
+// pseudocode
+// Mixed concerns make code hard to maintain
+const button = document.querySelector('button');
+let count = 0;
+
+button.addEventListener('click', () => {
+  count++;
+  document.querySelector('p').textContent =
+    'Clicked ' + count + ' times';
+
+  if (count > 10) {
+    button.disabled = true;
+  }
+});

docs/components/examples/introducing/3ps.js

@@ -1,6 +1,14 @@
-// pseudo code!
-const onchage=
-	event=>
-		console.log("Reacting to the:", event); // A
-input.addEventListener("change", onchange); // B
-input.dispatchEvent(new Event("change")); // C
+// pseudocode
+// 1. Create state
+const count = S(0);
+
+// 2. React to state changes
+S.on(count, value => {
+  updateUI(value);
+  if (value > 10) disableButton();
+});
+
+// 3. Update state on events
+button.addEventListener('click', () => {
+  count.set(count.get() + 1);
+});

docs/components/examples/introducing/helloWorld.js

@@ -1,19 +1,30 @@
-import { el } from "deka-dom-el";
+import { el, on } from "deka-dom-el";
 import { S } from "deka-dom-el/signals";
-const threePS= ({ emoji= "🚀" })=> {
-	const clicks= S(0); // A
-	return el().append(
-		el("p", S(()=>
-			"Hello World "+emoji.repeat(clicks.get()) // B
-		)),
-		el("button", {
-			type: "button",
-			onclick: ()=> clicks.set(clicks.get()+1), // C
-			textContent: "Fire",
-		})
-	);
-};
-document.body.append(
-	el(threePS, { emoji: "🎉" }),
-);
 
+// A HelloWorld component using the 3PS pattern
+function HelloWorld({ emoji = "🚀" }) {
+  // PART 1: Create reactive state
+  const clicks = S(0);
+  
+  return el().append(
+    // PART 2: Bind state to UI elements
+    el("p", {
+      className: "greeting",
+      // This paragraph automatically updates when clicks changes
+      textContent: S(() => `Hello World ${emoji.repeat(clicks.get())}`)
+    }),
+    
+    // PART 3: Update state in response to events
+    el("button", {
+      type: "button",
+      textContent: "Add emoji",
+      // When clicked, update the state
+      onclick: () => clicks.set(clicks.get() + 1)
+    })
+  );
+}
+
+// Use the component in your app
+document.body.append(
+  el(HelloWorld, { emoji: "🎉" })
+);