angular-grab 0.1.0 → 0.1.2

package/packages/angular-grab/src/esbuild-plugin/__tests__/transform.test.ts

@@ -0,0 +1,174 @@
+import { describe, it, expect } from 'vitest';
+import { transformAngularComponent } from '../transform';
+
+const ROOT_DIR = '/project';
+
+function transform(code: string, filePath = '/project/src/app/example.component.ts') {
+  return transformAngularComponent(code, filePath, ROOT_DIR);
+}
+
+describe('transformAngularComponent', () => {
+  it('adds host with data-ng-source to a basic component', () => {
+    const input = `@Component({ selector: 'app-example', templateUrl: './example.component.html' })
+export class ExampleComponent {}`;
+
+    const result = transform(input);
+    expect(result).not.toBeNull();
+    expect(result!.code).toContain("host: { 'data-ng-source': 'src/app/example.component.ts:0:0' }");
+    expect(result!.code).toContain('@Component(');
+  });
+
+  it('merges into an existing host property', () => {
+    const input = `@Component({
+  selector: 'app-example',
+  host: { 'class': 'block' }
+})
+export class ExampleComponent {}`;
+
+    const result = transform(input);
+    expect(result).not.toBeNull();
+    expect(result!.code).toContain("'class': 'block'");
+    expect(result!.code).toContain("'data-ng-source': 'src/app/example.component.ts:0:0'");
+  });
+
+  it('is idempotent — skips if data-ng-source already exists', () => {
+    const input = `@Component({
+  selector: 'app-example',
+  host: { 'data-ng-source': 'src/app/example.component.ts:0:0' }
+})
+export class ExampleComponent {}`;
+
+    const result = transform(input);
+    expect(result).toBeNull();
+  });
+
+  it('handles multiple components in one file', () => {
+    const input = `@Component({ selector: 'app-first' })
+export class FirstComponent {}
+
+@Component({ selector: 'app-second' })
+export class SecondComponent {}`;
+
+    const result = transform(input);
+    expect(result).not.toBeNull();
+
+    // Both should have data-ng-source with correct line numbers
+    expect(result!.code).toContain("'data-ng-source': 'src/app/example.component.ts:0:0'");
+    expect(result!.code).toContain("'data-ng-source': 'src/app/example.component.ts:3:0'");
+  });
+
+  it('returns null when no @Component decorator is present', () => {
+    const input = `export class PlainService {
+  constructor() {}
+}`;
+
+    const result = transform(input);
+    expect(result).toBeNull();
+  });
+
+  it('handles empty decorator object @Component({})', () => {
+    const input = `@Component({})
+export class EmptyComponent {}`;
+
+    const result = transform(input);
+    expect(result).not.toBeNull();
+    expect(result!.code).toContain("host: { 'data-ng-source': 'src/app/example.component.ts:0:0' }");
+  });
+
+  it('handles standalone component', () => {
+    const input = `@Component({
+  selector: 'app-standalone',
+  standalone: true,
+  template: '<p>hello</p>'
+})
+export class StandaloneComponent {}`;
+
+    const result = transform(input);
+    expect(result).not.toBeNull();
+    expect(result!.code).toContain('standalone: true');
+    expect(result!.code).toContain("host: { 'data-ng-source': 'src/app/example.component.ts:0:0' }");
+  });
+
+  it('uses correct line numbers (0-indexed)', () => {
+    const input = `import { Component } from '@angular/core';
+
+// Some comment
+@Component({ selector: 'app-offset' })
+export class OffsetComponent {}`;
+
+    const result = transform(input);
+    expect(result).not.toBeNull();
+    // Decorator is on line 3 (0-indexed)
+    expect(result!.code).toContain("'data-ng-source': 'src/app/example.component.ts:3:0'");
+  });
+
+  it('computes correct relative paths including nested directories', () => {
+    const filePath = '/project/src/app/features/auth/login/login.component.ts';
+    const input = `@Component({ selector: 'app-login', templateUrl: './login.component.html' })
+export class LoginComponent {}`;
+
+    const result = transformAngularComponent(input, filePath, ROOT_DIR);
+    expect(result).not.toBeNull();
+    expect(result!.code).toContain(
+      "'data-ng-source': 'src/app/features/auth/login/login.component.ts:0:0'",
+    );
+  });
+
+  it('handles component with inline template', () => {
+    const input = `@Component({
+  selector: 'app-inline',
+  template: \`
+    <div>
+      <h1>Hello</h1>
+    </div>
+  \`
+})
+export class InlineComponent {}`;
+
+    const result = transform(input);
+    expect(result).not.toBeNull();
+    expect(result!.code).toContain("host: { 'data-ng-source': 'src/app/example.component.ts:0:0' }");
+    // Ensure template is preserved
+    expect(result!.code).toContain('<h1>Hello</h1>');
+  });
+
+  it('handles empty decorator call @Component()', () => {
+    const input = `@Component()
+export class EmptyCallComponent {}`;
+
+    const result = transform(input);
+    expect(result).not.toBeNull();
+    expect(result!.code).toContain("host: { 'data-ng-source': 'src/app/example.component.ts:0:0' }");
+  });
+
+  it('preserves the rest of the file content', () => {
+    const input = `import { Component } from '@angular/core';
+
+@Component({ selector: 'app-test' })
+export class TestComponent {
+  title = 'hello';
+
+  greet(): string {
+    return this.title;
+  }
+}`;
+
+    const result = transform(input);
+    expect(result).not.toBeNull();
+    expect(result!.code).toContain("title = 'hello'");
+    expect(result!.code).toContain('greet(): string');
+    expect(result!.code).toContain('return this.title');
+  });
+
+  it('handles existing host with empty object', () => {
+    const input = `@Component({
+  selector: 'app-empty-host',
+  host: {}
+})
+export class EmptyHostComponent {}`;
+
+    const result = transform(input);
+    expect(result).not.toBeNull();
+    expect(result!.code).toContain("'data-ng-source': 'src/app/example.component.ts:0:0'");
+  });
+});

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

@@ -0,0 +1,3 @@
+export { angularGrabEsbuildPlugin } from './plugin';
+export { transformAngularComponent, type TransformResult } from './transform';
+export { scanComponentSources, type SourceMap, type ComponentSourceInfo } from './scan';

package/packages/angular-grab/src/esbuild-plugin/plugin.ts

@@ -0,0 +1,29 @@
+import type { Plugin } from 'esbuild';
+import { scanComponentSources } from './scan';
+
+export function angularGrabEsbuildPlugin(options?: {
+  rootDir?: string;
+  /** Set to false to disable the transform (e.g., in production). Default: true */
+  enabled?: boolean;
+}): Plugin {
+  return {
+    name: 'angular-grab',
+    setup(build) {
+      if (options?.enabled === false) return;
+
+      const rootDir = options?.rootDir || process.cwd();
+      const sourceMap = scanComponentSources(rootDir);
+
+      if (Object.keys(sourceMap).length === 0) return;
+
+      // Inject the source map as a global variable via banner
+      const json = JSON.stringify(sourceMap);
+      const banner = build.initialOptions.banner || {};
+      const existing = typeof banner === 'object' ? (banner.js || '') : '';
+      build.initialOptions.banner = {
+        ...(typeof banner === 'object' ? banner : {}),
+        js: `globalThis.__ANGULAR_GRAB_SOURCE_MAP__=${json};${existing}`,
+      };
+    },
+  };
+}

package/packages/angular-grab/src/esbuild-plugin/scan.ts

@@ -0,0 +1,105 @@
+import ts from 'typescript';
+import path from 'path';
+import fs from 'fs';
+
+export interface ComponentSourceInfo {
+  file: string;
+  line: number;
+}
+
+export type SourceMap = Record<string, ComponentSourceInfo>;
+
+/**
+ * Scans the project for `.component.ts` files and extracts component
+ * class names with their source locations. Returns a map of
+ * `{ ComponentName: { file, line } }`.
+ */
+export function scanComponentSources(rootDir: string): SourceMap {
+  const sourceMap: SourceMap = {};
+  const files = findComponentFiles(rootDir);
+
+  for (const filePath of files) {
+    const content = fs.readFileSync(filePath, 'utf8');
+    if (!content.includes('@Component')) continue;
+
+    const relativePath = path.relative(rootDir, filePath).replace(/\\/g, '/');
+    const components = extractComponents(content, filePath);
+
+    for (const comp of components) {
+      sourceMap[comp.name] = { file: relativePath, line: comp.line };
+    }
+  }
+
+  return sourceMap;
+}
+
+interface ComponentInfo {
+  name: string;
+  line: number;
+}
+
+function extractComponents(code: string, filePath: string): ComponentInfo[] {
+  const sourceFile = ts.createSourceFile(
+    filePath,
+    code,
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TS,
+  );
+
+  const results: ComponentInfo[] = [];
+
+  function visit(node: ts.Node): void {
+    if (ts.isClassDeclaration(node) && node.name) {
+      const decorators = ts.getDecorators(node);
+      if (!decorators) return;
+
+      const hasComponent = decorators.some((d) => {
+        if (!ts.isCallExpression(d.expression)) return false;
+        if (!ts.isIdentifier(d.expression.expression)) return false;
+        return d.expression.expression.text === 'Component';
+      });
+
+      if (hasComponent) {
+        const { line } = sourceFile.getLineAndCharacterOfPosition(node.getStart());
+        results.push({ name: node.name.text, line: line + 1 });
+      }
+    }
+
+    ts.forEachChild(node, visit);
+  }
+
+  visit(sourceFile);
+  return results;
+}
+
+function findComponentFiles(rootDir: string): string[] {
+  const results: string[] = [];
+  const srcDir = path.join(rootDir, 'src');
+
+  if (!fs.existsSync(srcDir)) return results;
+
+  walk(srcDir, results);
+  return results;
+}
+
+function walk(dir: string, results: string[]): void {
+  let entries: fs.Dirent[];
+  try {
+    entries = fs.readdirSync(dir, { withFileTypes: true });
+  } catch {
+    return;
+  }
+
+  for (const entry of entries) {
+    if (entry.name === 'node_modules' || entry.name.startsWith('.')) continue;
+
+    const fullPath = path.join(dir, entry.name);
+
+    if (entry.isDirectory()) {
+      walk(fullPath, results);
+    } else if (entry.name.endsWith('.component.ts')) {
+      results.push(fullPath);
+    }
+  }
+}

package/packages/angular-grab/src/esbuild-plugin/transform.ts

@@ -0,0 +1,152 @@
+import ts from 'typescript';
+import path from 'path';
+
+export interface TransformResult {
+  code: string;
+}
+
+interface Edit {
+  pos: number;
+  end: number;
+  text: string;
+}
+
+export function transformAngularComponent(
+  code: string,
+  filePath: string,
+  rootDir: string,
+): TransformResult | null {
+  const sourceFile = ts.createSourceFile(
+    filePath,
+    code,
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TS,
+  );
+
+  const relativePath = path.relative(rootDir, filePath).replace(/\\/g, '/').replace(/'/g, "\\'");
+  const edits: Edit[] = [];
+
+  visitNode(sourceFile);
+
+  if (edits.length === 0) return null;
+
+  // Apply edits in reverse order to preserve positions
+  edits.sort((a, b) => b.pos - a.pos);
+
+  let result = code;
+  for (const edit of edits) {
+    result = result.slice(0, edit.pos) + edit.text + result.slice(edit.end);
+  }
+
+  return { code: result };
+
+  function visitNode(node: ts.Node): void {
+    if (ts.isClassDeclaration(node)) {
+      processClassDeclaration(node);
+    }
+    ts.forEachChild(node, visitNode);
+  }
+
+  function processClassDeclaration(classNode: ts.ClassDeclaration): void {
+    const decorators = ts.getDecorators(classNode);
+    if (!decorators) return;
+
+    for (const decorator of decorators) {
+      if (!ts.isCallExpression(decorator.expression)) continue;
+
+      const expr = decorator.expression;
+      if (!ts.isIdentifier(expr.expression)) continue;
+      if (expr.expression.text !== 'Component') continue;
+
+      processComponentDecorator(expr);
+    }
+  }
+
+  function processComponentDecorator(callExpr: ts.CallExpression): void {
+    if (callExpr.arguments.length === 0) {
+      // Empty decorator call: @Component() — add host arg
+      const line = sourceFile.getLineAndCharacterOfPosition(callExpr.getStart()).line;
+      const sourceAttr = `'data-ng-source': '${relativePath}:${line}:0'`;
+      const insertText = `{ host: { ${sourceAttr} } }`;
+
+      const openParen = callExpr.getStart() + callExpr.expression.getText().length;
+      // Find the actual position of the opening paren
+      const parenPos = code.indexOf('(', openParen);
+      const closeParenPos = code.indexOf(')', parenPos);
+
+      edits.push({
+        pos: parenPos + 1,
+        end: closeParenPos,
+        text: insertText,
+      });
+      return;
+    }
+
+    const arg = callExpr.arguments[0];
+    if (!ts.isObjectLiteralExpression(arg)) return;
+
+    const line = sourceFile.getLineAndCharacterOfPosition(callExpr.getStart()).line;
+    const sourceAttr = `'data-ng-source': '${relativePath}:${line}:0'`;
+
+    // Check if host property already exists
+    const hostProp = arg.properties.find(
+      (p) => ts.isPropertyAssignment(p) && ts.isIdentifier(p.name) && p.name.text === 'host',
+    ) as ts.PropertyAssignment | undefined;
+
+    if (hostProp) {
+      // Host property exists — inject into it
+      if (!ts.isObjectLiteralExpression(hostProp.initializer)) return;
+
+      const hostObj = hostProp.initializer;
+
+      // Check for existing data-ng-source (idempotent)
+      const hasExisting = hostObj.properties.some(
+        (p) =>
+          ts.isPropertyAssignment(p) &&
+          ((ts.isStringLiteral(p.name) && p.name.text === 'data-ng-source') ||
+            (ts.isIdentifier(p.name) && p.name.text === 'data-ng-source')),
+      );
+
+      if (hasExisting) return;
+
+      // Insert into existing host object
+      if (hostObj.properties.length > 0) {
+        const lastProp = hostObj.properties[hostObj.properties.length - 1];
+        edits.push({
+          pos: lastProp.getEnd(),
+          end: lastProp.getEnd(),
+          text: `, ${sourceAttr}`,
+        });
+      } else {
+        // Empty host object: host: {}
+        const openBrace = hostObj.getStart();
+        const closeBrace = hostObj.getEnd();
+        edits.push({
+          pos: openBrace + 1,
+          end: closeBrace - 1,
+          text: ` ${sourceAttr} `,
+        });
+      }
+    } else {
+      // No host property — add one
+      if (arg.properties.length > 0) {
+        const lastProp = arg.properties[arg.properties.length - 1];
+        edits.push({
+          pos: lastProp.getEnd(),
+          end: lastProp.getEnd(),
+          text: `, host: { ${sourceAttr} }`,
+        });
+      } else {
+        // Empty object literal: @Component({})
+        const openBrace = arg.getStart();
+        const closeBrace = arg.getEnd();
+        edits.push({
+          pos: openBrace + 1,
+          end: closeBrace - 1,
+          text: ` host: { ${sourceAttr} } `,
+        });
+      }
+    }
+  }
+}

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

@@ -0,0 +1,84 @@
+import { describe, it, expect } from 'vitest';
+import { angularGrabVitePlugin } from '../index';
+
+describe('angularGrabVitePlugin', () => {
+  it('returns a plugin object with the correct name', () => {
+    const plugin = angularGrabVitePlugin();
+    expect(plugin.name).toBe('angular-grab-source-injector');
+  });
+
+  it('sets enforce to "pre"', () => {
+    const plugin = angularGrabVitePlugin();
+    expect(plugin.enforce).toBe('pre');
+  });
+
+  it('sets apply to "serve"', () => {
+    const plugin = angularGrabVitePlugin();
+    expect(plugin.apply).toBe('serve');
+  });
+
+  it('has a transform hook', () => {
+    const plugin = angularGrabVitePlugin();
+    expect(plugin.transform).toBeDefined();
+    expect(typeof plugin.transform).toBe('function');
+  });
+
+  it('accepts optional rootDir option', () => {
+    const plugin = angularGrabVitePlugin({ rootDir: '/custom/root' });
+    expect(plugin.name).toBe('angular-grab-source-injector');
+  });
+});
+
+describe('transform hook', () => {
+  function getTransform() {
+    const plugin = angularGrabVitePlugin({ rootDir: '/project' });
+    // The transform function is directly on the plugin
+    return plugin.transform as (code: string, id: string) => any;
+  }
+
+  it('returns null for non-component TypeScript files', () => {
+    const transform = getTransform();
+    const result = transform('export class MyService {}', '/project/src/app/my.service.ts');
+    expect(result).toBeNull();
+  });
+
+  it('returns null for .component.ts files without @Component', () => {
+    const transform = getTransform();
+    const result = transform('export class PlainClass {}', '/project/src/app/example.component.ts');
+    expect(result).toBeNull();
+  });
+
+  it('transforms a .component.ts file with @Component decorator', () => {
+    const transform = getTransform();
+    const input = `@Component({ selector: 'app-example', template: '<p>hi</p>' })
+export class ExampleComponent {}`;
+
+    const result = transform(input, '/project/src/app/example.component.ts');
+    expect(result).not.toBeNull();
+    expect(result.code).toContain("'data-ng-source': 'src/app/example.component.ts:0:0'");
+  });
+
+  it('returns null for CSS files', () => {
+    const transform = getTransform();
+    const result = transform('.foo { color: red; }', '/project/src/app/styles.css');
+    expect(result).toBeNull();
+  });
+
+  it('returns null for HTML template files', () => {
+    const transform = getTransform();
+    const result = transform('<div>hello</div>', '/project/src/app/example.component.html');
+    expect(result).toBeNull();
+  });
+
+  it('is idempotent — skips if data-ng-source already present', () => {
+    const transform = getTransform();
+    const input = `@Component({
+  selector: 'app-example',
+  host: { 'data-ng-source': 'src/app/example.component.ts:0:0' }
+})
+export class ExampleComponent {}`;
+
+    const result = transform(input, '/project/src/app/example.component.ts');
+    expect(result).toBeNull();
+  });
+});

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

@@ -0,0 +1,19 @@
+import type { Plugin } from 'vite';
+import { transformAngularComponent } from '../esbuild-plugin';
+
+export function angularGrabVitePlugin(options?: { rootDir?: string }): Plugin {
+  return {
+    name: 'angular-grab-source-injector',
+    enforce: 'pre',
+    apply: 'serve',
+    transform(code: string, id: string) {
+      if (!id.endsWith('.component.ts') || !code.includes('@Component')) {
+        return null;
+      }
+      const rootDir = options?.rootDir || process.cwd();
+      return transformAngularComponent(code, id, rootDir);
+    },
+  };
+}
+
+export default angularGrabVitePlugin;

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

@@ -0,0 +1,72 @@
+import { describe, it, expect, vi } from 'vitest';
+import { AngularGrabWebpackPlugin } from '../plugin';
+
+describe('AngularGrabWebpackPlugin', () => {
+  it('can be instantiated', () => {
+    const plugin = new AngularGrabWebpackPlugin();
+    expect(plugin).toBeInstanceOf(AngularGrabWebpackPlugin);
+  });
+
+  it('has an apply method', () => {
+    const plugin = new AngularGrabWebpackPlugin();
+    expect(typeof plugin.apply).toBe('function');
+  });
+
+  it('adds a module rule for .component.ts files', () => {
+    const plugin = new AngularGrabWebpackPlugin();
+    const compiler = {
+      options: {
+        module: {
+          rules: [],
+        },
+      },
+    };
+
+    plugin.apply(compiler);
+
+    expect(compiler.options.module.rules.length).toBe(1);
+    const rule = compiler.options.module.rules[0] as any;
+    expect(rule.test).toEqual(/\.component\.ts$/);
+    expect(rule.enforce).toBe('pre');
+    expect(rule.use).toBeDefined();
+    expect(rule.use.length).toBe(1);
+    expect(rule.use[0].loader).toContain('loader');
+  });
+
+  it('creates module.rules array when missing', () => {
+    const plugin = new AngularGrabWebpackPlugin();
+    const compiler = {
+      options: {},
+    };
+
+    plugin.apply(compiler);
+
+    expect(compiler.options.module).toBeDefined();
+    expect((compiler.options as any).module.rules.length).toBe(1);
+  });
+
+  it('appends to existing rules without removing them', () => {
+    const plugin = new AngularGrabWebpackPlugin();
+    const existingRule = { test: /\.css$/, use: ['style-loader'] };
+    const compiler = {
+      options: {
+        module: {
+          rules: [existingRule],
+        },
+      },
+    };
+
+    plugin.apply(compiler);
+
+    expect(compiler.options.module.rules.length).toBe(2);
+    expect(compiler.options.module.rules[0]).toBe(existingRule);
+  });
+});
+
+describe('webpack-plugin exports', () => {
+  it('exports AngularGrabWebpackPlugin from index', async () => {
+    const mod = await import('../index');
+    expect(mod.AngularGrabWebpackPlugin).toBeDefined();
+    expect(mod.AngularGrabWebpackPlugin).toBe(AngularGrabWebpackPlugin);
+  });
+});

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

@@ -0,0 +1,2 @@
+// Placeholder
+export { AngularGrabWebpackPlugin } from './plugin';

package/packages/angular-grab/src/webpack-plugin/loader.ts

@@ -0,0 +1,15 @@
+import { transformAngularComponent } from '../esbuild-plugin';
+
+export default function angularGrabLoader(this: any, source: string) {
+  const callback = this.async();
+  const filePath = this.resourcePath;
+
+  if (!filePath.endsWith('.component.ts') || !source.includes('@Component')) {
+    return callback(null, source);
+  }
+
+  const rootDir = this.rootContext || process.cwd();
+  const result = transformAngularComponent(source, filePath, rootDir);
+
+  callback(null, result?.code || source);
+}

package/packages/angular-grab/src/webpack-plugin/plugin.ts

@@ -0,0 +1,20 @@
+import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'node:path';
+
+export class AngularGrabWebpackPlugin {
+  apply(compiler: any) {
+    const pluginDir = dirname(fileURLToPath(import.meta.url));
+
+    compiler.options.module = compiler.options.module || {};
+    compiler.options.module.rules = compiler.options.module.rules || [];
+    compiler.options.module.rules.push({
+      test: /\.component\.ts$/,
+      enforce: 'pre' as const,
+      use: [
+        {
+          loader: resolve(pluginDir, 'loader.js'),
+        },
+      ],
+    });
+  }
+}