@accelerated-agency/visual-editor 0.1.2 → 0.1.3

package/dist/vite.js

@@ -1766,246 +1766,264 @@ var getDefaultAnthropicApiKey = () => {
     return "";
   }
 };
-function visualEditorProxyPlugin(options) {
+function createVisualEditorMiddleware(options) {
   const anthropicApiKey = options?.anthropicApiKey || getDefaultAnthropicApiKey();
   const enableGenerateTestApi = options?.enableGenerateTestApi ?? true;
-  return {
-    name: "visual-editor-proxy",
-    configureServer(server) {
-      server.middlewares.use("/bridge.js", (_req, res) => {
-        res.setHeader("Content-Type", "application/javascript; charset=utf-8");
-        res.setHeader("Cache-Control", "no-store");
-        res.end(BRIDGE_SCRIPT);
-      });
-      server.middlewares.use("/vvveb-editor", (_req, res) => {
-        res.setHeader("Content-Type", "text/html; charset=utf-8");
-        res.setHeader("Cache-Control", "no-store");
-        res.setHeader("X-Frame-Options", "SAMEORIGIN");
-        res.end(buildVvvebEditorHtml());
-      });
-      if (enableGenerateTestApi) {
-        server.middlewares.use("/api/generate-test", async (req, res) => {
-          if (req.method === "OPTIONS") {
-            res.setHeader("Access-Control-Allow-Origin", "*");
-            res.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
-            res.setHeader("Access-Control-Allow-Headers", "Content-Type");
-            res.statusCode = 204;
-            res.end();
-            return;
-          }
-          if (req.method !== "POST") {
-            res.statusCode = 405;
-            res.end(JSON.stringify({ error: "Method not allowed" }));
-            return;
-          }
-          if (!anthropicApiKey) {
-            res.statusCode = 500;
-            res.setHeader("Content-Type", "application/json");
-            res.end(
-              JSON.stringify({ error: "ANTHROPIC_API_KEY is not configured" })
-            );
-            return;
-          }
-          try {
-            const chunks = [];
-            for await (const chunk of req) chunks.push(chunk);
-            const body = JSON.parse(Buffer.concat(chunks).toString());
-            if (!body.prompt || !body.pageSnapshot) {
-              res.statusCode = 400;
-              res.setHeader("Content-Type", "application/json");
-              res.end(JSON.stringify({ error: "Missing prompt or pageSnapshot" }));
-              return;
-            }
-            const parts = [
-              "## Optimization Goal",
-              body.prompt,
-              "",
-              "## Page Snapshot",
-              JSON.stringify(body.pageSnapshot, null, 2)
-            ];
-            const anthropicRes = await fetch("https://api.anthropic.com/v1/messages", {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-                "x-api-key": anthropicApiKey,
-                "anthropic-version": "2023-06-01"
-              },
-              body: JSON.stringify({
-                model: "claude-sonnet-4-20250514",
-                max_tokens: 4096,
-                system: AI_SYSTEM_PROMPT,
-                messages: [{ role: "user", content: parts.join("\n") }]
-              })
-            });
-            if (!anthropicRes.ok) {
-              const errText = await anthropicRes.text();
-              res.statusCode = 502;
-              res.setHeader("Content-Type", "application/json");
-              res.end(
-                JSON.stringify({
-                  error: `Anthropic API returned ${anthropicRes.status}`,
-                  detail: errText
-                })
-              );
-              return;
-            }
-            const anthropicData = await anthropicRes.json();
-            const textBlock = anthropicData.content?.find((b) => b.type === "text");
-            if (!textBlock?.text) {
-              res.statusCode = 502;
-              res.setHeader("Content-Type", "application/json");
-              res.end(JSON.stringify({ error: "No text in Anthropic response" }));
-              return;
-            }
-            let cleaned = textBlock.text.trim();
-            if (cleaned.startsWith("```")) {
-              cleaned = cleaned.replace(/^```[a-zA-Z]*\n?/, "").replace(/\n?```\s*$/, "").trim();
-            }
-            let parsed;
-            try {
-              parsed = JSON.parse(cleaned);
-            } catch {
-              res.statusCode = 502;
-              res.setHeader("Content-Type", "application/json");
-              res.end(JSON.stringify({ error: "Invalid JSON from Claude", raw: cleaned }));
-              return;
-            }
-            const now = Date.now();
-            if (parsed.mutations) {
-              parsed.mutations = parsed.mutations.map((m, i) => ({
-                ...m,
-                id: m.id || `ai_mut_${String(i + 1).padStart(3, "0")}`,
-                timestamp: now + i
-              }));
-            }
-            res.setHeader("Content-Type", "application/json");
-            res.setHeader("Access-Control-Allow-Origin", "*");
-            res.end(JSON.stringify(parsed));
-          } catch (err) {
-            res.statusCode = 500;
-            res.setHeader("Content-Type", "application/json");
-            res.end(JSON.stringify({ error: err.message }));
-          }
-        });
+  return async (req, res, next) => {
+    const pathname = (req.url || "").split("?")[0];
+    if (pathname === "/bridge.js") {
+      res.setHeader("Content-Type", "application/javascript; charset=utf-8");
+      res.setHeader("Cache-Control", "no-store");
+      res.end(BRIDGE_SCRIPT);
+      return;
+    }
+    if (pathname === "/vvveb-editor") {
+      res.setHeader("Content-Type", "text/html; charset=utf-8");
+      res.setHeader("Cache-Control", "no-store");
+      res.setHeader("X-Frame-Options", "SAMEORIGIN");
+      res.end(buildVvvebEditorHtml());
+      return;
+    }
+    if (pathname === "/api/generate-test" && enableGenerateTestApi) {
+      if (req.method === "OPTIONS") {
+        res.setHeader("Access-Control-Allow-Origin", "*");
+        res.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
+        res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+        res.statusCode = 204;
+        res.end();
+        return;
+      }
+      if (req.method !== "POST") {
+        res.statusCode = 405;
+        res.end(JSON.stringify({ error: "Method not allowed" }));
+        return;
+      }
+      if (!anthropicApiKey) {
+        res.statusCode = 500;
+        res.setHeader("Content-Type", "application/json");
+        res.end(
+          JSON.stringify({ error: "ANTHROPIC_API_KEY is not configured" })
+        );
+        return;
       }
-      server.middlewares.use("/api/proxy", async (req, res) => {
+      try {
+        const chunks = [];
+        for await (const chunk of req) chunks.push(chunk);
+        const body = JSON.parse(Buffer.concat(chunks).toString());
+        if (!body.prompt || !body.pageSnapshot) {
+          res.statusCode = 400;
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify({ error: "Missing prompt or pageSnapshot" }));
+          return;
+        }
+        const parts = [
+          "## Optimization Goal",
+          body.prompt,
+          "",
+          "## Page Snapshot",
+          JSON.stringify(body.pageSnapshot, null, 2)
+        ];
+        const anthropicRes = await fetch("https://api.anthropic.com/v1/messages", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key": anthropicApiKey,
+            "anthropic-version": "2023-06-01"
+          },
+          body: JSON.stringify({
+            model: "claude-sonnet-4-20250514",
+            max_tokens: 4096,
+            system: AI_SYSTEM_PROMPT,
+            messages: [{ role: "user", content: parts.join("\n") }]
+          })
+        });
+        if (!anthropicRes.ok) {
+          const errText = await anthropicRes.text();
+          res.statusCode = 502;
+          res.setHeader("Content-Type", "application/json");
+          res.end(
+            JSON.stringify({
+              error: `Anthropic API returned ${anthropicRes.status}`,
+              detail: errText
+            })
+          );
+          return;
+        }
+        const anthropicData = await anthropicRes.json();
+        const textBlock = anthropicData.content?.find((b) => b.type === "text");
+        if (!textBlock?.text) {
+          res.statusCode = 502;
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify({ error: "No text in Anthropic response" }));
+          return;
+        }
+        let cleaned = textBlock.text.trim();
+        if (cleaned.startsWith("```")) {
+          cleaned = cleaned.replace(/^```[a-zA-Z]*\n?/, "").replace(/\n?```\s*$/, "").trim();
+        }
+        let parsed;
         try {
-          const url = new URL(req.url || "", "http://localhost");
-          const targetUrl = url.searchParams.get("url");
-          const password = url.searchParams.get("password") || "";
-          if (!targetUrl) {
-            res.statusCode = 400;
-            res.end(JSON.stringify({ error: "Missing url parameter" }));
-            return;
-          }
-          const parsed = new URL(targetUrl);
-          const origin = parsed.origin;
-          const method = (req.method || "GET").toUpperCase();
-          const headers = {
-            "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36",
-            Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8"
-          };
-          let cookieHeader = "";
-          if (password) {
-            const passResp = await fetch(`${origin}/password`, {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/x-www-form-urlencoded",
-                ...headers
-              },
-              body: `form_type=storefront_password&utf8=%E2%9C%93&password=${encodeURIComponent(
-                password
-              )}`,
-              redirect: "manual"
-            });
-            const setCookies = passResp.headers.getSetCookie?.() || [];
-            cookieHeader = setCookies.map((c) => c.split(";")[0]).join("; ");
-          }
-          const fetchHeaders = { ...headers };
-          Object.entries(req.headers || {}).forEach(([key, value]) => {
-            const lowerKey = key.toLowerCase();
-            if (!value || [
-              "host",
-              "connection",
-              "content-length",
-              "accept-encoding",
-              "origin",
-              "referer"
-            ].includes(lowerKey)) {
-              return;
-            }
-            fetchHeaders[key] = Array.isArray(value) ? value.join(",") : String(value);
-          });
-          fetchHeaders.Origin = origin;
-          fetchHeaders.Referer = targetUrl;
-          if (cookieHeader) {
-            fetchHeaders.Cookie = fetchHeaders.Cookie ? `${fetchHeaders.Cookie}; ${cookieHeader}` : cookieHeader;
-          }
-          let requestBody;
-          if (!["GET", "HEAD"].includes(method)) {
-            const chunks = [];
-            for await (const chunk of req) {
-              chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
-            }
-            if (chunks.length > 0) requestBody = Buffer.concat(chunks);
-          }
-          const upstream = await fetch(targetUrl, {
-            method,
-            headers: fetchHeaders,
-            body: requestBody ? Buffer.from(requestBody) : null,
-            redirect: "follow"
+          parsed = JSON.parse(cleaned);
+        } catch {
+          res.statusCode = 502;
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify({ error: "Invalid JSON from Claude", raw: cleaned }));
+          return;
+        }
+        const now = Date.now();
+        if (parsed.mutations) {
+          parsed.mutations = parsed.mutations.map((m, i) => ({
+            ...m,
+            id: m.id || `ai_mut_${String(i + 1).padStart(3, "0")}`,
+            timestamp: now + i
+          }));
+        }
+        res.setHeader("Content-Type", "application/json");
+        res.setHeader("Access-Control-Allow-Origin", "*");
+        res.end(JSON.stringify(parsed));
+      } catch (err) {
+        res.statusCode = 500;
+        res.setHeader("Content-Type", "application/json");
+        res.end(JSON.stringify({ error: err.message }));
+      }
+      return;
+    }
+    if (pathname.startsWith("/api/proxy")) {
+      try {
+        const url = new URL(req.url || "", "http://localhost");
+        const targetUrl = url.searchParams.get("url");
+        const password = url.searchParams.get("password") || "";
+        if (!targetUrl) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({ error: "Missing url parameter" }));
+          return;
+        }
+        const parsed = new URL(targetUrl);
+        const origin = parsed.origin;
+        const method = (req.method || "GET").toUpperCase();
+        const headers = {
+          "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36",
+          Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8"
+        };
+        let cookieHeader = "";
+        if (password) {
+          const passResp = await fetch(`${origin}/password`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/x-www-form-urlencoded",
+              ...headers
+            },
+            body: `form_type=storefront_password&utf8=%E2%9C%93&password=${encodeURIComponent(
+              password
+            )}`,
+            redirect: "manual"
           });
-          const responseContentType = upstream.headers.get("content-type") || "";
-          const isHtmlResponse = responseContentType.includes("text/html");
-          if (!isHtmlResponse) {
-            const binary = Buffer.from(await upstream.arrayBuffer());
-            res.statusCode = upstream.status;
-            if (responseContentType) {
-              res.setHeader("Content-Type", responseContentType);
-            }
-            res.setHeader("Access-Control-Allow-Origin", "*");
-            res.end(binary);
-            return;
-          }
-          let html = await upstream.text();
-          if (html.includes("form_type") && html.includes("storefront_password")) {
-            res.statusCode = 401;
-            res.end(JSON.stringify({ error: "Password authentication failed." }));
+          const setCookies = passResp.headers.getSetCookie?.() || [];
+          cookieHeader = setCookies.map((c) => c.split(";")[0]).join("; ");
+        }
+        const fetchHeaders = { ...headers };
+        Object.entries(req.headers || {}).forEach(([key, value]) => {
+          const lowerKey = key.toLowerCase();
+          if (!value || [
+            "host",
+            "connection",
+            "content-length",
+            "accept-encoding",
+            "origin",
+            "referer"
+          ].includes(lowerKey)) {
             return;
           }
-          html = html.replace(/(href|src|action)="\/(?!\/)/g, `$1="${origin}/`);
-          const escapedOrigin = origin.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-          const proxyBase = `/api/proxy?password=${encodeURIComponent(password)}&url=`;
-          html = html.replace(
-            new RegExp(`(href|src|action)="${escapedOrigin}(/[^"]*)"`, "g"),
-            (_, attr, urlPath) => `${attr}="${proxyBase}${encodeURIComponent(origin + urlPath)}"`
-          );
-          if (html.includes("</head>")) {
-            html = html.replace("</head>", `${popupHideCss}
-</head>`);
+          fetchHeaders[key] = Array.isArray(value) ? value.join(",") : String(value);
+        });
+        fetchHeaders.Origin = origin;
+        fetchHeaders.Referer = targetUrl;
+        if (cookieHeader) {
+          fetchHeaders.Cookie = fetchHeaders.Cookie ? `${fetchHeaders.Cookie}; ${cookieHeader}` : cookieHeader;
+        }
+        let requestBody;
+        if (!["GET", "HEAD"].includes(method)) {
+          const chunks = [];
+          for await (const chunk of req) {
+            chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
           }
-          const runtimeProxyScript = `<script>(function(){try{var TARGET_ORIGIN=${JSON.stringify(origin)};var TARGET_PAGE_URL=${JSON.stringify(targetUrl)};var PROXY_BASE=${JSON.stringify(`/api/proxy?password=${encodeURIComponent(password)}&url=`)};function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#");}function toProxiedUrl(raw){if(isSkippable(raw))return raw;try{if(raw.startsWith("/api/proxy?"))return raw;var base=raw.startsWith("/")?TARGET_ORIGIN:TARGET_PAGE_URL;var abs=new URL(raw,base);if(abs.origin!==TARGET_ORIGIN)return raw;return PROXY_BASE+encodeURIComponent(abs.toString());}catch(_){return raw;}}if(window.fetch){var _fetch=window.fetch.bind(window);window.fetch=function(input,init){try{if(typeof input==="string"){input=toProxiedUrl(input);}else if(input&&input.url){var next=toProxiedUrl(input.url);if(next!==input.url){input=new Request(next,input);}}}catch(_){}return _fetch(input,init);};}if(window.XMLHttpRequest&&window.XMLHttpRequest.prototype&&window.XMLHttpRequest.prototype.open){var _open=window.XMLHttpRequest.prototype.open;window.XMLHttpRequest.prototype.open=function(method,url){try{arguments[1]=toProxiedUrl(url);}catch(_){}return _open.apply(this,arguments);};}if(window.navigator&&typeof window.navigator.sendBeacon==="function"){var _beacon=window.navigator.sendBeacon.bind(window.navigator);window.navigator.sendBeacon=function(url,data){try{return _beacon(toProxiedUrl(url),data);}catch(_){return _beacon(url,data);}};}if(window.navigator&&window.navigator.serviceWorker&&typeof window.navigator.serviceWorker.register==="function"){window.navigator.serviceWorker.register=function(){return Promise.resolve({scope:"disabled-in-editor-proxy"});};}}catch(_){}})();</script>`;
-          if (html.includes("</head>")) {
-            html = html.replace("</head>", `${runtimeProxyScript}
-</head>`);
-          } else {
-            html = runtimeProxyScript + html;
+          if (chunks.length > 0) requestBody = Buffer.concat(chunks);
+        }
+        const upstream = await fetch(targetUrl, {
+          method,
+          headers: fetchHeaders,
+          body: requestBody ? Buffer.from(requestBody) : null,
+          redirect: "follow"
+        });
+        const responseContentType = upstream.headers.get("content-type") || "";
+        const isHtmlResponse = responseContentType.includes("text/html");
+        if (!isHtmlResponse) {
+          const binary = Buffer.from(await upstream.arrayBuffer());
+          res.statusCode = upstream.status;
+          if (responseContentType) {
+            res.setHeader("Content-Type", responseContentType);
           }
-          const bridgeScript = `<script src="/bridge.js"></script>`;
-          html = html.includes("</body>") ? html.replace("</body>", `${bridgeScript}
-</body>`) : html + bridgeScript;
-          res.setHeader("Content-Type", "text/html; charset=utf-8");
           res.setHeader("Access-Control-Allow-Origin", "*");
-          res.setHeader("X-Frame-Options", "SAMEORIGIN");
-          res.end(html);
-        } catch (err) {
-          res.statusCode = 500;
-          res.end(JSON.stringify({ error: err.message }));
+          res.end(binary);
+          return;
         }
-      });
+        let html = await upstream.text();
+        if (html.includes("form_type") && html.includes("storefront_password")) {
+          res.statusCode = 401;
+          res.end(JSON.stringify({ error: "Password authentication failed." }));
+          return;
+        }
+        html = html.replace(/(href|src|action)="\/(?!\/)/g, `$1="${origin}/`);
+        const escapedOrigin = origin.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+        const proxyBase = `/api/proxy?password=${encodeURIComponent(password)}&url=`;
+        html = html.replace(
+          new RegExp(`(href|src|action)="${escapedOrigin}(/[^"]*)"`, "g"),
+          (_, attr, urlPath) => `${attr}="${proxyBase}${encodeURIComponent(origin + urlPath)}"`
+        );
+        if (html.includes("</head>")) {
+          html = html.replace("</head>", `${popupHideCss}
+</head>`);
+        }
+        const runtimeProxyScript = `<script>(function(){try{var TARGET_ORIGIN=${JSON.stringify(origin)};var TARGET_PAGE_URL=${JSON.stringify(targetUrl)};var PROXY_BASE=${JSON.stringify(`/api/proxy?password=${encodeURIComponent(password)}&url=`)};function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#");}function toProxiedUrl(raw){if(isSkippable(raw))return raw;try{if(raw.startsWith("/api/proxy?"))return raw;var base=raw.startsWith("/")?TARGET_ORIGIN:TARGET_PAGE_URL;var abs=new URL(raw,base);if(abs.origin!==TARGET_ORIGIN)return raw;return PROXY_BASE+encodeURIComponent(abs.toString());}catch(_){return raw;}}if(window.fetch){var _fetch=window.fetch.bind(window);window.fetch=function(input,init){try{if(typeof input==="string"){input=toProxiedUrl(input);}else if(input&&input.url){var next=toProxiedUrl(input.url);if(next!==input.url){input=new Request(next,input);}}}catch(_){}return _fetch(input,init);};}if(window.XMLHttpRequest&&window.XMLHttpRequest.prototype&&window.XMLHttpRequest.prototype.open){var _open=window.XMLHttpRequest.prototype.open;window.XMLHttpRequest.prototype.open=function(method,url){try{arguments[1]=toProxiedUrl(url);}catch(_){}return _open.apply(this,arguments);};}if(window.navigator&&typeof window.navigator.sendBeacon==="function"){var _beacon=window.navigator.sendBeacon.bind(window.navigator);window.navigator.sendBeacon=function(url,data){try{return _beacon(toProxiedUrl(url),data);}catch(_){return _beacon(url,data);}};}if(window.navigator&&window.navigator.serviceWorker&&typeof window.navigator.serviceWorker.register==="function"){window.navigator.serviceWorker.register=function(){return Promise.resolve({scope:"disabled-in-editor-proxy"});};}}catch(_){}})();</script>`;
+        if (html.includes("</head>")) {
+          html = html.replace("</head>", `${runtimeProxyScript}
+</head>`);
+        } else {
+          html = runtimeProxyScript + html;
+        }
+        const bridgeScript = `<script src="/bridge.js"></script>`;
+        html = html.includes("</body>") ? html.replace("</body>", `${bridgeScript}
+</body>`) : html + bridgeScript;
+        res.setHeader("Content-Type", "text/html; charset=utf-8");
+        res.setHeader("Access-Control-Allow-Origin", "*");
+        res.setHeader("X-Frame-Options", "SAMEORIGIN");
+        res.end(html);
+      } catch (err) {
+        res.statusCode = 500;
+        res.end(JSON.stringify({ error: err.message }));
+      }
+      return;
+    }
+    next();
+  };
+}
+function visualEditorProxyPlugin(options) {
+  const mw = createVisualEditorMiddleware(options);
+  return {
+    name: "visual-editor-proxy",
+    generateBundle() {
+      this.emitFile({ type: "asset", fileName: "bridge.js", source: BRIDGE_SCRIPT });
+      this.emitFile({ type: "asset", fileName: "vvveb-editor/index.html", source: buildVvvebEditorHtml() });
+    },
+    configureServer(server) {
+      server.middlewares.use(mw);
+    },
+    configurePreviewServer(server) {
+      server.middlewares.use(mw);
     }
   };
 }
 export {
+  createVisualEditorMiddleware,
   visualEditorProxyPlugin
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@accelerated-agency/visual-editor",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": false,
   "description": "Conversion visual editor as a reusable React package",
   "type": "module",