DEV Community

Dev Nestio
Dev Nestio

Posted on

Implement semver Bump, Compare & Range Check in Vanilla JS

I built a browser-only semantic versioning calculator covering bump, compare, and range constraints.

Try it: https://devnestio.pages.dev/semver-calc/

Parse with the official semver regex

const SEMVER_RE = /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-(...))?(?:\+(...))?$/;

function parseSemver(v) {
  v = v.trim().replace(/^v/, "");
  const m = SEMVER_RE.exec(v);
  if (!m) return null;
  return { major: +m[1], minor: +m[2], patch: +m[3], prerelease: m[4]||null, build: m[5]||null };
}
Enter fullscreen mode Exit fullscreen mode

Pre-release comparison

function comparePre(a, b) {
  if (!a && !b) return 0;
  if (!a) return 1;   // no pre-release > pre-release
  if (!b) return -1;
  const aParts = a.split("."), bParts = b.split(".");
  for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
    const aNum = /^\d+$/.test(aParts[i]);
    // numeric identifiers compared as numbers, alphanumeric as strings
  }
}
Enter fullscreen mode Exit fullscreen mode

Range constraints (^, ~)

if (tok.startsWith("^")) {
  const p = parseSemver(tok.slice(1));
  if (p.major !== 0) return [`>=${fmtVersion(p)}`, `<${p.major+1}.0.0`];
  // handle 0.x.x and 0.0.x separately
}
if (tok.startsWith("~")) {
  const p = parseSemver(tok.slice(1));
  return [`>=${fmtVersion(p)}`, `<${p.major}.${p.minor+1}.0`];
}
Enter fullscreen mode Exit fullscreen mode

Features

  • 7 bump types: major, minor, patch, premajor, preminor, prepatch, prerelease
  • Click a bump card to adopt that version
  • Compare two versions with > / < / = indicator
  • Range check: >=1.0.0 <2.0.0, ^1.5, ~1.5.0
  • Version history (last 10)

DevNestio — browser-only developer tools.

Top comments (0)