npm - @fun-land/fun-web - Versions diffs - 0.2.0 - Mend

@fun-land/fun-web 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (71) hide show

package/LICENSE.md +9 -0
package/README.md +515 -0
package/coverage/clover.xml +136 -0
package/coverage/coverage-final.json +4 -0
package/coverage/lcov-report/base.css +224 -0
package/coverage/lcov-report/block-navigation.js +87 -0
package/coverage/lcov-report/dom.ts.html +961 -0
package/coverage/lcov-report/favicon.png +0 -0
package/coverage/lcov-report/index.html +146 -0
package/coverage/lcov-report/mount.ts.html +202 -0
package/coverage/lcov-report/prettify.css +1 -0
package/coverage/lcov-report/prettify.js +2 -0
package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
package/coverage/lcov-report/sorter.js +196 -0
package/coverage/lcov-report/state.ts.html +91 -0
package/coverage/lcov.info +260 -0
package/dist/esm/src/dom.d.ts +85 -0
package/dist/esm/src/dom.js +207 -0
package/dist/esm/src/dom.js.map +1 -0
package/dist/esm/src/index.d.ts +7 -0
package/dist/esm/src/index.js +5 -0
package/dist/esm/src/index.js.map +1 -0
package/dist/esm/src/mount.d.ts +21 -0
package/dist/esm/src/mount.js +27 -0
package/dist/esm/src/mount.js.map +1 -0
package/dist/esm/src/state.d.ts +2 -0
package/dist/esm/src/state.js +3 -0
package/dist/esm/src/state.js.map +1 -0
package/dist/esm/src/types.d.ts +3 -0
package/dist/esm/src/types.js +3 -0
package/dist/esm/src/types.js.map +1 -0
package/dist/esm/tsconfig.publish.tsbuildinfo +1 -0
package/dist/src/dom.d.ts +85 -0
package/dist/src/dom.js +224 -0
package/dist/src/dom.js.map +1 -0
package/dist/src/index.d.ts +7 -0
package/dist/src/index.js +24 -0
package/dist/src/index.js.map +1 -0
package/dist/src/mount.d.ts +21 -0
package/dist/src/mount.js +31 -0
package/dist/src/mount.js.map +1 -0
package/dist/src/state.d.ts +2 -0
package/dist/src/state.js +7 -0
package/dist/src/state.js.map +1 -0
package/dist/src/types.d.ts +3 -0
package/dist/src/types.js +4 -0
package/dist/src/types.js.map +1 -0
package/dist/tsconfig.publish.tsbuildinfo +1 -0
package/eslint.config.js +54 -0
package/examples/README.md +67 -0
package/examples/counter/bundle.js +219 -0
package/examples/counter/counter.ts +112 -0
package/examples/counter/index.html +44 -0
package/examples/todo-app/Todo.ts +79 -0
package/examples/todo-app/index.html +142 -0
package/examples/todo-app/todo-app.ts +120 -0
package/examples/todo-app/todo-bundle.js +410 -0
package/jest.config.js +5 -0
package/package.json +49 -0
package/src/dom.test.ts +768 -0
package/src/dom.ts +296 -0
package/src/index.ts +25 -0
package/src/mount.test.ts +220 -0
package/src/mount.ts +39 -0
package/src/state.test.ts +225 -0
package/src/state.ts +2 -0
package/src/types.ts +9 -0
package/tsconfig.json +16 -0
package/tsconfig.publish.json +6 -0
package/wip/hx-magic-properties-plan.md +575 -0
package/wip/next.md +22 -0

package/examples/counter/counter.ts ADDED Viewed

@@ -0,0 +1,112 @@
+/**
+ * Example: Simple counter component demonstrating fun-web basics
+ */
+import {
+  h,
+  funState,
+  mount,
+  type Component,
+  type FunState,
+} from "../../src/index";
+import { prop } from "@fun-land/accessor";
+// Component state (dynamic data)
+interface CounterState {
+  count: number;
+}
+// Component props (static configuration + state)
+interface CounterProps {
+  label: string;
+  onReset: () => void;
+  state: FunState<CounterState>;
+}
+// Counter component - evaluates once, subscriptions handle updates
+const Counter: Component<CounterProps> = (
+  signal,
+  { state, onReset, label }
+) => {
+  // Create DOM elements
+  const display = h(
+    "div",
+    { className: "count-display" },
+    String(state.get().count)
+  );
+  const incrementBtn = h("button", { textContent: "+" });
+  const decrementBtn = h("button", { textContent: "-" });
+  const resetBtn = h("button", { textContent: "Reset" });
+  // Subscribe to state changes
+  state.prop("count").subscribe(signal, (count) => {
+    display.textContent = String(count);
+  });
+  // Event listeners with cleanup
+  incrementBtn.addEventListener(
+    "click",
+    () => {
+      state.mod((s) => ({ count: s.count + 1 }));
+    },
+    { signal }
+  );
+  decrementBtn.addEventListener(
+    "click",
+    () => {
+      state.mod((s) => ({ count: s.count - 1 }));
+    },
+    { signal }
+  );
+  resetBtn.addEventListener("click", onReset, { signal });
+  // Build and return DOM tree
+  return h("div", { className: "counter" }, [
+    h("h2", { textContent: label }),
+    display,
+    h("div", { className: "buttons" }, [incrementBtn, decrementBtn, resetBtn]),
+  ]);
+};
+// App component demonstrating composition
+interface AppState {
+  title: string;
+  counterValue: CounterState;
+}
+const App: Component = (signal) => {
+  const state = funState<AppState>({
+    title: "Fun-Web Counter Example",
+    counterValue: { count: 0 },
+  });
+  const heading = h("h1", { textContent: state.get().title });
+  // Subscribe to title changes
+  state.prop("title").subscribe(signal, (title) => {
+    heading.textContent = title;
+  });
+  // Create child component with focused state
+  const counter = Counter(
+    signal, // pass same signal - cleanup cascades
+    {
+      label: "Click Counter",
+      onReset: () => state.prop("counterValue").set({ count: 0 }),
+      state: state.focus(prop<AppState>()("counterValue")),
+    }
+  );
+  return h("div", { className: "app" }, [heading, counter]);
+};
+// Usage
+export const runExample = () => {
+  const container = document.getElementById("app");
+  if (!container) throw new Error("No #app element found");
+  const mounted = mount(App, {}, container);
+  // Return cleanup function
+  return () => mounted.unmount();
+};

package/examples/counter/index.html ADDED Viewed

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>fun-web Counter Example</title>
+  <style>
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      max-width: 600px;
+      margin: 50px auto;
+      padding: 20px;
+      background: #f5f5f5;
+    }
+    #app {
+      background: white;
+      padding: 40px;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+      text-align: center;
+    }
+    button {
+      font-size: 24px;
+      padding: 15px 30px;
+      background: #0066cc;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    button:hover {
+      background: #0052a3;
+    }
+    button:active {
+      transform: translateY(1px);
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="bundle.js"></script>
+</body>
+</html>

package/examples/todo-app/Todo.ts ADDED Viewed

@@ -0,0 +1,79 @@
+import {
+  h,
+  bindProperty,
+  on,
+  type Component,
+  type FunState,
+} from "../../src/index";
+export interface TodoState {
+  key: string;
+  checked: boolean;
+  priority: number;
+  label: string;
+}
+export interface TodoProps {
+  removeItem: () => void;
+  state: FunState<TodoState>;
+}
+export const Todo: Component<TodoProps> = (signal, { state, removeItem }) => {
+  // h is a much more ergonomic way of creating html but it's just document.createElement under the hood
+  const prioritySelect = h("select", {}, [
+    h("option", { value: "0" }, "High"),
+    h("option", { value: "1" }, "Low"),
+  ]);
+  // 😓 You can manually set initial state
+  prioritySelect.value = String(state.get().priority);
+  // 😓 and listen to when a state updates to update the element
+  state.prop("priority").subscribe(signal, (priority) => {
+    prioritySelect.value = String(priority);
+  });
+  // 😓 native event binding works but requires casting and dev must remember to pass signal so they don't leak memory
+  prioritySelect.addEventListener(
+    "change",
+    (e) => {
+      state.prop("priority").set(+(e.currentTarget as HTMLSelectElement).value);
+    },
+    { signal }
+  );
+  const checkbox = h("input", { type: "checkbox" });
+  // 😎 For easier binding you can bind property to a reactive state
+  bindProperty(checkbox, "checked", state.prop("checked"), signal); // when state.checked updates the checkbox.checked updates
+  // 😎 For easier event binding use `on` helper for better type inferrence and you can't forget to cleanup
+  on(
+    checkbox,
+    "change",
+    (e) => {
+      state.prop("checked").set(e.currentTarget.checked);
+    },
+    signal
+  );
+  // 😎 or do both at the same time since they both return the element
+  const labelInput = on(
+    bindProperty(
+      h("input", {
+        type: "text",
+      }),
+      "value",
+      state.prop("label"),
+      signal
+    ),
+    "input",
+    (e) => {
+      state.prop("label").set(e.currentTarget.value);
+    },
+    signal
+  );
+  return h("li", {}, [
+    checkbox,
+    prioritySelect,
+    labelInput,
+    // you can even inline to go tacit
+    on(h("button", { textContent: "X" }), "click", removeItem, signal),
+  ]);
+};

package/examples/todo-app/index.html ADDED Viewed

@@ -0,0 +1,142 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>fun-web Todo App</title>
+    <style>
+      /* CSS is all inlined here but I recommend using some CSS-in-JS library like typestyle or vanilla-extract so you can have your css colocated with components */
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        max-width: 600px;
+        margin: 50px auto;
+        padding: 20px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+      }
+      #app {
+        background: white;
+        padding: 30px;
+        border-radius: 12px;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+      }
+      .todo-app h1 {
+        margin: 0 0 20px 0;
+        color: #333;
+        font-size: 28px;
+      }
+      .todo-app form {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 20px;
+      }
+      .todo-app form input[type="text"] {
+        flex: 1;
+        padding: 12px;
+        border: 2px solid #e0e0e0;
+        border-radius: 6px;
+        font-size: 14px;
+        transition: border-color 0.2s;
+      }
+      .todo-app form input[type="text"]:focus {
+        outline: none;
+        border-color: #667eea;
+      }
+      .todo-app form button {
+        padding: 12px 24px;
+        background: #667eea;
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+      .todo-app form button:hover {
+        background: #5568d3;
+      }
+      .todo-app > div {
+        margin-bottom: 20px;
+      }
+      .todo-app > div button {
+        padding: 8px 16px;
+        background: #10b981;
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 13px;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+      .todo-app > div button:hover {
+        background: #059669;
+      }
+      .todo-app > div span {
+        margin-left: 10px;
+        color: #10b981;
+        font-weight: 600;
+      }
+      .todo-app ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+      .todo-app li {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 12px;
+        background: #f9fafb;
+        border-radius: 6px;
+        margin-bottom: 8px;
+        transition: background 0.2s;
+      }
+      .todo-app li:hover {
+        background: #f3f4f6;
+      }
+      .todo-app li input[type="checkbox"] {
+        width: 18px;
+        height: 18px;
+        cursor: pointer;
+      }
+      .todo-app li select {
+        padding: 6px 8px;
+        border: 1px solid #e0e0e0;
+        border-radius: 4px;
+        font-size: 13px;
+        cursor: pointer;
+      }
+      .todo-app li input[type="text"] {
+        flex: 1;
+        padding: 8px;
+        border: 1px solid #e0e0e0;
+        border-radius: 4px;
+        font-size: 14px;
+      }
+      .todo-app li button {
+        padding: 6px 12px;
+        background: #ef4444;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        font-size: 13px;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+      .todo-app li button:hover {
+        background: #dc2626;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="todo-bundle.js"></script>
+  </body>
+</html>

package/examples/todo-app/todo-app.ts ADDED Viewed

@@ -0,0 +1,120 @@
+import {
+  h,
+  funState,
+  mount,
+  bindProperty,
+  on,
+  keyedChildren,
+  type Component,
+  type FunState,
+} from "../../src/index";
+import { prepend, flow, Acc } from "@fun-land/accessor";
+import { TodoState, Todo } from "./Todo";
+// ===== Types =====
+interface TodoAppState {
+  value: string;
+  items: TodoState[];
+}
+// ===== Accessors and helpers =====
+const stateFoci = Acc<TodoAppState>();
+const addItem = (state: TodoAppState): TodoAppState =>
+  stateFoci.prop("items").mod(
+    prepend<TodoState>({
+      checked: false,
+      label: state.value,
+      priority: 1,
+      key: crypto.randomUUID(),
+    })
+  )(state);
+const clearValue = stateFoci.prop("value").set("");
+const markAllDone = stateFoci.prop("items").all().prop("checked").set(true);
+const removeByKey = (key: string) =>
+  stateFoci.prop("items").mod((xs) => xs.filter((t) => t.key !== key));
+// ===== Todo App Component =====
+const initialState: TodoAppState = {
+  value: "",
+  items: [
+    { checked: false, label: "Learn fun-web", priority: 0, key: "asdf" },
+    { checked: true, label: "Build something cool", priority: 1, key: "fdas" },
+  ],
+};
+const TodoApp: Component = (signal) => {
+  const state = funState(initialState);
+  const input = bindProperty(
+    h("input", {
+      type: "text",
+      value: state.get().value,
+      placeholder: "Add a todo...",
+    }),
+    "value",
+    state.prop("value"),
+    signal
+  );
+  on(
+    input,
+    "input",
+    (e) => {
+      state.prop("value").set(e.currentTarget.value);
+    },
+    signal
+  );
+  const addBtn = h("button", { type: "submit", textContent: "Add" });
+  const form = on(
+    h("form", {}, [input, addBtn]),
+    "submit",
+    (e) => {
+      e.preventDefault();
+      if (state.get().value.trim()) {
+        state.mod(flow(addItem, clearValue));
+      }
+    },
+    signal
+  );
+  // Because `on` returns the element you can pipe through
+  const markAllBtn = on(
+    h("button", { textContent: "Mark All Done" }),
+    "click",
+    () => {
+      state.mod(markAllDone);
+    },
+    signal
+  );
+  const allDoneText = h("span", { textContent: "" });
+  const todoList = h("ul", {});
+  keyedChildren(todoList, signal, state.prop("items"), (row) =>
+    Todo(row.signal, {
+      removeItem: row.remove,
+      state: row.state,
+    })
+  );
+  return h("div", { className: "todo-app" }, [
+    h("h1", { textContent: "Todo App" }),
+    form,
+    h("div", {}, [markAllBtn, allDoneText]),
+    todoList,
+  ]);
+};
+// ===== Initialize =====
+const app = document.getElementById("app");
+if (app) {
+  mount(TodoApp, {}, app);
+}