mevebu 1.4.3 → 1.4.4

package/mevebu/app/mevebu.js

@@ -6,7 +6,7 @@ import { route, start, match, currentPath, go } from "../libs/js/router.js";
 import {
   $, $$, el, icon, getFavorites, isFavorite, toggleFavorite, setTheme,
   modal, modalHead, button, copyButton, openPalette, shuffle, toolcard, blank,
-  VERSION, PACKAGE_NAME, checkForUpdate, updateCommand, compareVersions,
+  VERSION, PACKAGE_NAME, checkForUpdate, updateCommand, compareVersions, releaseUrl,
 } from "../libs/js/core.js";
 
 const DONATE_URL = "https://buymeacoffee.com/fastro";
@@ -174,17 +174,18 @@ function openDonate() {
   });
 }
 
-// `latest` is the published version, or null when the check could not run.
+// The footer chip opens this. `latest` is the published version, or null when the
+// check has not answered; opening the modal retries it, so a registry hiccup on
+// the first load is not a dead end. The body and the actions repaint in place
+// while that retry runs.
 function openUpdate(latest) {
-  const updatable = latest && compareVersions(latest, VERSION) > 0;
-  const command = updateCommand();
+  let resolved = latest;
+  let busy = false;
 
-  const commandBox = el(
-    "div",
-    { class: "mt-2.5 flex flex-wrap items-center gap-2 rounded-r2 border border-orbit bg-deck-2 py-2.5 pe-2.5 ps-4" },
-    el("code", { class: "min-w-0 flex-1 font-mono text-sm [overflow-wrap:anywhere]" }, command),
-    copyButton(() => command, "Copy command", "fill")
-  );
+  const bodyBox = el("div", { class: "grid gap-2.5" });
+  const actionBox = el("div", { class: "flex flex-wrap items-center justify-end gap-2" });
+  const command = updateCommand();
+  const updatable = () => Boolean(resolved) && compareVersions(resolved, VERSION) > 0;
 
   const versionRow = (label, value, isNew) =>
     el(
@@ -194,22 +195,57 @@ function openUpdate(latest) {
       el("span", { class: `font-mono text-sm font-semibold ${isNew ? "text-jade" : ""}` }, value)
     );
 
-  modal({
-    label: "Update mevebu",
-    body: [
-      modalHead("circle-arrow-up", updatable ? `mevebu ${latest} is out` : "mevebu is up to date"),
-      updatable
-        ? el("p", {}, "A newer version is published. Update your global install, then run ", el("code", { class: "rounded-[4px] bg-deck-2 px-[5px] py-px font-mono text-[0.92em]" }, PACKAGE_NAME), " again.")
-        : el("p", {}, "You are on the latest version. Nothing to do."),
+  function paint() {
+    const newer = updatable();
+    bodyBox.replaceChildren(...[
+      modalHead(
+        busy || !resolved ? "refresh-cw" : "circle-arrow-up",
+        busy
+          ? "Checking for updates"
+          : newer
+            ? `mevebu ${resolved} is out`
+            : resolved
+              ? "mevebu is up to date"
+              : "Could not check for updates"
+      ),
+      newer
+        ? el("p", {}, "A newer version is published. Update your global install, then run ", el("code", { class: CODE }, PACKAGE_NAME), " again.")
+        : null,
       el("div", { class: "mt-[18px] overflow-hidden rounded-r2 border border-orbit" },
         versionRow("Installed", VERSION, false),
-        versionRow("Latest", latest ?? "-", Boolean(updatable))),
-      updatable ? el("p", { class: "mt-3.5 text-sm" }, "Copy the command below and run it in your terminal.") : null,
-      updatable ? commandBox : null,
-    ],
-    actions: updatable
-      ? [el("a", { class: LINK_PLAIN, href: `${REPO_URL}/releases/tag/v${latest}`, target: "_blank", rel: "noopener" }, "What changed")]
-      : [],
+        versionRow("Latest", busy ? "Checking" : resolved ?? "Unknown", newer)),
+      newer ? el("p", { class: "mt-3.5 text-sm" }, "Copy the command below and run it in your terminal.") : null,
+      newer
+        ? el("div", { class: "mt-2.5 flex flex-wrap items-center gap-2 rounded-r2 border border-orbit bg-deck-2 py-2.5 pe-2.5 ps-4" },
+            el("code", { class: "min-w-0 flex-1 font-mono text-sm [overflow-wrap:anywhere]" }, command),
+            copyButton(() => command, "Copy command", "fill"))
+        : null,
+    ].filter(Boolean));
+
+    actionBox.replaceChildren(...[
+      !resolved && !busy ? button("Check again", { icon: "refresh-cw", onclick: () => check() }) : null,
+      el("a", { class: LINK_PLAIN, href: releaseUrl(resolved), target: "_blank", rel: "noopener" }, "What changed"),
+    ].filter(Boolean));
+  }
+
+  async function check() {
+    if (busy) return;
+    busy = true;
+    paint();
+    const result = await checkForUpdate();
+    busy = false;
+    if (result?.latest) resolved = result.latest;
+    paint();
+  }
+
+  paint();
+  modal({
+    label: "Update mevebu",
+    body: [bodyBox],
+    actions: [actionBox],
+    onOpen: () => {
+      if (!resolved) check();
+    },
   });
 }
 

package/mevebu/app/tailwind.css

@@ -961,6 +961,9 @@
   .py-7 {
     padding-block: calc(var(--spacing) * 7);
   }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
   .py-\[3px\] {
     padding-block: 3px;
   }

package/mevebu/libs/js/core.js

@@ -743,7 +743,7 @@ export function blank(iconName, text) {
 // ---------- version ----------
 
 // Kept in one place. The CLI reads the same value from package.json.
-export const VERSION = "1.4.3";
+export const VERSION = "1.4.4";
 export const PACKAGE_NAME = "mevebu";
 export const REPO_SLUG = "mevebu/mevebu";
 
@@ -758,34 +758,52 @@ export function compareVersions(a, b) {
   return 0;
 }
 
-/**
- * Asks the npm registry for the latest published version. Fails silently when
- * offline, so the app never blocks on the network. Resolves to
- * `{ latest, current, outdated }` or null when the check did not complete.
- */
-export async function checkForUpdate({ timeout = 5000 } = {}) {
+/** One JSON GET with its own timeout. Answers null on any failure. */
+async function getJson(url, timeout) {
   const controller = new AbortController();
   const timer = setTimeout(() => controller.abort(), timeout);
   try {
-    const response = await fetch(`https://registry.npmjs.org/${PACKAGE_NAME}/latest`, {
-      signal: controller.signal,
-      headers: { accept: "application/json" },
-    });
-    clearTimeout(timer);
+    const response = await fetch(url, { signal: controller.signal, headers: { accept: "application/json" } });
     if (!response.ok) return null;
-    const data = await response.json();
-    const latest = data?.version;
-    if (!latest) return null;
-    return { latest, current: VERSION, outdated: compareVersions(latest, VERSION) > 0 };
+    return await response.json();
   } catch {
-    clearTimeout(timer);
     return null;
+  } finally {
+    clearTimeout(timer);
   }
 }
 
+async function npmVersion(timeout) {
+  const data = await getJson(`https://registry.npmjs.org/${PACKAGE_NAME}/latest`, timeout);
+  return data?.version ?? null;
+}
+
+async function githubVersion(timeout) {
+  const data = await getJson(`https://api.github.com/repos/${REPO_SLUG}/releases/latest`, timeout);
+  return (data?.tag_name ?? "").replace(/^v/, "") || null;
+}
+
+/**
+ * Reads the newest published version. npm answers first and the GitHub release
+ * is the fallback, since either one can be unreachable on its own. Resolves to
+ * `{ latest, current, outdated }`, or null when neither answered, so the app
+ * never blocks on the network and the modal can offer a retry.
+ */
+export async function checkForUpdate({ timeout = 5000 } = {}) {
+  const latest = (await npmVersion(timeout)) ?? (await githubVersion(timeout));
+  if (!latest) return null;
+  return { latest, current: VERSION, outdated: compareVersions(latest, VERSION) > 0 };
+}
+
 /** The command that updates an existing global install. */
 export function updateCommand() {
   return `npm install -g ${PACKAGE_NAME}`;
 }
 
+/** The GitHub page listing what changed, for one version or for every release. */
+export function releaseUrl(version) {
+  const base = `https://github.com/${REPO_SLUG}/releases`;
+  return version ? `${base}/tag/v${version}` : base;
+}
+
 export { hasIcon };

package/mevebu/libs/js/registry.js

@@ -622,7 +622,7 @@ export const TOOLS = [
     tutorial: {
       intro: "Compare two versions of a text.",
       steps: [
-        "Paste the first text on the left and the second on the right.",
+        "Paste the first text and the second text.",
         "Added and removed lines are marked in the result.",
         "Toggle Ignore case or Ignore spaces to soften the comparison.",
       ],
@@ -656,7 +656,7 @@ export const TOOLS = [
     name: "JWT Decoder",
     icon: "signature",
     note: "Read a JWT header and payload.",
-    about: "Decodes in this tab. Decoding is not signature validation.",
+    about: "Reads the header and payload. Decoding is not signature validation.",
     tutorial: {
       intro: "Read the header and payload of a JSON Web Token.",
       steps: [
@@ -678,7 +678,7 @@ export const TOOLS = [
     tutorial: {
       intro: "Format or compact a JSON document.",
       steps: [
-        "Paste JSON on the left.",
+        "Paste JSON.",
         "Pick 2 or 4 spaces, or Compact.",
         "Copy the result. An invalid document shows where parsing stopped.",
       ],
@@ -714,7 +714,7 @@ export const TOOLS = [
       intro: "Compact JSON by removing needless whitespace.",
       steps: [
         "Paste JSON.",
-        "The compacted document and the size saved appear on the right.",
+        "The compacted document and the size saved are shown.",
         "Copy the result.",
       ],
     },

package/mevebu/libs/js/tools/case-inspector.js

@@ -51,7 +51,7 @@ function detectCase(text) {
 }
 
 export function mount(slot) {
-  const source = textArea({ rows: 5, value: "helloWorld", "aria-label": "Text", placeholder: "Type or paste text" });
+  const source = textArea({ rows: 5, value: "helloWorld", "aria-label": "Text" });
   const detected = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "No letters");
   const kv = el(
     "div",
@@ -76,7 +76,7 @@ export function mount(slot) {
       const on = row.dataset.case === active;
       if (on) row.dataset.on = "";
       else delete row.dataset.on;
-      row.setAttribute("aria-pressed", String(on));
+      row.setAttribute("aria-current", on ? "true" : "false");
     }
   }
 
@@ -84,7 +84,7 @@ export function mount(slot) {
     const button = el(
       "button",
       {
-        class: "group flex w-full cursor-pointer items-baseline justify-between gap-3 rounded-r1 border border-transparent bg-transparent px-3 py-[9px] text-start transition-colors duration-150 hover:bg-deck-2 data-[on]:border-jade data-[on]:bg-jade-soft", type: "button", dataset: { case: name }, "aria-pressed": "false",
+        class: "group flex w-full cursor-pointer items-baseline justify-between gap-3 rounded-r1 border border-transparent bg-transparent px-3 py-[9px] text-start transition-colors duration-150 hover:bg-deck-2 data-[on]:border-jade data-[on]:bg-jade-soft", type: "button", dataset: { case: name }, "aria-current": "false",
         onclick: async () => {
           const value = button.querySelector("[data-value]").textContent.trim();
           if (value) toast((await copyText(value)) ? "Copied" : "Copy failed");

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

@@ -1,13 +1,12 @@
 // Pretty-prints or compacts JSON and points at the error when it is invalid.
-import { bench, stack, panel, textArea, notice, chipRow, copyButton, actions, toolcard } from "../core.js";
+import { bench, stack, panel, textArea, output, notice, chipRow, copyButton, actions, toolcard } from "../core.js";
 
 export function mount(slot) {
   const source = textArea({
     rows: 12,
     "aria-label": "JSON",
-    placeholder: "Paste JSON",
     value: '{"hello":"world","count":3,"items":[1,2,3]}'});
-  const result = textArea({ rows: 12, readonly: true, "aria-label": "Result" });
+  const result = output({ tag: "textarea", rows: 12 });
   const error = notice("error");
   let indent = "2";
 

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

@@ -1,5 +1,5 @@
 // Compacts valid JSON and reports the size saved.
-import { el, bench, stack, panel, textArea, notice, copyButton, actions, toolcard } from "../core.js";
+import { el, bench, stack, panel, textArea, output, notice, copyButton, actions, toolcard } from "../core.js";
 
 const bytes = (text) => new TextEncoder().encode(text).length;
 
@@ -10,9 +10,8 @@ export function mount(slot) {
   const source = textArea({
     rows: 12,
     "aria-label": "JSON",
-    placeholder: "Paste JSON",
     value: '{\n  "hello": "world",\n  "count": 3\n}'});
-  const result = textArea({ rows: 12, readonly: true, "aria-label": "Minified JSON" });
+  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");
 

package/mevebu/libs/js/tools/json-to-typescript.js

@@ -56,7 +56,6 @@ export function mount(slot) {
   const source = textArea({
     rows: 12,
     "aria-label": "JSON",
-    placeholder: "Paste a JSON object or array",
     value: '{\n  "id": 1,\n  "name": "Ada",\n  "tags": ["dev"],\n  "address": { "city": "London" }\n}'});
   const nameInput = textInput({ value: "Root", "aria-label": "Root type name" });
   const result = output({ rows: 16 });

package/mevebu/libs/js/tools/json-validator.js

@@ -12,7 +12,7 @@ function describe(data) {
 }
 
 export function mount(slot) {
-  const source = textArea({ rows: 12, "aria-label": "JSON", placeholder: "Paste JSON" });
+  const source = textArea({ rows: 12, "aria-label": "JSON" });
   const report = output({ rows: 4 });
   const error = notice("error");
 

package/mevebu/libs/js/tools/jwt-decoder.js

@@ -12,7 +12,7 @@ function decodeSegment(segment) {
 }
 
 export function mount(slot) {
-  const source = textArea({ rows: 4, "aria-label": "Token", placeholder: "Paste a JWT" });
+  const source = textArea({ rows: 4, "aria-label": "Token" });
   const headerOut = output({ rows: 4 });
   const payloadOut = output({ rows: 8 });
   const claims = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" });

package/mevebu/libs/js/tools/prefix-suffix.js

@@ -1,12 +1,12 @@
 // Adds a prefix, a suffix, or automatic numbering to every line.
-import { bench, stack, panel, textArea, textInput, checkbox, copyButton, actions, toolcard } from "../core.js";
+import { bench, stack, panel, textArea, textInput, output, checkbox, copyButton, actions, toolcard } from "../core.js";
 
 export function mount(slot) {
   const source = textArea({ rows: 11, "aria-label": "Text", placeholder: "Paste your list, one entry per line" });
-  const prefixField = textInput({ placeholder: "Prefix", "aria-label": "Prefix" });
-  const suffixField = textInput({ placeholder: "Suffix", "aria-label": "Suffix" });
+  const prefixField = textInput({ "aria-label": "Prefix" });
+  const suffixField = textInput({ "aria-label": "Suffix" });
   const numbering = checkbox("Numbering", { checked: false });
-  const result = textArea({ rows: 11, readonly: true, "aria-label": "Result" });
+  const result = output({ tag: "textarea", rows: 11 });
 
   function run() {
     const text = source.value;

package/mevebu/libs/js/tools/regex-tester.js

@@ -10,7 +10,7 @@ export function mount(slot) {
     rows: 8,
     "aria-label": "Text to test",
     value: "Contact ada@example.com or grace@navy.com for details."});
-  const pane = el("div", { class: "min-h-[120px] max-h-[380px] overflow-auto wrap-anywhere rounded-r1 border border-orbit bg-deck-2 px-4 py-3.5 leading-normal [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&_h1]:my-4 [&_h2]:my-4 [&_h3]:my-4 [&_h1]:tracking-[-0.01em] [&_h2]:tracking-[-0.01em] [&_h3]:tracking-[-0.01em] [&_p]:mb-2.5 [&_ul]:mb-2.5 [&_ol]:mb-2.5 [&_pre]:mb-2.5 [&_ul]:ps-[22px] [&_ol]:ps-[22px] [&_code]:rounded-[5px] [&_code]:bg-deck [&_code]:px-[5px] [&_code]:py-px [&_code]:font-mono [&_code]:text-2xs [&_pre]:overflow-auto [&_pre]:rounded-r1 [&_pre]:bg-deck [&_pre]:px-3 [&_pre]:py-2.5 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_a]:text-jade [&_table]:border-collapse [&_th]:border [&_td]:border [&_th]:border-orbit [&_td]:border-orbit [&_th]:px-[9px] [&_td]:px-[9px] [&_th]:py-1.5 [&_td]:py-1.5" });
+  const pane = el("div", { class: "min-h-[120px] max-h-[380px] overflow-auto wrap-anywhere rounded-r1 border border-orbit bg-deck-2 px-4 py-3.5 leading-normal" });
   const listWrap = el("div", { class: "max-h-80 overflow-auto" });
   const error = notice("error");
   let lines = [];

package/mevebu/libs/js/tools/slug-converter.js

@@ -13,7 +13,7 @@ function slugify(text, sep) {
 }
 
 export function mount(slot) {
-  const source = textInput({ value: "Hello mevebu world", placeholder: "Title", "aria-label": "Title" });
+  const source = textInput({ value: "Hello mevebu world", "aria-label": "Title" });
   const result = textInput({ readonly: true, mono: true, "aria-label": "Slug" });
 
   let sep = "-";

package/mevebu/libs/js/tools/text-diff.js

@@ -4,8 +4,8 @@ import { el, bench, stack, panel, textArea, toggleRow, notice, button, copyButto
 const MAX_LINES = 800;
 
 export function mount(slot) {
-  const left = textArea({ rows: 9, "aria-label": "First text", placeholder: "First text" });
-  const right = textArea({ rows: 9, "aria-label": "Second text", placeholder: "Second text" });
+  const left = textArea({ rows: 9, "aria-label": "First text" });
+  const right = textArea({ rows: 9, "aria-label": "Second text" });
   const options = toggleRow([
     { value: "ignore", label: "Ignore case", checked: false },
     { value: "spaces", label: "Ignore spaces", checked: false }]);
@@ -52,9 +52,10 @@ export function mount(slot) {
     const aRaw = left.value === "" ? [] : left.value.split("\n");
     const bRaw = right.value === "" ? [] : right.value.split("\n");
     if (!aRaw.length && !bRaw.length) {
-      diffBox.replaceChildren();
+      // The result area explains itself while there is nothing to compare.
+      diffBox.replaceChildren(el("div", { class: "bg-deck-2 px-4 py-8 text-center text-sm text-ink-3" }, "Paste two texts to compare."));
       rows = [];
-      note.write("Paste two texts to compare.");
+      note.write("");
       return;
     }
     const truncated = aRaw.length > MAX_LINES || bRaw.length > MAX_LINES;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mevebu",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "Small tools that run in your browser. No accounts, no uploads, no tracking.",
   "license": "MIT",
   "type": "module",