@familyboat/mini-framework 0.1.0

package/lib/toast/index.ts

@@ -0,0 +1,145 @@
+import { fadeIn, fadeOut } from "../animate";
+import "./index.css";
+
+export type ToastPosition = "top" | "bottom";
+export type ToastKind = "info" | "success" | "error";
+
+export type ToastProps = {
+  message: string;
+  duration?: number;
+  position?: ToastPosition;
+  kind?: ToastKind;
+};
+
+export class Toast {
+  private static readonly defaultDuration = 3000;
+  private static containers = new Map<ToastPosition, HTMLElement>();
+
+  private _props: Required<Pick<ToastProps, "duration" | "position" | "kind">> & Pick<ToastProps, "message">;
+  private _root: HTMLElement;
+  private _container: HTMLElement;
+  private _timer?: ReturnType<typeof setTimeout>;
+  private _destroyed = false;
+  private _operationId = 0;
+
+  private constructor(props: ToastProps) {
+    this._props = {
+      message: props.message,
+      duration: props.duration ?? Toast.defaultDuration,
+      position: props.position ?? "top",
+      kind: props.kind ?? "info",
+    };
+
+    this._container = Toast.getContainer(this._props.position);
+    this._root = document.createElement("div");
+    this._root.classList.add("toast", `toast--${this._props.kind}`);
+    this._root.setAttribute("role", "status");
+    this._root.setAttribute("aria-live", "polite");
+
+    const message = document.createElement("span");
+    message.classList.add("toast__message");
+    message.textContent = this._props.message;
+
+    const closeButton = document.createElement("button");
+    closeButton.type = "button";
+    closeButton.classList.add("toast__close");
+    closeButton.textContent = "×";
+    closeButton.setAttribute("aria-label", "Close toast");
+    closeButton.addEventListener("click", () => {
+      this.dismiss();
+    });
+
+    this._root.appendChild(message);
+    this._root.appendChild(closeButton);
+  }
+
+  /** Creates and shows a toast instance. */
+  static show(props: ToastProps): Toast {
+    const toast = new Toast(props);
+    toast.mount();
+    toast.show();
+    return toast;
+  }
+
+  /** Removes all visible toasts. */
+  static clear(): void {
+    for (const container of Toast.containers.values()) {
+      container.replaceChildren();
+    }
+  }
+
+  /** Dismisses this toast immediately. */
+  dismiss(): void {
+    if (this._destroyed) {
+      return;
+    }
+
+    this.clearTimer();
+    this.beginOperation();
+    void fadeOut(this._root, { duration: "180ms" }).then((completed) => {
+      if (!this.isCurrentOperation(this._operationId) || !completed) {
+        return;
+      }
+
+      this.destroy();
+    });
+  }
+
+  /** Removes this toast from the document. */
+  destroy(): void {
+    if (this._destroyed) {
+      return;
+    }
+
+    this._destroyed = true;
+    this.clearTimer();
+    this._root.remove();
+  }
+
+  private mount(): void {
+    this._container.appendChild(this._root);
+  }
+
+  private show(): void {
+    const operationId = this.beginOperation();
+    void fadeIn(this._root, { duration: "180ms" }).then((completed) => {
+      if (!this.isCurrentOperation(operationId) || !completed) {
+        return;
+      }
+
+      this._timer = setTimeout(() => {
+        this.dismiss();
+      }, this._props.duration);
+    });
+  }
+
+  private clearTimer(): void {
+    if (this._timer !== undefined) {
+      clearTimeout(this._timer);
+      this._timer = undefined;
+    }
+  }
+
+  private beginOperation(): number {
+    this._operationId += 1;
+    return this._operationId;
+  }
+
+  private isCurrentOperation(operationId: number): boolean {
+    return operationId === this._operationId;
+  }
+
+  private static getContainer(position: ToastPosition): HTMLElement {
+    const existing = Toast.containers.get(position);
+    if (existing) {
+      return existing;
+    }
+
+    const container = document.createElement("div");
+    container.classList.add("toast-container", `toast-container--${position}`);
+    document.body.appendChild(container);
+
+    Toast.containers.set(position, container);
+    return container;
+  }
+}

package/lib/util.ts

@@ -0,0 +1,45 @@
+type PromiseResolvers<T> = {
+  promise: Promise<T>
+  resolve: (value: T | PromiseLike<T>) => void
+  reject: (reason?: any) => void
+}
+
+export function html(strings: TemplateStringsArray, ...values: unknown[]): string {
+  return String.raw({ raw: strings }, ...values).trim()
+}
+
+export type TemplateValues = Record<string, string | number | boolean | null | undefined>
+
+export function renderTemplate(
+  template: string,
+  values: TemplateValues = {},
+): string {
+  return template.replace(/\{\{\s*([a-zA-Z0-9_]+)\s*\}\}/g, (_, key: string) => {
+    const value = values[key]
+
+    return value == null ? "" : String(value)
+  })
+}
+
+export function withResolvers<T>(): PromiseResolvers<T> {
+  let resolve!: ConstructorParameters<typeof Promise<T>>[0] extends (
+    resolve: infer R,
+    reject: infer _J
+  ) => unknown
+    ? R
+    : never
+
+  let reject!: ConstructorParameters<typeof Promise<T>>[0] extends (
+    resolve: infer _R,
+    reject: infer J
+  ) => unknown
+    ? J
+    : never
+
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+
+  return { resolve, reject, promise }
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@familyboat/mini-framework",
+  "private": false,
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    ".": "./lib/index.ts"
+  },
+  "types": "./lib/index.ts",
+  "files": [
+    "lib/**/*.ts",
+    "lib/**/*.css",
+    "lib/**/*.md",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "check:publish": "npm pack --dry-run",
+    "publish:check": "npm publish --dry-run --access public"
+  },
+  "description": "A lightweight DOM framework with route, modal, animation, interaction, and toast utilities.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/familyboat/mini-framework.git"
+  },
+  "homepage": "https://github.com/familyboat/mini-framework#readme",
+  "bugs": {
+    "url": "https://github.com/familyboat/mini-framework/issues"
+  },
+  "keywords": [
+    "typescript",
+    "dom",
+    "router",
+    "modal",
+    "animation",
+    "jsr"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vite": "^8.2.2"
+  },
+  "devDependencies": {
+    "@types/node": "^26.4.1",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.2"
+  },
+  "allowScripts": {
+    "fsevents@2.3.3": true
+  }
+}