mevebu 2.3.0 → 2.4.0

package/README.md

@@ -2,7 +2,7 @@
 
 # mevebu
 
-**215 free browser tools, one page each. No sign up. No uploads. Everything runs in your tab.**
+**220 free browser tools, one page each. No sign up. No uploads. Everything runs in your tab.**
 
 A private toolbox for the small jobs that do not deserve a whole app: format JSON, decode a JWT, make a password, build a cron line, pick a color, scan a QR code, and a lot more.
 
@@ -10,7 +10,7 @@ A private toolbox for the small jobs that do not deserve a whole app: format JSO
 [![npm downloads](https://img.shields.io/npm/dm/mevebu?color=2ea44f)](https://www.npmjs.com/package/mevebu)
 [![License: MIT](https://img.shields.io/github/license/mevebu/mevebu?color=blue)](./LICENSE)
 [![GitHub stars](https://img.shields.io/github/stars/mevebu/mevebu?style=flat&color=yellow)](https://github.com/mevebu/mevebu/stargazers)
-![Tools](https://img.shields.io/badge/tools-215-brightgreen)
+![Tools](https://img.shields.io/badge/tools-220-brightgreen)
 ![Privacy](https://img.shields.io/badge/privacy-100%25%20in--browser-blue)
 
 [Quick start](#quick-start) · [What's inside](#whats-inside) · [Privacy](#privacy-by-design) · [Credit](#credit) · [Development](#development) · [FAQ](#faq)
@@ -23,7 +23,7 @@ A private toolbox for the small jobs that do not deserve a whole app: format JSO
 
 ## What is mevebu?
 
-mevebu is a collection of **215 small online tools** that all run **inside your browser**. Each tool lives on its own page, does one job, and does it fast. Most of them update as you type, so there is no submit button and no waiting.
+mevebu is a collection of **220 small online tools** that all run **inside your browser**. Each tool lives on its own page, does one job, and does it fast. Most of them update as you type, so there is no submit button and no waiting.
 
 Think of it as a clean, private alternative to the usual "free online tools" websites. There are no accounts, no ads in your way, no uploads, and no tracking. Your text, passwords, tokens, and files stay on your device.
 
@@ -64,13 +64,13 @@ mevebu tries port `5555` first, then `5678`, then `5432`, and finally any free p
 
 ## What's inside
 
-mevebu has **215 tools in 20 categories**. Here is the full breakdown:
+mevebu has **220 tools in 20 categories**. Here is the full breakdown:
 
 | Category           | Tools |
 | ------------------ | ----: |
 | Data Generator     |    10 |
 | Passwords and keys |    20 |
-| Developer          |    21 |
+| Developer          |    26 |
 | Convert            |    15 |
 | Text and data      |    14 |
 | Daily use          |     8 |
@@ -88,7 +88,7 @@ mevebu has **215 tools in 20 categories**. Here is the full breakdown:
 | GitHub             |     8 |
 | Units              |     8 |
 | QR codes           |     2 |
-| **Total**          | **215** |
+| **Total**          | **220** |
 
 The counts come straight from the tool registry, so this table and the app never drift apart.
 
@@ -176,7 +176,7 @@ That is all. The catalog, search, breadcrumbs, and category pages pick it up aut
 ## FAQ
 
 **What is mevebu?**
-mevebu is a free, open source collection of 215 browser based tools for developers, students, creators, and everyday use. Every tool runs locally in your browser.
+mevebu is a free, open source collection of 220 browser based tools for developers, students, creators, and everyday use. Every tool runs locally in your browser.
 
 **Is mevebu really free?**
 Yes. It is MIT licensed, with no paid tier, no account, and no usage limits.

package/mevebu/libs/js/core.js

@@ -750,7 +750,7 @@ export function blank(iconName, text) {
 // ---------- version ----------
 
 // Kept in one place. The CLI reads the same value from package.json.
-export const VERSION = "2.3.0";
+export const VERSION = "2.4.0";
 export const PACKAGE_NAME = "mevebu";
 export const REPO_SLUG = "mevebu/mevebu";
 

package/mevebu/libs/js/js-tokens.js

@@ -0,0 +1,195 @@
+// A small JavaScript scanner shared by the formatter and the minifier. It does
+// not build an AST: it separates code from strings, templates, regexes and
+// comments so whitespace can be changed without touching what a token means.
+
+const KEYWORDS_BEFORE_REGEX = new Set([
+  "return", "typeof", "instanceof", "in", "of", "new", "delete", "void", "do",
+  "else", "case", "yield", "await", "throw",
+]);
+
+const PUNCT = [
+  ">>>=", "===", "!==", "**=", "<<=", ">>=", ">>>", "...", "&&=", "||=", "??=",
+  "=>", "==", "!=", "<=", ">=", "&&", "||", "??", "?.", "++", "--", "+=", "-=",
+  "*=", "/=", "%=", "&=", "|=", "^=", "<<", ">>", "**",
+];
+
+const isWordStart = (ch) => /[A-Za-z_$\u0080-\uffff]/.test(ch);
+const isWord = (ch) => /[A-Za-z0-9_$\u0080-\uffff]/.test(ch);
+const isDigit = (ch) => /[0-9]/.test(ch);
+
+function regexAllowed(previous) {
+  if (!previous) return true;
+  if (previous.type === "word") return KEYWORDS_BEFORE_REGEX.has(previous.value);
+  if (previous.type === "number" || previous.type === "string" || previous.type === "template" || previous.type === "regex") return false;
+  if (previous.type === "punct") return ![")", "]", "}"].includes(previous.value);
+  return true;
+}
+
+function scanTemplate(source, start) {
+  let i = start + 1;
+  while (i < source.length) {
+    const ch = source[i];
+    if (ch === "\\") { i += 2; continue; }
+    if (ch === "`") return { end: i + 1 };
+    if (ch === "$" && source[i + 1] === "{") {
+      const inner = scanBraces(source, i + 2);
+      if (inner.error) return inner;
+      i = inner.end;
+      continue;
+    }
+    i++;
+  }
+  return { error: "Unclosed template literal." };
+}
+
+function scanBraces(source, start) {
+  let depth = 1;
+  let i = start;
+  while (i < source.length) {
+    const ch = source[i];
+    if (ch === "'" || ch === '"') {
+      const end = scanString(source, i);
+      if (end.error) return end;
+      i = end.end;
+      continue;
+    }
+    if (ch === "`") {
+      const end = scanTemplate(source, i);
+      if (end.error) return end;
+      i = end.end;
+      continue;
+    }
+    if (ch === "/" && source[i + 1] === "/") {
+      const end = source.indexOf("\n", i);
+      i = end === -1 ? source.length : end;
+      continue;
+    }
+    if (ch === "/" && source[i + 1] === "*") {
+      const end = source.indexOf("*/", i + 2);
+      if (end === -1) return { error: "Unclosed block comment." };
+      i = end + 2;
+      continue;
+    }
+    if (ch === "{") depth++;
+    if (ch === "}") {
+      depth--;
+      if (depth === 0) return { end: i + 1 };
+    }
+    i++;
+  }
+  return { error: "Unclosed ${ in a template literal." };
+}
+
+function scanString(source, start) {
+  const quote = source[start];
+  let i = start + 1;
+  while (i < source.length) {
+    const ch = source[i];
+    if (ch === "\\") { i += 2; continue; }
+    if (ch === quote) return { end: i + 1 };
+    if (ch === "\n") return { error: "Unclosed string." };
+    i++;
+  }
+  return { error: "Unclosed string." };
+}
+
+function scanRegex(source, start) {
+  let i = start + 1;
+  let inClass = false;
+  while (i < source.length) {
+    const ch = source[i];
+    if (ch === "\\") { i += 2; continue; }
+    if (ch === "[") inClass = true;
+    else if (ch === "]") inClass = false;
+    else if (ch === "/" && !inClass) {
+      i++;
+      while (i < source.length && /[a-z]/i.test(source[i])) i++;
+      return { end: i };
+    } else if (ch === "\n") return { error: "Unclosed regular expression." };
+    i++;
+  }
+  return { error: "Unclosed regular expression." };
+}
+
+/**
+ * Split JavaScript into significant tokens. Whitespace is dropped, but each
+ * token remembers whether a newline came before it.
+ * @param {string} source
+ * @returns {{tokens: object[], error: string|null}}
+ */
+export function tokenize(source) {
+  const tokens = [];
+  let i = 0;
+  let newline = false;
+  const push = (token) => {
+    token.newline = newline;
+    newline = false;
+    tokens.push(token);
+  };
+
+  while (i < source.length) {
+    const ch = source[i];
+    if (ch === "\n") { newline = true; i++; continue; }
+    if (/\s/.test(ch)) { i++; continue; }
+
+    if (ch === "/" && source[i + 1] === "/") {
+      const end = source.indexOf("\n", i);
+      const stop = end === -1 ? source.length : end;
+      push({ type: "lineComment", value: source.slice(i, stop) });
+      i = stop;
+      continue;
+    }
+    if (ch === "/" && source[i + 1] === "*") {
+      const end = source.indexOf("*/", i + 2);
+      if (end === -1) return { tokens, error: "Unclosed block comment." };
+      push({ type: "blockComment", value: source.slice(i, end + 2) });
+      i = end + 2;
+      continue;
+    }
+    if (ch === "'" || ch === '"') {
+      const result = scanString(source, i);
+      if (result.error) return { tokens, error: result.error };
+      push({ type: "string", value: source.slice(i, result.end) });
+      i = result.end;
+      continue;
+    }
+    if (ch === "`") {
+      const result = scanTemplate(source, i);
+      if (result.error) return { tokens, error: result.error };
+      push({ type: "template", value: source.slice(i, result.end) });
+      i = result.end;
+      continue;
+    }
+    if (ch === "/" && regexAllowed(tokens[tokens.length - 1])) {
+      const result = scanRegex(source, i);
+      if (result.error) return { tokens, error: result.error };
+      push({ type: "regex", value: source.slice(i, result.end) });
+      i = result.end;
+      continue;
+    }
+    if (isDigit(ch) || (ch === "." && isDigit(source[i + 1]))) {
+      const match = source.slice(i).match(/^(?:0[xX][0-9a-fA-F_]+|0[bB][01_]+|0[oO][0-7_]+|(?:\d[\d_]*)?\.?\d[\d_]*(?:[eE][+-]?\d[\d_]*)?n?)/);
+      const value = match ? match[0] : ch;
+      push({ type: "number", value });
+      i += value.length;
+      continue;
+    }
+    if (isWordStart(ch)) {
+      let end = i + 1;
+      while (end < source.length && isWord(source[end])) end++;
+      push({ type: "word", value: source.slice(i, end) });
+      i = end;
+      continue;
+    }
+    const multi = PUNCT.find((entry) => source.startsWith(entry, i));
+    const value = multi || ch;
+    push({ type: "punct", value });
+    i += value.length;
+  }
+
+  return { tokens, error: null };
+}
+
+export function bytes(text) {
+  return new TextEncoder().encode(text).length;
+}

package/mevebu/libs/js/registry.js

@@ -572,6 +572,96 @@ export const TOOLS = [
     load: () => import("./tools/ssh-fingerprint.js"),
   },
 
+  {
+    id: "javascript-formatter",
+    category: "developer",
+    name: "JavaScript Formatter",
+    icon: "file-code",
+    note: "Indent a JavaScript file so it reads like code again.",
+    about: "Re-indents tokens and keeps strings, templates, regexes and comments as they were.",
+    tutorial: {
+      intro: "Paste a script and get the same code with readable indentation.",
+      steps: [
+        "Paste the script. Pick two or four spaces.",
+        "Read the first bracket or string problem if the script cannot be laid out.",
+        "Copy the result. Only whitespace changed, not the code.",
+      ],
+    },
+    keywords: "javascript js format beautify indent pretty print code",
+    load: () => import("./tools/javascript-formatter.js"),
+  },
+  {
+    id: "javascript-minifier",
+    category: "developer",
+    name: "JavaScript Minifier",
+    icon: "minimize-2",
+    note: "Strip comments and extra whitespace from JavaScript.",
+    about: "Shows the bytes before and after. Variables are never renamed.",
+    tutorial: {
+      intro: "Make a script smaller without changing what it does.",
+      steps: [
+        "Paste the script.",
+        "Read the size before and after, and the percentage saved.",
+        "Copy the result. Keep license comments with /*! or @license.",
+      ],
+    },
+    keywords: "javascript js minify compress whitespace comments size",
+    load: () => import("./tools/javascript-minifier.js"),
+  },
+  {
+    id: "yaml-to-json",
+    category: "developer",
+    name: "YAML to JSON",
+    icon: "braces",
+    note: "Turn a YAML document into JSON.",
+    about: "Anchors are resolved, comments are dropped, and the key order stays.",
+    tutorial: {
+      intro: "Convert a config file for an API or a script that expects JSON.",
+      steps: [
+        "Paste the YAML.",
+        "Read the JSON on the right. An invalid document reports its line.",
+        "Copy it or download data.json.",
+      ],
+    },
+    keywords: "yaml yml to json convert config kubernetes ci",
+    load: () => import("./tools/yaml-to-json.js"),
+  },
+  {
+    id: "json-to-yaml",
+    category: "developer",
+    name: "JSON to YAML",
+    icon: "file-text",
+    note: "Write JSON as block or flow YAML.",
+    about: "Two-space block style by default, with a flow toggle for compact output.",
+    tutorial: {
+      intro: "Turn an API response into a config file.",
+      steps: [
+        "Paste the JSON.",
+        "Pick Block or Flow. Block reads better, flow is shorter.",
+        "Copy the YAML or download data.yaml.",
+      ],
+    },
+    keywords: "json to yaml yml convert config block flow",
+    load: () => import("./tools/json-to-yaml.js"),
+  },
+  {
+    id: "xml-minifier",
+    category: "developer",
+    name: "XML Minifier",
+    icon: "code",
+    note: "Remove indentation between XML tags.",
+    about: "CDATA, comments and attribute values are copied unchanged.",
+    tutorial: {
+      intro: "Compact an XML file without touching its content.",
+      steps: [
+        "Paste the XML.",
+        "Read the size saved. Text that is not only whitespace stays.",
+        "Copy the result.",
+      ],
+    },
+    keywords: "xml minify compact whitespace cdata size",
+    load: () => import("./tools/xml-minifier.js"),
+  },
   {
     id: "uuid-generator",
     category: "developer",

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 };