draply-dev 1.0.1 → 1.1.0

package/bin/cli.js

@@ -2,24 +2,25 @@
 'use strict';
 
 const http = require('http');
-const fs   = require('fs');
+const fs = require('fs');
 const path = require('path');
 const zlib = require('zlib');
 
-const args       = process.argv.slice(2);
+const args = process.argv.slice(2);
 const targetPort = parseInt(args[0]) || 3000;
-const proxyPort  = parseInt(args[1]) || 4000;
+const proxyPort = parseInt(args[1]) || 4000;
 const targetHost = args[2] || 'localhost';
 
-const OVERLAY_JS  = fs.readFileSync(path.join(__dirname, '../src/overlay.js'), 'utf8');
+const OVERLAY_JS = fs.readFileSync(path.join(__dirname, '../src/overlay.js'), 'utf8');
+const FEATURES_JS = fs.readFileSync(path.join(__dirname, '../src/draply-features.js'), 'utf8');
 // Unique marker that does NOT appear inside overlay.js itself
-const MARKER      = 'data-ps-done="1"';
-const INJECT_TAG  = `\n<link rel="stylesheet" href="/draply.css">\n<script ${MARKER}>\n${OVERLAY_JS}\n</script>`;
+const MARKER = 'data-ps-done="1"';
+const INJECT_TAG = `\n<link rel="stylesheet" href="/draply.css">\n<script ${MARKER}>\n${OVERLAY_JS}\n</script>\n<script data-draply-features="1">\n${FEATURES_JS}\n</script>`;
 
 function injectOverlay(html) {
   if (html.includes(MARKER)) return html;
-  if (html.includes('</body>'))  return html.replace(/<\/body>/i,  INJECT_TAG + '\n</body>');
-  if (html.includes('</html>'))  return html.replace(/<\/html>/i, INJECT_TAG + '\n</html>');
+  if (html.includes('</body>')) return html.replace(/<\/body>/i, INJECT_TAG + '\n</body>');
+  if (html.includes('</html>')) return html.replace(/<\/html>/i, INJECT_TAG + '\n</html>');
   return html + INJECT_TAG;
 }
 
@@ -27,125 +28,32 @@ function decode(headers, chunks) {
   const enc = headers['content-encoding'] || '';
   const buf = Buffer.concat(chunks);
   return new Promise((res, rej) => {
-    if (enc === 'gzip')    return zlib.gunzip(buf,           (e,d) => e ? rej(e) : res(d.toString('utf8')));
-    if (enc === 'deflate') return zlib.inflate(buf,          (e,d) => e ? rej(e) : res(d.toString('utf8')));
-    if (enc === 'br')      return zlib.brotliDecompress(buf, (e,d) => e ? rej(e) : res(d.toString('utf8')));
+    if (enc === 'gzip') return zlib.gunzip(buf, (e, d) => e ? rej(e) : res(d.toString('utf8')));
+    if (enc === 'deflate') return zlib.inflate(buf, (e, d) => e ? rej(e) : res(d.toString('utf8')));
+    if (enc === 'br') return zlib.brotliDecompress(buf, (e, d) => e ? rej(e) : res(d.toString('utf8')));
     res(buf.toString('utf8'));
   });
 }
 
-// Создаём пустой draply.css при старте если его нет
-const projectRoot  = process.cwd();
-const overridesPath = path.join(projectRoot, 'draply.css');
+// Храним CSS в скрытой папке .draply/ чтобы не засорять проект юзера
+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');
+    if (!gi.includes('.draply')) {
+      fs.appendFileSync(gitignorePath, '\n# Draply temp files\n.draply/\n', 'utf8');
+    }
+  }
+}
+const overridesPath = path.join(draplyDir, 'overrides.css');
 if (!fs.existsSync(overridesPath)) {
   fs.writeFileSync(overridesPath, '/* draply */\n', 'utf8');
 }
-let cssInjected = false; // флаг: CSS уже подключён к проекту?
-
-// ── Авто-определение фреймворка и подключение draply.css ──────────────────
-function autoInjectCSS() {
-  if (cssInjected) return;
-  cssInjected = true;
-
-  const has = f => fs.existsSync(path.join(projectRoot, f));
-  const read = f => fs.readFileSync(path.join(projectRoot, f), 'utf8');
-  const write = (f, c) => fs.writeFileSync(path.join(projectRoot, f), c, 'utf8');
-  const already = (content) => content.includes('draply.css');
 
-  try {
-    // Next.js App Router
-    for (const f of ['app/layout.tsx', 'app/layout.jsx', 'app/layout.js']) {
-      if (has(f)) {
-        let src = read(f);
-        if (already(src)) return;
-        src = `import '../draply.css';\n` + src;
-        write(f, src);
-        console.log(`  \x1b[32m✓\x1b[0m Подключил draply.css → ${f}`);
-        return;
-      }
-    }
-
-    // Next.js Pages Router
-    for (const f of ['pages/_app.tsx', 'pages/_app.jsx', 'pages/_app.js']) {
-      if (has(f)) {
-        let src = read(f);
-        if (already(src)) return;
-        src = `import '../draply.css';\n` + src;
-        write(f, src);
-        console.log(`  \x1b[32m✓\x1b[0m Подключил draply.css → ${f}`);
-        return;
-      }
-    }
-
-    // Nuxt
-    for (const f of ['nuxt.config.ts', 'nuxt.config.js']) {
-      if (has(f)) {
-        let src = read(f);
-        if (already(src)) return;
-        if (src.includes('css:')) {
-          src = src.replace(/css:\s*\[/, "css: ['./draply.css', ");
-        } else {
-          src = src.replace(/export default defineNuxtConfig\(\{/, "export default defineNuxtConfig({\n  css: ['./draply.css'],");
-        }
-        write(f, src);
-        console.log(`  \x1b[32m✓\x1b[0m Подключил draply.css → ${f}`);
-        return;
-      }
-    }
-
-    // Vue (Vite)
-    if (has('src/App.vue')) {
-      for (const f of ['src/main.ts', 'src/main.js']) {
-        if (has(f)) {
-          let src = read(f);
-          if (already(src)) return;
-          src = `import '../draply.css'\n` + src;
-          write(f, src);
-          console.log(`  \x1b[32m✓\x1b[0m Подключил draply.css → ${f}`);
-          return;
-        }
-      }
-    }
-
-    // React (Vite) — src/main.tsx / src/main.jsx
-    for (const f of ['src/main.tsx', 'src/main.jsx', 'src/main.js', 'src/main.ts', 'src/index.tsx', 'src/index.jsx', 'src/index.js']) {
-      if (has(f)) {
-        let src = read(f);
-        if (already(src)) return;
-        src = `import '../draply.css'\n` + src;
-        write(f, src);
-        console.log(`  \x1b[32m✓\x1b[0m Подключил draply.css → ${f}`);
-        return;
-      }
-    }
-
-    // CRA — public/index.html
-    if (has('public/index.html')) {
-      let src = read('public/index.html');
-      if (already(src)) return;
-      src = src.replace(/<\/head>/i, '  <link rel="stylesheet" href="%PUBLIC_URL%/draply.css">\n  </head>');
-      write('public/index.html', src);
-      // Копируем draply.css в public/
-      fs.copyFileSync(overridesPath, path.join(projectRoot, 'public/draply.css'));
-      console.log(`  \x1b[32m✓\x1b[0m Подключил draply.css → public/index.html`);
-      return;
-    }
-
-    // Plain HTML / Vite — index.html в корне
-    if (has('index.html')) {
-      let src = read('index.html');
-      if (already(src)) return;
-      src = src.replace(/<\/head>/i, '  <link rel="stylesheet" href="./draply.css">\n  </head>');
-      write('index.html', src);
-      console.log(`  \x1b[32m✓\x1b[0m Подключил draply.css → index.html`);
-      return;
-    }
-
-    console.log(`  \x1b[33m⚠\x1b[0m Не удалось определить фреймворк — добавь draply.css вручную`);
-  } catch (err) {
-    console.log(`  \x1b[33m⚠\x1b[0m Ошибка авто-подключения: ${err.message}`);
-  }
-}
 
 const server = http.createServer((req, res) => {
 
@@ -176,7 +84,6 @@ ${props}
         }
         const css = '/* draply — ' + new Date().toLocaleString('ru-RU') + ' */\n\n' + lines.join('\n\n') + '\n';
         fs.writeFileSync(overridesPath, css, 'utf8');
-        autoInjectCSS();
         res.writeHead(200, { 'Content-Type': 'application/json' });
         res.end(JSON.stringify({ ok: true }));
       } catch (e) {
@@ -188,27 +95,62 @@ ${props}
   }
 
   // ── Draply: Serve CSS ──────────────────────────────────────────────────────
-  if (req.url === '/draply.css') {
+  if (req.url.split('?')[0] === '/draply.css') {
+    const isModule = req.headers['sec-fetch-dest'] === 'script' || req.url.includes('import');
     try {
       const css = fs.readFileSync(overridesPath, 'utf8');
-      res.writeHead(200, { 'Content-Type': 'text/css', 'cache-control': 'no-store' });
-      res.end(css);
+      if (isModule) {
+        res.writeHead(200, { 'Content-Type': 'application/javascript', 'cache-control': 'no-store' });
+        res.end(`const style = document.createElement('style');\nstyle.setAttribute('data-draply-module', '1');\nstyle.textContent = ${JSON.stringify(css)};\ndocument.head.appendChild(style);\nexport default {};`);
+      } else {
+        res.writeHead(200, { 'Content-Type': 'text/css', 'cache-control': 'no-store' });
+        res.end(css);
+      }
     } catch (e) {
-      res.writeHead(200, { 'Content-Type': 'text/css' });
-      res.end('');
+      if (isModule) {
+        res.writeHead(200, { 'Content-Type': 'application/javascript' });
+        res.end('export default {};');
+      } else {
+        res.writeHead(200, { 'Content-Type': 'text/css' });
+        res.end('');
+      }
     }
     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,
-    port:     targetPort,
-    path:     req.url,
-    method:   req.method,
-    headers:  { ...req.headers, host: `${targetHost}:${targetPort}`, 'accept-encoding': 'identity' },
+    port: targetPort,
+    path: req.url,
+    method: req.method,
+    headers: { ...req.headers, host: `${targetHost}:${targetPort}`, 'accept-encoding': 'identity' },
   };
 
   const pReq = http.request(opts, pRes => {
@@ -218,15 +160,15 @@ ${props}
       pRes.on('data', c => chunks.push(c));
       pRes.on('end', async () => {
         try {
-          const html    = await decode(pRes.headers, chunks);
-          const out     = Buffer.from(injectOverlay(html), 'utf8');
+          const html = await decode(pRes.headers, chunks);
+          const out = Buffer.from(injectOverlay(html), 'utf8');
           const headers = { ...pRes.headers };
           delete headers['content-encoding'];
           headers['content-length'] = out.length;
-          headers['cache-control']  = 'no-store';
+          headers['cache-control'] = 'no-store';
           res.writeHead(pRes.statusCode, headers);
           res.end(out);
-        } catch(e) {
+        } catch (e) {
           res.writeHead(500); res.end('Draply error: ' + e.message);
         }
       });
@@ -237,7 +179,7 @@ ${props}
   });
 
   pReq.on('error', () => {
-    res.writeHead(502, {'Content-Type':'text/html'});
+    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>
@@ -256,3 +198,105 @@ server.listen(proxyPort, () => {
 });
 
 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;
+}

package/package.json

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