@davidsouther/jiffies 1.0.0-beta.1 → 2.0.0

package/src/pico/utilities/_reduce-motion.scss

@@ -0,0 +1,27 @@
+@if $enable-transitions and $enable-important {
+  /**
+ * Reduce Motion Features
+ */
+
+  // Based on :
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Remove animations when motion is reduced (opinionated)
+  // 2. Remove fixed background attachments when motion is reduced (opinionated)
+  // 3. Remove timed scrolling behaviors when motion is reduced (opinionated)
+  // 4. Remove transitions when motion is reduced (opinionated)
+  @media (prefers-reduced-motion: reduce) {
+    *:not([aria-busy="true"]),
+    :not([aria-busy="true"])::before,
+    :not([aria-busy="true"])::after {
+      background-attachment: initial !important; // 2
+      animation-duration: 1ms !important; // 1
+      animation-delay: -1ms !important; // 1
+      animation-iteration-count: 1 !important; // 1
+      scroll-behavior: auto !important; // 3
+      transition-delay: 0s !important; // 4
+      transition-duration: 0s !important; // 4
+    }
+  }
+}

package/src/pico/utilities/_tooltip.scss

@@ -0,0 +1,101 @@
+[data-tooltip] {
+  position: relative;
+
+  &:not(a):not(button):not(input) {
+    border-bottom: 1px dotted;
+    text-decoration: none;
+    cursor: help;
+  }
+
+  &::before,
+  &::after {
+    display: block;
+    z-index: 99;
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    padding: 0.25rem 0.5rem;
+    overflow: hidden;
+    transform: translate(-50%, -0.25rem);
+    border-radius: var(--border-radius);
+    background: var(--tooltip-background-color);
+    content: attr(data-tooltip);
+    color: var(--tooltip-color);
+    font-style: normal;
+    font-weight: var(--font-weight);
+    font-size: 0.875rem;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  // Caret
+  &::after {
+    padding: 0;
+    transform: translate(-50%, 0rem);
+    border-top: 0.3rem solid;
+    border-right: 0.3rem solid transparent;
+    border-left: 0.3rem solid transparent;
+    border-radius: 0;
+    background-color: transparent;
+    content: "";
+    color: var(--tooltip-background-color);
+  }
+
+  // Display
+  &:focus,
+  &:hover {
+    &::before,
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  // Animations, excluding touch devices
+  @if $enable-transitions {
+    @media (hover: hover) and (pointer: fine) {
+      &:focus,
+      &:hover {
+        &::before,
+        &::after {
+          animation-duration: 0.2s;
+          animation-name: slide;
+        }
+
+        &::after {
+          animation-name: slideCaret;
+        }
+      }
+    }
+  }
+}
+
+// Animations
+@if $enable-transitions {
+  @keyframes slide {
+    from {
+      transform: translate(-50%, 0.75rem);
+      opacity: 0;
+    }
+    to {
+      transform: translate(-50%, -0.25rem);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideCaret {
+    from {
+      opacity: 0;
+    }
+    50% {
+      transform: translate(-50%, -0.25rem);
+      opacity: 0;
+    }
+    to {
+      transform: translate(-50%, 0rem);
+      opacity: 1;
+    }
+  }
+}

package/src/result.ts

@@ -1,14 +1,14 @@
 export type None = null;
 export type Some<T> = T;
 export type Option<T> = Some<T> | None;
-export type Err<E extends Error> = {
+export type Err<E = Error> = {
   err: E;
   map: <U>(fn: (t: unknown) => Result<U>) => Result<U>;
 };
 export type Ok<T> = { ok: T; map: <U>(fn: (t: T) => Result<U>) => Result<U> };
-export type Result<T, E extends Error = Error> = Ok<T> | Err<E>;
+export type Result<T, E = Error> = Ok<T> | Err<E>;
 
-export const isNone = <T>(s: Option<T>): s is None => s == null;
+export const isNone = <T>(s: Option<T>): s is None => s === null;
 export const isSome = <T>(s: Option<T>): s is Some<T> => s != null;
 
 export function None<T = unknown>(_?: T): Option<T> {
@@ -21,18 +21,17 @@ export function Some(t: any): any {
   return t;
 }
 
-export const isOk = <T, E extends Error>(t: Result<T, E>): t is Ok<T> =>
+export const isOk = <T, E>(t: Result<T, E>): t is Ok<T> =>
   (t as Ok<T>).ok !== undefined;
-export const isErr = <T, E extends Error>(e: Result<T, E>) =>
+export const isErr = <T, E>(e: Result<T, E>): e is Err<E> =>
   (e as Err<E>).err !== undefined;
-export const isResult = <T, E extends Error>(
-  t: Result<T, E>
-): t is Result<T, E> => isOk(t) || isErr(t);
+export const isResult = <T, E>(t: Result<T, E>): t is Result<T, E> =>
+  isOk(t) || isErr(t);
 
 // Beware: Order matters for correct inference.
 export function Ok<T>(ok: Ok<T>): T;
 export function Ok<T>(t: T): Ok<T>;
-export function Ok<T, E extends Error>(t: any): any {
+export function Ok<T, E>(t: any): any {
   return t.ok
     ? t.ok
     : {
@@ -44,21 +43,21 @@ export function Ok<T, E extends Error>(t: any): any {
 }
 
 // Beware: Order matters for correct inference.
-export function Err<E extends Error>(e: Err<E>): E;
-export function Err<E extends Error>(e: E): Err<E>;
-export function Err<E extends Error>(e: string): Err<E>;
-export function Err<T, E extends Error>(e: any): any {
+export function Err<E>(e: Err<E>): E;
+export function Err<E>(e: E): Err<E>;
+export function Err<E>(e: string): Err<E>;
+export function Err<T, E>(e: any): any {
   return (
     e.err ?? {
-      err: typeof e === "string" ? new Error(e) : e,
-      map<U>(this: Result<T, E>, fn: (t: unknown) => Result<U>): Result<U, E> {
+      err: e,
+      map<U>(this: Result<T, E>, _fn: (t: unknown) => Result<U>): Result<U, E> {
         return this as Result<U, E>;
       },
     }
   );
 }
 
-export function unwrap<T, E extends Error>(result: Result<T, E>): T | never;
+export function unwrap<T, E>(result: Result<T, E>): T | never;
 export function unwrap<O>(some: Option<O>): O | never;
 export function unwrap(t: any): any {
   if (isNone(t)) {
@@ -73,7 +72,7 @@ export function unwrap(t: any): any {
   return t;
 }
 
-export function unwrapOr<T, E extends Error>(result: Result<T, E>, def: T): T;
+export function unwrapOr<T, E>(result: Result<T, E>, def: T): T;
 export function unwrapOr<T>(some: Some<T>, def: T): T;
 export function unwrapOr(t: any, def: any): any {
   if (isNone(t)) {
@@ -88,10 +87,7 @@ export function unwrapOr(t: any, def: any): any {
   return t;
 }
 
-export function unwrapOrElse<T, E extends Error>(
-  result: Result<T, Error>,
-  def: () => T
-): T;
+export function unwrapOrElse<T, E>(result: Result<T, Error>, def: () => T): T;
 export function unwrapOrElse<T>(some: Some<T>, def: () => T): T;
 export function unwrapOrElse(t: any, def: any): any {
   if (isNone(t)) {

package/src/scope/describe.ts

@@ -1,5 +1,7 @@
+import { assert } from "../assert.js";
 import { getLogger } from "../log.js";
 import { TestCase } from "./scope.js";
+import * as state from "./state.js";
 
 export const beforeall = Symbol("beforeAll");
 export const beforeeach = Symbol("beforeEach");
@@ -11,9 +13,10 @@ const logger = getLogger("scope");
 const CASES: TestCase = {};
 let cases = [CASES];
 let totalCases = 0;
+let skippedCases = 0;
 
 function push(title: string) {
-  const next = (cases[0][title] = {});
+  const next = (cases[0][title] = cases[0][title] ?? {}) as TestCase;
   cases.unshift(next);
 }
 
@@ -29,6 +32,10 @@ export function getTotalCases() {
   return totalCases;
 }
 
+export function getSkippedCases() {
+  return skippedCases;
+}
+
 export function describe(title: string, block: Function) {
   logger.debug(`describe(${title})`);
   push(title);
@@ -38,10 +45,17 @@ export function describe(title: string, block: Function) {
 
 export function it(title: string, block: Function) {
   logger.debug(`it(${title})`);
+  assert(cases[0][title] == undefined, `Block already has test ${title}`);
   totalCases += 1;
   cases[0][title] = block;
 }
 
+it.skip = (title: string, _block: Function) => {
+  logger.debug(`it.skip(${title})`);
+  totalCases += 1;
+  skippedCases += 1;
+};
+
 export function beforeEach(fn: () => void) {
   cases[0][beforeeach] = fn;
 }
@@ -62,9 +76,5 @@ export function cleanState<State extends {}>(
   init: () => State,
   runner: (action: () => void) => void = beforeEach
 ): State {
-  const state = {};
-  runner(() => {
-    Object.assign(state, init());
-  });
-  return state as State;
+  return state.cleanState(init, runner);
 }

package/src/scope/display/console.ts

@@ -1,7 +1,7 @@
-import { getLogger } from "../../log.js";
-import { getTotalCases } from "../describe.js";
-import { flattenResults } from "../execute.js";
-import { TestResult } from "../scope.js";
+import { getLogger } from "../../log.js"
+import { getTotalCases } from "../describe.js"
+import { flattenResults } from "../execute.js"
+import { TestResult } from "../scope.js"
 
 const logger = getLogger("Scope Test Runner");
 

package/src/scope/display/dom.ts

@@ -1,13 +1,13 @@
-import { isHTMLLogger, makeHTMLLogger } from "../../components/logger.js";
-import { DOMElement, Updatable } from "../../dom/dom.js";
-import { DEFAULT_LOGGER, LEVEL } from "../../log.js";
-import { getTotalCases } from "../describe.js";
-import { flattenResults } from "../execute.js";
-import { TestResult } from "../scope.js";
+import { isHTMLLogger, makeHTMLLogger } from "../../components/logger.js"
+import { DOMElement } from "../../dom/dom.js"
+import { DEFAULT_LOGGER, LEVEL } from "../../log.js"
+import { getTotalCases } from "../describe.js"
+import { flattenResults } from "../execute.js"
+import { TestResult } from "../scope.js"
 
 export function displayStatistics(
   results: TestResult,
-  root: Updatable<DOMElement> = document.body as unknown as Updatable<DOMElement>
+  root: DOMElement = document.body as DOMElement
 ) {
   const { executed, failed } = results;
   const logger = (() => {

package/src/scope/display/junit.ts

@@ -1,6 +1,6 @@
-import { xml } from "../../dom/xml.js";
-import { FlatResult, flattenResults } from "../execute.js";
-import { TestResult } from "../scope.js";
+import { xml } from "../../dom/xml.js"
+import { FlatResult, flattenResults } from "../execute.js"
+import { TestResult } from "../scope.js"
 
 const cases = (results: TestResult) =>
   Object.entries(results).filter(

package/src/scope/execute.ts

@@ -4,13 +4,10 @@ import {
   beforeall,
   beforeeach,
   rootCases,
-} from "./describe.js";
-import { TestFailed, TestPassed, TestResult, TestSummary } from "./scope.js";
+} from "./describe.js"
+import { TestFailed, TestPassed, TestResult, TestSummary } from "./scope.js"
 
-export async function execute(
-  prefix = "",
-  cases = rootCases()
-): Promise<TestResult> {
+export async function execute(cases = rootCases()): Promise<TestResult> {
   const beforeallfn = cases[beforeall] ?? (() => {});
   const beforeeachfn = cases[beforeeach] ?? (() => {});
   const afterallfn = cases[afterall] ?? (() => {});
@@ -42,7 +39,7 @@ export async function execute(
         result[title] = { error: /** @type Error */ e };
       }
     } else if (block) {
-      const run = await execute(title, block);
+      const run = await execute(block);
       result.executed += run.executed;
       result.passed += run.passed;
       result.failed += run.failed;
@@ -87,7 +84,7 @@ function makeResult(
         stats: { executed: 1, failed: 1 },
       },
     ];
-  if ((result as TestPassed).passed) {
+  if ((result as TestPassed).passed === true) {
     return [{ test, stats: { executed: 1, failed: 0 } }];
   }
   return flattenResults(result as TestResult, test);

package/src/scope/expect.ts

@@ -1,5 +1,6 @@
-import { assert } from "../assert.js";
-import { equals } from "../equal.js";
+import { assert } from "../assert.js"
+import { display } from "../display.js"
+import { equals } from "../equal.js"
 
 export class Matcher<T> {
   actual: T;
@@ -15,13 +16,13 @@ export class Matcher<T> {
     assert(this.actual === expected, () => `${this.actual} !== ${expected}`);
   }
 
-  toEqual(expected: T) {
+  toEqual(expected: T, partial = false) {
     assert(
-      equals(this.actual, expected),
+      equals(this.actual, expected, partial),
       () =>
-        `Objects are not equivalent: ${JSON.stringify(
-          this.actual
-        )}, ${JSON.stringify(expected)}`
+        `Objects are not equivalent: ${display(this.actual)}, ${display(
+          expected
+        )}`
     );
   }
 
@@ -50,11 +51,11 @@ export class Matcher<T> {
       // @ts-expect-error
       const actual: Partial<T> = this.actual[k];
       assert(
-        equals(actual, v),
+        equals(actual, v, true),
         () =>
-          `Comparing ${k}, properties not equal: ${JSON.stringify(
-            actual
-          )}, ${JSON.stringify(v)}`
+          `Comparing ${k}, properties not equal: ${display(actual)}, ${display(
+            v
+          )}`
       );
     }
   }

package/src/scope/state.ts

@@ -0,0 +1,10 @@
+export function cleanState<State extends {}>(
+  init: () => State,
+  runner: (action: () => void) => void
+): State {
+  const state = {};
+  runner(() => {
+    Object.assign(state, init());
+  });
+  return state as State;
+}

package/src/server/http/css.ts

@@ -0,0 +1,65 @@
+import * as fs from "fs/promises";
+import * as path from "path";
+import { contentResponse } from "./response.js";
+import { MiddlewareFactory } from "./index.js";
+// @ts-ignore
+import sass from "sass";
+const { compileStringAsync } = sass;
+
+function render(source: string) {
+  // Replace `from "@scope` with `from "/@scope`, for browsers
+  // source = source
+  //   .replaceAll(`from "@`, 'from "/@')
+  //   .replaceAll(`import("@`, 'import("/@');
+  return contentResponse(source, "text/css");
+}
+
+async function compile(
+  filename: string,
+  root: string,
+  vars: string
+): Promise<string> {
+  vars = vars.substring(1).replaceAll("=", ":");
+  filename = filename.replaceAll("\\", "/"); // Normalize for dart-sass
+  const sassString = `// Using variables: ${vars}\n${vars};\n@import "${filename}";`;
+  return (await compileStringAsync(sassString, { loadPaths: [root] })).css;
+}
+
+/**
+ * Serves .css files statically. Finds .sass files and transpiles them to css.
+ */
+export const cssFileServer: MiddlewareFactory =
+  async ({ root, scopes = {} }) =>
+  async (req) => {
+    const Url = new URL(req.url ?? "/", `http://${req.headers.host}`);
+    if (Url.pathname.endsWith(".css")) {
+      let scope = Object.entries(scopes).find(([s]) =>
+        Url.pathname.startsWith(`/${s}`)
+      );
+      // Expand url with found scope
+      Url.protocol = "file";
+      let url = scope ? Url.pathname.replace(scope[0], scope[1]) : Url.pathname;
+      let filename = path.join(root, url);
+      try {
+        const stat = await fs.stat(filename);
+        if (stat.isFile()) {
+          const css = (await fs.readFile(filename)).toString("utf-8");
+          return render(css);
+        }
+      } catch {}
+
+      filename = filename.replace(/\.css$/, ".scss");
+      try {
+        const stat = await fs.stat(filename);
+        if (stat.isFile()) {
+          const css = await compile(
+            filename.replace(root, "."),
+            root,
+            Url.search
+          );
+          return render(css);
+        }
+      } catch {}
+    }
+    return undefined;
+  };

package/src/server/http/index.ts

@@ -10,6 +10,7 @@ import { AddressInfo } from "net";
 import * as path from "path";
 import { info } from "../../log.js";
 import { findIndex } from "./apps.js";
+import { cssFileServer } from "./css.js";
 import { fileResponse } from "./response.js";
 import { sitemap } from "./sitemap.js";
 import { staticFileServer } from "./static.js";
@@ -48,6 +49,7 @@ const notFound: MiddlewareFactory =
 const BASE_MIDDLEWARES: MiddlewareFactory[] = [
   sitemap,
   tsFileServer,
+  cssFileServer,
   staticFileServer,
   findIndex,
   notFound,
@@ -65,8 +67,8 @@ const sendContent = async (
   res: ServerResponse,
   { content, contentType, contentLength }: StaticResponse
 ) => {
-  res.setHeader("content-length", `${contentLength}`);
-  res.setHeader("content-type", contentType);
+  res.setHeader("Content-Length", `${contentLength}`);
+  res.setHeader("Content-Type", contentType);
   await res.write(content);
   res.end();
   return true;

package/src/server/http/response.ts

@@ -1,6 +1,6 @@
 import { Stats } from "fs";
 import * as fs from "fs/promises";
-import { StaticMiddleware, StaticResponse } from ".";
+import { StaticResponse } from ".";
 
 const MIME_TYPES: Record<string, string> = {
   js: "text/javascript",
@@ -18,7 +18,9 @@ const MIME_TYPES: Record<string, string> = {
 };
 
 const mime = (basename: string) => {
-  const extension = basename.substr(basename.lastIndexOf(".") + 1);
+  const extension = basename
+    .substring(basename.lastIndexOf(".") + 1)
+    .toLowerCase();
   return MIME_TYPES[extension] ?? "application/octet-stream";
 };
 
@@ -34,13 +36,14 @@ export const fileResponse =
     return { status, contentType, contentLength, content };
   };
 
+const CHARSET = "utf-8";
 export const contentResponse =
   (content: string, contentType: string, status: 200 | 404 | 500 = 200) =>
   async (): Promise<StaticResponse> => {
-    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/src/server/http/sitemap.ts

@@ -1,7 +1,7 @@
 import * as fs from "fs/promises";
 import * as path from "path";
 import { info } from "../../log.js";
-import { MiddlewareFactory, StaticMiddleware } from "./index.js";
+import { MiddlewareFactory } from "./index.js";
 import { contentResponse } from "./response.js";
 
 const findSiteMap = async (root: string, prefix = root) => {

package/src/server/main.ts

@@ -9,5 +9,12 @@ const FLAGS = parse(process.argv);
 import { makeServer } from "./http/index.js";
 import * as path from "node:path";
 
-const server = await makeServer({ root: path.join(process.cwd(), "src") });
-server.listen(FLAGS.asNumber("port", 8080), FLAGS.asString("host", "0.0.0.0"));
+async function main() {
+  const server = await makeServer({ root: path.join(process.cwd(), "src") });
+  server.listen(
+    FLAGS.asNumber("port", 8080),
+    FLAGS.asString("host", "0.0.0.0")
+  );
+}
+
+main();

package/src/test.mjs

@@ -5,25 +5,29 @@ import { execute } from "./scope/execute.js";
 import { asXML } from "./scope/display/junit.js";
 import { onConsole } from "./scope/display/console.js";
 
-await import("./test_all.js");
+async function main() {
+  await import("./test_all.js");
 
-(async function () {
-  const results = await execute();
+  (async function () {
+    const results = await execute();
 
-  const FLAGS = parse(process.argv);
+    const FLAGS = parse(process.argv);
 
-  switch (FLAGS.asString("mode", "console")) {
-    case "junit":
-      const xml = asXML(results);
-      console.log(xml);
-      break;
-    case "console":
-    default:
-      onConsole(results);
-      break;
-  }
+    switch (FLAGS.asString("mode", "console")) {
+      case "junit":
+        const xml = asXML(results);
+        console.log(xml);
+        break;
+      case "console":
+      default:
+        onConsole(results);
+        break;
+    }
 
-  if (results.failed > 0) {
-    process.exit(1);
-  }
-})();
+    if (results.failed > 0) {
+      process.exit(1);
+    }
+  })();
+}
+
+main();

package/src/test_all.ts

@@ -2,15 +2,6 @@
 // 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"),
-]);
-
 describe("Test executor", () => {
   it("matches equality", () => {
     expect(1).toBe(1);
@@ -20,3 +11,23 @@ describe("Test executor", () => {
     expect(() => expect(1).toBe(2)).toThrow();
   });
 });
+
+import "./context.test.js";
+import "./diff.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";
+import "./observable/observable.test.js";
+
+import * as components from "./components/test.js";
+import * as dom from "./dom/test.js";
+
+if (process?.env.CI?.toLowerCase() !== "true") {
+  (async () => {
+    await components.loadTests();
+    await dom.loadTests();
+  })();
+}