design-clone 2.1.0 → 3.0.0

package/src/post-process/inject-icons-svg-replacer.js

@@ -0,0 +1,76 @@
+/**
+ * SVG Icon Replacer Utilities
+ *
+ * Handles finding SVG placeholder elements in HTML and preserving
+ * original attributes (class, width, height, aria-*) when injecting
+ * replacement icons.
+ */
+
+/**
+ * Extract surrounding context text from HTML at a given position.
+ * @param {string} html
+ * @param {number} position - Character index of the SVG element
+ * @param {number} range - Characters to capture before and after
+ * @returns {string}
+ */
+export function extractContext(html, position, range = 200) {
+  const start = Math.max(0, position - range);
+  const end   = Math.min(html.length, position + range);
+  return html.slice(start, end);
+}
+
+/**
+ * Find SVG elements that are candidates for icon replacement.
+ * Skips logos (text elements, >6 path nodes, logo/brand class).
+ * @param {string} html
+ * @param {Function} detectPurpose - detectIconPurpose(svgTag, context) → string
+ * @returns {Array<{ original, position, context, purpose }>}
+ */
+export function findSvgElements(html, detectPurpose) {
+  const elements = [];
+  const svgRegex = /<svg[^>]*viewBox=["'][^"']*["'][^>]*>[\s\S]*?<\/svg>/gi;
+  let match;
+
+  while ((match = svgRegex.exec(html)) !== null) {
+    const svgTag  = match[0];
+    const context = extractContext(html, match.index);
+
+    const pathCount = (svgTag.match(/<(path|circle|rect|line|polyline|polygon)/gi) || []).length;
+
+    // Skip complex SVGs (likely logos or illustrations)
+    if (svgTag.includes('<text') || pathCount > 6) continue;
+    if (/class=["'][^"']*(logo|brand)[^"']*["']/i.test(svgTag)) continue;
+
+    elements.push({
+      original: svgTag,
+      position: match.index,
+      context,
+      purpose: detectPurpose(svgTag, context)
+    });
+  }
+
+  return elements;
+}
+
+/**
+ * Preserve original SVG attributes (class, width, height, aria-*)
+ * when replacing with a new icon SVG string.
+ * @param {string} originalSvg - The original SVG markup
+ * @param {string} newSvg - The replacement icon SVG markup
+ * @returns {string} New SVG with original attributes preserved
+ */
+export function preserveAttributes(originalSvg, newSvg) {
+  const classMatch  = originalSvg.match(/class=["']([^"']*)["']/i);
+  const widthMatch  = originalSvg.match(/width=["']([^"']*)["']/i);
+  const heightMatch = originalSvg.match(/height=["']([^"']*)["']/i);
+  const ariaMatch   = originalSvg.match(/aria-[^=]+=["'][^"']*["']/gi);
+
+  let result = newSvg;
+
+  if (classMatch)  result = result.replace('<svg', `<svg class="${classMatch[1]}"`);
+  if (widthMatch)  result = result.replace('<svg', `<svg width="${widthMatch[1]}"`);
+  if (heightMatch) result = result.replace('<svg', `<svg height="${heightMatch[1]}"`);
+  if (ariaMatch)   result = result.replace('<svg', `<svg ${ariaMatch.join(' ')}`);
+
+  return result;
+}

package/src/post-process/inject-icons.js

@@ -12,85 +12,52 @@
  */
 
 import fs from 'fs/promises';
-import path from 'path';
-import { icons, iconMapping, getIcon, getIconByKeyword } from './icons/japanese-icons.js';
+import { icons, iconMapping, getIcon } from './icons/japanese-icons.js';
+import { parseArgs as parseRawArgs } from '../utils/helpers.js';
+import { findSvgElements, preserveAttributes } from './inject-icons-svg-replacer.js';
 
 /**
- * Parse command line arguments
+ * Parse command line arguments.
+ * @returns {{ html: string|null, verbose: boolean }}
  */
 function parseArgs() {
-  const args = process.argv.slice(2);
-  const options = {
-    html: null,
-    verbose: false
+  const raw = parseRawArgs(process.argv.slice(2));
+  return {
+    html:    raw.html    || null,
+    verbose: raw.verbose === true || raw.verbose === 'true'
   };
-
-  for (let i = 0; i < args.length; i++) {
-    switch (args[i]) {
-      case '--html':
-        options.html = args[++i];
-        break;
-      case '--verbose':
-        options.verbose = true;
-        break;
-    }
-  }
-
-  return options;
-}
-
-/**
- * Extract context from element's surrounding HTML
- */
-function extractContext(html, position, range = 200) {
-  const start = Math.max(0, position - range);
-  const end = Math.min(html.length, position + range);
-  return html.slice(start, end);
 }
 
 /**
- * Detect icon purpose from class names, aria-label, or surrounding text
+ * Detect icon purpose from class names, aria-label, or surrounding text.
+ * @param {string} svgTag - The SVG opening tag markup
+ * @param {string} context - Surrounding HTML context string
+ * @returns {string} Matched keyword or 'decorative'
  */
-function detectIconPurpose(svgTag, context) {
-  // Check class names
+export function detectIconPurpose(svgTag, context) {
   const classMatch = svgTag.match(/class=["']([^"']*)["']/i);
   if (classMatch) {
     const classes = classMatch[1].toLowerCase();
-
-    // Check for icon type in class
     for (const keyword of Object.keys(iconMapping)) {
-      if (classes.includes(keyword)) {
-        return keyword;
-      }
+      if (classes.includes(keyword)) return keyword;
     }
-
-    // Check for category hints
     if (classes.includes('icon')) {
-      // Try to extract purpose from class like "icon-mail" or "mail-icon"
       const parts = classes.split(/[-_\s]+/);
       for (const part of parts) {
-        if (iconMapping[part]) {
-          return part;
-        }
+        if (iconMapping[part]) return part;
       }
     }
   }
 
-  // Check aria-label
   const ariaMatch = svgTag.match(/aria-label=["']([^"']*)["']/i);
   if (ariaMatch) {
     const label = ariaMatch[1].toLowerCase();
     for (const keyword of Object.keys(iconMapping)) {
-      if (label.includes(keyword)) {
-        return keyword;
-      }
+      if (label.includes(keyword)) return keyword;
     }
   }
 
-  // Check surrounding context for hints
   const contextLower = context.toLowerCase();
-
-  // Priority keywords for Japanese business sites
   const priorityKeywords = [
     'mail', 'email', 'phone', 'tel', 'location', 'address',
     'menu', 'search', 'home', 'arrow', 'chevron',
@@ -99,191 +66,78 @@ function detectIconPurpose(svgTag, context) {
     'check', 'info', 'warning', 'success', 'star',
     'sakura', 'wave', 'zen'
   ];
-
   for (const keyword of priorityKeywords) {
-    if (contextLower.includes(keyword)) {
-      return keyword;
-    }
+    if (contextLower.includes(keyword)) return keyword;
   }
 
-  // Default to decorative
   return 'decorative';
 }
 
 /**
- * Find SVG elements that need replacement
+ * Inject replacement icons into HTML file.
+ * @param {string} htmlPath
+ * @param {boolean} verbose
+ * @returns {Promise<{ success: boolean, replacedCount: number, replacements?: Array }>}
  */
-function findSvgElements(html) {
-  const elements = [];
-
-  // Pattern 1: Generic SVG with viewBox (likely placeholder)
-  const svgRegex = /<svg[^>]*viewBox=["'][^"']*["'][^>]*>[\s\S]*?<\/svg>/gi;
+export async function injectIcons(htmlPath, verbose = false) {
+  const html     = await fs.readFile(htmlPath, 'utf-8');
+  const elements = findSvgElements(html, detectIconPurpose);
 
-  let match;
-  while ((match = svgRegex.exec(html)) !== null) {
-    const svgTag = match[0];
-    const context = extractContext(html, match.index);
-
-    // Skip if it's a complex SVG (logo, illustration)
-    // Simple icons typically have fewer than 3 path/shape elements
-    const pathCount = (svgTag.match(/<(path|circle|rect|line|polyline|polygon)/gi) || []).length;
-
-    // Skip logo SVGs (typically contain text elements or complex paths)
-    if (svgTag.includes('<text') || pathCount > 6) {
-      continue;
-    }
-
-    // Skip if it has specific classes indicating it's a logo
-    if (/class=["'][^"']*(logo|brand)[^"']*["']/i.test(svgTag)) {
-      continue;
-    }
-
-    elements.push({
-      original: svgTag,
-      position: match.index,
-      context: context,
-      purpose: detectIconPurpose(svgTag, context)
-    });
-  }
-
-  return elements;
-}
-
-/**
- * Preserve original attributes when replacing SVG
- */
-function preserveAttributes(originalSvg, newSvg) {
-  // Extract class from original
-  const classMatch = originalSvg.match(/class=["']([^"']*)["']/i);
-  const widthMatch = originalSvg.match(/width=["']([^"']*)["']/i);
-  const heightMatch = originalSvg.match(/height=["']([^"']*)["']/i);
-  const ariaMatch = originalSvg.match(/aria-[^=]+=["'][^"']*["']/gi);
-
-  let result = newSvg;
-
-  // Add class if present
-  if (classMatch) {
-    result = result.replace('<svg', `<svg class="${classMatch[1]}"`);
-  }
-
-  // Preserve width/height if specified
-  if (widthMatch) {
-    result = result.replace('<svg', `<svg width="${widthMatch[1]}"`);
-  }
-  if (heightMatch) {
-    result = result.replace('<svg', `<svg height="${heightMatch[1]}"`);
-  }
-
-  // Preserve aria attributes
-  if (ariaMatch) {
-    const attrs = ariaMatch.join(' ');
-    result = result.replace('<svg', `<svg ${attrs}`);
-  }
-
-  return result;
-}
-
-/**
- * Inject icons into HTML
- */
-async function injectIcons(htmlPath, verbose = false) {
-  // Read HTML
-  const html = await fs.readFile(htmlPath, 'utf-8');
-
-  // Find SVG elements
-  const elements = findSvgElements(html);
-
-  if (verbose) {
-    console.log(`  Found ${elements.length} SVG elements to enhance`);
-  }
+  if (verbose) console.log(`  Found ${elements.length} SVG elements to enhance`);
 
   if (elements.length === 0) {
     console.log('  → No SVG icons to enhance');
-    return {
-      success: true,
-      replacedCount: 0
-    };
+    return { success: true, replacedCount: 0 };
   }
 
-  let updatedHtml = html;
+  let updatedHtml   = html;
   let replacedCount = 0;
   const replacements = [];
 
-  // Process elements in reverse order to maintain positions
-  const sortedElements = [...elements].sort((a, b) => b.position - a.position);
+  // Process in reverse order to preserve character positions
+  const sorted = [...elements].sort((a, b) => b.position - a.position);
 
-  for (const element of sortedElements) {
-    const iconName = iconMapping[element.purpose] || 'decorative-dot';
-    const newIcon = getIcon(iconName);
+  for (const element of sorted) {
+    const iconName      = iconMapping[element.purpose] || 'decorative-dot';
+    const newIcon       = getIcon(iconName);
     const preservedIcon = preserveAttributes(element.original, newIcon);
 
     updatedHtml = updatedHtml.replace(element.original, preservedIcon);
     replacedCount++;
+    replacements.push({ purpose: element.purpose, iconName });
 
-    replacements.push({
-      purpose: element.purpose,
-      iconName: iconName
-    });
-
-    if (verbose) {
-      console.log(`  → Replaced: ${element.purpose} → ${iconName}`);
-    }
+    if (verbose) console.log(`  → Replaced: ${element.purpose} → ${iconName}`);
   }
 
-  // Write updated HTML
   await fs.writeFile(htmlPath, updatedHtml, 'utf-8');
-
   console.log(`  ✓ Enhanced ${replacedCount} icons with Japanese style`);
 
-  return {
-    success: true,
-    replacedCount,
-    replacements
-  };
+  return { success: true, replacedCount, replacements };
 }
 
 /**
- * Add icon styles to HTML if not present
+ * Ensure icon base styles are present in HTML (idempotent).
+ * @param {string} htmlPath
  */
-async function ensureIconStyles(htmlPath) {
+export async function ensureIconStyles(htmlPath) {
   const html = await fs.readFile(htmlPath, 'utf-8');
-
-  // Check if icon styles already exist
-  if (html.includes('.icon {') || html.includes('/* Icon styles */')) {
-    return;
-  }
+  if (html.includes('.icon {') || html.includes('/* Icon styles */')) return;
 
   const iconStyles = `
   /* Japanese-style icon defaults */
-  .icon {
-    width: 24px;
-    height: 24px;
-    flex-shrink: 0;
-  }
-
-  .icon--sm {
-    width: 16px;
-    height: 16px;
-  }
-
-  .icon--lg {
-    width: 32px;
-    height: 32px;
-  }
-
-  .icon--decorative {
-    opacity: 0.6;
-  }
+  .icon { width: 24px; height: 24px; flex-shrink: 0; }
+  .icon--sm { width: 16px; height: 16px; }
+  .icon--lg { width: 32px; height: 32px; }
+  .icon--decorative { opacity: 0.6; }
 `;
 
-  // Find </style> or add before </head>
   let updatedHtml;
   if (html.includes('</style>')) {
     updatedHtml = html.replace('</style>', `${iconStyles}\n</style>`);
   } else if (html.includes('</head>')) {
     updatedHtml = html.replace('</head>', `<style>${iconStyles}</style>\n</head>`);
   } else {
-    return; // Can't safely add styles
+    return;
   }
 
   await fs.writeFile(htmlPath, updatedHtml, 'utf-8');
@@ -299,13 +153,6 @@ if (process.argv[1] === new URL(import.meta.url).pathname) {
   }
 
   injectIcons(args.html, args.verbose)
-    .then(result => {
-      console.log(JSON.stringify(result, null, 2));
-    })
-    .catch(error => {
-      console.error('Error:', error.message);
-      process.exit(1);
-    });
+    .then(result => console.log(JSON.stringify(result, null, 2)))
+    .catch(error => { console.error('Error:', error.message); process.exit(1); });
 }
-
-export { injectIcons, findSvgElements, detectIconPurpose };

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

@@ -0,0 +1,137 @@
+/**
+ * Base Discoverer Utilities
+ *
+ * Route normalization, deduplication, name extraction, and string helpers
+ * extracted from base-discoverer.js to keep each file under 200 lines.
+ */
+
+// Dynamic segment patterns for detecting parameterized routes
+export const DYNAMIC_PATTERNS = [
+  /\[[\w-]+\]/,            // Next.js [slug]
+  /\[\.\.\.([\w-]+)\]/,   // Next.js catch-all [...slug]
+  /:[\w-]+/,               // Vue/React :id
+  /\{[\w-]+\}/,            // Angular {id}
+  /\*[\w-]*/               // Wildcard
+];
+
+// Source priority for deduplication (higher = preferred)
+export const SOURCE_PRIORITY = {
+  'framework': 4,
+  'interception': 3,
+  'sitemap': 2,
+  'link-scrape': 1
+};
+
+/**
+ * Normalize a route path:
+ * - Strips full URL to pathname
+ * - Ensures leading slash
+ * - Removes query params and hash
+ * - Removes trailing slash (except root)
+ * @param {string} rawPath
+ * @returns {string}
+ */
+export function normalizeRoute(rawPath) {
+  if (!rawPath || typeof rawPath !== 'string') return '/';
+
+  let p = rawPath;
+
+  if (p.startsWith('http')) {
+    try {
+      p = new URL(p).pathname;
+    } catch {
+      return '/';
+    }
+  }
+
+  if (!p.startsWith('/')) p = '/' + p;
+
+  p = p.split('?')[0].split('#')[0];
+
+  if (p.length > 1 && p.endsWith('/')) p = p.slice(0, -1);
+
+  return p;
+}
+
+/**
+ * Check if a path contains dynamic segments
+ * @param {string} path
+ * @returns {boolean}
+ */
+export function isDynamicRoute(path) {
+  return DYNAMIC_PATTERNS.some(pattern => pattern.test(path));
+}
+
+/**
+ * Convert string to Title Case (handles kebab-case and snake_case)
+ * @param {string} str
+ * @returns {string}
+ */
+export function titleCase(str) {
+  return str
+    .replace(/[-_]/g, ' ')
+    .replace(/\b\w/g, c => c.toUpperCase());
+}
+
+/**
+ * Extract a human-readable page name from a route path
+ * @param {string} path - Route path
+ * @param {string} [componentName] - Optional component name hint
+ * @returns {string}
+ */
+export function extractPageName(path, componentName) {
+  if (componentName && componentName !== 'default' && componentName !== 'index') {
+    return componentName
+      .replace(/([A-Z])/g, ' $1')
+      .replace(/^./, s => s.toUpperCase())
+      .trim();
+  }
+
+  const normalized = normalizeRoute(path);
+  if (normalized === '/') return 'Home';
+
+  const segments = normalized.split('/').filter(Boolean);
+  if (segments.length === 0) return 'Home';
+
+  let lastSegment = segments[segments.length - 1];
+
+  if (isDynamicRoute(lastSegment)) {
+    lastSegment = lastSegment.replace(/[\[\]:{}*\.]/g, '');
+    return `${titleCase(lastSegment)} (Dynamic)`;
+  }
+
+  return titleCase(lastSegment);
+}
+
+/**
+ * Deduplicate routes by path, preferring higher-priority sources.
+ * @param {Array} routes - Raw route objects
+ * @param {string} baseOrigin - Origin for building full URLs
+ * @returns {Array} Deduplicated routes with normalized paths and full URLs
+ */
+export function deduplicateRoutes(routes, baseOrigin) {
+  const seen = new Map();
+
+  for (const route of routes) {
+    const normalized = normalizeRoute(route.path);
+    const existing = seen.get(normalized);
+
+    const currentPriority = SOURCE_PRIORITY[route.source] || 0;
+    const existingPriority = existing ? (SOURCE_PRIORITY[existing.source] || 0) : -1;
+
+    const shouldReplace = !existing ||
+      currentPriority > existingPriority ||
+      (currentPriority === existingPriority && route.name && !existing.name);
+
+    if (shouldReplace) {
+      seen.set(normalized, {
+        ...route,
+        path: normalized,
+        url: `${baseOrigin}${normalized}`,
+        dynamic: isDynamicRoute(normalized)
+      });
+    }
+  }
+
+  return Array.from(seen.values());
+}