angular-grab 0.1.1 → 0.1.3

package/packages/angular-grab/src/cli/utils/detect-project.ts

@@ -0,0 +1,78 @@
+import { existsSync, readFileSync } from 'fs';
+import { join, dirname } from 'path';
+
+export interface ProjectInfo {
+  angularJsonPath: string;
+  projectRoot: string;
+  projectName: string;
+  sourceRoot: string;
+  builderType: 'application' | 'browser-esbuild' | 'browser';
+  packageManager: 'pnpm' | 'yarn' | 'npm';
+}
+
+export function findAngularJson(startDir: string = process.cwd()): string | null {
+  let dir = startDir;
+  while (true) {
+    const candidate = join(dir, 'angular.json');
+    if (existsSync(candidate)) return candidate;
+
+    const parent = dirname(dir);
+    if (parent === dir) return null;
+    dir = parent;
+  }
+}
+
+export function detectProject(angularJsonPath: string): ProjectInfo {
+  const projectRoot = dirname(angularJsonPath);
+  const raw = readFileSync(angularJsonPath, 'utf8');
+  const angularJson = JSON.parse(raw);
+
+  const projects = angularJson.projects || {};
+  const projectNames = Object.keys(projects);
+  if (projectNames.length === 0) {
+    throw new Error('No projects found in angular.json');
+  }
+
+  const projectName = projectNames[0];
+  const project = projects[projectName];
+  if (!project) {
+    throw new Error(`Project "${projectName}" not found in angular.json`);
+  }
+
+  const sourceRoot = project.sourceRoot || 'src';
+  const targets = project.architect || project.targets;
+  const buildTarget = targets?.build;
+  if (!buildTarget) {
+    throw new Error(`No build target found for project "${projectName}"`);
+  }
+
+  const builder: string = buildTarget.builder || '';
+  let builderType: ProjectInfo['builderType'];
+
+  if (builder.includes(':application') || builder.includes('angular-grab:application')) {
+    builderType = 'application';
+  } else if (builder.includes(':browser-esbuild')) {
+    builderType = 'browser-esbuild';
+  } else if (builder.includes(':browser')) {
+    builderType = 'browser';
+  } else {
+    builderType = 'application';
+  }
+
+  const packageManager = detectPackageManager(projectRoot);
+
+  return {
+    angularJsonPath,
+    projectRoot,
+    projectName,
+    sourceRoot,
+    builderType,
+    packageManager,
+  };
+}
+
+function detectPackageManager(root: string): 'pnpm' | 'yarn' | 'npm' {
+  if (existsSync(join(root, 'pnpm-lock.yaml'))) return 'pnpm';
+  if (existsSync(join(root, 'yarn.lock'))) return 'yarn';
+  return 'npm';
+}

package/packages/angular-grab/src/cli/utils/modify-angular-json.ts

@@ -0,0 +1,42 @@
+import { readFileSync, writeFileSync } from 'fs';
+
+export function modifyAngularJson(angularJsonPath: string, projectName: string): boolean {
+  const raw = readFileSync(angularJsonPath, 'utf8');
+  const angularJson = JSON.parse(raw);
+
+  const project = angularJson.projects?.[projectName];
+  const targets = project?.architect || project?.targets;
+  if (!targets) return false;
+
+  let modified = false;
+
+  const buildTarget = targets.build;
+  if (buildTarget?.builder) {
+    const currentBuilder: string = buildTarget.builder;
+    if (
+      currentBuilder === '@angular/build:application' ||
+      currentBuilder === '@angular-devkit/build-angular:application'
+    ) {
+      buildTarget.builder = 'angular-grab:application';
+      modified = true;
+    }
+  }
+
+  const serveTarget = targets.serve;
+  if (serveTarget?.builder) {
+    const currentBuilder: string = serveTarget.builder;
+    if (
+      currentBuilder === '@angular/build:dev-server' ||
+      currentBuilder === '@angular-devkit/build-angular:dev-server'
+    ) {
+      serveTarget.builder = 'angular-grab:dev-server';
+      modified = true;
+    }
+  }
+
+  if (modified) {
+    writeFileSync(angularJsonPath, JSON.stringify(angularJson, null, 2) + '\n', 'utf8');
+  }
+
+  return modified;
+}

package/packages/angular-grab/src/cli/utils/modify-app-config.ts

@@ -0,0 +1,42 @@
+import { readFileSync, writeFileSync, existsSync } from 'fs';
+import { join } from 'path';
+
+export function modifyAppConfig(projectRoot: string, sourceRoot: string): boolean {
+  const configPath = join(projectRoot, sourceRoot, 'app', 'app.config.ts');
+  if (!existsSync(configPath)) return false;
+
+  let content = readFileSync(configPath, 'utf8');
+
+  // Skip if already has provideAngularGrab
+  if (content.includes('provideAngularGrab')) return false;
+
+  // Add import for provideAngularGrab
+  const importStatement = "import { provideAngularGrab } from 'angular-grab/angular';";
+
+  // Find the last import block end by matching `from '...'` or `from "..."` lines
+  const lines = content.split('\n');
+  let lastImportEndIndex = -1;
+  for (let i = 0; i < lines.length; i++) {
+    const trimmed = lines[i].trimStart();
+    if (trimmed.startsWith('import ') || /\}\s*from\s+['"]/.test(trimmed) || /from\s+['"]/.test(trimmed)) {
+      lastImportEndIndex = i;
+    }
+  }
+
+  if (lastImportEndIndex >= 0) {
+    lines.splice(lastImportEndIndex + 1, 0, importStatement);
+    content = lines.join('\n');
+  } else {
+    content = importStatement + '\n' + content;
+  }
+
+  // Try to add provideAngularGrab() to the providers array
+  const providersMatch = content.match(/providers\s*:\s*\[/);
+  if (providersMatch && providersMatch.index != null) {
+    const insertPos = providersMatch.index + providersMatch[0].length;
+    content = content.slice(0, insertPos) + '\n    provideAngularGrab(),' + content.slice(insertPos);
+  }
+
+  writeFileSync(configPath, content, 'utf8');
+  return true;
+}

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

@@ -0,0 +1,149 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from 'vitest';
+import { generateSnippet } from '../clipboard/generate-snippet';
+import type { ElementContext, ComponentStackEntry } from '../types';
+
+function makeContext(overrides: Partial<ElementContext> = {}): ElementContext {
+  return {
+    element: document.createElement('div'),
+    html: '<div>hello</div>',
+    componentName: null,
+    filePath: null,
+    line: null,
+    column: null,
+    componentStack: [],
+    selector: 'div',
+    cssClasses: [],
+    ...overrides,
+  };
+}
+
+describe('generateSnippet', () => {
+  it('generates HTML-only snippet when no component info', () => {
+    const ctx = makeContext({ html: '<button>Click</button>' });
+    const result = generateSnippet(ctx, 20);
+    expect(result).toBe('<button>Click</button>');
+  });
+
+  it('includes component name and file path', () => {
+    const ctx = makeContext({
+      html: '<div>test</div>',
+      componentName: 'AppComponent',
+      filePath: 'src/app/app.component.ts',
+      line: 10,
+      column: 5,
+    });
+    const result = generateSnippet(ctx, 20);
+
+    expect(result).toContain('<div>test</div>');
+    expect(result).toContain('in AppComponent');
+    expect(result).toContain('at src/app/app.component.ts:10:5');
+  });
+
+  it('includes component name without file path', () => {
+    const ctx = makeContext({ componentName: 'MyComponent' });
+    const result = generateSnippet(ctx, 20);
+
+    expect(result).toContain('in MyComponent');
+    expect(result).not.toContain('at');
+  });
+
+  it('includes file path without component name', () => {
+    const ctx = makeContext({
+      filePath: 'src/app.ts',
+      line: 5,
+    });
+    const result = generateSnippet(ctx, 20);
+
+    expect(result).toContain('at src/app.ts:5');
+    expect(result).not.toContain('in ');
+  });
+
+  it('includes component stack trace', () => {
+    const stack: ComponentStackEntry[] = [
+      { name: 'ChildComponent', filePath: 'src/child.ts', line: 3, column: 1 },
+      { name: 'ParentComponent', filePath: 'src/parent.ts', line: 10, column: null },
+      { name: 'AppComponent', filePath: 'src/app.ts', line: null, column: null },
+    ];
+    const ctx = makeContext({
+      html: '<span>hi</span>',
+      componentStack: stack,
+    });
+    const result = generateSnippet(ctx, 20);
+
+    expect(result).toContain('in ChildComponent at src/child.ts:3:1');
+    expect(result).toContain('in ParentComponent at src/parent.ts:10');
+    expect(result).toContain('in AppComponent at src/app.ts');
+  });
+
+  it('prefers component stack over componentName/filePath', () => {
+    const stack: ComponentStackEntry[] = [
+      { name: 'Inner', filePath: 'inner.ts', line: 1, column: null },
+    ];
+    const ctx = makeContext({
+      componentName: 'Outer',
+      filePath: 'outer.ts',
+      line: 99,
+      column: null,
+      componentStack: stack,
+    });
+    const result = generateSnippet(ctx, 20);
+
+    expect(result).toContain('in Inner at inner.ts:1');
+    expect(result).not.toContain('Outer');
+  });
+
+  it('respects maxLines truncation', () => {
+    const multilineHtml = Array.from({ length: 10 }, (_, i) => `  <line${i}/>`).join('\n');
+    const ctx = makeContext({ html: multilineHtml });
+    const result = generateSnippet(ctx, 3);
+
+    const lines = result.split('\n');
+    // 3 HTML lines + "  ..." truncation line
+    expect(lines.length).toBe(4);
+    expect(lines[3]).toBe('  ...');
+  });
+
+  it('does not truncate when HTML is within maxLines', () => {
+    const html = '<div>\n  <span>hi</span>\n</div>';
+    const ctx = makeContext({ html });
+    const result = generateSnippet(ctx, 10);
+
+    expect(result).not.toContain('...');
+    expect(result).toBe(html);
+  });
+
+  it('cleans Angular attributes from HTML', () => {
+    const html = '<div _nghost-abc-123="">content</div>';
+    const ctx = makeContext({ html });
+    const result = generateSnippet(ctx, 20);
+
+    expect(result).toBe('<div>content</div>');
+    expect(result).not.toContain('_nghost');
+  });
+
+  it('handles null fields gracefully', () => {
+    const ctx = makeContext({
+      componentName: null,
+      filePath: null,
+      line: null,
+      column: null,
+      componentStack: [],
+    });
+    const result = generateSnippet(ctx, 20);
+
+    // Should just be the HTML, no location info
+    expect(result).toBe('<div>hello</div>');
+  });
+
+  it('handles stack entry with null filePath', () => {
+    const stack: ComponentStackEntry[] = [
+      { name: 'Comp', filePath: null, line: null, column: null },
+    ];
+    const ctx = makeContext({ componentStack: stack });
+    const result = generateSnippet(ctx, 20);
+
+    expect(result).toContain('in Comp');
+    expect(result).not.toContain('at');
+  });
+});

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);
+    });
+  });
+});