@davidsouther/jiffies 1.0.0-beta.1 → 2.0.0

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/provide.ts

@@ -0,0 +1,11 @@
+import { Option } from "../result.js"
+
+let registry: Record<string, unknown> = {};
+
+export function provide(items: Record<string, unknown>) {
+  registry = { ...registry, ...items };
+}
+
+export function retrieve<T>(key: string): Option<T> {
+  return registry[key] as T;
+}

package/src/dom/router/link.ts

@@ -1,5 +1,5 @@
-import { a } from "../html.js";
-import { Router } from "./router.js";
+import { a } from "../html.js"
+import { Router } from "./router.js"
 
 export interface Link {
   href: string;

package/src/dom/router/router.ts

@@ -1,10 +1,10 @@
-import { DOMElement, Updatable } from "../dom";
-import { Link } from "./link";
+import { DOMElement } from "../dom.js";
+import { Link } from "./link.js";
 
 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/svg.ts

@@ -1,4 +1,4 @@
-import { DenormAttrs, DenormChildren, up } from "./dom.js";
+import { DenormAttrs, DenormChildren, up } from "./dom.js"
 
 const makeSVGElement =
   <K extends keyof SVGElementTagNameMap>(name: K) =>

package/src/dom/test.ts

@@ -1,2 +1,8 @@
-export {};
-await Promise.all([import("./html.test.js"), import("./fc.test.js")]);
+export async function loadTests() {
+  if (process?.env.CI?.toLowerCase() === "true") return;
+  await Promise.all([
+    import("./html.test.js"),
+    import("./fc.test.js"),
+    import("./observable.test.js"),
+  ]);
+}

package/src/dom/types/html.ts

@@ -1,4 +1,4 @@
-import { Properties } from "./css.js";
+import { Properties } from "./css"
 
 export interface AriaAttributes {
   [_: `aria-${string}`]: string;

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/equal.ts

@@ -1,31 +1,42 @@
 export function compareArrays<T>(
-  equal: (a: T, b: T) => boolean
-): (A: T[], B: T[]) => boolean {
-  return (a: T[], b: T[]): boolean =>
-    a.length === b.length && a.every((e, i) => equal(e, b[i]));
+  equal: (a: T, b: T, partial: boolean) => boolean
+): (A: T[], B: T[], partial?: boolean) => boolean {
+  return (a: T[], b: T[], partial = false): boolean =>
+    a.length === b.length && a.every((e, i) => equal(e, b[i], partial));
 }
 
 export const equalArrays = compareArrays(Object.is);
 
-export const matchArrays: <A>(a: A[], b: A[]) => boolean =
+export const matchArrays: <A>(a: A[], b: A[], partial?: boolean) => boolean =
   compareArrays(equals);
 
 function asArray(a: Record<string, unknown>): [string, unknown][] {
   return Object.entries(a).sort((a, b) => a[0].localeCompare(b[0]));
 }
 
-export function equals<A>(a: A | A[], b: A | A[]): boolean {
+export const matchObjects = (a: {}, b: {}, partial = true) => {
+  for (const [k, v] of Object.entries(a)) {
+    if (!b.hasOwnProperty(k) && partial) continue;
+    // @ts-ignore
+    if (!equals(v, b[k], partial)) return false;
+  }
+  return true;
+};
+
+export function equals<A>(a: A | A[], b: A | A[], partial = false): boolean {
   // runtime type checking
   switch (typeof a) {
     case "object":
+      if (b === undefined) {
+        return false;
+      }
       if (a instanceof Array && b instanceof Array) {
-        return matchArrays(a, b);
+        return matchArrays(a, b, partial);
       } else {
-        return matchArrays(
-          asArray(a as Record<string, unknown>),
-          asArray(b as Record<string, unknown>)
-        );
+        return matchObjects(a, b, partial);
       }
+    case "function":
+      return a.name === (b as unknown as Function).name;
     default:
       return Object.is(a, b);
   }

package/src/flags.ts

@@ -22,7 +22,7 @@ export const parse = (parseArgs: string[]) => {
   };
 
   while (hasNext()) {
-    if (peek().substr(0, 2) == "--") {
+    if (peek().substr(0, 2) === "--") {
       parseLong(advance().substr(2));
     } else {
       args.push(advance());

package/src/fs.test.ts

@@ -0,0 +1,53 @@
+import { FileSystem, ObjectFileSystemAdapter } from "./fs.js";
+import { describe, it, expect } from "./scope/index.js";
+
+describe("FileSystem", () => {
+  describe("Writing", () => {
+    it("Writes files", async () => {
+      const fsObj = {};
+      const fs = new FileSystem(new ObjectFileSystemAdapter(fsObj));
+      await fs.writeFile("hello", "world");
+
+      expect(fsObj).toEqual({ "/hello": "world" });
+    });
+
+    it("Writes deep files", async () => {
+      const fsObj = {};
+      const fs = new FileSystem(new ObjectFileSystemAdapter(fsObj));
+      await fs.writeFile("deep/hello", "world");
+
+      expect(fsObj).toEqual({ "/deep/hello": "world" });
+    });
+
+    it("Writes deep files from root", async () => {
+      const fsObj = {};
+      const fs = new FileSystem(new ObjectFileSystemAdapter(fsObj));
+      await fs.writeFile("/root/deep/hello", "world");
+
+      expect(fsObj).toEqual({ "/root/deep/hello": "world" });
+    });
+
+    it("Writes files after cd", async () => {
+      const fsObj = {};
+      const fs = new FileSystem(new ObjectFileSystemAdapter(fsObj));
+      await fs.cd("deep");
+      await fs.writeFile("hello", "world");
+
+      expect(fsObj).toEqual({ "/deep/hello": "world" });
+    });
+  });
+
+  describe("directory", () => {
+    it("returns directory listing", async () => {
+      const fsObj = {
+        "/deep/hello": "world",
+        "/deep/bonjour": "monde",
+        "/other/file": "text",
+      };
+      const fs = new FileSystem(new ObjectFileSystemAdapter(fsObj));
+
+      const dir = await fs.readdir("deep");
+      expect(dir.sort()).toEqual(["bonjour", "hello"]);
+    });
+  });
+});

package/src/fs.ts

@@ -0,0 +1,180 @@
+// Treat localstorage as a file system
+export type PathLike = string;
+export interface Stats {
+  isDirectory(): boolean;
+  isFile(): boolean;
+}
+
+function join(...paths: string[]): string {
+  const pathParts: string[] = [];
+  for (const path of paths) {
+    for (const part of path.split("/")) {
+      switch (part) {
+        case "":
+        case ".":
+          break;
+        case "..":
+          pathParts.pop();
+          break;
+        default:
+          pathParts.push(part);
+      }
+    }
+  }
+  return "/" + pathParts.join("/");
+}
+
+interface FileSystemAdapter {
+  stat(path: PathLike): Promise<Stats>;
+  readdir(path: PathLike): Promise<string[]>;
+  copyFile(from: PathLike, to: PathLike): Promise<void>;
+  readFile(path: PathLike): Promise<string>;
+  writeFile(path: PathLike, contents: string): Promise<void>;
+  rm(path: PathLike): Promise<void>;
+}
+
+export class FileSystem implements FileSystemAdapter {
+  protected wd = "/";
+  protected stack: string[] = [];
+
+  constructor(protected adapter = new ObjectFileSystemAdapter()) {}
+
+  cwd(): string {
+    return this.wd;
+  }
+
+  cd(dir: string) {
+    this.wd = this.p(dir);
+  }
+
+  pushd(dir: string) {
+    this.stack.push(this.wd);
+    this.cd(dir);
+  }
+
+  popd() {
+    if (this.stack.length > 0) {
+      this.wd = this.stack.pop()!;
+    }
+  }
+
+  stat(path: PathLike): Promise<Stats> {
+    return this.adapter.stat(join(this.cwd(), path));
+  }
+
+  readdir(path: PathLike): Promise<string[]> {
+    return this.adapter.readdir(this.p(path) + "/");
+  }
+
+  copyFile(from: PathLike, to: PathLike): Promise<void> {
+    return this.adapter.copyFile(this.p(from), this.p(to));
+  }
+
+  readFile(path: PathLike): Promise<string> {
+    return this.adapter.readFile(this.p(path));
+  }
+
+  writeFile(path: PathLike, contents: string): Promise<void> {
+    return this.adapter.writeFile(this.p(path), contents);
+  }
+
+  rm(path: PathLike): Promise<void> {
+    return this.adapter.rm(this.p(path));
+  }
+
+  private p(path: PathLike): string {
+    return path[0] === "/" ? path : join(this.cwd(), path);
+  }
+}
+
+export class ObjectFileSystemAdapter implements FileSystemAdapter {
+  constructor(private fs: Record<string, string> = {}) {}
+
+  stat(path: PathLike): Promise<Stats> {
+    return new Promise((resolve, reject) => {
+      if (this.fs[path] != null) {
+        resolve({
+          isDirectory() {
+            return false;
+          },
+          isFile() {
+            return true;
+          },
+        });
+      } else {
+        reject();
+      }
+    });
+  }
+
+  readdir(path: PathLike): Promise<string[]> {
+    return new Promise((resolve) => {
+      let dir: string[] = [];
+      for (const filename of Object.keys(this.fs)) {
+        if (filename.startsWith(path)) {
+          const end = filename.indexOf("/", path.length + 1);
+          const basename = filename.substring(
+            path.length,
+            end === -1 ? undefined : end
+          );
+          dir.push(basename);
+        }
+      }
+      return resolve(dir);
+    });
+  }
+
+  copyFile(from: PathLike, to: PathLike): Promise<void> {
+    return new Promise((resolve) => {
+      this.fs[to] = this.fs[from];
+      resolve();
+    });
+  }
+
+  readFile(path: PathLike): Promise<string> {
+    return new Promise((resolve, reject) => {
+      let file = this.fs[path];
+      if (file === undefined) {
+        reject(new Error(`File Not Found ${path}`));
+      } else {
+        resolve(file);
+      }
+    });
+  }
+
+  writeFile(path: PathLike, contents: string): Promise<void> {
+    return new Promise((resolve) => {
+      this.fs[path] = contents;
+      resolve();
+    });
+  }
+
+  rm(path: PathLike): Promise<void> {
+    return new Promise((resolve) => {
+      delete this.fs[path];
+      resolve();
+    });
+  }
+}
+
+export class LocalStorageFileSystemAdapter extends ObjectFileSystemAdapter {
+  constructor() {
+    super(window.localStorage);
+  }
+}
+
+export interface Tree {
+  [k: string]: string | Tree;
+}
+
+export async function reset(fs: FileSystem, tree: Tree): Promise<void> {
+  for (const [path, file] of Object.entries(tree)) {
+    if (typeof file === "string") {
+      await fs.writeFile(path, file);
+    } else {
+      fs.cd(path);
+      await reset(fs, file);
+      fs.cd("..");
+    }
+  }
+}

package/src/index.html

@@ -3,27 +3,30 @@
   <head>
     <title>Jiffies Tests</title>
     <base href="/" />
-    <link rel="stylesheet" href="/pico/pico-1.4.1.css" />
+    <link rel="stylesheet" href="/pico/pico.css?$enable-viewport=none" />
   </head>
   <body>
-    <header id="menu"></header>
+    <header></header>
 
-    <main class="container">
+    <main>
       <article id="test_output"></article>
     </main>
 
     <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">
-      import { execute } from "./scope/execute.js";
-      import { displayStatistics } from "./scope/display/dom.js";
-      import { onConsole } from "./scope/display/console.js";
-      import { asXML } from "./scope/display/junit.js";
+      await Promise.all([
+        import("./test_all.js"),
+        import("./dom/test.js"),
+        import("./components/test.js"),
+      ]);
+
+      import { execute } from "./scope/execute"
+      import { displayStatistics } from "./scope/display/dom"
+      import { onConsole } from "./scope/display/console"
+      import { asXML } from "./scope/display/junit"
 
       function write(id, value) {
         const start = `--- START_${id.toUpperCase()} ---`;
@@ -43,8 +46,8 @@
       })();
     </script>
     <script type="module">
-      import { nav, ul, li, strong } from "./dom/html.js";
-      import { link } from "./dom/router/link.js";
+      import { nav, ul, li, strong } from "./dom/html"
+      import { link } from "./dom/router/link"
 
       const getUrls = async () => {
         const sitemap = await fetch("/sitemap.json");
@@ -67,7 +70,7 @@
       }));
 
       document
-        .getElementById("menu")
+        .querySelector("body > header")
         .appendChild(
           nav(
             ul(li(strong("Jiffy Apps"))),

package/src/log.ts

@@ -45,17 +45,21 @@ export function getLogger(name: string): Logger {
 export const DEFAULT_LOGGER = getLogger("default");
 
 export function debug(message: Display, data?: {}) {
-  DEFAULT_LOGGER.debug(message, data);
+  if (data) DEFAULT_LOGGER.debug(message, data);
+  else DEFAULT_LOGGER.debug(message);
 }
 
 export function info(message: Display, data?: {}) {
-  DEFAULT_LOGGER.info(message, data);
+  if (data) DEFAULT_LOGGER.info(message, data);
+  else DEFAULT_LOGGER.info(message);
 }
 
 export function warn(message: Display, data?: {}) {
-  DEFAULT_LOGGER.warn(message, data);
+  if (data) DEFAULT_LOGGER.warn(message, data);
+  else DEFAULT_LOGGER.warn(message);
 }
 
 export function error(message: Display, data?: {}) {
-  DEFAULT_LOGGER.error(message, data);
+  if (data) DEFAULT_LOGGER.error(message, data);
+  else DEFAULT_LOGGER.error(message);
 }

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;
+};