chore(release): 1.0.2 [CI SKIP]

* make fetchNoCors have similar typing to fetch

* request param should be optional

.commitlintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["@commitlint/config-conventional"]
+}

.github/workflows/release.yaml

@@ -0,0 +1,29 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Setup | Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Setup | Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Setup | Dependencies
+        run: npm ci
+      - name: Test
+        run: npm test
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npm exec semantic-release

.gitignore

@@ -35,3 +35,6 @@ Thumbs.db
 dist/
 
 research/
+
+# PNPM lockfile
+pnpm-lock.yaml

.husky/commit-msg

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

.releaserc.json

@@ -0,0 +1,17 @@
+{
+  "branches": ["main", "dev"],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/changelog",
+    "@semantic-release/npm",
+    "@semantic-release/github",
+    [
+      "@semantic-release/git",
+      {
+        "assets": ["CHANGELOG.md", "package.json", "package-lock.json"],
+        "message": "chore(release): ${nextRelease.version} [CI SKIP]"
+      }
+    ]
+  ]
+}

CHANGELOG.md

@@ -0,0 +1,226 @@
+## [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)
+
+
+### Features
+
+* **components:** add HorizontalFocus ([4d30efc](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/4d30efc33b5398b91e756695fefa91cc37f83ff1))
+
+## [0.7.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.7.1...v0.7.2) (2022-06-08)
+
+
+### Bug Fixes
+
+* **package:** fix pnpm peer dependencies errors ([e5e561e](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/e5e561edd67994b8c55f99c1228e47d77b1c2ee2))
+
+## [0.7.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.7.0...v0.7.1) (2022-06-08)
+
+
+### Bug Fixes
+
+* **Router:** add NavigateToStore to interface ([dd5c42c](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/dd5c42c57d9ce6266f56237607bf37d8b5bd3b4c))
+* **spinners:** add SVG props ([24244f6](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/24244f6e91e39a11bb964ee2779662084dcd0fd0))
+
+# [0.7.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.6.0...v0.7.0) (2022-06-08)
+
+
+### Features
+
+* **components:** added shared item-props, progressbar, and more types for slider ([4328385](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/43283853916f3993d92f6841b12f7ee47667e75b))
+
+# [0.6.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.5.1...v0.6.0) (2022-06-08)
+
+
+### Bug Fixes
+
+* **husky:** wrong script for husky caused problems when installing ([bc2bec4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/bc2bec4b839d691e20beb090327a359c9e93f1cc))
+
+
+### Features
+
+* **dropdown:** add dropdown ([a99fb4a](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/a99fb4a22dcea3b6cd2a52f0dbd274d9a10f2e35))
+* **sidebar-navigation:** add sidebar navigation component ([d8794ef](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/d8794ef4d36b25e600123d41696b0d5cc10dc2af))
+
+## [0.5.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.5.0...v0.5.1) (2022-06-06)
+
+
+### Bug Fixes
+
+* **classes:** switch static-classes to findModule ([244ae12](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/244ae128da03e0687f1ba0b0e5b5b548b581277a))
+
+# [0.5.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.4.2...v0.5.0) (2022-06-06)
+
+
+### Features
+
+* **utils:** add joinClassNames util ([f34b9de](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/f34b9de97f61eb5b075d6adedfcacfa5e097943b))
+
+## [0.4.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.4.1...v0.4.2) (2022-06-06)
+
+
+### Bug Fixes
+
+* **classes:** add gamepadDialogClasses and quickAccessControlsClasses ([2e7b4b6](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/2e7b4b664a673b46b402b995fb58f0ce8ffbafac))
+
+## [0.4.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.4.0...v0.4.1) (2022-06-05)
+
+
+### Bug Fixes
+
+* **textfield:** correct type for onChange callback ([32c355f](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/32c355f2a7e0b6ca6592b956e8174d217766bc5c))
+
+# [0.4.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.3.0...v0.4.0) (2022-06-05)
+
+
+### Bug Fixes
+
+* **typings:** export all prop types ([7f9dfc5](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/7f9dfc5910dfc172ba161d9b63763e85eb289a43))
+
+
+### Features
+
+* **textfield:** extract TextField component ([a3c1a7c](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/a3c1a7c7b73eae475574a13b6ff9c75ff78cbcb6))
+
+# [0.3.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.2.0...v0.3.0) (2022-06-04)
+
+
+### Features
+
+* **typings:** add Navigate to router typings ([f124480](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/f124480af8082d24730ed03fdf88742f76abc026))
+
+# [0.2.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.1.0...v0.2.0) (2022-06-04)
+
+
+### Features
+
+* **router:** expose GetQuickAccessTab and rename QuickAccessTabs to QuickAccessTab ([bf0c2b1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/bf0c2b17bfc4e67a8aa90cfee6a91bd1482720d4))
+
+# [0.1.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.0.6...v0.1.0) (2022-06-04)
+
+
+### Features
+
+* **router:** types for steam router ([62bf0ea](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/62bf0eaffa83d85245a038ffe3819315bd02f045))

globals.d.ts

@@ -0,0 +1,5 @@
+declare global {
+    interface Window {
+        SP_REACT: typeof React;
+    }
+}

package.json

@@ -1,15 +1,18 @@
 {
   "name": "decky-frontend-lib",
-  "version": "0.0.2",
+  "version": "1.0.2",
   "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",
     "prepack": "npm run build",
-    "test": "jest"
+    "test": "echo 'No tests for now!'",
+    "prepare": "husky install",
+    "commit": "git-cz"
   },
   "files": [
     "/lib",
@@ -32,16 +35,38 @@
     "url": "https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues"
   },
   "homepage": "https://github.com/SteamDeckHomebrew/decky-frontend-lib#readme",
+  "config": {
+    "commitizen": {
+      "path": "@commitlint/cz-commitlint"
+    }
+  },
   "devDependencies": {
+    "@commitlint/cli": "^17.0.2",
+    "@commitlint/config-conventional": "^17.0.2",
+    "@commitlint/cz-commitlint": "^17.0.0",
+    "@semantic-release/changelog": "^6.0.1",
+    "@semantic-release/git": "^10.0.1",
     "@types/jest": "^27.4.1",
     "@types/react": "16.14.0",
+    "@types/react-router": "5.1.18",
+    "commitizen": "^4.2.4",
+    "husky": "^8.0.1",
     "import-sort-style-module": "^6.0.0",
     "jest": "^27.5.1",
     "prettier-plugin-import-sort": "^0.0.7",
+    "semantic-release": "^19.0.2",
     "shx": "^0.3.4",
     "ts-jest": "^27.1.4",
     "typescript": "^4.6.3"
   },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "react",
+        "react-dom"
+      ]
+    }
+  },
   "importSort": {
     ".js, .jsx, .ts, .tsx": {
       "style": "module",

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/Button.tsx

@@ -2,15 +2,28 @@ import { FC } from 'react';
 
 import { CommonUIModule } from '../webpack';
 
-interface ButtonProps {
+export interface ButtonProps {
-  label?: string;
+  className?: string;
-  description?: string;
+  noFocusRing?: boolean;
-  layout?: 'below';
-  onClick?(e: MouseEvent): void;
   disabled?: boolean;
-  bottomSeparator?: boolean;
+  onClick?(e: MouseEvent): void;
+  onPointerDown?(e: PointerEvent): void;
+  onPointerUp?(e: PointerEvent): void;
+  onPointerCancel?(e: PointerEvent): void;
+  onMouseDown?(e: PointerEvent): void;
+  onMouseUp?(e: MouseEvent): void;
+  onTouchStart?(e: TouchEvent): void;
+  onTouchEnd?(e: TouchEvent): void;
+  onTouchCancel?(e: TouchEvent): void;
+  onSubmit?(e: SubmitEvent): void;
 }
 
-export const Button = Object.values(CommonUIModule).find((mod: any) =>
+export const DialogButton = Object.values(CommonUIModule).find(
-  mod?.render?.toString()?.includes('childrenContainerWidth:"min"'),
+  (mod: any) =>
-) as FC<ButtonProps>;
+    mod?.render?.toString()?.includes('Object.assign({type:"button"') &&
+    mod?.render?.toString()?.includes('DialogButton'),
+) as any;
+
+// Button isn't exported, so call DialogButton to grab it
+
+export const Button = DialogButton!.render({}).type as FC<ButtonProps>; // its actually a forwarded ref but that doesn't really matter in usage

src/deck-components/ButtonItem.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+
+import { CommonUIModule } from '../webpack';
+import { ItemProps } from './Item';
+
+export interface ButtonItemProps extends ItemProps {
+  onClick?(e: MouseEvent): void;
+  disabled?: boolean;
+}
+
+export const ButtonItem = Object.values(CommonUIModule).find((mod: any) =>
+  mod?.render?.toString()?.includes('childrenContainerWidth:"min"'),
+) as FC<ButtonItemProps>;

src/deck-components/Dropdown.tsx

@@ -0,0 +1,44 @@
+import { ReactNode, VFC } from 'react';
+
+import { CommonUIModule } from '../webpack';
+import { ItemProps } from './Item';
+
+export interface SingleDropdownOption {
+  data: number;
+  label: string;
+
+  options?: never;
+}
+
+export interface MultiDropdownOption {
+  label: string;
+  options: DropdownOption[];
+
+  data?: never;
+}
+
+export type DropdownOption = SingleDropdownOption | MultiDropdownOption;
+
+export interface DropdownProps {
+  rgOptions: DropdownOption[];
+  selectedOption: number | null;
+  disabled?: boolean;
+  onMenuWillOpen?(showMenu: () => void): void;
+  onMenuOpened?(): void;
+  onChange?(data: SingleDropdownOption): void;
+  contextMenuPositionOptions?: any;
+  menuLabel?: string;
+  strDefaultLabel?: string;
+  renderButtonValue?(element: ReactNode): ReactNode;
+  focusable?: boolean;
+}
+
+export const Dropdown = Object.values(CommonUIModule).find(
+  (mod: any) => mod?.prototype?.SetSelectedOption && mod?.prototype?.BuildMenu,
+) as VFC<DropdownProps>;
+
+export interface DropdownItemProps extends DropdownProps, ItemProps {}
+
+export const DropdownItem = Object.values(CommonUIModule).find((mod: any) =>
+  mod?.toString()?.includes('"dropDownControlRef","description"'),
+) as VFC<DropdownItemProps>;

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

@@ -0,0 +1,19 @@
+import { HTMLAttributes, ReactNode, RefAttributes, VFC } from "react";
+import { findModuleChild } from "../webpack";
+
+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 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/Item.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+export interface ItemProps {
+  label?: string;
+  description?: string;
+  layout?: 'below' | 'inline';
+  icon?: ReactNode;
+  bottomSeparator?: boolean;
+  indentLevel?: number;
+  tooltip?: string;
+}

src/deck-components/Menu.tsx

@@ -1,8 +1,17 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 
 import { findModuleChild } from '../webpack';
 
-interface MenuProps {
+export const showContextMenu: (children: ReactNode, parent?: EventTarget) => void = findModuleChild((m) => {
+  if (typeof m !== 'object') return undefined;
+  for (let prop in m) {
+    if (typeof m[prop] === 'function' && m[prop].toString().includes('stopPropagation))')) {
+      return m[prop];
+    }
+  }
+});
+
+export interface MenuProps {
   label: string;
   onCancel?(): void;
   cancelText?: string;
@@ -18,7 +27,7 @@ export const Menu: FC<MenuProps> = findModuleChild((m) => {
   }
 });
 
-interface MenuItemProps {
+export interface MenuItemProps {
   onSelected?(): void;
 }
 

src/deck-components/Modal.tsx

@@ -1,12 +1,29 @@
-import { ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 
 import { findModuleChild } from '../webpack';
 
-export const showModal: (children: ReactNode, parent: EventTarget) => void = findModuleChild((m) => {
+// TODO: there is another argument, figure out what it does
+export const showModal: (children: ReactNode, parent?: EventTarget) => void = findModuleChild((m) => {
   if (typeof m !== 'object') return undefined;
   for (let prop in m) {
-    if (typeof m[prop] === 'function' && m[prop].toString().includes('stopPropagation))')) {
+    if (typeof m[prop] === 'function' && m[prop].toString().includes('bHideMainWindowForPopouts:!0')) {
       return m[prop];
     }
   }
 });
+
+export interface ModalRootProps {
+  onMiddleButton?(): void;
+  onCancel?(): void;
+  onOK?(): void;
+  bAllowFullSize?: boolean;
+}
+
+export const ModalRoot = findModuleChild((m) => {
+  if (typeof m !== 'object') return undefined;
+  for (let prop in m) {
+    if (!m[prop]?.prototype?.OK && m[prop]?.prototype?.Cancel && m[prop]?.prototype?.render) {
+      return m[prop];
+    }
+  }
+}) as FC<ModalRootProps>;

src/deck-components/Panel.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+
+import { findModuleChild } from '../webpack';
+
+export interface PanelSectionProps {
+  title?: string;
+  spinner?: boolean;
+}
+
+const [panelSection, mod] = findModuleChild((mod: any) => {
+  for (let prop in mod) {
+    if (mod[prop]?.toString()?.includes('.PanelSection')) {
+      return [mod[prop], mod];
+    }
+  }
+  return null;
+});
+
+export const PanelSection = panelSection as FC<PanelSectionProps>;
+
+export const PanelSectionRow = Object.values(mod).filter(
+  (exp: any) => !exp?.toString()?.includes('.PanelSection'),
+)[0] as FC;

src/deck-components/ProgressBar.tsx

@@ -0,0 +1,18 @@
+import { VFC } from 'react';
+
+import { findModuleChild } from '../webpack';
+import { ItemProps } from './Item';
+
+export interface ProgressBarItem extends ItemProps {
+  indeterminate?: boolean;
+  nTransitionSec?: number;
+  nProgress?: number;
+  focusable?: boolean;
+}
+
+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>;

src/deck-components/Router.tsx

@@ -0,0 +1,40 @@
+import { Module, findModuleChild } from '../webpack';
+
+export enum SideMenu {
+  None,
+  Main,
+  QuickAccess,
+}
+
+export enum QuickAccessTab {
+  Notifications,
+  RemotePlayTogetherControls,
+  VoiceChat,
+  Friends,
+  Settings,
+  Perf,
+  Help,
+  Decky,
+}
+
+export interface Router {
+  CloseSideMenus(): void;
+  OpenQuickAccessMenu(quickAccessTab?: QuickAccessTab): void;
+  GetQuickAccessTab(): QuickAccessTab;
+  Navigate(path: string): void;
+  NavigateBackOrOpenMenu(): void;
+  NavigateToExternalWeb(url: string): void;
+  NavigateToStore(): void;
+  ToggleSideMenu(sideMenu: SideMenu): void;
+  CloseSideMenus(): void;
+  OpenSideMenu(sideMenu: SideMenu): void;
+  OpenPowerMenu(unknown?: any): void;
+  get RunningApps(): any;
+}
+
+export const Router = findModuleChild((m: Module) => {
+  if (typeof m !== 'object') return undefined;
+  for (let prop in m) {
+    if (m[prop]?.Navigate && m[prop]?.NavigationManager) return m[prop];
+  }
+}) as Router;

src/deck-components/SidebarNavigation.tsx

@@ -0,0 +1,25 @@
+import { ReactNode, VFC } from 'react';
+
+import { Module, findModuleChild } from '../webpack';
+
+export interface SidebarNavigationPages {
+  title: string;
+  route: string;
+  content: ReactNode;
+}
+
+export interface SidebarNavigationProps {
+  title?: string;
+  pages: SidebarNavigationPages[];
+  showTitle?: boolean;
+  disableRouteReporting?: boolean;
+}
+
+export const SidebarNavigation = findModuleChild((mod: Module) => {
+  for (let prop in mod) {
+    if (mod[prop]?.toString()?.includes('"disableRouteReporting"')) {
+      return mod[prop];
+    }
+  }
+  return null;
+}) as VFC<SidebarNavigationProps>;

src/deck-components/Slider.tsx

@@ -1,26 +0,0 @@
-import { FC } from 'react';
-
-import { CommonUIModule } from '../webpack';
-
-interface NotchLabel {
-  notchIndex: number;
-  label: string;
-  value: number;
-}
-
-interface SliderProps {
-  label?: string;
-  value: number;
-  layout?: 'below';
-  icon?: JSX.Element;
-  min?: number;
-  max?: number;
-  step?: number;
-  notchCount?: number;
-  notchLabels?: NotchLabel[];
-  onChange?(value: number): void;
-}
-
-export const Slider = Object.values(CommonUIModule).find((mod: any) =>
-  mod?.render?.toString()?.includes('SliderField,fallback'),
-) as FC<SliderProps>;

src/deck-components/SliderField.tsx

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+
+import { CommonUIModule } from '../webpack';
+import { ItemProps } from './Item';
+
+export interface NotchLabel {
+  notchIndex: number;
+  label: string;
+  value?: number;
+}
+
+export interface SliderFieldProps extends ItemProps {
+  value: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  notchCount?: number;
+  notchLabels?: NotchLabel[];
+  notchTicksVisible?: boolean;
+  showValue?: boolean;
+  resetValue?: number;
+  disabled?: boolean;
+  editableValue?: boolean;
+  validValues?: 'steps' | 'range' | ((value: number) => boolean);
+  valueSuffix?: string;
+  minimumDpadGranularity?: number;
+  onChange?(value: number): void;
+}
+
+export const SliderField = Object.values(CommonUIModule).find((mod: any) =>
+  mod?.toString()?.includes('SliderField,fallback'),
+) as FC<SliderFieldProps>;

src/deck-components/Spinner.tsx

@@ -0,0 +1,8 @@
+import { FC, SVGAttributes } from 'react';
+
+import { IconsModule } from '../webpack';
+
+// TODO type this and other icons?
+export const Spinner = Object.values(IconsModule).find((mod: any) =>
+    mod?.toString && /Spinner\)}\),.\.createElement\(\"path\",{d:\"M18 /.test(mod.toString())
+) as FC<SVGAttributes<SVGElement>>;

src/deck-components/SteamSpinner.tsx

@@ -0,0 +1,9 @@
+import { FC, SVGAttributes } from 'react';
+import { findModuleChild } from '../webpack';
+
+export const SteamSpinner = findModuleChild((m) => {
+    if (typeof m !== "object") return undefined;
+    for (let prop in m) {
+      if (m[prop]?.toString()?.includes("Steam Spinner") && m[prop].toString().includes("PreloadThrobber")) return m[prop]
+    }
+}) as FC<SVGAttributes<SVGElement>>;

src/deck-components/TextField.tsx

@@ -0,0 +1,27 @@
+import { ChangeEventHandler, ReactNode, VFC } from 'react';
+
+import { CommonUIModule, Module } from '../webpack';
+
+export interface TextFieldProps {
+  label?: ReactNode;
+  requiredLabel?: ReactNode;
+  description?: ReactNode;
+  bShowCopyAction?: boolean;
+  bShowClearAction?: boolean;
+  bAlwaysShowClearAction?: boolean;
+  bIsPassword?: boolean;
+  rangeMin?: number;
+  rangeMax?: number;
+  mustBeNumeric?: boolean;
+  mustBeURL?: boolean;
+  mustBeEmail?: boolean;
+  focusOnMount?: boolean;
+  tooltip?: string;
+  inlineControls?: ReactNode;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  value?: string;
+}
+
+export const TextField = Object.values(CommonUIModule).find(
+  (mod: Module) => mod?.validateUrl && mod?.validateEmail,
+) as VFC<TextFieldProps>;

src/deck-components/Toggle.tsx

@@ -2,15 +2,13 @@ import { FC } from 'react';
 
 import { CommonUIModule } from '../webpack';
 
-interface ToggleProps {
+export interface ToggleProps {
-  label?: string;
+  value: boolean;
-  description?: string;
-  checked: boolean;
-  icon?: JSX.Element;
   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,18 @@
 export * from './Button';
+export * from './ButtonItem';
+export * from './Dropdown';
+export * from './Field';
+export * from './Focusable';
 export * from './Menu';
 export * from './Modal';
-export * from './Slider';
+export * from './Panel';
+export * from './ProgressBar';
+export * from './Router';
+export * from './SidebarNavigation';
+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

@@ -1,4 +1,4 @@
-import { findModuleChild } from '../webpack';
+import { findModule } from '../webpack';
 
 type StaticClasses = Record<
   | 'ActiveTab'
@@ -63,10 +63,126 @@ type StaticClasses = Record<
   string
 >;
 
-export const staticClasses: StaticClasses = findModuleChild((mod) => {
+type GamepadDialogClasses = Record<
+  | 'duration-app-launch'
+  | 'GamepadDialogContent'
+  | 'GamepadDialogContent_InnerWidth'
+  | 'Field'
+  | 'Button'
+  | 'NoMinWidth'
+  | 'ActiveAndUnfocused'
+  | 'StandaloneFieldSeparator'
+  | 'StandardPadding'
+  | 'CompactPadding'
+  | 'WithDescription'
+  | 'WithBottomSeparatorStandard'
+  | 'WithBottomSeparatorThick'
+  | 'HighlightOnFocus'
+  | 'ItemFocusAnim-darkerGrey'
+  | 'ItemFocusAnim-darkGrey'
+  | 'WithBottomSeparator'
+  | 'Disabled'
+  | 'Clickable'
+  | 'FieldClickTarget'
+  | 'FieldChildren'
+  | 'FieldLeadIcon'
+  | 'FieldLabelRow'
+  | 'VerticalAlignCenter'
+  | 'InlineWrapShiftsChildrenBelow'
+  | 'ExtraPaddingOnChildrenBelow'
+  | 'ChildrenWidthFixed'
+  | 'ChildrenWidthGrow'
+  | 'WithFirstRow'
+  | 'WithChildrenBelow'
+  | 'FieldLabel'
+  | 'FieldLabelValue'
+  | 'FieldDescription'
+  | 'ModalPosition'
+  | 'WithStandardPadding'
+  | 'slideInAnimation'
+  | 'BasicTextInput'
+  | 'Toggle'
+  | 'ToggleRail'
+  | 'On'
+  | 'ToggleSwitch'
+  | 'LabelFieldValue'
+  | 'DropDownControlButtonContents'
+  | 'Spacer'
+  | 'ControlsListOuterPanel'
+  | 'StandardSpacing'
+  | 'ExtraSpacing'
+  | 'AlignRight'
+  | 'AlignLeft'
+  | 'AlignCenter'
+  | 'ControlsListChild'
+  | 'QuickAccess-Menu'
+  | 'BigButtons'
+  | 'BottomButtons'
+  | 'ItemFocusAnim-darkerGrey-nocolor'
+  | 'ItemFocusAnim-grey'
+  | 'ItemFocusAnimBorder-darkGrey'
+  | 'ItemFocusAnim-green'
+  | 'focusAnimation'
+  | 'hoverAnimation',
+  string
+>;
+
+type QuickAccessControlsClasses = Record<
+  | 'duration-app-launch'
+  | 'PanelSection'
+  | 'PanelSectionTitle'
+  | 'Text'
+  | 'PanelSectionRow'
+  | 'Label'
+  | 'ComingSoon'
+  | 'LowBattery'
+  | 'ReallyLow'
+  | 'LowBatteryGauge'
+  | 'Remaining'
+  | 'EmptyNotifications'
+  | 'BatterySectionContainer'
+  | 'BatteryIcon'
+  | 'BatteryPercentageLabel'
+  | 'BatteryDetailsLabels'
+  | 'BatteryProjectedValue'
+  | 'BatteryProjectedLabel'
+  | 'ItemFocusAnim-darkerGrey-nocolor'
+  | 'ItemFocusAnim-darkerGrey'
+  | 'ItemFocusAnim-darkGrey'
+  | 'ItemFocusAnim-grey'
+  | 'ItemFocusAnimBorder-darkGrey'
+  | 'ItemFocusAnim-green'
+  | 'focusAnimation'
+  | 'hoverAnimation',
+  string
+>;
+
+export const staticClasses: StaticClasses = findModule((mod) => {
   if (typeof mod !== 'object') return false;
 
   if (mod.TransitionMenuDelay) {
-    return mod;
+    return true;
   }
+
+  return false;
+});
+
+export const gamepadDialogClasses: GamepadDialogClasses = findModule((mod) => {
+  if (typeof mod !== 'object') return false;
+
+  if (mod.WithFirstRow) {
+    return true;
+  }
+
+  return false;
+});
+
+export const quickAccessControlsClasses: QuickAccessControlsClasses = findModule((mod) => {
+  if (typeof mod !== 'object') return false;
+
+  if (mod.PanelSectionRow) {
+    return true;
+  }
+
+  return false;
 });

src/index.ts

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

src/plugin.tsx

@@ -1,7 +1,10 @@
+import type { ComponentType } from 'react';
+import { RouteProps } from 'react-router';
+
 export interface Plugin {
   title: JSX.Element;
   icon: JSX.Element;
-  content: JSX.Element;
+  content?: JSX.Element;
   onDismount?(): void;
 }
 
@@ -17,11 +20,18 @@ interface ServerResponseError {
 
 type ServerResponse<TRes> = ServerResponseSuccess<TRes> | ServerResponseError;
 
+interface RouterHook {
+  addRoute(path: string, component: ComponentType, props?: Omit<RouteProps, 'path' | 'children'>): void;
+  removeRoute(path: string): void;
+}
+
 export interface ServerAPI {
+  routerHook: RouterHook;
   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

@@ -0,0 +1,95 @@
+import * as React from "react";
+
+// this shouldn't need to be redeclared but it does for some reason
+
+declare global {
+    interface Window {
+      SP_REACT: typeof React;
+    }
+}
+
+export function fakeRenderComponent(fun: Function): any {
+    const hooks = (window.SP_REACT as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current;
+
+    // TODO: add more hooks
+
+    let oldHooks = {
+        useContext: hooks.useContext,
+        useCallback: hooks.useCallback,
+        useLayoutEffect: hooks.useLayoutEffect,
+        useEffect: hooks.useEffect,
+        useMemo: hooks.useMemo,
+        useRef: hooks.useRef,
+        useState: hooks.useState,
+    }
+
+    hooks.useCallback = (cb: Function) => cb;
+    hooks.useContext = (cb: any) => cb._currentValue;
+    hooks.useLayoutEffect = (_: Function) => {}//cb();
+    hooks.useMemo = (cb: Function, _: any[]) => cb;
+    hooks.useEffect = (_: Function) => {}//cb();
+    hooks.useRef = (val: any) => ({current: val || {}});
+    hooks.useState = (v: any) => {
+        let val = v;
+
+        return [val, (n: any) => val = n];
+    };
+
+    const res = fun(hooks);
+
+    Object.assign(hooks, oldHooks);
+
+    return res;
+}
+
+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);
+        return orig.call(this, ...args);
+    }
+    Object.assign(obj[name], orig);
+    obj[name].toString = () => orig.toString();
+    obj[name].__deckyOrig = orig;
+}
+
+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);
+        ret = fnc.call(this, args, ret);
+        return ret;
+    }
+    Object.assign(obj[name], orig);
+    obj[name].toString = () => orig.toString();
+    obj[name].__deckyOrig = orig;
+}
+
+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);
+      if (ret == 'CALL_ORIGINAL') return orig.call(this, ...args);
+      return ret;
+    };
+    Object.assign(obj[name], orig);
+    obj[name].toString = () => orig.toString();
+    obj[name].__deckyOrig = orig;
+}
+
+// TODO allow one method to be patched and unpatched multiple times independently using IDs in a Map or something
+export function unpatch(obj: any, name: any): void {
+    obj[name] = obj[name].__deckyOrig;
+}
+
+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));
+}

src/webpack.ts

@@ -5,7 +5,7 @@ declare global {
 }
 
 // TODO
-type Module = any;
+export type Module = any;
 type FilterFn = (module: any) => boolean;
 type FindFn = (module: any) => any;
 
@@ -58,7 +58,18 @@ export const CommonUIModule = allModules.find((m: Module) => {
   return false;
 });
 
-export const Router = findModuleChild((m: Module) => {
+export const IconsModule = findModule((m: Module) => {
-  if (typeof m !== "object") return undefined;
+  if (typeof m !== 'object') return false;
-  for (let prop in m) { if (m[prop]?.Navigate && m[prop]?.NavigationManager) return m[prop]}
+  for (let prop in m) {
-})
+    if (m[prop]?.toString && /Spinner\)}\),.\.createElement\(\"path\",{d:\"M18 /.test(m[prop].toString())) return true;
+  }
+  return false;
+});
+
+export const ReactRouter = allModules.find((m: Module) => {
+  if (typeof m !== 'object') return undefined;
+  for (let prop in m) {
+    if (m[prop]?.computeRootMatch) return true;
+  }
+  return false;
+});

tsconfig.json

@@ -3,7 +3,8 @@
     "outDir": "dist",
     "module": "ESNext",
     "target": "ES2020",
-    "jsx": "react-jsx",
+    "jsx": "react",
+    "jsxFactory": "window.SP_REACT.createElement",
     "declaration": true,
     "moduleResolution": "node",
     "noUnusedLocals": true,
@@ -17,6 +18,6 @@
     "allowSyntheticDefaultImports": true,
     "skipLibCheck": true
   },
-  "include": ["src"],
+  "include": ["src", "globals.d.ts"],
   "exclude": ["node_modules"]
 }