/examples/clock/main.ts at 33c22babfaa9aa563c16457eaea2c50db63747fd

import "@fontsource/jetbrains-mono";

import {
  attr,
  classList,
  derived,
  effect,
  el,
  fragment,
  signal,
  type ReactiveValue,
} from "../../src/ef.js";

import css from "./main.module.css";

const query = new URL(location.href).searchParams;

// Set "feature" query params to body
if (query.has("feature")) {
  document.body.dataset.features = query.getAll("feature").join(" ");
}

// User specified locale (undefined = UA provided value)
let locale: string | undefined = undefined;
if (query.has("locale")) {
  locale = query.get("locale") || undefined;
}

const colors = [
  "red",
  "dark-red",
  "blue",
  "dark-blue",
  "green",
  "dark-green",
  "yellow",
  "dark-yellow",
  "black",
  "mostly-black",
  "white",
  "mostly-white",
];

if (query.has("fg")) {
  const value = query.get("fg") || "";
  if (!colors.includes(value)) {
    console.warn(
      'The value of `fg` query parameter is invalid: unknown color "' +
        value +
        '"',
    );
  } else {
    document.documentElement.style.setProperty(
      "--theme-fg",
      `var(--color-${value})`,
    );
  }
}

if (query.has("bg")) {
  const value = query.get("bg") || "";
  if (!colors.includes(value)) {
    console.warn(
      'The value of `bg` query parameter is invalid: unknown color "' +
        value +
        '"',
    );
  } else {
    document.documentElement.style.setProperty(
      "--theme-bg",
      `var(--color-${value})`,
    );
  }
}

/**
 * Format a number into zero-padded two digit string.
 */
function digit2(v: number): string {
  return v.toString(10).padStart(2, "0");
}

// Current time (now)
const initialDateTime = new Date();

const $now = signal(initialDateTime);

const $year = derived(() => $now.get().getFullYear());
const $month = derived(() => $now.get().getMonth() + 1);
const $date = derived(() => $now.get().getDate());

const $hour = derived(() => $now.get().getHours());
const $minute = derived(() => $now.get().getMinutes());
const $second = derived(() => $now.get().getSeconds());

// Update datetime Signal values
effect(() => {
  const iid = setInterval(() => {
    const now = new Date();

    $now.update((prev) => {
      if (prev.getSeconds() === now.getSeconds()) {
        // This clock only cares up to seconds, ignore milliseconds changes
        return prev;
      }

      return now;
    });
  }, 100);

  return () => {
    clearInterval(iid);
  };
});

const dateFormatter = new Intl.DateTimeFormat(locale, {
  year: "numeric",
  month: "numeric",
  day: "numeric",
});

const timeFormatter = new Intl.DateTimeFormat(locale, {
  hour: "numeric",
  minute: "numeric",
});

function isSingle($n: ReactiveValue<number>) {
  return attr(
    "data-single",
    derived(() => $n.get() < 10),
  );
}

document.body.appendChild(
  fragment([
    el(
      "div",
      [attr("aria-hidden", "true"), classList(css.root)],
      [
        el(
          "p",
          [classList(css.label, css.date)],
          [
            el("span", [], [derived(() => $year.get().toString(10))]),
            el("span", [classList(css.separator)], ["-"]),
            el(
              "span",
              [isSingle($month)],
              [derived(() => digit2($month.get()))],
            ),
            el("span", [classList(css.separator)], ["-"]),
            el("span", [isSingle($date)], [derived(() => digit2($date.get()))]),
          ],
        ),
        el(
          "p",
          [classList(css.label)],
          [
            el("span", [isSingle($hour)], [derived(() => digit2($hour.get()))]),
            el("span", [classList(css.separator)], [":"]),
            el(
              "span",
              [isSingle($minute)],
              [derived(() => digit2($minute.get()))],
            ),
            el("span", [classList(css.separator)], [":"]),
            el(
              "span",
              [isSingle($second)],
              [derived(() => digit2($second.get()))],
            ),
          ],
        ),
      ],
    ),
    // Since it's hard to let screen readers read the fragmented texts as a single text (with or without `role=text`),
    // this page uses visually hidden live region for screen readers.
    el(
      "p",
      [
        attr("aria-live", "polite"),
        attr("aria-atomic", "false"),
        classList(css.visuallyHidden),
      ],
      [
        // Recreating a whole TextNode with concatenated string indeed is inefficient.
        // However, this is necessary due to "aria-live" & "aria-atomic" being
        // so buggy (at least on VoiceOver) that one cannot rely on the spec-ed
        // behaviour. Overhead is acceptable considering the update is performed
        // once per minute.
        derived(() => {
          // Update when a day of the month has changed
          $date.get();

          return "Today is " + dateFormatter.format(new Date()) + ".";
        }),
        el("br"),
        derived(() => {
          // Update when minute has changed
          $minute.get();

          return "Current time is " + timeFormatter.format(new Date()) + ".";
        }),
      ],
    ),
  ]),
);