Skip to content

grynyk/dgkit

Repository files navigation

dgkit

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.

CI License: MIT


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.

Packages

Package npm Description
@dgkit/route-state npm Type-safe, bidirectional sync between signals and route/query params.
@dgkit/signal-storage npm Type-safe, bidirectional sync between signals and localStorage/sessionStorage, with cross-tab updates.
@dgkit/resize-observer npm SSR-safe ResizeObserver — signal API + directive.
@dgkit/intersection-observer npm SSR-safe IntersectionObserver — signal API + directive.
@dgkit/mutation-observer npm SSR-safe MutationObserver — signal API + directive.
@dgkit/signal-history npm Undo/redo for signals, with grouped transactions.
@dgkit/clipboard npm Clipboard helper with signal-based operation state.
@dgkit/format npm Framework-free, grapheme-safe string/number formatting.
@dgkit/blob-saver npm 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.

Tech stack

  • Nx — task running, caching and affected graph
  • 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

Requirements

  • Node.js ^20.19 || ^22.12 || ^24 (see .nvmrc24.13.0)
  • Yarn >=4 (Berry, pinned via packageManager + Corepack)
nvm use            # picks up .nvmrc
corepack enable    # provisions Yarn 4 from packageManager
yarn install

Common commands

yarn 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 + build

Target a single project with Nx:

yarn nx build resize-observer
yarn nx test resize-observer

Adding a new package

yarn new:package media-query "Angular media-query utilities."
yarn new:package slugify "String slug helpers." --pure   # no Angular peers

This 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.

Repository layout

dgkit/
├── packages/            # publishable @dgkit/* libraries
│   ├── route-state/
│   ├── signal-storage/
│   ├── resize-observer/
│   ├── intersection-observer/
│   ├── mutation-observer/
│   ├── signal-history/
│   ├── clipboard/
│   ├── format/
│   └── blob-saver/
├── 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

Releasing

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.

Contributing

Issues and PRs welcome. Please read CONTRIBUTING.md and the Code of Conduct.

License

MIT © Danylo Grynyk

About

Collection of open-source agnostic and angular libraries, developer tools, and utilities. Built with strict TypeScript, comprehensive testing, automated releases, and a focus on simplicity, performance, and reliability.

Topics

Resources

Code of conduct

Contributing

Security policy

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages