npm - @davidsouther/jiffies - Versions diffs - 1.0.0-beta.1 - Mend

@davidsouther/jiffies 1.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (221) hide show

package/README.md +60 -0
package/build/assert.d.ts +23 -0
package/build/assert.js +33 -0
package/build/case.d.ts +1 -0
package/build/case.js +5 -0
package/build/components/button_bar.d.ts +8 -0
package/build/components/button_bar.js +16 -0
package/build/components/index.d.ts +1 -0
package/build/components/index.js +1 -0
package/build/components/inline_edit.d.ts +12 -0
package/build/components/inline_edit.js +48 -0
package/build/components/logger.d.ts +7 -0
package/build/components/logger.js +22 -0
package/build/components/select.d.ts +13 -0
package/build/components/select.js +3 -0
package/build/components/test.d.ts +1 -0
package/build/components/test.js +2 -0
package/build/components/virtual_scroll.d.ts +41 -0
package/build/components/virtual_scroll.js +94 -0
package/build/components/virtual_scroll.test.d.ts +1 -0
package/build/components/virtual_scroll.test.js +21 -0
package/build/context.d.ts +15 -0
package/build/context.js +43 -0
package/build/context.test.d.ts +1 -0
package/build/context.test.js +46 -0
package/build/debounce.d.ts +1 -0
package/build/debounce.js +7 -0
package/build/display.d.ts +5 -0
package/build/display.js +3 -0
package/build/dom/css/border.d.ts +11 -0
package/build/dom/css/border.js +27 -0
package/build/dom/css/constants.d.ts +31 -0
package/build/dom/css/constants.js +28 -0
package/build/dom/css/core.d.ts +5 -0
package/build/dom/css/core.js +24 -0
package/build/dom/css/fstyle.d.ts +5 -0
package/build/dom/css/fstyle.js +32 -0
package/build/dom/css/sizing.d.ts +5 -0
package/build/dom/css/sizing.js +10 -0
package/build/dom/dom.d.ts +27 -0
package/build/dom/dom.js +94 -0
package/build/dom/fc.d.ts +14 -0
package/build/dom/fc.js +35 -0
package/build/dom/fc.test.d.ts +1 -0
package/build/dom/fc.test.js +21 -0
package/build/dom/form/form.app.d.ts +1 -0
package/build/dom/form/form.app.js +23 -0
package/build/dom/form/form.d.ts +25 -0
package/build/dom/form/form.js +25 -0
package/build/dom/form/form.test.d.ts +0 -0
package/build/dom/form/form.test.js +1 -0
package/build/dom/html.d.ts +117 -0
package/build/dom/html.js +114 -0
package/build/dom/html.test.d.ts +1 -0
package/build/dom/html.test.js +58 -0
package/build/dom/router/link.d.ts +6 -0
package/build/dom/router/link.js +3 -0
package/build/dom/router/router.d.ts +12 -0
package/build/dom/router/router.js +49 -0
package/build/dom/svg.d.ts +64 -0
package/build/dom/svg.js +65 -0
package/build/dom/test.d.ts +1 -0
package/build/dom/test.js +2 -0
package/build/dom/types/css.d.ts +6612 -0
package/build/dom/types/css.js +23 -0
package/build/dom/types/dom.d.ts +0 -0
package/build/dom/types/dom.js +1 -0
package/build/dom/types/html.d.ts +616 -0
package/build/dom/types/html.js +1 -0
package/build/dom/xml.d.ts +1 -0
package/build/dom/xml.js +5 -0
package/build/equal.d.ts +4 -0
package/build/equal.js +22 -0
package/build/equal.test.d.ts +1 -0
package/build/equal.test.js +20 -0
package/build/flags.d.ts +7 -0
package/build/flags.js +48 -0
package/build/flags.test.d.ts +1 -0
package/build/flags.test.js +35 -0
package/build/generator.d.ts +1 -0
package/build/generator.js +10 -0
package/build/generator.test.d.ts +1 -0
package/build/generator.test.js +24 -0
package/build/index.d.ts +13 -0
package/build/index.js +13 -0
package/build/is_browser.d.ts +1 -0
package/build/is_browser.js +1 -0
package/build/loader.d.mts +22 -0
package/build/loader.mjs +35 -0
package/build/lock.d.ts +1 -0
package/build/lock.js +23 -0
package/build/lock.test.d.ts +1 -0
package/build/lock.test.js +16 -0
package/build/log.d.ts +26 -0
package/build/log.js +34 -0
package/build/parcel_resolver.d.ts +3 -0
package/build/parcel_resolver.js +19 -0
package/build/range.d.ts +1 -0
package/build/range.js +7 -0
package/build/result.d.ts +31 -0
package/build/result.js +65 -0
package/build/result.test.d.ts +1 -0
package/build/result.test.js +71 -0
package/build/safe.d.ts +1 -0
package/build/safe.js +10 -0
package/build/scope/describe.d.ts +14 -0
package/build/scope/describe.js +52 -0
package/build/scope/display/console.d.ts +2 -0
package/build/scope/display/console.js +21 -0
package/build/scope/display/dom.d.ts +3 -0
package/build/scope/display/dom.js +26 -0
package/build/scope/display/junit.d.ts +2 -0
package/build/scope/display/junit.js +17 -0
package/build/scope/execute.d.ts +12 -0
package/build/scope/execute.js +85 -0
package/build/scope/expect.d.ts +23 -0
package/build/scope/expect.js +107 -0
package/build/scope/fix.d.ts +4 -0
package/build/scope/fix.js +22 -0
package/build/scope/index.d.ts +3 -0
package/build/scope/index.js +3 -0
package/build/scope/scope.d.ts +17 -0
package/build/scope/scope.js +1 -0
package/build/server/http/apps.d.ts +5 -0
package/build/server/http/apps.js +23 -0
package/build/server/http/index.d.ts +21 -0
package/build/server/http/index.js +71 -0
package/build/server/http/response.d.ts +4 -0
package/build/server/http/response.js +37 -0
package/build/server/http/sitemap.d.ts +2 -0
package/build/server/http/sitemap.js +42 -0
package/build/server/http/static.d.ts +2 -0
package/build/server/http/static.js +21 -0
package/build/server/http/typescript.d.ts +5 -0
package/build/server/http/typescript.js +40 -0
package/build/server/main.d.ts +2 -0
package/build/server/main.js +9 -0
package/build/test.d.mts +2 -0
package/build/test.mjs +23 -0
package/build/test_all.d.ts +1 -0
package/build/test_all.js +19 -0
package/build/transpile.d.mts +3 -0
package/build/transpile.mjs +18 -0
package/package.json +36 -0
package/src/404.html +14 -0
package/src/assert.ts +50 -0
package/src/case.ts +5 -0
package/src/components/_notes +33 -0
package/src/components/button_bar.ts +38 -0
package/src/components/inline_edit.ts +77 -0
package/src/components/logger.ts +36 -0
package/src/components/select.ts +22 -0
package/src/components/test.js +2 -0
package/src/components/virtual_scroll.test.ts +27 -0
package/src/components/virtual_scroll.ts +194 -0
package/src/context.test.ts +58 -0
package/src/context.ts +62 -0
package/src/debounce.ts +7 -0
package/src/display.ts +12 -0
package/src/dom/README.md +102 -0
package/src/dom/css/border.ts +47 -0
package/src/dom/css/constants.ts +34 -0
package/src/dom/css/core.ts +28 -0
package/src/dom/css/fstyle.ts +42 -0
package/src/dom/css/sizing.ts +11 -0
package/src/dom/dom.ts +153 -0
package/src/dom/fc.test.ts +43 -0
package/src/dom/fc.ts +79 -0
package/src/dom/form/form.app.ts +50 -0
package/src/dom/form/form.test.ts +0 -0
package/src/dom/form/form.ts +53 -0
package/src/dom/form/index.html +14 -0
package/src/dom/html.test.ts +72 -0
package/src/dom/html.ts +129 -0
package/src/dom/router/link.ts +14 -0
package/src/dom/router/router.ts +69 -0
package/src/dom/svg.ts +77 -0
package/src/dom/test.ts +2 -0
package/src/dom/types/css.ts +10106 -0
package/src/dom/types/dom.ts +0 -0
package/src/dom/types/html.ts +631 -0
package/src/dom/xml.ts +12 -0
package/src/equal.test.ts +23 -0
package/src/equal.ts +32 -0
package/src/favicon.ico +0 -0
package/src/flags.test.ts +43 -0
package/src/flags.ts +53 -0
package/src/generator.test.ts +26 -0
package/src/generator.ts +12 -0
package/src/hooks/_notes +3 -0
package/src/index.html +79 -0
package/src/is_browser.js +1 -0
package/src/loader.mjs +45 -0
package/src/lock.test.ts +17 -0
package/src/lock.ts +22 -0
package/src/log.ts +61 -0
package/src/observable/_notes +13 -0
package/src/observable/observable._js +175 -0
package/src/range.ts +7 -0
package/src/result.test.ts +98 -0
package/src/result.ts +107 -0
package/src/safe.ts +12 -0
package/src/scope/describe.ts +70 -0
package/src/scope/display/console.ts +26 -0
package/src/scope/display/dom.ts +36 -0
package/src/scope/display/junit.ts +67 -0
package/src/scope/execute.ts +108 -0
package/src/scope/expect.ts +170 -0
package/src/scope/fix.ts +29 -0
package/src/scope/index.ts +11 -0
package/src/scope/scope.ts +21 -0
package/src/server/http/apps.ts +26 -0
package/src/server/http/index.ts +119 -0
package/src/server/http/response.ts +47 -0
package/src/server/http/sitemap.ts +48 -0
package/src/server/http/static.ts +27 -0
package/src/server/http/typescript.ts +46 -0
package/src/server/main.ts +13 -0
package/src/test.mjs +29 -0
package/src/test_all.ts +22 -0
package/src/transpile.mjs +29 -0

package/build/test.mjs ADDED Viewed

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+import { parse } from "./flags.js";
+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 () {
+    const results = await execute();
+    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;
+    }
+    if (results.failed > 0) {
+        process.exit(1);
+    }
+})();

package/build/test_all.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/build/test_all.js ADDED Viewed

@@ -0,0 +1,19 @@
+// 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"),
+]);
+describe("Test executor", () => {
+    it("matches equality", () => {
+        expect(1).toBe(1);
+    });
+    it("fails on inequality", () => {
+        expect(() => expect(1).toBe(2)).toThrow();
+    });
+});

package/build/transpile.d.mts ADDED Viewed

@@ -0,0 +1,3 @@
+export function transpile(url: string, get: () => Promise<{
+    toString(): string;
+}>): Promise<any>;

package/build/transpile.mjs ADDED Viewed

@@ -0,0 +1,18 @@
+// @ts-ignore
+import ts from "typescript";
+const compilerOptions = {
+    target: ts.ScriptTarget.ESNext,
+    module: ts.ModuleKind.ESNext,
+    inlineSourceMap: true,
+    inlineSources: true,
+};
+const tsmap = new Map();
+export async function transpile(
+/** @type string */ url,
+/** @type {() => Promise<{toString(): string}>} */ get) {
+    if (!tsmap.has(url) || true) {
+        const source = ts.transpile((await get()).toString(), compilerOptions, url, undefined, url);
+        tsmap.set(url, source);
+    }
+    return tsmap.get(url);
+}

package/package.json ADDED Viewed

@@ -0,0 +1,36 @@
+{
+  "name": "@davidsouther/jiffies",
+  "version": "1.0.0-beta.1",
+  "private": false,
+  "displayName": "JEFRi Jiffies",
+  "type": "module",
+  "exports": {
+    "./*": "./build/*"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./build/*"
+      ]
+    }
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "scripts": {
+    "node": "node --experimental-loader ./src/loader.mjs",
+    "start": "npm run node ./src/server/main.js",
+    "test": "npm run node ./src/test.mjs",
+    "ci": "node --experimental-loader ./src/loader.mjs ./src/test.mjs --mode=junit",
+    "lint": "npx prettier . --check",
+    "check": "npx tsc --noEmit",
+    "format": "npx prettier . --write",
+    "build": "npx tsc",
+    "watch": "npx tsc --watch",
+    "all": "npm run lint && npm run test && npm run build"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.24",
+    "typescript": "^4.7.0-dev.20220415"
+  }
+}

package/src/404.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Not Found</title>
+    <style>
+      * {
+        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Not Found</h1>
+  </body>
+</html>

package/src/assert.ts ADDED Viewed

@@ -0,0 +1,50 @@
+type AssertMessage = string | (() => string);
+/**
+ * Throw an error when a condition is not met.
+ */
+export function assert(
+  condition: boolean,
+  message: AssertMessage = "Assertion failed"
+): void | never {
+  if (!condition) {
+    throw new Error(message instanceof Function ? message() : message);
+  }
+}
+/**
+ * Given a value, return it if it is not null nor undefined. Otherwise throw an
+ * error.
+ *
+ * @template T
+ * @returns {NonNullable<T>}
+ */
+export function assertExists<T>(
+  t: T,
+  message: AssertMessage = "Assertion failed: value does not exist"
+): NonNullable<T> {
+  assert(t != null, message);
+  return t as NonNullable<T>;
+}
+/**
+ * @param {*} n
+ * @returns string
+ */
+export function assertString(
+  n: unknown,
+  message: AssertMessage = () => `Assertion failed: ${n} is not a string`
+): string {
+  assert(typeof n == "string", message);
+  return n as string;
+}
+/**
+ * Compile time assertion that no value will used at this point in control flow.
+ */
+export function checkExhaustive(
+  value: never,
+  message: AssertMessage = `Unexpected value ${value}`
+): never {
+  throw new Error(message instanceof Function ? message() : message);
+}

package/src/case.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export function dashCase(identifier: string) {
+  return identifier
+    .replace(/([a-z])([A-Z])/g, (_, a, b) => `${a}-${b.toLowerCase()}`)
+    .replace(/ ([A-Z])/g, (_, b) => `-${b.toLowerCase()}`);
+}

package/src/components/_notes ADDED Viewed

@@ -0,0 +1,33 @@
+Nav
+  ButtonBar
+Form
+  FormGroup
+  Input
+  Select
+    CheckGroup
+    RadioGroup
+  Textarea
+  Switch
+  Button
+Datatable
+  Column
+  Header
+  Row
+  Cell
+  Sort
+Virtual Scroll
+  Logs Viewer
+Chart
+  Axis
+  Legend
+  Bar
+  Scatter
+  Line
+Graph
+  Node
+  Segment

package/src/components/button_bar.ts ADDED Viewed

@@ -0,0 +1,38 @@
+import { Display, display } from "../display.js";
+import { FC } from "../dom/fc.js";
+import { a, li, ul } from "../dom/html.js";
+const ButtonBar = FC<{
+  // T extends Display
+  // @ts-ignore TODO(TFC)
+  value: T;
+  // @ts-ignore TODO(TFC)
+  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);
+              },
+            },
+          },
+          display(option)
+        )
+      )
+    )
+  )
+);
+export default ButtonBar;

package/src/components/inline_edit.ts ADDED Viewed

@@ -0,0 +1,77 @@
+import { width } from "../dom/css/sizing.js";
+import { FC, State } from "../dom/fc.js";
+import { input, span } from "../dom/html.js";
+const Mode = { VIEW: 0, EDIT: 1 };
+export interface InlineEditState {
+  mode: number;
+  value: string;
+}
+export const InlineEdit = FC<
+  {
+    mode?: number;
+    value: string;
+    events: {
+      change: (value: string) => void;
+    };
+  },
+  InlineEditState
+>("inline-edit", (el, { mode = Mode.VIEW, value, events }) => {
+  const state = (el[State] ??= { mode, value });
+  const render = () => {
+    switch (state.mode) {
+      case Mode.EDIT:
+        return edit();
+      case Mode.VIEW:
+        return view();
+      default:
+        return span();
+    }
+  };
+  const view = () =>
+    span(
+      {
+        style: { cursor: "text", ...width("full", "inline") },
+        events: {
+          click: () => {
+            state.mode = Mode.EDIT;
+            el.update(render());
+          },
+        },
+      },
+      state.value ?? ""
+    );
+  const edit = () => {
+    const edit = span(
+      { style: { display: "block", position: "relative" } },
+      input({
+        style: {
+          zIndex: "10",
+          position: "absolute",
+          left: "0",
+          marginTop: "-0.375rem",
+        },
+        events: {
+          blur: ({ target }) =>
+            events.change((target as HTMLInputElement)?.value ?? ""),
+        },
+        type: "text",
+        value: state.value,
+      }),
+      "\u00a0" // Hack to get the span to take up space
+    );
+    setTimeout(() => {
+      edit.dispatchEvent(new Event("focus"));
+    });
+    return edit;
+  };
+  return render();
+});
+export default InlineEdit;

package/src/components/logger.ts ADDED Viewed

@@ -0,0 +1,36 @@
+import { display, Display } from "../display.js";
+import { DOMElement, Updatable } from "../dom/dom.js";
+import { div, span, ul, li, pre, code } from "../dom/html.js";
+import { LEVEL, Logger } from "../log.js";
+export interface HTMLLogger extends Logger {
+  root: Updatable<DOMElement>;
+}
+export function isHTMLLogger(logger: Logger): logger is HTMLLogger {
+  return (logger as HTMLLogger).root != undefined;
+}
+export function makeHTMLLogger(name: string): HTMLLogger {
+  let log: Updatable<DOMElement>;
+  const root = div(div(span(name)), (log = ul()));
+  const logger: Partial<HTMLLogger> = { level: LEVEL.INFO, root };
+  function append(message: string): void {
+    log.appendChild(li(pre(code(message))));
+  }
+  const logAt =
+    (level: number) =>
+    (message: Display): void =>
+      level >= (logger.level ?? LEVEL.ERROR)
+        ? append(display(message))
+        : undefined;
+  logger.debug = logAt(LEVEL.VERBOSE);
+  logger.info = logAt(LEVEL.INFO);
+  logger.warn = logAt(LEVEL.WARN);
+  logger.error = logAt(LEVEL.ERROR);
+  return logger as HTMLLogger;
+}

package/src/components/select.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import { EventHandler } from "../dom/dom.js";
+import { FC } from "../dom/fc.js";
+import { option, select } from "../dom/html.js";
+export const Select = FC<{
+  name: string;
+  value: string;
+  events: {
+    change: EventHandler;
+  };
+  disabled: boolean;
+  options: [string, string][];
+}>(
+  "jiffies-select",
+  (el, { name, events: { change }, disabled, value, options }) =>
+    select(
+      { name, events: { change }, disabled },
+      ...options.map(([v, name]) =>
+        option({ value: v, selected: value === v }, `${name}`)
+      )
+    )
+);

package/src/components/test.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ await import("./virtual_scroll.test.js");

package/src/components/virtual_scroll.test.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import { State } from "../dom/fc.js";
+import { div } from "../dom/html.js";
+import { describe, it, expect } from "../scope/index.js";
+import VirtualScroll, {
+  arrayAdapter,
+  VirtualScrollProps,
+} from "./virtual_scroll.js";
+describe("VirtualScroll", () => {
+  it("tracks scroll position", () => {
+    const data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+    const props: VirtualScrollProps<number, HTMLDivElement> = {
+      settings: { count: 3, startIndex: 2 },
+      get: arrayAdapter(data),
+      row: (i) => div(`${i}`),
+    };
+    // @ts-ignore TODO(TFC)
+    const scroll = VirtualScroll(props);
+    expect(scroll[State].bufferedItems).toBe(9);
+    expect(scroll[State].data).toEqual([0, 1, 2, 3, 4, 5, 6, 7, 8]);
+    //expect(scroll.state.topPaddingHeight).toBe(0);
+    expect(scroll[State].viewportHeight).toBe(60);
+    //expect(scroll.state.totalHeight).toBe(200);
+  });
+});

package/src/components/virtual_scroll.ts ADDED Viewed

@@ -0,0 +1,194 @@
+import { debounce } from "../debounce.js";
+import { FC, State } from "../dom/fc.js";
+import { div, UHTMLElement } from "../dom/html.js";
+export interface VirtualScrollSettings {
+  minIndex: number;
+  maxIndex: number;
+  startIndex: number;
+  itemHeight: number; // In pixels
+  count: number;
+  tolerance: number;
+}
+export interface VirtualScrollDataAdapter<T> {
+  (offset: number, limit: number): Iterable<T>;
+}
+export function arrayAdapter<T>(data: T[]): VirtualScrollDataAdapter<T> {
+  return (offset, limit) => data.slice(offset, offset + limit);
+}
+export interface VirtualScrollProps<T, U extends HTMLElement> {
+  settings: Partial<VirtualScrollSettings>;
+  get: VirtualScrollDataAdapter<T>;
+  row: (t: T) => UHTMLElement<U>;
+}
+export function fillVirtualScrollSettings(
+  settings: Partial<VirtualScrollSettings>
+): VirtualScrollSettings {
+  const {
+    minIndex = 0,
+    maxIndex = 1,
+    startIndex = 0,
+    itemHeight = 20,
+    count = maxIndex - minIndex + 1,
+    tolerance = count,
+  } = settings;
+  return { minIndex, maxIndex, startIndex, itemHeight, count, tolerance };
+}
+export function initialState<T>(
+  settings: VirtualScrollSettings
+): VirtualScrollState<T> {
+  // From Denis Hilt, https://blog.logrocket.com/virtual-scrolling-core-principles-and-basic-implementation-in-react/
+  const { minIndex, maxIndex, startIndex, itemHeight, count, tolerance } =
+    settings;
+  const bufferedItems = count + 2 * tolerance;
+  const itemsAbove = Math.max(0, startIndex - tolerance - minIndex);
+  const viewportHeight = count * itemHeight;
+  const totalHeight = (maxIndex - minIndex + 1) * itemHeight;
+  const toleranceHeight = tolerance * itemHeight;
+  const bufferHeight = viewportHeight + 2 * toleranceHeight;
+  const topPaddingHeight = itemsAbove * itemHeight;
+  const bottomPaddingHeight = totalHeight - (topPaddingHeight + bufferHeight);
+  return {
+    scrollTop: 0,
+    settings,
+    viewportHeight,
+    totalHeight,
+    toleranceHeight,
+    bufferedItems,
+    topPaddingHeight,
+    bottomPaddingHeight,
+    data: [],
+    rows: [],
+  };
+}
+export function getData<T>(
+  minIndex: number,
+  maxIndex: number,
+  offset: number,
+  limit: number,
+  get: VirtualScrollDataAdapter<T>
+): T[] {
+  const start = Math.max(0, minIndex, offset);
+  const end = Math.min(maxIndex, offset + limit - 1);
+  const data = get(start, end - start);
+  return [...data];
+}
+export function doScroll<T>(
+  scrollTop: number,
+  state: VirtualScrollState<T>,
+  get: VirtualScrollDataAdapter<T>
+): {
+  scrollTop: number;
+  topPaddingHeight: number;
+  bottomPaddingHeight: number;
+  data: T[];
+} {
+  const {
+    totalHeight,
+    toleranceHeight,
+    bufferedItems,
+    settings: { itemHeight, minIndex, maxIndex },
+  } = state;
+  const index =
+    minIndex + Math.floor((scrollTop - toleranceHeight) / itemHeight);
+  const data = getData(minIndex, maxIndex, index, bufferedItems, get);
+  const topPaddingHeight = Math.max((index - minIndex) * itemHeight, 0);
+  const bottomPaddingHeight = Math.max(
+    totalHeight - (topPaddingHeight + data.length * itemHeight),
+    0
+  );
+  return { scrollTop, topPaddingHeight, bottomPaddingHeight, data };
+}
+interface VirtualScrollState<T, U extends HTMLElement = HTMLElement> {
+  settings: VirtualScrollSettings;
+  scrollTop: number; // px
+  bufferedItems: number; // count
+  totalHeight: number; // px
+  viewportHeight: number; // px
+  topPaddingHeight: number; // px
+  bottomPaddingHeight: number; // px
+  toleranceHeight: number; // px
+  data: T[];
+  rows: UHTMLElement<U>[];
+}
+// export interface VirtualScroll<T, U extends HTMLElement> {
+//   state: VirtualScrollState<T>;
+//   rows: UHTMLElement<U>[];
+// }
+export const VirtualScroll = FC<
+  VirtualScrollProps<unknown, HTMLElement>,
+  VirtualScrollState<unknown, HTMLElement>
+>("virtual-scroll", (element, props) => {
+  const settings = fillVirtualScrollSettings(props.settings);
+  const state = (element[State] = {
+    ...initialState(settings),
+    ...element[State],
+  });
+  const scrollTo = (
+    { target }: { target?: { scrollTop: number } } = { target: state }
+  ) => {
+    const scrollTop = target?.scrollTop ?? state.topPaddingHeight;
+    const updatedSate = {
+      ...state,
+      ...doScroll(scrollTop, state, props.get),
+    };
+    setState(updatedSate);
+  };
+  const viewportElement = div({
+    style: { height: `${state.viewportHeight}px`, overflowY: "scroll" },
+    events: { scroll: debounce(scrollTo, 0) },
+  });
+  setTimeout(() => {
+    viewportElement.scroll({ top: state.scrollTop });
+  });
+  const setState = (newState: VirtualScrollState<unknown>) => {
+    state.scrollTop = newState.scrollTop;
+    state.topPaddingHeight = newState.topPaddingHeight;
+    state.bottomPaddingHeight = newState.bottomPaddingHeight;
+    state.data = newState.data;
+    element[State].rows = state.data.map(props.row);
+    viewportElement.update(
+      div({
+        class: "VirtualScroll__topPadding",
+        style: { height: `${state.topPaddingHeight}px` },
+      }),
+      ...(element[State].rows ?? []).map((row, i) =>
+        div(
+          {
+            class: `VirtualScroll__item_${i}`,
+            style: { height: `${settings.itemHeight}px` },
+          },
+          row
+        )
+      ),
+      div({
+        class: "VirtualScroll__bottomPadding",
+        style: { height: `${state.bottomPaddingHeight}px` },
+      })
+    );
+  };
+  scrollTo();
+  return viewportElement;
+});
+export default VirtualScroll;

package/src/context.test.ts ADDED Viewed

@@ -0,0 +1,58 @@
+import { Context, Enter, Exit, using } from "./context.js";
+import { Err, isErr, isOk, Ok, unwrap } from "./result.js";
+import { describe, it } from "./scope/describe.js";
+import { expect } from "./scope/expect.js";
+describe("Context", () => {
+  it("performs an operation using a context", () => {
+    const context = TestContext();
+    const result = using(context, () => Ok(5));
+    expect(unwrap(result)).toBe(5);
+    expect(context.initialized).toBe(true);
+    expect(context.completed).toBe(true);
+  });
+  it("reports the result of a thrown error", () => {
+    const context = TestContext();
+    const result = using(context, () => {
+      throw new Error("Failed");
+    });
+    expect(isErr(result)).toBe(true);
+    expect(Err(result as Err<Error>)).toMatchObject({
+      message: "Failed",
+    });
+  });
+  it("passes the context to the operation", () => {
+    const op = using(TestContext, ({ initialized, completed }) => ({
+      initialized,
+      completed,
+    }));
+    expect(isOk(op)).toBe(true);
+    const { completed, initialized } = unwrap(op);
+    expect(initialized).toBe(true);
+    expect(completed).toBe(false);
+  });
+});
+interface TestContext {
+  initialized: boolean;
+  completed: boolean;
+}
+function TestContext(): Context & TestContext {
+  const context = {
+    [Enter]: () => {
+      context.initialized = true;
+    },
+    [Exit]: () => {
+      context.completed = true;
+    },
+    initialized: false,
+    completed: false,
+  };
+  return context;
+}