2.0.9 • Published 4 months ago
@finsweet/components-ui v2.0.9
@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 servernpm run build
- Build for productionnpm run package
- Create distribution packagenpm run preview
- Preview built applicationnpm 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 integrationtypescript
- Type checkingvite
- 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
🔗 Links
Current Version: 1.0.0
Package Size: ~1.7 kB
License: MIT