fix(react-image): change Load to return loaded HTMLImageElement (#61)

## change Load to return loaded HTMLImageElement

Please check the following:

- [x] I have written documents and tests, if needed.

.changeset/khaki-trees-try.md

@@ -0,0 +1,5 @@
+---
+"@fepack/react-image": patch
+---
+
+fix(react-image): change Load to return loaded HTMLImageElement

.changeset/neat-trains-speak.md

@@ -0,0 +1,5 @@
+---
+"@fepack/image": patch
+---
+
+fix(react-image): change Load to return loaded HTMLImageElement

.github/workflows/ci.yml

@@ -28,8 +28,8 @@ jobs:
           cache: "pnpm"
           cache-dependency-path: "pnpm-lock.yaml"
           node-version-file: ".nvmrc"
-      - if: matrix.command == 'test'
-        run: pnpx playwright install
       - run: pnpm install --frozen-lockfile
+      - if: matrix.command == 'test'
+        run: pnpm exec playwright install
       - run: pnpm prepack
       - run: pnpm ${{ matrix.command }}

.github/workflows/code-coverage.yml

@@ -21,8 +21,8 @@ jobs:
           cache: "pnpm"
           cache-dependency-path: "pnpm-lock.yaml"
           node-version-file: ".nvmrc"
-      - run: pnpx playwright install
       - run: pnpm install --frozen-lockfile
+      - run: pnpm exec playwright install
       - run: pnpm test
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@v3

package.json

@@ -46,6 +46,7 @@
     "eslint": "^7.32.0",
     "jsdom": "^22.1.0",
     "packlint": "^0.2.4",
+    "playwright": "^1.40.1",
     "prettier": "^2.5.1",
     "publint": "^0.2.2",
     "rimraf": "^5.0.1",

packages/image/package.json

@@ -51,8 +51,7 @@
     "type:check": "tsc --noEmit"
   },
   "devDependencies": {
-    "@types/node": "^18.16.2",
-    "playwright": "^1.38.0"
+    "@types/node": "^18.16.2"
   },
   "publishConfig": {
     "access": "public"

packages/image/src/LoadClient.ts

@@ -2,15 +2,15 @@ import { load } from "./load";
 
 export type LoadSrc = Parameters<typeof load>[0];
 
-export type LoadState<TLoadSrc extends LoadSrc> = {
-  src: TLoadSrc;
+export type LoadState = {
+  image: HTMLImageElement;
   promise?: Promise<unknown>;
   error?: unknown;
 };
 
 type Notify = (...args: unknown[]) => unknown;
 export class LoadClient {
-  private loadCache = new Map<LoadSrc, LoadState<LoadSrc>>();
+  private loadCache = new Map<LoadSrc, LoadState>();
   private notifiesMap = new Map<LoadSrc, Notify[]>();
 
   attach(src: LoadSrc, notify: Notify) {
@@ -38,17 +38,17 @@ export class LoadClient {
     if (loadState?.error) {
       throw loadState.error;
     }
-    if (loadState?.src) {
-      return loadState as LoadState<TLoadSrc>;
+    if (loadState?.image) {
+      return loadState.image;
     }
     if (loadState?.promise) {
       throw loadState.promise;
     }
 
-    const newLoadState: LoadState<TLoadSrc> = {
-      src,
+    const newLoadState: LoadState = {
+      image: undefined as unknown as HTMLImageElement,
       promise: load(src)
-        .then((image) => (newLoadState.src = image.src as TLoadSrc))
+        .then((image) => (newLoadState.image = image))
         .catch(() => (newLoadState.error = `${src}: load error`)),
     };
 

packages/image/src/load.spec.ts

@@ -3,7 +3,7 @@ import { load } from ".";
 
 describe("load", () => {
   it("should load image by src", async () => {
-    const loadedImage = await load("src/images/test.png");
-    expect(loadedImage.src).toBe("http://localhost:5173/src/images/test.png");
+    const image = await load("src/images/test.png");
+    expect(image.src).toBe("http://localhost:5173/src/images/test.png");
   });
 });

packages/react-image/package.json

@@ -47,8 +47,7 @@
     "type:check": "tsc --noEmit"
   },
   "dependencies": {
-    "@fepack/image": "workspace:0.2.5",
-    "use-sync-external-store": "^1.2.0"
+    "@fepack/image": "workspace:*"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
@@ -57,12 +56,11 @@
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.1",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@types/use-sync-external-store": "^0.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "react": "^16.8 || ^17 || ^18"
+    "react": "^18"
   },
   "publishConfig": {
     "access": "public"

packages/react-image/src/Load.ts

@@ -1,6 +1,5 @@
-import { LoadClient, type LoadSrc, type LoadState } from "@fepack/image";
-import { type FunctionComponent, createElement } from "react";
-import { useSyncExternalStore } from "use-sync-external-store/shim";
+import { LoadClient, type LoadSrc } from "@fepack/image";
+import { ReactNode, useSyncExternalStore } from "react";
 
 const loadClient = new LoadClient();
 
@@ -18,9 +17,9 @@ export const useLoad = <TLoadSrc extends LoadSrc>(
 
 type LoadProps<TLoadSrc extends LoadSrc> = {
   src: TLoadSrc;
-  children: FunctionComponent<LoadState<TLoadSrc>>;
+  children: (loadedImage: HTMLImageElement) => ReactNode;
 };
 export const Load = <TLoadSrc extends LoadSrc>({
   src,
   children,
-}: LoadProps<TLoadSrc>) => createElement(children, useLoad({ src }));
+}: LoadProps<TLoadSrc>) => children(useLoad({ src }));