@finsweet/components-ui

A shared UI components library built with Svelte, TypeScript, and modern tooling.

📦 Installation

npm install @finsweet/components-ui

🚀 Deployment Instructions

Prerequisites

1. Node.js (version 16 or higher)
2. npm account with publishing permissions
3. Git for version control

Step-by-Step Deployment Process

1. Setup and Authentication

First, ensure you're logged into npm:

npm whoami

If not logged in:

npm login

2. Project Structure Requirements

Important: Components and utilities must be in src/lib/ for svelte-package to work correctly.

3. Configuration Files

Ensure your svelte.config.js is properly configured:

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

export default {
  preprocess: vitePreprocess(),
};

Note: Avoid using the deprecated package configuration in svelte.config.js.

4. Build and Package

Install dependencies:

npm install

Build the project:

npm run build

Package for distribution:

npm run package

This creates the dist/ directory with:

• Compiled Svelte components
• TypeScript declarations (.d.ts files)
• JavaScript modules
• Proper export structure

5. Version Management

Update the version in package.json before publishing:

# Patch version (1.0.0 → 1.0.1)
npm version patch

# Minor version (1.0.0 → 1.1.0)
npm version minor

# Major version (1.0.0 → 2.0.0)
npm version major

6. Publish to npm

Publish the package:

npm publish --access public

The prepublishOnly script will automatically run npm run package before publishing.

🔧 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run package - Create distribution package
• npm run preview - Preview built application
• npm run check - Run Svelte type checking

📋 Package Contents

The published package includes:

• Components: Reusable Svelte components
• Utils: Utility functions and helpers
• TypeScript definitions: Full type support
• Modern ES modules: Tree-shakeable imports

🛠 Development Dependencies

• @sveltejs/package - Svelte packaging tool
• @sveltejs/vite-plugin-svelte - Vite integration
• typescript - Type checking
• vite - Build tool
• Additional UI dependencies: @floating-ui/dom, clipboard, simplebar

📝 Usage Example

// Import components
import { Button } from '@finsweet/components-ui';

// Import utilities
import { hello } from '@finsweet/components-ui/utils';

🔄 Continuous Deployment

For automated deployments, consider:

1. GitHub Actions for CI/CD
2. Semantic versioning with conventional commits
3. Automated testing before publishing
4. Changeset management for version tracking

📚 Troubleshooting

Common Issues:

1. "src/lib does not exist": Ensure components are in src/lib/ directory
2. "config.package is no longer supported": Remove package config from svelte.config.js
3. Permission denied: Verify npm login and package name availability
4. Type errors: Run npm run check to validate TypeScript

🔗 Links

• npm package
• Repository

Current Version: 1.0.0
Package Size: ~1.7 kB
License: MIT