feat: add basic property inspector to create command (#41)

* feat: add JSON schemas to vscode config, remove subjective settings * feat: add JSON schemas to vscode config, remove subjective settings * feat: add basic PI to create command --------- Co-authored-by: Richard Herman <[email protected]>
elgatosf · Aug 20, 2024 · 78df2ad · 78df2ad
1 parent 843f3db
commit 78df2ad
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 19 deletions.
diff --git a/src/commands/create.ts b/src/commands/create.ts
@@ -228,6 +228,7 @@ async function renderTemplate(destination: string, pluginInfo: PluginInfo): Prom
 	await Promise.allSettled([
 		template.copy(".vscode"),
 		template.copy(`${TEMPLATE_PLUGIN_UUID}.sdPlugin/imgs`, `${pluginInfo.uuid}.sdPlugin/imgs`),
+		template.copy(`${TEMPLATE_PLUGIN_UUID}.sdPlugin/ui`, `${pluginInfo.uuid}.sdPlugin/ui`),
 		template.copy(`${TEMPLATE_PLUGIN_UUID}.sdPlugin/manifest.json.ejs`, `${pluginInfo.uuid}.sdPlugin/manifest.json`),
 		template.copy("src"),
 		template.copy("_.gitignore", ".gitignore"),

diff --git a/template/.vscode/settings.json b/template/.vscode/settings.json
@@ -1,14 +1,17 @@
 {
-	/* Prefer tabs over spaces for accessibility */
-	"editor.insertSpaces": false,
-	"editor.detectIndentation": false,
-	/* Explorer */
-	"explorer.fileNesting.enabled": true,
-	"explorer.fileNesting.patterns": {
-		"*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
-		"package.json": "package-lock.json, yarn.lock, pnpm-lock.yaml, rollup.config.mjs, tsconfig.json"
-	},
-	"files.exclude": {
-		"node_modules": true
-	}
+	/* JSON schemas */
+	"json.schemas": [
+		{
+			"fileMatch": [
+				"**/manifest.json"
+			],
+			"url": "https://schemas.elgato.com/streamdeck/plugins/manifest.json"
+		},
+		{
+			"fileMatch": [
+				"**/layouts/*.json"
+			],
+			"url": "https://schemas.elgato.com/streamdeck/plugins/layout.json"
+		}
+	]
 }
diff --git a/template/com.elgato.template.sdPlugin/manifest.json.ejs b/template/com.elgato.template.sdPlugin/manifest.json.ejs
@@ -8,6 +8,7 @@
 			"UUID": "<%- uuid %>.increment",
 			"Icon": "imgs/actions/counter/icon",
 			"Tooltip": "Displays a count, which increments by one on press.",
+			"PropertyInspectorPath": "ui/increment-counter.html",
 			"Controllers": [
 				"Keypad"
 			],

diff --git a/template/com.elgato.template.sdPlugin/ui/increment-counter.html b/template/com.elgato.template.sdPlugin/ui/increment-counter.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<head lang="en">
+    <title>Increment Counter Settings</title>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/gh/geekyeggo/sdpi-components@v3/dist/sdpi-components.js"></script>
+</head>
+
+<body>
+    <!--
+        Learn more about property inspector components at https://sdpi-components.dev/docs/components
+    -->
+    <sdpi-item label="Increment By">
+        <sdpi-range setting="incrementBy" min="1" max="5" step="1" default="1" showlabels></sdpi-range>
+    </sdpi-item>
+</body>
+
+</html>
diff --git a/template/src/actions/increment-counter.ts.ejs b/template/src/actions/increment-counter.ts.ejs
@@ -6,7 +6,7 @@ import { action, KeyDownEvent, SingletonAction, WillAppearEvent } from "@elgato/
 @action({ UUID: "<%- uuid %>.increment" })
 export class IncrementCounter extends SingletonAction<CounterSettings> {
 	/**
-	 * The {@link SingletonAction.onWillAppear} event is useful for setting the visual representation of an action when it become visible. This could be due to the Stream Deck first
+	 * The {@link SingletonAction.onWillAppear} event is useful for setting the visual representation of an action when it becomes visible. This could be due to the Stream Deck first
 	 * starting up, or the user navigating between pages / folders etc.. There is also an inverse of this event in the form of {@link streamDeck.client.onWillDisappear}. In this example,
 	 * we're setting the title to the "count" that is incremented in {@link IncrementCounter.onKeyDown}.
 	 */
@@ -21,19 +21,21 @@ export class IncrementCounter extends SingletonAction<CounterSettings> {
 	 * settings using `setSettings` and `getSettings`.
 	 */
 	async onKeyDown(ev: KeyDownEvent<CounterSettings>): Promise<void> {
-		// Determine the current count from the settings.
-		let count = ev.payload.settings.count ?? 0;
-		count++;
+		// Update the count from the settings.
+		const { settings } = ev.payload;
+		settings.incrementBy ??= 1;
+		settings.count = (settings.count ?? 0) + settings.incrementBy;
 
 		// Update the current count in the action's settings, and change the title.
-		await ev.action.setSettings({ count });
-		await ev.action.setTitle(`${count}`);
+		await ev.action.setSettings(settings);
+		await ev.action.setTitle(`${settings.count}`);
 	}
 }
 
 /**
  * Settings for {@link IncrementCounter}.
  */
 type CounterSettings = {
-	count: number;
+	count?: number;
+	incrementBy?: number;
 };