@fun-land/fun-web 0.3.0 → 0.3.1

package/examples/counter/bundle.js

@@ -1,6 +1,6 @@
 "use strict";
 (() => {
-  // ../fun-state/node_modules/@fun-land/accessor/dist/esm/util.js
+  // ../accessor/dist/esm/util.js
   var flow = (f, g) => (x) => g(f(x));
   var K = (a) => (_b) => a;
   var flatmap = (f) => (xs) => {
@@ -11,7 +11,7 @@
     return out;
   };
 
-  // ../fun-state/node_modules/@fun-land/accessor/dist/esm/accessor.js
+  // ../accessor/dist/esm/accessor.js
   var prop = () => (k) => ({
     query: (obj) => [obj[k]],
     mod: (transform) => (obj) => Object.assign(Object.assign({}, obj), { [k]: transform(obj[k]) })
@@ -24,67 +24,67 @@
     return accs.reduce(_comp);
   }
   var set = (acc) => flow(K, acc.mod);
+  var get = (acc) => (s) => {
+    var _a;
+    return (_a = acc.query(s)) === null || _a === void 0 ? void 0 : _a[0];
+  };
+  var unit = () => ({
+    query: (x) => [x],
+    mod: (transform) => (x) => transform(x)
+  });
 
   // ../fun-state/dist/esm/src/FunState.js
-  var pureState = ({ getState, modState, subscribe }) => {
-    const setState = (v) => {
-      modState(() => v);
+  var pureState = ({ getState, modState, subscribe }) => mkFunState({ getState, modState, subscribe }, unit());
+  function mkFunState(engine, viewAcc) {
+    const select = get(viewAcc);
+    const _get = () => {
+      const v = select(engine.getState());
+      return v;
     };
-    const focus = (acc) => subState({ getState, modState, subscribe }, acc);
-    const subscribeToState = (signal, callback) => {
-      const unsubscribe = subscribe(callback);
-      signal.addEventListener("abort", unsubscribe, { once: true });
+    const _query = (acc) => comp(viewAcc, acc).query(engine.getState());
+    const _mod = (f) => engine.modState(viewAcc.mod(f));
+    const _set = (val) => engine.modState(set(viewAcc)(val));
+    const _focus = (acc) => {
+      return mkFunState(engine, comp(viewAcc, acc));
     };
-    const fs = {
-      get: getState,
-      query: (acc) => acc.query(getState()),
-      mod: modState,
-      set: setState,
-      focus,
-      prop: flow(prop(), focus),
-      subscribe: subscribeToState
+    const _prop = (key) => {
+      return _focus(prop()(key));
     };
-    return fs;
-  };
-  var subState = ({ getState, modState, subscribe }, accessor) => {
-    const props = prop();
-    const _get = () => accessor.query(getState())[0];
-    const _mod = flow(accessor.mod, modState);
-    function createFocusedSubscribe() {
-      return (listener) => {
-        let lastValue = _get();
-        return subscribe((parentState) => {
-          const newValue = accessor.query(parentState)[0];
-          if (newValue !== lastValue) {
-            lastValue = newValue;
-            listener(newValue);
-          }
-        });
-      };
-    }
-    const focus = (acc) => subState({ getState: _get, modState: _mod, subscribe: createFocusedSubscribe() }, acc);
-    const _prop = flow(props, focus);
-    const subscribeToState = (signal, callback) => {
-      let lastValue = _get();
-      const unsubscribe = subscribe((parentState) => {
-        const newValue = accessor.query(parentState)[0];
-        if (newValue !== lastValue) {
-          lastValue = newValue;
-          callback(newValue);
+    const _watch = (signal, callback) => {
+      let last = select(engine.getState());
+      callback(last);
+      const unsubscribe = engine.subscribe((rootState) => {
+        const next = select(rootState);
+        if (!Object.is(next, last)) {
+          last = next;
+          callback(next);
+        }
+      });
+      signal.addEventListener("abort", unsubscribe, { once: true });
+    };
+    const _watchAll = (signal, callback) => {
+      let last = viewAcc.query(engine.getState());
+      callback(last);
+      const unsubscribe = engine.subscribe((rootState) => {
+        const next = viewAcc.query(rootState);
+        if (last.length !== next.length || next.some((v, i) => !Object.is(v, last[i]))) {
+          last = next;
+          callback(next);
         }
       });
       signal.addEventListener("abort", unsubscribe, { once: true });
     };
     return {
       get: _get,
-      query: (acc) => comp(accessor, acc).query(getState()),
+      query: _query,
       mod: _mod,
-      set: flow(set(accessor), modState),
-      focus,
+      set: _set,
+      focus: _focus,
       prop: _prop,
-      subscribe: subscribeToState
+      watch: _watch,
+      watchAll: _watchAll
     };
-  };
+  }
   var standaloneEngine = (initialState) => {
     let state = initialState;
     const listeners = /* @__PURE__ */ new Set();
@@ -101,19 +101,12 @@
   };
   var funState = (initialState) => pureState(standaloneEngine(initialState));
 
-  // ../accessor/dist/esm/accessor.js
-  var prop2 = () => (k) => ({
-    query: (obj) => [obj[k]],
-    mod: (transform) => (obj) => Object.assign(Object.assign({}, obj), { [k]: transform(obj[k]) })
-  });
-
   // src/dom.ts
   var h = (tag, attrs2, children) => {
     const element = document.createElement(tag);
     if (attrs2) {
       for (const [key, value] of Object.entries(attrs2)) {
-        if (value == null)
-          continue;
+        if (value == null) continue;
         if (key.startsWith("on") && typeof value === "function") {
           const eventName = key.slice(2).toLowerCase();
           element.addEventListener(eventName, value);
@@ -165,7 +158,7 @@
     const incrementBtn = h("button", { textContent: "+" });
     const decrementBtn = h("button", { textContent: "-" });
     const resetBtn = h("button", { textContent: "Reset" });
-    state.prop("count").subscribe(signal, (count) => {
+    state.prop("count").watch(signal, (count) => {
       display.textContent = String(count);
     });
     incrementBtn.addEventListener(
@@ -195,7 +188,7 @@
       counterValue: { count: 0 }
     });
     const heading = h("h1", { textContent: state.get().title });
-    state.prop("title").subscribe(signal, (title) => {
+    state.prop("title").watch(signal, (title) => {
       heading.textContent = title;
     });
     const counter = Counter(
@@ -204,15 +197,14 @@
       {
         label: "Click Counter",
         onReset: () => state.prop("counterValue").set({ count: 0 }),
-        state: state.focus(prop2()("counterValue"))
+        state: state.focus(prop()("counterValue"))
       }
     );
     return h("div", { className: "app" }, [heading, counter]);
   };
   var runExample = () => {
     const container = document.getElementById("app");
-    if (!container)
-      throw new Error("No #app element found");
+    if (!container) throw new Error("No #app element found");
     const mounted = mount(App, {}, container);
     return () => mounted.unmount();
   };

package/examples/todo-app/AddTodoForm.ts

@@ -0,0 +1,46 @@
+import { flow } from "@fun-land/accessor";
+import { FunState } from "@fun-land/fun-state";
+import { Component, enhance, h, bindPropertyTo, onTo } from "../../src";
+import { TodoAppState, clearValue, addItem } from "./TodoAppState";
+
+export const AddTodoForm: Component<{ state: FunState<TodoAppState> }> = (
+  signal,
+  { state }
+) => {
+  const input = enhance(
+    h("input", {
+      type: "text",
+      placeholder: "Add a todo...",
+      className: "todo-input",
+    }),
+    bindPropertyTo("value", state.prop("value"), signal),
+    onTo(
+      "input",
+      (e) => {
+        state.prop("value").set(e.currentTarget.value);
+      },
+      signal
+    )
+  );
+
+  return enhance(
+    h("form", { className: "todo-form" }, [
+      input,
+      h("button", {
+        type: "submit",
+        textContent: "Add",
+        className: "add-btn",
+      }),
+    ]),
+    onTo(
+      "submit",
+      (e) => {
+        e.preventDefault();
+        if (state.get().value.trim()) {
+          state.mod(flow(addItem, clearValue));
+        }
+      },
+      signal
+    )
+  );
+};

package/examples/todo-app/DraggableTodoList.ts

@@ -0,0 +1,173 @@
+import { h, keyedChildren, type Component } from "../../src/index";
+import type { FunState } from "../../src/state";
+import { Todo } from "./Todo";
+import { type TodoState } from "./TodoState";
+
+const ANIMATION_DURATION = 300;
+
+interface DraggableTodoListProps {
+  items: FunState<TodoState[]>;
+}
+
+const getElementByKey = (key: string) =>
+  document.querySelector(`[data-key="${key}"]`);
+
+// Complex component to show off how you can use all the normal DOM and CSS techniques without having to figure out frameworks or do special stuff
+export const DraggableTodoList: Component<DraggableTodoListProps> = (
+  signal,
+  { items }
+) => {
+  let draggedKey: string | null = null;
+  let lastTargetKey: string | null = null;
+  let previousItemCount = items.get().length;
+
+  // Watch for new items being added and animate them sliding down
+  items.watch(signal, (currentItems) => {
+    const currentCount = currentItems.length;
+    if (currentCount > previousItemCount) {
+      // New item added - capture positions and animate
+      const positions = new Map<string, DOMRect>();
+      currentItems.forEach((item) => {
+        const el = getElementByKey(item.key);
+        if (el) positions.set(item.key, el.getBoundingClientRect());
+      });
+
+      requestAnimationFrame(() => {
+        positions.forEach((first, key) => {
+          const el = getElementByKey(key);
+          if (!el) return;
+          const last = el.getBoundingClientRect();
+          const deltaY = first.top - last.top;
+          if (deltaY) {
+            el.animate(
+              [
+                { transform: `translateY(${deltaY}px)` },
+                { transform: "translateY(0)" },
+              ],
+              {
+                duration: ANIMATION_DURATION,
+                easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+              }
+            );
+          }
+        });
+      });
+    }
+    previousItemCount = currentCount;
+  });
+
+  const handleDragStart = (key: string) => {
+    draggedKey = key;
+    lastTargetKey = null;
+  };
+
+  const handleDragOver = (targetKey: string) => {
+    if (!draggedKey || draggedKey === targetKey || lastTargetKey === targetKey)
+      return;
+
+    lastTargetKey = targetKey;
+
+    // Reorder items
+    const allItems = items.get();
+    const draggedIndex = allItems.findIndex((item) => item.key === draggedKey);
+    const targetIndex = allItems.findIndex((item) => item.key === targetKey);
+
+    if (draggedIndex !== -1 && targetIndex !== -1) {
+      const newItems = [...allItems];
+      const [draggedItem] = newItems.splice(draggedIndex, 1);
+      newItems.splice(targetIndex, 0, draggedItem);
+      items.set(newItems);
+    }
+  };
+
+  const handleDragEnd = () => {
+    if (lastTargetKey) {
+      // FLIP animation: capture positions before, then animate after state change
+      const positions = new Map<string, DOMRect>();
+      items.get().forEach((item) => {
+        const el = getElementByKey(item.key);
+        if (el) positions.set(item.key, el.getBoundingClientRect());
+      });
+
+      requestAnimationFrame(() => {
+        positions.forEach((first, key) => {
+          const el = getElementByKey(key);
+          if (!el) return;
+
+          const last = el.getBoundingClientRect();
+          const deltaX = first.left - last.left;
+          const deltaY = first.top - last.top;
+
+          if (deltaX || deltaY) {
+            el.animate(
+              [
+                { transform: `translate(${deltaX}px, ${deltaY}px)` },
+                { transform: "translate(0, 0)" },
+              ],
+              {
+                duration: ANIMATION_DURATION,
+                easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+              }
+            );
+          }
+        });
+      });
+    }
+
+    draggedKey = null;
+    lastTargetKey = null;
+  };
+
+  const todoList = h("ul", { className: "todo-list" });
+
+  keyedChildren(todoList, signal, items, (row) =>
+    Todo(row.signal, {
+      removeItem: () => {
+        const element = getElementByKey(row.state.get().key);
+        if (element) {
+          element.classList.add("todo-item-exit");
+          setTimeout(() => {
+            // Capture positions before removal
+            const positions = new Map<string, DOMRect>();
+            items.get().forEach((item) => {
+              const el = getElementByKey(item.key);
+              if (el) positions.set(item.key, el.getBoundingClientRect());
+            });
+
+            row.remove();
+
+            // Animate remaining items
+            requestAnimationFrame(() => {
+              positions.forEach((first, key) => {
+                const el = getElementByKey(key);
+                if (!el) return;
+                const last = el.getBoundingClientRect();
+                const deltaY = first.top - last.top;
+                if (deltaY) {
+                  el.animate(
+                    [
+                      { transform: `translateY(${deltaY}px)` },
+                      { transform: "translateY(0)" },
+                    ],
+                    {
+                      duration: ANIMATION_DURATION,
+                      easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+                    }
+                  );
+                }
+              });
+            });
+          }, ANIMATION_DURATION);
+        } else {
+          row.remove();
+        }
+      },
+      state: row.state,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      onDragOver: handleDragOver,
+    })
+  );
+
+  return todoList;
+};

package/examples/todo-app/README.md

@@ -0,0 +1,172 @@
+# Advanced Todo App - Showcasing Direct DOM Access
+
+This Todo app demonstrates the advantages of **direct DOM access** over virtual DOM frameworks like React. Without a render loop getting in the way, we can leverage native browser APIs that are typically challenging in React.
+
+## 🚀 Advanced Features
+
+### 1. **Mouse-based Drag & Drop Reordering**
+- Uses native mouse events (mousedown/mousemove/mouseup) for reliable drag behavior
+- Smooth reordering with real-time feedback
+- Custom drag ghost that follows cursor perfectly
+- Visual indicators during drag operations (opacity, scale, shadow)
+- No library dependencies needed!
+
+**Why this is hard in React:**
+- Virtual DOM diffing can interfere with drag state
+- Event handlers need careful management to avoid re-render issues
+- Maintaining drag ghost and visual feedback requires complex state management
+- HTML5 drag API is unreliable - mouse events give full control
+
+### 2. **FLIP Animations**
+- **F**irst: Capture element positions before state change
+- **L**ast: Capture positions after DOM update
+- **I**nvert: Apply transform to appear at old position
+- **P**lay: Animate to new position
+
+This creates butter-smooth position animations when items are reordered or added.
+
+**Why this is hard in React:**
+- Need to coordinate animations across render cycles
+- Virtual DOM reconciliation can destroy/recreate elements mid-animation
+- Requires refs, useLayoutEffect, and careful timing
+
+### 3. **Enter/Exit Animations**
+- New items slide in from the left
+- Deleted items fade out and slide away
+- CSS animations work seamlessly because elements persist
+
+**Why this is hard in React:**
+- Elements unmount immediately on removal
+- Need special libraries (react-transition-group, framer-motion)
+- Complex coordination between state and animation lifecycle
+
+### 4. **Web Animations API**
+- Using native `element.animate()` for smooth transitions
+- Hardware accelerated transforms
+- No CSS-in-JS overhead
+
+**Why this is natural here:**
+- We have stable element references (no re-renders destroying them)
+- Can directly call animate() whenever we want
+- Animations persist across state changes
+
+### 5. **Persistent Event Listeners**
+- Event handlers attached once, never recreated
+- Using `{ signal }` for automatic cleanup via AbortController
+- No closure issues or stale state problems
+
+**Why this is hard in React:**
+- Event handlers recreated on every render (unless useCallback)
+- Dependencies need careful management
+- Easy to create memory leaks with manual listeners
+
+## 🎨 Interaction Details
+
+### Visual Feedback
+- **Drag handle** (⋮⋮) changes color and scales on hover
+- **Dragging item** becomes semi-transparent and scales down
+- **Drop target** highlights with purple border and background
+- **All buttons** have hover effects with transforms
+- **Priority indicator**: High priority items show red left border
+
+### Animations
+- **Add item**: Slides in from left with fade
+- **Remove item**: Fades out and slides left, then other items smoothly move up
+- **Reorder**: Items smoothly animate to new positions (FLIP)
+- **All Done**: Celebration text bounces in
+
+### Touch & Accessibility
+- Drag handles are clear and visible
+- Color-coded priority system
+- High contrast for readability
+- Smooth focus states on form controls
+
+## 🛠 Technical Architecture
+
+### Component Pattern
+Components are **run-once functions** that:
+1. Create DOM elements
+2. Set up subscriptions with AbortSignal
+3. Return the element
+
+```typescript
+const Todo: Component<TodoProps> = (signal, props) => {
+  // Create elements once
+  const li = h("li", { className: "todo-item" });
+
+  // Set up subscriptions (cleaned up via signal)
+  props.state.watch(signal, (data) => {
+    // Direct DOM updates, no re-render
+    input.value = data.label;
+  });
+
+  return li; // Element persists until unmounted
+};
+```
+
+### State Management
+Using `keyedChildren()` for efficient list rendering:
+- Preserves DOM elements across reorders (crucial for animations!)
+- Each item gets its own AbortController for cleanup
+- Only affected elements update, others remain untouched
+
+### FLIP Implementation
+```typescript
+// Before state change: capture positions
+const captureFlipFirst = () => {
+  items.forEach(item => {
+    const el = document.querySelector(`[data-key="${item.key}"]`);
+    positions.set(item.key, el.getBoundingClientRect());
+  });
+};
+
+// After state change: animate from old to new position
+const applyFlipAnimation = () => {
+  requestAnimationFrame(() => {
+    positions.forEach((first, key) => {
+      const el = document.querySelector(`[data-key="${key}"]`);
+      const last = el.getBoundingClientRect();
+      const deltaX = first.left - last.left;
+      const deltaY = first.top - last.top;
+
+      // Animate using Web Animations API
+      el.animate([
+        { transform: `translate(${deltaX}px, ${deltaY}px)` },
+        { transform: "translate(0, 0)" }
+      ], { duration: 300, easing: "cubic-bezier(0.4, 0, 0.2, 1)" });
+    });
+  });
+};
+```
+
+## 💡 Key Differences from React
+
+| Feature | fun-web | React |
+|---------|---------|-------|
+| **Drag & Drop** | Mouse events with custom ghost, full control | Complex, needs libraries or fights with virtual DOM |
+| **FLIP Animations** | Natural - elements persist | Hard - elements recreate, need refs + useLayoutEffect |
+| **Enter/Exit** | CSS animations just work | Need react-transition-group or framer-motion |
+| **Event Handlers** | Attach once, AbortSignal cleanup | Recreate every render (unless useCallback) |
+| **Performance** | Update only changed properties | Full reconciliation pass on state change |
+| **Mental Model** | Direct DOM manipulation | Declarative state → UI |
+
+## 🎯 What This Demonstrates
+
+1. **No Virtual DOM overhead** - Direct DOM updates are fast
+2. **Stable references** - Elements persist, animations work naturally
+3. **Native APIs** - Use browser features without fighting framework
+4. **Simpler mental model** - See exactly what DOM operations happen
+5. **Better for interactions** - Complex animations and effects are straightforward
+
+## 🏃‍♂️ Try It Out
+
+Open `index.html` in a browser and:
+- **Drag items** by the handle (⋮⋮) to reorder
+- **Add items** and watch them slide in
+- **Delete items** and watch them fade out
+- **Check all** and see the celebration
+- Notice how **smooth** everything feels!
+
+---
+
+This is what's possible when you embrace direct DOM access instead of fighting a render loop. 🎉