Deployment Process

Component Sync Architecture

Source of Truth

• Components developed in: packages/ui/
• Synced automatically to: packages/core/components/
• Script: scripts/sync-components.js

Automatic Syncing

Components sync automatically in these scenarios:

#### 1. During Build

npm run build         # Syncs + builds all packages
npm run build:all     # Syncs + builds + minifies

#### 2. During Publish

npm run changeset:publish   # Syncs before publishing
npm publish                 # prepublishOnly hook syncs

#### 3. Manual Sync

npm run sync:components     # Force sync without building

Development Workflow

# 1. Edit components (source of truth)
cd packages/ui
vim pan-card.mjs

# 2. Test locally
npm run serve:examples

# 3. Build (auto-syncs to core)
npm run build:all

# 4. Publish (auto-syncs before publish)
npm run changeset:publish

What Gets Synced

All 130 component files from @larcjs/ui:

• pan-*.mjs - 115 PAN components + minified versions
• Other components (drag-drop-list, file-upload, etc.)

Published Packages

• Original component source files
• For users who want component-only package

• PAN messaging bus
• Auto-loader
• All UI components in /components/
• "Batteries included" - one-liner setup

Result: Two Usage Patterns

<script type="module" src="https://cdn.jsdelivr.net/npm/@larcjs/core@3.0.1/pan.mjs"></script>
<pan-card>Hello!</pan-card>

<script type="module" src="https://cdn.jsdelivr.net/npm/@larcjs/core@3.0.1/pan-bus.mjs"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@larcjs/ui@3.0.1/pan-card.mjs"></script>

No Duplication Concerns

Code is duplicated across packages but maintained in one place:

• ✅ Edit once in packages/ui/
• ✅ Auto-sync to packages/core/components/
• ✅ Both packages stay in sync
• ✅ No manual copying needed

Checklist Before Publishing

• [ ] Components edited in packages/ui/
• [ ] Tests pass: npm test
• [ ] Build runs: npm run build:all (auto-syncs)
• [ ] Publish: npm run changeset:publish (auto-syncs)