@finsweet/components-ui NPM

@finsweet/components-ui

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

📦 Installation

npm install @finsweet/components-ui

🚀 Deployment Instructions

Prerequisites

Node.js (version 16 or higher)
npm account with publishing permissions
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:

GitHub Actions for CI/CD
Semantic versioning with conventional commits
Automated testing before publishing
Changeset management for version tracking

📚 Troubleshooting

Common Issues:

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