@rsweeten/dropbox-sync 0.1.0

package/examples/svelte-app/dropbox-store.ts

@@ -0,0 +1,174 @@
+// SvelteKit store for Dropbox sync
+import { writable, derived } from 'svelte/store'
+// For a private module, you would import from your private registry or local path
+// import { useSvelteDropboxSync } from '@yourcompany/dropbox-sync';
+import { useSvelteDropboxSync } from 'dropbox-sync'
+import { browser } from '$app/environment'
+import { goto } from '$app/navigation'
+
+// Create a persistent store
+export function createDropboxStore() {
+    const credentials = {
+        clientId: browser
+            ? import.meta.env.VITE_DROPBOX_APP_KEY
+            : process.env.DROPBOX_APP_KEY,
+        // The access token will be added from cookies on the server side
+    }
+
+    // Initialize the Dropbox client
+    const dropboxSync = useSvelteDropboxSync(credentials)
+
+    // Create stores for state management
+    const connected = writable(false)
+    const syncing = writable(false)
+    const progress = writable(0)
+    const message = writable('')
+    const error = writable<string | null>(null)
+    const syncStats = writable({
+        total: 0,
+        uploads: 0,
+        downloads: 0,
+        completed: 0,
+    })
+
+    // Check connection status on initialization
+    async function checkConnection() {
+        if (!browser) return
+
+        try {
+            const response = await fetch('/api/dropbox/status')
+            const data = await response.json()
+            connected.set(data.connected)
+        } catch (err) {
+            console.error('Error checking Dropbox connection:', err)
+            connected.set(false)
+        }
+    }
+
+    if (browser) {
+        checkConnection()
+
+        // Set up socket connection for real-time updates
+        dropboxSync.socket.connect()
+
+        // Listen for progress updates
+        dropboxSync.socket.on('sync:progress', (data) => {
+            progress.set(data.progress)
+            message.set(data.message)
+        })
+
+        // Listen for queue information
+        dropboxSync.socket.on('sync:queue', (data) => {
+            syncStats.set({
+                total: data.total,
+                uploads: data.totalUploads,
+                downloads: data.totalDownloads,
+                completed: 0,
+            })
+        })
+
+        // Listen for completion
+        dropboxSync.socket.on('sync:complete', (data) => {
+            progress.set(100)
+            message.set(data.message)
+            syncing.set(false)
+
+            if (data.stats) {
+                syncStats.update((stats) => ({
+                    ...stats,
+                    completed: stats.total,
+                }))
+            }
+        })
+
+        // Listen for errors
+        dropboxSync.socket.on('sync:error', (data) => {
+            error.set(data.message)
+            syncing.set(false)
+        })
+    }
+
+    return {
+        connected: { subscribe: connected.subscribe },
+        syncing: { subscribe: syncing.subscribe },
+        progress: { subscribe: progress.subscribe },
+        message: { subscribe: message.subscribe },
+        error: { subscribe: error.subscribe },
+        syncStats: { subscribe: syncStats.subscribe },
+
+        // Connect to Dropbox
+        connect() {
+            if (!browser) return
+            goto('/api/dropbox/auth/start')
+        },
+
+        // Disconnect from Dropbox
+        async disconnect() {
+            if (!browser) return
+
+            try {
+                await fetch('/api/dropbox/logout', { method: 'POST' })
+                connected.set(false)
+            } catch (err) {
+                console.error('Error disconnecting from Dropbox:', err)
+            }
+        },
+
+        // Start synchronization
+        async startSync() {
+            if (!browser) return
+
+            try {
+                syncing.set(true)
+                progress.set(0)
+                message.set('Initializing Dropbox sync...')
+                error.set(null)
+
+                // Trigger sync via socket
+                dropboxSync.socket.emit('dropbox:sync')
+            } catch (err: any) {
+                console.error('Error starting Dropbox sync:', err)
+                error.set(
+                    err.message || 'An error occurred while starting sync'
+                )
+                syncing.set(false)
+            }
+        },
+
+        // Cancel synchronization
+        cancelSync() {
+            if (!browser) return
+
+            dropboxSync.sync.cancelSync()
+            syncing.set(false)
+            message.set('Sync cancelled')
+        },
+
+        // Check files that need syncing without starting the sync
+        async checkSyncNeeded(options?: {
+            localDir?: string
+            dropboxDir?: string
+        }) {
+            if (!browser) return { upload: 0, download: 0 }
+
+            try {
+                const { uploadQueue, downloadQueue } =
+                    await dropboxSync.sync.createSyncQueue({
+                        localDir: options?.localDir,
+                        dropboxDir: options?.dropboxDir,
+                    })
+
+                return {
+                    upload: uploadQueue.length,
+                    download: downloadQueue.length,
+                }
+            } catch (err) {
+                console.error('Error checking sync status:', err)
+                return { upload: 0, download: 0 }
+            }
+        },
+    }
+}
+
+// Export singleton instance
+export const dropbox = createDropboxStore()

package/examples/svelte-app/routes.server.ts

@@ -0,0 +1,120 @@
+// SvelteKit server routes for Dropbox integration
+// For a private module, you would import from your private registry or local path
+// import { createSvelteKitHandlers } from '@yourcompany/dropbox-sync';
+import { createSvelteKitHandlers } from 'dropbox-sync'
+import { Server } from 'socket.io'
+import type { RequestEvent } from '@sveltejs/kit'
+
+// Create all the route handlers
+export const handlers = createSvelteKitHandlers()
+
+// Status endpoint handler
+export async function handleStatus(event: RequestEvent) {
+    return handlers.status({ cookies: event.cookies })
+}
+
+// OAuth start endpoint handler
+export async function handleOAuthStart() {
+    return handlers.oauthStart()
+}
+
+// OAuth callback endpoint handler
+export async function handleOAuthCallback(event: RequestEvent) {
+    return handlers.oauthCallback({
+        url: new URL(event.request.url),
+        cookies: event.cookies,
+    })
+}
+
+// Logout endpoint handler
+export async function handleLogout(event: RequestEvent) {
+    return handlers.logout({ cookies: event.cookies })
+}
+
+// Setup Socket.IO for SvelteKit
+let io: Server
+
+export function getSocketIO(server: any) {
+    if (!io) {
+        io = new Server(server)
+
+        io.on('connection', (socket) => {
+            console.log('Client connected:', socket.id)
+
+            // Handle sync start request
+            socket.on('dropbox:sync', async () => {
+                try {
+                    // In a real implementation, this would use the server-side Dropbox client
+                    // to perform the actual sync
+
+                    // Emit queue information
+                    socket.emit('sync:queue', {
+                        total: 8,
+                        totalUploads: 3,
+                        totalDownloads: 5,
+                    })
+
+                    // Simulate sync process with progress updates
+                    let progress = 0
+                    const interval = setInterval(() => {
+                        progress += 12.5 // 8 total files, so each is 12.5%
+
+                        if (progress <= 100) {
+                            socket.emit('sync:progress', {
+                                progress,
+                                message: `Processing files... ${Math.round(
+                                    progress
+                                )}%`,
+                                type: progress < 50 ? 'upload' : 'download',
+                            })
+                        }
+
+                        if (progress >= 100) {
+                            clearInterval(interval)
+                            socket.emit('sync:complete', {
+                                message: 'Sync completed successfully',
+                                stats: {
+                                    uploaded: 3,
+                                    downloaded: 5,
+                                },
+                            })
+                        }
+                    }, 600)
+
+                    // Store the interval for cancellation
+                    socket.data.syncInterval = interval
+                } catch (error: any) {
+                    console.error('Error syncing with Dropbox:', error)
+                    socket.emit('sync:error', {
+                        message:
+                            error.message || 'An error occurred during sync',
+                    })
+                }
+            })
+
+            // Handle sync cancel request
+            socket.on('sync:cancel', () => {
+                if (socket.data.syncInterval) {
+                    clearInterval(socket.data.syncInterval)
+                    delete socket.data.syncInterval
+                }
+
+                socket.emit('sync:complete', {
+                    message: 'Sync cancelled by user',
+                })
+            })
+
+            // Handle disconnect
+            socket.on('disconnect', () => {
+                console.log('Client disconnected:', socket.id)
+
+                // Clean up any ongoing operations
+                if (socket.data.syncInterval) {
+                    clearInterval(socket.data.syncInterval)
+                }
+            })
+        })
+    }
+
+    return io
+}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@rsweeten/dropbox-sync",
+  "version": "0.1.0",
+  "description": "Reusable Dropbox synchronization module with framework adapters",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "jest",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "dropbox",
+    "sync",
+    "upload",
+    "download",
+    "file-sync"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "dropbox": "^10.34.0",
+    "socket.io": "^4.7.2",
+    "socket.io-client": "^4.7.2"
+  },
+  "devDependencies": {
+    "@angular/common": "^19.2.11",
+    "@angular/core": "^19.2.11",
+    "@sveltejs/kit": "^2.21.1",
+    "@types/angular": "^1.8.9",
+    "@types/jest": "^29.5.1",
+    "@types/node": "^20.1.0",
+    "h3": "^1.11.1",
+    "jest": "^29.5.0",
+    "next": "^15.3.2",
+    "nuxt": "^3.10.3",
+    "rxjs": "^7.8.2",
+    "svelte": "^5.31.1",
+    "ts-jest": "^29.1.0",
+    "typescript": "^5.0.4"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=14.0.0",
+    "next": ">=13.0.0",
+    "nuxt": ">=3.0.0",
+    "svelte": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    },
+    "nuxt": {
+      "optional": true
+    }
+  }
+}

package/src/adapters/angular.ts

@@ -0,0 +1,217 @@
+import { Injectable } from '@angular/core'
+import { HttpClient, HttpHeaders } from '@angular/common/http'
+import { Observable, from, of } from 'rxjs'
+import { catchError, map, switchMap, tap } from 'rxjs/operators'
+import { createDropboxSyncClient } from '../core/client'
+import type {
+    DropboxCredentials,
+    DropboxSyncClient,
+    SyncOptions,
+    SyncResult,
+    TokenResponse,
+} from '../core/types'
+
+@Injectable({
+    providedIn: 'root',
+})
+export class DropboxSyncService {
+    private client: DropboxSyncClient | null = null
+
+    constructor(private http: HttpClient) {}
+
+    /**
+     * Initialize the Dropbox sync client with credentials
+     */
+    initialize(credentials: DropboxCredentials): DropboxSyncClient {
+        this.client = createDropboxSyncClient(credentials)
+        return this.client
+    }
+
+    /**
+     * Get the current Dropbox sync client instance, or initialize with credentials if not exists
+     */
+    getClient(credentials?: DropboxCredentials): DropboxSyncClient {
+        if (!this.client && credentials) {
+            return this.initialize(credentials)
+        }
+
+        if (!this.client) {
+            throw new Error(
+                'DropboxSyncService not initialized. Call initialize() first.'
+            )
+        }
+
+        return this.client
+    }
+
+    /**
+     * Check the connection status with Dropbox
+     */
+    checkConnection(): Observable<boolean> {
+        return this.http
+            .get<{ connected: boolean }>('/api/dropbox/status')
+            .pipe(
+                map((response: any) => response.connected),
+                catchError(() => of(false))
+            )
+    }
+
+    /**
+     * Start the OAuth flow to connect to Dropbox
+     */
+    connectDropbox(): void {
+        window.location.href = '/api/dropbox/auth/start'
+    }
+
+    /**
+     * Disconnect from Dropbox
+     */
+    disconnectDropbox(): Observable<boolean> {
+        return this.http
+            .post<{ success: boolean }>('/api/dropbox/logout', {})
+            .pipe(
+                map((response: any) => response.success),
+                catchError(() => of(false))
+            )
+    }
+
+    /**
+     * Start the sync process
+     */
+    startSync(options?: Partial<SyncOptions>): Observable<SyncResult> {
+        if (!this.client) {
+            throw new Error(
+                'DropboxSyncService not initialized. Call initialize() first.'
+            )
+        }
+
+        // Connect to socket before starting sync
+        this.client.socket.connect()
+
+        // Setup socket listeners for sync events
+        this.setupSocketListeners()
+
+        return from(this.client.sync.syncFiles(options))
+    }
+
+    /**
+     * Cancel an ongoing sync process
+     */
+    cancelSync(): void {
+        if (!this.client) {
+            return
+        }
+
+        this.client.sync.cancelSync()
+    }
+
+    /**
+     * Set up socket listeners for sync events
+     * Returns an RxJS Observable that emits sync progress events
+     */
+    setupSocketListeners(): Observable<any> {
+        if (!this.client) {
+            throw new Error(
+                'DropboxSyncService not initialized. Call initialize() first.'
+            )
+        }
+
+        // Create observable for sync progress events
+        return new Observable((observer: any) => {
+            // Listen for progress updates
+            this.client!.socket.on('sync:progress', (data: any) => {
+                observer.next({ type: 'progress', data })
+            })
+
+            // Listen for queue information
+            this.client!.socket.on('sync:queue', (data: any) => {
+                observer.next({ type: 'queue', data })
+            })
+
+            // Listen for sync completion
+            this.client!.socket.on('sync:complete', (data: any) => {
+                observer.next({ type: 'complete', data })
+                observer.complete()
+            })
+
+            // Listen for sync errors
+            this.client!.socket.on('sync:error', (data: any) => {
+                if (!data.continue) {
+                    observer.error(data.message)
+                } else {
+                    observer.next({ type: 'error', data })
+                }
+            })
+
+            // Cleanup function - remove event listeners when subscription is disposed
+            return () => {
+                this.client!.socket.off('sync:progress')
+                this.client!.socket.off('sync:queue')
+                this.client!.socket.off('sync:complete')
+                this.client!.socket.off('sync:error')
+            }
+        })
+    }
+
+    /**
+     * Handle OAuth callback on the client side
+     */
+    handleOAuthCallback(code: string): Observable<TokenResponse> {
+        if (!this.client) {
+            throw new Error(
+                'DropboxSyncService not initialized. Call initialize() first.'
+            )
+        }
+
+        const redirectUri =
+            window.location.origin + '/api/dropbox/auth/callback'
+
+        return from(
+            this.client.auth.exchangeCodeForToken(code, redirectUri)
+        ).pipe(
+            tap((tokens: any) => {
+                // Store tokens in local storage for client-side access
+                localStorage.setItem('dropbox_access_token', tokens.accessToken)
+
+                if (tokens.refreshToken) {
+                    localStorage.setItem(
+                        'dropbox_refresh_token',
+                        tokens.refreshToken
+                    )
+                }
+
+                localStorage.setItem('dropbox_connected', 'true')
+            })
+        )
+    }
+
+    /**
+     * Create a sync queue to determine which files need to be uploaded/downloaded
+     */
+    createSyncQueue(
+        options?: Partial<SyncOptions>
+    ): Observable<{ uploadQueue: string[]; downloadQueue: string[] }> {
+        if (!this.client) {
+            throw new Error(
+                'DropboxSyncService not initialized. Call initialize() first.'
+            )
+        }
+
+        return from(this.client.sync.createSyncQueue(options))
+    }
+}
+
+/**
+ * Function to extract credentials from Angular environment
+ */
+export function getCredentialsFromEnvironment(
+    environment: any
+): DropboxCredentials {
+    return {
+        clientId: environment.dropboxAppKey || '',
+        clientSecret: environment.dropboxAppSecret,
+        accessToken: localStorage.getItem('dropbox_access_token') || undefined,
+        refreshToken:
+            localStorage.getItem('dropbox_refresh_token') || undefined,
+    }
+}