create-anywherescada-app 0.0.1

package/dist/index.js

@@ -0,0 +1,83 @@
+#!/usr/bin/env node
+import { resolve, dirname, join } from "node:path";
+import { existsSync, readFileSync, writeFileSync, renameSync, cpSync } from "node:fs";
+import { execSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import { createInterface } from "node:readline";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const projectName = process.argv[2];
+if (!projectName) {
+    console.error("Usage: npx create-anywherescada-app <project-name>");
+    process.exit(1);
+}
+const targetDir = resolve(process.cwd(), projectName);
+if (existsSync(targetDir)) {
+    console.error(`Error: Directory "${projectName}" already exists.`);
+    process.exit(1);
+}
+function prompt(question) {
+    const rl = createInterface({ input: process.stdin, output: process.stdout });
+    return new Promise((resolve) => {
+        rl.question(question, (answer) => {
+            rl.close();
+            resolve(answer.trim());
+        });
+    });
+}
+async function main() {
+    console.log(`\nCreating AnywhereScada app in ${targetDir}...\n`);
+    // Copy template
+    const templateDir = join(__dirname, "..", "template");
+    cpSync(templateDir, targetDir, { recursive: true });
+    // Rename dotfiles
+    const renames = [
+        ["gitignore", ".gitignore"],
+        ["env.example", ".env"],
+        ["npmrc", ".npmrc"],
+    ];
+    for (const [from, to] of renames) {
+        const fromPath = join(targetDir, from);
+        const toPath = join(targetDir, to);
+        if (existsSync(fromPath)) {
+            renameSync(fromPath, toPath);
+        }
+    }
+    // Prompt for API key
+    const apiKey = await prompt("Enter your AnywhereScada API key (or press Enter to skip): ");
+    if (apiKey) {
+        const envPath = join(targetDir, ".env");
+        let envContent = readFileSync(envPath, "utf-8");
+        envContent = envContent.replace("ANYWHERESCADA_API_KEY=", `ANYWHERESCADA_API_KEY=${apiKey}`);
+        writeFileSync(envPath, envContent);
+    }
+    // Install dependencies
+    console.log("\nInstalling dependencies...\n");
+    execSync("npm install", { cwd: targetDir, stdio: "inherit" });
+    // Initialize git
+    try {
+        execSync("git init", { cwd: targetDir, stdio: "ignore" });
+        execSync("git add -A", { cwd: targetDir, stdio: "ignore" });
+        execSync('git commit -m "Initial commit from create-anywherescada-app"', {
+            cwd: targetDir,
+            stdio: "ignore",
+        });
+    }
+    catch {
+        // git not available, skip
+    }
+    console.log(`
+Done! Your AnywhereScada app is ready.
+
+  cd ${projectName}
+  npm run dev
+
+${apiKey ? "Your API key has been saved to .env" : "Set your API key in .env:\n  ANYWHERESCADA_API_KEY=as_live_..."}
+
+Learn more: https://anywherescada.com
+`);
+}
+main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+});

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "create-anywherescada-app",
+  "version": "0.0.1",
+  "description": "Create a SvelteKit app connected to AnywhereScada",
+  "type": "module",
+  "bin": {
+    "create-anywherescada-app": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "template"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "svelte",
+    "sveltekit",
+    "scada",
+    "anywherescada",
+    "iot",
+    "sparkplug"
+  ],
+  "author": "Joy Automation",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "^5.8.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/template/env.example

@@ -0,0 +1 @@
+ANYWHERESCADA_API_KEY=

package/template/gitignore

@@ -0,0 +1,4 @@
+node_modules/
+.svelte-kit/
+build/
+.env

package/template/npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

package/template/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "my-anywherescada-app",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/kit": "^2.22.0",
+    "@sveltejs/vite-plugin-svelte": "^6.0.0",
+    "svelte": "^5.35.0",
+    "svelte-check": "^4.2.0",
+    "@types/ws": "^8.18.0",
+    "typescript": "^5.8.0",
+    "vite": "^7.0.0"
+  },
+  "dependencies": {
+    "@fontsource/space-grotesk": "^5.2.8",
+    "@joyautomation/salt": "^0.0.21",
+    "graphql-ws": "^6.0.0",
+    "sass": "^1.89.0",
+    "ws": "^8.19.0"
+  }
+}

package/template/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover" class="%theme%">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

package/template/src/app.scss

@@ -0,0 +1,27 @@
+@use '@fontsource/space-grotesk';
+
+:root {
+	font-family: 'Space Grotesk', sans-serif;
+}
+
+header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 6);
+	background: var(--theme-neutral-100);
+	border-bottom: 1px solid var(--theme-neutral-300);
+
+	h1 {
+		font-size: var(--text-xl);
+		font-weight: 700;
+		color: var(--theme-text);
+		margin: 0;
+	}
+}
+
+main {
+	padding: calc(var(--spacing-unit) * 6);
+	max-width: 1400px;
+	margin: 0 auto;
+}

package/template/src/hooks.server.ts

@@ -0,0 +1,11 @@
+import type { Handle } from '@sveltejs/kit';
+
+export const handle: Handle = async ({ event, resolve }) => {
+	const theme = event.cookies.get('theme') ?? 'themeLight';
+	const validThemes = ['themeLight', 'themeDark'];
+	const safeTheme = validThemes.includes(theme) ? theme : 'themeLight';
+
+	return resolve(event, {
+		transformPageChunk: ({ html }) => html.replace('%theme%', safeTheme)
+	});
+};

package/template/src/lib/anywherescada.ts

@@ -0,0 +1,62 @@
+const API_URL = 'https://api.anywherescada.com/graphql';
+
+export async function query<T>(
+	apiKey: string,
+	gql: string,
+	variables?: Record<string, unknown>
+): Promise<T> {
+	const response = await fetch(API_URL, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${apiKey}`
+		},
+		body: JSON.stringify({ query: gql, variables })
+	});
+
+	if (!response.ok) {
+		throw new Error(`API request failed: ${response.status} ${response.statusText}`);
+	}
+
+	const json = await response.json();
+	if (json.errors) {
+		throw new Error(
+			`GraphQL errors: ${json.errors.map((e: { message: string }) => e.message).join(', ')}`
+		);
+	}
+
+	return json.data;
+}
+
+export const QUERIES = {
+	groups: `
+		query GetGroups {
+			groups {
+				id
+				nodes {
+					id
+					metrics { id name value type scanRate }
+					devices {
+						id
+						metrics { id name value type scanRate }
+					}
+				}
+			}
+		}
+	`
+};
+
+export const SUBSCRIPTIONS = {
+	metricUpdate: `
+		subscription {
+			metricUpdate {
+				groupId
+				nodeId
+				deviceId
+				metricId
+				value
+				timestamp
+			}
+		}
+	`
+};

package/template/src/lib/types.ts

@@ -0,0 +1,39 @@
+export type SparkplugMetricProperty = {
+	id: string;
+	type: string;
+	value: string;
+};
+
+export type SparkplugMetric = {
+	id: string;
+	name: string;
+	value: string;
+	type: string;
+	scanRate: number;
+	properties: SparkplugMetricProperty[];
+};
+
+export type SparkplugDevice = {
+	id: string;
+	metrics: SparkplugMetric[];
+};
+
+export type SparkplugNode = {
+	id: string;
+	metrics: SparkplugMetric[];
+	devices: SparkplugDevice[];
+};
+
+export type SparkplugGroup = {
+	id: string;
+	nodes: SparkplugNode[];
+};
+
+export type MetricUpdate = {
+	groupId: string;
+	nodeId: string;
+	deviceId: string;
+	metricId: string;
+	value: string;
+	timestamp: number;
+};

package/template/src/routes/+layout.server.ts

@@ -0,0 +1,7 @@
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = ({ cookies }) => {
+	return {
+		theme: cookies.get('theme') ?? 'themeLight'
+	};
+};

package/template/src/routes/+layout.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import '@joyautomation/salt/styles.scss';
+	import '../app.scss';
+	import { Toast, ThemeButton } from '@joyautomation/salt';
+
+	const { data, children } = $props();
+</script>
+
+<header>
+	<h1>My SCADA App</h1>
+	<ThemeButton theme={data.theme} />
+</header>
+
+<main>
+	{@render children()}
+</main>
+
+<Toast />

package/template/src/routes/+page.server.ts

@@ -0,0 +1,24 @@
+import type { PageServerLoad } from './$types';
+import { ANYWHERESCADA_API_KEY } from '$env/static/private';
+import { query, QUERIES } from '$lib/anywherescada';
+import { actions as saltActions } from '@joyautomation/salt';
+import type { SparkplugGroup } from '$lib/types';
+
+const { setTheme } = saltActions;
+
+export const load: PageServerLoad = async () => {
+	if (!ANYWHERESCADA_API_KEY) {
+		return { groups: [], error: 'ANYWHERESCADA_API_KEY is not set. Add it to your .env file.' };
+	}
+
+	try {
+		const data = await query<{ groups: SparkplugGroup[] }>(ANYWHERESCADA_API_KEY, QUERIES.groups);
+		return { groups: data.groups, error: null };
+	} catch (err) {
+		return { groups: [], error: err instanceof Error ? err.message : 'Failed to fetch data' };
+	}
+};
+
+export const actions = {
+	setTheme
+};

package/template/src/routes/+page.svelte

@@ -0,0 +1,346 @@
+<script lang="ts">
+	import { ChevronDown, ChevronRight } from '@joyautomation/salt/icons';
+	import type { SparkplugGroup, MetricUpdate } from '$lib/types';
+
+	const { data } = $props();
+
+	// svelte-ignore state_referenced_locally — initialized from server, then updated via SSE
+	let groups = $state<SparkplugGroup[]>(data.groups);
+	let connected = $state(false);
+	// svelte-ignore state_referenced_locally
+	let error = $state<string | null>(data.error);
+
+	let expandedGroups = $state<Set<string>>(new Set());
+	let expandedNodes = $state<Set<string>>(new Set());
+	let expandedDevices = $state<Set<string>>(new Set());
+
+	function toggleSet(set: Set<string>, key: string): Set<string> {
+		const next = new Set(set);
+		if (next.has(key)) {
+			next.delete(key);
+		} else {
+			next.add(key);
+		}
+		return next;
+	}
+
+	function applyUpdate(update: MetricUpdate) {
+		groups = groups.map((group) => {
+			if (group.id !== update.groupId) return group;
+			return {
+				...group,
+				nodes: group.nodes.map((node) => {
+					if (node.id !== update.nodeId) return node;
+					if (!update.deviceId) {
+						return {
+							...node,
+							metrics: node.metrics.map((m) =>
+								m.id === update.metricId ? { ...m, value: update.value } : m
+							)
+						};
+					}
+					return {
+						...node,
+						devices: node.devices.map((device) => {
+							if (device.id !== update.deviceId) return device;
+							return {
+								...device,
+								metrics: device.metrics.map((m) =>
+									m.id === update.metricId ? { ...m, value: update.value } : m
+								)
+							};
+						})
+					};
+				})
+			};
+		});
+	}
+
+	$effect(() => {
+		if (error) return;
+
+		const eventSource = new EventSource('/api/subscribe');
+
+		eventSource.onopen = () => {
+			connected = true;
+		};
+
+		eventSource.addEventListener('metricUpdate', (event) => {
+			const updates: MetricUpdate[] = JSON.parse(event.data);
+			for (const update of updates) {
+				applyUpdate(update);
+			}
+		});
+
+		eventSource.onerror = () => {
+			connected = false;
+		};
+
+		return () => {
+			eventSource.close();
+		};
+	});
+</script>
+
+<div class="dashboard">
+	<div class="status-bar">
+		<h2>Live Metrics</h2>
+		<div class="connection-status">
+			<span class="status-dot" class:connected></span>
+			{connected ? 'Connected' : 'Connecting...'}
+		</div>
+	</div>
+
+	{#if error}
+		<div class="error-banner">
+			<p>{error}</p>
+		</div>
+	{/if}
+
+	{#if groups.length === 0 && !error}
+		<div class="empty-state">
+			<p>No data available. Make sure your space has active Sparkplug nodes publishing data.</p>
+		</div>
+	{/if}
+
+	{#each groups as group}
+		<div class="group-card">
+			<button class="group-header" onclick={() => (expandedGroups = toggleSet(expandedGroups, group.id))}>
+				{#if expandedGroups.has(group.id)}
+					<ChevronDown />
+				{:else}
+					<ChevronRight />
+				{/if}
+				<span class="group-name">{group.id}</span>
+				<span class="badge">{group.nodes.length} node{group.nodes.length !== 1 ? 's' : ''}</span>
+			</button>
+
+			{#if expandedGroups.has(group.id)}
+				<div class="group-content">
+					{#each group.nodes as node}
+						{@const nodeKey = `${group.id}/${node.id}`}
+						<div class="node-section">
+							<button class="node-header" onclick={() => (expandedNodes = toggleSet(expandedNodes, nodeKey))}>
+								{#if expandedNodes.has(nodeKey)}
+									<ChevronDown />
+								{:else}
+									<ChevronRight />
+								{/if}
+								<span class="node-name">{node.id}</span>
+							</button>
+
+							{#if expandedNodes.has(nodeKey)}
+								<div class="node-content">
+									{#if node.metrics.length > 0}
+										<div class="metrics-section">
+											<h4>Node Metrics</h4>
+											<div class="metrics-grid">
+												{#each node.metrics as metric}
+													<div class="metric-card">
+														<span class="metric-name">{metric.name}</span>
+														<span class="metric-value">{metric.value}</span>
+														<span class="metric-type">{metric.type}</span>
+													</div>
+												{/each}
+											</div>
+										</div>
+									{/if}
+
+									{#each node.devices as device}
+										{@const deviceKey = `${group.id}/${node.id}/${device.id}`}
+										<div class="device-section">
+											<button class="device-header" onclick={() => (expandedDevices = toggleSet(expandedDevices, deviceKey))}>
+												{#if expandedDevices.has(deviceKey)}
+													<ChevronDown />
+												{:else}
+													<ChevronRight />
+												{/if}
+												<span class="device-name">{device.id}</span>
+											</button>
+
+											{#if expandedDevices.has(deviceKey)}
+												<div class="metrics-grid">
+													{#each device.metrics as metric}
+														<div class="metric-card">
+															<span class="metric-name">{metric.name}</span>
+															<span class="metric-value">{metric.value}</span>
+															<span class="metric-type">{metric.type}</span>
+														</div>
+													{/each}
+												</div>
+											{/if}
+										</div>
+									{/each}
+								</div>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<style lang="scss">
+	.dashboard {
+		display: flex;
+		flex-direction: column;
+		gap: calc(var(--spacing-unit) * 4);
+	}
+
+	.status-bar {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		h2 {
+			margin: 0;
+			font-size: var(--text-2xl);
+			color: var(--theme-text);
+		}
+	}
+
+	.connection-status {
+		display: flex;
+		align-items: center;
+		gap: calc(var(--spacing-unit) * 2);
+		font-size: var(--text-sm);
+		color: var(--theme-neutral-600);
+	}
+
+	.status-dot {
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		background: var(--red-500);
+
+		&.connected {
+			background: var(--green-500);
+		}
+	}
+
+	.error-banner {
+		padding: calc(var(--spacing-unit) * 4);
+		background: var(--theme-error-100);
+		border: 1px solid var(--theme-error-300);
+		border-radius: var(--rounded-lg);
+		color: var(--theme-error-700);
+
+		p {
+			margin: 0;
+		}
+	}
+
+	.empty-state {
+		text-align: center;
+		padding: calc(var(--spacing-unit) * 12);
+		color: var(--theme-neutral-500);
+	}
+
+	.group-card {
+		background: var(--theme-neutral-50);
+		border: 1px solid var(--theme-neutral-300);
+		border-radius: var(--rounded-lg);
+		overflow: hidden;
+	}
+
+	.group-header,
+	.node-header,
+	.device-header {
+		display: flex;
+		align-items: center;
+		gap: calc(var(--spacing-unit) * 2);
+		width: 100%;
+		padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		font-size: var(--text-base);
+		color: var(--theme-text);
+		text-align: left;
+
+		&:hover {
+			background: var(--theme-neutral-200);
+		}
+	}
+
+	.group-header {
+		background: var(--theme-neutral-100);
+		font-weight: 600;
+	}
+
+	.badge {
+		margin-left: auto;
+		font-size: var(--text-xs);
+		padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 2);
+		background: var(--theme-primary);
+		color: white;
+		border-radius: var(--rounded-full);
+		font-weight: 500;
+	}
+
+	.group-content {
+		padding: calc(var(--spacing-unit) * 2);
+	}
+
+	.node-section {
+		border: 1px solid var(--theme-neutral-200);
+		border-radius: var(--rounded-md);
+		margin-bottom: calc(var(--spacing-unit) * 2);
+		overflow: hidden;
+	}
+
+	.node-content {
+		padding: calc(var(--spacing-unit) * 3);
+	}
+
+	.metrics-section h4 {
+		margin: 0 0 calc(var(--spacing-unit) * 2) 0;
+		font-size: var(--text-sm);
+		color: var(--theme-neutral-500);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	.device-section {
+		margin-top: calc(var(--spacing-unit) * 2);
+		border: 1px solid var(--theme-neutral-200);
+		border-radius: var(--rounded-md);
+		overflow: hidden;
+	}
+
+	.metrics-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+		gap: calc(var(--spacing-unit) * 2);
+		padding: calc(var(--spacing-unit) * 2);
+	}
+
+	.metric-card {
+		display: flex;
+		flex-direction: column;
+		gap: calc(var(--spacing-unit) * 1);
+		padding: calc(var(--spacing-unit) * 3);
+		background: var(--theme-neutral-100);
+		border-radius: var(--rounded-md);
+		border: 1px solid var(--theme-neutral-200);
+	}
+
+	.metric-name {
+		font-size: var(--text-sm);
+		color: var(--theme-neutral-600);
+		font-weight: 500;
+	}
+
+	.metric-value {
+		font-size: var(--text-xl);
+		font-weight: 700;
+		color: var(--theme-text);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.metric-type {
+		font-size: var(--text-xs);
+		color: var(--theme-neutral-400);
+	}
+</style>

package/template/src/routes/api/subscribe/+server.ts

@@ -0,0 +1,67 @@
+import type { RequestHandler } from './$types';
+import { ANYWHERESCADA_API_KEY } from '$env/static/private';
+import { createClient } from 'graphql-ws';
+import WebSocket from 'ws';
+import { SUBSCRIPTIONS } from '$lib/anywherescada';
+
+export const GET: RequestHandler = () => {
+	if (!ANYWHERESCADA_API_KEY) {
+		return new Response('API key not configured', { status: 500 });
+	}
+
+	let cleanup: (() => void) | undefined;
+
+	const stream = new ReadableStream({
+		start(controller) {
+			const encoder = new TextEncoder();
+
+			const client = createClient({
+				url: `wss://api.anywherescada.com/graphql?token=${ANYWHERESCADA_API_KEY}`,
+				webSocketImpl: WebSocket
+			});
+
+			const unsubscribe = client.subscribe(
+				{ query: SUBSCRIPTIONS.metricUpdate },
+				{
+					next: (result) => {
+						if (result.data?.metricUpdate) {
+							const data = `event: metricUpdate\ndata: ${JSON.stringify(result.data.metricUpdate)}\n\n`;
+							controller.enqueue(encoder.encode(data));
+						}
+					},
+					error: (err) => {
+						console.error('Subscription error:', err);
+						try {
+							controller.close();
+						} catch {
+							// Already closed
+						}
+					},
+					complete: () => {
+						try {
+							controller.close();
+						} catch {
+							// Already closed
+						}
+					}
+				}
+			);
+
+			cleanup = () => {
+				unsubscribe();
+				client.dispose();
+			};
+		},
+		cancel() {
+			cleanup?.();
+		}
+	});
+
+	return new Response(stream, {
+		headers: {
+			'Content-Type': 'text/event-stream',
+			'Cache-Control': 'no-cache',
+			Connection: 'keep-alive'
+		}
+	});
+};

package/template/svelte.config.js

@@ -0,0 +1,12 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	preprocess: [vitePreprocess()],
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;

package/template/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+}

package/template/vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});