@n8n/frontend-module-sdk 0.5.1 → 0.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@n8n/frontend-module-sdk",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "main": "src/index.ts",
   "import": "src/index.ts",
   "exports": {
@@ -10,8 +10,8 @@
   "dependencies": {
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
-    "@n8n/design-system": "2.34.1",
-    "@n8n/api-types": "1.35.1"
+    "@n8n/api-types": "1.36.0",
+    "@n8n/design-system": "2.35.0"
   },
   "devDependencies": {
     "typescript": "6.0.2",
@@ -20,8 +20,8 @@
     "vitest": "^4.1.9",
     "vue-tsc": "^2.2.8",
     "@n8n/eslint-config": "0.0.1",
-    "@n8n/vitest-config": "1.20.0",
-    "@n8n/typescript-config": "1.9.0"
+    "@n8n/typescript-config": "1.10.0",
+    "@n8n/vitest-config": "1.21.0"
   },
   "license": "SEE LICENSE IN LICENSE.md",
   "homepage": "https://n8n.io",

package/src/registries/modalRegistry.test.ts

@@ -1,4 +1,5 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { computed, isReactive } from 'vue';
 import type { Component } from 'vue';
 
 import * as modalRegistry from './modalRegistry';
@@ -341,4 +342,66 @@ describe('modalRegistry', () => {
 			expect(keys).toEqual(['test-modal-2', 'test-modal-1', 'test-modal-3']);
 		});
 	});
+
+	// The registry is the single definition source: consumers derive from it rather
+	// than mirroring it, which only works if reading it inside a computed tracks.
+	describe('reactivity', () => {
+		it('should re-evaluate a computed over getAll on register, unregister and clear', () => {
+			const keys = computed(() => [...modalRegistry.getAll().keys()]);
+
+			expect(keys.value).toEqual([]);
+
+			modalRegistry.register(mockModal1);
+			expect(keys.value).toEqual(['test-modal-1']);
+
+			modalRegistry.register(mockModal2);
+			expect(keys.value).toEqual(['test-modal-1', 'test-modal-2']);
+
+			modalRegistry.unregister('test-modal-1');
+			expect(keys.value).toEqual(['test-modal-2']);
+
+			modalRegistry.clear();
+			expect(keys.value).toEqual([]);
+		});
+
+		it('should not make a registered component reactive', () => {
+			modalRegistry.register(mockModal1);
+
+			// Wrapping a component in a reactive proxy costs render performance and
+			// breaks identity checks — the registry is shallow for this reason.
+			expect(isReactive(modalRegistry.get('test-modal-1')?.component)).toBe(false);
+			expect(modalRegistry.get('test-modal-1')?.component).toBe(mockComponent1);
+		});
+	});
+	describe('ad-hoc key prefixes', () => {
+		it('should report a key built from a declared prefix as ad-hoc', () => {
+			modalRegistry.declareAdHocKeyPrefix('downloadDataTableModal');
+
+			expect(modalRegistry.isAdHocKey('downloadDataTableModal-42')).toBe(true);
+			expect(modalRegistry.isAdHocKey('downloadDataTableModal')).toBe(true);
+		});
+
+		it('should not report an undeclared key as ad-hoc', () => {
+			modalRegistry.declareAdHocKeyPrefix('downloadDataTableModal');
+
+			expect(modalRegistry.isAdHocKey('someOtherModal')).toBe(false);
+			expect(modalRegistry.isAdHocKey('someOtherModal-42')).toBe(false);
+		});
+
+		it('should not treat a prefix as a match for an unrelated key that merely starts with it', () => {
+			modalRegistry.declareAdHocKeyPrefix('importCsvModal');
+
+			// Only the bare prefix and the `<prefix>-<id>` form count, so a longer
+			// camelCase name starting with the same letters is still a real key.
+			expect(modalRegistry.isAdHocKey('importCsvModalSettings')).toBe(false);
+		});
+
+		it('should survive clear(), which empties registrations and not declarations', () => {
+			modalRegistry.declareAdHocKeyPrefix('importCsvModal');
+
+			modalRegistry.clear();
+
+			expect(modalRegistry.isAdHocKey('importCsvModal-7')).toBe(true);
+		});
+	});
 });

package/src/registries/modalRegistry.ts

@@ -1,8 +1,18 @@
+import { shallowReactive } from 'vue';
+
 import type { ModalDefinition } from '../types/modal';
 
-const modals = new Map<string, ModalDefinition>();
+/**
+ * Shallow-reactive so consumers can derive from the registry with a plain
+ * `computed` instead of mirroring it through a subscription. Shallow on purpose:
+ * a definition's `component` must not be turned into a reactive object.
+ */
+const modals = shallowReactive(new Map<string, ModalDefinition>());
 const listeners = new Set<(modals: Map<string, ModalDefinition>) => void>();
 
+/** Declarations, not registrations — deliberately not emptied by `clear()`. */
+const adHocKeyPrefixes = new Set<string>();
+
 export function getAll(): Map<string, ModalDefinition> {
 	return new Map(modals);
 }
@@ -39,6 +49,30 @@ export function has(key: string): boolean {
 	return modals.has(key);
 }
 
+/**
+ * Declare that keys starting with `prefix` are minted at runtime and will never
+ * be registered, so the unknown-key warning can tell them apart from a modal
+ * whose registration was forgotten.
+ */
+export function declareAdHocKeyPrefix(prefix: string): void {
+	adHocKeyPrefixes.add(prefix);
+}
+
+/**
+ * Whether `key` was minted from a declared ad-hoc prefix — either the bare
+ * prefix or the `<prefix>-<id>` form features build per row.
+ *
+ * Prefix matching is the trade this makes: a forgotten registration whose key
+ * happens to share a declared prefix goes unwarned.
+ */
+export function isAdHocKey(key: string): boolean {
+	for (const prefix of adHocKeyPrefixes) {
+		if (key === prefix || key.startsWith(`${prefix}-`)) return true;
+	}
+
+	return false;
+}
+
 export function subscribe(listener: (modals: Map<string, ModalDefinition>) => void): () => void {
 	listeners.add(listener);
 	return () => {

package/src/types/descriptor.ts

@@ -31,6 +31,11 @@ export type FrontendModuleDescription = {
 	};
 	resources?: ResourceMetadata[];
 	modals?: ModalDefinition[];
+	/**
+	 * Prefixes for modal keys minted at runtime instead of registered. Declared
+	 * here so they arrive on the same path as `modals`, not by import side effect.
+	 */
+	adHocModalKeyPrefixes?: string[];
 	settingsPages?: IMenuItem[];
 
 	// --- descriptor v2 (all optional, additive) ---