chore(release): 0.9.0 [CI SKIP]

CHANGELOG.md

@@ -1,3 +1,32 @@
+# [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)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "decky-frontend-lib",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "A library for building decky plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -58,6 +58,14 @@
     "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,43 @@
+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;
+}
+
+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} />
+  );
+};
+
+export default SuspensefulImage;

src/custom-components/index.ts

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

src/deck-components/Focusable.tsx

@@ -0,0 +1,15 @@
+import { ReactNode, VFC } from "react";
+import { findModuleChild } from "../webpack";
+
+export interface FocusableProps {
+    children: ReactNode;
+}
+
+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>;

src/deck-components/Router.tsx

@@ -23,6 +23,7 @@ export interface Router {
   GetQuickAccessTab(): QuickAccessTab;
   Navigate(path: string): void;
   NavigateToExternalWeb(url: string): void;
+  NavigateToStore(): void;
   ToggleSideMenu(sideMenu: SideMenu): void;
   CloseSideMenus(): void;
   OpenSideMenu(sideMenu: SideMenu): void;

src/deck-components/Spinner.tsx

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+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<{}>;
+) as FC<SVGAttributes<SVGElement>>;

src/deck-components/SteamSpinner.tsx

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

src/deck-components/index.ts

@@ -1,6 +1,7 @@
 export * from './Button';
 export * from './ButtonItem';
 export * from './Dropdown';
+export * from './Focusable';
 export * from './Menu';
 export * from './Modal';
 export * from './Panel';

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';