@davidsouther/jiffies 1.0.0 → 1.1.0

package/src/dom/html.test.ts

@@ -16,16 +16,16 @@ describe("html", () => {
   });
 
   it("attaches event handlers", () => {
-    let clicked = false;
+    let clicked = 0;
     const btn = button({
       events: {
         click: () => {
-          clicked = true;
+          clicked += 1;
         },
       },
     });
     btn.dispatchEvent(new Event("click"));
-    expect(clicked).toBe(true);
+    expect(clicked).toBe(1);
   });
 
   it("removes event handlers", () => {
@@ -41,7 +41,7 @@ describe("html", () => {
 
     expect(clicked).toBe(1);
 
-    btn.update({ events: { click: undefined } });
+    btn.update({ events: { click: null } });
     btn.dispatchEvent(new Event("click"));
     expect(clicked).toBe(1);
   });
@@ -49,7 +49,7 @@ describe("html", () => {
   it("sets style properties", () => {
     const btn = button({
       style: { flexDirection: "column" },
-    }) as unknown as HTMLButtonElement;
+    });
 
     expect(btn.style.flexDirection).toBe("column");
   });

package/src/dom/html.ts

@@ -1,19 +1,16 @@
-import { DenormAttrs, DenormChildren, up, Updatable } from "./dom.js";
-import { Properties } from "./types/css.js";
-
-export type UHTMLElement<E extends HTMLElement = HTMLElement> = Updatable<
-  Omit<E, "style">
-> & { style: Properties };
+import { DenormAttrs, DenormChildren, up } from "./dom.js";
 
 const makeHTMLElement =
   <K extends keyof HTMLElementTagNameMap>(name: K) =>
   (
-    attrs?: DenormAttrs<Omit<HTMLElementTagNameMap[K], "style">>,
+    attrs?: DenormAttrs<HTMLElementTagNameMap[K]>,
     ...children: DenormChildren[]
   ) =>
-    up(document.createElement(name), attrs, ...children) as UHTMLElement<
-      HTMLElementTagNameMap[K]
-    >;
+    up(
+      document.createElement(name),
+      attrs,
+      ...children
+    ) as HTMLElementTagNameMap[K];
 
 export const a = makeHTMLElement("a");
 export const abbr = makeHTMLElement("abbr");

package/src/dom/observable.test.ts

@@ -0,0 +1,43 @@
+import { O } from "./observable.js";
+import { Subject, map } from "../observable/observable.js";
+import { describe, it } from "../scope/describe.js";
+import { expect } from "../scope/expect.js";
+import { div, span } from "./html.js";
+import { DOMUpdates } from "./dom.js";
+
+describe("DOM Observable", () => {
+  it("updates a dom node with observable results", async () => {
+    const subject = new Subject<string>();
+    const observable = subject.pipe(map((s) => [s]));
+
+    const element = O(div(), observable);
+
+    expect(element.innerText).toEqual("");
+    await subject.next("H");
+    expect(element.innerText).toEqual("H");
+    await subject.next("He");
+    expect(element.innerText).toEqual("He");
+  });
+
+  it("updates a dom node's attributes", async () => {
+    const classes = new Subject<string[]>();
+    const observable = classes.map<DOMUpdates>((c) => [{ class: c.join(" ") }]);
+
+    const element = O(span(), observable);
+
+    expect(element.classList.contains("warning")).toBe(false);
+    expect(element.classList.contains("error")).toBe(false);
+
+    await classes.next(["warning"]);
+    expect(element.classList.contains("warning")).toBe(true);
+    expect(element.classList.contains("error")).toBe(false);
+
+    await classes.next(["error"]);
+    expect(element.classList.contains("warning")).toBe(true);
+    expect(element.classList.contains("error")).toBe(true);
+
+    await classes.next(["!warning", "!error"]);
+    expect(element.classList.contains("warning")).toBe(false);
+    expect(element.classList.contains("error")).toBe(false);
+  });
+});

package/src/dom/observable.ts

@@ -0,0 +1,11 @@
+import { Observable } from "../observable/observable.js";
+
+export function O<E extends Element>(
+  element: E,
+  observable: Observable<Parameters<E["update"]>>
+): E {
+  observable.subscribe((t) => {
+    element.update(...t);
+  });
+  return element;
+}

package/src/dom/router/router.ts

@@ -1,10 +1,10 @@
-import { DOMElement, Updatable } from "../dom";
+import { DOMElement } from "../dom";
 import { Link } from "./link";
 
 export interface Router {
   current?: string;
   navigate: (url: string) => (event: Event) => void;
-  (target: Updatable<DOMElement>): Updatable<DOMElement>;
+  (target: DOMElement): DOMElement;
 }
 
 let baseURI = `${document.baseURI}`;
@@ -15,8 +15,8 @@ const normalizeHref = () => {
 let globalRouter: Router;
 export const Router = {
   for(links: Link[], index: string, setGlobalRouter = true): Router {
-    let target: Updatable<Element>;
-    const partialRouter: Partial<Router> = (t: Updatable<Element>) => {
+    let target: Element;
+    const partialRouter: Partial<Router> = (t: Element) => {
       target = t;
       const href = normalizeHref();
       const route = href === baseURI ? baseURI + index : href;

package/src/dom/test.ts

@@ -1,2 +1,6 @@
 export {};
-await Promise.all([import("./html.test.js"), import("./fc.test.js")]);
+await Promise.all([
+  import("./html.test.js"),
+  import("./fc.test.js"),
+  import("./observable.test.js"),
+]);

package/src/dom/xml.ts

@@ -7,6 +7,5 @@ export function xml(
     (attrs, [attr, val]) => `${attrs} ${attr}="${val}"`,
     ""
   );
-  const kids = children.join("");
-  return `<${tag} ${attrs}>${kids}</${tag}>`;
+  return `<${tag} ${attrs}>${children.join("")}</${tag}>`;
 }

package/src/index.html

@@ -15,11 +15,14 @@
     <div style="display: none" id="status"></div>
     <div style="display: none" id="json"></div>
     <div style="display: none" id="xml"></div>
-    <script type="module" src="./test_all.js"></script>
-    <script type="module" src="./dom/test.js"></script>
-    <script type="module" src="./components/test.js"></script>
 
     <script type="module">
+      await Promise.all([
+        import("./test_all.js"),
+        import("./dom/test.js"),
+        import("./components/test.js"),
+      ]);
+
       import { execute } from "./scope/execute.js";
       import { displayStatistics } from "./scope/display/dom.js";
       import { onConsole } from "./scope/display/console.js";

package/src/observable/_notes

@@ -1,13 +1,26 @@
-Subject
-    BehaviorSubject
-    ReplaySubject
+Subscriber
+    next(t: T)
+    error(e: E)
+    complete()
+
 Observable
-    of
-    from
-    fromEvent
-    pipe
+    ::of(...Ts)
+    ::combineLatest([...])
+    ::from(promise|Iterable|Subscribable)
+    ::fromEvent(element, eventName)
+    (subscriber) -> subscription
+    .subscribe(subscriber) -> subscription
+    .pipe(...operators) -> Observable
+
+Subject
+    -> BehaviorSubject(t)
+    -> ReplaySubject(n)
+
 operator
-    map
     filter
+    first/last
+    map
+    publishReplay
     reduce
+    takeUntil
     tap

package/src/observable/event.ts

@@ -0,0 +1,93 @@
+import { display } from "../display.js";
+import { Observable } from "./observable.js";
+
+export interface Next<T> {
+  value: T;
+  completed: false;
+  failed: false;
+}
+
+export interface Error<E> {
+  error: E;
+  completed: false;
+  failed: true;
+}
+
+export interface Completed {
+  completed: true;
+  failed: false;
+}
+
+export interface Failed {
+  completed: true;
+  failed: true;
+}
+
+export type Event<T, E> = Next<T> | Error<E> | Completed | Failed;
+
+export interface EventSubscriber<T, E> {
+  next(e: Event<T, E>): void;
+}
+
+export const next = <T>(value: T): Next<T> => ({
+  value,
+  completed: false,
+  failed: false,
+});
+export const error = <E>(e: E): Error<E> => ({
+  error: e,
+  completed: false,
+  failed: true,
+});
+export const completed = (): Completed => ({ completed: true, failed: false });
+export const failed = (): Failed => ({ completed: true, failed: true });
+
+export const isNext = <T>(event: Event<T, unknown>): event is Next<T> =>
+  !event.completed && !event.failed && event.value !== undefined;
+export const isError = <E>(event: Event<unknown, E>): event is Error<E> =>
+  event.failed && !event.completed;
+export const isCompleted = (
+  event: Event<unknown, unknown>
+): event is Completed => event.completed && !event.failed;
+export const isFailed = (event: Event<unknown, unknown>): event is Failed =>
+  event.completed && event.failed;
+
+export const isEvent = <T, E>(t: T | Event<T, E>): t is Event<T, E> => {
+  const b = t as Event<unknown, unknown>;
+  return isNext(b) || isError(b) || isCompleted(b);
+};
+
+export const asEvents = <T, E>(a: (T | Event<T, E>)[]): Event<T, E>[] =>
+  a.map((e) => (isEvent(e) ? e : next(e)));
+
+const marble = <T, E>(event: Event<T, E>): string =>
+  isError(event)
+    ? "X"
+    : isFailed(event)
+    ? "!"
+    : isCompleted(event)
+    ? "|"
+    : `(${display(event.value)})`;
+
+export const marbles = <T, E>(events: Event<T, E>[]): string =>
+  `:${events.map(marble).join("-")}`;
+
+export const collect = <T, E>(input$: Observable<T, E>) => {
+  const collected: Event<T, E>[] = [];
+
+  const subscription = input$.subscribe({
+    next: (x: T) => {
+      collected.push(next(x));
+    },
+    error: (e: E) => {
+      collected.push(error(e));
+    },
+    complete: () => {
+      collected.push(completed());
+    },
+  });
+
+  subscription.unsubscribe();
+
+  return collected;
+};

package/src/observable/observable.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from "../scope/index.js";
+import { Observable, Subject, filter, map } from "./observable.js";
+
+describe("Observables", () => {
+  describe("basics", () => {
+    it("can create and observe a scalar subject", async () => {
+      const subject = new Subject<number>();
+
+      let resolved = 42;
+
+      subject.subscribe({
+        next: (n) => {
+          resolved = n;
+        },
+      });
+
+      expect(resolved).toBe(42);
+      await subject.next(64);
+      expect(resolved).toBe(64);
+    });
+  });
+
+  describe("creation", () => {
+    it("builds an observable of items", async () => {
+      const stream = Observable.of(2, 4, 8, 16);
+      let values: number[] = [];
+      await new Promise<void>((resolve) => {
+        stream.subscribe({
+          next: (n) => {
+            values.unshift(n);
+          },
+          complete: () => {
+            resolve();
+          },
+        });
+      });
+      expect(values).toEqual([16, 8, 4, 2]);
+    });
+  });
+
+  describe("pipes", () => {
+    it("runs a pipe", async () => {
+      const subject = new Subject<number>();
+
+      let resolved = 0;
+      const inflate = (i: number) => (n: number) => n + i;
+      const biggerThan = (i: number) => (n: number) => n > i;
+      const assign = (n: number) => {
+        resolved = n;
+      };
+
+      subject.pipe(map(inflate(22)), filter(biggerThan(70))).subscribe(assign);
+
+      expect(resolved).toBe(0);
+      await subject.next(42);
+      expect(resolved).toBe(0);
+      await subject.next(50);
+      expect(resolved).toBe(72);
+    });
+  });
+
+  describe("Subject", () => {
+    it("is callable", async () => {
+      const subject = new Subject<number>();
+      let resolved = 0;
+      subject.subscribe((n) => {
+        resolved = n;
+      });
+      await subject.next(42);
+      expect(resolved).toBe(42);
+    });
+  });
+});