FS Packages

Appearance

FS PackagesShared frontend services

A collection of framework-agnostic and Vue-powered service packages built by Script Development.

Get Started
View on GitHub
Browse on npm

Factory Pattern

Every package exports a createXxxService() factory that returns a plain object. No classes, no singletons, no hidden state. You control when and where services are created.

Loose Coupling

Packages communicate through structural typing (duck types), not direct imports. Swap implementations without changing consumers. fs-theme doesn't import fs-storage — it accepts anything with get() and put().

Middleware Architecture

HTTP, loading, dialog, and router all support composable middleware pipelines. Register a handler, get an unregister function back. Stack behaviors without modifying source code.

100% Test Coverage

Every package maintains 100% code coverage and 90% mutation testing score. An 8-gate CI pipeline runs audit, format, lint, build, typecheck, package lint, coverage, and mutation testing on every PR.

Component Agnostic

Toast and dialog services manage lifecycle and state — you bring your own Vue components. No opinionated UI. Your design system, our plumbing.

Type Safe

Built with TypeScript 6.0+ in strict mode. Router navigation is type-checked against your route definitions. Translation keys are validated at compile time. No stringly-typed APIs.

The Packages ​

All packages are published under the @script-development scope on npm.

Foundation ​

These packages have zero Vue dependency — they work in any TypeScript project.

PackageDescription
fs-httpHTTP service factory with middleware architecture
fs-storagelocalStorage service factory with prefix namespacing
fs-helpersTree-shakeable utilities: deep copy, type guards, case conversion

Services ​

Vue-powered reactive services for common application concerns.

PackageDescription
fs-themeReactive dark/light mode with system preference detection
fs-loadingLoading state service with HTTP middleware integration
fs-toastComponent-agnostic toast notification queue
fs-dialogComponent-agnostic dialog stack with error middleware
fs-translationType-safe reactive i18n with multi-locale support

Domain ​

Higher-level packages for domain-driven application architecture.

PackageDescription
fs-adapter-storeReactive state management with CRUD resource adapters
fs-routerType-safe router with CRUD navigation and middleware pipeline

UI Components ​

Headless, themeable Vue components (the ui-* family) — behaviour and accessibility in the package, all styling through a CSS custom-property contract you map your design tokens onto.

PackageDescription
ui-inputsHeadless form inputs — field/label/error, text/number/date/textarea, checkbox/switch/radio, select/combobox/multi-select — themed via --ui-* variables

Quality Guarantees ​

Every package passes an 8-gate CI pipeline before it can be published:

  1. Security audit — npm audit for known vulnerabilities
  2. Formatting — oxfmt enforces consistent code style
  3. Linting — oxlint catches bugs and anti-patterns
  4. Build — tsdown compiles to dual ESM + CJS output
  5. Type checking — TypeScript strict mode, no implicit any
  6. Package lint — publint and attw verify package exports are correct
  7. Coverage — 100% code coverage via vitest
  8. Mutation testing — 90% mutation score via Stryker ensures tests actually verify behavior

Built by Script Development & Back to Code