angular-grab 0.1.1 → 0.1.3

package/package.json

@@ -1,119 +1,22 @@
 {
   "name": "angular-grab",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Grab any element in your Angular app and give it to AI coding agents",
-  "author": "Nate Richardson",
+  "author": "Nate Richardson <hello@naterichardson.com>",
   "license": "MIT",
-  "type": "module",
-  "publishConfig": {
-    "access": "public"
+  "engines": {
+    "node": ">=18"
   },
-  "main": "./dist/core/index.cjs",
-  "module": "./dist/core/index.js",
-  "types": "./dist/core/index.d.ts",
-  "bin": {
-    "angular-grab": "./dist/cli/index.js"
-  },
-  "builders": "./builders.json",
-  "exports": {
-    ".": {
-      "types": "./dist/core/index.d.ts",
-      "import": "./dist/core/index.js",
-      "require": "./dist/core/index.cjs"
-    },
-    "./global": "./dist/core/index.global.js",
-    "./angular": {
-      "types": "./dist/angular/index.d.ts",
-      "import": "./dist/angular/index.js"
-    },
-    "./esbuild": {
-      "types": "./dist/esbuild-plugin/index.d.ts",
-      "import": "./dist/esbuild-plugin/index.js",
-      "require": "./dist/esbuild-plugin/index.cjs"
-    },
-    "./vite": {
-      "types": "./dist/vite-plugin/index.d.ts",
-      "import": "./dist/vite-plugin/index.js"
-    },
-    "./webpack": {
-      "types": "./dist/webpack-plugin/index.d.ts",
-      "import": "./dist/webpack-plugin/index.js",
-      "require": "./dist/webpack-plugin/index.cjs"
-    },
-    "./webpack/loader": {
-      "import": "./dist/webpack-plugin/loader.js",
-      "require": "./dist/webpack-plugin/loader.cjs"
-    },
-    "./builder": {
-      "require": "./dist/builder/index.js"
-    },
-    "./builders.json": "./builders.json",
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist",
-    "builders.json"
-  ],
-  "peerDependencies": {
-    "@angular/core": ">=19.0.0",
-    "@angular/build": ">=18.0.0",
-    "@angular-devkit/architect": ">=0.1800.0",
-    "esbuild": ">=0.17.0",
-    "typescript": ">=5.0.0",
-    "vite": ">=5.0.0",
-    "webpack": ">=5.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@angular/core": {
-      "optional": true
-    },
-    "@angular/build": {
-      "optional": true
-    },
-    "@angular-devkit/architect": {
-      "optional": true
-    },
-    "esbuild": {
-      "optional": true
-    },
-    "vite": {
-      "optional": true
-    },
-    "webpack": {
-      "optional": true
-    }
+  "packageManager": "pnpm@9.15.0",
+  "scripts": {
+    "build": "turbo run build",
+    "dev": "turbo run dev",
+    "test": "turbo run test",
+    "lint": "turbo run lint",
+    "clean": "turbo run clean"
   },
   "devDependencies": {
-    "@angular/core": "^21.0.0",
-    "@angular/build": "^21.1.1",
-    "@angular-devkit/architect": "^0.2101.1",
-    "esbuild": "^0.21.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.4.0",
-    "vite": "^5.0.0",
-    "vitest": "^2.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/naterchrdsn/angular-grab.git",
-    "directory": "packages/angular-grab"
-  },
-  "homepage": "https://github.com/naterchrdsn/angular-grab",
-  "bugs": "https://github.com/naterchrdsn/angular-grab/issues",
-  "keywords": [
-    "angular",
-    "angular-grab",
-    "element-picker",
-    "developer-tools",
-    "ai",
-    "esbuild",
-    "vite",
-    "webpack"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "test": "vitest run",
-    "clean": "rm -rf dist"
+    "@types/node": "^25.3.4",
+    "turbo": "^2.8.13"
   }
-}
+}

package/packages/angular-grab/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "angular-grab",
+  "version": "0.1.2",
+  "description": "Grab any element in your Angular app and give it to AI coding agents",
+  "author": "Nate Richardson",
+  "license": "MIT",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/core/index.cjs",
+  "module": "./dist/core/index.js",
+  "types": "./dist/core/index.d.ts",
+  "bin": {
+    "angular-grab": "./dist/cli/index.js"
+  },
+  "builders": "./builders.json",
+  "exports": {
+    ".": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core/index.js",
+      "require": "./dist/core/index.cjs"
+    },
+    "./global": "./dist/core/index.global.js",
+    "./angular": {
+      "types": "./dist/angular/index.d.ts",
+      "import": "./dist/angular/index.js"
+    },
+    "./esbuild": {
+      "types": "./dist/esbuild-plugin/index.d.ts",
+      "import": "./dist/esbuild-plugin/index.js",
+      "require": "./dist/esbuild-plugin/index.cjs"
+    },
+    "./vite": {
+      "types": "./dist/vite-plugin/index.d.ts",
+      "import": "./dist/vite-plugin/index.js"
+    },
+    "./webpack": {
+      "types": "./dist/webpack-plugin/index.d.ts",
+      "import": "./dist/webpack-plugin/index.js",
+      "require": "./dist/webpack-plugin/index.cjs"
+    },
+    "./webpack/loader": {
+      "import": "./dist/webpack-plugin/loader.js",
+      "require": "./dist/webpack-plugin/loader.cjs"
+    },
+    "./builder": {
+      "require": "./dist/builder/index.js"
+    },
+    "./builders.json": "./builders.json",
+    "./package.json": "./package.json"
+  },
+  "files": ["dist", "builders.json", "README.md"],
+  "scripts": {
+    "prebuild": "cp ../../README.md .",
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "clean": "rm -rf dist README.md"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=19.0.0",
+    "@angular/build": ">=18.0.0",
+    "@angular-devkit/architect": ">=0.1800.0",
+    "esbuild": ">=0.17.0",
+    "typescript": ">=5.0.0",
+    "vite": ">=5.0.0",
+    "webpack": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@angular/core": { "optional": true },
+    "@angular/build": { "optional": true },
+    "@angular-devkit/architect": { "optional": true },
+    "esbuild": { "optional": true },
+    "vite": { "optional": true },
+    "webpack": { "optional": true }
+  },
+  "devDependencies": {
+    "@angular/core": "^21.0.0",
+    "@angular/build": "^21.1.1",
+    "@angular-devkit/architect": "^0.2101.1",
+    "esbuild": "^0.21.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0",
+    "vite": "^5.0.0",
+    "vitest": "^2.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/naterchrdsn/angular-grab.git",
+    "directory": "packages/angular-grab"
+  },
+  "homepage": "https://angular-grab.com",
+  "bugs": "https://github.com/naterchrdsn/angular-grab/issues",
+  "keywords": ["angular", "angular-grab", "element-picker", "developer-tools", "ai", "esbuild", "vite", "webpack"]
+}

package/packages/angular-grab/src/angular/__tests__/context-builder.test.ts

@@ -0,0 +1,216 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type { ComponentStackEntry } from '../../core';
+
+vi.mock('../resolvers/component-resolver', () => ({
+  resolveComponent: vi.fn(),
+}));
+
+vi.mock('../resolvers/source-resolver', () => ({
+  resolveSource: vi.fn(),
+  resolveSourceForComponent: vi.fn(),
+}));
+
+import { buildContext } from '../resolvers/context-builder';
+import { resolveComponent } from '../resolvers/component-resolver';
+import { resolveSource, resolveSourceForComponent } from '../resolvers/source-resolver';
+
+const mockedResolveComponent = vi.mocked(resolveComponent);
+const mockedResolveSource = vi.mocked(resolveSource);
+const mockedResolveSourceForComponent = vi.mocked(resolveSourceForComponent);
+
+beforeEach(() => {
+  vi.clearAllMocks();
+
+  mockedResolveComponent.mockReturnValue({
+    name: null,
+    hostElement: null,
+    stack: [],
+  });
+
+  mockedResolveSource.mockReturnValue({
+    filePath: null,
+    line: null,
+    column: null,
+  });
+
+  mockedResolveSourceForComponent.mockReturnValue({
+    filePath: null,
+    line: null,
+    column: null,
+  });
+});
+
+describe('buildContext', () => {
+  it('produces correct ElementContext shape', () => {
+    const el = document.createElement('div');
+    el.innerHTML = 'hello';
+
+    const ctx = buildContext(el);
+
+    expect(ctx).toEqual(
+      expect.objectContaining({
+        element: el,
+        html: expect.any(String),
+        componentName: null,
+        filePath: null,
+        line: null,
+        column: null,
+        componentStack: [],
+        selector: expect.any(String),
+        cssClasses: expect.any(Array),
+      }),
+    );
+  });
+
+  it('includes component name from resolver', () => {
+    mockedResolveComponent.mockReturnValue({
+      name: 'MyComponent',
+      hostElement: null,
+      stack: [],
+    });
+
+    const el = document.createElement('div');
+    const ctx = buildContext(el);
+
+    expect(ctx.componentName).toBe('MyComponent');
+  });
+
+  it('includes file path from source resolver', () => {
+    mockedResolveSource.mockReturnValue({
+      filePath: 'src/app/app.component.ts',
+      line: 42,
+      column: 3,
+    });
+
+    const el = document.createElement('div');
+    const ctx = buildContext(el);
+
+    expect(ctx.filePath).toBe('src/app/app.component.ts');
+    expect(ctx.line).toBe(42);
+    expect(ctx.column).toBe(3);
+  });
+
+  it('builds component stack from resolver stack', () => {
+    mockedResolveComponent.mockReturnValue({
+      name: 'Child',
+      hostElement: null,
+      stack: [
+        { name: 'Child', hostElement: null },
+        { name: 'Parent', hostElement: null },
+      ],
+    });
+    mockedResolveSourceForComponent
+      .mockReturnValueOnce({ filePath: 'child.ts', line: 5, column: null })
+      .mockReturnValueOnce({ filePath: 'parent.ts', line: 20, column: null });
+
+    const el = document.createElement('div');
+    const ctx = buildContext(el);
+
+    expect(ctx.componentStack).toHaveLength(2);
+    expect(ctx.componentStack[0]).toEqual({
+      name: 'Child',
+      filePath: 'child.ts',
+      line: 5,
+      column: null,
+    });
+    expect(ctx.componentStack[1]).toEqual({
+      name: 'Parent',
+      filePath: 'parent.ts',
+      line: 20,
+      column: null,
+    });
+  });
+
+  it('truncates long HTML with truncation marker', () => {
+    const el = document.createElement('div');
+    // Create content longer than MAX_HTML_LENGTH (2000)
+    el.textContent = 'x'.repeat(2100);
+
+    const ctx = buildContext(el);
+
+    expect(ctx.html.length).toBeLessThanOrEqual(2000 + '<!-- truncated -->'.length);
+    expect(ctx.html).toContain('<!-- truncated -->');
+  });
+
+  it('does not truncate short HTML', () => {
+    const el = document.createElement('div');
+    el.textContent = 'short';
+
+    const ctx = buildContext(el);
+
+    expect(ctx.html).not.toContain('<!-- truncated -->');
+    expect(ctx.html).toContain('short');
+  });
+
+  it('generates CSS selector for element', () => {
+    const el = document.createElement('div');
+    el.id = 'myid';
+    document.body.appendChild(el);
+
+    const ctx = buildContext(el);
+    expect(ctx.selector).toContain('div#myid');
+
+    document.body.removeChild(el);
+  });
+
+  it('generates selector with classes', () => {
+    const el = document.createElement('span');
+    el.className = 'foo bar';
+    document.body.appendChild(el);
+
+    const ctx = buildContext(el);
+    expect(ctx.selector).toContain('span.foo.bar');
+
+    document.body.removeChild(el);
+  });
+
+  it('generates selector with nth-of-type for siblings', () => {
+    const parent = document.createElement('div');
+    const child1 = document.createElement('span');
+    const child2 = document.createElement('span');
+    parent.appendChild(child1);
+    parent.appendChild(child2);
+    document.body.appendChild(parent);
+
+    const ctx = buildContext(child2);
+    expect(ctx.selector).toContain('nth-of-type(2)');
+
+    document.body.removeChild(parent);
+  });
+
+  it('filters out Angular CSS classes', () => {
+    const el = document.createElement('div');
+    el.classList.add('my-class', 'ng-star-inserted', '_ngcontent-abc', 'real-class');
+
+    const ctx = buildContext(el);
+
+    expect(ctx.cssClasses).toContain('my-class');
+    expect(ctx.cssClasses).toContain('real-class');
+    expect(ctx.cssClasses).not.toContain('ng-star-inserted');
+    expect(ctx.cssClasses).not.toContain('_ngcontent-abc');
+  });
+
+  it('handles element with no classes', () => {
+    const el = document.createElement('div');
+    const ctx = buildContext(el);
+    expect(ctx.cssClasses).toEqual([]);
+  });
+
+  it('stops selector at element with id', () => {
+    const grandparent = document.createElement('section');
+    const parent = document.createElement('div');
+    parent.id = 'stop-here';
+    const child = document.createElement('span');
+    grandparent.appendChild(parent);
+    parent.appendChild(child);
+    document.body.appendChild(grandparent);
+
+    const ctx = buildContext(child);
+    // The selector should start from div#stop-here because id terminates the walk
+    expect(ctx.selector).toContain('div#stop-here');
+    expect(ctx.selector).toContain('span');
+
+    document.body.removeChild(grandparent);
+  });
+});

package/packages/angular-grab/src/angular/angular-grab.service.ts

@@ -0,0 +1,62 @@
+import { init } from '../core';
+import type { AngularGrabAPI, AngularGrabOptions, Plugin } from '../core';
+import { resolveComponent } from './resolvers/component-resolver';
+import { resolveSource } from './resolvers/source-resolver';
+
+declare const ngDevMode: boolean | undefined;
+
+let instance: AngularGrabAPI | null = null;
+
+/**
+ * Initialize angular-grab. Registers Angular-specific component and source
+ * resolvers, then returns the API handle. Idempotent — subsequent calls
+ * return the same instance.
+ */
+export function initAngularGrab(options?: Partial<AngularGrabOptions>): AngularGrabAPI {
+  if (instance) return instance;
+
+  // No-op in production
+  if (options?.devOnly !== false && typeof ngDevMode !== 'undefined' && !ngDevMode) {
+    instance = createNoOpApi();
+    return instance;
+  }
+
+  instance = init(options);
+  instance.setComponentResolver((el) => resolveComponent(el));
+  instance.setSourceResolver((el) => resolveSource(el));
+
+  return instance;
+}
+
+export function getAngularGrabApi(): AngularGrabAPI | null {
+  return instance;
+}
+
+export function registerAngularGrabPlugin(plugin: Plugin): void {
+  instance?.registerPlugin(plugin);
+}
+
+export function disposeAngularGrab(): void {
+  instance?.dispose();
+  instance = null;
+}
+
+function createNoOpApi(): AngularGrabAPI {
+  return {
+    activate() {},
+    deactivate() {},
+    toggle() {},
+    isActive() { return false; },
+    setOptions() {},
+    registerPlugin() {},
+    unregisterPlugin() {},
+    setComponentResolver() {},
+    setSourceResolver() {},
+    showToolbar() {},
+    hideToolbar() {},
+    setThemeMode() {},
+    getHistory() { return []; },
+    clearHistory() {},
+    dispose() {},
+  };
+}

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

@@ -0,0 +1,13 @@
+// Resolvers
+export { resolveComponent } from './resolvers/component-resolver';
+export { resolveSource } from './resolvers/source-resolver';
+export { buildContext } from './resolvers/context-builder';
+
+// Angular integration
+export {
+  initAngularGrab,
+  getAngularGrabApi,
+  registerAngularGrabPlugin,
+  disposeAngularGrab,
+} from './angular-grab.service';
+export { provideAngularGrab, ANGULAR_GRAB_API } from './provide-angular-grab';

package/packages/angular-grab/src/angular/provide-angular-grab.ts

@@ -0,0 +1,22 @@
+import {
+  InjectionToken,
+  makeEnvironmentProviders,
+  provideEnvironmentInitializer,
+  type EnvironmentProviders,
+} from '@angular/core';
+import type { AngularGrabOptions, AngularGrabAPI } from '../core';
+import { initAngularGrab } from './angular-grab.service';
+
+export const ANGULAR_GRAB_API = new InjectionToken<AngularGrabAPI>('ANGULAR_GRAB_API');
+
+export function provideAngularGrab(
+  options?: Partial<AngularGrabOptions>,
+): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    {
+      provide: ANGULAR_GRAB_API,
+      useFactory: () => initAngularGrab(options),
+    },
+    provideEnvironmentInitializer(() => initAngularGrab(options)),
+  ]);
+}

package/packages/angular-grab/src/angular/resolvers/component-resolver.ts

@@ -0,0 +1,71 @@
+import { getNgApi, cleanComponentName } from './ng-utils';
+
+export function resolveComponent(element: Element): {
+  name: string | null;
+  hostElement: Element | null;
+  stack: Array<{ name: string; hostElement: Element | null }>;
+} {
+  const ng = getNgApi();
+  if (!ng) return { name: null, hostElement: null, stack: [] };
+
+  const stack: Array<{ name: string; hostElement: Element | null }> = [];
+  const seen = new Set<any>();
+
+  // Walk up the DOM collecting every Angular component
+  let current: Element | null = element;
+  while (current) {
+    const comp = ng.getComponent(current);
+    if (comp && !seen.has(comp)) {
+      seen.add(comp);
+      stack.push({
+        name: cleanComponentName(comp.constructor.name),
+        hostElement: current,
+      });
+    }
+    current = current.parentElement;
+  }
+
+  // If no direct component found, try getOwningComponent for the original element
+  if (stack.length === 0) {
+    let walk: Element | null = element;
+    while (walk) {
+      const owning = ng.getOwningComponent(walk);
+      if (owning && !seen.has(owning)) {
+        seen.add(owning);
+        // Find the host element
+        let host: Element | null = walk.parentElement;
+        while (host) {
+          if (ng.getComponent(host) === owning) break;
+          host = host.parentElement;
+        }
+        stack.push({
+          name: cleanComponentName(owning.constructor.name),
+          hostElement: host ?? walk.parentElement,
+        });
+        // Continue walking from the host to collect parents
+        current = host?.parentElement ?? walk.parentElement?.parentElement ?? null;
+        while (current) {
+          const comp = ng.getComponent(current);
+          if (comp && !seen.has(comp)) {
+            seen.add(comp);
+            stack.push({
+              name: cleanComponentName(comp.constructor.name),
+              hostElement: current,
+            });
+          }
+          current = current.parentElement;
+        }
+        break;
+      }
+      walk = walk.parentElement;
+    }
+  }
+
+  const closest = stack.length > 0 ? stack[0] : { name: null, hostElement: null };
+
+  return {
+    name: closest.name,
+    hostElement: closest.hostElement,
+    stack,
+  };
+}