design-clone 1.2.0 → 2.1.0

package/src/route-discoverers/angular-discoverer.js

@@ -0,0 +1,157 @@
+/**
+ * Angular Route Discoverer
+ *
+ * Extracts routes from Angular applications using:
+ * - ng.probe() for component inspection
+ * - routerLink attributes in DOM
+ * - app-root element analysis
+ */
+
+import { BaseDiscoverer } from './base-discoverer.js';
+
+export class AngularDiscoverer extends BaseDiscoverer {
+  /**
+   * Discover routes from an Angular application
+   * @returns {Promise<import('./base-discoverer.js').DiscoveredRoute[]>}
+   */
+  async discover() {
+    const rawRoutes = await this.page.evaluate(() => {
+      const routes = [];
+
+      // Method 1: ng.probe() to access Router
+      const appRoot = document.querySelector('app-root');
+      if (appRoot && window.ng?.probe) {
+        try {
+          const debugElement = window.ng.probe(appRoot);
+          if (debugElement?.injector) {
+            // Try to get Router from injector
+            // Note: This may not work in production builds
+            const injector = debugElement.injector;
+
+            // Look for router in provider tree
+            const getAllProviders = (inj) => {
+              const providers = [];
+              if (inj._records) {
+                inj._records.forEach((v, k) => {
+                  if (k.toString().includes('Router')) {
+                    providers.push(v);
+                  }
+                });
+              }
+              return providers;
+            };
+
+            const routerProviders = getAllProviders(injector);
+            routerProviders.forEach(provider => {
+              if (provider?.config) {
+                extractAngularRoutes(provider.config, routes);
+              }
+            });
+          }
+        } catch (e) {
+          // ng.probe may not be available in production
+        }
+      }
+
+      // Method 2: routerLink attributes (most reliable)
+      document.querySelectorAll('[routerLink], [routerlink]').forEach(el => {
+        const path = el.getAttribute('routerLink') || el.getAttribute('routerlink');
+        if (path) {
+          const text = el.textContent?.trim();
+          routes.push({
+            path: path.startsWith('/') ? path : '/' + path,
+            name: text || '',
+            source: 'framework'
+          });
+        }
+      });
+
+      // Method 3: [routerLink] with binding syntax
+      document.querySelectorAll('a[href]').forEach(link => {
+        const href = link.getAttribute('href');
+        if (href && href.startsWith('/')) {
+          // Check if it's inside Angular app
+          const isAngularLink = link.closest('app-root') ||
+                               link.hasAttribute('routerLinkActive') ||
+                               link.classList.contains('active');
+
+          if (isAngularLink || link.closest('nav, header, [role="navigation"]')) {
+            const text = link.textContent?.trim();
+            if (!routes.some(r => r.path === href)) {
+              routes.push({
+                path: href,
+                name: text || '',
+                source: isAngularLink ? 'framework' : 'link-scrape'
+              });
+            }
+          }
+        }
+      });
+
+      // Method 4: routerLinkActive elements
+      document.querySelectorAll('[routerLinkActive], [routerlinkactive]').forEach(el => {
+        const link = el.tagName === 'A' ? el : el.querySelector('a');
+        if (link) {
+          const href = link.getAttribute('href') ||
+                      link.getAttribute('routerLink') ||
+                      link.getAttribute('routerlink');
+          if (href && !routes.some(r => r.path === href)) {
+            routes.push({
+              path: href.startsWith('/') ? href : '/' + href,
+              name: link.textContent?.trim() || '',
+              source: 'framework'
+            });
+          }
+        }
+      });
+
+      /**
+       * Extract routes from Angular Router config
+       */
+      function extractAngularRoutes(config, output, prefix = '') {
+        if (!Array.isArray(config)) return;
+
+        config.forEach(route => {
+          if (!route.path && route.path !== '') return;
+
+          let path = route.path;
+          if (prefix && !path.startsWith('/')) {
+            path = prefix + '/' + path;
+          }
+          if (!path.startsWith('/')) {
+            path = '/' + path;
+          }
+
+          // Skip wildcard and redirect-only routes
+          if (path === '/**' || path === '**' || (!route.component && route.redirectTo)) {
+            return;
+          }
+
+          output.push({
+            path,
+            name: route.data?.title || route.title || '',
+            component: route.component?.name || '',
+            source: 'framework'
+          });
+
+          // Process child routes
+          if (route.children) {
+            extractAngularRoutes(route.children, output, path);
+          }
+        });
+      }
+
+      return routes;
+    });
+
+    const processedRoutes = rawRoutes.map(route => ({
+      ...route,
+      name: route.name || this.extractPageName(route.path, route.component),
+      path: this.normalizeRoute(route.path)
+    }));
+
+    return this.deduplicateRoutes(processedRoutes);
+  }
+}
+
+export default AngularDiscoverer;

package/src/route-discoverers/astro-discoverer.js

@@ -0,0 +1,123 @@
+/**
+ * Astro Route Discoverer
+ *
+ * Astro is primarily a static site generator with islands architecture.
+ * Routes are extracted from:
+ * - astro-island components
+ * - data-astro-* prefetch attributes
+ * - Standard navigation links (Astro generates static HTML)
+ */
+
+import { BaseDiscoverer } from './base-discoverer.js';
+
+export class AstroDiscoverer extends BaseDiscoverer {
+  /**
+   * Discover routes from an Astro application
+   * @returns {Promise<import('./base-discoverer.js').DiscoveredRoute[]>}
+   */
+  async discover() {
+    const rawRoutes = await this.page.evaluate(() => {
+      const routes = [];
+
+      // Method 1: astro-island components (indicate interactive pages)
+      document.querySelectorAll('astro-island').forEach(island => {
+        // Islands don't directly indicate routes, but their presence
+        // confirms we're on an Astro site. Look for nearby links.
+        const nearbyLinks = island.querySelectorAll('a[href]');
+        nearbyLinks.forEach(link => {
+          const href = link.getAttribute('href');
+          if (href && href.startsWith('/')) {
+            routes.push({
+              path: href,
+              name: link.textContent?.trim() || '',
+              source: 'framework'
+            });
+          }
+        });
+      });
+
+      // Method 2: data-astro-prefetch links (Astro's View Transitions)
+      document.querySelectorAll('a[data-astro-prefetch]').forEach(link => {
+        const href = link.getAttribute('href');
+        if (href && href.startsWith('/')) {
+          if (!routes.some(r => r.path === href)) {
+            routes.push({
+              path: href,
+              name: link.textContent?.trim() || '',
+              source: 'framework'
+            });
+          }
+        }
+      });
+
+      // Method 3: Links with data-astro-cid-* (component IDs)
+      document.querySelectorAll('a[href]').forEach(link => {
+        // Check if link has Astro component ID attribute
+        const hasAstroAttr = Array.from(link.attributes).some(
+          attr => attr.name.startsWith('data-astro-cid-')
+        );
+
+        if (hasAstroAttr) {
+          const href = link.getAttribute('href');
+          if (href && href.startsWith('/')) {
+            if (!routes.some(r => r.path === href)) {
+              routes.push({
+                path: href,
+                name: link.textContent?.trim() || '',
+                source: 'framework'
+              });
+            }
+          }
+        }
+      });
+
+      // Method 4: Standard navigation (Astro generates static HTML)
+      document.querySelectorAll('nav a, header a, [role="navigation"] a, footer a').forEach(link => {
+        const href = link.getAttribute('href');
+        if (href && href.startsWith('/')) {
+          // Check if inside Astro component
+          const isAstroLink = link.closest('astro-island') ||
+                             Array.from(link.attributes).some(
+                               attr => attr.name.startsWith('data-astro-')
+                             );
+
+          if (!routes.some(r => r.path === href)) {
+            routes.push({
+              path: href,
+              name: link.textContent?.trim() || '',
+              source: isAstroLink ? 'framework' : 'link-scrape'
+            });
+          }
+        }
+      });
+
+      // Method 5: Look for Astro's client:* directives in islands
+      document.querySelectorAll('[client\\:load], [client\\:idle], [client\\:visible]').forEach(el => {
+        // These indicate interactive components
+        const links = el.querySelectorAll('a[href^="/"]');
+        links.forEach(link => {
+          const href = link.getAttribute('href');
+          if (href && !routes.some(r => r.path === href)) {
+            routes.push({
+              path: href,
+              name: link.textContent?.trim() || '',
+              source: 'framework'
+            });
+          }
+        });
+      });
+
+      return routes;
+    });
+
+    const processedRoutes = rawRoutes.map(route => ({
+      ...route,
+      name: route.name || this.extractPageName(route.path),
+      path: this.normalizeRoute(route.path)
+    }));
+
+    return this.deduplicateRoutes(processedRoutes);
+  }
+}
+
+export default AstroDiscoverer;

package/src/route-discoverers/base-discoverer.js

@@ -0,0 +1,242 @@
+/**
+ * Base Discoverer - Abstract base class for route discoverers
+ *
+ * Provides common utilities for route normalization, deduplication,
+ * and page name extraction. Framework-specific discoverers extend this.
+ *
+ * Usage:
+ *   class NextDiscoverer extends BaseDiscoverer {
+ *     async discover() { ... }
+ *   }
+ */
+
+/**
+ * @typedef {Object} DiscoveredRoute
+ * @property {string} path - Route path (e.g., '/about', '/blog/[slug]')
+ * @property {string} name - Human-readable name
+ * @property {string} url - Full URL
+ * @property {boolean} dynamic - True if contains dynamic segments
+ * @property {string} [component] - Component name if available
+ * @property {string} source - Discovery source ('framework'|'link-scrape'|'interception')
+ */
+
+// Dynamic segment patterns
+const DYNAMIC_PATTERNS = [
+  /\[[\w-]+\]/,     // Next.js [slug]
+  /\[\.\.\.([\w-]+)\]/, // Next.js catch-all [...slug]
+  /:[\w-]+/,        // Vue/React :id
+  /\{[\w-]+\}/,     // Angular {id}
+  /\*[\w-]*/        // Wildcard
+];
+
+/**
+ * Abstract base class for route discoverers
+ */
+export class BaseDiscoverer {
+  /**
+   * @param {import('playwright').Page} page - Playwright page object
+   * @param {string} baseUrl - Base URL of the site
+   */
+  constructor(page, baseUrl) {
+    this.page = page;
+    this.baseUrl = baseUrl;
+    this.baseOrigin = new URL(baseUrl).origin;
+  }
+
+  /**
+   * Discover routes - must be implemented by subclasses
+   * @returns {Promise<DiscoveredRoute[]>}
+   */
+  async discover() {
+    throw new Error('discover() must be implemented by subclass');
+  }
+
+  /**
+   * Normalize a route path
+   * - Removes trailing slashes (except for root)
+   * - Removes query params and hash
+   * - Ensures leading slash
+   * @param {string} path - Route path to normalize
+   * @returns {string} Normalized path
+   */
+  normalizeRoute(path) {
+    if (!path || typeof path !== 'string') return '/';
+
+    // Handle full URLs
+    if (path.startsWith('http')) {
+      try {
+        path = new URL(path).pathname;
+      } catch {
+        return '/';
+      }
+    }
+
+    // Ensure leading slash
+    if (!path.startsWith('/')) {
+      path = '/' + path;
+    }
+
+    // Remove query params and hash
+    path = path.split('?')[0].split('#')[0];
+
+    // Remove trailing slash (except for root)
+    if (path.length > 1 && path.endsWith('/')) {
+      path = path.slice(0, -1);
+    }
+
+    return path;
+  }
+
+  /**
+   * Check if a path contains dynamic segments
+   * @param {string} path - Route path
+   * @returns {boolean}
+   */
+  isDynamicRoute(path) {
+    return DYNAMIC_PATTERNS.some(pattern => pattern.test(path));
+  }
+
+  /**
+   * Extract a human-readable page name from a path
+   * @param {string} path - Route path
+   * @param {string} [componentName] - Optional component name
+   * @returns {string}
+   */
+  extractPageName(path, componentName) {
+    // Use component name if available
+    if (componentName && componentName !== 'default' && componentName !== 'index') {
+      // Convert camelCase/PascalCase to Title Case
+      return componentName
+        .replace(/([A-Z])/g, ' $1')
+        .replace(/^./, s => s.toUpperCase())
+        .trim();
+    }
+
+    // Extract from path
+    const normalized = this.normalizeRoute(path);
+
+    if (normalized === '/') return 'Home';
+
+    // Get last segment
+    const segments = normalized.split('/').filter(Boolean);
+    if (segments.length === 0) return 'Home';
+
+    let lastSegment = segments[segments.length - 1];
+
+    // Handle dynamic segments
+    if (this.isDynamicRoute(lastSegment)) {
+      lastSegment = lastSegment.replace(/[\[\]:{}*\.]/g, '');
+      return `${this.titleCase(lastSegment)} (Dynamic)`;
+    }
+
+    // Convert kebab-case/snake_case to Title Case
+    return this.titleCase(lastSegment);
+  }
+
+  /**
+   * Convert string to Title Case
+   * @param {string} str - Input string
+   * @returns {string}
+   */
+  titleCase(str) {
+    return str
+      .replace(/[-_]/g, ' ')
+      .replace(/\b\w/g, c => c.toUpperCase());
+  }
+
+  /**
+   * Deduplicate routes by path, preferring 'framework' source over others
+   * @param {DiscoveredRoute[]} routes - Array of routes
+   * @returns {DiscoveredRoute[]} Deduplicated routes
+   */
+  deduplicateRoutes(routes) {
+    const seen = new Map();
+
+    // Source priority: framework > interception > sitemap > link-scrape
+    const sourcePriority = {
+      'framework': 4,
+      'interception': 3,
+      'sitemap': 2,
+      'link-scrape': 1
+    };
+
+    for (const route of routes) {
+      const normalized = this.normalizeRoute(route.path);
+      const existing = seen.get(normalized);
+
+      const currentPriority = sourcePriority[route.source] || 0;
+      const existingPriority = existing ? (sourcePriority[existing.source] || 0) : -1;
+
+      // Replace if higher priority or if same priority but has a name while existing doesn't
+      if (!existing || currentPriority > existingPriority ||
+          (currentPriority === existingPriority && route.name && !existing.name)) {
+        seen.set(normalized, {
+          ...route,
+          path: normalized,
+          url: this.buildFullUrl(normalized),
+          dynamic: this.isDynamicRoute(normalized)
+        });
+      }
+    }
+
+    return Array.from(seen.values());
+  }
+
+  /**
+   * Build full URL from path
+   * @param {string} path - Route path
+   * @returns {string}
+   */
+  buildFullUrl(path) {
+    const normalized = this.normalizeRoute(path);
+    return `${this.baseOrigin}${normalized}`;
+  }
+
+  /**
+   * Scrape link elements from navigation areas
+   * Common utility for all discoverers as fallback
+   * @param {string[]} [selectors] - CSS selectors to search
+   * @returns {Promise<DiscoveredRoute[]>}
+   */
+  async scrapeLinkElements(selectors = ['nav a', 'header a', '[role="navigation"] a']) {
+    const selectorString = selectors.join(', ');
+    const baseOrigin = this.baseOrigin;
+
+    const routes = await this.page.evaluate(({ sel, origin }) => {
+      const links = [];
+      const elements = document.querySelectorAll(sel);
+
+      elements.forEach(el => {
+        const href = el.getAttribute('href');
+        if (!href) return;
+
+        // Skip non-http links
+        if (href.startsWith('mailto:') || href.startsWith('tel:') ||
+            href.startsWith('javascript:') || href === '#') return;
+
+        // Skip external links
+        try {
+          const url = new URL(href, origin);
+          if (url.origin !== origin) return;
+
+          links.push({
+            path: url.pathname,
+            name: el.textContent?.trim() || '',
+            source: 'link-scrape'
+          });
+        } catch {
+          // Invalid URL, skip
+        }
+      });
+
+      return links;
+    }, { sel: selectorString, origin: baseOrigin });
+
+    return routes.map(r => ({
+      ...r,
+      name: r.name || this.extractPageName(r.path)
+    }));
+  }
+}
+
+export default BaseDiscoverer;

package/src/route-discoverers/index.js

@@ -0,0 +1,106 @@
+/**
+ * Route Discoverers Registry
+ *
+ * Central registry for framework-specific route discoverers.
+ * Uses the framework detector to select the appropriate discoverer.
+ */
+
+import { NextDiscoverer } from './next-discoverer.js';
+import { NuxtDiscoverer } from './nuxt-discoverer.js';
+import { VueDiscoverer } from './vue-discoverer.js';
+import { ReactDiscoverer } from './react-discoverer.js';
+import { AngularDiscoverer } from './angular-discoverer.js';
+import { SvelteDiscoverer } from './svelte-discoverer.js';
+import { AstroDiscoverer } from './astro-discoverer.js';
+import { UniversalDiscoverer } from './universal-discoverer.js';
+
+/**
+ * Registry mapping framework names to discoverer classes
+ */
+export const DISCOVERER_REGISTRY = {
+  'next': NextDiscoverer,
+  'nuxt': NuxtDiscoverer,
+  'vue': VueDiscoverer,
+  'react': ReactDiscoverer,
+  'angular': AngularDiscoverer,
+  'svelte': SvelteDiscoverer,
+  'astro': AstroDiscoverer,
+  'unknown': UniversalDiscoverer
+};
+
+/**
+ * Get the appropriate discoverer class for a framework
+ * @param {string} framework - Framework name from detector
+ * @returns {typeof import('./base-discoverer.js').BaseDiscoverer}
+ */
+export function getDiscovererClass(framework) {
+  const normalizedFramework = framework?.toLowerCase() || 'unknown';
+  return DISCOVERER_REGISTRY[normalizedFramework] || UniversalDiscoverer;
+}
+
+/**
+ * Create a discoverer instance for a framework
+ * @param {string} framework - Framework name
+ * @param {import('playwright').Page} page - Playwright page instance
+ * @param {string} baseUrl - Base URL of the site
+ * @returns {import('./base-discoverer.js').BaseDiscoverer}
+ */
+export function createDiscoverer(framework, page, baseUrl) {
+  const DiscovererClass = getDiscovererClass(framework);
+  return new DiscovererClass(page, baseUrl);
+}
+
+/**
+ * Discover routes for a given page using framework detection
+ * @param {import('playwright').Page} page - Playwright page instance
+ * @param {string} baseUrl - Base URL of the site
+ * @param {object} [frameworkInfo] - Optional pre-detected framework info
+ * @returns {Promise<{routes: import('./base-discoverer.js').DiscoveredRoute[], framework: string, discoverer: string}>}
+ */
+export async function discoverRoutes(page, baseUrl, frameworkInfo = null) {
+  // Import framework detector if we need to detect
+  let detectedFramework = frameworkInfo?.framework || 'unknown';
+
+  if (!frameworkInfo) {
+    try {
+      const { detectFramework } = await import('../core/framework-detector.js');
+      const info = await detectFramework(page);
+      detectedFramework = info.framework;
+    } catch {
+      // Framework detector not available, use universal
+      detectedFramework = 'unknown';
+    }
+  }
+
+  const discoverer = createDiscoverer(detectedFramework, page, baseUrl);
+  const routes = await discoverer.discover();
+
+  return {
+    routes,
+    framework: detectedFramework,
+    discoverer: discoverer.constructor.name
+  };
+}
+
+/**
+ * Get list of supported frameworks
+ * @returns {string[]}
+ */
+export function getSupportedFrameworks() {
+  return Object.keys(DISCOVERER_REGISTRY).filter(k => k !== 'unknown');
+}
+
+// Export all discoverer classes for direct use
+export {
+  NextDiscoverer,
+  NuxtDiscoverer,
+  VueDiscoverer,
+  ReactDiscoverer,
+  AngularDiscoverer,
+  SvelteDiscoverer,
+  AstroDiscoverer,
+  UniversalDiscoverer
+};
+
+// Re-export base class
+export { BaseDiscoverer } from './base-discoverer.js';