angular-grab 0.1.0 → 0.1.2

package/packages/angular-grab/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "declaration": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"]
+  },
+  "include": ["src"]
+}

package/packages/angular-grab/tsup.config.ts

@@ -0,0 +1,119 @@
+import { defineConfig } from 'tsup';
+import { copyFileSync, mkdirSync, writeFileSync } from 'fs';
+import { resolve } from 'path';
+
+export default defineConfig([
+  // 1. Core: ESM + CJS + types
+  {
+    entry: { 'core/index': 'src/core/index.ts' },
+    format: ['esm', 'cjs'],
+    dts: true,
+    clean: true,
+    sourcemap: true,
+    outDir: 'dist',
+  },
+  // 2. Core IIFE: browser global
+  {
+    entry: { 'core/index': 'src/core/index.global.ts' },
+    format: ['iife'],
+    globalName: 'AngularGrab',
+    outDir: 'dist',
+    clean: false,
+    minify: true,
+  },
+  // 3. Angular: ESM + types
+  {
+    entry: { 'angular/index': 'src/angular/index.ts' },
+    format: ['esm'],
+    dts: true,
+    clean: false,
+    sourcemap: true,
+    outDir: 'dist',
+    external: ['@angular/core'],
+  },
+  // 4. Esbuild plugin: ESM + CJS + types
+  {
+    entry: { 'esbuild-plugin/index': 'src/esbuild-plugin/index.ts' },
+    format: ['esm', 'cjs'],
+    dts: true,
+    clean: false,
+    sourcemap: true,
+    outDir: 'dist',
+    external: ['esbuild', 'typescript'],
+  },
+  // 5. Vite plugin: ESM + types
+  {
+    entry: { 'vite-plugin/index': 'src/vite-plugin/index.ts' },
+    format: ['esm'],
+    dts: true,
+    clean: false,
+    sourcemap: true,
+    outDir: 'dist',
+    external: ['vite'],
+  },
+  // 6. Webpack plugin + loader: ESM + CJS + types
+  {
+    entry: {
+      'webpack-plugin/index': 'src/webpack-plugin/index.ts',
+      'webpack-plugin/loader': 'src/webpack-plugin/loader.ts',
+    },
+    format: ['esm', 'cjs'],
+    dts: true,
+    clean: false,
+    sourcemap: true,
+    outDir: 'dist',
+    shims: true,
+    external: ['webpack'],
+  },
+  // 7. Builder: CJS only (Angular CLI requirement)
+  // Angular CLI uses require() to load builders. Since the root package is
+  // "type": "module", we force .js output and write a nested package.json
+  // with "type": "commonjs" so Node treats these .js files as CJS.
+  {
+    entry: {
+      'builder/index': 'src/builder/index.ts',
+      'builder/builders/application/index': 'src/builder/builders/application/index.ts',
+      'builder/builders/dev-server/index': 'src/builder/builders/dev-server/index.ts',
+    },
+    format: ['cjs'],
+    dts: false,
+    clean: false,
+    sourcemap: true,
+    outDir: 'dist',
+    outExtension: () => ({ js: '.js' }),
+    external: ['@angular/build', '@angular-devkit/architect'],
+    onSuccess: async () => {
+      const distBuilder = resolve('dist', 'builder');
+      mkdirSync(distBuilder, { recursive: true });
+
+      // Mark dist/builder/ as CommonJS so .js files are loaded via require()
+      writeFileSync(
+        resolve(distBuilder, 'package.json'),
+        JSON.stringify({ type: 'commonjs' }) + '\n',
+      );
+
+      // Copy schema.json files to dist
+      const distApp = resolve(distBuilder, 'builders', 'application');
+      const distDev = resolve(distBuilder, 'builders', 'dev-server');
+      mkdirSync(distApp, { recursive: true });
+      mkdirSync(distDev, { recursive: true });
+      copyFileSync(
+        resolve('src', 'builder', 'builders', 'application', 'schema.json'),
+        resolve(distApp, 'schema.json'),
+      );
+      copyFileSync(
+        resolve('src', 'builder', 'builders', 'dev-server', 'schema.json'),
+        resolve(distDev, 'schema.json'),
+      );
+    },
+  },
+  // 8. CLI: ESM with shebang
+  {
+    entry: { 'cli/index': 'src/cli/index.ts' },
+    format: ['esm'],
+    clean: false,
+    sourcemap: true,
+    outDir: 'dist',
+    banner: { js: '#!/usr/bin/env node' },
+  },
+]);

package/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - "packages/*"
+  - "examples/*"

package/turbo.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": ["dist/**"]
+    },
+    "dev": {
+      "dependsOn": ["^build"],
+      "cache": false,
+      "persistent": true
+    },
+    "test": {
+      "dependsOn": ["build"]
+    },
+    "lint": {},
+    "clean": {
+      "cache": false
+    }
+  }
+}

package/dist/angular/index.d.ts

@@ -1,151 +0,0 @@
-import { InjectionToken, EnvironmentProviders } from '@angular/core';
-
-declare function resolveComponent(element: Element): {
-    name: string | null;
-    hostElement: Element | null;
-    stack: Array<{
-        name: string;
-        hostElement: Element | null;
-    }>;
-};
-
-declare function resolveSource(element: Element): {
-    filePath: string | null;
-    line: number | null;
-    column: number | null;
-};
-
-type ThemeMode = 'dark' | 'light' | 'system';
-/** Serializable subset of ElementContext — no live DOM reference. */
-interface HistoryContext {
-    html: string;
-    componentName: string | null;
-    filePath: string | null;
-    line: number | null;
-    column: number | null;
-    componentStack: ComponentStackEntry[];
-    selector: string;
-    cssClasses: string[];
-}
-interface HistoryEntry {
-    id: string;
-    context: HistoryContext;
-    snippet: string;
-    timestamp: number;
-}
-interface AngularGrabOptions {
-    /** Keyboard shortcut to activate. Default: "Meta+C" (Mac) / "Ctrl+C" (Win) */
-    activationKey: string;
-    /** Whether activation requires hold or toggle. Default: 'hold' */
-    activationMode: 'hold' | 'toggle';
-    /** Milliseconds to hold before activating in hold mode. Default: 0 */
-    keyHoldDuration: number;
-    /** Max lines of HTML to include in copied context. Default: 20 */
-    maxContextLines: number;
-    /** Master on/off switch. Default: true */
-    enabled: boolean;
-    /** Allow activation while focused in input/textarea. Default: false */
-    enableInInputs: boolean;
-    /** Only activate in dev mode. Default: true */
-    devOnly: boolean;
-    /** Show the floating mini toolbar. Default: true */
-    showToolbar: boolean;
-    /** Theme mode for all UI. Default: 'dark' */
-    themeMode: ThemeMode;
-}
-interface ComponentStackEntry {
-    name: string;
-    filePath: string | null;
-    line: number | null;
-    column: number | null;
-}
-interface ElementContext {
-    element: Element;
-    html: string;
-    componentName: string | null;
-    filePath: string | null;
-    line: number | null;
-    column: number | null;
-    componentStack: ComponentStackEntry[];
-    selector: string;
-    cssClasses: string[];
-}
-interface PluginHooks {
-    onActivate?: () => void;
-    onDeactivate?: () => void;
-    onElementHover?: (element: Element) => void;
-    onElementSelect?: (context: ElementContext) => void;
-    onBeforeCopy?: (context: ElementContext) => void;
-    onCopySuccess?: (text: string, context: ElementContext, prompt?: string) => void;
-    onCopyError?: (error: Error) => void;
-    transformCopyContent?: (text: string, context: ElementContext) => string;
-}
-interface Theme {
-    overlayBorderColor: string;
-    overlayBgColor: string;
-    labelBgColor: string;
-    labelTextColor: string;
-    toastBgColor: string;
-    toastTextColor: string;
-    toolbarBgColor: string;
-    toolbarTextColor: string;
-    toolbarAccentColor: string;
-    popoverBgColor: string;
-    popoverTextColor: string;
-    popoverBorderColor: string;
-}
-interface Plugin {
-    name: string;
-    hooks?: PluginHooks;
-    theme?: Partial<Theme>;
-    options?: Partial<AngularGrabOptions>;
-    setup?: (api: AngularGrabAPI) => PluginCleanup | void;
-}
-type PluginCleanup = () => void;
-type ComponentResolver = (element: Element) => {
-    name: string | null;
-    hostElement: Element | null;
-    stack?: Array<{
-        name: string;
-        hostElement: Element | null;
-    }>;
-} | null;
-type SourceResolver = (element: Element) => {
-    filePath: string | null;
-    line: number | null;
-    column: number | null;
-} | null;
-interface AngularGrabAPI {
-    activate(): void;
-    deactivate(): void;
-    toggle(): void;
-    isActive(): boolean;
-    setOptions(opts: Partial<AngularGrabOptions>): void;
-    registerPlugin(plugin: Plugin): void;
-    unregisterPlugin(name: string): void;
-    setComponentResolver(resolver: ComponentResolver): void;
-    setSourceResolver(resolver: SourceResolver): void;
-    showToolbar(): void;
-    hideToolbar(): void;
-    setThemeMode(mode: ThemeMode): void;
-    getHistory(): HistoryEntry[];
-    clearHistory(): void;
-    dispose(): void;
-}
-
-declare function buildContext(element: Element): ElementContext;
-
-/**
- * Initialize angular-grab. Registers Angular-specific component and source
- * resolvers, then returns the API handle. Idempotent — subsequent calls
- * return the same instance.
- */
-declare function initAngularGrab(options?: Partial<AngularGrabOptions>): AngularGrabAPI;
-declare function getAngularGrabApi(): AngularGrabAPI | null;
-declare function registerAngularGrabPlugin(plugin: Plugin): void;
-declare function disposeAngularGrab(): void;
-
-declare const ANGULAR_GRAB_API: InjectionToken<AngularGrabAPI>;
-declare function provideAngularGrab(options?: Partial<AngularGrabOptions>): EnvironmentProviders;
-
-export { ANGULAR_GRAB_API, buildContext, disposeAngularGrab, getAngularGrabApi, initAngularGrab, provideAngularGrab, registerAngularGrabPlugin, resolveComponent, resolveSource };