Merge pull request #1 from viamrobotics/v0.0.1

v0.1.0

Author: micheal-parks

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/silver-bags-dress.md

@@ -0,0 +1,5 @@
+---
+'@viamrobotics/svelte-sdk': minor
+---
+
+Initial release

.github/workflows/main.yml

@@ -0,0 +1,35 @@
+name: Main
+
+on:
+  push:
+    branches: [main]
+
+permissions: write-all
+
+jobs:
+  deploy-and-publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          node-version: 22
+
+      - name: Install and Build 🔧
+        run: |
+          pnpm i
+          pnpm run build
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          # This expects you to have a script called release which does a build for your packages and calls changeset publish
+          publish: npm run release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/pullrequest.yml

@@ -0,0 +1,64 @@
+name: Pull Request Checks
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: pnpm/action-setup@v4
+        with:
+          node-version: 22
+
+      - name: Install 🔧
+        run: pnpm i
+
+      - name: Check 💅
+        run: npm run check
+
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: pnpm/action-setup@v4
+        with:
+          node-version: 22
+
+      - name: Install 🔧
+        run: pnpm i
+
+      - name: Lint 💅
+        run: npm run lint
+
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          node-version: 22
+
+      - name: Install 🔧
+        run: pnpm i
+
+      - name: Install playwright 🔧
+        run: npx playwright install chromium --with-deps
+
+      - name: Test 🔬
+        run: pnpm test

.prettierrc.cjs

@@ -1,5 +1,154 @@
 # viam-svelte-sdk
 
+`pnpm i --save @viamrobotics/svelte-sdk @viamrobotics/sdk @tanstack/svelte-query`
+
+## Getting started
+
+The Viam Svelte SDK provides a reactive layer over `@viamrobotics/sdk`.
+
+To get started, Include the `ViamProvider` component. Any child component will have access to the SDK hooks.
+
+A map of `PartID`s to `DialConf`s must also be provided to connect to your machine(s).
+
+```svelte
+<script lang="ts">
+import { ViamProvider } from '@viamrobotics/svelte-sdk';
+import type { DialConf } from '@viamrobotics/sdk';
+
+let { children } = $props();
+
+const dialConfigs: Record<string, DialConf> = {
+  'my-part-id': {
+    host: 'my-host',
+    credentials: {
+      type: 'api-key',
+      authEntity: 'my-api-key-id',
+      payload: 'my-api-key-value',
+    },
+    signalingAddress: 'https://app.viam.dev:443',
+    disableSessions: false,
+  },
+};
+</script>
+
+<ViamProvider {dialConfigs}>
+  {@render children()}
+</ViamProvider>
+```
+
+### useRobotClient / useConnectionStatus
+
+In any child component, you can access the `RobotClient` and `MachineConnectionStatus` of any connected machine with the `useRobotClient` and `useConnectionStatus` hooks.
+
+```svelte
+<script lang="ts">
+import { useConnectionStatus, useRobotClient } from '@viamrobotics/svelte-sdk';
+
+interface Props {
+  partID: string;
+}
+
+let { partID }: Props = $props();
+
+const status = useConnectionStatus(() => partID);
+const client = useRobotClient(() => partID);
+
+$inspect(status.current);
+$inspect(client.current);
+</script>
+```
+
+### createRobotQuery / createRobotMutation
+
+To execute queries / mutations directly on the robot client, use the following convenience hooks.
+
+```svelte
+<script lang="ts">
+import {
+  createRobotMutation,
+  createRobotQuery,
+  useRobotClient,
+} from '@viamrobotics/svelte-sdk';
+
+let { partID } = $props();
+
+const client = useRobotClient(() => partID);
+const version = createRobotQuery(client, 'getVersion');
+const stopAll = createRobotMutation(client, 'stopAll');
+</script>
+
+{#if version.current.error}
+  Error fetching version: {version.current.error.message}
+{:else if version.current.data}
+  <p>Platform: {version.current.data.platform}</p>
+  <p>API version: {version.current.data.apiVersion}</p>
+  <p>Version: {version.current.data.version}</p>
+{/if}
+
+<button onclick={() => stopAll.current.mutate([])}> Stop All </button>
+```
+
+### createResourceClient / createResourceQuery / createResourceMutation
+
+To create and execute queries / mutations on resource (component / service) clients, use the following convenience hooks.
+
+```svelte
+<script lang="ts">
+import { BaseClient } from '@viamrobotics/sdk';
+import {
+  createResourceClient,
+  createResourceQuery,
+  createResourceMutation,
+} from '@viamrobotics/svelte-sdk';
+
+interface Props {
+  partID: string;
+  name: string;
+}
+
+let { partID, name }: Props = $props();
+
+const client = createResourceClient(
+  BaseClient,
+  () => partID,
+  () => name
+);
+
+const isMoving = createResourceQuery(client, 'isMoving');
+const moveStraight = createResourceMutation(client, 'moveStraight');
+</script>
+
+Is moving: {isMoving.current.data ?? false}
+
+<button onclick={() => moveStraight.current.mutate([100, 10])}> Move </button>
+```
+
+### useResourceNames
+
+Wraps `client.resourceNames()` in a reactive query. Supports optional filtering by resource subtype.
+
+```svelte
+<script lang="ts">
+import { useResourceNames } from '@viamrobotics/svelte-sdk';
+
+interface Props {
+  partID: string;
+}
+
+let { partID }: Props = $props();
+
+const resources = useResourceNames(() => partID);
+const arms = useResourceNames(
+  () => partID,
+  () => 'arm'
+);
+
+$inspect(resources.current);
+$inspect(resources.error);
+$inspect(resources.fetching);
+</script>
+```
+
 ## Developing
 
 First install dependencies with `pnpm install`, then start a development server:
@@ -11,10 +160,18 @@ pnpm dev
 pnpm dev -- --open
 ```
 
-## Building
+## Building and Publishing
 
 To build the library:
 
 ```bash
 pnpm package
 ```
+
+To publish a new version of the library, run the changeset CLI:
+
+```bash
+npx @changesets/cli
+```
+
+This will trigger the github changeset bot to prepare a new version in CI.