@davidsouther/jiffies 1.0.0-beta.1 → 1.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,12 +1,12 @@
 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 isSome = <T>(s: Option<T>): s is Some<T> => s != null;
@@ -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/execute.ts

@@ -87,7 +87,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,4 +1,5 @@
 import { assert } from "../assert.js";
+import { display } from "../display.js";
 import { equals } from "../equal.js";
 
 export class Matcher<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/server/http/css.ts

@@ -0,0 +1,63 @@
+import * as fs from "fs/promises";
+import * as path from "path";
+import { contentResponse } from "./response.js";
+import { MiddlewareFactory } from "./index.js";
+import sass from "sass";
+import { error, info } from "../../log.js";
+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("=", ":");
+  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
+      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/test_all.ts

@@ -2,14 +2,13 @@
 // 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", () => {