wip: vue composable api

package.json

@@ -20,7 +20,7 @@
     "clean": "rimraf --glob packages/*/{dist}",
     "play": "pnpm -F \"./playground\" dev",
     "play:build": "pnpm -F \"./playground\" build",
-    "dev": "pnpm -F \"./packages/core\" dev && pnpm play",
+    "dev": "pnpm -r -F \"./packages/*\" dev && pnpm play",
     "build": "pnpm clean && pnpm -r -F \"./packages/*\" build && pnpm play:build",
     "release": "bumpp -r",
     "test": "vitest run",

packages/vue/package.json

@@ -48,5 +48,14 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "peerDependencies": {
+    "vue": ">=3.4.0"
+  },
+  "dependencies": {
+    "backmoji": "workspace:*"
+  },
+  "devDependencies": {
+    "vue": "3.4.0"
   }
 }

packages/vue/src/index.ts

@@ -1 +1,27 @@
-export const a = 1;
+import { type BackmojiOptions, type CreateTextRendererOptions, type Renderer, backmoji, createTextRenderer } from "backmoji";
+import { type ComputedRef, type MaybeRefOrGetter, computed, toValue } from "vue";
+
+export type BackmojiResult = ReturnType<typeof backmoji>;
+
+export function useBackmoji(renderer: MaybeRefOrGetter<Renderer>, 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) {
+      return undefined;
+    }
+    return backmoji(_renderer, {
+      ..._options,
+      canvas: _canvas,
+    });
+  });
+}
+
+export function useTextRenderer(text: MaybeRefOrGetter<string>, options?: MaybeRefOrGetter<CreateTextRendererOptions | undefined>) {
+  return computed(() => {
+    const _text = toValue(text);
+    const _options = toValue(options);
+    return createTextRenderer(_text, _options);
+  });
+}

playground/src/demos/WithVue.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ref, watchEffect } from "vue";
+import { useBackmoji, useTextRenderer } from "@backmoji/vue";
+import VueLogo from "/vue.svg?url";
+
+const canvasRef = ref<HTMLCanvasElement>();
+const renderer = useTextRenderer("vue");
+const backmojiResult = useBackmoji(renderer, canvasRef, {
+  rowGap: 30,
+  columnGap: 30,
+});
+watchEffect(() => {
+  if (backmojiResult.value) {
+    backmojiResult.value.render();
+  }
+});
+</script>
+
+<template>
+  <canvas ref="canvasRef"></canvas>
+</template>

playground/src/hooks/useResizeObserver.ts

@@ -1,5 +1,5 @@
 import { useLatest } from "ahooks";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 
 export function useResizeObserver<T extends HTMLElement>(
   callback: ResizeObserverCallback,

playground/src/pages/index.mdx

@@ -135,4 +135,8 @@ import { WithReact } from "@/demos/WithReact";
 
 ### Using with Vue
 
+import WithVue from "@/demos/WithVue.vue";
+
+<WithVue client:visible />
+
 ### Options