angular-grab 0.1.1 → 0.1.3

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';