small cleanup

README.md

@@ -1,6 +1,6 @@
-# React-Frontend Plugin Template [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://deckbrew.xyz/discord)
+# Decky Plugin Template [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://deckbrew.xyz/discord)
 
-Reference example for using [decky-frontend-lib](https://github.com/SteamDeckHomebrew/decky-frontend-lib) in a [decky-loader](https://github.com/SteamDeckHomebrew/decky-loader) plugin.
+Reference example for using [decky-frontend-lib](https://github.com/SteamDeckHomebrew/decky-frontend-lib) (@decky/ui) in a [decky-loader](https://github.com/SteamDeckHomebrew/decky-loader) plugin.
 
 ### **Please also refer to the [wiki](https://wiki.deckbrew.xyz/en/user-guide/home#plugin-development) for important information on plugin development and submissions/updates. currently documentation is split between this README and the wiki which is something we are hoping to rectify in the future.**  
 
@@ -29,7 +29,7 @@ If you would like to build plugins that have their own custom backends, Docker i
    - These setup pnpm and build the frontend code for testing.
 3. Consult the [decky-frontend-lib](https://github.com/SteamDeckHomebrew/decky-frontend-lib) repository for ways to accomplish your tasks.
    - Documentation and examples are still rough, 
-   - While decky-loader primarily targets Steam Deck hardware so keep this in mind when developing your plugin.
+   - Decky loader primarily targets Steam Deck hardware so keep this in mind when developing your plugin.
 4. If using VSCodium/VSCode, run the `setup` and `build` and `deploy` tasks. If not using VSCodium etc. you can derive your own makefile or just manually utilize the scripts for these commands as you see fit.
 
 If you use VSCode or it's derivatives (we suggest [VSCodium](https://vscodium.com/)!) just run the `setup` and `build` tasks. It's really that simple.

main.py

@@ -13,7 +13,8 @@ class Plugin:
 
     async def long_running(self):
         await asyncio.sleep(15)
-        await decky.emit("test_event", "Hello from the backend!", True, 2)
+        # Passing through a bunch of random data, just as an example
+        await decky.emit("timer_event", "Hello from the backend!", True, 2)
 
     # Asyncio-compatible long-running code, executed in a task when the plugin is loaded
     async def _main(self):

src/index.tsx

@@ -13,18 +13,21 @@ import {
   toaster,
   // routerHook
 } from "@decky/api"
-// import { call, callable } from "@decky/backend";
 import { useState } from "react";
 import { FaShip } from "react-icons/fa";
 
 // import logo from "../assets/logo.png";
 
-// interface AddMethodArgs {
-//   left: number;
-//   right: number;
-// }
+// This function calls the python function "add", which takes in two numbers and returns their sum (as a number)
+// Note the type annotations:
+//  the first one: [first: number, second: number] is for the arguments
+//  the second one: number is for the return value
 const add = callable<[first: number, second: number], number>("add");
+
+// This function calls the python function "start_timer", which takes in no arguments and returns nothing.
+// It starts a (python) timer which eventually emits the event 'timer_event'
 const startTimer = callable<[], void>("start_timer");
+
 function Content() {
   const [result, setResult] = useState<number | undefined>();
 
@@ -40,7 +43,7 @@ function Content() {
           layout="below"
           onClick={onClick}
         >
-          {result || "Add two numbers via Python"}
+          {result ?? "Add two numbers via Python"}
         </ButtonItem>
       </PanelSectionRow>
       <PanelSectionRow>
@@ -58,7 +61,7 @@ function Content() {
         </div>
       </PanelSectionRow> */}
 
-      <PanelSectionRow>
+      {/*<PanelSectionRow>
         <ButtonItem
           layout="below"
           onClick={() => {
@@ -68,34 +71,44 @@ function Content() {
         >
           Router
         </ButtonItem>
-      </PanelSectionRow>
+      </PanelSectionRow>*/}
     </PanelSection>
   );
 };
 
 export default definePlugin(() => {
+  console.log("Template plugin initializing, this is called once on frontend startup")
+
   // serverApi.routerHook.addRoute("/decky-plugin-test", DeckyPluginRouterTest, {
   //   exact: true,
   // });
-  // console.log("init plugin", call, callable)
+
+  // Add an event listener to the "timer_event" event from the backend
   const listener = addEventListener<[
     test1: string,
     test2: boolean,
     test3: number
-  ]>("test_event", (test1, test2, test3) => {
-    console.log("Template got event", test1, test2, test3)
+  ]>("timer_event", (test1, test2, test3) => {
+    console.log("Template got timer_event with:", test1, test2, test3)
     toaster.toast({
-      title: "template got event",
+      title: "template got timer_event",
       body: `${test1}, ${test2}, ${test3}`
     });
   });
+
   return {
-    title: <div className={staticClasses.Title}>API v2 Example Plugin</div>,
+    // The name shown in various decky menus
+    name: "Test Plugin",
+    // The element displayed at the top of your plugin's menu
+    titleView: <div className={staticClasses.Title}>Decky Example Plugin</div>,
+    // The content of your plugin's menu
     content: <Content />,
+    // The icon displayed in the plugin list
     icon: <FaShip />,
+    // The function triggered when your plugin unloads
     onDismount() {
       console.log("Unloading")
-      removeEventListener("test_event", listener);
+      removeEventListener("timer_event", listener);
       // serverApi.routerHook.removeRoute("/decky-plugin-test");
     },
   };