From 2757e9e6ecdbe3efb2791894f5438a13a1cb5a8b Mon Sep 17 00:00:00 2001 From: Danila Poyarkov Date: Tue, 17 Mar 2026 15:30:28 +0300 Subject: [PATCH] Fix PR review: critical bugs, package config, remaining title attrs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Critical fixes: - useSceneComputed: watchEffect on state.sceneVersion as fallback when replaceGraph() swaps the emitter (bridge stayed on old graph) - useLayerDrag: capture monitorForElements() cleanup, onScopeDispose (was leaking global listeners on tab switch) Package fixes: - packages/vue: sideEffects: false for tree-shaking - Build: --noEmit → --emitDeclarationOnly (was skipping .d.ts) - canvaskit-wasm peerDep: optional via peerDependenciesMeta - use-canvas.ts: onUnmounted → onScopeDispose Remaining title= attrs migrated to : - AppMenu toggle UI, TypographySection missing font, ProviderSettings --- packages/vue/package.json | 8 +++++++- packages/vue/src/composables/use-canvas.ts | 4 ++-- packages/vue/src/composables/use-layer-drag.ts | 5 +++-- .../vue/src/composables/use-scene-reactive.ts | 7 ++++++- src/components/AppMenu.vue | 17 +++++++++-------- src/components/chat/ProviderSettings.vue | 15 ++++++++------- src/components/properties/TypographySection.vue | 13 ++++++++----- 7 files changed, 43 insertions(+), 26 deletions(-) diff --git a/packages/vue/package.json b/packages/vue/package.json index 139248ed0..c111279d5 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -12,9 +12,10 @@ }, "main": "./src/index.ts", "types": "./src/index.ts", + "sideEffects": false, "files": ["src", "dist"], "scripts": { - "build": "vue-tsc --noEmit", + "build": "vue-tsc --emitDeclarationOnly", "prepublishOnly": "bun run build" }, "repository": { @@ -40,6 +41,11 @@ "@open-pencil/core": "workspace:*", "canvaskit-wasm": ">=0.39.0" }, + "peerDependenciesMeta": { + "canvaskit-wasm": { + "optional": true + } + }, "dependencies": { "@vueuse/core": "^14.2.1" } diff --git a/packages/vue/src/composables/use-canvas.ts b/packages/vue/src/composables/use-canvas.ts index e396fb08d..03051b898 100644 --- a/packages/vue/src/composables/use-canvas.ts +++ b/packages/vue/src/composables/use-canvas.ts @@ -1,5 +1,5 @@ import { useBreakpoints, useRafFn, useResizeObserver } from '@vueuse/core' -import { onMounted, onUnmounted, type Ref } from 'vue' +import { onMounted, onScopeDispose, type Ref } from 'vue' import { getCanvasKit, getGpuBackend, SkiaRenderer } from '@open-pencil/core' @@ -169,7 +169,7 @@ export function useCanvas( void init() }) - onUnmounted(() => { + onScopeDispose(() => { destroyed = true pause() cancelAnimationFrame(resizeRaf) diff --git a/packages/vue/src/composables/use-layer-drag.ts b/packages/vue/src/composables/use-layer-drag.ts index 75f460165..9b2d379a4 100644 --- a/packages/vue/src/composables/use-layer-drag.ts +++ b/packages/vue/src/composables/use-layer-drag.ts @@ -1,4 +1,4 @@ -import { ref, watchEffect, type Ref } from 'vue' +import { onScopeDispose, ref, watchEffect, type Ref } from 'vue' import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter' import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine' import { @@ -84,7 +84,7 @@ export function useLayerDrag( }) } - monitorForElements({ + const cleanupMonitor = monitorForElements({ onDrop: ({ source, location }) => { const target = location.current.dropTargets[0] if (!target) return @@ -117,6 +117,7 @@ export function useLayerDrag( instructionTargetId.value = null } }) + onScopeDispose(cleanupMonitor) return { draggingId, diff --git a/packages/vue/src/composables/use-scene-reactive.ts b/packages/vue/src/composables/use-scene-reactive.ts index d036123f1..7ac11cfaa 100644 --- a/packages/vue/src/composables/use-scene-reactive.ts +++ b/packages/vue/src/composables/use-scene-reactive.ts @@ -1,4 +1,4 @@ -import { computed, onScopeDispose, shallowRef, triggerRef, type ComputedRef } from 'vue' +import { computed, onScopeDispose, shallowRef, triggerRef, watchEffect, type ComputedRef } from 'vue' import type { Editor } from '@open-pencil/core/editor' @@ -37,6 +37,11 @@ function getBridge(editor: Editor): SceneBridge { editor.graph.emitter.on('node:reparented', trigger), editor.graph.emitter.on('node:reordered', trigger) ) + const stop = watchEffect(() => { + void editor.state.sceneVersion + trigger() + }) + unbinds.push(stop) }, unsubscribe() { if (--this.count > 0) return diff --git a/src/components/AppMenu.vue b/src/components/AppMenu.vue index 09f751c10..b3a8397a9 100644 --- a/src/components/AppMenu.vue +++ b/src/components/AppMenu.vue @@ -201,14 +201,15 @@ const topMenus = [ @dblclick="startRename" >{{ store.state.documentName }} - + + +
diff --git a/src/components/chat/ProviderSettings.vue b/src/components/chat/ProviderSettings.vue index 0bec44a5a..e39f171ce 100644 --- a/src/components/chat/ProviderSettings.vue +++ b/src/components/chat/ProviderSettings.vue @@ -92,13 +92,14 @@ function clearUnsplashKey() {