Update lib, show example of router

package-lock.json

@@ -9,9 +9,8 @@
       "version": "0.0.1",
       "license": "GPL-2.0-or-later",
       "dependencies": {
-        "decky-frontend-lib": "^0.0.2",
+        "decky-frontend-lib": "^0.0.5",
-        "react-icons": "^4.3.1",
+        "react-icons": "^4.3.1"
-        "rollup-plugin-import-assets": "^1.1.1"
       },
       "devDependencies": {
         "@rollup/plugin-commonjs": "^21.1.0",
@@ -22,6 +21,7 @@
         "@types/react": "16.14.0",
         "@types/webpack": "^5.28.0",
         "rollup": "^2.70.2",
+        "rollup-plugin-import-assets": "^1.1.1",
         "shx": "^0.3.4",
         "tslib": "^2.4.0",
         "typescript": "^4.6.4"
@@ -550,12 +550,9 @@
       "dev": true
     },
     "node_modules/decky-frontend-lib": {
-      "version": "0.0.2",
+      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/decky-frontend-lib/-/decky-frontend-lib-0.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/decky-frontend-lib/-/decky-frontend-lib-0.0.5.tgz",
-      "integrity": "sha512-XyxSLrkvEjA0oDsPnV30cyMgzqSOKMp3riAkk1e0iEItvt26m4w4iGPD7JO1rtXquWpSEvYB9SCmhlrX/3COXA==",
+      "integrity": "sha512-wv2f7/VZZa8bzp5a2PP7z+aXmFY2McZ3Wpb8sAdMuW/1xdzaAjExJQOMkT6nBf1BUzIME5fLK4X+Ht36CmeZ8Q=="
-      "peerDependencies": {
-        "react": "16.14.0"
-      }
     },
     "node_modules/deepmerge": {
       "version": "4.2.2",
@@ -680,6 +677,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -1054,6 +1052,7 @@
       "version": "2.70.2",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.70.2.tgz",
       "integrity": "sha512-EitogNZnfku65I1DD5Mxe8JYRUCy0hkK5X84IlDtUs+O6JRMpRciXTzyCUuX11b5L5pvjH+OmFXiQ3XjabcXgg==",
+      "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -1068,6 +1067,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/rollup-plugin-import-assets/-/rollup-plugin-import-assets-1.1.1.tgz",
       "integrity": "sha512-u5zJwOjguTf2N+wETq2weNKGvNkuVc1UX/fPgg215p5xPvGOaI6/BTc024E9brvFjSQTfIYqgvwogQdipknu1g==",
+      "dev": true,
       "dependencies": {
         "rollup-pluginutils": "^2.7.1",
         "url-join": "^4.0.1"
@@ -1080,6 +1080,7 @@
       "version": "2.8.2",
       "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
       "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+      "dev": true,
       "dependencies": {
         "estree-walker": "^0.6.1"
       }
@@ -1087,7 +1088,8 @@
     "node_modules/rollup-pluginutils/node_modules/estree-walker": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
-      "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w=="
+      "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+      "dev": true
     },
     "node_modules/safe-buffer": {
       "version": "5.1.2",
@@ -1323,7 +1325,8 @@
     "node_modules/url-join": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
-      "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA=="
+      "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
+      "dev": true
     },
     "node_modules/watchpack": {
       "version": "2.3.1",
@@ -1845,10 +1848,9 @@
       "dev": true
     },
     "decky-frontend-lib": {
-      "version": "0.0.2",
+      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/decky-frontend-lib/-/decky-frontend-lib-0.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/decky-frontend-lib/-/decky-frontend-lib-0.0.5.tgz",
-      "integrity": "sha512-XyxSLrkvEjA0oDsPnV30cyMgzqSOKMp3riAkk1e0iEItvt26m4w4iGPD7JO1rtXquWpSEvYB9SCmhlrX/3COXA==",
+      "integrity": "sha512-wv2f7/VZZa8bzp5a2PP7z+aXmFY2McZ3Wpb8sAdMuW/1xdzaAjExJQOMkT6nBf1BUzIME5fLK4X+Ht36CmeZ8Q=="
-      "requires": {}
     },
     "deepmerge": {
       "version": "4.2.2",
@@ -1951,6 +1953,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "optional": true
     },
     "function-bind": {
@@ -2255,6 +2258,7 @@
       "version": "2.70.2",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.70.2.tgz",
       "integrity": "sha512-EitogNZnfku65I1DD5Mxe8JYRUCy0hkK5X84IlDtUs+O6JRMpRciXTzyCUuX11b5L5pvjH+OmFXiQ3XjabcXgg==",
+      "dev": true,
       "requires": {
         "fsevents": "~2.3.2"
       }
@@ -2263,6 +2267,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/rollup-plugin-import-assets/-/rollup-plugin-import-assets-1.1.1.tgz",
       "integrity": "sha512-u5zJwOjguTf2N+wETq2weNKGvNkuVc1UX/fPgg215p5xPvGOaI6/BTc024E9brvFjSQTfIYqgvwogQdipknu1g==",
+      "dev": true,
       "requires": {
         "rollup-pluginutils": "^2.7.1",
         "url-join": "^4.0.1"
@@ -2272,6 +2277,7 @@
       "version": "2.8.2",
       "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
       "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+      "dev": true,
       "requires": {
         "estree-walker": "^0.6.1"
       },
@@ -2279,7 +2285,8 @@
         "estree-walker": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
-          "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w=="
+          "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+          "dev": true
         }
       }
     },
@@ -2448,7 +2455,8 @@
     "url-join": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
-      "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA=="
+      "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
+      "dev": true
     },
     "watchpack": {
       "version": "2.3.1",

package.json

@@ -32,14 +32,14 @@
     "@rollup/plugin-typescript": "^8.3.2",
     "@types/react": "16.14.0",
     "@types/webpack": "^5.28.0",
-    "rollup-plugin-import-assets": "^1.1.1",
     "rollup": "^2.70.2",
+    "rollup-plugin-import-assets": "^1.1.1",
     "shx": "^0.3.4",
     "tslib": "^2.4.0",
     "typescript": "^4.6.4"
   },
   "dependencies": {
-    "decky-frontend-lib": "^0.0.2",
+    "decky-frontend-lib": "^0.0.5",
     "react-icons": "^4.3.1"
   }
 }

src/index.tsx

@@ -1,10 +1,12 @@
 import {
   ButtonItem,
   definePlugin,
+  DialogButton,
   Menu,
   MenuItem,
   PanelSection,
   PanelSectionRow,
+  Router,
   ServerAPI,
   showModal,
   staticClasses,
@@ -60,14 +62,44 @@ const Content: VFC<{ serverAPI: ServerAPI }> = ({}) => {
           <img src={logo} />
         </div>
       </PanelSectionRow>
+
+      <PanelSectionRow>
+        <ButtonItem
+          layout="below"
+          onClick={() => {
+            Router.CloseSideMenus();
+            Router.Navigate("/decky-plugin-test");
+          }}
+        >
+          Router
+        </ButtonItem>
+      </PanelSectionRow>
     </PanelSection>
   );
 };
 
+const DeckyPluginRouterTest: VFC = () => {
+  return (
+    <div style={{ marginTop: "50px", color: "white" }}>
+      Hello World!
+      <DialogButton onClick={() => Router.NavigateToStore()}>
+        Go to Store
+      </DialogButton>
+    </div>
+  );
+};
+
 export default definePlugin((serverApi: ServerAPI) => {
+  serverApi.routerHook.addRoute("/decky-plugin-test", DeckyPluginRouterTest, {
+    exact: true,
+  });
+
   return {
     title: <div className={staticClasses.Title}>Example Plugin</div>,
     content: <Content serverAPI={serverApi} />,
     icon: <FaShip />,
+    onDismount() {
+      serverApi.routerHook.removeRoute("/decky-plugin-test");
+    },
   };
 });