Pipedream Connect Svelte

⚡ MIGRATION COMPLETE ⚡
Successfully migrated React library to Svelte with full functionality and TypeScript definitions!

A Svelte library for Pipedream Connect that enables you to integrate 2500+ APIs into your applications with managed authentication.

✅ Migration Status

This library has been successfully migrated from the original React implementation with the following achievements:

• ✅ All React components converted to Svelte
• ✅ Svelte stores replace React Context/hooks for state management
• ✅ JavaScript with JSDoc instead of TypeScript (as requested)
• ✅ Auto-generated TypeScript definitions for library consumers
• ✅ Complete form system with validation
• ✅ Control components for all input types
• ✅ Mock data integration for development
• ✅ Build system configured and working
• ✅ Package ready for npm distribution

Features

• 🔌 2500+ API Integrations - Connect to popular services like Slack, Google, Shopify, and more
• 🔐 Managed Authentication - Handle OAuth, API keys, and other auth flows automatically
• 🎨 Customizable UI - Styled components that match your application design
• 📱 Responsive Design - Works great on desktop and mobile
• ⚡ TypeScript Support - Full type safety with JSDoc annotations (no TypeScript required)
• 🔄 Reactive - Built with Svelte stores for reactive state management

Installation

npm install pipedream-connect-svelte
# or
pnpm add pipedream-connect-svelte
# or
yarn add pipedream-connect-svelte

Quick Start

1. Basic Setup

Wrap your app with the ConnectProvider and configure it:

<script>
	import { ConnectProvider, ComponentFormContainer } from 'pipedream-connect-svelte';

	const config = {
		environment: 'production', // or 'development'
		projectId: 'your-pipedream-project-id'
	};

	const clientConfig = {
		token: 'your-api-token'
	};
</script>

<ConnectProvider {config} {clientConfig}>
	<ComponentFormContainer
		title="Execute Pipedream Action"
		componentType="action"
		on:execute={(event) => {
			console.log('Component executed:', event.detail);
		}}
	/>
</ConnectProvider>

2. Individual Components

For more control, use individual components:

<script>
	import {
		ConnectProvider,
		SelectApp,
		SelectComponent,
		ComponentForm
	} from 'pipedream-connect-svelte';

	let selectedApp = null;
	let selectedComponent = null;
	let formValues = {};
</script>

<ConnectProvider {config} {clientConfig}>
	<SelectApp bind:value={selectedApp} placeholder="Choose an app..." />

	<SelectComponent app={selectedApp} type="action" bind:value={selectedComponent} />

	{#if selectedComponent}
		<ComponentForm
			component={selectedComponent}
			bind:values={formValues}
			onSubmit={async (values) => {
				console.log('Executing with:', values);
				return { success: true };
			}}
		/>
	{/if}
</ConnectProvider>

Components

ConnectProvider

The main provider component that initializes Pipedream Connect.

Props:

• config - Connect configuration object
• clientConfig - Client-specific configuration
• autoLoad - Whether to automatically load apps (default: true)

ComponentFormContainer

A complete form container with app selection, component selection, and dynamic form.

Props:

• title - Form title
• componentType - Filter by 'action' or 'source'
• selectedApp - Pre-selected app
• selectedComponent - Pre-selected component
• disabled - Disable all inputs

Events:

• on:appChange - App selection changed
• on:componentChange - Component selection changed
• on:formChange - Form values changed
• on:execute - Component executed successfully
• on:error - Execution error

SelectApp

Dropdown for selecting a Pipedream app.

Props:

• value - Selected app object
• placeholder - Placeholder text
• disabled - Disable the select
• onChange - Change handler function

SelectComponent

Dropdown for selecting a Pipedream component (action/source).

Props:

• app - Selected app (required)
• type - Filter by 'action' or 'source'
• value - Selected component object
• onChange - Change handler function

ComponentForm

Dynamic form that renders based on component props.

Props:

• component - Component object with props schema
• values - Form values object
• onChange - Values change handler
• onSubmit - Form submission handler
• disabled - Disable form inputs
• submitLabel - Submit button text

Control Components

Individual form controls for different prop types:

• ControlInput - Text inputs, numbers, passwords
• ControlSelect - Dropdown selects with options
• ControlTextarea - Multi-line text and JSON
• ControlCheckbox - Boolean checkboxes
• ControlApp - App selection control

State Management

The library uses Svelte stores for state management:

<script>
	import { connectContext, connectActions } from 'pipedream-connect-svelte';

	// Access Connect state
	$: ({ apps, components, loading, error } = $connectContext);

	// Trigger actions
	async function loadApps() {
		await connectActions.fetchApps();
	}
</script>

Customization

Styling

All components include CSS classes for styling:

/* App selector styling */
.select-app__select {
	border-color: #your-color;
}

/* Form styling */
.component-form__submit {
	background-color: #your-brand-color;
}

Component Overrides

You can override individual control components:

<script>
	import { ComponentForm, ControlInput } from 'pipedream-connect-svelte';
	import CustomInput from './CustomInput.svelte';
</script>

<ComponentForm
	{component}
	{values}
	customControls={{
		string: CustomInput // Use custom input for string props
	}}
/>

Configuration

Connect Config

const config = {
	environment: 'production', // 'development' | 'production'
	projectId: 'your-project-id', // Your Pipedream project ID
	baseUrl: 'https://api.pipedream.com', // Custom API base URL (optional)
	customization: {
		// UI customization (optional)
		theme: {
			colors: {
				primary: '#007acc'
			}
		}
	}
};

Client Config

const clientConfig = {
	token: 'your-api-token', // Your API token
	environment: 'production', // Override environment
	baseUrl: 'https://api.pipedream.com' // Override base URL
};

Examples

Check out the /src/lib/Example.svelte file for comprehensive usage examples.

TypeScript Support

While this library is written in JavaScript, it includes comprehensive JSDoc type definitions for full TypeScript support:

import type { PipedreamApp, PipedreamComponent, ConnectConfig } from 'pipedream-connect-svelte';

Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build the library
pnpm build

# Run linting
pnpm lint

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - see LICENSE file for details.

Support

• 📖 Pipedream Connect Documentation
• 💬 Community Discord
• 🐛 Report Issues