From 2ef103283de4ae026e112086de3b73c69611bebd Mon Sep 17 00:00:00 2001
From: cole <bernankeic@gmail.com>
Date: Tue, 16 Apr 2024 18:19:18 +0800
Subject: [PATCH] docs: update usage

---
 playground/src/components/Background.tsx | 45 ++++++++++-----
 playground/src/demos/BasicPattern.astro  | 13 +++--
 playground/src/demos/ImagePattern.astro  | 70 +++++++++++++-----------
 playground/src/demos/WithReact.tsx       | 29 +++++-----
 playground/src/demos/WithVue.vue         | 10 ++--
 playground/src/pages/index.mdx           | 67 ++++++++++++-----------
 6 files changed, 128 insertions(+), 106 deletions(-)

diff --git a/playground/src/components/Background.tsx b/playground/src/components/Background.tsx
index 8975a1e..2f12166 100644
--- a/playground/src/components/Background.tsx
+++ b/playground/src/components/Background.tsx
@@ -61,15 +61,26 @@ export function Background() {
     },
   });
 
-  const { canvas, render, getSize, ctx, setSize } = useBackmoji(imageRenderer, canvasRef, {
+  const { render, setSize } = useBackmoji(canvasRef, imageRenderer, {
     degree: -30,
     rowGap: 40,
     columnGap: 20,
   });
 
+  function getSize() {
+    if (canvasRef.current) {
+      return {
+        w: canvasRef.current?.width,
+        h: canvasRef.current?.height,
+      };
+    }
+  }
+
   function animationCb() {
-    if (getSize && ctx) {
-      const { w, h } = getSize();
+    const ctx = canvasRef.current?.getContext("2d");
+    const size = getSize();
+    if (size && ctx) {
+      const { w, h } = size;
       ctx?.clearRect(0, 0, w, h);
       render?.();
     }
@@ -77,7 +88,7 @@ export function Background() {
   setCallback(animationCb);
 
   useEventListener("resize", () => {
-    setSize?.(window.innerWidth, window.innerHeight);
+    setSize(window.innerWidth, window.innerHeight);
     animationCb();
   });
 
@@ -90,18 +101,22 @@ export function Background() {
   }
 
   useEffect(() => {
-    if (canvas) {
-      setCanvasStyle(canvas);
-      setSize?.(window.innerWidth, window.innerHeight);
-      render?.();
-      play();
-
-      return () => {
-        reset();
-        canvas.remove();
-      };
+    if (!canvasRef.current) {
+      return;
     }
-  }, [canvas]);
+    setCanvasStyle(canvasRef.current);
+    play();
+
+    return () => {
+      reset();
+      canvasRef.current?.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    setSize(window.innerWidth, window.innerHeight);
+    render();
+  }, [render, setSize]);
 
   return <canvas ref={canvasRef}></canvas>;
 }
diff --git a/playground/src/demos/BasicPattern.astro b/playground/src/demos/BasicPattern.astro
index 9286115..8bf563d 100644
--- a/playground/src/demos/BasicPattern.astro
+++ b/playground/src/demos/BasicPattern.astro
@@ -4,26 +4,27 @@
 import { backmoji, createTextRenderer } from "backmoji";
 
 const parent = document.querySelector<HTMLDivElement>("#demo-basic-pattern")!;
+const canvas = document.createElement("canvas");
 
 const renderer = createTextRenderer("😯", {
   font: "40px Aria",
 });
 const height = 160;
-const { canvas, render, setSize } = backmoji(renderer, {
+const { render, setSize } = backmoji(canvas, renderer, {
   degree: 30,
   rowGap: 30,
   columnGap: 40,
-  width: parent.clientWidth,
-  height,
 });
 
+setSize(parent.clientWidth, height);
+
 const observer = new ResizeObserver((entries) => {
-  for(const entry of entries){
+  for (const entry of entries) {
     setSize(entry.contentRect.width, height);
     render();
   }
-})
-observer.observe(parent)
+});
+observer.observe(parent);
 
 parent.appendChild(canvas);
 render();
diff --git a/playground/src/demos/ImagePattern.astro b/playground/src/demos/ImagePattern.astro
index 47770c5..0a1f7bf 100644
--- a/playground/src/demos/ImagePattern.astro
+++ b/playground/src/demos/ImagePattern.astro
@@ -1,63 +1,67 @@
 <div id="demo-image-pattern" class="h-full w-full overflow-hidden rounded-md bg-orange-50"></div>
 
 <script>
-import { backmoji, createImageRenderer } from "backmoji";
-import Avatar from '/avatar.png?url'
+import { type Renderer, backmoji, createImageRenderer } from "backmoji";
+import Avatar from "/avatar.png?url";
 
+const canvas = document.createElement("canvas");
 const parent = document.querySelector<HTMLDivElement>("#demo-image-pattern")!;
 
 function loadImage() {
-  return new Promise<HTMLImageElement>(resolve => {
+  return new Promise<HTMLImageElement>((resolve) => {
     const image = document.createElement("img");
     image.onload = () => {
       resolve(image);
-    }
+    };
     image.src = Avatar;
     image.width = 200;
     image.height = 200;
-  })
+  });
 }
 
-const img = await loadImage();
-
-const renderer = createImageRenderer(img, {
-  custom({ ctx, item, renderItemWidth, renderItemHeight, rowGap, columnGap, columnCount, rowCount }) {
-    for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
-      let from: number, to: number;
-      if (rowIndex % 2 === 0) {
-        from = -2;
-        to = columnCount;
-      } else {
-        from = 0;
-        to = columnCount + 2;
-      }
-      for (let columnIndex = from; columnIndex < to; columnIndex++) {
-        const x = columnIndex * (renderItemWidth + columnGap);
-        const y = rowIndex * (renderItemHeight + rowGap);
-        if ((columnIndex - rowIndex) % 2 === 0) {
-          ctx.drawImage(item, x, y, renderItemWidth, renderItemHeight)
+function createRenderer() {
+  return new Promise<Renderer>(async (resolve) => {
+    const img = await loadImage();
+    const renderer = createImageRenderer(img, {
+      custom({ ctx, item, renderItemWidth, renderItemHeight, rowGap, columnGap, columnCount, rowCount }) {
+        for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+          let from: number, to: number;
+          if (rowIndex % 2 === 0) {
+            from = -2;
+            to = columnCount;
+          } else {
+            from = 0;
+            to = columnCount + 2;
+          }
+          for (let columnIndex = from; columnIndex < to; columnIndex++) {
+            const x = columnIndex * (renderItemWidth + columnGap);
+            const y = rowIndex * (renderItemHeight + rowGap);
+            if ((columnIndex - rowIndex) % 2 === 0) {
+              ctx.drawImage(item, x, y, renderItemWidth, renderItemHeight);
+            }
+          }
         }
-      }
-    }
-  },
-});
+      },
+    });
+    resolve(renderer);
+  });
+}
 
 const height = 300;
-const { canvas, render, setSize } = backmoji(renderer, {
+const renderer = createRenderer();
+const { render, setSize } = backmoji(canvas, renderer, {
   degree: -30,
   rowGap: 50,
   columnGap: 60,
-  width: parent.clientWidth,
-  height,
 });
 
 const observer = new ResizeObserver((entries) => {
-  for(const entry of entries){
+  for (const entry of entries) {
     setSize(entry.contentRect.width, height);
     render();
   }
-})
-observer.observe(parent)
+});
+observer.observe(parent);
 
 parent.appendChild(canvas);
 render();
diff --git a/playground/src/demos/WithReact.tsx b/playground/src/demos/WithReact.tsx
index 8f1c536..08200e9 100644
--- a/playground/src/demos/WithReact.tsx
+++ b/playground/src/demos/WithReact.tsx
@@ -1,38 +1,37 @@
 import { useBackmoji, useImageLoader, useImageRenderer } from "@backmoji/react";
 import ReactLogo from "/react.svg?url";
-import { useEffect, useRef } from "react";
-import { useLatest } from "ahooks";
+import { useEffect, useRef, useState } from "react";
 import { useResizeObserver } from "../hooks/useResizeObserver";
 
 export function WithReact() {
   const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   const img = useImageLoader(ReactLogo);
   const renderer = useImageRenderer(img);
-  const backmojiResult = useBackmoji(renderer, canvasRef, {
-    height: 150,
+  const { render, setSize } = useBackmoji(canvasRef, renderer, {
     rowGap: 15,
     columnGap: 30,
   });
-  const { render, canvas, setSize } = useLatest(backmojiResult).current;
   const divRef = useResizeObserver<HTMLDivElement>((entries) => {
     for (const entry of entries) {
       const { width, height } = entry.contentRect;
-      setSize?.(width, height);
-      render?.();
+      setSize(width, height);
+      render();
     }
   });
 
   useEffect(() => {
-    if (canvas) {
-      setSize?.(divRef.current?.clientWidth, divRef.current?.clientHeight);
-      render?.();
-
-      return () => {
-        canvas.remove();
-      };
+    if (mounted) {
+      const div = divRef.current!;
+      setSize(div.clientWidth, 150);
+      render();
     }
-  }, [canvas]);
+  }, [mounted, render, setSize]);
 
   return (
     <div ref={divRef} className="rounded-md bg-orange-50">
diff --git a/playground/src/demos/WithVue.vue b/playground/src/demos/WithVue.vue
index c5f941a..8cad7c6 100644
--- a/playground/src/demos/WithVue.vue
+++ b/playground/src/demos/WithVue.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watchEffect } from "vue";
-import { useBackmoji, useImageLoader, useImageRenderer, useTextRenderer } from "@backmoji/vue";
+import { useBackmoji, useImageLoader, useImageRenderer } from "@backmoji/vue";
 import VueLogo from "/vue.svg?url";
 import { useElementSize } from "@vueuse/core";
 
@@ -10,15 +10,13 @@ const { width, height } = useElementSize(divRef);
 const canvasRef = ref<HTMLCanvasElement>();
 const image = useImageLoader(VueLogo);
 const renderer = useImageRenderer(image);
-const backmojiResult = useBackmoji(renderer, canvasRef, {
+const { setSize, render } = useBackmoji(canvasRef, renderer, {
   rowGap: 30,
   columnGap: 30,
 });
 watchEffect(() => {
-  if (backmojiResult.value) {
-    backmojiResult.value.setSize(width.value, height.value);
-    backmojiResult.value.render();
-  }
+  setSize(width.value, height.value);
+  render();
 });
 </script>
 
diff --git a/playground/src/pages/index.mdx b/playground/src/pages/index.mdx
index 6d176fb..1f65331 100644
--- a/playground/src/pages/index.mdx
+++ b/playground/src/pages/index.mdx
@@ -15,7 +15,7 @@ import { backmoji, createTextRenderer } from "backmoji";
 
 const canvas = document.createElement("canvas");
 const renderer = createTextRenderer("👌");
-const { render } = backmoji(renderer);
+const { render } = backmoji(canvas, renderer);
 render();
 ```
 
@@ -31,19 +31,20 @@ import BasicPattern from "@/demos/BasicPattern.astro";
 import { backmoji, createTextRenderer } from "backmoji";
 
 const parent = document.querySelector<HTMLDivElement>("#demo-basic-pattern")!;
+const canvas = document.createElement("canvas");
 
 const renderer = createTextRenderer("😯", {
   font: "40px Aria",
 });
 const height = 160;
-const { canvas, render, setSize } = backmoji(renderer, {
+const { render, setSize } = backmoji(canvas, renderer, {
   degree: 30,
   rowGap: 30,
   columnGap: 40,
-  width: parent.clientWidth,
-  height,
 });
 
+setSize(parent.clientWidth, height);
+
 const observer = new ResizeObserver((entries) => {
   for (const entry of entries) {
     setSize(entry.contentRect.width, height);
@@ -63,9 +64,10 @@ import ImagePattern from "@/demos/ImagePattern.astro";
 <ImagePattern />
 
 ```ts
-import { backmoji, createImageRenderer } from "backmoji";
-import Avatar from "/avatar.png";
+import { type Renderer, backmoji, createImageRenderer } from "backmoji";
+import Avatar from "/avatar.png?url";
 
+const canvas = document.createElement("canvas");
 const parent = document.querySelector<HTMLDivElement>("#demo-image-pattern")!;
 
 function loadImage() {
@@ -80,37 +82,40 @@ function loadImage() {
   });
 }
 
-const img = await loadImage();
-
-const renderer = createImageRenderer(img, {
-  custom({ ctx, item, renderItemWidth, renderItemHeight, rowGap, columnGap, columnCount, rowCount }) {
-    for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
-      let from: number, to: number;
-      if (rowIndex % 2 === 0) {
-        from = -2;
-        to = columnCount;
-      } else {
-        from = 0;
-        to = columnCount + 2;
-      }
-      for (let columnIndex = from; columnIndex < to; columnIndex++) {
-        const x = columnIndex * (renderItemWidth + columnGap);
-        const y = rowIndex * (renderItemHeight + rowGap);
-        if ((columnIndex - rowIndex) % 2 === 0) {
-          ctx.drawImage(item, x, y, renderItemWidth, renderItemHeight);
+function createRenderer() {
+  return new Promise<Renderer>(async (resolve) => {
+    const img = await loadImage();
+    const renderer = createImageRenderer(img, {
+      custom({ ctx, item, renderItemWidth, renderItemHeight, rowGap, columnGap, columnCount, rowCount }) {
+        for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+          let from: number, to: number;
+          if (rowIndex % 2 === 0) {
+            from = -2;
+            to = columnCount;
+          } else {
+            from = 0;
+            to = columnCount + 2;
+          }
+          for (let columnIndex = from; columnIndex < to; columnIndex++) {
+            const x = columnIndex * (renderItemWidth + columnGap);
+            const y = rowIndex * (renderItemHeight + rowGap);
+            if ((columnIndex - rowIndex) % 2 === 0) {
+              ctx.drawImage(item, x, y, renderItemWidth, renderItemHeight);
+            }
+          }
         }
-      }
-    }
-  },
-});
+      },
+    });
+    resolve(renderer);
+  });
+}
 
 const height = 300;
-const { canvas, render, setSize } = backmoji(renderer, {
+const renderer = createRenderer();
+const { render, setSize } = backmoji(canvas, renderer, {
   degree: -30,
   rowGap: 50,
   columnGap: 60,
-  width: parent.clientWidth,
-  height,
 });
 
 const observer = new ResizeObserver((entries) => {