mevebu 2.3.0 → 2.5.0

package/mevebu/libs/js/tools/cron-next-runs.js

@@ -0,0 +1,179 @@
+// Lists the next ten times a five-field cron expression fires, in the browser
+// timezone or UTC.
+import { el, bench, stack, panel, textInput, notice, chipRow, copyButton, actions, toolcard } from "../core.js";
+
+const MONTHS = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
+const DAYS = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
+const SPECIAL = {
+  "@yearly": "0 0 1 1 *", "@annually": "0 0 1 1 *", "@monthly": "0 0 1 * *",
+  "@weekly": "0 0 * * 0", "@daily": "0 0 * * *", "@midnight": "0 0 * * *",
+  "@hourly": "0 * * * *",
+};
+
+function valueOf(raw, names, min, max) {
+  const text = raw.toUpperCase();
+  if (names && names.includes(text)) return names.indexOf(text) + (names === MONTHS ? 1 : 0);
+  if (!/^\d+$/.test(text)) throw new Error(`Unknown value ${raw}.`);
+  const value = Number(text);
+  if (value < min || value > max) {
+    throw new Error(`Value ${raw} is out of range.`);
+  }
+  return value;
+}
+
+function parseField(raw, min, max, names = null) {
+  if (raw === "*") {
+    const set = new Set();
+    for (let value = min; value <= max; value++) set.add(value);
+    return { set, restricted: false };
+  }
+  const set = new Set();
+  for (const part of raw.split(",")) {
+    const [range, stepText] = part.split("/");
+    const step = stepText === undefined ? 1 : Number(stepText);
+    if (!Number.isInteger(step) || step < 1) throw new Error(`Bad step in ${part}.`);
+    let from;
+    let to;
+    if (range === "*") {
+      from = min;
+      to = max;
+    } else if (range.includes("-")) {
+      const [a, b] = range.split("-");
+      from = valueOf(a, names, min, max);
+      to = valueOf(b, names, min, max);
+    } else {
+      from = valueOf(range, names, min, max);
+      to = stepText === undefined ? from : max;
+    }
+    if (from > to) throw new Error(`Range ${range} runs backwards.`);
+    for (let value = from; value <= to; value += step) {
+      set.add(names === DAYS && value === 7 ? 0 : value);
+    }
+  }
+  return { set, restricted: true };
+}
+
+function compile(expression) {
+  const raw = SPECIAL[expression.trim().toLowerCase()] ?? expression.trim();
+  const fields = raw.split(/\s+/);
+  if (fields.length !== 5) throw new Error("A cron expression needs exactly five fields.");
+  return {
+    minute: parseField(fields[0], 0, 59),
+    hour: parseField(fields[1], 0, 23),
+    day: parseField(fields[2], 1, 31),
+    month: parseField(fields[3], 1, 12, MONTHS),
+    weekday: parseField(fields[4], 0, 6, DAYS),
+  };
+}
+
+function nextRuns(expression, timezone, count = 10) {
+  const cron = compile(expression);
+  const utc = timezone === "utc";
+  const get = (date, key) => date[utc ? `getUTC${key}` : `get${key}`]();
+  const hours = [...cron.hour.set].sort((a, b) => a - b);
+  const minutes = [...cron.minute.set].sort((a, b) => a - b);
+  const results = [];
+  const start = new Date();
+  const cursor = new Date(start.getTime());
+  if (utc) cursor.setUTCHours(0, 0, 0, 0);
+  else cursor.setHours(0, 0, 0, 0);
+
+  for (let day = 0; day < 3660 && results.length < count; day++) {
+    const month = get(cursor, "Month") + 1;
+    const dayOfMonth = get(cursor, "Date");
+    const weekday = get(cursor, "Day");
+    const dayMatch = cron.day.set.has(dayOfMonth);
+    const weekdayMatch = cron.weekday.set.has(weekday);
+    const dayOk = cron.day.restricted && cron.weekday.restricted
+      ? dayMatch || weekdayMatch
+      : dayMatch && weekdayMatch;
+    if (dayOk && cron.month.set.has(month)) {
+      const year = get(cursor, "FullYear");
+      for (const hour of hours) {
+        for (const minute of minutes) {
+          const candidate = utc
+            ? new Date(Date.UTC(year, month - 1, dayOfMonth, hour, minute))
+            : new Date(year, month - 1, dayOfMonth, hour, minute);
+          if (candidate <= start) continue;
+          results.push(candidate);
+          if (results.length === count) break;
+        }
+        if (results.length === count) break;
+      }
+    }
+    if (utc) cursor.setUTCDate(cursor.getUTCDate() + 1);
+    else cursor.setDate(cursor.getDate() + 1);
+  }
+  if (!results.length) throw new Error("No run found in the next ten years.");
+  return results;
+}
+
+export function mount(slot) {
+  const expression = textInput({ value: "*/15 9-17 * * 1-5", "aria-label": "Cron expression", class: "font-mono" });
+  const error = notice("error");
+  const list = el("div", { class: "grid gap-1.5" });
+  let timezone = "local";
+
+  const chips = chipRow(
+    [{ value: "local", label: "Browser" }, { value: "utc", label: "UTC" }],
+    { value: "local", label: "Timezone", onChange: (value) => { timezone = value; run(); } },
+  );
+
+  const presets = chipRow(
+    [
+      { value: "*/15 * * * *", label: "Every 15 min" },
+      { value: "0 * * * *", label: "Hourly" },
+      { value: "0 0 * * *", label: "Daily" },
+      { value: "0 9 * * 1-5", label: "Weekdays 9:00" },
+      { value: "0 0 * * 1", label: "Weekly" },
+    ],
+    { label: "Presets", onChange: (value) => { if (!value) return; expression.value = value; run(); } },
+  );
+
+  const formatter = () => new Intl.DateTimeFormat(undefined, {
+    timeZone: timezone === "utc" ? "UTC" : undefined,
+    weekday: "short", year: "numeric", month: "short", day: "2-digit",
+    hour: "2-digit", minute: "2-digit", hour12: false,
+  });
+
+  let runs = [];
+
+  function run() {
+    error.write("");
+    runs = [];
+    if (!expression.value.trim()) {
+      list.replaceChildren();
+      return;
+    }
+    try {
+      runs = nextRuns(expression.value, timezone);
+    } catch (caught) {
+      error.write(caught.message);
+      list.replaceChildren();
+      return;
+    }
+    const format = formatter();
+    list.replaceChildren(...runs.map((date, index) =>
+      el("div", { class: "flex items-baseline gap-3 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-2.5" },
+        el("span", { class: "w-5 flex-none text-2xs font-bold tabular-nums text-ink-3" }, String(index + 1)),
+        el("span", { class: "font-mono text-sm" }, format.format(date)))));
+  }
+
+  expression.addEventListener("input", () => { presets.select(""); run(); });
+
+  const report = () => runs.map((date) => formatter().format(date)).join("\n");
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Expression", expression), panel("Presets", presets), panel("Timezone", chips), error),
+      stack(panel("Next runs", list)),
+    ),
+    foot: actions(copyButton(report, "Copy times", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/html-to-jsx.js

@@ -0,0 +1,144 @@
+// Converts an HTML fragment to JSX: class to className, for to htmlFor, inline
+// styles to objects, and void tags self closed.
+import { bench, stack, panel, textArea, output, notice, copyButton, actions, toolcard } from "../core.js";
+
+const EXAMPLE = '<section class="card" style="padding: 12px; background-color: #fff">\n  <h2 for="title">Hello</h2>\n  <img src="logo.png" alt="">\n  <input type="text" disabled>\n</section>';
+
+const VOID = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
+const BOOLEAN = new Set(["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "defer", "disabled", "hidden", "loop", "multiple", "muted", "novalidate", "open", "readonly", "required", "reversed", "selected"]);
+const SPECIAL = {
+  class: "className", for: "htmlFor", tabindex: "tabIndex", readonly: "readOnly",
+  maxlength: "maxLength", minlength: "minLength", colspan: "colSpan", rowspan: "rowSpan",
+  contenteditable: "contentEditable", autocomplete: "autoComplete", autofocus: "autoFocus",
+  enctype: "encType", srcset: "srcSet", crossorigin: "crossOrigin", datetime: "dateTime",
+  novalidate: "noValidate", spellcheck: "spellCheck", formaction: "formAction",
+  allowfullscreen: "allowFullScreen", usemap: "useMap", frameborder: "frameBorder",
+  accesskey: "accessKey", charset: "charSet", cellpadding: "cellPadding", cellspacing: "cellSpacing",
+  hreflang: "hrefLang", referrerpolicy: "referrerPolicy",
+  inputmode: "inputMode", enterkeyhint: "enterKeyHint", autoplay: "autoPlay",
+};
+
+const camel = (name) => {
+  if (name.startsWith("data-") || name.startsWith("aria-")) return name;
+  return SPECIAL[name] ?? name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+};
+
+const escapeAttribute = (value) => value.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+const escapeText = (value) => value
+  .replace(/&/g, "&amp;")
+  .replace(/</g, "&lt;")
+  .replace(/>/g, "&gt;")
+  .replace(/[{}]/g, (brace) => (brace === "{" ? "{'{'}" : "{'}'}"));
+
+function styleObject(text) {
+  const parts = text.split(";").map((part) => part.trim()).filter(Boolean);
+  const pairs = parts.map((part) => {
+    const index = part.indexOf(":");
+    if (index === -1) return null;
+    const name = part.slice(0, index).trim().replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+    const value = part.slice(index + 1).trim();
+    return `${name}: ${JSON.stringify(value)}`;
+  }).filter(Boolean);
+  return `{ ${pairs.join(", ")} }`;
+}
+
+function attributes(node) {
+  const output = [];
+  for (const attribute of node.attributes) {
+    const name = attribute.name;
+    const lower = name.toLowerCase();
+    if (BOOLEAN.has(lower) && (attribute.value === "" || attribute.value === lower)) {
+      output.push(camel(lower));
+      continue;
+    }
+    if (lower === "style") {
+      output.push(`style={${styleObject(attribute.value)}}`);
+      continue;
+    }
+    output.push(`${camel(name)}="${escapeAttribute(attribute.value)}"`);
+  }
+  return output;
+}
+
+function serializeChildren(node, depth) {
+  const pad = "  ".repeat(depth);
+  return Array.from(node.childNodes).map((child) => serializeNode(child, depth, pad)).filter(Boolean);
+}
+
+function serializeNode(node, depth, pad = "  ".repeat(depth)) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    const text = node.textContent.replace(/\s+/g, " ").trim();
+    return text ? `${pad}${escapeText(text)}` : "";
+  }
+  if (node.nodeType === Node.COMMENT_NODE) {
+    return `${pad}{/* ${node.textContent.trim()} */}`;
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) return "";
+
+  const html = node.namespaceURI === "http://www.w3.org/1999/xhtml";
+  const name = html ? node.tagName.toLowerCase() : node.tagName;
+  const attrs = attributes(node);
+  const open = `<${name}${attrs.length ? ` ${attrs.join(" ")}` : ""}`;
+
+  if (VOID.has(name.toLowerCase())) return `${pad}${open} />`;
+
+  const children = Array.from(node.childNodes);
+  if (!children.length) return `${pad}${open} />`;
+
+  const onlyText = children.every((child) => child.nodeType === Node.TEXT_NODE);
+  if (onlyText) {
+    const text = children.map((child) => child.textContent.replace(/\s+/g, " ").trim()).filter(Boolean).join(" ");
+    return text ? `${pad}${open}>${escapeText(text)}</${name}>` : `${pad}${open} />`;
+  }
+
+  const body = serializeChildren(node, depth + 1);
+  return `${pad}${open}>\n${body.join("\n")}\n${pad}</${name}>`;
+}
+
+function convert(source) {
+  const document = new DOMParser().parseFromString(`<body>${source}</body>`, "text/html");
+  const roots = Array.from(document.body.childNodes).filter((node) =>
+    node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) || node.nodeType === Node.COMMENT_NODE);
+  if (!roots.length) return { text: "" };
+  if (roots.length === 1 && roots[0].nodeType === Node.ELEMENT_NODE) {
+    return { text: serializeNode(roots[0], 0, "") };
+  }
+  const body = roots.map((node) => serializeNode(node, 1)).join("\n");
+  return { text: `<>\n${body}\n</>` };
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 14, "aria-label": "HTML", value: EXAMPLE });
+  const result = output({ tag: "textarea", rows: 14 });
+  const error = notice("error");
+
+  function run() {
+    error.write("");
+    if (!source.value.trim()) {
+      result.value = "";
+      return;
+    }
+    try {
+      result.value = convert(source.value).text;
+    } catch (caught) {
+      result.value = "";
+      error.write(caught.message);
+    }
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("HTML", source), error),
+      stack(panel("JSX", result)),
+    ),
+    foot: actions(copyButton(() => result.value, "Copy JSX", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/javascript-formatter.js

@@ -0,0 +1,182 @@
+// Formats JavaScript by re-indenting its tokens. Strings, templates, regexes
+// and comments are kept byte for byte.
+import { el, bench, stack, panel, textArea, notice, chipRow, copyButton, actions, toolcard } from "../core.js";
+import { tokenize } from "../js-tokens.js";
+
+const CONTROL = new Set(["if", "for", "while", "switch", "catch", "with"]);
+const BINARY = new Set([
+  "=", "+", "-", "*", "/", "%", "**", "==", "===", "!=", "!==", "<", ">", "<=", ">=",
+  "&&", "||", "??", "&", "|", "^", "<<", ">>", ">>>", "+=", "-=", "*=", "/=", "%=",
+  "**=", "&=", "|=", "^=", "<<=", ">>=", ">>>=", "&&=", "||=", "??=", "=>",
+]);
+const NO_SPACE_BEFORE = new Set([")", "]", ",", ";", ".", "?.", "++", "--"]);
+const VALUE_TYPES = new Set(["word", "number", "string", "template", "regex"]);
+
+function bracketError(tokens) {
+  const stack = [];
+  const pairs = { ")": "(", "]": "[", "}": "{" };
+  for (const token of tokens) {
+    if (token.type !== "punct") continue;
+    if ("([{".includes(token.value)) stack.push(token.value);
+    else if (")]}".includes(token.value)) {
+      if (stack.pop() !== pairs[token.value]) return `Unexpected ${token.value}.`;
+    }
+  }
+  return stack.length ? `Unclosed ${stack[stack.length - 1]}.` : null;
+}
+
+function format(source, size) {
+  const { tokens, error } = tokenize(source);
+  if (error) return { error };
+  const balance = bracketError(tokens);
+  if (balance) return { error: balance };
+
+  const pad = " ".repeat(size);
+  const lines = [];
+  let line = "";
+  let indent = 0;
+  let paren = 0;
+
+  const flush = () => {
+    if (line.trim()) lines.push(pad.repeat(indent) + line.trimEnd());
+    line = "";
+  };
+  const add = (text, space = false) => {
+    if (space && line && !line.endsWith(" ")) line += " ";
+    line += text;
+  };
+  const nextOf = (index) => tokens[index + 1] ?? null;
+
+  tokens.forEach((token, index) => {
+    const prev = tokens[index - 1] ?? null;
+    const next = nextOf(index);
+    const value = token.value;
+
+    if (token.type === "lineComment") {
+      add(value, Boolean(line));
+      flush();
+      return;
+    }
+    if (token.type === "blockComment") {
+      add(value, Boolean(line));
+      if (value.includes("\n")) flush();
+      return;
+    }
+
+    if (token.type === "punct") {
+      if (value === "{") {
+        const space = prev && (
+          prev.type === "word" || prev.type === "number" || prev.type === "string" ||
+          prev.type === "template" || prev.value === ")" || prev.value === "]"
+        );
+        add("{", space);
+        flush();
+        indent++;
+        return;
+      }
+      if (value === "}") {
+        flush();
+        indent = Math.max(0, indent - 1);
+        line = "}";
+        const keep = next && (
+          next.value === ";" || next.value === "," || next.value === ")" ||
+          next.value === "]" || next.value === "else" || next.value === "catch" ||
+          next.value === "finally" || next.value === "while"
+        );
+        if (!keep) flush();
+        return;
+      }
+      if (value === ";") {
+        add(";");
+        if (paren === 0) flush();
+        return;
+      }
+      if (value === "(") {
+        const control = prev && prev.type === "word" && CONTROL.has(prev.value);
+        add("(", control);
+        paren++;
+        return;
+      }
+      if (value === ")") {
+        add(")");
+        paren = Math.max(0, paren - 1);
+        return;
+      }
+      if (value === "[") { add("["); return; }
+      if (value === "]") { add("]"); return; }
+      if (value === ",") { add(","); add(" "); return; }
+      if (value === ":") {
+        add(":");
+        add(" ");
+        if (line.trimStart().startsWith("case ") || line.trimStart().startsWith("default")) flush();
+        return;
+      }
+      if (value === "?") { add(" ? "); return; }
+      if (value === "." || value === "?." || value === "++" || value === "--" || value === "!" || value === "~" || value === "...") {
+        add(value);
+        return;
+      }
+      if (BINARY.has(value)) {
+        add(` ${value} `);
+        return;
+      }
+      add(value);
+      return;
+    }
+
+    const needsSpace = prev && (
+      VALUE_TYPES.has(prev.type) || prev.value === ")" || prev.value === "]" || prev.value === "}"
+    );
+    add(value, needsSpace);
+  });
+
+  flush();
+  return { text: lines.join("\n") };
+}
+
+export function mount(slot) {
+  const source = textArea({
+    rows: 14,
+    "aria-label": "JavaScript",
+    value: "const greet=(name)=>{if(!name)return 'hello';return `hello ${name}`};\n// keep this comment\nconst list=[1,2,3].map(n=>n*2);",
+  });
+  const result = textArea({ rows: 14, readonly: true, "aria-label": "Formatted JavaScript" });
+  const error = notice("error");
+  let size = "2";
+
+  const chips = chipRow(
+    [{ value: "2", label: "2 spaces" }, { value: "4", label: "4 spaces" }],
+    { value: "2", label: "Indent", onChange: (value) => { size = value; run(); } },
+  );
+
+  function run() {
+    error.write("");
+    if (!source.value.trim()) {
+      result.value = "";
+      return;
+    }
+    const output = format(source.value, Number(size));
+    if (output.error) {
+      result.value = "";
+      error.write(output.error);
+      return;
+    }
+    result.value = output.text;
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Indent", chips), panel("JavaScript", source), error),
+      stack(panel("Formatted", result)),
+    ),
+    foot: actions(copyButton(() => result.value, "Copy JavaScript", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/javascript-minifier.js

@@ -0,0 +1,111 @@
+// Removes comments and redundant whitespace from JavaScript, without renaming
+// anything or changing the meaning of a statement.
+import { el, bench, stack, panel, textArea, output, notice, copyButton, actions, toolcard } from "../core.js";
+import { tokenize, bytes } from "../js-tokens.js";
+
+const VALUE_TYPES = new Set(["word", "number", "string", "template", "regex"]);
+const ASI_WORDS = new Set(["return", "throw", "break", "continue", "yield"]);
+const RISKY_START = new Set(["(", "[", "`", "+", "-", "/"]);
+
+const tile = (key, value) =>
+  el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" },
+    el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, value),
+    el("span", { class: "text-2xs font-semibold text-ink-3" }, key));
+
+function keepComment(value) {
+  return value.startsWith("/*!") || value.startsWith("//!") || /@license|@preserve/.test(value);
+}
+
+function minify(source) {
+  const { tokens, error } = tokenize(source);
+  if (error) return { error };
+
+  let out = "";
+  let previous = null;
+
+  const emit = (text) => { out += text; };
+
+  tokens.forEach((token) => {
+    if (token.type === "lineComment" || token.type === "blockComment") {
+      if (keepComment(token.value)) {
+        if (out && !out.endsWith("\n")) emit("\n");
+        emit(token.value);
+        if (token.type === "lineComment") emit("\n");
+      }
+      return;
+    }
+
+    if (previous) {
+      const newline = token.newline && (
+        (previous.type === "word" && ASI_WORDS.has(previous.value)) ||
+        (RISKY_START.has(token.value) && (
+          VALUE_TYPES.has(previous.type) || [")", "]", "}", "++", "--"].includes(previous.value)
+        ))
+      );
+      if (newline) {
+        emit("\n");
+        emit(token.value);
+        previous = token;
+        return;
+      }
+
+      const wordPair = VALUE_TYPES.has(previous.type) && VALUE_TYPES.has(token.type);
+      const plusPair = ["+", "++"].includes(previous.value) && ["+", "++"].includes(token.value);
+      const minusPair = ["-", "--"].includes(previous.value) && ["-", "--"].includes(token.value);
+      const commentStart = previous.value === "/" && ["/", "*"].includes(token.value);
+      if (wordPair || plusPair || minusPair || commentStart) emit(" ");
+    }
+
+    emit(token.value);
+    previous = token;
+  });
+
+  return { text: out.trim() };
+}
+
+export function mount(slot) {
+  const source = textArea({
+    rows: 14,
+    "aria-label": "JavaScript",
+    value: "// greeting\nconst greet = (name) => {\n  if (!name) return 'hello';\n  return `hello ${name}`;\n};\n\nconst list = [1, 2, 3].map((n) => n * 2);",
+  });
+  const result = output({ tag: "textarea", rows: 12 });
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" });
+  const error = notice("error");
+
+  function run() {
+    error.write("");
+    stats.replaceChildren();
+    if (!source.value.trim()) {
+      result.value = "";
+      return;
+    }
+    const output = minify(source.value);
+    if (output.error) {
+      result.value = "";
+      error.write(output.error);
+      return;
+    }
+    const before = bytes(source.value);
+    const after = bytes(output.text);
+    const saved = before ? Math.max(0, Math.round((1 - after / before) * 100)) : 0;
+    result.value = output.text;
+    stats.append(tile("Before", `${before} B`), tile("After", `${after} B`), tile("Saved", `${saved}%`));
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("JavaScript", source), error),
+      stack(panel("Minified", result), stats),
+    ),
+    foot: actions(copyButton(() => result.value, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };