Skip to main content

Publishing

This guide covers building and publishing Synapse UI packages to npm.

Packages​

PackageDescription
@synapse-ui/themeDesign tokens and ThemeService
@synapse-ui/coreSSE utilities and shared types
@synapse-ui/ai-promptAiPromptBar component
@synapse-ui/stream-containerAiStreamContainer component

Post-MVP packages will follow the same process.

Build​

Synapse UI uses Angular Package Format (APF) via ng-packagr for tree-shakable output.

# Build all publishable libraries
nx run-many -t build --projects=theme,core,ai-prompt,stream-container

# Or build individually
nx build theme --configuration=production

Output lands in dist/libs/:

dist/libs/
├── theme/
├── core/
└── ui/
    ├── ai-prompt/
    └── stream-container/

Pre-Publish Checklist​

  • All tests pass: nx run-many -t test --all
  • Lint clean: nx run-many -t lint --all
  • Version bumped in each package's package.json
  • CHANGELOG updated
  • README in each package is current
  • peerDependencies list correct Angular version (^21.0.0)

Versioning​

We use Semantic Versioning with Conventional Commits for automated changelog generation.

Change typeVersion bump
Breaking API changeMajor
New feature (backward compatible)Minor
Bug fixPatch

Publishing to npm​

Public registry​

cd dist/libs/theme
npm publish --access public

cd ../ui/ai-prompt
npm publish --access public

Scoped package first publish​

Ensure scope is public:

npm publish --access public

Private registry​

Configure .npmrc in the consuming project:

@synapse-ui:registry=https://your-registry.example.com/
//your-registry.example.com/:_authToken=${NPM_TOKEN}

CI Release Workflow (Planned)​

# .github/workflows/release.yml (Phase 4)
# Triggered on tag push v*
# 1. nx run-many -t build --configuration=production
# 2. npm publish for each dist package
# 3. Create GitHub Release with changelog

Consumer Installation​

After publish, consumers install:

npm install @synapse-ui/theme @synapse-ui/ai-prompt @synapse-ui/stream-container

Verify in a fresh Angular app:

import { AiPromptBarComponent } from '@synapse-ui/ai-prompt';
// Should resolve without path alias hacks

Peer Dependencies​

Each UI package declares:

{
  "peerDependencies": {
    "@angular/common": "^21.0.0",
    "@angular/core": "^21.0.0",
    "@synapse-ui/theme": "^0.1.0"
  }
}

marked and shiki are peer dependencies of @synapse-ui/stream-container and @synapse-ui/core.