Skip to content

FieldShield v1.1.0 — Worker Blob URL, CSS Cursor Drift, CREDIT_CARD Pattern

Choose a tag to compare

@anuragnedunuri anuragnedunuri released this 12 Apr 22:24
· 5 commits to main since this release

What's changed

Fixed

  • Worker instantiation for npm consumers — replaced new URL("../workers/fieldshield.worker.ts", import.meta.url) with a
    blob URL via Vite's ?worker&inline import. The previous approach referenced the TypeScript source file which does not exist in the
    published npm package, causing a runtime worker failure for all npm consumers. The worker is now compiled and inlined into fieldshield.js at build time — no separate worker file, no bundler configuration required.

  • CSS cursor drift from letter/word spacing — added letter-spacing: 0, word-spacing: 0, and font-weight: inherit to .fieldshield-mask-layer, .fieldshield-real-input, and .fieldshield-grow. Without these, consumer stylesheets setting non-zero letter or word spacing on a parent element cascade unevenly into both overlay layers, causing the cursor to appear offset from the displayed masked text.

Changed

  • CREDIT_CARD pattern — broadened Mastercard prefix from 5[1-5] to 5\d to cover all IIN ranges; added 6\d{3} variant for Discover and UnionPay cards. Luhn validation is still recommended post-match in production.

Documentation

  • Updated Framework compatibility — the worker is now bundled inline; no per-bundler configuration (worker-loader, publicPath) is needed.
  • Updated CSP sectionworker-src 'self' blob: is now required. The blob: source is mandatory for the inlined worker to load.

Live demo

https://fieldshield-demo.vercel.app