feat: vue composable

packages/vue/src/index.ts

@@ -1,5 +1,5 @@
-import { type BackmojiOptions, type CreateTextRendererOptions, type Renderer, backmoji, createTextRenderer } from "backmoji";
-import { type ComputedRef, type MaybeRefOrGetter, computed, toValue } from "vue";
+import { type BackmojiOptions, type CreateImageRendererOptions, type CreateTextRendererOptions, type Renderer, backmoji, createImageRenderer, createTextRenderer } from "backmoji";
+import { type ComputedRef, type MaybeRefOrGetter, computed, onMounted, ref, toValue } from "vue";
 
 export type BackmojiResult = ReturnType<typeof backmoji>;
 
@@ -25,3 +25,29 @@ export function useTextRenderer(text: MaybeRefOrGetter<string>, options?: MaybeR
     return createTextRenderer(_text, _options);
   });
 }
+
+export function useImageLoader(src: MaybeRefOrGetter<string>) {
+  const img = ref();
+
+  const load = async () => {
+    const _src = toValue(src);
+    const _img = new Image();
+    _img.src = _src;
+    await new Promise((resolve) => {
+      _img.onload = resolve;
+    });
+    img.value = _img;
+  };
+
+  onMounted(load);
+
+  return img;
+}
+
+export function useImageRenderer(image: MaybeRefOrGetter<HTMLImageElement | undefined>, options?: MaybeRefOrGetter<CreateImageRendererOptions | undefined>) {
+  return computed(() => {
+    const _image = toValue(image);
+    const _options = toValue(options);
+    return createImageRenderer(_image, _options);
+  });
+}

playground/package.json

@@ -25,7 +25,7 @@
     "react-dom": "^18.2.0",
     "stats.js": "^0.17.0",
     "typescript": "^5.4.3",
-    "vue": "^3.4.21"
+    "vue": "3.4.0"
   },
   "devDependencies": {
     "@iconify/json": "^2.2.196",

playground/src/demos/WithVue.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { ref, watchEffect } from "vue";
-import { useBackmoji, useTextRenderer } from "@backmoji/vue";
+import { useBackmoji, useImageLoader, useImageRenderer, useTextRenderer } from "@backmoji/vue";
 import VueLogo from "/vue.svg?url";
 
 const canvasRef = ref<HTMLCanvasElement>();
-const renderer = useTextRenderer("vue");
+const image = useImageLoader(VueLogo);
+const renderer = useImageRenderer(image);
 const backmojiResult = useBackmoji(renderer, canvasRef, {
   rowGap: 30,
   columnGap: 30,