Add Vue support and document scoping to plugins

Introduces Vue composables and hooks for attachment, bookmark, and document manager plugins. Refactors plugin capabilities to support document-scoped operations. Removes plugin-loader package and related files, migrating file-picker and document tab logic to document manager. Improves core state management and document state access for Vue. Updates interaction manager and capture plugins for better document scoping and state handling.

Author: bobsingor

packages/core/src/vue/composables/index.ts

@@ -1,4 +1,5 @@
 export * from './use-core-state';
+export * from './use-document-state';
 export * from './use-registry';
 export * from './use-plugin';
 export * from './use-capability';

packages/core/src/vue/composables/use-core-state.ts

@@ -1,22 +1,40 @@
-import { ref, onMounted, onBeforeUnmount } from 'vue';
-import { arePropsEqual, type CoreState } from '@embedpdf/core';
+import { ref, watch } from 'vue';
+import { type CoreState } from '@embedpdf/core';
 import { useRegistry } from './use-registry';
 
+/**
+ * Hook that provides access to the current core state
+ * and re-renders the component only when the core state changes
+ */
 export function useCoreState() {
   const { registry } = useRegistry();
-  const core = ref<CoreState>();
+  const coreState = ref<CoreState | null>(null);
 
-  onMounted(() => {
-    const store = registry.value!.getStore();
-    core.value = store.getState().core;
-
-    const unsub = store.subscribe((action, newSt, oldSt) => {
-      if (store.isCoreAction(action) && !arePropsEqual(newSt.core, oldSt.core)) {
-        core.value = newSt.core;
+  watch(
+    registry,
+    (registryValue, _, onCleanup) => {
+      if (!registryValue) {
+        coreState.value = null;
+        return;
       }
-    });
-    onBeforeUnmount(unsub);
-  });
 
-  return core;
+      const store = registryValue.getStore();
+
+      // Get initial core state
+      coreState.value = store.getState().core;
+
+      // Create a single subscription that handles all core actions
+      const unsubscribe = store.subscribe((action, newState, oldState) => {
+        // Only update if it's a core action and the core state changed
+        if (store.isCoreAction(action) && newState.core !== oldState.core) {
+          coreState.value = newState.core;
+        }
+      });
+
+      onCleanup(unsubscribe);
+    },
+    { immediate: true },
+  );
+
+  return coreState;
 }

packages/core/src/vue/composables/use-document-state.ts

@@ -0,0 +1,22 @@
+import { computed, toValue, type MaybeRefOrGetter } from 'vue';
+import { useCoreState } from './use-core-state';
+
+/**
+ * Hook that provides reactive access to a specific document's state from the core store.
+ *
+ * @param documentId The ID of the document to retrieve (can be ref, computed, getter, or plain value).
+ * @returns A computed ref containing the DocumentState object or null if not found.
+ */
+export function useDocumentState(documentId: MaybeRefOrGetter<string | null>) {
+  const coreState = useCoreState();
+
+  const documentState = computed(() => {
+    const core = coreState.value;
+    const docId = toValue(documentId);
+
+    if (!core || !docId) return null;
+    return core.documents[docId] ?? null;
+  });
+
+  return documentState;
+}

packages/plugin-attachment/package.json

@@ -21,13 +21,19 @@
       "types": "./dist/react/index.d.ts",
       "import": "./dist/react/index.js",
       "require": "./dist/react/index.cjs"
+    },
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "import": "./dist/vue/index.js",
+      "require": "./dist/vue/index.cjs"
     }
   },
   "scripts": {
     "build:base": "vite build --mode base",
     "build:react": "vite build --mode react",
     "build:preact": "vite build --mode preact",
-    "build": "pnpm run clean && concurrently -c auto -n base,react,preact \"vite build --mode base\" \"vite build --mode react\" \"vite build --mode preact\"",
+    "build:vue": "vite build --mode vue",
+    "build": "pnpm run clean && concurrently -c auto -n base,react,preact,vue \"vite build --mode base\" \"vite build --mode react\" \"vite build --mode preact\" \"vite build --mode vue\"",
     "clean": "rimraf dist",
     "lint": "eslint src --color",
     "lint:fix": "eslint src --color --fix"
@@ -45,7 +51,8 @@
     "@embedpdf/core": "workspace:*",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "preact": "^10.26.4"
+    "preact": "^10.26.4",
+    "vue": ">=3.2.0"
   },
   "files": [
     "dist",

packages/plugin-attachment/src/lib/attachment-plugin.ts

@@ -1,6 +1,6 @@
-import { BasePlugin, createEmitter, PluginRegistry } from '@embedpdf/core';
+import { BasePlugin, PluginRegistry } from '@embedpdf/core';
 
-import { AttachmentCapability, AttachmentPluginConfig } from './types';
+import { AttachmentCapability, AttachmentPluginConfig, AttachmentScope } from './types';
 import {
   PdfAttachmentObject,
   PdfErrorCode,
@@ -18,30 +18,64 @@ export class AttachmentPlugin extends BasePlugin<AttachmentPluginConfig, Attachm
 
   async initialize(_: AttachmentPluginConfig): Promise<void> {}
 
+  // ─────────────────────────────────────────────────────────
+  // Capability
+  // ─────────────────────────────────────────────────────────
+
   protected buildCapability(): AttachmentCapability {
     return {
-      getAttachments: this.getAttachments.bind(this),
-      downloadAttachment: this.downloadAttachment.bind(this),
+      // Active document operations
+      getAttachments: () => this.getAttachments(),
+      downloadAttachment: (attachment) => this.downloadAttachment(attachment),
+
+      // Document-scoped operations
+      forDocument: (documentId: string) => this.createAttachmentScope(documentId),
+    };
+  }
+
+  // ─────────────────────────────────────────────────────────
+  // Document Scoping
+  // ─────────────────────────────────────────────────────────
+
+  private createAttachmentScope(documentId: string): AttachmentScope {
+    return {
+      getAttachments: () => this.getAttachments(documentId),
+      downloadAttachment: (attachment) => this.downloadAttachment(attachment, documentId),
     };
   }
 
-  private downloadAttachment(attachment: PdfAttachmentObject): Task<ArrayBuffer, PdfErrorReason> {
-    const doc = this.coreState.core.document;
+  // ─────────────────────────────────────────────────────────
+  // Core Operations
+  // ─────────────────────────────────────────────────────────
+
+  private downloadAttachment(
+    attachment: PdfAttachmentObject,
+    documentId?: string,
+  ): Task<ArrayBuffer, PdfErrorReason> {
+    const id = documentId ?? this.getActiveDocumentId();
+    const coreDoc = this.coreState.core.documents[id];
 
-    if (!doc) {
-      return PdfTaskHelper.reject({ code: PdfErrorCode.NotFound, message: 'Document not found' });
+    if (!coreDoc?.document) {
+      return PdfTaskHelper.reject({
+        code: PdfErrorCode.NotFound,
+        message: `Document ${id} not found`,
+      });
     }
 
-    return this.engine.readAttachmentContent(doc, attachment);
+    return this.engine.readAttachmentContent(coreDoc.document, attachment);
   }
 
-  private getAttachments(): Task<PdfAttachmentObject[], PdfErrorReason> {
-    const doc = this.coreState.core.document;
+  private getAttachments(documentId?: string): Task<PdfAttachmentObject[], PdfErrorReason> {
+    const id = documentId ?? this.getActiveDocumentId();
+    const coreDoc = this.coreState.core.documents[id];
 
-    if (!doc) {
-      return PdfTaskHelper.reject({ code: PdfErrorCode.NotFound, message: 'Document not found' });
+    if (!coreDoc?.document) {
+      return PdfTaskHelper.reject({
+        code: PdfErrorCode.NotFound,
+        message: `Document ${id} not found`,
+      });
     }
 
-    return this.engine.getAttachments(doc);
+    return this.engine.getAttachments(coreDoc.document);
   }
 }

packages/plugin-attachment/src/lib/types.ts

@@ -3,7 +3,17 @@ import { PdfAttachmentObject, PdfErrorReason, Task } from '@embedpdf/models';
 
 export interface AttachmentPluginConfig extends BasePluginConfig {}
 
+// Scoped attachment capability for a specific document
+export interface AttachmentScope {
+  getAttachments(): Task<PdfAttachmentObject[], PdfErrorReason>;
+  downloadAttachment(attachment: PdfAttachmentObject): Task<ArrayBuffer, PdfErrorReason>;
+}
+
 export interface AttachmentCapability {
+  // Active document operations
   getAttachments: () => Task<PdfAttachmentObject[], PdfErrorReason>;
   downloadAttachment: (attachment: PdfAttachmentObject) => Task<ArrayBuffer, PdfErrorReason>;
+
+  // Document-scoped operations
+  forDocument(documentId: string): AttachmentScope;
 }

packages/plugin-attachment/src/vue/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-attachment';

packages/plugin-attachment/src/vue/hooks/use-attachment.ts

@@ -0,0 +1,5 @@
+import { useCapability, usePlugin } from '@embedpdf/core/vue';
+import { AttachmentPlugin } from '@embedpdf/plugin-attachment';
+
+export const useAttachmentPlugin = () => usePlugin<AttachmentPlugin>(AttachmentPlugin.id);
+export const useAttachmentCapability = () => useCapability<AttachmentPlugin>(AttachmentPlugin.id);

packages/plugin-attachment/src/vue/index.ts

@@ -0,0 +1,2 @@
+export * from './hooks';
+export * from '@embedpdf/plugin-attachment';

…/plugin-loader/src/vue/tsconfig.vue.json …gin-attachment/src/vue/tsconfig.vue.jsonpackages/plugin-loader/src/vue/tsconfig.vue.json renamed to packages/plugin-attachment/src/vue/tsconfig.vue.json packages/plugin-loader/src/vue/tsconfig.vue.json renamed to packages/plugin-attachment/src/vue/tsconfig.vue.json

@@ -5,7 +5,7 @@
     "types": ["vue"],
     "baseUrl": "../..",
     "paths": {
-      "@embedpdf/plugin-loader": ["src/lib/index.ts"]
+      "@embedpdf/plugin-attachment": ["src/lib/index.ts"]
     }
   },
   "include": ["./**/*.ts", "./**/*.vue"]