A growing collection of open-source frontend agnostic and Angular libraries, developer tools, and frontend utilities. Built with strict TypeScript, comprehensive testing, automated releases, and a focus on simplicity, performance, and reliability.
Published under the @dgkit npm scope.
Each package is independently buildable, testable, versioned and publishable, built with modern Angular standalone + signals APIs, configured for tree-shaking, and validated in CI with Vitest and enforced coverage thresholds.
| Package | npm | Description |
|---|---|---|
@dgkit/route-state |
Type-safe, bidirectional sync between signals and route/query params. | |
@dgkit/signal-storage |
Type-safe, bidirectional sync between signals and localStorage/sessionStorage, with cross-tab updates. | |
@dgkit/resize-observer |
SSR-safe ResizeObserver — signal API + directive. |
|
@dgkit/intersection-observer |
SSR-safe IntersectionObserver — signal API + directive. |
|
@dgkit/mutation-observer |
SSR-safe MutationObserver — signal API + directive. |
|
@dgkit/signal-history |
Undo/redo for signals, with grouped transactions. | |
@dgkit/clipboard |
Clipboard helper with signal-based operation state. | |
@dgkit/format |
Framework-free, grapheme-safe string/number formatting. | |
@dgkit/blob-download |
Framework-free helper for triggering a Blob download, with no memory leaks. |
Every package is standalone, tree-shakeable, SSR-safe and zoneless-friendly —
native callbacks write signals directly, with no NgZone and no assumption that
zone.js is loaded.
- Nx — task running, caching and
affectedgraph - Yarn workspaces
- Angular 21 (standalone + signals), TypeScript 5.9, RxJS 7
- ng-packagr — Angular Package Format builds
- Vitest (+ Analog) — every package tested with enforced coverage thresholds
- ESLint (type-aware) + Prettier
- Changesets — independent versioning & changelogs
- GitHub Actions — CI + release with npm provenance
- Node.js
^20.19 || ^22.12 || ^24(see.nvmrc→24.13.0) - Yarn
>=4(Berry, pinned viapackageManager+ Corepack)
nvm use # picks up .nvmrc
corepack enable # provisions Yarn 4 from packageManager
yarn installyarn build # build every package (nx run-many -t build)
yarn test # Vitest + coverage across all packages
yarn lint # ESLint (type-aware)
yarn typecheck # tsc --noEmit
yarn format # Prettier write
yarn playground # serve the demo app (nx serve playground)
yarn verify # format:check + lint + typecheck + test + buildTarget a single project with Nx:
yarn nx build resize-observer
yarn nx test resize-observeryarn new:package media-query "Angular media-query utilities."
yarn new:package slugify "String slug helpers." --pure # no Angular peersThis scaffolds packages/<name>/ from the resize-observer template with its own
package.json, project.json, ng-package.json, tsconfigs, a Vitest config,
README and CHANGELOG, wired into the workspace. See
tools/create-package.mjs.
dgkit/
├── packages/ # publishable @dgkit/* libraries
│ ├── route-state/
│ ├── signal-storage/
│ ├── resize-observer/
│ ├── intersection-observer/
│ ├── mutation-observer/
│ ├── signal-history/
│ ├── clipboard/
│ ├── format/
│ └── blob-download/
├── apps/
│ └── playground/ # manual verification app (not published)
├── tools/ # workspace tooling (package scaffolder)
├── .changeset/ # changesets config + pending changes
├── .github/workflows/ # CI + release
├── nx.json
├── .yarnrc.yml
├── tsconfig.base.json
├── eslint.config.mjs
└── prettier.config.mjs
Releases are driven by Changesets:
yarn changeset # describe your change (choose bump per package)
yarn version-packages # apply versions + update changelogs
yarn release # build + changeset publish (CI does this on main)See CONTRIBUTING.md for the full workflow.
Issues and PRs welcome. Please read CONTRIBUTING.md and the Code of Conduct.
MIT © Danylo Grynyk