chore(release): 0.10.5 [CI SKIP]

.releaserc.json

@@ -9,7 +9,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,59 @@
+## [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)
 
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "decky-frontend-lib",
-  "version": "0.0.6",
+  "version": "0.10.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "decky-frontend-lib",
-      "version": "0.0.6",
+      "version": "0.10.5",
       "hasInstallScript": true,
       "license": "GPL-2.0-or-later",
       "devDependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "decky-frontend-lib",
-  "version": "0.8.0",
+  "version": "0.10.5",
   "description": "A library for building decky plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

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

@@ -22,6 +22,7 @@ export interface Router {
   OpenQuickAccessMenu(quickAccessTab: QuickAccessTab): void;
   GetQuickAccessTab(): QuickAccessTab;
   Navigate(path: string): void;
+  NavigateBackOrOpenMenu(): void;
   NavigateToExternalWeb(url: string): void;
   NavigateToStore(): void;
   ToggleSideMenu(sideMenu: SideMenu): void;

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

@@ -31,6 +31,7 @@ export interface ServerAPI {
   callServerMethod<TArgs = {}, TRes = {}>(methodName: string, args: TArgs): Promise<ServerResponse<TRes>>;
   fetchNoCors<TRes = {}>(url: string, request: RequestInfo): 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);