@decky/ui 4.0.0

package/src/logger.ts

@@ -0,0 +1,77 @@
+const bgStyle1 = 'background: #16a085; color: black;';
+
+export const log = (name: string, ...args: any[]) => {
+  console.log(
+    `%c @decky/ui %c ${name} %c`,
+    bgStyle1,
+    'background: #1abc9c; color: black;',
+    'background: transparent;',
+    ...args,
+  );
+};
+
+export const group = (name: string, ...args: any[]) => {
+  console.group(
+    `%c @decky/ui %c ${name} %c`,
+    bgStyle1,
+    'background: #1abc9c; color: black;',
+    'background: transparent;',
+    ...args,
+  );
+};
+
+export const groupEnd = (name: string, ...args: any[]) => {
+  console.groupEnd();
+  if (args?.length > 0)
+    console.log(
+      `^ %c @decky/ui %c ${name} %c`,
+      bgStyle1,
+      'background: #1abc9c; color: black;',
+      'background: transparent;',
+      ...args,
+    );
+};
+
+export const debug = (name: string, ...args: any[]) => {
+  console.debug(`%c @decky/ui %c ${name} %c`, bgStyle1, 'background: #1abc9c; color: black;', 'color: blue;', ...args);
+};
+
+export const warn = (name: string, ...args: any[]) => {
+  console.warn(`%c @decky/ui %c ${name} %c`, bgStyle1, 'background: #ffbb00; color: black;', 'color: blue;', ...args);
+};
+
+export const error = (name: string, ...args: any[]) => {
+  console.error(`%c @decky/ui %c ${name} %c`, bgStyle1, 'background: #FF0000;', 'background: transparent;', ...args);
+};
+
+class Logger {
+  constructor(private name: string) {
+    this.name = name;
+  }
+
+  log(...args: any[]) {
+    log(this.name, ...args);
+  }
+
+  debug(...args: any[]) {
+    debug(this.name, ...args);
+  }
+
+  warn(...args: any[]) {
+    warn(this.name, ...args);
+  }
+
+  error(...args: any[]) {
+    error(this.name, ...args);
+  }
+
+  group(...args: any[]) {
+    group(this.name, ...args);
+  }
+
+  groupEnd(...args: any[]) {
+    groupEnd(this.name, ...args);
+  }
+}
+
+export default Logger;

package/src/modules/Router.tsx

@@ -0,0 +1,174 @@
+import { sleep } from '../utils';
+import { Export, findModuleExport } from '../webpack';
+
+export enum SideMenu {
+  None,
+  Main,
+  QuickAccess,
+}
+
+export enum QuickAccessTab {
+  Notifications,
+  RemotePlayTogetherControls,
+  VoiceChat,
+  Friends,
+  Settings,
+  Perf,
+  Help,
+  Music,
+  Decky = 999,
+}
+
+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 MenuStore {
+  OpenSideMenu(sideMenu: SideMenu): void;
+  OpenQuickAccessMenu(quickAccessTab?: QuickAccessTab): void;
+  OpenMainMenu(): void;
+}
+
+export interface WindowRouter {
+  BrowserWindow: Window;
+  MenuStore: MenuStore;
+  Navigate(path: string): void;
+  NavigateToChat(): void;
+  NavigateToSteamWeb(url: string): void;
+  NavigateBack(): void;
+}
+
+export interface WindowStore {
+  GamepadUIMainWindowInstance?: WindowRouter; // Current
+  SteamUIWindows: WindowRouter[];
+  OverlayWindows: WindowRouter[]; // Used by desktop GamepadUI
+}
+
+export interface Router {
+  WindowStore?: WindowStore;
+  CloseSideMenus(): void;
+  Navigate(path: string): void;
+  NavigateToAppProperties(): void;
+  NavigateToExternalWeb(url: string): void;
+  NavigateToInvites(): void;
+  NavigateToChat(): void;
+  NavigateToLibraryTab(): void;
+  NavigateToLayoutPreview(e: unknown): void;
+  OpenPowerMenu(unknown?: any): void;
+  get RunningApps(): AppOverview[];
+  get MainRunningApp(): AppOverview | undefined;
+}
+
+export const Router = findModuleExport((e: Export) => e.Navigate && e.NavigationManager) as Router;
+
+export interface Navigation {
+  Navigate(path: string): void;
+  NavigateBack(): void;
+  NavigateToAppProperties(): void;
+  NavigateToExternalWeb(url: string): void;
+  NavigateToInvites(): void;
+  NavigateToChat(): void;
+  NavigateToLibraryTab(): void;
+  NavigateToLayoutPreview(e: unknown): void;
+  NavigateToSteamWeb(url: string): void;
+  OpenSideMenu(sideMenu: SideMenu): void;
+  OpenQuickAccessMenu(quickAccessTab?: QuickAccessTab): void;
+  OpenMainMenu(): void;
+  OpenPowerMenu(unknown?: any): void;
+  CloseSideMenus(): void;
+}
+
+export let Navigation = {} as Navigation;
+
+try {
+  (async () => {
+    let InternalNavigators: any = {};
+    if (!Router.NavigateToAppProperties || (Router as unknown as any).deckyShim) {
+      function initInternalNavigators() {
+        try {
+          InternalNavigators = findModuleExport((e: Export) => e.GetNavigator && e.SetNavigator)?.GetNavigator();
+        } catch (e) {
+          console.error('[DFL:Router]: Failed to init internal navigators, trying again');
+        }
+      }
+      initInternalNavigators();
+      while (!InternalNavigators?.AppProperties) {
+        console.log('[DFL:Router]: Trying to init internal navigators again');
+        await sleep(2000);
+        initInternalNavigators();
+      }
+    }
+    const newNavigation = {
+      Navigate: Router.Navigate?.bind(Router),
+      NavigateBack: Router.WindowStore?.GamepadUIMainWindowInstance?.NavigateBack?.bind(
+        Router.WindowStore.GamepadUIMainWindowInstance,
+      ),
+      NavigateToAppProperties: InternalNavigators?.AppProperties || Router.NavigateToAppProperties?.bind(Router),
+      NavigateToExternalWeb: InternalNavigators?.ExternalWeb || Router.NavigateToExternalWeb?.bind(Router),
+      NavigateToInvites: InternalNavigators?.Invites || Router.NavigateToInvites?.bind(Router),
+      NavigateToChat: InternalNavigators?.Chat || Router.NavigateToChat?.bind(Router),
+      NavigateToLibraryTab: InternalNavigators?.LibraryTab || Router.NavigateToLibraryTab?.bind(Router),
+      NavigateToLayoutPreview: Router.NavigateToLayoutPreview?.bind(Router),
+      NavigateToSteamWeb: Router.WindowStore?.GamepadUIMainWindowInstance?.NavigateToSteamWeb?.bind(
+        Router.WindowStore.GamepadUIMainWindowInstance,
+      ),
+      OpenSideMenu: Router.WindowStore?.GamepadUIMainWindowInstance?.MenuStore.OpenSideMenu?.bind(
+        Router.WindowStore.GamepadUIMainWindowInstance.MenuStore,
+      ),
+      OpenQuickAccessMenu: Router.WindowStore?.GamepadUIMainWindowInstance?.MenuStore.OpenQuickAccessMenu?.bind(
+        Router.WindowStore.GamepadUIMainWindowInstance.MenuStore,
+      ),
+      OpenMainMenu: Router.WindowStore?.GamepadUIMainWindowInstance?.MenuStore.OpenMainMenu?.bind(
+        Router.WindowStore.GamepadUIMainWindowInstance.MenuStore,
+      ),
+      CloseSideMenus: Router.CloseSideMenus?.bind(Router),
+      OpenPowerMenu: Router.OpenPowerMenu?.bind(Router),
+    } as Navigation;
+
+    Object.assign(Navigation, newNavigation);
+  })();
+} catch (e) {
+  console.error('[DFL:Router]: Error initializing Navigation interface', e);
+}

package/src/modules/index.ts

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

package/src/plugin.tsx

@@ -0,0 +1,96 @@
+import type { ComponentType, ReactNode } from 'react';
+import { RouteProps } from 'react-router';
+
+export interface Plugin {
+  title: JSX.Element;
+  icon: JSX.Element;
+  content?: JSX.Element;
+  onDismount?(): void;
+  alwaysRender?: boolean;
+}
+
+interface ServerResponseSuccess<TRes> {
+  success: true;
+  result: TRes;
+}
+
+interface ServerResponseError {
+  success: false;
+  result: string;
+}
+
+export type ServerResponse<TRes> = ServerResponseSuccess<TRes> | ServerResponseError;
+
+export 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;
+  addGlobalComponent(name: string, component: ComponentType): void;
+  removeRoute(path: string): void;
+  removePatch(path: string, patch: RoutePatch): void;
+  removeGlobalComponent(name: string): void;
+}
+
+export interface ToastData {
+  title: ReactNode;
+  body: ReactNode;
+  onClick?: () => void;
+  logo?: ReactNode;
+  icon?: ReactNode;
+  className?: string;
+  contentClassName?: string;
+  duration?: number;
+  critical?: boolean;
+  eType?: number;
+  sound?: number;
+  playSound?: boolean;
+  showToast?: boolean;
+}
+
+export interface Toaster {
+  toast(toast: ToastData): void;
+}
+
+export interface FilePickerRes {
+  path: string;
+  realpath: string;
+}
+
+export const enum FileSelectionType {
+  FILE,
+  FOLDER,
+}
+
+export interface ServerAPI {
+  routerHook: RouterHook;
+  toaster: Toaster;
+  openFilePicker(startPath: string, includeFiles?: boolean, regex?: RegExp): Promise<FilePickerRes>;
+  openFilePickerV2(
+    select: FileSelectionType,
+    startPath: string,
+    includeFiles?: boolean,
+    includeFolders?: boolean,
+    filter?: RegExp | ((file: File) => boolean),
+    extensions?: string[],
+    showHiddenFiles?: boolean,
+    allowAllFiles?: boolean,
+    max?: number,
+  ): Promise<FilePickerRes>;
+  callPluginMethod<TArgs = {}, TRes = {}>(methodName: string, args: TArgs): Promise<ServerResponse<TRes>>;
+  callServerMethod<TArgs = {}, TRes = {}>(methodName: string, args: TArgs): 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>;
+}
+
+type DefinePluginFn = (serverAPI: ServerAPI) => Plugin;
+
+// TypeScript helper function
+export const definePlugin = (fn: DefinePluginFn): DefinePluginFn => {
+  return (...args) => {
+    // TODO: Maybe wrap this
+    return fn(...args);
+  };
+};

package/src/utils/index.ts

@@ -0,0 +1,43 @@
+export * from './patcher';
+export * from './react';
+export * from './static-classes';
+
+declare global {
+  var FocusNavController: any;
+  var GamepadNavTree: any;
+}
+
+export function joinClassNames(...classes: string[]): string {
+  return classes.join(' ');
+}
+
+export function sleep(ms: number) {
+  return new Promise((res) => setTimeout(res, ms));
+}
+
+/**
+ * Finds the SP window, since it is a render target as of 10-19-2022's beta
+ */
+export function findSP(): Window {
+  // old (SP as host)
+  if (document.title == 'SP') return window;
+  // new (SP as popup)
+  const navTrees = getGamepadNavigationTrees();
+  return navTrees?.find((x: any) => x.m_ID == 'root_1_').Root.Element.ownerDocument.defaultView;
+}
+
+/**
+ * Gets the correct FocusNavController, as the Feb 22 2023 beta has two for some reason.
+ */
+export function getFocusNavController(): any {
+  return window.GamepadNavTree?.m_context?.m_controller || window.FocusNavController;
+}
+
+/**
+ * Gets the gamepad navigation trees as Valve seems to be moving them.
+ */
+export function getGamepadNavigationTrees(): any {
+  const focusNav = getFocusNavController();
+  const context = focusNav.m_ActiveContext || focusNav.m_LastActiveContext;
+  return context?.m_rgGamepadNavigationTrees;
+}

package/src/utils/patcher.ts

@@ -0,0 +1,160 @@
+// TODO: implement storing patches as an option so we can offer unpatchAll selectively
+// Return this in a replacePatch to call the original method (can still modify args).
+export let callOriginal = Symbol('DECKY_CALL_ORIGINAL');
+
+export interface PatchOptions {
+  singleShot?: boolean;
+}
+
+type GenericPatchHandler = (args: any[], ret?: any) => any;
+
+export interface Patch {
+  original: Function;
+  property: string;
+  object: any;
+  patchedFunction: any;
+  hasUnpatched: boolean;
+  handler: GenericPatchHandler;
+
+  unpatch: () => void;
+}
+
+// let patches = new Set<Patch>();
+
+export function beforePatch(
+  object: any,
+  property: string,
+  handler: (args: any[]) => any,
+  options: PatchOptions = {},
+): Patch {
+  const orig = object[property];
+  object[property] = function (...args: any[]) {
+    handler.call(this, args);
+    const ret = patch.original.call(this, ...args);
+    if (options.singleShot) {
+      patch.unpatch();
+    }
+    return ret;
+  };
+  const patch = processPatch(object, property, handler, object[property], orig);
+  return patch;
+}
+
+export function afterPatch(
+  object: any,
+  property: string,
+  handler: (args: any[], ret: any) => any,
+  options: PatchOptions = {},
+): Patch {
+  const orig = object[property];
+  object[property] = function (...args: any[]) {
+    let ret = patch.original.call(this, ...args);
+    ret = handler.call(this, args, ret);
+    if (options.singleShot) {
+      patch.unpatch();
+    }
+    return ret;
+  };
+  const patch = processPatch(object, property, handler, object[property], orig);
+  return patch;
+}
+
+export function replacePatch(
+  object: any,
+  property: string,
+  handler: (args: any[]) => any,
+  options: PatchOptions = {},
+): Patch {
+  const orig = object[property];
+  object[property] = function (...args: any[]) {
+    const ret = handler.call(this, args);
+    if (ret == callOriginal) return patch.original.call(this, ...args);
+    if (options.singleShot) {
+      patch.unpatch();
+    }
+    return ret;
+  };
+  const patch = processPatch(object, property, handler, object[property], orig);
+  return patch;
+}
+
+function processPatch(
+  object: any,
+  property: any,
+  handler: GenericPatchHandler,
+  patchedFunction: any,
+  original: any,
+): Patch {
+  // Assign all props of original function to new one
+  Object.assign(object[property], original);
+  // Allow toString webpack filters to continue to work
+  object[property].toString = () => original.toString();
+
+  // HACK: for compatibility, remove when all plugins are using new patcher
+  Object.defineProperty(object[property], '__deckyOrig', {
+    get: () => patch.original,
+    set: (val: any) => (patch.original = val),
+  });
+
+  // Build a Patch object of this patch
+  const patch: Patch = {
+    object,
+    property,
+    handler,
+    patchedFunction,
+    original,
+    hasUnpatched: false,
+    unpatch: () => unpatch(patch),
+  };
+
+  object[property].__deckyPatch = patch;
+
+  return patch;
+}
+
+function unpatch(patch: Patch): void {
+  const { object, property, handler, patchedFunction, original } = patch;
+  if (patch.hasUnpatched) throw new Error('Function is already unpatched.');
+  let realProp = property;
+  let realObject = object;
+  console.debug('[Patcher] unpatching', {
+    realObject,
+    realProp,
+    object,
+    property,
+    handler,
+    patchedFunction,
+    original,
+    isEqual: realObject[realProp] === patchedFunction,
+  });
+
+  // If another patch has been applied to this function after this one, move down until we find the correct patch
+  while (realObject[realProp] && realObject[realProp] !== patchedFunction) {
+    realObject = realObject[realProp].__deckyPatch;
+    realProp = 'original';
+    console.debug('[Patcher] moved to next', {
+      realObject,
+      realProp,
+      object,
+      property,
+      handler,
+      patchedFunction,
+      original,
+      isEqual: realObject[realProp] === patchedFunction,
+    });
+  }
+
+  realObject[realProp] = realObject[realProp].__deckyPatch.original;
+
+  patch.hasUnpatched = true;
+  console.debug('[Patcher] unpatched', {
+    realObject,
+    realProp,
+    object,
+    property,
+    handler,
+    patchedFunction,
+    original,
+    isEqual: realObject[realProp] === patchedFunction,
+  });
+}

package/src/utils/react.ts

@@ -0,0 +1,119 @@
+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, customHooks: any = {}): 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)];
+  };
+
+  Object.assign(hooks, customHooks);
+
+  const res = fun(hooks);
+
+  Object.assign(hooks, oldHooks);
+
+  return res;
+}
+
+export function wrapReactType(node: any, prop: any = 'type') {
+  if (node[prop]?.__DECKY_WRAPPED) {
+    return node[prop];
+  } else {
+    return (node[prop] = { ...node[prop], __DECKY_WRAPPED: true });
+  }
+}
+
+export function wrapReactClass(node: any, prop: any = 'type') {
+  if (node[prop]?.__DECKY_WRAPPED) {
+    return node[prop];
+  } else {
+    const cls = node[prop];
+    const wrappedCls = class extends cls {
+      static __DECKY_WRAPPED = true;
+    };
+    return (node[prop] = wrappedCls);
+  }
+}
+
+export function getReactRoot(o: HTMLElement | Element | Node) {
+  return (
+    // @ts-expect-error 7053
+    o[Object.keys(o).find((k) => k.startsWith('__reactContainer$')) as string] ||
+    // @ts-expect-error 7053
+    o['_reactRootContainer']?._internalRoot?.current
+  );
+}
+
+export function getReactInstance(o: HTMLElement | Element | Node) {
+  return (
+    // @ts-expect-error 7053
+    o[Object.keys(o).find((k) => k.startsWith('__reactFiber')) as string] ||
+    // @ts-expect-error 7053
+    o[Object.keys(o).find((k) => k.startsWith('__reactInternalInstance')) as string]
+  );
+}
+
+// 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'],
+  });