angular-grab 0.1.1 → 0.1.2

package/packages/angular-grab/src/core/__tests__/plugin-registry.test.ts

@@ -0,0 +1,286 @@
+import { describe, it, expect, vi } from 'vitest';
+import { createPluginRegistry } from '../plugins/plugin-registry';
+import type { Plugin, AngularGrabAPI, ElementContext } from '../types';
+
+function makeMockApi(): AngularGrabAPI {
+  return {
+    activate: vi.fn(),
+    deactivate: vi.fn(),
+    toggle: vi.fn(),
+    isActive: vi.fn(() => false),
+    setOptions: vi.fn(),
+    registerPlugin: vi.fn(),
+    unregisterPlugin: vi.fn(),
+    setComponentResolver: vi.fn(),
+    setSourceResolver: vi.fn(),
+    showToolbar: vi.fn(),
+    hideToolbar: vi.fn(),
+    setThemeMode: vi.fn(),
+    getHistory: vi.fn(() => []),
+    clearHistory: vi.fn(),
+    dispose: vi.fn(),
+  };
+}
+
+function makeContext(overrides: Partial<ElementContext> = {}): ElementContext {
+  return {
+    element: null as any,
+    html: '<div>test</div>',
+    componentName: null,
+    filePath: null,
+    line: null,
+    column: null,
+    componentStack: [],
+    selector: 'div',
+    cssClasses: [],
+    ...overrides,
+  };
+}
+
+describe('createPluginRegistry', () => {
+  it('registers a plugin', () => {
+    const registry = createPluginRegistry();
+    const api = makeMockApi();
+    const plugin: Plugin = { name: 'test-plugin' };
+
+    registry.register(plugin, api);
+
+    expect(registry.getPlugins()).toHaveLength(1);
+    expect(registry.getPlugins()[0].name).toBe('test-plugin');
+  });
+
+  it('calls setup on register and stores cleanup', () => {
+    const registry = createPluginRegistry();
+    const api = makeMockApi();
+    const cleanup = vi.fn();
+    const plugin: Plugin = {
+      name: 'with-setup',
+      setup: vi.fn(() => cleanup),
+    };
+
+    registry.register(plugin, api);
+
+    expect(plugin.setup).toHaveBeenCalledWith(api);
+  });
+
+  it('unregisters a plugin', () => {
+    const registry = createPluginRegistry();
+    const api = makeMockApi();
+    const plugin: Plugin = { name: 'removable' };
+
+    registry.register(plugin, api);
+    expect(registry.getPlugins()).toHaveLength(1);
+
+    registry.unregister('removable');
+    expect(registry.getPlugins()).toHaveLength(0);
+  });
+
+  it('calls cleanup on unregister', () => {
+    const registry = createPluginRegistry();
+    const api = makeMockApi();
+    const cleanup = vi.fn();
+    const plugin: Plugin = {
+      name: 'cleanup-test',
+      setup: () => cleanup,
+    };
+
+    registry.register(plugin, api);
+    registry.unregister('cleanup-test');
+
+    expect(cleanup).toHaveBeenCalledTimes(1);
+  });
+
+  it('re-registers a plugin by unregistering the old one first', () => {
+    const registry = createPluginRegistry();
+    const api = makeMockApi();
+    const cleanup = vi.fn();
+    const plugin1: Plugin = {
+      name: 'dup',
+      setup: () => cleanup,
+    };
+    const plugin2: Plugin = { name: 'dup' };
+
+    registry.register(plugin1, api);
+    registry.register(plugin2, api);
+
+    expect(cleanup).toHaveBeenCalledTimes(1);
+    expect(registry.getPlugins()).toHaveLength(1);
+  });
+
+  it('unregister is a no-op for unknown plugins', () => {
+    const registry = createPluginRegistry();
+    // Should not throw
+    registry.unregister('nonexistent');
+    expect(registry.getPlugins()).toHaveLength(0);
+  });
+
+  describe('callHook', () => {
+    it('calls registered plugin hooks', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+      const onActivate = vi.fn();
+      const plugin: Plugin = {
+        name: 'hook-test',
+        hooks: { onActivate },
+      };
+
+      registry.register(plugin, api);
+      registry.callHook('onActivate');
+
+      expect(onActivate).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls hooks on all registered plugins', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+      const onActivate1 = vi.fn();
+      const onActivate2 = vi.fn();
+
+      registry.register({ name: 'p1', hooks: { onActivate: onActivate1 } }, api);
+      registry.register({ name: 'p2', hooks: { onActivate: onActivate2 } }, api);
+      registry.callHook('onActivate');
+
+      expect(onActivate1).toHaveBeenCalledTimes(1);
+      expect(onActivate2).toHaveBeenCalledTimes(1);
+    });
+
+    it('passes arguments to hooks', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+      const onElementSelect = vi.fn();
+      const ctx = makeContext();
+
+      registry.register({ name: 'args-test', hooks: { onElementSelect } }, api);
+      registry.callHook('onElementSelect', ctx);
+
+      expect(onElementSelect).toHaveBeenCalledWith(ctx);
+    });
+
+    it('handles plugins with no hooks gracefully', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+
+      registry.register({ name: 'no-hooks' }, api);
+
+      // Should not throw
+      expect(() => registry.callHook('onActivate')).not.toThrow();
+    });
+
+    it('handles plugins without the specific hook', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+
+      registry.register(
+        { name: 'partial', hooks: { onDeactivate: vi.fn() } },
+        api,
+      );
+
+      // Should not throw when calling a hook the plugin doesn't have
+      expect(() => registry.callHook('onActivate')).not.toThrow();
+    });
+
+    it('catches and warns on hook errors without stopping other plugins', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      const onActivate2 = vi.fn();
+
+      registry.register({
+        name: 'bad',
+        hooks: { onActivate: () => { throw new Error('boom'); } },
+      }, api);
+      registry.register({ name: 'good', hooks: { onActivate: onActivate2 } }, api);
+
+      registry.callHook('onActivate');
+
+      expect(warnSpy).toHaveBeenCalledTimes(1);
+      expect(onActivate2).toHaveBeenCalledTimes(1);
+      warnSpy.mockRestore();
+    });
+  });
+
+  describe('callTransformHook', () => {
+    it('chains transforms across plugins', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+      const ctx = makeContext();
+
+      registry.register({
+        name: 'upper',
+        hooks: { transformCopyContent: (text: string) => text.toUpperCase() },
+      }, api);
+      registry.register({
+        name: 'prefix',
+        hooks: { transformCopyContent: (text: string) => `PREFIX:${text}` },
+      }, api);
+
+      const result = registry.callTransformHook('hello', ctx);
+      expect(result).toBe('PREFIX:HELLO');
+    });
+
+    it('returns original text when no plugins have transform', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+      const ctx = makeContext();
+
+      registry.register({ name: 'no-transform' }, api);
+
+      const result = registry.callTransformHook('original', ctx);
+      expect(result).toBe('original');
+    });
+
+    it('catches transform errors and continues', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+      const ctx = makeContext();
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      registry.register({
+        name: 'bad-transform',
+        hooks: { transformCopyContent: () => { throw new Error('fail'); } },
+      }, api);
+      registry.register({
+        name: 'good-transform',
+        hooks: { transformCopyContent: (text: string) => text + '-suffix' },
+      }, api);
+
+      // The bad transform throws, so the input to the good transform is still the original
+      const result = registry.callTransformHook('input', ctx);
+      expect(result).toBe('input-suffix');
+      expect(warnSpy).toHaveBeenCalledTimes(1);
+      warnSpy.mockRestore();
+    });
+  });
+
+  describe('dispose', () => {
+    it('calls all cleanups and clears plugins', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+      const cleanup1 = vi.fn();
+      const cleanup2 = vi.fn();
+
+      registry.register({ name: 'p1', setup: () => cleanup1 }, api);
+      registry.register({ name: 'p2', setup: () => cleanup2 }, api);
+
+      registry.dispose();
+
+      expect(cleanup1).toHaveBeenCalledTimes(1);
+      expect(cleanup2).toHaveBeenCalledTimes(1);
+      expect(registry.getPlugins()).toHaveLength(0);
+    });
+
+    it('ignores errors during cleanup', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+
+      registry.register({
+        name: 'err',
+        setup: () => () => { throw new Error('cleanup fail'); },
+      }, api);
+
+      // Should not throw
+      expect(() => registry.dispose()).not.toThrow();
+      expect(registry.getPlugins()).toHaveLength(0);
+    });
+  });
+});

package/packages/angular-grab/src/core/__tests__/store.test.ts

@@ -0,0 +1,118 @@
+import { describe, it, expect, vi } from 'vitest';
+import { createStore } from '../store';
+import type { AngularGrabOptions } from '../types';
+
+function makeOptions(overrides: Partial<AngularGrabOptions> = {}): AngularGrabOptions {
+  return {
+    activationKey: 'Meta+C',
+    activationMode: 'hold',
+    keyHoldDuration: 0,
+    maxContextLines: 20,
+    enabled: true,
+    enableInInputs: false,
+    devOnly: true,
+    showToolbar: true,
+    themeMode: 'dark',
+    ...overrides,
+  };
+}
+
+describe('createStore', () => {
+  it('creates state with correct default values', () => {
+    const opts = makeOptions();
+    const store = createStore(opts);
+
+    expect(store.state.active).toBe(false);
+    expect(store.state.frozen).toBe(false);
+    expect(store.state.hoveredElement).toBeNull();
+    expect(store.state.options).toBe(opts);
+    expect(store.state.toolbar.visible).toBe(true);
+    expect(store.state.toolbar.themeMode).toBe('dark');
+    expect(store.state.toolbar.history).toEqual([]);
+    expect(store.state.toolbar.pendingAction).toBeNull();
+  });
+
+  it('respects showToolbar=false in options', () => {
+    const store = createStore(makeOptions({ showToolbar: false }));
+    expect(store.state.toolbar.visible).toBe(false);
+  });
+
+  it('respects themeMode in options', () => {
+    const store = createStore(makeOptions({ themeMode: 'light' }));
+    expect(store.state.toolbar.themeMode).toBe('light');
+  });
+
+  it('notifies listeners on state changes', () => {
+    const store = createStore(makeOptions());
+    const listener = vi.fn();
+
+    store.subscribe(listener);
+    store.state.active = true;
+
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith(store.state, 'active');
+  });
+
+  it('does not notify listeners when value has not changed', () => {
+    const store = createStore(makeOptions());
+    const listener = vi.fn();
+
+    store.subscribe(listener);
+    store.state.active = false; // same as default
+
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it('subscribe returns an unsubscribe function that works', () => {
+    const store = createStore(makeOptions());
+    const listener = vi.fn();
+
+    const unsub = store.subscribe(listener);
+    store.state.active = true;
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    unsub();
+    store.state.active = false;
+    expect(listener).toHaveBeenCalledTimes(1); // no additional call
+  });
+
+  it('supports multiple listeners', () => {
+    const store = createStore(makeOptions());
+    const listener1 = vi.fn();
+    const listener2 = vi.fn();
+
+    store.subscribe(listener1);
+    store.subscribe(listener2);
+    store.state.frozen = true;
+
+    expect(listener1).toHaveBeenCalledTimes(1);
+    expect(listener2).toHaveBeenCalledTimes(1);
+  });
+
+  it('unsubscribing one listener does not affect others', () => {
+    const store = createStore(makeOptions());
+    const listener1 = vi.fn();
+    const listener2 = vi.fn();
+
+    const unsub1 = store.subscribe(listener1);
+    store.subscribe(listener2);
+
+    unsub1();
+    store.state.active = true;
+
+    expect(listener1).not.toHaveBeenCalled();
+    expect(listener2).toHaveBeenCalledTimes(1);
+  });
+
+  it('passes the proxy state and changed key to listeners', () => {
+    const store = createStore(makeOptions());
+    const listener = vi.fn();
+
+    store.subscribe(listener);
+    store.state.frozen = true;
+
+    const [receivedState, receivedKey] = listener.mock.calls[0];
+    expect(receivedKey).toBe('frozen');
+    expect(receivedState.frozen).toBe(true);
+  });
+});

package/packages/angular-grab/src/core/__tests__/utils.test.ts

@@ -0,0 +1,85 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from 'vitest';
+import { escapeHtml, cleanAngularAttrs } from '../utils';
+
+describe('escapeHtml', () => {
+  it('escapes ampersands', () => {
+    expect(escapeHtml('foo & bar')).toBe('foo & bar');
+  });
+
+  it('escapes angle brackets', () => {
+    expect(escapeHtml('<div>')).toBe('&lt;div&gt;');
+  });
+
+  it('passes through double quotes (not special in text nodes)', () => {
+    // innerHTML only escapes <, >, & in text content — not quotes
+    expect(escapeHtml('"hello"')).toBe('"hello"');
+  });
+
+  it('passes through single quotes (not special in text nodes)', () => {
+    expect(escapeHtml("it's")).toBe("it's");
+  });
+
+  it('escapes multiple special characters together', () => {
+    expect(escapeHtml('<a href="x">&</a>')).toBe(
+      '&lt;a href="x"&gt;&amp;&lt;/a&gt;',
+    );
+  });
+
+  it('returns empty string for empty input', () => {
+    expect(escapeHtml('')).toBe('');
+  });
+
+  it('returns plain text unchanged', () => {
+    expect(escapeHtml('hello world')).toBe('hello world');
+  });
+});
+
+describe('cleanAngularAttrs', () => {
+  it('removes _nghost attributes with values', () => {
+    const html = '<div _nghost-abc-123=""></div>';
+    expect(cleanAngularAttrs(html)).toBe('<div></div>');
+  });
+
+  it('removes _ngcontent attributes with values', () => {
+    const html = '<span _ngcontent-xyz-456=""></span>';
+    expect(cleanAngularAttrs(html)).toBe('<span></span>');
+  });
+
+  it('removes _nghost attributes without values', () => {
+    const html = '<div _nghost-abc-123></div>';
+    expect(cleanAngularAttrs(html)).toBe('<div></div>');
+  });
+
+  it('removes _ngcontent attributes without values', () => {
+    const html = '<span _ngcontent-xyz-456></span>';
+    expect(cleanAngularAttrs(html)).toBe('<span></span>');
+  });
+
+  it('removes multiple Angular attributes from one tag', () => {
+    const html = '<div _nghost-abc-123="" _ngcontent-xyz-456="">text</div>';
+    expect(cleanAngularAttrs(html)).toBe('<div>text</div>');
+  });
+
+  it('removes Angular attributes from nested elements', () => {
+    const html =
+      '<div _nghost-a-1=""><span _ngcontent-b-2="">hi</span></div>';
+    expect(cleanAngularAttrs(html)).toBe('<div><span>hi</span></div>');
+  });
+
+  it('preserves non-Angular attributes', () => {
+    const html = '<div class="foo" id="bar" _nghost-abc-123="">text</div>';
+    expect(cleanAngularAttrs(html)).toBe(
+      '<div class="foo" id="bar">text</div>',
+    );
+  });
+
+  it('returns unchanged HTML when no Angular attributes present', () => {
+    const html = '<div class="test">hello</div>';
+    expect(cleanAngularAttrs(html)).toBe(html);
+  });
+
+  it('handles empty string', () => {
+    expect(cleanAngularAttrs('')).toBe('');
+  });
+});

package/packages/angular-grab/src/core/clipboard/copy.ts

@@ -0,0 +1,104 @@
+import type { ElementContext, ComponentStackEntry, ComponentResolver, SourceResolver } from '../types';
+import type { PluginRegistry } from '../plugins/plugin-registry';
+import { generateSnippet } from './generate-snippet';
+import { showToast, type ToastDetail } from '../overlay/toast';
+import { filterAngularClasses } from '../utils';
+
+export interface CopyDeps {
+  getComponentResolver: () => ComponentResolver | null;
+  getSourceResolver: () => SourceResolver | null;
+  getMaxContextLines: () => number;
+  pluginRegistry: PluginRegistry;
+}
+
+function buildSelector(el: Element): string {
+  const tag = el.tagName.toLowerCase();
+  const id = el.id ? `#${el.id}` : '';
+  const classes = filterAngularClasses(el.classList)
+    .map((c) => `.${c}`)
+    .join('');
+  return `${tag}${id}${classes}`;
+}
+
+function getCssClasses(el: Element): string[] {
+  return filterAngularClasses(el.classList);
+}
+
+export function buildElementContext(
+  element: Element,
+  componentResolver: ComponentResolver | null,
+  sourceResolver: SourceResolver | null,
+): ElementContext {
+  const compResult = componentResolver?.(element);
+  const srcResult = sourceResolver?.(element);
+
+  // Build component stack from resolver result
+  const componentStack: ComponentStackEntry[] = [];
+  if (compResult?.stack) {
+    for (const entry of compResult.stack) {
+      let filePath: string | null = null;
+      let line: number | null = null;
+      let column: number | null = null;
+
+      if (entry.hostElement && sourceResolver) {
+        const src = sourceResolver(entry.hostElement);
+        if (src) {
+          filePath = src.filePath;
+          line = src.line;
+          column = src.column;
+        }
+      }
+
+      componentStack.push({ name: entry.name, filePath, line, column });
+    }
+  }
+
+  return {
+    element,
+    html: element.outerHTML,
+    componentName: compResult?.name ?? null,
+    filePath: srcResult?.filePath ?? null,
+    line: srcResult?.line ?? null,
+    column: srcResult?.column ?? null,
+    componentStack,
+    selector: buildSelector(element),
+    cssClasses: getCssClasses(element),
+  };
+}
+
+export interface CopyResult {
+  context: ElementContext;
+  snippet: string;
+}
+
+export async function copyElement(element: Element, deps: CopyDeps): Promise<CopyResult | null> {
+  const context = buildElementContext(
+    element,
+    deps.getComponentResolver(),
+    deps.getSourceResolver(),
+  );
+
+  deps.pluginRegistry.callHook('onElementSelect', context);
+  deps.pluginRegistry.callHook('onBeforeCopy', context);
+
+  let snippet = generateSnippet(context, deps.getMaxContextLines());
+  snippet = deps.pluginRegistry.callTransformHook(snippet, context);
+
+  try {
+    await navigator.clipboard.writeText(snippet);
+    const detail: ToastDetail = {
+      componentName: context.componentName,
+      filePath: context.filePath,
+      line: context.line,
+      column: context.column,
+      cssClasses: context.cssClasses,
+    };
+    showToast('Copied to clipboard', detail);
+    deps.pluginRegistry.callHook('onCopySuccess', snippet, context, undefined);
+    return { context, snippet };
+  } catch (err) {
+    const error = err instanceof Error ? err : new Error(String(err));
+    deps.pluginRegistry.callHook('onCopyError', error);
+    return null;
+  }
+}

package/packages/angular-grab/src/core/clipboard/generate-snippet.ts

@@ -0,0 +1,38 @@
+import type { ElementContext } from '../types';
+import { cleanAngularAttrs } from '../utils';
+
+function truncateHtml(html: string, maxLines: number): string {
+  const lines = html.split('\n');
+  if (lines.length <= maxLines) return html;
+
+  return lines.slice(0, maxLines).join('\n') + '\n  ...';
+}
+
+function formatLocation(name: string | null, filePath: string | null, line: number | null, column: number | null): string {
+  let locationLine = '';
+  if (name) locationLine += `in ${name}`;
+  if (filePath) {
+    const loc = filePath +
+      (line != null ? `:${line}` : '') +
+      (line != null && column != null ? `:${column}` : '');
+    locationLine += locationLine ? ` at ${loc}` : `at ${loc}`;
+  }
+  return locationLine;
+}
+
+export function generateSnippet(context: ElementContext, maxContextLines: number): string {
+  const cleaned = cleanAngularAttrs(context.html);
+  const truncated = truncateHtml(cleaned, maxContextLines);
+
+  const parts: string[] = [truncated];
+
+  if (context.componentStack.length > 0) {
+    for (const entry of context.componentStack) {
+      parts.push(formatLocation(entry.name, entry.filePath, entry.line, entry.column));
+    }
+  } else if (context.componentName || context.filePath) {
+    parts.push(formatLocation(context.componentName, context.filePath, context.line, context.column));
+  }
+
+  return parts.join('\n');
+}

package/packages/angular-grab/src/core/constants.ts

@@ -0,0 +1,10 @@
+export const Z_INDEX_FREEZE = 2147483644;
+export const Z_INDEX_CROSSHAIR = 2147483645;
+export const Z_INDEX_OVERLAY = 2147483646;
+export const Z_INDEX_LABEL = 2147483647;
+export const Z_INDEX_TOOLBAR = 2147483646;
+export const Z_INDEX_TOAST = 2147483647;
+export const Z_INDEX_POPOVER = 2147483647;
+
+export const TOOLBAR_TOAST_OFFSET = '72px';
+export const TOOLBAR_POPOVER_OFFSET = '68px';