{"_id":"@blujosi/motia-stream-client-svelte","_rev":"3-9de54bedfc8281fef1e8328e227f7616","name":"@blujosi/motia-stream-client-svelte","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@blujosi/motia-stream-client-svelte","version":"1.0.0","license":"MIT","_id":"@blujosi/motia-stream-client-svelte@1.0.0","maintainers":[{"name":"blujosi","email":"joshua.oguche@outlook.com"}],"dist":{"shasum":"eab488c9e0a9f957c24cd950133dfc3baf3e3ccf","tarball":"https://registry.npmjs.org/@blujosi/motia-stream-client-svelte/-/motia-stream-client-svelte-1.0.0.tgz","fileCount":16,"integrity":"sha512-LwgVqxvDaBLS2YPgYeLlFEh7xxJSJIXyA3fzRtDcPJF6vn7raHl5hMDWK2egSq4Cfkct41qaGAZxPSINl2WUUw==","signatures":[{"sig":"MEYCIQDRTO+sZymaXBmrU6zCbNYPYfLjXd3nUggUzLqNd3Gi6QIhAPjUvc/7oyOZgpR8mKbKxaDBXoihyN9MPIFmsdbRZwy4","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":19350},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"scripts":{"dev":"vite dev","lint":"eslint --config ../../eslint.config.js","build":"vite build && npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","package":"svelte-kit sync && svelte-package && publint","preview":"vite preview","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","prepublishOnly":"npm run package"},"_npmUser":{"name":"blujosi","email":"joshua.oguche@outlook.com"},"_npmVersion":"10.9.2","description":"Motia Stream Client Svelte Package – Responsible for managing streams of data in Svelte applications.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.17.0","dependencies":{"@motiadev/stream-client-browser":"latest"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.18.2+sha512.9fb969fa749b3ade6035e0f109f0b8a60b5d08a1a87fdf72e337da90dcc93336e2280ca4e44f2358a649b83c17959e9993e777c2080879f3801e6f0d999ad3dd","devDependencies":{"vite":"^7.1.9","svelte":"^5.39.11","publint":"^0.3.14","typescript":"^5.9.3","@types/node":"^24.7.2","svelte-check":"^4.3.3","@sveltejs/kit":"^2.46.4","@sveltejs/package":"^2.5.4","@sveltejs/adapter-auto":"^6.1.1","@sveltejs/vite-plugin-svelte":"^6.2.1"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/motia-stream-client-svelte_1.0.0_1760285196488_0.8270789459188304","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@blujosi/motia-stream-client-svelte","version":"1.0.1","license":"MIT","_id":"@blujosi/motia-stream-client-svelte@1.0.1","maintainers":[{"name":"blujosi","email":"joshua.oguche@outlook.com"}],"dist":{"shasum":"a5e5b3f6b369273aa5fe748702136c239beb79f7","tarball":"https://registry.npmjs.org/@blujosi/motia-stream-client-svelte/-/motia-stream-client-svelte-1.0.1.tgz","fileCount":16,"integrity":"sha512-Q3BlNZKxEdm7Fu5K+rShDuAFGoSfpD9iXYpk6Wx917CdtBoBoIhnTAJPU6cbCgW9KqBDwp5+KDXCTXZa1Yi2tg==","signatures":[{"sig":"MEYCIQDtZJ6Xcw8DLin8+9iJl86VHvDg4d70V6wv9DMtBYJsdAIhAK70hRf1PJL8esaqKMmJ1Fz99iKB3eso3LyBoqfgECSk","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":19178},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"scripts":{"dev":"vite dev","lint":"eslint --config ../../eslint.config.js","build":"vite build && npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","package":"svelte-kit sync && svelte-package && publint","preview":"vite preview","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","prepublishOnly":"npm run package"},"_npmUser":{"name":"blujosi","email":"joshua.oguche@outlook.com"},"_npmVersion":"11.6.1","description":"Motia Stream Client Svelte Package – Responsible for managing streams of data in Svelte applications.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.10.0","dependencies":{"@motiadev/stream-client-browser":"latest"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.9","svelte":"^5.39.11","publint":"^0.3.14","typescript":"^5.9.3","@types/node":"^24.7.2","svelte-check":"^4.3.3","@sveltejs/kit":"^2.46.4","@sveltejs/package":"^2.5.4","@sveltejs/adapter-auto":"^6.1.1","@sveltejs/vite-plugin-svelte":"^6.2.1"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/motia-stream-client-svelte_1.0.1_1760439501521_0.5462379983710983","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@blujosi/motia-stream-client-svelte","description":"Motia Stream Client Svelte Package – Responsible for managing streams of data in Svelte applications.","version":"1.0.2","license":"MIT","type":"module","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"svelte":"./dist/index.js","types":"./dist/index.d.ts","sideEffects":["**/*.css"],"scripts":{"dev":"vite dev","build":"vite build && npm run package","preview":"vite preview","package":"svelte-kit sync && svelte-package && publint","prepublishOnly":"npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","lint":"eslint --config ../../eslint.config.js"},"peerDependencies":{"svelte":"^5.0.0"},"dependencies":{"@motiadev/stream-client-browser":"latest"},"devDependencies":{"@sveltejs/adapter-auto":"^7.0.0","@sveltejs/kit":"^2.48.4","@sveltejs/package":"^2.5.4","@sveltejs/vite-plugin-svelte":"^6.2.1","@types/node":"^24.10.0","publint":"^0.3.15","svelte":"^5.43.6","svelte-check":"^4.3.4","typescript":"^5.9.3","vite":"^7.2.2"},"_id":"@blujosi/motia-stream-client-svelte@1.0.2","_nodeVersion":"24.10.0","_npmVersion":"11.6.1","dist":{"integrity":"sha512-92pXjKvpbOQG9IJdzR7FPs4+DXj90nei7N5zM8UxihL0VxuiZr2BEavKh2g7inhBL0muuoDdDCKyDO79S0XVvQ==","shasum":"cbf771f1a68274ecfeeb20adccf86a9c3df28b62","tarball":"https://registry.npmjs.org/@blujosi/motia-stream-client-svelte/-/motia-stream-client-svelte-1.0.2.tgz","fileCount":16,"unpackedSize":19179,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDnJu0QiIXKMIzz7OtavQXG3fA9ABvJhtbs7vU3jBw9ngIgIof04/57rcjiXorA8HacVH1RP0d0gWj2+ppbbk/bA3Q="}]},"_npmUser":{"name":"blujosi","email":"joshua.oguche@outlook.com"},"directories":{},"maintainers":[{"name":"blujosi","email":"joshua.oguche@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/motia-stream-client-svelte_1.0.2_1762881977398_0.3178233286856029"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-12T16:06:36.379Z","modified":"2025-11-11T17:26:17.875Z","1.0.0":"2025-10-12T16:06:36.701Z","1.0.1":"2025-10-14T10:58:21.707Z","1.0.2":"2025-11-11T17:26:17.612Z"},"license":"MIT","description":"Motia Stream Client Svelte Package – Responsible for managing streams of data in Svelte applications.","maintainers":[{"name":"blujosi","email":"joshua.oguche@outlook.com"}],"readme":"# @motiadev/stream-client-svelte\n\nMotia Stream Client Svelte Package – Responsible for managing streams of data in Svelte 5 applications.\n\nFor more information about Motia Streams, please refer to the [Motia Streams documentation](https://motia.dev/docs).\n\n## Overview\n\n`@motiadev/stream-client-svelte` provides a set of Svelte 5 utilities and functions for integrating Motia's real-time streaming capabilities into your Svelte applications. It enables you to subscribe to individual stream items, groups, and handle real-time events with idiomatic Svelte 5 patterns using runes.\n\n---\n\n## Installation\n\n```bash\nnpm install @motiadev/stream-client-svelte\n```\n\n## Requirements\n\n- Svelte 5.0.0 or higher\n- TypeScript support recommended\n\n## Development & Examples\n\nThis package is built as a SvelteKit library with a built-in development server that includes interactive examples and documentation.\n\n### Running the Examples\n\n```bash\n# Clone the repository and navigate to the package\ncd packages/stream-client-svelte\n\n# Install dependencies\npnpm install\n\n# Start the development server\npnpm dev\n```\n\nThe development server will start at `http://localhost:5173` and includes:\n\n- **Interactive Examples**: Live demonstrations of all library features\n- **User Profile Example**: Single item subscription with real-time updates\n- **Users List Example**: Group subscriptions with filtering and sorting\n- **Chat Room Example**: Advanced bidirectional communication with typing indicators\n- **Full Documentation**: Complete API reference and usage guides\n\n### Building the Library\n\n```bash\n# Build the library for distribution\npnpm build\n\n# Package the library (generates dist/ folder)\npnpm package\n```\n\n## Exports\n\n- **Stream, StreamItemSubscription, StreamGroupSubscription**  \n  (Re-exported from `@motiadev/stream-client-browser`)\n- **MotiaStreamProvider**  \n  Svelte component for initializing and supplying the stream context.\n- **useMotiaStream**  \n  Function to access the current stream instance from context.\n- **useStreamItem**  \n  Function to subscribe to a single stream item using Svelte 5 runes.\n- **useStreamGroup**  \n  Function to subscribe to a group of stream items using Svelte 5 runes.\n- **useStreamEventHandler**  \n  Function to attach event listeners to stream subscriptions.\n\n## Usage\n\n### 1. MotiaStreamProvider\n\nWrap your application (or a subtree) with `MotiaStreamProvider` to initialize the stream and provide it via context.\n\n```svelte\n<script>\n  import { MotiaStreamProvider } from '@motiadev/stream-client-svelte'\n  import App from './App.svelte'\n</script>\n\n<MotiaStreamProvider address=\"wss://your-stream-server\">\n  <App />\n</MotiaStreamProvider>\n```\n\n**Props:**\n\n- `address` (string): The WebSocket address of your Motia stream server.\n\n---\n\n### 2. useMotiaStream\n\nAccess the current stream instance anywhere within the provider.\n\n```svelte\n<script>\n  import { useMotiaStream } from '@motiadev/stream-client-svelte'\n\n  const { stream } = useMotiaStream()\n</script>\n```\n\n---\n\n### 3. useStreamItem\n\nSubscribe to a single item in a stream and receive real-time updates using Svelte 5 runes.\n\n```svelte\n<script>\n  import { useStreamItem } from '@motiadev/stream-client-svelte'\n\n  const { data, event } = useStreamItem({\n    /**\n     * The stream name from motia Server\n     */\n    streamName: 'users',\n    /**\n     * The group id containing the item\n     */\n    groupId: 'group-123',\n    /**\n     * The id of the item to subscribe to\n     */\n    id: 'user-123',\n  })\n</script>\n\n{#if data}\n  <div>{data.name}</div>\n{:else}\n  <div>Loading...</div>\n{/if}\n```\n\n- `data`: The current value of the item (typed and reactive).\n- `event`: The subscription object to subscribe to custom events. Check `useStreamEventHandler` for more information.\n\n---\n\n### 4. useStreamGroup\n\nSubscribe to a group of items in a stream using Svelte 5 runes.\n\n```svelte\n<script>\n  import { useStreamGroup } from '@motiadev/stream-client-svelte'\n\n  const { data, event } = useStreamGroup({\n    /**\n     * The stream name from motia Server\n     */\n    streamName: 'users',\n    /**\n     * The group id to subscribe to\n     */\n    groupId: 'admins',\n  })\n</script>\n\n{#each data as user (user.id)}\n  <div>{user.name}</div>\n{/each}\n```\n\n- `data`: Array of current group items (reactive).\n- `event`: The group subscription object.\n\n---\n\n### 5. useStreamEventHandler\n\nAttach custom event listeners to a stream subscription.\n\n```svelte\n<script>\n  import { useStreamItem, useStreamEventHandler } from '@motiadev/stream-client-svelte'\n\n  const { data, event } = useStreamItem({\n    streamName: 'users',\n    groupId: 'group-123',\n    id: 'user-123'\n  })\n\n  const handleCustomEvent = (eventData) => {\n    // handle event\n    console.log('Custom event received:', eventData)\n  }\n\n  useStreamEventHandler({\n    event,\n    type: 'custom-event',\n    listener: handleCustomEvent\n  })\n</script>\n```\n\n---\n\n## API Reference\n\n### MotiaStreamProvider\n\n- **Props:**\n  - `address: string` – WebSocket address for the stream server.\n  - `children: Snippet` – Child components\n\n### useMotiaStream\n\n- Returns `{ stream }` from context.\n\n### useStreamItem<TData>\n\n- **Args:** `{ streamName: string, groupId: string, id: string }`\n- **Returns:** `{ data: TData | null, event: StreamSubscription | null }`\n\n### useStreamGroup<TData>\n\n- **Args:** `{ streamName: string, groupId: string, sortKey?: keyof TData }`\n- **Returns:** `{ data: TData[], event: StreamSubscription | null }`\n\n### useStreamEventHandler\n\n- **Args:** `{ event: StreamSubscription | null, type: string, listener: (event: any) => void }`\n\n---\n\n## Example\n\n```svelte\n<!-- App.svelte -->\n<script>\n  import { MotiaStreamProvider } from '@motiadev/stream-client-svelte'\n  import UserComponent from './UserComponent.svelte'\n</script>\n\n<MotiaStreamProvider address=\"wss://your-stream-server\">\n  <UserComponent userId=\"user-123\" />\n</MotiaStreamProvider>\n```\n\n```svelte\n<!-- UserComponent.svelte -->\n<script>\n  import { useStreamItem, useStreamEventHandler } from '@motiadev/stream-client-svelte'\n\n  let { userId } = $props()\n\n  const { data, event } = useStreamItem({\n    streamName: 'users',\n    groupId: 'all-users',\n    id: userId,\n  })\n\n  const handleUserUpdate = (e) => {\n    alert('User updated!')\n  }\n\n  useStreamEventHandler({\n    event,\n    type: 'user-updated',\n    listener: handleUserUpdate\n  })\n</script>\n\n{#if data}\n  <div>{data.name}</div>\n{:else}\n  <div>Loading...</div>\n{/if}\n```\n\n---\n\n## Notes\n\n- All functions must be used within a `MotiaStreamProvider`.\n- The library is designed to work seamlessly with Svelte 5 runes for reactive state management.\n- The library is designed to work seamlessly with Motia's event-driven architecture.\n- For advanced stream management, refer to the [@motiadev/stream-client-browser](https://www.npmjs.com/package/@motiadev/stream-client-browser) documentation.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}