fix: vue composable type

Author: Bernankez

packages/vue/src/index.ts

@@ -3,12 +3,12 @@ import { type ComputedRef, type MaybeRefOrGetter, computed, onMounted, ref, toVa
 
 export type BackmojiResult = ReturnType<typeof backmoji>;
 
-export function useBackmoji(renderer: MaybeRefOrGetter<Renderer>, canvas: MaybeRefOrGetter<HTMLCanvasElement | undefined>, options?: MaybeRefOrGetter<Omit<BackmojiOptions, "canvas"> | undefined>) {
+export function useBackmoji(renderer: MaybeRefOrGetter<Renderer | undefined>, canvas: MaybeRefOrGetter<HTMLCanvasElement | undefined>, options?: MaybeRefOrGetter<Omit<BackmojiOptions, "canvas"> | undefined>) {
   return computed(() => {
     const _renderer = toValue(renderer);
     const _options = toValue(options);
     const _canvas = toValue(canvas);
-    if (!_canvas) {
+    if (!_canvas || !_renderer) {
       return undefined;
     }
     return backmoji(_renderer, {
@@ -48,6 +48,9 @@ export function useImageRenderer(image: MaybeRefOrGetter<HTMLImageElement | unde
   return computed(() => {
     const _image = toValue(image);
     const _options = toValue(options);
+    if (!_image) {
+      return undefined;
+    }
     return createImageRenderer(_image, _options);
   });
 }

playground/package.json

@@ -19,6 +19,7 @@
     "@backmoji/vue": "workspace:*",
     "@types/react": "^18.2.73",
     "@types/react-dom": "^18.2.23",
+    "@vueuse/core": "^10.9.0",
     "ahooks": "^3.7.10",
     "astro": "^4.5.12",
     "react": "^18.2.0",

playground/src/demos/WithReact.tsx

@@ -35,7 +35,7 @@ export function WithReact() {
   }, [canvas]);
 
   return (
-    <div ref={divRef}>
+    <div ref={divRef} className="rounded-md bg-orange-50">
       <canvas ref={canvasRef}></canvas>
     </div>
   );

playground/src/demos/WithVue.vue

@@ -2,6 +2,10 @@
 import { ref, watchEffect } from "vue";
 import { useBackmoji, useImageLoader, useImageRenderer, useTextRenderer } from "@backmoji/vue";
 import VueLogo from "/vue.svg?url";
+import { useElementSize } from "@vueuse/core";
+
+const divRef = ref<HTMLDivElement>();
+const { width, height } = useElementSize(divRef);
 
 const canvasRef = ref<HTMLCanvasElement>();
 const image = useImageLoader(VueLogo);
@@ -12,11 +16,14 @@ const backmojiResult = useBackmoji(renderer, canvasRef, {
 });
 watchEffect(() => {
   if (backmojiResult.value) {
+    backmojiResult.value.setSize(width.value, height.value);
     backmojiResult.value.render();
   }
 });
 </script>
 
 <template>
-  <canvas ref="canvasRef"></canvas>
+  <div ref="divRef" class="rounded-md bg-orange-50">
+    <canvas ref="canvasRef"></canvas>
+  </div>
 </template>