Update Syncthing configuration & REST API datasource

.eslintignore

@@ -1,3 +1,4 @@
 node_modules/
 
 main.js
+esbuild.config.mjs

.gitignore

@@ -3,6 +3,7 @@
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
+!.vscode/*.code-snippets
 
 # Intellij
 *.iml

.husky/commit-msg

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-pnpx commitlint --edit "$1"
+npx commitlint --edit "$1"

.vscode/settings.json

@@ -12,7 +12,8 @@
 		"project",
 		"gh actions",
 		"release",
-		"mobile"
+		"mobile",
+		"datasource"
 	],
 	"markdownlint.config": {
 		"MD033": false,

.vscode/snippets.code-snippets

@@ -0,0 +1,26 @@
+{
+	// Place your obsidian-syncthing-integration workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
+	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
+	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
+	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
+	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
+	// Placeholders with the same ids are connected.
+	// Example:
+	// "Print to console": {
+	// 	"scope": "javascript,typescript",
+	// 	"prefix": "log",
+	// 	"body": [
+	// 		"console.log('$1');",
+	// 		"$2"
+	// 	],
+	// 	"description": "Log output to console"
+	// }
+	"Create new Syncthing EventTypes": {
+		"scope": "javascript,typescript",
+		"prefix": "syncthing-eventTypes",
+		"body": [
+			"export const $1 = SyncthingGenericEvent(\"$1\",object({$2}));"
+		],
+		"description": "Create new Syncthing EventTypes"
+	}
+}

compose.yml

@@ -0,0 +1,16 @@
+version: "3"
+services:
+  syncthing:
+    image: syncthing/syncthing:latest
+    ports:
+      - 1234:8384
+      - 22001:22000/tcp
+      - 22001:22000/udp
+      - 21028:21027/udp
+    volumes:
+      - /wherever/st-sync:/var/syncthing
+    environment:
+      - PUID=1000
+      - PGID=1000
+      - STGUIADDRESS=0.0.0.0:8384
+    hostname: my-second-syncthing

package.json

@@ -31,6 +31,7 @@
 		"@types/node": "^18.0.0",
 		"@typescript-eslint/eslint-plugin": "5.61.0",
 		"@typescript-eslint/parser": "5.62.0",
+		"@xstate/svelte": "^3.0.0",
 		"builtin-modules": "3.3.0",
 		"child_process": "^1.0.2",
 		"codemirror": "^6.0.1",
@@ -54,7 +55,9 @@
 		"svelte": "^4.2.0",
 		"svelte-preprocess": "^5.0.4",
 		"tslib": "2.6.0",
-		"typescript": "^5.0.0"
+		"typescript": "^5.0.0",
+		"valibot": "^0.13.1",
+		"xstate": "^5.2.1"
 	},
 	"repository": {
 		"type": "git",

src/components/configuration_item.svelte

@@ -2,9 +2,10 @@
 	import { Notice } from "obsidian";
 	import { SyncthingDevice, SyncthingFolder } from "src/models/entities";
 	import ObsidianLucideIcon from "./obsidian_lucide_icon.svelte";
+	import { Output } from "valibot";
 
-	export let folder: SyncthingFolder | undefined = undefined;
-	export let device: SyncthingDevice | undefined = undefined;
+	export let folder: Output<typeof SyncthingFolder> | undefined = undefined;
+	export let device: Output<typeof SyncthingDevice> | undefined = undefined;
 	export let isThisDevice = false;
 </script>
 
@@ -164,7 +165,7 @@
 					</div>
 				</td>
 				<td>
-					<span>{device.address.join(", ")}</span>
+					<span>{device.addresses.join(", ")}</span>
 				</td>
 			</tr>
 			<tr>

src/components/configuration_table.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
+	import { useActor } from "@xstate/svelte";
 	import { Notice } from "obsidian";
-	import { SyncthingDevice, SyncthingFolder } from "src/models/entities";
 	import { ConfigurationModal } from "src/views/configuration_modal";
-	import { onMount } from "svelte";
+	import { derived } from "svelte/store";
 	import ConfigurationItem from "./configuration_item.svelte";
 	import FolderItem from "./folder_item.svelte";
+	import { syncthingControllerMachine } from "./machines";
 	import ObsidianLucideIcon from "./obsidian_lucide_icon.svelte";
 	import RemoteItem from "./remote_item.svelte";
 	import WarningMessage from "./warning_message.svelte";
@@ -13,29 +14,65 @@
 	parent.titleEl.setText("Syncthing Configuration");
 	parent.titleEl.style.textAlign = "center";
 
-	let syncthingBaseUrl = `${parent.plugin.settings.configuration.url?.protocol}://${parent.plugin.settings.configuration.url?.ip_address}:${parent.plugin.settings.configuration.url?.port}/`;
-	console.log(syncthingBaseUrl);
-	// TODO: refactor this to use Svelte stores.
-	let folders: SyncthingFolder[] = [];
-	let devices: SyncthingDevice[] = [];
-	let thisDevice: SyncthingDevice | undefined = undefined;
-	onMount(async () => {
-		folders = await parent.plugin.syncthingController.getFolders();
-		devices = await parent.plugin.syncthingController.getDevices();
-		thisDevice = devices.first();
-		console.log("Folders: ", folders);
-		console.log("Devices: ", devices);
+	let { send, snapshot } = useActor(syncthingControllerMachine, {
+		input: {
+			syncthingREST: parent.plugin.syncthingFromREST,
+		},
 	});
+	snapshot.subscribe((data) => {
+		console.log("snapshot: ", data);
+	});
+	const folders = derived(
+		snapshot,
+		($snapshot) => $snapshot.context.configuration?.folders ?? [],
+	);
+	const devices = derived(
+		snapshot,
+		($snapshot) => $snapshot.context.configuration?.devices ?? [],
+	);
+	const thisDevice = derived(
+		snapshot,
+		($snapshot) =>
+			$devices.filter(
+				(device) =>
+					$snapshot.context.system_status?.myID === device.deviceID,
+			)[0],
+	);
 </script>
 
 <WarningMessage
 	message="The following configuration is not fully implemented yet. Some data aren't real-time and some controls are not implemented yet. It is mainly to reproduce the Syncthing GUI and then, real-time data and controls will be added."
 />
 
+{#if $snapshot.matches("failure")}
+	<WarningMessage
+		title="An error occurred"
+		message="Something wrong happened. The configuration might not be correctly shown. Expect some errors."
+	>
+		<button on:click={() => send({ type: "RETRY" })}> Retry </button>
+	</WarningMessage>
+{/if}
+
+<!-- {#if restartRequired}
+	TODO: make it change when configuration changes. (note for later)
+	<WarningMessage
+		message="The configuration has been saved but not activated. Syncthing must restart to activate the new configuration."
+	>
+		<button
+			on:click={async () => {
+				await parent.plugin.syncthingFromREST.restart();
+				restartRequired = !restartRequired;
+			}}
+		>
+			Restart
+		</button>
+	</WarningMessage>
+{/if} -->
+
 <div class="left">
 	<div class="folder">
-		<h2>Folders ({folders.length})</h2>
-		{#each folders as folder}
+		<h2>Folders ({$folders.length})</h2>
+		{#each $folders as folder}
 			<FolderItem {folder} />
 		{/each}
 		<div class="controls">
@@ -69,14 +106,14 @@
 <div class="right">
 	<div class="mydevice">
 		<h2>This Device</h2>
-		<ConfigurationItem isThisDevice device={thisDevice} />
+		<ConfigurationItem isThisDevice device={$thisDevice} />
 	</div>
 	<div class="remote">
 		<h2>
-			Remote Devices ({devices.filter((value) => value !== thisDevice)
+			Remote Devices ({$devices.filter((value) => value !== $thisDevice)
 				.length})
 		</h2>
-		{#each devices.filter((value) => value !== thisDevice) as device}
+		{#each $devices.filter((value) => value !== $thisDevice) as device}
 			<RemoteItem {device} />
 		{/each}
 		<div class="controls">

src/components/conflicts_list.svelte

@@ -23,17 +23,12 @@
 				dropdown.onChange((value) => {
 					conflicts = sortFilesBy(
 						conflicts,
-						value as keyof typeof sortOptions,
-						parentModal.syncthingController
+						value as keyof typeof sortOptions
 					);
 					console.log("dropdown", conflicts);
 				});
 			});
-		conflicts = sortFilesBy(
-			conflicts,
-			"recent",
-			parentModal.syncthingController
-		);
+		conflicts = sortFilesBy(conflicts, "recent");
 	});
 
 	parentModal.titleEl.setText("Syncthing Conflicts");

src/components/folder_item.svelte

@@ -3,14 +3,15 @@
 	import { SyncthingFolder } from "src/models/entities";
 	import ConfigurationItem from "./configuration_item.svelte";
 	import ObsidianLucideIcon from "./obsidian_lucide_icon.svelte";
-	export let folder: SyncthingFolder = {
+	import { Output } from "valibot";
+	export let folder: Output<typeof SyncthingFolder> = {
 		id: "folder ID",
 		label: "folder label",
 		path: "folder path",
 		type: "sendreceive",
 		devices: [
-			{ deviceID: "device 1", encryptionPassword: "", introducedBy: "" },
-			{ deviceID: "device 2", encryptionPassword: "", introducedBy: "" },
+			{ deviceID: "device 1", introducedBy: "" },
+			{ deviceID: "device 2", introducedBy: "" },
 		],
 		filesystemType: "filesystem type",
 		maxConflicts: 0,

src/components/light_bulb.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { useActor } from "@xstate/svelte";
+	import { lightMachine } from "./machines";
+
+	const { snapshot, send, actorRef } = useActor(lightMachine);
+	actorRef.subscribe((snapshot) => console.log(snapshot));
+</script>
+
+<button on:click={() => send({ type: "TOGGLE" })}>
+	{$snapshot.value === "on" ? "Turn Off" : "Turn On"}
+</button>
+
+<p>The light bulb is currently {$snapshot.value}</p>