open-index/open-npm huggingface dataset:
npm package: @myko/ui-svelte
Description: Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
Latest version: 4.6.1

# create-svelte

Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).

Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.

## Building

To build your library:

```bash
npm run package
```

To create a production version of your showcase app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

## Publishing

Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).

To publish your library to [npm](https://www.npmjs.com):

```bash
npm publish
```
npm package: @myko/ui-vue
Description: Vue 3 reactive wrappers for the Myko client.
Latest version: 4.6.1

# @myko/ui-vue

Vue 3 reactive wrappers for the Myko client.

## Installation

```bash
pnpm add @myko/ui-vue
```

## Usage

### Using Composables (Recommended)

```vue
<script setup>
import { useQuery, useReport, useConnection } from '@myko/ui-vue'
import { queries, reports } from '@rship/entities'

// Connection management
const { status, isConnected, connect, disconnect } = useConnection()

// Query data with automatic cleanup
const { items, itemsArray, resolved } = useQuery(queries.GetAllTargets({}))

// Report data with automatic cleanup
const { value: count } = useReport(reports.CountAllTargets({}))

// Connect on mount
connect('ws://localhost:5155')
</script>

<template>
  <div>Status: {{ status }}</div>
  <div v-if="!resolved">Loading...</div>
  <div v-for="target in itemsArray" :key="target.id">
    {{ target.name }}
  </div>
  <div>Total: {{ count?.count ?? 0 }}</div>
</template>
```

### Using the Client Directly

```vue
<script setup>
import { onUnmounted } from 'vue'
import { getMykoClient } from '@myko/ui-vue'
import { queries, commands } from '@rship/entities'

const client = getMykoClient()

// Manual query subscription
const { items, release } = client.query(queries.GetAllTargets({}))
onUnmounted(release)

// Send commands
async function deleteTarget(id: string) {
  await client.sendCommand(commands.DeleteTarget({ targetId: id }))
}
</script>
```

## API

### Composables

- `useQuery(queryFactory)` - Watch a query with reactive Map updates
- `useReport(reportFactory)` - Watch a report with reactive value
- `useConnection()` - Manage connection status

### Client

- `getMykoClient()` - Get the global singleton client
- `createMykoClient()` - Create a new client instance
- `myko` - Direct access to the global client

## Types

```typescript
import type {
  ReactiveQuery,
  ReactiveReport,
  UseQueryReturn,
  UseReportReturn,
  UseConnectionReturn
} from '@myko/ui-vue'
```