Design patterns

type Settings = { theme: "light" | "dark"; debug: boolean };
 
let settings: Settings = { theme: "dark", debug: false };
 
export const config = {
  get: (): Readonly<Settings> => settings,
  set: (next: Partial<Settings>): void => {
    settings = { ...settings, ...next };
  },
};

class Counter {
  static #instance: Counter | undefined;
  #count = 0;
  private constructor() {}
 
  static get instance(): Counter {
    return (Counter.#instance ??= new Counter());
  }
  increment(): number {
    return ++this.#count;
  }
}
 
Counter.instance.increment(); // 1
// @ts-expect-error constructor is private
new Counter();

type Shape =
  | { kind: "circle"; r: number }
  | { kind: "rect"; w: number; h: number };
 
interface Area {
  area(): number;
}
 
function createShape(s: Shape): Area {
  switch (s.kind) {
    case "circle":
      return { area: () => Math.PI * s.r ** 2 };
    case "rect":
      return { area: () => s.w * s.h };
  }
}
 
createShape({ kind: "rect", w: 2, h: 3 }).area(); // 6

interface Query {
  table: string;
  where: readonly string[];
  limit?: number;
}
 
interface QueryBuilder {
  where(cond: string): QueryBuilder;
  limit(n: number): QueryBuilder;
  toSQL(): string;
}
 
function build(q: Query): QueryBuilder {
  return {
    where: (c) => build({ ...q, where: [...q.where, c] }),
    limit: (n) => build({ ...q, limit: n }),
    toSQL: () =>
      [
        `SELECT * FROM ${q.table}`,
        q.where.length
          ? `WHERE ${q.where.join(" AND ")}`
          : "",
        q.limit !== undefined ? `LIMIT ${q.limit}` : "",
      ]
        .filter(Boolean)
        .join(" "),
  };
}
 
const from = (table: string) => build({ table, where: [] });
const active = from("users").where("active = true");
active.limit(10).toSQL();
// SELECT * FROM users WHERE active = true LIMIT 10

const proto = {
  describe(this: { name: string }): string {
    return `I am ${this.name}`;
  },
};
type Named = typeof proto & { name: string };
 
const rex: Named = Object.create(proto);
rex.name = "Rex"; // own property; describe() is shared
rex.describe(); // "I am Rex"
Object.getPrototypeOf(rex) === proto; // true
 
// Copying data rather than sharing behavior: deep clone
const copy = structuredClone({
  tags: ["a"],
  at: new Date(),
});

const items = new Map<string, number>(); // private
 
export function add(sku: string, qty = 1): void {
  items.set(sku, (items.get(sku) ?? 0) + qty);
}
export const count = (): number =>
  [...items.values()].reduce((a, b) => a + b, 0);

const user = { name: "Ada", age: 36 };
 
const guarded = new Proxy(user, {
  get(target, key, receiver) {
    if (!Reflect.has(target, key)) {
      throw new Error(`No property ${String(key)}`);
    }
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value: unknown, receiver) {
    if (key === "age" && typeof value !== "number") {
      throw new TypeError("age must be a number");
    }
    return Reflect.set(target, key, value, receiver);
  },
});
 
guarded.age = 37; // ok

function withRetry<A extends unknown[], R>(
  fn: (...args: A) => Promise<R>,
  attempts = 3,
): (...args: A) => Promise<R> {
  return async (...args) => {
    let lastError: unknown;
    for (let i = 0; i < attempts; i++) {
      try {
        return await fn(...args);
      } catch (err) {
        lastError = err;
      }
    }
    throw lastError;
  };
}
 
const getUser = async (id: string) => ({ id });
// (id: string) => ...
const robustGetUser = withRetry(getUser);

function logged<This, A extends unknown[], R>(
  target: (this: This, ...args: A) => R,
  ctx: ClassMethodDecoratorContext<This>,
) {
  return function (this: This, ...args: A): R {
    console.debug(`-> ${String(ctx.name)}`);
    return target.call(this, ...args);
  };
}
 
class Api {
  @logged
  getUser(id: string) {
    return { id };
  }
}

interface Logger {
  log(level: "info" | "error", msg: string): void;
}
 
class LegacyLogger {
  write(line: string): void {
    process.stdout.write(line + "\n");
  }
}
 
const adapt = (legacy: LegacyLogger): Logger => ({
  log: (level, msg) => legacy.write(`[${level}] ${msg}`),
});

export async function getJSON<T>(
  url: string,
  parse: (data: unknown) => T,
): Promise<T> {
  const res = await fetch(url, {
    headers: { Accept: "application/json" },
    signal: AbortSignal.timeout(5_000),
  });
  if (!res.ok) throw new Error(`${res.status} ${url}`);
  return parse(await res.json());
}

interface Glyph {
  readonly char: string;
  readonly font: string;
}
const glyphs = new Map<string, Glyph>();
 
function glyph(char: string, font: string): Glyph {
  const key = `${char}:${font}`;
  const hit = glyphs.get(key);
  if (hit) return hit;
  const g = Object.freeze({ char, font });
  glyphs.set(key, g);
  return g;
}
 
// position (extrinsic) lives outside the shared glyph
const line = [..."hello"].map((c, x) => ({
  g: glyph(c, "mono"),
  x,
}));

type Ctor<T = object> = new (...args: any[]) => T;
 
function Timestamped<B extends Ctor>(Base: B) {
  return class extends Base {
    createdAt = new Date();
  };
}
function Taggable<B extends Ctor>(Base: B) {
  return class extends Base {
    tags = new Set<string>();
  };
}
 
class User {
  name = "anon";
}
const RichUser = Taggable(Timestamped(User));
const u = new RichUser();
u.createdAt; u.tags; u.name; // all typed

type Listener<T> = (payload: T) => void;
 
class Emitter<E extends Record<string, unknown>> {
  #subs: { [K in keyof E]?: Set<Listener<E[K]>> } = {};
 
  on<K extends keyof E>(type: K, fn: Listener<E[K]>) {
    const set = (this.#subs[type] ??= new Set());
    set.add(fn);
    return () => void set.delete(fn); // unsubscribe
  }
 
  emit<K extends keyof E>(type: K, payload: E[K]): void {
    this.#subs[type]?.forEach((fn) => fn(payload));
  }
}
 
type AppEvents = {
  login: { id: string };
  logout: undefined;
};
const bus = new Emitter<AppEvents>();
 
const off = bus.on("login", (e) => e.id.toUpperCase());
bus.emit("login", { id: "u1" });
// @ts-expect-error id must be a string
bus.emit("login", { id: 1 });
off();

type Ctx = { path: string; user?: string; status?: number };
type Next = () => Promise<void>;
type Middleware = (ctx: Ctx, next: Next) => Promise<void>;
 
function compose(stack: readonly Middleware[]) {
  return (ctx: Ctx): Promise<void> => {
    const run = (i: number): Promise<void> => {
      const mw = stack[i];
      return mw
        ? mw(ctx, () => run(i + 1))
        : Promise.resolve();
    };
    return run(0);
  };
}
 
const auth: Middleware = async (ctx, next) => {
  if (!ctx.user) {
    ctx.status = 401;
    return;
  }
  await next();
};
const handler = compose([auth, async (ctx) => {
  ctx.status = 200;
}]);

type State = { items: readonly string[] };
 
interface Command {
  apply(s: State): State;
  revert(s: State): State;
}
 
const addItem = (item: string): Command => ({
  apply: (s) => ({ items: [...s.items, item] }),
  revert: (s) => ({ items: s.items.slice(0, -1) }),
});
 
let state: State = { items: [] };
let done: readonly Command[] = [];
 
function exec(cmd: Command): void {
  state = cmd.apply(state);
  done = [...done, cmd];
}
function undo(): void {
  const last = done.at(-1);
  if (!last) return;
  state = last.revert(state);
  done = done.slice(0, -1);
}

type Pricing = (subtotal: number) => number;
 
const pricing = {
  regular: (n) => n,
  member: (n) => n * 0.9,
  clearance: (n) => Math.max(0, n - 20),
} satisfies Record<string, Pricing>;
 
type Tier = keyof typeof pricing; // "regular" | ...
const total = (n: number, tier: Tier) => pricing[tier](n);

function* range(start: number, end: number, step = 1) {
  for (let i = start; i < end; i += step) yield i;
}
[...range(0, 5)]; // [0, 1, 2, 3, 4]
 
class Bag<T> implements Iterable<T> {
  #items: readonly T[];
  constructor(items: readonly T[]) {
    this.#items = items;
  }
  *[Symbol.iterator]() {
    yield* this.#items; // delegate to the array
  }
}
for (const x of new Bag([1, 2])) x;
 
// ES2025 iterator helpers: lazy map/filter/take
range(0, Infinity)
  .filter((n) => n % 7 === 0)
  .take(3)
  .toArray();

type Page<T> = { items: T[]; next: string | null };
 
async function* paginate<T>(first: string) {
  let url: string | null = first;
  while (url) {
    const res: Response = await fetch(url);
    const page = (await res.json()) as Page<T>;
    yield* page.items;
    url = page.next;
  }
}
// for await (const user of paginate<User>("/api/users")) ...

type State =
  | { status: "idle" }
  | { status: "loading"; startedAt: number }
  | { status: "success"; data: string }
  | { status: "error"; error: Error };
 
type Msg =
  | { type: "FETCH" }
  | { type: "RESOLVE"; data: string }
  | { type: "REJECT"; error: Error }
  | { type: "RESET" };
 
const assertNever = (x: never): never => {
  throw new Error(`Unhandled: ${JSON.stringify(x)}`);
};
 
function transition(s: State, m: Msg): State {
  switch (s.status) {
    case "idle":
      return m.type === "FETCH"
        ? { status: "loading", startedAt: Date.now() }
        : s;
    case "loading":
      if (m.type === "RESOLVE") {
        return { status: "success", data: m.data };
      }
      if (m.type === "REJECT") {
        return { status: "error", error: m.error };
      }
      return s;
    case "success":
    case "error":
      return m.type === "RESET" ? { status: "idle" } : s;
    default:
      return assertNever(s);
  }
}

type User = { id: string; name: string };
declare function getUsers(): Promise<User[]>;
 
// presentational: pure props in, JSX out
function UserList({ users }: { users: User[] }) {
  return (
    <ul>
      {users.map((u) => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}
 
// container: owns the data
export async function UsersPage() {
  const users = await getUsers();
  return <UserList users={users} />;
}

import type { ComponentType } from "react";
 
function withLoading<P extends object>(
  Wrapped: ComponentType<P>,
) {
  return function WithLoading(
    props: P & { loading: boolean },
  ) {
    const { loading, ...rest } = props;
    if (loading) return <p>Loading…</p>;
    return <Wrapped {...(rest as unknown as P)} />;
  };
}

import type { ReactNode } from "react";
 
type Pos = { x: number; y: number };
 
type MouseProps = { children: (p: Pos) => ReactNode };
 
// useMousePosition: see Hooks below
function Mouse({ children }: MouseProps) {
  return children(useMousePosition());
}
 
const View = () => (
  <Mouse>{({ x, y }) => <p>{x}, {y}</p>}</Mouse>
);

import { useEffect, useState } from "react";
 
export function useMousePosition() {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const move = (e: MouseEvent) =>
      setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener("mousemove", move);
    return () =>
      window.removeEventListener("mousemove", move);
  }, []);
  return pos;
}
 
function Cursor() {
  const { x, y } = useMousePosition();
  return <p>{x}, {y}</p>;
}

import { createContext, use, useState } from "react";
import type { ReactNode } from "react";
 
type TabsState = {
  active: string;
  select: (id: string) => void;
};
const TabsCtx = createContext<TabsState | null>(null);
 
function useTabs(): TabsState {
  const ctx = use(TabsCtx);
  if (!ctx) throw new Error("Tabs.* must be inside <Tabs>");
  return ctx;
}
 
type Kids = { children: ReactNode };
 
type TabsProps = Kids & { initial: string };
 
export function Tabs({ initial, children }: TabsProps) {
  const [active, select] = useState(initial);
  return (
    <TabsCtx value={{ active, select }}>{children}</TabsCtx>
  );
}
 
function Tab({ id, children }: Kids & { id: string }) {
  const { active, select } = useTabs();
  return (
    <button
      aria-selected={active === id}
      onClick={() => select(id)}
    >
      {children}
    </button>
  );
}
 
function Panel({ id, children }: Kids & { id: string }) {
  return useTabs().active === id ? (
    <div>{children}</div>
  ) : null;
}
 
Tabs.Tab = Tab;
Tabs.Panel = Panel;

import { createContext, use, useState } from "react";
import type { ReactNode } from "react";
 
type Kids = { children: ReactNode };
type Theme = "light" | "dark";
type ThemeCtx = { theme: Theme; toggle: () => void };
 
const ThemeContext = createContext<ThemeCtx | null>(null);
 
export function ThemeProvider({ children }: Kids) {
  const [theme, setTheme] = useState<Theme>("light");
  const toggle = () =>
    setTheme((t) => (t === "light" ? "dark" : "light"));
  return (
    <ThemeContext value={{ theme, toggle }}>
      {children}
    </ThemeContext>
  );
}
 
export function useTheme(): ThemeCtx {
  const ctx = use(ThemeContext);
  if (!ctx) {
    throw new Error("useTheme needs <ThemeProvider>");
  }
  return ctx;
}

import { Suspense, type ReactNode } from "react";
 
declare function Recommendations(): Promise<ReactNode>;
 
export default function Page() {
  return (
    <main>
      <h1>Shop</h1> {/* in the first flush */}
      <Suspense fallback={<p>Loading picks…</p>}>
        <Recommendations /> {/* streamed in later */}
      </Suspense>
    </main>
  );
}

const button = document.querySelector("#export")!;
 
button.addEventListener("click", async () => {
  // chunk is fetched on the first click, then cached
  const { toCSV } = await import("./csv-export.js");
  toCSV([{ a: 1 }]);
});

function onVisible(
  el: Element,
  load: () => Promise<unknown>,
) {
  const io = new IntersectionObserver((entries) => {
    if (entries.some((e) => e.isIntersecting)) {
      io.disconnect();
      void load();
    }
  }, { rootMargin: "200px" }); // start a bit early
  io.observe(el);
}
 
onVisible(document.querySelector("#chart")!, () =>
  import("./chart.js").then((m) => m.render("#chart")),
);

import { lazy, Suspense } from "react";
 
// default export required by lazy()
const Settings = lazy(() => import("./Settings.js"));
 
export function App({ route }: { route: string }) {
  return (
    <Suspense fallback={<p>Loading…</p>}>
      {route === "/settings" ? <Settings /> : <p>Home</p>}
    </Suspense>
  );
}

<!-- needed for this page, discovered late
     (font, hero, LCP) -->
<link rel="preload" href="/fonts/inter.woff2" as="font"
      type="font/woff2" crossorigin>
<link rel="modulepreload" href="/assets/app.js">
<!-- probably needed next: idle-time, low priority -->
<link rel="prefetch" href="/assets/checkout.js">
<link rel="preconnect" href="https://api.example.com">

function visibleRange(
  scrollTop: number,
  viewport: number,
  rowHeight: number,
  total: number,
  overscan = 5,
): { start: number; end: number; offset: number } {
  const first = Math.floor(scrollTop / rowHeight);
  const count = Math.ceil(viewport / rowHeight);
  const start = Math.max(0, first - overscan);
  const end = Math.min(total, first + count + overscan);
  return { start, end, offset: start * rowHeight };
}