chore(release): 1.7.6 [CI SKIP]

chore(deps-dev): bump semantic-release from 19.0.2 to 19.0.3

.releaserc.json

@@ -1,7 +1,15 @@
 {
   "branches": ["main", "dev"],
   "plugins": [
-    "@semantic-release/commit-analyzer",
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        "preset": "angular",
+        "releaseRules": [
+          {"type": "chore", "scope": "classes", "release": "patch"}
+        ]
+      }
+    ],
     "@semantic-release/release-notes-generator",
     "@semantic-release/changelog",
     "@semantic-release/npm",
@@ -9,7 +17,7 @@
     [
       "@semantic-release/git",
       {
-        "assets": ["CHANGELOG.md", "package.json"],
+        "assets": ["CHANGELOG.md", "package.json", "package-lock.json"],
         "message": "chore(release): ${nextRelease.version} [CI SKIP]"
       }
     ]

CHANGELOG.md

@@ -1,3 +1,262 @@
+## [1.7.6](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.7.5...v1.7.6) (2022-08-18)
+
+
+### Bug Fixes
+
+* **TextFieldProps:** Add "disabled" option to TextFieldProps ([#14](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/14)) ([af98a76](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/af98a76b86fb05942b9554adb369adbeaf27e70f))
+
+## [1.7.5](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.7.4...v1.7.5) (2022-08-18)
+
+
+### Bug Fixes
+
+* **ButtonItem:** update to account for both prop settings ([6be0644](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/6be06446f2a7e0357b830be116fd25810c427dd5))
+
+## [1.7.4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.7.3...v1.7.4) (2022-08-18)
+
+
+### Bug Fixes
+
+* updates for webpack v5 ([a672230](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/a672230b0051dd942988554ec663ea7bfcd61cfe))
+
+## [1.7.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.7.2...v1.7.3) (2022-08-17)
+
+
+### Bug Fixes
+
+* **Router:** Add more members to Router interface ([#12](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/12)) ([7d3b5e8](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/7d3b5e8123f6eeead1e2e227985069e54fe52572))
+
+## [1.7.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.7.1...v1.7.2) (2022-08-17)
+
+
+### Bug Fixes
+
+* **utils:** allow prop reassigns to fail ([a592883](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/a592883a2eba52ba18876989acf939d12fa61fd3))
+
+## [1.7.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.7.0...v1.7.1) (2022-08-17)
+
+
+### Bug Fixes
+
+* **utils:** better method to wrap react classes ([e644de3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/e644de35d70680d17d70e89cc9b929a5aae08b48))
+
+# [1.7.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.6.2...v1.7.0) (2022-08-17)
+
+
+### Features
+
+* **utils:** add wrapReactClass ([d237bd4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/d237bd48e4b9e6436d7daefdf70327875e9e940d))
+
+## [1.6.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.6.1...v1.6.2) (2022-08-15)
+
+## [1.6.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.6.0...v1.6.1) (2022-08-13)
+
+
+### Bug Fixes
+
+* **wrapReactType:** try another method ([b7dc1d6](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/b7dc1d6275ed28b1e37b6cb512b2c5d1600a8f63))
+
+# [1.6.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.5.1...v1.6.0) (2022-08-13)
+
+
+### Features
+
+* **Utilities:** add wrapReactType utility ([7cf45cf](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/7cf45cf3718d6e5295115f28a5f4dd24c6ff14e3))
+
+## [1.5.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.5.0...v1.5.1) (2022-08-10)
+
+
+### Bug Fixes
+
+* **security:** update for minimist pollution exploit ([1de979f](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/1de979f7135c8d5eea1faca3d480d662c5e41d3d))
+
+# [1.5.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.4.0...v1.5.0) (2022-08-10)
+
+
+### Features
+
+* **ServerAPI:** add Toaster to serverAPI ([e2126af](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/e2126afd06f339a22dbbaea89b834157a5975b96))
+
+# [1.4.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.3.0...v1.4.0) (2022-08-08)
+
+
+### Features
+
+* **utils:** add findInTree and findInReactTree ([b21dfcd](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/b21dfcdb661fd7ad43213756dadb6cfdf0ac1e94))
+
+# [1.3.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.2.4...v1.3.0) (2022-08-02)
+
+
+### Features
+
+* **plugin:** api for patching existing routes ([5b29447](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/5b29447cfa597773a81aa233da9362346683505d))
+
+## [1.2.4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.2.3...v1.2.4) (2022-07-25)
+
+
+### Bug Fixes
+
+* **Modal:** add closeModal ([994b9e2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/994b9e2cc6f41da3d813e6f339bd2fd30e4fa3ad))
+
+## [1.2.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.2.2...v1.2.3) (2022-07-25)
+
+
+### Bug Fixes
+
+* **Modal:** add another prop ([2fdfcdd](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/2fdfcdd4788ea0d6483e92729c3102212f3ec0fb))
+
+## [1.2.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.2.1...v1.2.2) (2022-07-25)
+
+
+### Bug Fixes
+
+* **Modal:** add more props to typings ([97997ad](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/97997adfaf1a68ef436279e6e48f34f5eaa9531c))
+
+## [1.2.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.2.0...v1.2.1) (2022-07-13)
+
+
+### Bug Fixes
+
+* **ProgressBar:** extend correct prop type ([944a902](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/944a9024ff20f0b596869564d014d7dd73e74254))
+
+# [1.2.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.1.0...v1.2.0) (2022-07-13)
+
+
+### Features
+
+* **ProgressBar:** add new progress bars ([d9e4ff3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/d9e4ff3ebd22a31306f564e7f8ad82879c8fb699))
+
+# [1.1.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.0.2...v1.1.0) (2022-07-09)
+
+
+### Features
+
+* **Router.tsx:** adds more methods to router ([#9](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/9)) ([602f93a](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/602f93ae6a5ceca5383b888cd4803638799558c5))
+
+## [1.0.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.0.1...v1.0.2) (2022-07-07)
+
+
+### Bug Fixes
+
+* **Plugin:** support non-ui plugins ([51c418d](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/51c418d560247c917125cd5534a978256724e5f3))
+
+## [1.0.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v1.0.0...v1.0.1) (2022-06-29)
+
+
+### Bug Fixes
+
+* **package:** enable tree shaking ([58933f8](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/58933f827ce2e2ae9b162da4e0061a7591c5759d))
+
+# [1.0.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.12.3...v1.0.0) (2022-06-23)
+
+
+### Code Refactoring
+
+* **components:** rename Field components ([9bd9622](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/9bd96227a0bb295dcc29abca71e37983307f0505))
+
+
+### BREAKING CHANGES
+
+* **components:** Toggle -> ToggleField Slider -> SliderField & add Toggle component
+
+## [0.12.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.12.2...v0.12.3) (2022-06-23)
+
+
+### Bug Fixes
+
+* **Field:** description is a string you idiot ([4697749](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/46977496fd4cbe266c370fcffe59a9d9b7543a92))
+
+## [0.12.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.12.1...v0.12.2) (2022-06-23)
+
+
+### Bug Fixes
+
+* **Field:** title -> label ([da4c79b](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/da4c79b5aeb3c589527e17ad29610a8e3f929b79))
+
+## [0.12.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.12.0...v0.12.1) (2022-06-23)
+
+
+### Bug Fixes
+
+* **components:** export FIeld ([a87e1bb](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/a87e1bb46f749e10ea2b94a011df48f162834c25))
+
+# [0.12.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.11.1...v0.12.0) (2022-06-23)
+
+
+### Features
+
+* **components:** add Field ([7d82a82](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/7d82a82e9c4db59832593cb6f0f78775b252dc69))
+
+## [0.11.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.11.0...v0.11.1) (2022-06-23)
+
+
+### Bug Fixes
+
+* **Router:** make specifying quick access tab not required ([7efc034](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/7efc0347f7aa22773feccb0763280c4fd1c4a231))
+
+# [0.11.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.10.5...v0.11.0) (2022-06-20)
+
+
+### Features
+
+* **utils:** add sleep util ([db64f34](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/db64f3472542b080b1d470c6b8d7aa441db0bfe6))
+
+## [0.10.5](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.10.4...v0.10.5) (2022-06-20)
+
+
+### Bug Fixes
+
+* **patcher:** why the hell did i do it that way ([2afb7f1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/2afb7f16bb219013d338bc4e002605d32235385c))
+
+## [0.10.4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.10.3...v0.10.4) (2022-06-19)
+
+
+### Bug Fixes
+
+* **plugin:** correct return type on injectCssIntoTab ([1ce15d2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/1ce15d261f4726a2f8bdaff7c8a98497f2622969))
+
+## [0.10.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.10.2...v0.10.3) (2022-06-18)
+
+
+### Bug Fixes
+
+* **ServerAPI:** add injectCssIntoTab to serverAPI typings ([823a274](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/823a2745f9717ed2d2a5d95e2ef25739bffc18c9))
+
+## [0.10.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.10.1...v0.10.2) (2022-06-16)
+
+
+### Bug Fixes
+
+* **Router:** add NavigateBackOrOpenMenu() ([077334e](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/077334e376fb42283e094f0b57c818c580c6f7ba))
+
+## [0.10.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.10.0...v0.10.1) (2022-06-16)
+
+
+### Bug Fixes
+
+* **Focusable:** add ref prop, fix event types ([f1e20cd](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/f1e20cd0b54622d634202c85cca920323e4df336))
+
+# [0.10.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.9.1...v0.10.0) (2022-06-10)
+
+
+### Features
+
+* **components:** remove HorizontalFocus, add Focusable ([9beab5f](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/9beab5f7e913f2ef2a8a3047046a524d3007c3b8))
+
+## [0.9.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.9.0...v0.9.1) (2022-06-09)
+
+
+### Bug Fixes
+
+* **SuspensefulImage:** fix export ([dddb703](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/dddb703a2e712bf2e9d7e172a414c63ffd6a1cc9))
+
+# [0.9.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.8.0...v0.9.0) (2022-06-09)
+
+
+### Features
+
+* **custom-components:** add SuspensefulImage ([6324282](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/6324282b480f358a3d5936ab6d08ab239d640997))
+
 # [0.8.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.7.2...v0.8.0) (2022-06-09)
 
 

README.md

@@ -1 +1,27 @@
 # Decky Frontend Library
+
+Library used to develop plugins used for use with [decky-loader](https://github.com/SteamDeckHomebrew/decky-loader).
+
+## Decky Loader Discord [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/ZU74G2NJzk)
+
+Please contact the developers here for questions and support that cannot be addressed via a Github issue.
+
+## Developers and Contributors
+
+This library is focused on usage by developers to provide custom React components based on those found in the Steam Deck's React UI.  
+This method allows developers to add UI elements and code without clobbering the existing UI of the deck in order to do so.  
+This library can also theoretically be used to extend existing UI elements of the Steam Deck UI but this has not been tested extensively.
+
+### Getting Started (Contributors)
+
+1. Clone the repository to your preferred location
+2. If you wish to add features such as new UI components, please create a feature branch to PR to the original repo.
+3. Bug/hotfixes are acceptable on the main branch,
+
+### Getting Started (Developers)
+
+If you would like a feature added to decky-frontend-lib, please request it via a Github issue.  
+
+If you want to start making a plugin with decky-frontend-lib, please direct your attention to the [decky-plugin-template](https://github.com/SteamDeckHomebrew/decky-plugin-template) repository.
+
+This library can be found on [npm](https://www.npmjs.com/package/decky-frontend-lib) and as such you can pull it without a local copy for your project as needed.

package.json

@@ -1,10 +1,11 @@
 {
   "name": "decky-frontend-lib",
-  "version": "0.8.0",
+  "version": "1.7.6",
   "description": "A library for building decky plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
+  "sideEffects": false,
   "scripts": {
     "build": "shx rm -rf dist && tsc -b",
     "dev": "tsc -b -w",
@@ -53,7 +54,7 @@
     "import-sort-style-module": "^6.0.0",
     "jest": "^27.5.1",
     "prettier-plugin-import-sort": "^0.0.7",
-    "semantic-release": "^19.0.2",
+    "semantic-release": "^19.0.3",
     "shx": "^0.3.4",
     "ts-jest": "^27.1.4",
     "typescript": "^4.6.3"
@@ -71,5 +72,8 @@
       "style": "module",
       "parser": "typescript"
     }
+  },
+  "dependencies": {
+    "minimist": "^1.2.6"
   }
 }

src/custom-components/SuspensefulImage.tsx

@@ -0,0 +1,41 @@
+import { Spinner } from '../deck-components';
+import { useEffect } from 'react';
+import { FC, ImgHTMLAttributes, useState } from 'react';
+
+interface SuspensefulImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  suspenseWidth?: string | number;
+  suspenseHeight?: string | number;
+}
+
+export const SuspensefulImage: FC<SuspensefulImageProps> = (props) => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    const img = new Image();
+    img.src = props.src || '';
+    img.addEventListener('load', () => {
+      setLoading(false);
+    });
+    img.addEventListener('error', () => {
+      setError(true);
+    });
+  }, []);
+
+  return loading ? (
+    <div
+      style={{
+        width: props.suspenseWidth || props.style?.width,
+        height: props.suspenseHeight || props.style?.height,
+        background: 'rgba(255, 255, 255, 0.2)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {error ? 'Missing image' : <Spinner style={{ height: '48px' }} />}
+    </div>
+  ) : (
+    <img {...props} />
+  );
+};

src/custom-components/index.ts

@@ -0,0 +1 @@
+export * from './SuspensefulImage';

src/deck-components/ButtonItem.tsx

@@ -9,5 +9,5 @@ export interface ButtonItemProps extends ItemProps {
 }
 
 export const ButtonItem = Object.values(CommonUIModule).find((mod: any) =>
-  mod?.render?.toString()?.includes('childrenContainerWidth:"min"'),
+  mod?.render?.toString()?.includes('"highlightOnFocus","childrenContainerWidth"') || mod?.render?.toString()?.includes('childrenContainerWidth:"min"'),
 ) as FC<ButtonItemProps>;

src/deck-components/Field.tsx

@@ -0,0 +1,22 @@
+import { FC, HTMLAttributes, ReactNode, RefAttributes } from 'react';
+import { findModuleChild } from '../webpack';
+
+export interface FieldProps extends HTMLAttributes<HTMLDivElement> {
+  label?: string | ReactNode;
+  description?: string | ReactNode;
+  disabled?: boolean;
+  icon?: ReactNode;
+  childrenLayout?: string;
+  childrenContainerWidth?: string;
+  padding?: string;
+  highlightOnFocus?: boolean;
+  indentLevel?: number;
+  verticalAlignment?: string;
+}
+
+export const Field = findModuleChild((m) => {
+    if (typeof m !== "object") return undefined;
+    for (let prop in m) {
+      if (m[prop]?.render?.toString().includes('"shift-children-below"')) return m[prop]
+    }
+}) as FC<FieldProps & RefAttributes<HTMLDivElement>>;

src/deck-components/Focusable.tsx

@@ -1,15 +1,19 @@
-import { ReactNode, VFC } from "react";
+import { HTMLAttributes, ReactNode, RefAttributes, VFC } from "react";
 import { findModuleChild } from "../webpack";
 
-export interface FocusableProps {
-    children: ReactNode;
+export interface FocusableProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  "flow-children"?: string;
+  focusClassName?: string;
+  focusWithinClassName?: string;
+  onActivate?: (e: CustomEvent) => void;
+  onCancel?: (e: CustomEvent) => void;
 }
 
-export const HorizontalFocus = findModuleChild(m => {
-    if (typeof m !== "object") return undefined;
-    for (let prop in m) {
-      if (m[prop]?.toString()?.includes('"children","alignItems","spacing"')) {
-        return m[prop];
-      }
-    }
-}) as VFC<FocusableProps>;
+export const Focusable = findModuleChild((m) => {
+  if (typeof m !== 'object') return undefined;
+  for (let prop in m) {
+    if (m[prop]?.render?.toString()?.includes('["flow-children","onActivate","onCancel","focusClassName",'))
+      return m[prop];
+  }
+}) as VFC<FocusableProps & RefAttributes<HTMLDivElement>>;

src/deck-components/Modal.tsx

@@ -16,7 +16,15 @@ export interface ModalRootProps {
   onMiddleButton?(): void;
   onCancel?(): void;
   onOK?(): void;
+  onEscKeypress?(): void;
+  closeModal?(): void;
+  className?: string;
+  modalClassName?: string;
   bAllowFullSize?: boolean;
+  bDestructiveWarning?: boolean;
+  bDisableBackgroundDismiss?: boolean;
+  bHideCloseIcon?: boolean;
+  bOKDisabled?: boolean;
 }
 
 export const ModalRoot = findModuleChild((m) => {

src/deck-components/ProgressBar.tsx

@@ -1,18 +1,44 @@
-import { VFC } from 'react';
+import { VFC, ReactNode } from 'react';
 
 import { findModuleChild } from '../webpack';
 import { ItemProps } from './Item';
 
-export interface ProgressBarItem extends ItemProps {
+export interface ProgressBarItemProps extends ItemProps {
   indeterminate?: boolean;
   nTransitionSec?: number;
   nProgress?: number;
   focusable?: boolean;
 }
 
+export interface ProgressBarProps {
+  indeterminate?: boolean;
+  nTransitionSec?: number;
+  nProgress?: number;
+  focusable?: boolean;
+}
+
+export interface ProgressBarWithInfoProps extends ProgressBarItemProps {
+  sTimeRemaining?: ReactNode;
+  sOperationText?: ReactNode;
+}
+
+export const ProgressBar = findModuleChild((m) => {
+  if (typeof m !== 'object') return undefined;
+  for (let prop in m) {
+    if (m[prop]?.toString()?.includes('.ProgressBar,"standard"==')) return m[prop];
+  }
+}) as VFC<ProgressBarProps>;
+
+export const ProgressBarWithInfo = findModuleChild((m) => {
+  if (typeof m !== 'object') return undefined;
+  for (let prop in m) {
+    if (m[prop]?.toString()?.includes('.ProgressBarFieldStatus},')) return m[prop];
+  }
+}) as VFC<ProgressBarWithInfoProps>;
+
 export const ProgressBarItem = findModuleChild((m) => {
   if (typeof m !== 'object') return undefined;
   for (let prop in m) {
     if (m[prop]?.toString()?.includes('"indeterminate","nTransitionSec"')) return m[prop];
   }
-}) as VFC<ProgressBarItem>;
+}) as VFC<ProgressBarItemProps>;

src/deck-components/Router.tsx

@@ -17,18 +17,77 @@ export enum QuickAccessTab {
   Decky,
 }
 
+export enum DisplayStatus {
+  Invalid = 0,
+  Launching = 1,
+  Uninstalling = 2,
+  Installing = 3,
+  Running = 4,
+  Validating = 5,
+  Updating = 6,
+  Downloading = 7,
+  Synchronizing = 8,
+  ReadyToInstall = 9,
+  ReadyToPreload = 10,
+  ReadyToLaunch = 11,
+  RegionRestricted = 12,
+  PresaleOnly = 13,
+  InvalidPlatform = 14,
+  PreloadComplete = 16,
+  BorrowerLocked = 17,
+  UpdatePaused = 18,
+  UpdateQueued = 19,
+  UpdateRequired = 20,
+  UpdateDisabled = 21,
+  DownloadPaused = 22,
+  DownloadQueued = 23,
+  DownloadRequired = 24,
+  DownloadDisabled = 25,
+  LicensePending = 26,
+  LicenseExpired = 27,
+  AvailForFree = 28,
+  AvailToBorrow = 29,
+  AvailGuestPass = 30,
+  Purchase = 31,
+  Unavailable = 32,
+  NotLaunchable = 33,
+  CloudError = 34,
+  CloudOutOfDate = 35,
+  Terminating = 36,
+}
+
+export type AppOverview = {
+  appid: string
+  display_name: string
+  display_status: DisplayStatus
+  sort_as: string
+}
+
 export interface Router {
   CloseSideMenus(): void;
-  OpenQuickAccessMenu(quickAccessTab: QuickAccessTab): void;
+  OpenQuickAccessMenu(quickAccessTab?: QuickAccessTab): void;
   GetQuickAccessTab(): QuickAccessTab;
   Navigate(path: string): void;
+  NavigateBackOrOpenMenu(): void;
+  NavigateToAppProperties(): void
+  NavigateToBugForum(): void
   NavigateToExternalWeb(url: string): void;
-  NavigateToStore(): void;
+  NavigateToHelp(): void
+  NavigateToInvites(): void
+  NavigateToRunningApp(replace?: boolean): void;
+  NavigateToStorage(): void
+  NavigateToStore(): void
+  NavigateToStoreApp(appId: number | string): void
+  NavigateToStoreFreeToPlay(): void
+  NavigateToStoreManual(): void
+  NavigateToStoreNewReleases(): void
+  NavigateToStoreOnSale(): void
   ToggleSideMenu(sideMenu: SideMenu): void;
   CloseSideMenus(): void;
   OpenSideMenu(sideMenu: SideMenu): void;
   OpenPowerMenu(unknown?: any): void;
-  get RunningApps(): any;
+  get RunningApps(): AppOverview[];
+  get MainRunningApp(): AppOverview | undefined;
 }
 
 export const Router = findModuleChild((m: Module) => {

src/deck-components/SliderField.tsx

@@ -9,7 +9,7 @@ export interface NotchLabel {
   value?: number;
 }
 
-export interface SliderProps extends ItemProps {
+export interface SliderFieldProps extends ItemProps {
   value: number;
   min?: number;
   max?: number;
@@ -27,6 +27,6 @@ export interface SliderProps extends ItemProps {
   onChange?(value: number): void;
 }
 
-export const Slider = Object.values(CommonUIModule).find((mod: any) =>
+export const SliderField = Object.values(CommonUIModule).find((mod: any) =>
   mod?.toString()?.includes('SliderField,fallback'),
-) as FC<SliderProps>;
+) as FC<SliderFieldProps>;

src/deck-components/TextField.tsx

@@ -6,6 +6,7 @@ export interface TextFieldProps {
   label?: ReactNode;
   requiredLabel?: ReactNode;
   description?: ReactNode;
+  disabled?: boolean;
   bShowCopyAction?: boolean;
   bShowClearAction?: boolean;
   bAlwaysShowClearAction?: boolean;

src/deck-components/Toggle.tsx

@@ -1,14 +1,14 @@
 import { FC } from 'react';
 
 import { CommonUIModule } from '../webpack';
-import { ItemProps } from './Item';
 
-export interface ToggleProps extends ItemProps {
-  checked: boolean;
+export interface ToggleProps {
+  value: boolean;
   disabled?: boolean;
   onChange?(checked: boolean): void;
+  navRef?: any; // TODO figure out what this is
 }
 
 export const Toggle = Object.values(CommonUIModule).find((mod: any) =>
-  mod?.render?.toString()?.includes('ToggleField,fallback'),
+  mod?.render?.toString()?.includes('.ToggleOff)'),
 ) as FC<ToggleProps>;

src/deck-components/ToggleField.tsx

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+
+import { CommonUIModule } from '../webpack';
+import { ItemProps } from './Item';
+
+export interface ToggleFieldProps extends ItemProps {
+  checked: boolean;
+  disabled?: boolean;
+  onChange?(checked: boolean): void;
+}
+
+export const ToggleField = Object.values(CommonUIModule).find((mod: any) =>
+  mod?.render?.toString()?.includes('ToggleField,fallback'),
+) as FC<ToggleFieldProps>;

src/deck-components/index.ts

@@ -1,6 +1,7 @@
 export * from './Button';
 export * from './ButtonItem';
 export * from './Dropdown';
+export * from './Field';
 export * from './Focusable';
 export * from './Menu';
 export * from './Modal';
@@ -8,9 +9,10 @@ export * from './Panel';
 export * from './ProgressBar';
 export * from './Router';
 export * from './SidebarNavigation';
-export * from './Slider';
+export * from './SliderField';
 export * from './Spinner';
 export * from './static-classes';
 export * from './SteamSpinner';
 export * from './TextField';
 export * from './Toggle';
+export * from './ToggleField';

src/deck-components/static-classes.ts

@@ -63,6 +63,14 @@ type StaticClasses = Record<
   string
 >;
 
+type ScrollClasses = Record<
+  | 'ScrollBoth'
+  | 'ScrollPanel'
+  | 'ScrollX'
+  | 'ScrollY',
+  string
+>;
+
 type GamepadDialogClasses = Record<
   | 'duration-app-launch'
   | 'GamepadDialogContent'
@@ -167,6 +175,16 @@ export const staticClasses: StaticClasses = findModule((mod) => {
   return false;
 });
 
+export const scrollClasses: ScrollClasses = findModule((mod) => {
+  if (typeof mod !== 'object') return false;
+
+  if (mod.ScrollPanel && mod.ScrollY) {
+    return true;
+  }
+
+  return false;
+});
+
 export const gamepadDialogClasses: GamepadDialogClasses = findModule((mod) => {
   if (typeof mod !== 'object') return false;
 

src/index.ts

@@ -1,4 +1,5 @@
 // export * from './deck-libs';
+export * from './custom-components';
 export * from './deck-components';
 export * from './plugin';
 export * from './webpack';

src/plugin.tsx

@@ -1,10 +1,10 @@
-import type { ComponentType } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import { RouteProps } from 'react-router';
 
 export interface Plugin {
   title: JSX.Element;
   icon: JSX.Element;
-  content: JSX.Element;
+  content?: JSX.Element;
   onDismount?(): void;
 }
 
@@ -20,17 +20,39 @@ interface ServerResponseError {
 
 type ServerResponse<TRes> = ServerResponseSuccess<TRes> | ServerResponseError;
 
-interface RouterHook {
+type RoutePatch = (route: RouteProps) => RouteProps;
+
+export interface RouterHook {
   addRoute(path: string, component: ComponentType, props?: Omit<RouteProps, 'path' | 'children'>): void;
+  addPatch(path: string, patch: RoutePatch): RoutePatch;
+  removePatch(path: string, patch: RoutePatch): void;
   removeRoute(path: string): void;
 }
 
+export interface ToastData {
+  title: ReactNode;
+  body: ReactNode;
+  onClick?: () => void;
+  logo?: ReactNode;
+  icon?: ReactNode;
+  className?: string;
+  contentClassName?: string;
+  duration?: number
+  critical?: boolean
+}
+
+export interface Toaster {
+  toast(toast: ToastData): void;
+}
+
 export interface ServerAPI {
   routerHook: RouterHook;
+  toaster: Toaster;
   callPluginMethod<TArgs = {}, TRes = {}>(methodName: string, args: TArgs): Promise<ServerResponse<TRes>>;
   callServerMethod<TArgs = {}, TRes = {}>(methodName: string, args: TArgs): Promise<ServerResponse<TRes>>;
-  fetchNoCors<TRes = {}>(url: string, request: RequestInfo): Promise<ServerResponse<TRes>>;
+  fetchNoCors<TRes = {}>(url: RequestInfo, request?: RequestInit): Promise<ServerResponse<TRes>>;
   executeInTab(tab: string, runAsync: boolean, code: string): Promise<unknown>;
+  injectCssIntoTab<TRes = string>(tab: string, style: string): Promise<ServerResponse<TRes>>;
   removeCssFromTab(tab: string, cssId: string): Promise<unknown>;
 }
 

src/utils.ts

@@ -42,7 +42,7 @@ export function fakeRenderComponent(fun: Function): any {
     return res;
 }
 
-export function beforePatch(obj: any, name: string, fnc: Function): void {
+export function beforePatch(obj: any, name: string, fnc: (args: any[]) => any): void {
     const orig = obj[name];
     obj[name] = function (...args: any[]) {
         fnc.call(this, args);
@@ -53,7 +53,7 @@ export function beforePatch(obj: any, name: string, fnc: Function): void {
     obj[name].__deckyOrig = orig;
 }
 
-export function afterPatch(obj: any, name: string, fnc: Function): void {
+export function afterPatch(obj: any, name: string, fnc: (args: any[], ret: any) => any): void {
     const orig = obj[name];
     obj[name] = function (...args: any[]) {
         let ret = orig.call(this, ...args);
@@ -65,7 +65,7 @@ export function afterPatch(obj: any, name: string, fnc: Function): void {
     obj[name].__deckyOrig = orig;
 }
 
-export function replacePatch(obj: any, name: string, fnc: Function): void {
+export function replacePatch(obj: any, name: string, fnc: (args: any[]) => any): void {
     const orig = obj[name];
     obj[name] = function (...args: any[]) {
       const ret = fnc.call(this, args);
@@ -82,10 +82,64 @@ export function unpatch(obj: any, name: any): void {
     obj[name] = obj[name].__deckyOrig;
 }
 
+export function wrapReactType(node: any, prop?: any) {
+    return node[prop || "type"] = {...node[prop || "type"]};
+}
+
+export function wrapReactClass(node: any, prop?: any) {
+    const cls = node[prop || "type"];
+    const wrappedCls = class extends cls {};
+    Object.getOwnPropertyNames(cls.prototype).forEach((prop: any) => {
+        try {
+            wrappedCls.prototype[prop] = cls.prototype[prop]
+        } catch (e) {}
+    });
+    Object.getOwnPropertyNames(cls).forEach((prop: any) => {
+        try {
+            if (prop != "prototype") wrappedCls[prop] = cls[prop]
+        } catch (e) {}
+    });
+    wrappedCls.prototype.__proto__ = cls.prototype.__proto__;
+    return node[prop || "type"] = wrappedCls;
+}
+
 export function getReactInstance(o: HTMLElement | Element | Node) {
     return o[Object.keys(o).find(k => k.startsWith('__reactInternalInstance')) as string]
 }
 
 export function joinClassNames(...classes: string[]): string {
     return classes.join(" ");
-}
+}
+
+export function sleep(ms: number) {
+    return new Promise(res => setTimeout(res, ms));
+}
+
+// Based on https://github.com/GooseMod/GooseMod/blob/9ef146515a9e59ed4e25665ed365fd72fc0dcf23/src/util/react.js#L20
+export interface findInTreeOpts {
+    walkable?: string[],
+    ignore?: string[]
+}
+
+export declare type findInTreeFilter = (element: any) => boolean
+
+export const findInTree = (parent: any, filter: findInTreeFilter, opts: findInTreeOpts): any => {
+    const { walkable = null, ignore = [] } = opts ?? {};
+  
+    if (!parent || typeof parent !== 'object') { // Parent is invalid to search through
+        return null;
+    }
+  
+    if (filter(parent)) return parent; // Parent matches, just return
+  
+    if (Array.isArray(parent)) { // Parent is an array, go through values
+        return parent.map((x) => findInTree(x, filter, opts)).find((x) => x);
+    }
+  
+    // Parent is an object, go through values (or option to only use certain keys)
+    return (walkable || Object.keys(parent)).map((x) => !ignore.includes(x) && findInTree(parent[x], filter, opts)).find((x: any) => x);
+};
+  
+export const findInReactTree = (node: any, filter: findInTreeFilter) => findInTree(node, filter, { // Specialised findInTree for React nodes
+    walkable: [ 'props', 'children', 'child', 'sibling' ]
+});

src/webpack.ts

@@ -1,6 +1,7 @@
 declare global {
   interface Window {
     webpackJsonp: any;
+    webpackChunksteamui: any;
   }
 }
 
@@ -9,14 +10,33 @@ export type Module = any;
 type FilterFn = (module: any) => boolean;
 type FindFn = (module: any) => any;
 
-const wpRequire = window.webpackJsonp.push([
-  [],
-  { get_require: (mod: any, _exports: any, wpRequire: any) => (mod.exports = wpRequire) },
-  [['get_require']],
-]);
+export let webpackCache: any = {};
+let hasWebpack5 = false;
 
-export const allModules: Module[] = Object.keys(wpRequire.c)
-  .map((x) => wpRequire.c[x].exports)
+if (window.webpackJsonp && !window.webpackJsonp.deckyShimmed) {
+  // Webpack 4, currently on stable
+  const wpRequire = window.webpackJsonp.push([
+    [],
+    { get_require: (mod: any, _exports: any, wpRequire: any) => (mod.exports = wpRequire) },
+    [['get_require']],
+  ]);
+
+  delete wpRequire.m.get_require;
+  delete wpRequire.c.get_require;
+  webpackCache = wpRequire.c;
+} else {
+  // Webpack 5, currently on beta
+  hasWebpack5 = true;
+  const id = Math.random();
+  let initReq: any;
+  window.webpackChunksteamui.push([[ id ], {}, (r: any) => { initReq = r }]);
+  for (let i of Object.keys(initReq.m)) {
+    webpackCache[i] = initReq(i)
+  }
+}
+
+export const allModules: Module[] = hasWebpack5 ? Object.values(webpackCache).filter((x) => x) : Object.keys(webpackCache)
+  .map((x) => webpackCache[x].exports)
   .filter((x) => x);
 
 export const findModule = (filter: FilterFn) => {