@davidsouther/jiffies 1.0.0-beta.1 → 1.0.0

package/build/server/http/response.js

@@ -14,7 +14,9 @@ const MIME_TYPES = {
     woff2: "application/font-woff2",
 };
 const mime = (basename) => {
-    const extension = basename.substr(basename.lastIndexOf(".") + 1);
+    const extension = basename
+        .substring(basename.lastIndexOf(".") + 1)
+        .toLowerCase();
     return MIME_TYPES[extension] ?? "application/octet-stream";
 };
 export const fileResponse = (filename, stat, status = 200) => async () => {
@@ -26,11 +28,12 @@ export const fileResponse = (filename, stat, status = 200) => async () => {
     const contentLength = stat.size;
     return { status, contentType, contentLength, content };
 };
+const CHARSET = "utf-8";
 export const contentResponse = (content, contentType, status = 200) => async () => {
-    const contentBuffer = Buffer.from(content, "utf-8");
+    const contentBuffer = Buffer.from(content, CHARSET);
     return {
         content: contentBuffer,
-        contentType,
+        contentType: contentType.split(";")[0] + "; charset=" + CHARSET,
         status,
         contentLength: contentBuffer.length,
     };

package/build/test_all.d.ts

@@ -1 +1,7 @@
-export {};
+import "./context.test.js";
+import "./equal.test.js";
+import "./flags.test.js";
+import "./fs.test.js";
+import "./generator.test.js";
+import "./lock.test.js";
+import "./result.test.js";

package/build/test_all.js

@@ -1,14 +1,13 @@
 // This file must be .js for imports to run. Unused imports in .ts files are
 // discarded during transpilation.
 import { describe, expect, it } from "./scope/index.js";
-await Promise.all([
-    import("./context.test.js"),
-    import("./equal.test.js"),
-    import("./flags.test.js"),
-    import("./generator.test.js"),
-    import("./lock.test.js"),
-    import("./result.test.js"),
-]);
+import "./context.test.js";
+import "./equal.test.js";
+import "./flags.test.js";
+import "./fs.test.js";
+import "./generator.test.js";
+import "./lock.test.js";
+import "./result.test.js";
 describe("Test executor", () => {
     it("matches equality", () => {
         expect(1).toBe(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@davidsouther/jiffies",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0",
   "private": false,
   "displayName": "JEFRi Jiffies",
   "type": "module",
@@ -31,6 +31,9 @@
   },
   "devDependencies": {
     "@types/node": "^17.0.24",
-    "typescript": "^4.7.0-dev.20220415"
+    "typescript": "4.7.1-rc"
+  },
+  "dependencies": {
+    "sass": "^1.49.9"
   }
 }

package/src/components/button_bar.ts

@@ -1,6 +1,9 @@
-import { Display, display } from "../display.js";
+import { display } from "../display.js";
 import { FC } from "../dom/fc.js";
-import { a, li, ul } from "../dom/html.js";
+import { fieldset, input, label } from "../dom/html.js";
+
+let buttonBarId = 1;
+let nextId = () => buttonBarId++;
 
 const ButtonBar = FC<{
   // T extends Display
@@ -10,29 +13,32 @@ const ButtonBar = FC<{
   values: T[];
   // @ts-ignore TODO(TFC)
   events: { onSelect: (current: T) => void };
-}>("button-bar", (el, { value, values, events }) =>
-  ul(
-    { class: "ButtonBar__wrapper" },
-    ...values.map((option) =>
-      li(
-        a(
-          {
-            href: "#",
-            class: `ButtonBar__${`${option}`.replace(/\s+/g, "_").toLowerCase()}
-                ${option === value ? "" : "secondary"}
-                `.replace(/[\n\s]+/, " "),
-            events: {
-              click: (e) => {
-                e.preventDefault();
-                events.onSelect(option);
+}>("button-bar", (el, { value, values, events }) => {
+  const name = `button-bar-${nextId()}`;
+  return fieldset(
+    { class: "input-group" },
+    ...values
+      .map((option) => {
+        const opt = `${option}`.replace(/\s+/g, "_").toLowerCase();
+        const id = `${name}-${opt}`;
+        return [
+          label(
+            { role: "button", htmlFor: id },
+            input({
+              type: "radio",
+              id,
+              name,
+              value: option,
+              checked: option === value,
+              events: {
+                change: () => events.onSelect(option),
               },
-            },
-          },
-          display(option)
-        )
-      )
-    )
-  )
-);
-
+            }),
+            display(option)
+          ),
+        ];
+      })
+      .flat()
+  );
+});
 export default ButtonBar;

package/src/display.ts

@@ -8,5 +8,11 @@ export const isDisplay = (/** @type unknown */ a: unknown): a is Display =>
   typeof (a as Display).toString === "function" ||
   typeof (a as Display) === "string";
 
-export const display = (a: unknown | Display): string =>
-  isDisplay(a) ? a.toString() : JSON.stringify(a);
+export const display = (a: unknown | Display): string => {
+  if (isDisplay(a)) {
+    const str = a.toString();
+    if (str === "[object Object]") return JSON.stringify(a);
+    return str;
+  }
+  return JSON.stringify(a);
+};

package/src/dom/dom.ts

@@ -115,6 +115,7 @@ export function update<E extends DOMElement>(
 
     let useAttributes =
       k.startsWith("aria-") ||
+      k == "role" ||
       element.namespaceURI != "http://www.w3.org/1999/xhtml";
 
     if (useAttributes) {

package/src/dom/form/form.ts

@@ -3,6 +3,7 @@ import { form, input, label, option, select } from "../html.js";
 import {
   FormAttributes,
   InputAttributes,
+  LabelAttributes,
   OptionAttributes,
   SelectAttributes,
 } from "../types/html.js";
@@ -19,8 +20,18 @@ export const Form = (attrs: FormAttributes, ...children: DenormChildren[]) => {
 };
 export const Input = (attrs: InputAttributes, ...children: DenormChildren[]) =>
   label(input(attrs as Attrs<HTMLInputElement>), ...children);
-export const Select = ({ options }: { options: string[] | {} }) =>
-  label(select(...prepareOptions(options).map(Option)));
+
+export const Select = (
+  attrs: { options: string[] | {}; selected?: string } & SelectAttributes &
+    LabelAttributes
+) =>
+  label(
+    { style: attrs.style ?? {} },
+    select(
+      { events: attrs.events ?? {} },
+      ...prepareOptions(attrs.options, attrs.selected).map(Option)
+    )
+  );
 export const Button = () => {};
 
 const prepareOptions = (
@@ -29,19 +40,31 @@ const prepareOptions = (
     | Record<
         string,
         string | { label: string; disabled?: boolean; selected?: boolean }
-      >
+      >,
+  selected?: string
 ): Parameters<typeof Option>[0][] =>
   Array.isArray(attrs)
-    ? attrs.map((value) => ({ value, label: value }))
+    ? attrs.map((value) => ({
+        value,
+        label: value,
+        selected: selected == value,
+      }))
     : Object.entries(attrs).map(([value, label]) =>
-        typeof label === "string" ? { value, label } : { value, ...label }
+        typeof label === "string"
+          ? { value, label, selected: selected === value }
+          : { value, ...label }
       );
 export const Option = (attrs: OptionAttributes) =>
   option(attrs as Attrs<HTMLOptionElement>);
 
 export const Dropdown = (
-  attrs: SelectAttributes | { options: Parameters<typeof prepareOptions>[0] }
-) => {};
+  attrs: SelectAttributes | { selected?: string },
+  ...options: Parameters<typeof prepareOptions>[0][]
+) =>
+  Select({
+    ...attrs,
+    options: typeof options[0] == "string" ? options : options[0],
+  });
 export const Radios = () => {};
 export const Checks = () => {};
 export const Switches = () => {};

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/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/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();
+      } 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,12 +3,12 @@
   <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>
 
@@ -67,7 +67,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/pico/_variables.scss

@@ -0,0 +1,66 @@
+// Config
+// ––––––––––––––––––––
+
+// Enable <header>, <main>, <footer> inside <body> as a container
+$enable-semantic-container: true !default;
+
+// Enable .container and .container-fluid
+$enable-class-container: false !default;
+
+// Enable a centered viewport for <header>, <main>, <footer> inside <body>
+// Options are "all" to center all, "main" to only center main, and "none" to treat all as fluid.
+$enable-viewport: "main" !default;
+
+// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
+// Fixed spacings if disabled
+$enable-responsive-spacings: true !default;
+
+// Enable responsive typography
+// Fixed root element size if disabled
+$enable-responsive-typography: true !default;
+
+// Enable .classes
+// .classless version if disabled
+$enable-classes: true !default;
+
+// Enable .grid class
+$enable-grid: true !default;
+
+// Enable transitions
+$enable-transitions: true !default;
+
+// Enable overriding with !important
+$enable-important: true !default;
+
+// Responsive
+// ––––––––––––––––––––
+
+// xs: Extra small (portrait phones)
+// sm: Small (landscape phones)
+// md: Medium (tablets)
+// lg: Large (desktops)
+// xl: Extra large (large desktops, TVs)
+
+// NOTE:
+// To provide an easy and fine styling on each breakpoint
+// we didn't use @each, @mixin or @include.
+// That means you need to edit each CSS selector file to add a breakpoint
+
+// Breakpoints
+// 'null' disable the breakpoint
+$breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+) !default;
+
+// Viewports
+$viewports: (
+  // 'null' disable the viewport on a breakpoint
+  sm: 510px,
+  md: 700px,
+  lg: 920px,
+  xl: 1130px
+) !default;