@fun-land/fun-web 0.3.2 → 0.5.0-alpha.0

package/examples/todo-app/TodoApp.js

@@ -28,18 +28,10 @@
   function comp(...accs) {
     return accs.reduce(_comp);
   }
-  var viewed = (toView, fromView) => ({
-    query: (s) => [toView(s)],
-    mod: (f) => (s) => fromView(f(toView(s)))
-  });
   var all = () => ({
     query: (xs) => xs,
     mod: (transform) => (xs) => xs.map(transform)
   });
-  var filter = (pred) => ({
-    query: (xs) => xs.filter(pred),
-    mod: (transform) => (s) => s.map((x) => pred(x) ? transform(x) : x)
-  });
   var set = (acc) => flow(K, acc.mod);
   var get = (acc) => (s) => {
     var _a;
@@ -187,7 +179,29 @@
   };
   var onTo = (type, handler, signal) => (el) => on(el, type, handler, signal);
   var enhance = (x, ...fns) => fns.reduce((acc, fn) => fn(acc), x);
-  function keyedChildren(parent, signal, list, renderRow) {
+  var keyOf = (keyAcc, item) => {
+    const k = keyAcc.query(item)[0];
+    if (k == null)
+      throw new Error("bindListChildren: key accessor returned no value");
+    return k;
+  };
+  var byKey = (keyAcc, key) => ({
+    query: (xs) => {
+      const hit = xs.find((t) => keyOf(keyAcc, t) === key);
+      return hit ? [hit] : [];
+    },
+    mod: (f) => (xs) => {
+      let found = false;
+      return xs.map((t) => {
+        if (keyOf(keyAcc, t) !== key) return t;
+        if (found) throw new Error(`bindListChildren: duplicate key "${key}"`);
+        found = true;
+        return f(t);
+      });
+    }
+  });
+  var bindListChildren = (options) => (parent) => {
+    const { signal, state: list, key: keyAcc, row: renderRow } = options;
     const rows = /* @__PURE__ */ new Map();
     const dispose = () => {
       for (const row of rows.values()) {
@@ -201,8 +215,9 @@
       const nextKeys = [];
       const seen = /* @__PURE__ */ new Set();
       for (const it of items) {
-        const k = it.key;
-        if (seen.has(k)) throw new Error(`keyedChildren: duplicate key "${k}"`);
+        const k = keyOf(keyAcc, it);
+        if (seen.has(k))
+          throw new Error(`bindListChildren: duplicate key "${k}"`);
         seen.add(k);
         nextKeys.push(k);
       }
@@ -216,13 +231,13 @@
       for (const k of nextKeys) {
         if (!rows.has(k)) {
           const ctrl = new AbortController();
-          const itemState = list.focus(filter((t) => t.key === k));
+          const itemState = list.focus(byKey(keyAcc, k));
           const el = renderRow({
             signal: ctrl.signal,
             state: itemState,
-            remove: () => list.mod((list2) => list2.filter((t) => t.key !== k))
+            remove: () => list.mod((xs) => xs.filter((t) => keyOf(keyAcc, t) !== k))
           });
-          rows.set(k, { key: k, el, ctrl });
+          rows.set(k, { el, ctrl });
         }
       }
       const children = parent.children;
@@ -230,17 +245,51 @@
         const k = nextKeys[i];
         const row = rows.get(k);
         const currentAtI = children[i];
-        if (currentAtI !== row.el) {
+        if (currentAtI !== row.el)
           parent.insertBefore(row.el, currentAtI ?? null);
-        }
       }
     };
     list.watch(signal, reconcile);
     signal.addEventListener("abort", dispose, { once: true });
     reconcile();
-    return { reconcile, dispose };
+    return parent;
+  };
+  function renderWhen(options) {
+    const {
+      state,
+      predicate = (x) => x,
+      component,
+      props,
+      signal
+    } = options;
+    const container = document.createElement("span");
+    container.style.display = "contents";
+    let childCtrl = null;
+    let childEl = null;
+    const reconcile = () => {
+      const shouldRender = predicate(state.get());
+      if (shouldRender && !childEl) {
+        childCtrl = new AbortController();
+        childEl = component(childCtrl.signal, props);
+        container.appendChild(childEl);
+      } else if (!shouldRender && childEl) {
+        childCtrl?.abort();
+        childEl.remove();
+        childEl = null;
+        childCtrl = null;
+      }
+    };
+    state.watch(signal, reconcile);
+    signal.addEventListener(
+      "abort",
+      () => {
+        childCtrl?.abort();
+      },
+      { once: true }
+    );
+    reconcile();
+    return container;
   }
-  var $ = (selector) => document.querySelector(selector) ?? void 0;
 
   // src/mount.ts
   var mount = (component, props, container) => {
@@ -260,8 +309,8 @@
   var init_TodoAppState = () => ({
     value: "",
     items: [
-      { checked: false, label: "Learn fun-web", priority: 0, key: "asdf" },
-      { checked: true, label: "Build something cool", priority: 1, key: "fdas" }
+      { checked: false, label: "Learn fun-web", key: "asdf" },
+      { checked: true, label: "Build something cool", key: "fdas" }
     ]
   });
   var stateAcc = Acc();
@@ -272,27 +321,13 @@
     prepend({
       checked: false,
       label: state.value,
-      priority: 1,
       key: crypto.randomUUID()
     })
   )(state);
 
-  // examples/todo-app/TodoState.ts
-  var stateAcc2 = Acc();
-  var priorityAsString = stateAcc2.prop("priority").focus(viewed(String, Number));
-
   // examples/todo-app/Todo.ts
   var Todo = (signal, { state, removeItem, onDragStart, onDragEnd, onDragOver }) => {
     const todoData = state.get();
-    const priorityState = state.focus(priorityAsString);
-    const prioritySelect = enhance(
-      h("select", {}, [
-        h("option", { value: "0" }, "High"),
-        h("option", { value: "1" }, "Low")
-      ]),
-      bindPropertyTo("value", priorityState, signal),
-      onTo("change", (e) => priorityState.set(e.currentTarget.value), signal)
-    );
     const checkedState = state.prop("checked");
     const checkbox = enhance(
       h("input", { type: "checkbox" }),
@@ -319,7 +354,6 @@
     const li = h("li", { className: "todo-item", "data-key": todoData.key }, [
       dragHandle,
       checkbox,
-      prioritySelect,
       labelInput,
       deleteBtn
     ]);
@@ -372,7 +406,7 @@
 
   // examples/todo-app/DraggableTodoList.ts
   var ANIMATION_DURATION = 300;
-  var getElementByKey = (key) => $(`[data-key="${key}"]`);
+  var getElementByKey = (key) => document.querySelector(`[data-key="${key}"]`);
   var DraggableTodoList = (signal, { items }) => {
     let draggedKey = null;
     let lastTargetKey = null;
@@ -382,12 +416,12 @@
       if (currentCount > previousItemCount) {
         const positions = /* @__PURE__ */ new Map();
         currentItems.forEach((item) => {
-          const el = $(`[data-key="${item.key}"]`);
+          const el = getElementByKey(item.key);
           if (el) positions.set(item.key, el.getBoundingClientRect());
         });
         requestAnimationFrame(() => {
           positions.forEach((first, key) => {
-            const el = $(`[data-key="${key}"]`);
+            const el = getElementByKey(key);
             if (!el) return;
             const last = el.getBoundingClientRect();
             const deltaY = first.top - last.top;
@@ -459,19 +493,19 @@
       lastTargetKey = null;
     };
     const todoList = h("ul", { className: "todo-list" });
-    keyedChildren(
-      todoList,
+    bindListChildren({
+      key: prop()("key"),
       signal,
-      items,
-      (row) => Todo(row.signal, {
+      state: items,
+      row: (row) => Todo(row.signal, {
         removeItem: () => {
-          const element = $(`[data-key="${row.state.get().key}"]`);
+          const element = getElementByKey(row.state.get().key);
           if (element) {
             element.classList.add("todo-item-exit");
             setTimeout(() => {
               const positions = /* @__PURE__ */ new Map();
               items.get().forEach((item) => {
-                const el = $(`[data-key="${item.key}"]`);
+                const el = getElementByKey(item.key);
                 if (el) positions.set(item.key, el.getBoundingClientRect());
               });
               row.remove();
@@ -505,7 +539,7 @@
         onDragEnd: handleDragEnd,
         onDragOver: handleDragOver
       })
-    );
+    })(todoList);
     return todoList;
   };
 
@@ -564,17 +598,26 @@
         signal
       )
     );
-    const allDoneText = h("span", {
-      textContent: "",
-      className: "all-done-text"
-    });
+    const AllDoneComponent = () => {
+      return h("span", {
+        textContent: "\u{1F389} All Done!",
+        className: "all-done-text"
+      });
+    };
+    const allDoneState = funState(false);
     state.focus(allCheckedAcc).watchAll(signal, (checks) => {
-      allDoneText.textContent = checks.length > 0 && checks.every(Boolean) ? "\u{1F389} All Done!" : "";
+      allDoneState.set(checks.length > 0 && checks.every(Boolean));
+    });
+    const allDoneEl = renderWhen({
+      state: allDoneState,
+      component: AllDoneComponent,
+      props: {},
+      signal
     });
     return h("div", { className: "todo-app" }, [
       h("h1", { textContent: "Todo Example" }),
       AddTodoForm(signal, { state }),
-      h("div", { className: "controls" }, [markAllBtn, allDoneText]),
+      h("div", { className: "controls" }, [markAllBtn, allDoneEl]),
       DraggableTodoList(signal, { items: state.prop("items") })
     ]);
   };

package/examples/todo-app/TodoApp.ts

@@ -2,17 +2,12 @@ import {
   h,
   funState,
   mount,
-  onTo,
+  on,
   type Component,
   enhance,
   renderWhen,
 } from "../../src/index";
-import {
-  type TodoAppState,
-  markAllDone,
-  allCheckedAcc,
-  init_TodoAppState,
-} from "./TodoAppState";
+import { markAllDone, allCheckedAcc, init_TodoAppState } from "./TodoAppState";
 import { DraggableTodoList } from "./DraggableTodoList";
 import { AddTodoForm } from "./AddTodoForm";
 
@@ -28,7 +23,7 @@ const TodoApp: Component = (signal) => {
       textContent: "Mark All Done",
       className: "mark-all-btn",
     }),
-    onTo(
+    on(
       "click",
       () => {
         state.mod(markAllDone);
@@ -51,7 +46,12 @@ const TodoApp: Component = (signal) => {
     allDoneState.set(checks.length > 0 && checks.every(Boolean));
   });
 
-  const allDoneEl = renderWhen(allDoneState, AllDoneComponent, {}, signal);
+  const allDoneEl = renderWhen({
+    state: allDoneState,
+    component: AllDoneComponent,
+    props: {},
+    signal,
+  });
 
   return h("div", { className: "todo-app" }, [
     h("h1", { textContent: "Todo Example" }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fun-land/fun-web",
-  "version": "0.3.2",
+  "version": "0.5.0-alpha.0",
   "description": "A web library for component-based development using fun-land",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -49,5 +49,5 @@
     "url": "https://github.com/fun-land/fun-land/issues"
   },
   "license": "MIT",
-  "gitHead": "0019c93649f251557a679a0a6da36d181f7120e4"
+  "gitHead": "68dd8a583be1733e0eec9070e8f4dfd6c8742fc0"
 }

package/src/dom.test.ts

@@ -779,12 +779,12 @@ describe("renderWhen", () => {
     const controller = new AbortController();
     const showState = funState(true);
 
-    const container = renderWhen(
-      showState,
-      TestComponent,
-      { text: "Hello" },
-      controller.signal
-    );
+    const container = renderWhen({
+      state: showState,
+      component: TestComponent,
+      props: { text: "Hello" },
+      signal: controller.signal
+    });
 
     expect(container.children.length).toBe(1);
     expect(container.children[0].textContent).toBe("Hello");
@@ -799,12 +799,12 @@ describe("renderWhen", () => {
     const controller = new AbortController();
     const showState = funState(false);
 
-    const container = renderWhen(
-      showState,
-      TestComponent,
-      { text: "Hello" },
-      controller.signal
-    );
+    const container = renderWhen({
+      state: showState,
+      component: TestComponent,
+      props: { text: "Hello" },
+      signal: controller.signal
+    });
 
     expect(container.children.length).toBe(0);
 
@@ -815,12 +815,12 @@ describe("renderWhen", () => {
     const controller = new AbortController();
     const showState = funState(false);
 
-    const container = renderWhen(
-      showState,
-      TestComponent,
-      { text: "Hello" },
-      controller.signal
-    );
+    const container = renderWhen({
+      state: showState,
+      component: TestComponent,
+      props: { text: "Hello" },
+      signal: controller.signal
+    });
 
     expect(container.children.length).toBe(0);
 
@@ -836,12 +836,12 @@ describe("renderWhen", () => {
     const controller = new AbortController();
     const showState = funState(true);
 
-    const container = renderWhen(
-      showState,
-      TestComponent,
-      { text: "Hello" },
-      controller.signal
-    );
+    const container = renderWhen({
+      state: showState,
+      component: TestComponent,
+      props: { text: "Hello" },
+      signal: controller.signal
+    });
 
     const child = container.children[0] as HTMLElement;
     expect(container.children.length).toBe(1);
@@ -867,12 +867,12 @@ describe("renderWhen", () => {
       return h("div", null, props.text);
     };
 
-    renderWhen(
-      showState,
-      ComponentWithAbortListener,
-      { text: "Hello" },
-      controller.signal
-    );
+    renderWhen({
+      state: showState,
+      component: ComponentWithAbortListener,
+      props: { text: "Hello" },
+      signal: controller.signal
+    });
 
     expect(abortCallback).not.toHaveBeenCalled();
 
@@ -896,12 +896,12 @@ describe("renderWhen", () => {
       return h("div", null, props.text);
     };
 
-    renderWhen(
-      showState,
-      ComponentWithAbortListener,
-      { text: "Hello" },
-      controller.signal
-    );
+    renderWhen({
+      state: showState,
+      component: ComponentWithAbortListener,
+      props: { text: "Hello" },
+      signal: controller.signal
+    });
 
     expect(abortCallback).not.toHaveBeenCalled();
 
@@ -914,12 +914,12 @@ describe("renderWhen", () => {
     const controller = new AbortController();
     const showState = funState(false);
 
-    const container = renderWhen(
-      showState,
-      TestComponent,
-      { text: "Hello" },
-      controller.signal
-    );
+    const container = renderWhen({
+      state: showState,
+      component: TestComponent,
+      props: { text: "Hello" },
+      signal: controller.signal
+    });
 
     expect(container.children.length).toBe(0);
 
@@ -942,12 +942,12 @@ describe("renderWhen", () => {
     const controller = new AbortController();
     const showState = funState(true);
 
-    const container = renderWhen(
-      showState,
-      TestComponent,
-      { text: "Hello" },
-      controller.signal
-    ) as HTMLElement;
+    const container = renderWhen({
+      state: showState,
+      component: TestComponent,
+      props: { text: "Hello" },
+      signal: controller.signal
+    }) as HTMLElement;
 
     expect(container.style.display).toBe("contents");
 
@@ -958,12 +958,12 @@ describe("renderWhen", () => {
     const controller = new AbortController();
     const showState = funState(true);
 
-    const container = renderWhen(
-      showState,
-      TestComponent,
-      { text: "Hello" },
-      controller.signal
-    );
+    const container = renderWhen({
+      state: showState,
+      component: TestComponent,
+      props: { text: "Hello" },
+      signal: controller.signal
+    });
 
     expect(container.children.length).toBe(1);
 
@@ -989,15 +989,47 @@ describe("renderWhen", () => {
       );
     };
 
-    const container = renderWhen(
-      showState,
-      PropsComponent,
-      { text: "Count", count: 42 },
-      controller.signal
-    );
+    const container = renderWhen({
+      state: showState,
+      component: PropsComponent,
+      props: { text: "Count", count: 42 },
+      signal: controller.signal
+    });
 
     expect(container.children[0].textContent).toBe("Count: 42");
 
     controller.abort();
   });
+
+  test("should work with predicate function", () => {
+    const controller = new AbortController();
+    enum Status { Loading, Success, Error }
+    const statusState = funState(Status.Loading);
+
+    const container = renderWhen({
+      state: statusState,
+      predicate: (status) => status === Status.Success,
+      component: TestComponent,
+      props: { text: "Success!" },
+      signal: controller.signal
+    });
+
+    // Should not render initially
+    expect(container.children.length).toBe(0);
+
+    // Should render when predicate matches
+    statusState.set(Status.Success);
+    expect(container.children.length).toBe(1);
+    expect(container.children[0].textContent).toBe("Success!");
+
+    // Should unmount when predicate doesn't match
+    statusState.set(Status.Error);
+    expect(container.children.length).toBe(0);
+
+    // Should mount again when predicate matches
+    statusState.set(Status.Success);
+    expect(container.children.length).toBe(1);
+
+    controller.abort();
+  });
 });