design-clone 1.1.1 → 2.1.0

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

@@ -0,0 +1,138 @@
+/**
+ * Nuxt Route Discoverer
+ *
+ * Extracts routes from Nuxt 2 and Nuxt 3 applications using:
+ * - window.__NUXT__ (Nuxt 2/3 state)
+ * - window.$nuxt.$router (Vue Router instance)
+ * - window.__NUXT_PATHS__ (Nuxt 3 prerendered paths)
+ */
+
+import { BaseDiscoverer } from './base-discoverer.js';
+
+export class NuxtDiscoverer extends BaseDiscoverer {
+  /**
+   * Discover routes from a Nuxt application
+   * @returns {Promise<import('./base-discoverer.js').DiscoveredRoute[]>}
+   */
+  async discover() {
+    const rawRoutes = await this.page.evaluate(() => {
+      const routes = [];
+
+      /**
+       * Recursively extract routes from Vue Router config
+       * @param {Array} routeList - Array of route objects
+       * @param {string} prefix - Path prefix for nested routes
+       */
+      function extractRoutes(routeList, prefix = '') {
+        if (!Array.isArray(routeList)) return;
+
+        routeList.forEach(r => {
+          if (!r.path) return;
+
+          // Build full path
+          let path = r.path;
+          if (!path.startsWith('/') && prefix) {
+            path = prefix + (prefix.endsWith('/') ? '' : '/') + path;
+          } else if (!path.startsWith('/')) {
+            path = '/' + path;
+          }
+
+          // Skip internal routes
+          if (path.startsWith('/_') || path.startsWith('/:')) {
+            // But process children
+            if (r.children) extractRoutes(r.children, path);
+            return;
+          }
+
+          routes.push({
+            path,
+            name: r.name || '',
+            component: r.name || r.component?.name || '',
+            source: 'framework'
+          });
+
+          // Process nested routes
+          if (r.children) {
+            extractRoutes(r.children, path);
+          }
+        });
+      }
+
+      // Method 1: __NUXT__ state (both Nuxt 2 and 3)
+      if (window.__NUXT__) {
+        const nuxt = window.__NUXT__;
+
+        // Current route path
+        if (nuxt.state?.route?.path) {
+          routes.push({
+            path: nuxt.state.route.path,
+            name: nuxt.state.route.name || 'Current Page',
+            source: 'framework'
+          });
+        }
+
+        // Nuxt 3: route from payload
+        if (nuxt.data?.path || nuxt.path) {
+          routes.push({
+            path: nuxt.data?.path || nuxt.path,
+            name: 'Current Page',
+            source: 'framework'
+          });
+        }
+      }
+
+      // Method 2: $nuxt.$router (Vue Router instance)
+      if (window.$nuxt?.$router?.options?.routes) {
+        extractRoutes(window.$nuxt.$router.options.routes);
+      }
+
+      // Method 3: Nuxt 3 useRouter
+      if (window.__NUXT_PATHS__ && Array.isArray(window.__NUXT_PATHS__)) {
+        window.__NUXT_PATHS__.forEach(path => {
+          if (!routes.some(r => r.path === path)) {
+            routes.push({
+              path,
+              source: 'framework'
+            });
+          }
+        });
+      }
+
+      // Method 4: NuxtLink components in DOM
+      document.querySelectorAll('a[href]').forEach(link => {
+        const href = link.getAttribute('href');
+        if (href && href.startsWith('/') && !href.startsWith('/_')) {
+          // Check for Nuxt-specific attributes
+          const isNuxtLink = link.hasAttribute('data-v-') ||
+                            link.closest('[data-v-]') ||
+                            link.classList.contains('nuxt-link-active') ||
+                            link.classList.contains('nuxt-link-exact-active');
+
+          if (isNuxtLink || 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: isNuxtLink ? 'framework' : 'link-scrape'
+              });
+            }
+          }
+        }
+      });
+
+      return routes;
+    });
+
+    // Process and deduplicate
+    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 NuxtDiscoverer;

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

@@ -0,0 +1,139 @@
+/**
+ * React Route Discoverer
+ *
+ * React Router doesn't expose routes globally, so we use:
+ * - Link component scraping from DOM
+ * - history.pushState interception
+ * - Navigation area link extraction
+ *
+ * This is the most challenging discoverer due to React's lack of global state.
+ */
+
+import { BaseDiscoverer } from './base-discoverer.js';
+
+export class ReactDiscoverer extends BaseDiscoverer {
+  /**
+   * Discover routes from a React application
+   * @returns {Promise<import('./base-discoverer.js').DiscoveredRoute[]>}
+   */
+  async discover() {
+    // First, inject pushState interception
+    await this.injectInterception();
+
+    // Get routes from various sources
+    const rawRoutes = await this.page.evaluate(() => {
+      const routes = [];
+
+      // Method 1: React Router Link components (they render as <a> tags)
+      document.querySelectorAll('a[href]').forEach(link => {
+        const href = link.getAttribute('href');
+        if (!href || !href.startsWith('/')) return;
+
+        // React Router Links typically don't have target="_blank"
+        // and are within the app structure
+        const isInternalLink = !link.hasAttribute('target') ||
+                              link.getAttribute('target') === '_self';
+
+        if (isInternalLink) {
+          const isInNav = link.closest('nav, header, [role="navigation"], [class*="nav"], [class*="menu"]');
+          const text = link.textContent?.trim();
+
+          // Detect React-specific patterns
+          const reactRoot = document.getElementById('root') ||
+                           document.querySelector('[data-reactroot]');
+          const isInsideReact = reactRoot && reactRoot.contains(link);
+
+          if (isInNav || isInsideReact) {
+            routes.push({
+              path: href,
+              name: text || '',
+              source: isInsideReact ? 'framework' : 'link-scrape'
+            });
+          }
+        }
+      });
+
+      // Method 2: Check for intercepted routes
+      if (window.__DISCOVERED_ROUTES__ && Array.isArray(window.__DISCOVERED_ROUTES__)) {
+        window.__DISCOVERED_ROUTES__.forEach(url => {
+          try {
+            const path = new URL(url, window.location.origin).pathname;
+            if (!routes.some(r => r.path === path)) {
+              routes.push({
+                path,
+                source: 'interception'
+              });
+            }
+          } catch {
+            // Invalid URL
+          }
+        });
+      }
+
+      // Method 3: Look for NavLink active classes (React Router specific)
+      document.querySelectorAll('a.active, a[aria-current="page"]').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'
+            });
+          }
+        }
+      });
+
+      return routes;
+    });
+
+    const processedRoutes = rawRoutes.map(route => ({
+      ...route,
+      name: route.name || this.extractPageName(route.path),
+      path: this.normalizeRoute(route.path)
+    }));
+
+    return this.deduplicateRoutes(processedRoutes);
+  }
+
+  /**
+   * Inject history.pushState interception script
+   */
+  async injectInterception() {
+    try {
+      await this.page.evaluate(() => {
+        if (window.__ROUTE_INTERCEPTION_ACTIVE__) return;
+
+      window.__DISCOVERED_ROUTES__ = [];
+      window.__ROUTE_INTERCEPTION_ACTIVE__ = true;
+
+      // Intercept pushState
+      const originalPushState = history.pushState.bind(history);
+      history.pushState = function(state, title, url) {
+        if (url) {
+          window.__DISCOVERED_ROUTES__.push(url.toString());
+        }
+        return originalPushState(state, title, url);
+      };
+
+      // Intercept replaceState
+      const originalReplaceState = history.replaceState.bind(history);
+      history.replaceState = function(state, title, url) {
+        if (url) {
+          window.__DISCOVERED_ROUTES__.push(url.toString());
+        }
+        return originalReplaceState(state, title, url);
+      };
+
+      // Listen for popstate
+      window.addEventListener('popstate', () => {
+        window.__DISCOVERED_ROUTES__.push(window.location.pathname);
+      });
+    });
+    } catch {
+      // Interception may fail in some browser contexts, continue without it
+    }
+  }
+}
+
+export default ReactDiscoverer;

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

@@ -0,0 +1,109 @@
+/**
+ * Svelte/SvelteKit Route Discoverer
+ *
+ * Extracts routes from SvelteKit applications using:
+ * - SvelteKit internal routing state
+ * - data-sveltekit-* attributes
+ * - Standard link scraping for static Svelte apps
+ */
+
+import { BaseDiscoverer } from './base-discoverer.js';
+
+export class SvelteDiscoverer extends BaseDiscoverer {
+  /**
+   * Discover routes from a Svelte/SvelteKit application
+   * @returns {Promise<import('./base-discoverer.js').DiscoveredRoute[]>}
+   */
+  async discover() {
+    const rawRoutes = await this.page.evaluate(() => {
+      const routes = [];
+
+      // Method 1: SvelteKit internal state
+      if (window.__sveltekit_routes__) {
+        // This global may exist in dev mode
+        Object.keys(window.__sveltekit_routes__).forEach(path => {
+          routes.push({
+            path,
+            source: 'framework'
+          });
+        });
+      }
+
+      // Method 2: __sveltekit object
+      if (window.__sveltekit?.navigation) {
+        // May contain navigation state
+      }
+
+      // Method 3: data-sveltekit-preload-data links (SvelteKit's prefetching)
+      document.querySelectorAll('a[data-sveltekit-preload-data]').forEach(link => {
+        const href = link.getAttribute('href');
+        if (href && href.startsWith('/')) {
+          routes.push({
+            path: href,
+            name: link.textContent?.trim() || '',
+            source: 'framework'
+          });
+        }
+      });
+
+      // Method 4: data-sveltekit-reload links
+      document.querySelectorAll('a[data-sveltekit-reload]').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 5: data-sveltekit-noscroll links
+      document.querySelectorAll('a[data-sveltekit-noscroll]').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 6: Standard navigation links (for all Svelte apps)
+      document.querySelectorAll('nav a, header a, [role="navigation"] a').forEach(link => {
+        const href = link.getAttribute('href');
+        if (href && href.startsWith('/')) {
+          // Check if it's a SvelteKit link
+          const isSvelteKitLink = link.hasAttribute('data-sveltekit-preload-data') ||
+                                 link.hasAttribute('data-sveltekit-reload') ||
+                                 link.hasAttribute('data-sveltekit-noscroll');
+
+          if (!routes.some(r => r.path === href)) {
+            routes.push({
+              path: href,
+              name: link.textContent?.trim() || '',
+              source: isSvelteKitLink ? 'framework' : 'link-scrape'
+            });
+          }
+        }
+      });
+
+      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 SvelteDiscoverer;

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

@@ -0,0 +1,227 @@
+/**
+ * Universal Route Discoverer
+ *
+ * Fallback discoverer for unknown frameworks or static sites.
+ * Uses comprehensive techniques:
+ * - history.pushState/replaceState interception
+ * - Exhaustive link scraping from navigation elements
+ * - Sitemap.xml parsing if available
+ */
+
+import { BaseDiscoverer } from './base-discoverer.js';
+
+export class UniversalDiscoverer extends BaseDiscoverer {
+  /**
+   * Discover routes using universal techniques
+   * @returns {Promise<import('./base-discoverer.js').DiscoveredRoute[]>}
+   */
+  async discover() {
+    // First, inject history interception
+    await this.injectHistoryInterception();
+
+    // Get routes from multiple sources
+    const rawRoutes = await this.page.evaluate(() => {
+      const routes = [];
+      const seenPaths = new Set();
+
+      /**
+       * Add route if not already seen
+       */
+      function addRoute(path, name, source) {
+        if (!path || seenPaths.has(path)) return;
+        if (!path.startsWith('/')) return;
+
+        // Skip common non-page paths
+        const skipPatterns = [
+          /\.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot|map)$/i,
+          /^\/api\//,
+          /^\/_next\//,
+          /^\/_nuxt\//,
+          /^\/static\//,
+          /^\/assets\//,
+        ];
+
+        if (skipPatterns.some(pattern => pattern.test(path))) return;
+
+        seenPaths.add(path);
+        routes.push({
+          path,
+          name: name || '',
+          source
+        });
+      }
+
+      // Method 1: History interception results
+      if (window.__UNIVERSAL_DISCOVERED_ROUTES__ && Array.isArray(window.__UNIVERSAL_DISCOVERED_ROUTES__)) {
+        window.__UNIVERSAL_DISCOVERED_ROUTES__.forEach(url => {
+          try {
+            const path = new URL(url, window.location.origin).pathname;
+            addRoute(path, '', 'interception');
+          } catch {
+            // Invalid URL, skip
+          }
+        });
+      }
+
+      // Method 2: Navigation elements (high confidence)
+      const navSelectors = [
+        'nav a[href]',
+        'header a[href]',
+        '[role="navigation"] a[href]',
+        '[class*="nav"] a[href]',
+        '[class*="menu"] a[href]',
+        '[class*="sidebar"] a[href]',
+        'footer a[href]'
+      ];
+
+      navSelectors.forEach(selector => {
+        document.querySelectorAll(selector).forEach(link => {
+          const href = link.getAttribute('href');
+          if (href && href.startsWith('/')) {
+            addRoute(href, link.textContent?.trim() || '', 'link-scrape');
+          }
+        });
+      });
+
+      // Method 3: All internal links (lower confidence but comprehensive)
+      document.querySelectorAll('a[href^="/"]').forEach(link => {
+        const href = link.getAttribute('href');
+        if (href) {
+          // Skip if has target="_blank" or download attribute
+          if (link.hasAttribute('download')) return;
+          if (link.getAttribute('target') === '_blank') return;
+
+          addRoute(href, link.textContent?.trim() || '', 'link-scrape');
+        }
+      });
+
+      // Method 4: Links in main content area
+      const mainSelectors = ['main', '[role="main"]', '#content', '.content', 'article'];
+      mainSelectors.forEach(selector => {
+        const main = document.querySelector(selector);
+        if (main) {
+          main.querySelectorAll('a[href^="/"]').forEach(link => {
+            const href = link.getAttribute('href');
+            if (href && !link.hasAttribute('download')) {
+              addRoute(href, link.textContent?.trim() || '', 'link-scrape');
+            }
+          });
+        }
+      });
+
+      return routes;
+    });
+
+    // Try to fetch sitemap
+    const sitemapRoutes = await this.fetchSitemapRoutes();
+
+    // Combine all routes
+    const allRoutes = [...rawRoutes, ...sitemapRoutes];
+
+    const processedRoutes = allRoutes.map(route => ({
+      ...route,
+      name: route.name || this.extractPageName(route.path),
+      path: this.normalizeRoute(route.path)
+    }));
+
+    return this.deduplicateRoutes(processedRoutes);
+  }
+
+  /**
+   * Inject history.pushState/replaceState interception
+   */
+  async injectHistoryInterception() {
+    try {
+      await this.page.evaluate(() => {
+        if (window.__UNIVERSAL_INTERCEPTION_ACTIVE__) return;
+
+      window.__UNIVERSAL_DISCOVERED_ROUTES__ = [];
+      window.__UNIVERSAL_INTERCEPTION_ACTIVE__ = true;
+
+      // Intercept pushState
+      const originalPushState = history.pushState.bind(history);
+      history.pushState = function(state, title, url) {
+        if (url) {
+          window.__UNIVERSAL_DISCOVERED_ROUTES__.push(url.toString());
+        }
+        return originalPushState(state, title, url);
+      };
+
+      // Intercept replaceState
+      const originalReplaceState = history.replaceState.bind(history);
+      history.replaceState = function(state, title, url) {
+        if (url) {
+          window.__UNIVERSAL_DISCOVERED_ROUTES__.push(url.toString());
+        }
+        return originalReplaceState(state, title, url);
+      };
+
+      // Listen for popstate
+      window.addEventListener('popstate', () => {
+        window.__UNIVERSAL_DISCOVERED_ROUTES__.push(window.location.pathname);
+      });
+
+      // Listen for hashchange (for hash-based routing)
+      window.addEventListener('hashchange', () => {
+        window.__UNIVERSAL_DISCOVERED_ROUTES__.push(window.location.href);
+      });
+    });
+    } catch {
+      // Interception may fail in some browser contexts, continue without it
+    }
+  }
+
+  /**
+   * Try to fetch and parse sitemap.xml
+   * @returns {Promise<import('./base-discoverer.js').DiscoveredRoute[]>}
+   */
+  async fetchSitemapRoutes() {
+    const routes = [];
+
+    try {
+      const sitemapUrl = new URL('/sitemap.xml', this.baseUrl).href;
+
+      const response = await this.page.evaluate(async (url) => {
+        try {
+          // Add timeout using AbortController
+          const controller = new AbortController();
+          const timeoutId = setTimeout(() => controller.abort(), 5000);
+
+          const res = await fetch(url, { signal: controller.signal });
+          clearTimeout(timeoutId);
+
+          if (!res.ok) return null;
+          return await res.text();
+        } catch {
+          return null;
+        }
+      }, sitemapUrl);
+
+      if (response) {
+        // Parse sitemap XML
+        const urlMatches = response.matchAll(/<loc>([^<]+)<\/loc>/gi);
+        for (const match of urlMatches) {
+          try {
+            const url = new URL(match[1]);
+            // Only include paths from same origin
+            if (url.origin === new URL(this.baseUrl).origin) {
+              routes.push({
+                path: url.pathname,
+                name: '',
+                source: 'sitemap'
+              });
+            }
+          } catch {
+            // Invalid URL in sitemap
+          }
+        }
+      }
+    } catch {
+      // Sitemap fetch failed, continue without it
+    }
+
+    return routes;
+  }
+}
+
+export default UniversalDiscoverer;