draply-dev 1.2.0 → 1.2.1

package/bin/cli.js

@@ -35,12 +35,11 @@ function decode(headers, chunks) {
   });
 }
 
-// Храним CSS в скрытой папке .draply/ чтобы не засорять проект юзера
+// Store CSS in hidden .draply/ folder to keep user's project clean
 const projectRoot = process.cwd();
 const draplyDir = path.join(projectRoot, '.draply');
 if (!fs.existsSync(draplyDir)) {
   fs.mkdirSync(draplyDir, { recursive: true });
-  // Добавляем .draply в .gitignore если он есть
   const gitignorePath = path.join(projectRoot, '.gitignore');
   if (fs.existsSync(gitignorePath)) {
     const gi = fs.readFileSync(gitignorePath, 'utf8');
@@ -54,7 +53,6 @@ if (!fs.existsSync(overridesPath)) {
   fs.writeFileSync(overridesPath, '/* draply */\n', 'utf8');
 }
 
-
 const server = http.createServer((req, res) => {
 
   // CORS preflight
@@ -63,28 +61,13 @@ const server = http.createServer((req, res) => {
   res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
   if (req.method === 'OPTIONS') { res.writeHead(204); res.end(); return; }
 
-  // ── Draply: Save endpoint — AUTO-APPLY to source files ─────────────────────
+  // ── Draply: Save changes to CSS ─────────────────────────────────────────────
   if (req.url === '/draply-save' && req.method === 'POST') {
     let body = '';
     req.on('data', c => body += c);
     req.on('end', () => {
       try {
         const { changes } = JSON.parse(body);
-        const projectInfo = detectProject(projectRoot);
-        const results = [];
-
-        for (const ch of (changes || [])) {
-          if (!ch.selector || !ch.props) continue;
-          const result = autoApplyChange(projectRoot, ch.selector, ch.props, projectInfo);
-          results.push(result);
-          if (result.applied) {
-            console.log(` \x1b[32m✓\x1b[0m Applied: ${result.file} (${result.strategy})`);
-          } else {
-            console.log(` \x1b[33m⚠\x1b[0m Fallback CSS: ${ch.selector.split('>').pop().trim()}`);
-          }
-        }
-
-        // Also save CSS override as backup
         const lines = [];
         for (const ch of (changes || [])) {
           if (!ch.selector) continue;
@@ -96,11 +79,9 @@ const server = http.createServer((req, res) => {
         }
         const css = '/* draply — ' + new Date().toLocaleString('ru-RU') + ' */\n\n' + lines.join('\n\n') + '\n';
         fs.writeFileSync(overridesPath, css, 'utf8');
-
-        const applied = results.filter(r => r.applied).length;
-        const total = results.length;
+        console.log(` \x1b[32m✓\x1b[0m Saved ${changes.length} changes to .draply/overrides.css`);
         res.writeHead(200, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ ok: true, applied, total, results }));
+        res.end(JSON.stringify({ ok: true }));
       } catch (e) {
         res.writeHead(500, { 'Content-Type': 'application/json' });
         res.end(JSON.stringify({ ok: false, error: e.message }));
@@ -133,32 +114,6 @@ const server = http.createServer((req, res) => {
     return;
   }
 
-  // ── Draply: Project Info endpoint ──────────────────────────────────────────
-  if (req.url === '/draply-project-info' && req.method === 'GET') {
-    const info = detectProject(projectRoot);
-    res.writeHead(200, { 'Content-Type': 'application/json' });
-    res.end(JSON.stringify(info));
-    return;
-  }
-
-  // ── Draply: Find Source endpoint ──────────────────────────────────────────
-  if (req.url === '/draply-find-source' && req.method === 'POST') {
-    let body = '';
-    req.on('data', c => body += c);
-    req.on('end', () => {
-      try {
-        const { selector, tagName, className } = JSON.parse(body);
-        const result = findSourceFile(projectRoot, { selector, tagName, className });
-        res.writeHead(200, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify(result));
-      } catch (e) {
-        res.writeHead(500, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ found: false, error: e.message }));
-      }
-    });
-    return;
-  }
-
   // ── Proxy to dev server ────────────────────────────────────────────────────
   const opts = {
     hostname: targetHost,
@@ -196,8 +151,8 @@ const server = http.createServer((req, res) => {
   pReq.on('error', () => {
     res.writeHead(502, { 'Content-Type': 'text/html' });
     res.end(`<!DOCTYPE html><html><body style="background:#0a0a0f;color:#e8e8f0;font-family:monospace;padding:60px;text-align:center">
-      <h2 style="color:#ff6b6b">⚠ Не могу достучаться до ${targetHost}:${targetPort}</h2>
-      <p style="color:#555;margin-top:16px">Убедись что dev сервер запущен, потом обнови страницу</p>
+      <h2 style="color:#ff6b6b">⚠ Can't reach ${targetHost}:${targetPort}</h2>
+      <p style="color:#555;margin-top:16px">Make sure your dev server is running, then refresh</p>
       <script>setTimeout(()=>location.reload(), 2000)</script>
     </body></html>`);
   });
@@ -206,435 +161,10 @@ const server = http.createServer((req, res) => {
 });
 
 server.listen(proxyPort, () => {
-  console.log('\n \x1b[32m●\x1b[0m Draply запущен\n');
-  console.log(` Твой проект  →  \x1b[36mhttp://${targetHost}:${targetPort}\x1b[0m`);
-  console.log(` Открой это  →  \x1b[33mhttp://localhost:${proxyPort}\x1b[0m  \x1b[32m← вот сюда заходи!\x1b[0m\n`);
-  console.log(` \x1b[90mCtrl+C чтобы остановить\x1b[0m\n`);
+  console.log('\n \x1b[32m●\x1b[0m Draply running\n');
+  console.log(` Your project  →  \x1b[36mhttp://${targetHost}:${targetPort}\x1b[0m`);
+  console.log(` Open this     →  \x1b[33mhttp://localhost:${proxyPort}\x1b[0m  \x1b[32m← go here!\x1b[0m\n`);
+  console.log(` \x1b[90mCtrl+C to stop\x1b[0m\n`);
 });
 
-process.on('SIGINT', () => { console.log('\n \x1b[90mDraply остановлен\x1b[0m\n'); process.exit(0); });
-
-// ══════════════════════════════════════════════════════════════════════════
-// PROJECT DETECTION
-// ══════════════════════════════════════════════════════════════════════════
-function detectProject(root) {
-  const result = { framework: 'unknown', cssStrategy: 'unknown', root };
-
-  try {
-    const pkgPath = path.join(root, 'package.json');
-    if (!fs.existsSync(pkgPath)) return result;
-
-    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
-    const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
-
-    // Detect framework
-    if (allDeps['next']) result.framework = 'next';
-    else if (allDeps['react']) result.framework = 'react';
-    else if (allDeps['nuxt']) result.framework = 'nuxt';
-    else if (allDeps['vue']) result.framework = 'vue';
-    else if (allDeps['@angular/core']) result.framework = 'angular';
-    else if (allDeps['svelte']) result.framework = 'svelte';
-    else if (allDeps['vite']) result.framework = 'vite';
-
-    // Detect CSS strategy
-    if (allDeps['tailwindcss']) result.cssStrategy = 'tailwind';
-    else if (allDeps['styled-components']) result.cssStrategy = 'styled-components';
-    else if (allDeps['@emotion/react'] || allDeps['@emotion/styled']) result.cssStrategy = 'emotion';
-    else if (allDeps['sass'] || allDeps['node-sass']) result.cssStrategy = 'sass';
-    else {
-      // Check for CSS modules (usually enabled by default in React/Next)
-      if (['react', 'next'].includes(result.framework)) {
-        result.cssStrategy = 'css-modules';
-      } else {
-        result.cssStrategy = 'external';
-      }
-    }
-  } catch { /* ignore */ }
-
-  return result;
-}
-
-// ══════════════════════════════════════════════════════════════════════════
-// SOURCE FILE FINDER
-// ══════════════════════════════════════════════════════════════════════════
-function findSourceFile(root, { selector, tagName, className }) {
-  const result = { found: false, file: null, line: null, hint: '' };
-
-  try {
-    const srcDirs = ['src', 'app', 'pages', 'components', 'lib'];
-    const extensions = ['.tsx', '.jsx', '.vue', '.svelte', '.js', '.ts'];
-    const searchTerm = className || tagName || '';
-
-    if (!searchTerm) {
-      result.hint = 'Select an element with a class name for better results.';
-      return result;
-    }
-
-    for (const dir of srcDirs) {
-      const dirPath = path.join(root, dir);
-      if (!fs.existsSync(dirPath)) continue;
-
-      const files = walkDir(dirPath, extensions);
-      for (const file of files) {
-        try {
-          const content = fs.readFileSync(file, 'utf8');
-          const lines = content.split('\n');
-          for (let i = 0; i < lines.length; i++) {
-            if (lines[i].includes(searchTerm)) {
-              result.found = true;
-              result.file = path.relative(root, file);
-              result.line = i + 1;
-              result.hint = `Found "${searchTerm}" at ${result.file}:${result.line}`;
-              return result;
-            }
-          }
-        } catch { /* skip unreadable files */ }
-      }
-    }
-
-    result.hint = `Could not find "${searchTerm}" in source files.`;
-  } catch (e) {
-    result.hint = 'Error searching source files: ' + e.message;
-  }
-
-  return result;
-}
-
-function walkDir(dir, extensions, results = []) {
-  try {
-    const entries = fs.readdirSync(dir, { withFileTypes: true });
-    for (const entry of entries) {
-      const fullPath = path.join(dir, entry.name);
-      if (entry.name.startsWith('.') || entry.name === 'node_modules' || entry.name === '.next' || entry.name === 'dist') continue;
-      if (entry.isDirectory()) {
-        walkDir(fullPath, extensions, results);
-      } else if (extensions.some(ext => entry.name.endsWith(ext))) {
-        results.push(fullPath);
-      }
-    }
-  } catch { /* ignore */ }
-  return results;
-}
-
-// ══════════════════════════════════════════════════════════════════════════
-// AUTO-APPLY CHANGES TO SOURCE FILES
-// ══════════════════════════════════════════════════════════════════════════
-
-function autoApplyChange(root, selector, props, projectInfo) {
-  const result = { selector, applied: false, file: null, strategy: null, reason: '' };
-
-  // 1. Extract class name from selector
-  const className = extractClassName(selector);
-  if (!className) {
-    result.reason = 'No class name in selector';
-    return result;
-  }
-
-  // 2. Try: find existing CSS rule and modify it
-  const cssResult = findAndModifyCSSRule(root, className, props);
-  if (cssResult.applied) {
-    result.applied = true;
-    result.file = path.relative(root, cssResult.file);
-    result.strategy = 'css-modify';
-    return result;
-  }
-
-  // 3. Try: find JSX component using this class → find its CSS import → add rule there
-  const importResult = findCSSImportAndAppend(root, className, props);
-  if (importResult.applied) {
-    result.applied = true;
-    result.file = path.relative(root, importResult.file);
-    result.strategy = 'css-append';
-    return result;
-  }
-
-  // 4. Try: modify inline style in JSX
-  const inlineResult = modifyInlineStyle(root, className, props);
-  if (inlineResult.applied) {
-    result.applied = true;
-    result.file = path.relative(root, inlineResult.file);
-    result.strategy = 'inline-style';
-    return result;
-  }
-
-  // 5. Fallback: find any CSS file in project and append
-  const fallbackResult = appendToAnyCSSFile(root, className, props);
-  if (fallbackResult.applied) {
-    result.applied = true;
-    result.file = path.relative(root, fallbackResult.file);
-    result.strategy = 'css-fallback';
-    return result;
-  }
-
-  result.reason = 'Could not find target file for ' + className;
-  return result;
-}
-
-// Extract the most specific class name from a CSS selector
-function extractClassName(selector) {
-  // Selector like: #root > div > section.nexus-hero > h1.title
-  const parts = selector.split('>').map(s => s.trim());
-  // Try from the end — most specific first
-  for (let i = parts.length - 1; i >= 0; i--) {
-    const classMatch = parts[i].match(/\.([a-zA-Z][a-zA-Z0-9_-]*)/);
-    if (classMatch) return classMatch[1];
-  }
-  return null;
-}
-
-// Strategy 1: Find existing CSS rule in .css/.scss files and modify it
-function findAndModifyCSSRule(root, className, props) {
-  const cssFiles = walkDir(root, ['.css', '.scss', '.sass', '.less']);
-  const ruleRegex = new RegExp(
-    `(\\.${escapeRegex(className)}\\s*\\{)([^}]*)(\\})`, 's'
-  );
-
-  for (const file of cssFiles) {
-    // Skip node_modules, .draply, etc
-    const rel = path.relative(root, file);
-    if (rel.includes('node_modules') || rel.includes('.draply')) continue;
-
-    try {
-      let content = fs.readFileSync(file, 'utf8');
-      const match = content.match(ruleRegex);
-      if (!match) continue;
-
-      // Found the rule — modify it
-      const existingBlock = match[2];
-      let newBlock = existingBlock;
-
-      for (const [prop, val] of Object.entries(props)) {
-        const propRegex = new RegExp(`(${escapeRegex(prop)}\\s*:\\s*)([^;]+)(;)`, 'g');
-        if (propRegex.test(newBlock)) {
-          // Property exists — update value
-          newBlock = newBlock.replace(
-            new RegExp(`(${escapeRegex(prop)}\\s*:\\s*)([^;]+)(;)`, 'g'),
-            `$1${val}$3`
-          );
-        } else {
-          // Property doesn't exist — add it
-          newBlock = newBlock.trimEnd() + `\n  ${prop}: ${val};\n`;
-        }
-      }
-
-      content = content.replace(ruleRegex, `$1${newBlock}$3`);
-      fs.writeFileSync(file, content, 'utf8');
-
-      return { applied: true, file };
-    } catch { /* skip */ }
-  }
-
-  return { applied: false };
-}
-
-// Strategy 2: Find the JSX component using className, find its CSS import, append rule
-function findCSSImportAndAppend(root, className, props) {
-  const jsxFiles = walkDir(root, ['.jsx', '.tsx', '.js', '.ts']);
-
-  for (const jsxFile of jsxFiles) {
-    const rel = path.relative(root, jsxFile);
-    if (rel.includes('node_modules')) continue;
-
-    try {
-      const content = fs.readFileSync(jsxFile, 'utf8');
-
-      // Check if this component uses the className
-      if (!content.includes(className)) continue;
-
-      // Find CSS imports in this file
-      // Matches: import './styles.css' or import styles from './styles.module.css' or require('./styles.css')
-      const importRegex = /(?:import\s+(?:\w+\s+from\s+)?['"]([^'"]+\.(?:css|scss|sass|less))['"]|require\(['"]([^'"]+\.(?:css|scss|sass|less))['"]\))/g;
-      let importMatch;
-      const cssImports = [];
-
-      while ((importMatch = importRegex.exec(content)) !== null) {
-        const importPath = importMatch[1] || importMatch[2];
-        const fullCSSPath = path.resolve(path.dirname(jsxFile), importPath);
-        if (fs.existsSync(fullCSSPath)) {
-          cssImports.push(fullCSSPath);
-        }
-      }
-
-      if (cssImports.length === 0) continue;
-
-      // Append rule to the first CSS import
-      const targetCSS = cssImports[0];
-      const newRule = `\n/* Draply: .${className} */\n.${className} {\n${formatProps(props)}\n}\n`;
-
-      let cssContent = fs.readFileSync(targetCSS, 'utf8');
-
-      // Check if rule already exists (might have been added before)
-      if (cssContent.includes(`.${className}`)) {
-        // Modify existing rule instead
-        return findAndModifyCSSRuleSingle(targetCSS, className, props);
-      }
-
-      cssContent += newRule;
-      fs.writeFileSync(targetCSS, cssContent, 'utf8');
-
-      return { applied: true, file: targetCSS };
-    } catch { /* skip */ }
-  }
-
-  return { applied: false };
-}
-
-// Helper: modify rule in a specific file
-function findAndModifyCSSRuleSingle(file, className, props) {
-  const ruleRegex = new RegExp(
-    `(\\.${escapeRegex(className)}\\s*\\{)([^}]*)(\\})`, 's'
-  );
-  try {
-    let content = fs.readFileSync(file, 'utf8');
-    const match = content.match(ruleRegex);
-    if (!match) return { applied: false };
-
-    let newBlock = match[2];
-    for (const [prop, val] of Object.entries(props)) {
-      const propRegex = new RegExp(`(${escapeRegex(prop)}\\s*:\\s*)([^;]+)(;)`, 'g');
-      if (propRegex.test(newBlock)) {
-        newBlock = newBlock.replace(
-          new RegExp(`(${escapeRegex(prop)}\\s*:\\s*)([^;]+)(;)`, 'g'),
-          `$1${val}$3`
-        );
-      } else {
-        newBlock = newBlock.trimEnd() + `\n  ${prop}: ${val};\n`;
-      }
-    }
-    content = content.replace(ruleRegex, `$1${newBlock}$3`);
-    fs.writeFileSync(file, content, 'utf8');
-    return { applied: true, file };
-  } catch { return { applied: false }; }
-}
-
-// Strategy 3: Add inline style to JSX element
-function modifyInlineStyle(root, className, props) {
-  const jsxFiles = walkDir(root, ['.jsx', '.tsx']);
-
-  for (const file of jsxFiles) {
-    const rel = path.relative(root, file);
-    if (rel.includes('node_modules')) continue;
-
-    try {
-      let content = fs.readFileSync(file, 'utf8');
-      if (!content.includes(className)) continue;
-
-      // Find element with this className
-      // Pattern: className="...nexus-hero..." or className={'...nexus-hero...'}
-      const elementRegex = new RegExp(
-        `(<[a-zA-Z][a-zA-Z0-9]*[^>]*className=["'{][^"'}]*${escapeRegex(className)}[^"'}]*["'}])([^>]*>|\\s*/>)`,
-        's'
-      );
-
-      const match = content.match(elementRegex);
-      if (!match) continue;
-
-      const fullTag = match[0];
-      const jsxProps = propsToJSXStyle(props);
-
-      // Check if element already has a style prop
-      if (fullTag.includes('style=')) {
-        // Modify existing style prop — add/update properties
-        const styleRegex = /style=\{\{([^}]*)\}\}/;
-        const styleMatch = fullTag.match(styleRegex);
-        if (styleMatch) {
-          let existingStyles = styleMatch[1];
-          for (const [camelProp, val] of Object.entries(jsxProps)) {
-            const propRegex = new RegExp(`${camelProp}\\s*:\\s*['"][^'"]*['"]`, 'g');
-            if (propRegex.test(existingStyles)) {
-              existingStyles = existingStyles.replace(propRegex, `${camelProp}: '${val}'`);
-            } else {
-              existingStyles = existingStyles.trim();
-              if (existingStyles && !existingStyles.endsWith(',')) existingStyles += ',';
-              existingStyles += ` ${camelProp}: '${val}'`;
-            }
-          }
-          const newTag = fullTag.replace(styleRegex, `style={{${existingStyles}}}`);
-          content = content.replace(fullTag, newTag);
-        }
-      } else {
-        // Add new style prop
-        const styleStr = Object.entries(jsxProps)
-          .map(([k, v]) => `${k}: '${v}'`)
-          .join(', ');
-        const insertion = ` style={{${styleStr}}}`;
-        // Insert before the closing > or />
-        const newTag = fullTag.replace(match[2], insertion + match[2]);
-        content = content.replace(fullTag, newTag);
-      }
-
-      fs.writeFileSync(file, content, 'utf8');
-      return { applied: true, file };
-    } catch { /* skip */ }
-  }
-
-  return { applied: false };
-}
-
-// Strategy 4: Find any CSS file in the project and append the rule
-function appendToAnyCSSFile(root, className, props) {
-  // Priority: index.css, App.css, globals.css, main.css, styles.css
-  const candidates = [
-    'src/index.css', 'src/App.css', 'src/app/globals.css', 'src/globals.css',
-    'src/main.css', 'src/styles.css', 'styles/globals.css', 'app/globals.css',
-    'src/styles/globals.css'
-  ];
-
-  for (const candidate of candidates) {
-    const fullPath = path.join(root, candidate);
-    if (fs.existsSync(fullPath)) {
-      try {
-        let content = fs.readFileSync(fullPath, 'utf8');
-        // Check if rule already exists
-        if (content.includes(`.${className}`)) {
-          return findAndModifyCSSRuleSingle(fullPath, className, props);
-        }
-        const newRule = `\n/* Draply: .${className} */\n.${className} {\n${formatProps(props)}\n}\n`;
-        content += newRule;
-        fs.writeFileSync(fullPath, content, 'utf8');
-        return { applied: true, file: fullPath };
-      } catch { /* skip */ }
-    }
-  }
-
-  // Last resort: find ANY css file
-  const allCSS = walkDir(root, ['.css']);
-  for (const file of allCSS) {
-    const rel = path.relative(root, file);
-    if (rel.includes('node_modules') || rel.includes('.draply') || rel.includes('.next')) continue;
-    try {
-      let content = fs.readFileSync(file, 'utf8');
-      if (content.includes(`.${className}`)) {
-        return findAndModifyCSSRuleSingle(file, className, props);
-      }
-      const newRule = `\n/* Draply: .${className} */\n.${className} {\n${formatProps(props)}\n}\n`;
-      content += newRule;
-      fs.writeFileSync(file, content, 'utf8');
-      return { applied: true, file };
-    } catch { /* skip */ }
-  }
-
-  return { applied: false };
-}
-
-// ── Helpers ──────────────────────────────────────────────────────────────────
-
-function escapeRegex(str) {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-
-function formatProps(props) {
-  return Object.entries(props).map(([k, v]) => `  ${k}: ${v};`).join('\n');
-}
-
-function camelCase(str) {
-  return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-}
-
-function propsToJSXStyle(props) {
-  const result = {};
-  for (const [prop, val] of Object.entries(props)) {
-    result[camelCase(prop)] = val;
-  }
-  return result;
-}
+process.on('SIGINT', () => { console.log('\n \x1b[90mDraply stopped\x1b[0m\n'); process.exit(0); });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draply-dev",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Visual overlay for any frontend project — move, resize, restyle live in the browser, save to CSS",
   "author": "Arman",
   "type": "commonjs",