angular-grab 0.1.1 → 0.1.2

package/packages/angular-grab/src/cli/__tests__/cli.test.ts

@@ -0,0 +1,239 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mkdtempSync, writeFileSync, mkdirSync, rmSync } from 'fs';
+import { join } from 'path';
+import { tmpdir } from 'os';
+import { findAngularJson, detectProject } from '../utils/detect-project';
+
+describe('findAngularJson', () => {
+  let tempDir: string;
+
+  beforeEach(() => {
+    tempDir = mkdtempSync(join(tmpdir(), 'cli-test-'));
+  });
+
+  afterEach(() => {
+    rmSync(tempDir, { recursive: true, force: true });
+  });
+
+  it('finds angular.json in the given directory', () => {
+    writeFileSync(join(tempDir, 'angular.json'), '{}');
+    const result = findAngularJson(tempDir);
+    expect(result).toBe(join(tempDir, 'angular.json'));
+  });
+
+  it('finds angular.json in a parent directory', () => {
+    writeFileSync(join(tempDir, 'angular.json'), '{}');
+    const subDir = join(tempDir, 'src', 'app');
+    mkdirSync(subDir, { recursive: true });
+
+    const result = findAngularJson(subDir);
+    expect(result).toBe(join(tempDir, 'angular.json'));
+  });
+
+  it('returns null when no angular.json exists', () => {
+    const result = findAngularJson(tempDir);
+    expect(result).toBeNull();
+  });
+});
+
+describe('detectProject', () => {
+  let tempDir: string;
+
+  beforeEach(() => {
+    tempDir = mkdtempSync(join(tmpdir(), 'cli-test-'));
+  });
+
+  afterEach(() => {
+    rmSync(tempDir, { recursive: true, force: true });
+  });
+
+  function writeAngularJson(content: object): string {
+    const path = join(tempDir, 'angular.json');
+    writeFileSync(path, JSON.stringify(content));
+    return path;
+  }
+
+  it('detects project name from angular.json', () => {
+    const path = writeAngularJson({
+      projects: {
+        'my-app': {
+          sourceRoot: 'src',
+          architect: {
+            build: { builder: '@angular/build:application' },
+          },
+        },
+      },
+    });
+
+    const info = detectProject(path);
+    expect(info.projectName).toBe('my-app');
+  });
+
+  it('detects "application" builder type', () => {
+    const path = writeAngularJson({
+      projects: {
+        app: {
+          architect: {
+            build: { builder: '@angular/build:application' },
+          },
+        },
+      },
+    });
+
+    const info = detectProject(path);
+    expect(info.builderType).toBe('application');
+  });
+
+  it('detects "browser-esbuild" builder type', () => {
+    const path = writeAngularJson({
+      projects: {
+        app: {
+          architect: {
+            build: { builder: '@angular-devkit/build-angular:browser-esbuild' },
+          },
+        },
+      },
+    });
+
+    const info = detectProject(path);
+    expect(info.builderType).toBe('browser-esbuild');
+  });
+
+  it('detects "browser" builder type', () => {
+    const path = writeAngularJson({
+      projects: {
+        app: {
+          architect: {
+            build: { builder: '@angular-devkit/build-angular:browser' },
+          },
+        },
+      },
+    });
+
+    const info = detectProject(path);
+    expect(info.builderType).toBe('browser');
+  });
+
+  it('detects angular-grab:application as "application"', () => {
+    const path = writeAngularJson({
+      projects: {
+        app: {
+          architect: {
+            build: { builder: 'angular-grab:application' },
+          },
+        },
+      },
+    });
+
+    const info = detectProject(path);
+    expect(info.builderType).toBe('application');
+  });
+
+  it('defaults sourceRoot to "src" when not specified', () => {
+    const path = writeAngularJson({
+      projects: {
+        app: {
+          architect: {
+            build: { builder: '@angular/build:application' },
+          },
+        },
+      },
+    });
+
+    const info = detectProject(path);
+    expect(info.sourceRoot).toBe('src');
+  });
+
+  it('uses custom sourceRoot when specified', () => {
+    const path = writeAngularJson({
+      projects: {
+        app: {
+          sourceRoot: 'projects/app/src',
+          architect: {
+            build: { builder: '@angular/build:application' },
+          },
+        },
+      },
+    });
+
+    const info = detectProject(path);
+    expect(info.sourceRoot).toBe('projects/app/src');
+  });
+
+  it('throws when no projects are found', () => {
+    const path = writeAngularJson({ projects: {} });
+    expect(() => detectProject(path)).toThrow('No projects found');
+  });
+
+  it('throws when no build target is found', () => {
+    const path = writeAngularJson({
+      projects: {
+        app: { architect: {} },
+      },
+    });
+
+    expect(() => detectProject(path)).toThrow('No build target found');
+  });
+
+  it('detects npm as default package manager', () => {
+    const path = writeAngularJson({
+      projects: {
+        app: {
+          architect: {
+            build: { builder: '@angular/build:application' },
+          },
+        },
+      },
+    });
+
+    const info = detectProject(path);
+    expect(info.packageManager).toBe('npm');
+  });
+
+  it('detects pnpm when pnpm-lock.yaml exists', () => {
+    writeFileSync(join(tempDir, 'pnpm-lock.yaml'), '');
+    const path = writeAngularJson({
+      projects: {
+        app: {
+          architect: {
+            build: { builder: '@angular/build:application' },
+          },
+        },
+      },
+    });
+
+    const info = detectProject(path);
+    expect(info.packageManager).toBe('pnpm');
+  });
+
+  it('detects yarn when yarn.lock exists', () => {
+    writeFileSync(join(tempDir, 'yarn.lock'), '');
+    const path = writeAngularJson({
+      projects: {
+        app: {
+          architect: {
+            build: { builder: '@angular/build:application' },
+          },
+        },
+      },
+    });
+
+    const info = detectProject(path);
+    expect(info.packageManager).toBe('yarn');
+  });
+
+  it('supports "targets" as an alternative to "architect"', () => {
+    const path = writeAngularJson({
+      projects: {
+        app: {
+          targets: {
+            build: { builder: '@angular/build:application' },
+          },
+        },
+      },
+    });
+
+    const info = detectProject(path);
+    expect(info.builderType).toBe('application');
+  });
+});

package/packages/angular-grab/src/cli/commands/init.ts

@@ -0,0 +1,106 @@
+import { execSync } from 'child_process';
+import { findAngularJson, detectProject, type ProjectInfo } from '../utils/detect-project';
+import { modifyAngularJson } from '../utils/modify-angular-json';
+import { modifyAppConfig } from '../utils/modify-app-config';
+
+const PACKAGES = ['angular-grab'];
+
+function log(msg: string): void {
+  console.log(`\x1b[36m[angular-grab]\x1b[0m ${msg}`);
+}
+
+function warn(msg: string): void {
+  console.log(`\x1b[33m[angular-grab]\x1b[0m ${msg}`);
+}
+
+function getInstallCommand(pm: ProjectInfo['packageManager']): string {
+  const deps = PACKAGES.join(' ');
+  switch (pm) {
+    case 'pnpm':
+      return `pnpm add -D ${deps}`;
+    case 'yarn':
+      return `yarn add -D ${deps}`;
+    default:
+      return `npm install -D ${deps}`;
+  }
+}
+
+export async function init(): Promise<void> {
+  log('Initializing angular-grab...\n');
+
+  // 1. Find angular.json
+  const angularJsonPath = findAngularJson();
+  if (!angularJsonPath) {
+    throw new Error(
+      'Could not find angular.json. Are you in an Angular project directory?',
+    );
+  }
+
+  // 2. Detect project info
+  const info = detectProject(angularJsonPath);
+  log(`Found project: ${info.projectName}`);
+  log(`Builder type: ${info.builderType}`);
+  log(`Package manager: ${info.packageManager}`);
+  console.log('');
+
+  // 3. Reject legacy builders
+  if (info.builderType === 'browser') {
+    throw new Error(
+      'angular-grab requires the "application" builder (Angular 17+).\n' +
+      'Please migrate from "@angular-devkit/build-angular:browser" to "@angular/build:application".\n' +
+      'See: https://angular.dev/tools/cli/build-system-migration',
+    );
+  }
+
+  if (info.builderType === 'browser-esbuild') {
+    throw new Error(
+      'angular-grab requires the "application" builder, not the transitional "browser-esbuild" builder.\n' +
+      'Please migrate from "@angular-devkit/build-angular:browser-esbuild" to "@angular/build:application".\n' +
+      'See: https://angular.dev/tools/cli/build-system-migration',
+    );
+  }
+
+  // 4. Install packages
+  log('Installing packages...');
+  const installCmd = getInstallCommand(info.packageManager);
+  try {
+    execSync(installCmd, {
+      cwd: info.projectRoot,
+      stdio: 'inherit',
+    });
+  } catch {
+    warn('Package installation failed. You may need to install manually:');
+    warn(`  ${installCmd}`);
+    console.log('');
+  }
+
+  // 5. Modify angular.json
+  log('Updating angular.json...');
+  const jsonModified = modifyAngularJson(info.angularJsonPath, info.projectName);
+  if (jsonModified) {
+    log('  Swapped builders to angular-grab');
+  } else {
+    warn('  angular.json builders were already configured or could not be modified');
+  }
+
+  // 6. Try to add provideAngularGrab() to app config
+  log('Updating app.config.ts...');
+  const configModified = modifyAppConfig(info.projectRoot, info.sourceRoot);
+  if (configModified) {
+    log('  Added provideAngularGrab() to providers');
+  } else {
+    warn('  Could not modify app.config.ts (already configured or not found)');
+    warn('  Please add manually:');
+    warn("    import { provideAngularGrab } from 'angular-grab/angular';");
+    warn('    // then add provideAngularGrab() to your providers array');
+  }
+
+  console.log('');
+  log('\x1b[32mDone!\x1b[0m angular-grab is ready.');
+  console.log('');
+  console.log('  Next steps:');
+  console.log('    1. Run \x1b[1mng serve\x1b[0m');
+  console.log('    2. Hold \x1b[1mCmd+C\x1b[0m (Mac) or \x1b[1mCtrl+C\x1b[0m (Windows) and hover over elements');
+  console.log('    3. Click to copy element context to clipboard');
+  console.log('');
+}

package/packages/angular-grab/src/cli/index.ts

@@ -0,0 +1,15 @@
+import { init } from './commands/init';
+
+const args = process.argv.slice(2);
+const command = args[0];
+
+if (command === 'init' || !command) {
+  init().catch((err) => {
+    console.error('\x1b[31mError:\x1b[0m', err.message);
+    process.exit(1);
+  });
+} else {
+  console.error(`Unknown command: ${command}`);
+  console.log('\nUsage: npx angular-grab init');
+  process.exit(1);
+}

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