angular-grab-monorepo 0.1.3

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

@@ -0,0 +1,72 @@
+import { describe, it, expect } from 'vitest';
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+const PACKAGE_ROOT = join(__dirname, '..', '..', '..');
+
+describe('builders.json', () => {
+  const buildersJson = JSON.parse(
+    readFileSync(join(PACKAGE_ROOT, 'builders.json'), 'utf8'),
+  );
+
+  it('has a builders property', () => {
+    expect(buildersJson.builders).toBeDefined();
+    expect(typeof buildersJson.builders).toBe('object');
+  });
+
+  it('defines an application builder', () => {
+    const app = buildersJson.builders.application;
+    expect(app).toBeDefined();
+    expect(app.implementation).toBeDefined();
+    expect(app.schema).toBeDefined();
+    expect(app.description).toBeDefined();
+  });
+
+  it('defines a dev-server builder', () => {
+    const devServer = buildersJson.builders['dev-server'];
+    expect(devServer).toBeDefined();
+    expect(devServer.implementation).toBeDefined();
+    expect(devServer.schema).toBeDefined();
+    expect(devServer.description).toBeDefined();
+  });
+
+  it('application builder points to correct implementation path', () => {
+    const app = buildersJson.builders.application;
+    expect(app.implementation).toContain('builders/application');
+  });
+
+  it('dev-server builder points to correct implementation path', () => {
+    const devServer = buildersJson.builders['dev-server'];
+    expect(devServer.implementation).toContain('builders/dev-server');
+  });
+});
+
+describe('package.json', () => {
+  const packageJson = JSON.parse(
+    readFileSync(join(PACKAGE_ROOT, 'package.json'), 'utf8'),
+  );
+
+  it('declares builders field pointing to builders.json', () => {
+    expect(packageJson.builders).toBe('./builders.json');
+  });
+
+  it('exports builders.json', () => {
+    expect(packageJson.exports['./builders.json']).toBe('./builders.json');
+  });
+});
+
+describe('schema files', () => {
+  it('application schema is valid JSON', () => {
+    const schema = JSON.parse(
+      readFileSync(join(PACKAGE_ROOT, 'src', 'builder', 'builders', 'application', 'schema.json'), 'utf8'),
+    );
+    expect(schema.type).toBe('object');
+  });
+
+  it('dev-server schema is valid JSON', () => {
+    const schema = JSON.parse(
+      readFileSync(join(PACKAGE_ROOT, 'src', 'builder', 'builders', 'dev-server', 'schema.json'), 'utf8'),
+    );
+    expect(schema.type).toBe('object');
+  });
+});

package/packages/angular-grab/src/builder/builders/application/index.ts

@@ -0,0 +1,13 @@
+import { createBuilder } from '@angular-devkit/architect';
+import { buildApplication } from '@angular/build';
+import { angularGrabEsbuildPlugin } from '../../../esbuild-plugin';
+
+export default createBuilder(async function* (options: any, context) {
+  const isProduction = !!options.optimization;
+  yield* buildApplication(options, context, {
+    codePlugins: [angularGrabEsbuildPlugin({
+      rootDir: context.workspaceRoot,
+      enabled: !isProduction,
+    })],
+  });
+});

package/packages/angular-grab/src/builder/builders/application/schema.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "title": "Angular Grab Application Builder",
+  "description": "Wraps @angular/build:application with angular-grab source injection",
+  "type": "object",
+  "additionalProperties": true
+}

package/packages/angular-grab/src/builder/builders/dev-server/index.ts

@@ -0,0 +1,9 @@
+import { createBuilder } from '@angular-devkit/architect';
+import { executeDevServerBuilder } from '@angular/build';
+import { angularGrabEsbuildPlugin } from '../../../esbuild-plugin';
+
+export default createBuilder(async function* (options: any, context) {
+  yield* executeDevServerBuilder(options, context, {
+    buildPlugins: [angularGrabEsbuildPlugin({ rootDir: context.workspaceRoot })],
+  });
+});

package/packages/angular-grab/src/builder/builders/dev-server/schema.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "title": "Angular Grab Dev Server Builder",
+  "description": "Wraps @angular/build:dev-server with angular-grab source injection",
+  "type": "object",
+  "additionalProperties": true
+}

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

@@ -0,0 +1,3 @@
+// angular-grab/builder
+// This package provides Angular CLI builders that inject angular-grab source location mapping.
+// Builders are resolved via builders.json — this file is not directly imported by users.

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