design-clone 1.2.0 → 2.1.0

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

@@ -0,0 +1,130 @@
+/**
+ * Next.js Route Discoverer
+ *
+ * Extracts routes from Next.js applications using:
+ * - window.__NEXT_DATA__ (always present)
+ * - window.__BUILD_MANIFEST (pages router)
+ * - window.__NEXT_LOADED_PAGES__ (loaded pages)
+ *
+ * Supports both Pages Router and App Router.
+ */
+
+import { BaseDiscoverer } from './base-discoverer.js';
+
+export class NextDiscoverer extends BaseDiscoverer {
+  /**
+   * Discover routes from a Next.js application
+   * @returns {Promise<import('./base-discoverer.js').DiscoveredRoute[]>}
+   */
+  async discover() {
+    const rawRoutes = await this.page.evaluate(() => {
+      const routes = [];
+
+      // Method 1: __NEXT_DATA__ (always present in Next.js)
+      if (window.__NEXT_DATA__) {
+        const nextData = window.__NEXT_DATA__;
+
+        // Current page
+        if (nextData.page) {
+          routes.push({
+            path: nextData.page,
+            name: 'Current Page',
+            source: 'framework',
+            component: nextData.page
+          });
+        }
+
+        // Dynamic route info from query
+        if (nextData.query && Object.keys(nextData.query).length > 0) {
+          // The page path with dynamic segments
+        }
+      }
+
+      // Method 2: __BUILD_MANIFEST (Pages Router - contains all static routes)
+      if (window.__BUILD_MANIFEST && typeof window.__BUILD_MANIFEST === 'object') {
+        const manifest = window.__BUILD_MANIFEST;
+        const manifestKeys = Object.keys(manifest);
+        if (!Array.isArray(manifestKeys)) return routes;
+
+        const pages = manifestKeys.filter(p =>
+          !p.startsWith('/_') && // Skip internal pages
+          (!p.includes('[') || p === '/') // Include root and static pages (fixed precedence)
+        );
+
+        pages.forEach(page => {
+          if (!routes.some(r => r.path === page)) {
+            routes.push({
+              path: page,
+              source: 'framework',
+              component: page
+            });
+          }
+        });
+
+        // Also get dynamic routes
+        const dynamicPages = Object.keys(manifest).filter(p =>
+          p.includes('[') && !p.startsWith('/_')
+        );
+
+        dynamicPages.forEach(page => {
+          if (!routes.some(r => r.path === page)) {
+            routes.push({
+              path: page,
+              source: 'framework',
+              component: page,
+              dynamic: true
+            });
+          }
+        });
+      }
+
+      // Method 3: __NEXT_LOADED_PAGES__ (pages that have been loaded)
+      if (window.__NEXT_LOADED_PAGES__ && Array.isArray(window.__NEXT_LOADED_PAGES__)) {
+        window.__NEXT_LOADED_PAGES__.forEach(page => {
+          if (!routes.some(r => r.path === page) && !page.startsWith('/_')) {
+            routes.push({
+              path: page,
+              source: 'framework',
+              component: page
+            });
+          }
+        });
+      }
+
+      // Method 4: Next.js Link components in DOM
+      document.querySelectorAll('a[href]').forEach(link => {
+        const href = link.getAttribute('href');
+        if (href && href.startsWith('/') && !href.startsWith('/_')) {
+          // Check if it's a Next.js Link by looking for data attributes
+          const isNextLink = link.hasAttribute('data-next') ||
+                            link.closest('[data-next]') ||
+                            link.hasAttribute('data-nscript');
+
+          if (isNextLink || 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: isNextLink ? '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 NextDiscoverer;

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;