From 29b4b596fb510339e6c451a353b2a17d3b2e09c7 Mon Sep 17 00:00:00 2001 From: cole Date: Tue, 2 Apr 2024 09:39:21 +0800 Subject: [PATCH] fix: vue composable type --- packages/vue/src/index.ts | 7 ++++-- playground/package.json | 1 + playground/src/demos/WithReact.tsx | 2 +- playground/src/demos/WithVue.vue | 9 +++++++- pnpm-lock.yaml | 35 ++++++++++++++++++++++++++++-- 5 files changed, 48 insertions(+), 6 deletions(-) diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts index 85143ae..5e3e00f 100644 --- a/packages/vue/src/index.ts +++ b/packages/vue/src/index.ts @@ -3,12 +3,12 @@ import { type ComputedRef, type MaybeRefOrGetter, computed, onMounted, ref, toVa export type BackmojiResult = ReturnType; -export function useBackmoji(renderer: MaybeRefOrGetter, canvas: MaybeRefOrGetter, options?: MaybeRefOrGetter | undefined>) { +export function useBackmoji(renderer: MaybeRefOrGetter, canvas: MaybeRefOrGetter, options?: MaybeRefOrGetter | 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 { const _image = toValue(image); const _options = toValue(options); + if (!_image) { + return undefined; + } return createImageRenderer(_image, _options); }); } diff --git a/playground/package.json b/playground/package.json index 6c70378..6be787e 100644 --- a/playground/package.json +++ b/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", diff --git a/playground/src/demos/WithReact.tsx b/playground/src/demos/WithReact.tsx index fd6029d..8f1c536 100644 --- a/playground/src/demos/WithReact.tsx +++ b/playground/src/demos/WithReact.tsx @@ -35,7 +35,7 @@ export function WithReact() { }, [canvas]); return ( -
+
); diff --git a/playground/src/demos/WithVue.vue b/playground/src/demos/WithVue.vue index 6503e29..c5f941a 100644 --- a/playground/src/demos/WithVue.vue +++ b/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(); +const { width, height } = useElementSize(divRef); const canvasRef = ref(); 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(); } }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 61dd5f6..1031040 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -129,6 +129,9 @@ importers: '@types/react-dom': specifier: ^18.2.23 version: 18.2.23 + '@vueuse/core': + specifier: ^10.9.0 + version: 10.9.0(vue@3.4.0) ahooks: specifier: ^3.7.10 version: 3.7.10(react@18.2.0) @@ -2563,6 +2566,10 @@ packages: resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==} dev: false + /@types/web-bluetooth@0.0.20: + resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==} + dev: false + /@typescript-eslint/eslint-plugin@7.4.0(@typescript-eslint/parser@7.4.0)(eslint@8.57.0)(typescript@5.4.2): resolution: {integrity: sha512-yHMQ/oFaM7HZdVrVm/M2WHaNPgyuJH4WelkSVEWSSsir34kxW2kDJCxlXRhhGWEsMN0WAW/vLpKfKVcm8k+MPw==} engines: {node: ^18.18.0 || >=20.0.0} @@ -3363,6 +3370,31 @@ packages: /@vue/shared@3.4.21: resolution: {integrity: sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==} + /@vueuse/core@10.9.0(vue@3.4.0): + resolution: {integrity: sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==} + dependencies: + '@types/web-bluetooth': 0.0.20 + '@vueuse/metadata': 10.9.0 + '@vueuse/shared': 10.9.0(vue@3.4.0) + vue-demi: 0.14.7(vue@3.4.0) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + dev: false + + /@vueuse/metadata@10.9.0: + resolution: {integrity: sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==} + dev: false + + /@vueuse/shared@10.9.0(vue@3.4.0): + resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==} + dependencies: + vue-demi: 0.14.7(vue@3.4.0) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + dev: false + /acorn-jsx@5.3.2(acorn@8.10.0): resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} peerDependencies: @@ -10252,8 +10284,7 @@ packages: '@vue/composition-api': optional: true dependencies: - vue: 3.4.0(typescript@5.4.2) - dev: true + vue: 3.4.0(typescript@5.4.3) /vue-eslint-parser@9.4.2(eslint@8.57.0): resolution: {integrity: sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==}