port to @decky/ui

TODO: update package.json to match once @decky/ui is on NPM

frontend/package.json

@@ -1,6 +1,5 @@
 {
-  "name": "decky_frontend",
+  "name": "@decky/loader-frontend",
-  "version": "2.1.1",
   "private": true,
   "license": "GPLV2",
   "scripts": {

frontend/src/components/DeckyToaster.tsx

@@ -1,4 +1,4 @@
-import { ToastData, joinClassNames } from 'decky-frontend-lib';
+import { ToastData, joinClassNames } from '@decky/ui';
 import { FC, useEffect, useState } from 'react';
 import { ReactElement } from 'react-markdown/lib/react-markdown';
 

frontend/src/components/DeckyToasterState.tsx

@@ -1,4 +1,4 @@
-import { ToastData } from 'decky-frontend-lib';
+import { ToastData } from '@decky/ui';
 import { FC, createContext, useContext, useEffect, useState } from 'react';
 
 interface PublicDeckyToasterState {

frontend/src/components/Markdown.tsx

@@ -1,4 +1,4 @@
-import { Focusable, Navigation } from 'decky-frontend-lib';
+import { Focusable, Navigation } from '@decky/ui';
 import { FunctionComponent, useRef } from 'react';
 import ReactMarkdown, { Options as ReactMarkdownOptions } from 'react-markdown';
 import remarkGfm from 'remark-gfm';

frontend/src/components/PluginView.tsx

@@ -1,4 +1,4 @@
-import { ButtonItem, Focusable, PanelSection, PanelSectionRow } from 'decky-frontend-lib';
+import { ButtonItem, Focusable, PanelSection, PanelSectionRow } from '@decky/ui';
 import { VFC, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaEyeSlash } from 'react-icons/fa';

frontend/src/components/TitleView.tsx

@@ -1,4 +1,4 @@
-import { DialogButton, Focusable, Router, staticClasses } from 'decky-frontend-lib';
+import { DialogButton, Focusable, Router, staticClasses } from '@decky/ui';
 import { CSSProperties, VFC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BsGearFill } from 'react-icons/bs';

frontend/src/components/Toast.tsx

@@ -1,4 +1,4 @@
-import { ToastData, findModule, joinClassNames } from 'decky-frontend-lib';
+import { ToastData, findModule, joinClassNames } from '@decky/ui';
 import { FunctionComponent } from 'react';
 
 interface ToastProps {

frontend/src/components/WithSuspense.tsx

@@ -1,4 +1,4 @@
-import { Focusable, SteamSpinner } from 'decky-frontend-lib';
+import { Focusable, SteamSpinner } from '@decky/ui';
 import { FunctionComponent, ReactElement, ReactNode, Suspense } from 'react';
 
 interface WithSuspenseProps {

frontend/src/components/modals/DropdownMultiselect.tsx

@@ -2,24 +2,21 @@ import {
   DialogButton,
   DialogCheckbox,
   DialogCheckboxProps,
+  Export,
   Marquee,
   Menu,
   MenuItem,
-  findModuleChild,
+  findModuleExport,
   showContextMenu,
-} from 'decky-frontend-lib';
+} from '@decky/ui';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaChevronDown } from 'react-icons/fa';
 
-const dropDownControlButtonClass = findModuleChild((m) => {
+// TODO add to dfl
-  if (typeof m !== 'object') return undefined;
+const dropDownControlButtonClass = findModuleExport((e: Export) =>
-  for (const prop in m) {
+  e?.toString()?.includes('gamepaddropdown_DropDownControlButton'),
-    if (m[prop]?.toString()?.includes('gamepaddropdown_DropDownControlButton')) {
+);
-      return m[prop];
-    }
-  }
-});
 
 const DropdownMultiselectItem: FC<
   {

frontend/src/components/modals/MultiplePluginsInstallModal.tsx

@@ -1,4 +1,4 @@
-import { ConfirmModal, Navigation, QuickAccessTab } from 'decky-frontend-lib';
+import { ConfirmModal, Navigation, QuickAccessTab } from '@decky/ui';
 import { FC, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

frontend/src/components/modals/PluginInstallModal.tsx

@@ -1,4 +1,4 @@
-import { ConfirmModal, Navigation, QuickAccessTab } from 'decky-frontend-lib';
+import { ConfirmModal, Navigation, QuickAccessTab } from '@decky/ui';
 import { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

frontend/src/components/modals/PluginUninstallModal.tsx

@@ -1,4 +1,4 @@
-import { ConfirmModal } from 'decky-frontend-lib';
+import { ConfirmModal } from '@decky/ui';
 import { FC } from 'react';
 
 import { uninstallPlugin } from '../../plugin';

frontend/src/components/modals/filepicker/index.tsx

@@ -10,7 +10,7 @@ import {
   SteamSpinner,
   TextField,
   ToggleField,
-} from 'decky-frontend-lib';
+} from '@decky/ui';
 import { filesize } from 'filesize';
 import { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react';
 import { DefaultExtensionType, FileIcon, defaultStyles } from 'react-file-icon';

frontend/src/components/modals/filepicker/patches/library.ts

@@ -1,4 +1,4 @@
-import { Patch, findModuleChild, replacePatch, sleep } from 'decky-frontend-lib';
+import { Export, Patch, findModuleExport, replacePatch, sleep } from '@decky/ui';
 
 import Logger from '../../../../logger';
 import { FileSelectionType } from '..';
@@ -39,12 +39,7 @@ export default async function libraryPatch() {
     let History: any;
 
     while (!History) {
-      History = findModuleChild((m) => {
+      History = findModuleExport((e: Export) => e.m_history)?.m_history;
-        if (typeof m !== 'object') return undefined;
-        for (let prop in m) {
-          if (m[prop]?.m_history) return m[prop].m_history;
-        }
-      });
       if (!History) {
         logger.debug('Waiting 5s for history to become available.');
         await sleep(5000);

frontend/src/components/patchnotes/InlinePatchNotes.tsx

@@ -1,4 +1,4 @@
-import { Focusable, updaterFieldClasses } from 'decky-frontend-lib';
+import { Focusable, updaterFieldClasses } from '@decky/ui';
 import { FunctionComponent, ReactNode } from 'react';
 
 interface InlinePatchNotesProps {

frontend/src/components/settings/index.tsx

@@ -1,4 +1,4 @@
-import { SidebarNavigation } from 'decky-frontend-lib';
+import { SidebarNavigation } from '@decky/ui';
 import { lazy } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaCode, FaFlask, FaPlug } from 'react-icons/fa';

frontend/src/components/settings/pages/developer/index.tsx

@@ -7,7 +7,7 @@ import {
   Navigation,
   TextField,
   Toggle,
-} from 'decky-frontend-lib';
+} from '@decky/ui';
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaFileArchive, FaLink, FaReact, FaSteamSymbol, FaTerminal } from 'react-icons/fa';

frontend/src/components/settings/pages/general/BranchSelect.tsx

@@ -1,4 +1,4 @@
-import { Dropdown, Field } from 'decky-frontend-lib';
+import { Dropdown, Field } from '@decky/ui';
 import { FunctionComponent } from 'react';
 import { useTranslation } from 'react-i18next';
 

frontend/src/components/settings/pages/general/NotificationSettings.tsx

@@ -1,4 +1,4 @@
-import { Field, Toggle } from 'decky-frontend-lib';
+import { Field, Toggle } from '@decky/ui';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 

frontend/src/components/settings/pages/general/RemoteDebugging.tsx

@@ -1,4 +1,4 @@
-import { Field, Toggle } from 'decky-frontend-lib';
+import { Field, Toggle } from '@decky/ui';
 import { useTranslation } from 'react-i18next';
 import { FaChrome } from 'react-icons/fa';
 

frontend/src/components/settings/pages/general/StoreSelect.tsx

@@ -1,4 +1,4 @@
-import { Dropdown, Field, TextField } from 'decky-frontend-lib';
+import { Dropdown, Field, TextField } from '@decky/ui';
 import { FunctionComponent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaShapes } from 'react-icons/fa';

frontend/src/components/settings/pages/general/Updater.tsx

@@ -8,7 +8,7 @@ import {
   Spinner,
   findSP,
   showModal,
-} from 'decky-frontend-lib';
+} from '@decky/ui';
 import { Suspense, lazy, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaExclamation } from 'react-icons/fa';

frontend/src/components/settings/pages/general/index.tsx

@@ -1,4 +1,4 @@
-import { DialogBody, DialogControlsSection, DialogControlsSectionHeader, Field, Toggle } from 'decky-frontend-lib';
+import { DialogBody, DialogControlsSection, DialogControlsSectionHeader, Field, Toggle } from '@decky/ui';
 import { useTranslation } from 'react-i18next';
 
 import { useDeckyState } from '../../../DeckyState';

frontend/src/components/settings/pages/plugin_list/index.tsx

@@ -8,7 +8,7 @@ import {
   ReorderableEntry,
   ReorderableList,
   showContextMenu,
-} from 'decky-frontend-lib';
+} from '@decky/ui';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaDownload, FaEllipsisH, FaRecycle } from 'react-icons/fa';

frontend/src/components/settings/pages/testing/index.tsx

@@ -7,7 +7,7 @@ import {
   Navigation,
   ProgressBar,
   SteamSpinner,
-} from 'decky-frontend-lib';
+} from '@decky/ui';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaDownload, FaInfo } from 'react-icons/fa';

frontend/src/components/store/PluginCard.tsx

@@ -1,11 +1,4 @@
-import {
+import { ButtonItem, Dropdown, Focusable, PanelSectionRow, SingleDropdownOption, SuspensefulImage } from '@decky/ui';
-  ButtonItem,
-  Dropdown,
-  Focusable,
-  PanelSectionRow,
-  SingleDropdownOption,
-  SuspensefulImage,
-} from 'decky-frontend-lib';
 import { CSSProperties, FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

frontend/src/components/store/Store.tsx

@@ -7,7 +7,7 @@ import {
   Tabs,
   TextField,
   findModule,
-} from 'decky-frontend-lib';
+} from '@decky/ui';
 import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

frontend/src/developer.tsx

@@ -1,4 +1,4 @@
-import { sleep } from 'decky-frontend-lib';
+import { sleep } from '@decky/ui';
 import { FaReact } from 'react-icons/fa';
 
 import Logger from './logger';

frontend/src/index.ts

@@ -1,7 +1,7 @@
 // Sets up DFL, then loads start.ts which starts up the loader
 (async () => {
-  console.debug('Setting up decky-frontend-lib...');
+  console.debug('Setting up @decky/ui...');
-  window.DFL = await import('decky-frontend-lib');
+  window.DFL = await import('@decky/ui');
   console.debug('Authenticating with Decky backend...');
   window.deckyAuthToken = await fetch('http://127.0.0.1:1337/auth/token').then((r) => r.text());
   console.debug('Connecting to Decky backend...');

frontend/src/plugin-loader.tsx

@@ -8,7 +8,7 @@ import {
   quickAccessMenuClasses,
   showModal,
   sleep,
-} from 'decky-frontend-lib';
+} from '@decky/ui';
 import { FC, lazy } from 'react';
 import { FaExclamationCircle, FaPlug } from 'react-icons/fa';
 

frontend/src/router-hook.tsx

@@ -1,4 +1,4 @@
-import { Patch, afterPatch, findModuleChild } from 'decky-frontend-lib';
+import { Export, Patch, afterPatch, findModuleExport } from '@decky/ui';
 import { FC, ReactElement, ReactNode, cloneElement, createElement, memo } from 'react';
 import type { Route } from 'react-router';
 
@@ -41,13 +41,9 @@ class RouterHook extends Logger {
     window.__ROUTER_HOOK_INSTANCE?.deinit?.();
     window.__ROUTER_HOOK_INSTANCE = this;
 
-    this.gamepadWrapper = findModuleChild((m) => {
+    this.gamepadWrapper = findModuleExport((e: Export) =>
-      if (typeof m !== 'object') return undefined;
+      e?.render?.toString()?.includes('["flow-children","onActivate","onCancel","focusClassName",'),
-      for (let prop in m) {
+    );
-        if (m[prop]?.render?.toString()?.includes('["flow-children","onActivate","onCancel","focusClassName",'))
-          return m[prop];
-      }
-    });
 
     let Route: new () => Route;
     // Used to store the new replicated routes we create to allow routes to be unpatched.

frontend/src/steamfixes/reload.ts

@@ -1,4 +1,4 @@
-import { getFocusNavController, sleep } from 'decky-frontend-lib';
+import { getFocusNavController, sleep } from '@decky/ui';
 
 import Logger from '../logger';
 

frontend/src/steamfixes/restart.ts

@@ -1,4 +1,4 @@
-import { Patch, findModuleChild, replacePatch, sleep } from 'decky-frontend-lib';
+import { Export, Patch, findModuleExport, replacePatch, sleep } from '@decky/ui';
 
 import Logger from '../logger';
 
@@ -18,12 +18,7 @@ export default async function restartFix() {
     let History: any;
 
     while (!History) {
-      History = findModuleChild((m) => {
+      History = findModuleExport((e: Export) => e.m_history)?.m_history;
-        if (typeof m !== 'object') return undefined;
-        for (let prop in m) {
-          if (m[prop]?.m_history) return m[prop].m_history;
-        }
-      });
       if (!History) {
         logger.debug('Waiting 5s for history to become available.');
         await sleep(5000);

frontend/src/tabs-hook.tsx

@@ -1,5 +1,5 @@
 // TabsHook for versions after the Desktop merge
-import { Patch, QuickAccessTab, afterPatch, findInReactTree, getReactRoot, sleep } from 'decky-frontend-lib';
+import { Patch, QuickAccessTab, afterPatch, findInReactTree, getReactRoot, sleep } from '@decky/ui';
 
 import { QuickAccessVisibleStateProvider } from './components/QuickAccessVisibleState';
 import Logger from './logger';

frontend/src/toaster.tsx

@@ -1,14 +1,14 @@
 import {
-  Module,
+  Export,
   Patch,
   ToastData,
   afterPatch,
   findClass,
   findInReactTree,
-  findModuleChild,
+  findModuleExport,
   getReactRoot,
   sleep,
-} from 'decky-frontend-lib';
+} from '@decky/ui';
 import { ReactNode } from 'react';
 
 import Toast from './components/Toast';
@@ -150,16 +150,7 @@ class Toaster extends Logger {
     this.rNode.stateNode.forceUpdate();
     delete this.rNode.stateNode.shouldComponentUpdate;
 
-    this.audioModule = findModuleChild((m: Module) => {
+    this.audioModule = findModuleExport((e: Export) => e.PlayNavSound && e.RegisterCallbackOnPlaySound);
-      if (typeof m !== 'object') return undefined;
-      for (let prop in m) {
-        try {
-          if (m[prop].PlayNavSound && m[prop].RegisterCallbackOnPlaySound) return m[prop];
-        } catch {
-          return undefined;
-        }
-      }
-    });
 
     this.log('Initialized');
     this.finishStartup?.();

frontend/src/wsrouter.ts

@@ -1,4 +1,4 @@
-import { sleep } from 'decky-frontend-lib';
+import { sleep } from '@decky/ui';
 
 import Logger from './logger';