draply-dev 1.0.1 → 1.0.4

package/bin/cli.js

@@ -2,24 +2,24 @@
 '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');
 // 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>`;
 
 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,158 +27,220 @@ 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 projectRoot = process.cwd();
 const overridesPath = path.join(projectRoot, 'draply.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;
-      }
-    }
+const server = http.createServer((req, res) => {
 
-    // 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;
-        }
-      }
-    }
+  // CORS preflight
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+  if (req.method === 'OPTIONS') { res.writeHead(204); res.end(); 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;
-      }
-    }
+  // ── Config endpoint (get/set API key) ───────────────────────────────────────
+  const configPath = path.join(process.cwd(), 'draply.config.json');
+  function loadConfig() { try { return JSON.parse(fs.readFileSync(configPath, 'utf8')); } catch { return {}; } }
+  function saveConfig(cfg) { fs.writeFileSync(configPath, JSON.stringify(cfg, null, 2), 'utf8'); }
 
-    // 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`);
+  if (req.url === '/draply-config') {
+    if (req.method === 'GET') {
+      const cfg = loadConfig();
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ hasKey: !!cfg.apiKey, provider: cfg.provider || 'groq' }));
       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`);
+    if (req.method === 'POST') {
+      let body = '';
+      req.on('data', c => body += c);
+      req.on('end', () => {
+        try {
+          const cfg = { ...loadConfig(), ...JSON.parse(body) };
+          saveConfig(cfg);
+          res.writeHead(200, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ ok: true }));
+        } catch (e) {
+          res.writeHead(500); res.end(JSON.stringify({ ok: false, error: e.message }));
+        }
+      });
       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) => {
-
-  // CORS preflight
-  res.setHeader('Access-Control-Allow-Origin', '*');
-  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
-  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
-  if (req.method === 'OPTIONS') { res.writeHead(204); res.end(); return; }
 
-  // ── Draply: Save endpoint ──────────────────────────────────────────────────
-  if (req.url === '/draply-save' && req.method === 'POST') {
+  // ── AI Apply endpoint ───────────────────────────────────────────────────────
+  if ((req.url === '/draply-ai-apply' || req.url === '/draply-save') && req.method === 'POST') {
     let body = '';
     req.on('data', c => body += c);
-    req.on('end', () => {
+    req.on('end', async () => {
       try {
         const { changes } = JSON.parse(body);
-        const lines = [];
+        const cfg = loadConfig();
+        
+        // If no config, fallback to saving standard CSS
+        if (!cfg.apiKey) {
+           const lines = [];
+           for (const ch of (changes || [])) {
+             if (!ch.selector) continue;
+             const props = Object.entries(ch.props).map(([k, v]) => `  ${k}: ${v};`).join('\n');
+             const label = ch.selector.split('>').pop().trim();
+             lines.push(`/* ${label} */\n${ch.selector} {\n${props}\n}`);
+           }
+           const css = '/* draply */\n\n' + lines.join('\n\n') + '\n';
+           fs.writeFileSync(overridesPath, css, 'utf8');
+           res.writeHead(200, { 'Content-Type': 'application/json' });
+           res.end(JSON.stringify({ ok: true, fallback: true }));
+           return;
+        }
+
+        const results = [];
+        const fileMap = new Map();
+
+        // 1. Group by exact file (thanks to React Fiber, fallback to index.html)
         for (const ch of (changes || [])) {
-          if (!ch.selector) continue;
-          const props = Object.entries(ch.props)
-            .map(([k, v]) => `  ${k}: ${v};`)
-            .join('\n');
-          const label = ch.selector.split('>').pop().trim();
-          lines.push(`/* ${label} */
-${ch.selector} {
-${props}
-}`);
+          let targetFile = ch.exactFile;
+          if (!targetFile || !fs.existsSync(targetFile)) {
+             const fallbackHTML = path.join(process.cwd(), 'index.html');
+             if (fs.existsSync(fallbackHTML)) {
+               targetFile = fallbackHTML;
+             } else {
+               results.push({ selector: ch.selector, ok: false, reason: 'Source file not linked' });
+               continue;
+             }
+          }
+          if (!fileMap.has(targetFile)) {
+            fileMap.set(targetFile, { content: fs.readFileSync(targetFile, 'utf8'), items: [] });
+          }
+          fileMap.get(targetFile).items.push(ch);
         }
-        const css = '/* draply — ' + new Date().toLocaleString('ru-RU') + ' */\n\n' + lines.join('\n\n') + '\n';
-        fs.writeFileSync(overridesPath, css, 'utf8');
-        autoInjectCSS();
+
+        // 2. Call AI per file using XML Patches
+        for (const [filePath, { content, items }] of fileMap) {
+          
+          let changesBlock = '';
+          const lines = content.split('\n');
+          let classNamesToFind = items.map(c => {
+             const parts = c.selector.split('.');
+             return parts.length > 1 ? parts.pop() : '';
+          }).filter(Boolean);
+
+          let ctxStart = 0, ctxEnd = lines.length - 1;
+          for (let i = 0; i < lines.length; i++) {
+             if (classNamesToFind.some(cls => lines[i].includes(cls))) {
+               ctxStart = Math.max(0, i - 25);
+               ctxEnd = Math.min(lines.length - 1, i + 25);
+             }
+          }
+          const snippet = lines.slice(ctxStart, ctxEnd + 1).join('\n');
+
+          items.forEach(item => {
+            const propsStr = Object.entries(item.props).map(([k, v]) => `  ${k}: ${v}`).join('\n');
+            changesBlock += `\nTarget Selector: ${item.selector}\nChanges:\n${propsStr}\n`;
+          });
+
+          const prompt = `You are a strict code editor applying style changes to a file.
+
+FILE: ${path.basename(filePath)} (lines ${ctxStart + 1}-${ctxEnd + 1})
+\`\`\`
+${snippet}
+\`\`\`
+
+CHANGES (Apply to HTML/React elements matching selectors):
+${changesBlock}
+
+IMPORTANT: Return your changes wrapped in <patch> tags containing <search> and <replace> blocks. DO NOT use JSON.
+
+Rules:
+- The content inside <search> must be an EXACT substring from the file snippet above.
+- Update HTML/JSX inline styles or Tailwind classes appropriately.
+- REPLACE old style values if they exist, DO NOT duplicate keys!
+
+Example response:
+<patch>
+<search>
+  <button className="btn" style={{ padding: '10px' }}>
+</search>
+<replace>
+  <button className="btn" style={{ padding: '10px', color: '#ff0000' }}>
+</replace>
+</patch>
+
+Return ONLY the patch blocks.`;
+
+          let apiResult = '';
+          try {
+             // Groq call
+             const groqBody = JSON.stringify({
+               model: 'llama-3.3-70b-versatile',
+               messages: [{ role: 'user', content: prompt }],
+               temperature: 0.1, max_tokens: 8192
+             });
+             apiResult = await new Promise((resolve, reject) => {
+               const https = require('https');
+               const req = https.request({
+                 hostname: 'api.groq.com', path: '/openai/v1/chat/completions',
+                 method: 'POST',
+                 headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${cfg.apiKey}`, 'Content-Length': Buffer.byteLength(groqBody) }
+               }, res => {
+                 const chunks = [];
+                 res.on('data', c => chunks.push(c));
+                 res.on('end', () => {
+                   const data = JSON.parse(Buffer.concat(chunks).toString());
+                   if (data.error) reject(new Error(data.error.message));
+                   else resolve(data.choices?.[0]?.message?.content || '');
+                 });
+               });
+               req.on('error', reject); req.write(groqBody); req.end();
+             });
+
+             const patches = [];
+             const patchRegex = /<search>([\s\S]*?)<\/search>[\s\S]*?<replace>([\s\S]*?)<\/replace>/g;
+             let match;
+             while ((match = patchRegex.exec(apiResult)) !== null) {
+               let s = match[1], r = match[2];
+               if (s.startsWith('\n')) s = s.substring(1);
+               if (s.endsWith('\n')) s = s.substring(0, s.length - 1);
+               if (r.startsWith('\n')) r = r.substring(1);
+               if (r.endsWith('\n')) r = r.substring(0, r.length - 1);
+               if (s.trim()) patches.push({ search: s, replace: r });
+             }
+
+             let newContent = content;
+             let applied = 0;
+             for (const patch of patches) {
+               if (newContent.includes(patch.search)) {
+                 newContent = newContent.replace(patch.search, patch.replace);
+                 applied++;
+               }
+             }
+
+             if (applied > 0) {
+               fs.writeFileSync(filePath, newContent, 'utf8');
+               console.log(` \x1b[32m✓\x1b[0m Modified ${path.basename(filePath)}`);
+               items.forEach(item => results.push({ selector: item.selector, ok: true }));
+             } else {
+               items.forEach(item => results.push({ selector: item.selector, ok: false, reason: 'AI patch failed to match' }));
+             }
+          } catch (e) {
+             items.forEach(item => results.push({ selector: item.selector, ok: false, reason: e.message }));
+          }
+        }
+
+        const applied = results.filter(r => r.ok).length;
         res.writeHead(200, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ ok: true }));
+        res.end(JSON.stringify({ ok: true, applied, total: results.length, results }));
+
       } catch (e) {
         res.writeHead(500, { 'Content-Type': 'application/json' });
         res.end(JSON.stringify({ ok: false, error: e.message }));
@@ -188,14 +250,25 @@ ${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;
   }
@@ -205,10 +278,10 @@ ${props}
   // ── 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 +291,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 +310,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>

package/package.json

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