@wix/dev-machine-monitor 1.0.4 → 1.0.6

package/README.md

@@ -10,4 +10,7 @@ monitor \
   --proxy-from http://0.0.0.0:$TASK_PORT \
   --proxy-to http://localhost:4321 \
   -- wix dev --port 4321 --base-url $BASE_URL
-```
+```
+
+[ ] - publish
+[ ] - add to picasso project

package/build/integration.d.ts

@@ -0,0 +1,5 @@
+import { AstroIntegration } from 'astro';
+
+declare function clientErrorMonitor(): AstroIntegration;
+
+export { clientErrorMonitor };

package/build/integration.js

@@ -0,0 +1,259 @@
+// lib/integration.ts
+var ErrorOverlay = class _ErrorOverlay {
+  static getOverlayHTML() {
+    const html = `
+      <style>
+        :root {
+          --bg: #0f1724;
+          --card: #0b1220;
+          --accent: #7dd3fc;
+          --muted: #94a3b8;
+          --glass: rgba(255, 255, 255, 0.04);
+          --radius: 16px;
+          color-scheme: light dark;
+        }
+        * {
+          box-sizing: border-box;
+        }
+        html,
+        body {
+          height: 100%;
+        }
+        body {
+          margin: 0;
+          font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
+            Roboto, "Helvetica Neue", Arial;
+          background: radial-gradient(
+              1200px 600px at 10% 10%,
+              rgba(125, 211, 252, 0.06),
+              transparent
+            ),
+            linear-gradient(180deg, var(--bg), #071025 80%);
+          color: #e6eef8;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 32px;
+        }
+        .card {
+          width: min(980px, 100%);
+          background: linear-gradient(
+            180deg,
+            rgba(255, 255, 255, 0.02),
+            rgba(255, 255, 255, 0.01)
+          );
+          border: 1px solid rgba(255, 255, 255, 0.04);
+          border-radius: var(--radius);
+          padding: 32px;
+          display: grid;
+          grid-template-columns: 300px 1fr;
+          gap: 24px;
+          align-items: center;
+          box-shadow: 0 8px 40px rgba(2, 6, 23, 0.6);
+        }
+        .illustration {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .badge {
+          background: var(--glass);
+          padding: 14px;
+          border-radius: 14px;
+          text-align: center;
+        }
+        .code {
+          font-weight: 700;
+          font-size: 48px;
+          letter-spacing: -2px;
+          color: var(--accent);
+          display: block;
+        }
+        h1 {
+          margin: 0 0 6px 0;
+          font-size: 20px;
+        }
+        p.lead {
+          margin: 0;
+          color: var(--muted);
+        }
+        .actions {
+          margin-top: 18px;
+          display: flex;
+          gap: 12px;
+          flex-wrap: wrap;
+        }
+        .btn {
+          background: linear-gradient(
+            180deg,
+            rgba(255, 255, 255, 0.03),
+            rgba(255, 255, 255, 0.01)
+          );
+          border: 1px solid rgba(255, 255, 255, 0.05);
+          padding: 10px 14px;
+          border-radius: 12px;
+          cursor: pointer;
+          font-weight: 600;
+          color: inherit;
+          text-decoration: none;
+          display: inline-flex;
+          align-items: center;
+          gap: 10px;
+        }
+        .btn.primary {
+          background: linear-gradient(180deg, var(--accent), #4ecfe8);
+          color: #032;
+          box-shadow: 0 6px 18px rgba(125, 211, 252, 0.08);
+        }
+        @media (max-width: 720px) {
+          .card {
+            grid-template-columns: 1fr;
+            padding: 20px;
+          }
+          .illustration {
+            order: -1;
+          }
+        }
+        .wobble {
+          transform-origin: center;
+          animation: wob 6s ease-in-out infinite;
+        }
+        @keyframes wob {
+          0% {
+            transform: rotate(-3deg);
+          }
+          50% {
+            transform: rotate(3deg);
+          }
+          100% {
+            transform: rotate(-3deg);
+          }
+        }
+      </style>
+      <main class="card">
+        <div class="illustration">
+          <div class="badge">
+            <svg
+              width="160"
+              height="160"
+              viewBox="0 0 64 64"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              class="wobble"
+              role="img"
+              aria-hidden="true"
+            >
+              <rect
+                x="6"
+                y="10"
+                width="52"
+                height="36"
+                rx="6"
+                fill="rgba(125,211,252,0.06)"
+                stroke="rgba(125,211,252,0.12)"
+              />
+              <circle cx="20" cy="28" r="4" fill="rgba(125,211,252,0.18)" />
+              <rect
+                x="32"
+                y="24"
+                width="16"
+                height="6"
+                rx="2"
+                fill="rgba(125,211,252,0.22)"
+              />
+              <path
+                d="M18 46c2-3 6-5 10-5s8 2 10 5"
+                stroke="rgba(255,255,255,0.06)"
+                stroke-width="1.5"
+                stroke-linecap="round"
+              />
+              <path
+                d="M42 20l6-6"
+                stroke="rgba(255,255,255,0.06)"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <section>
+          <span class="code" id="err-code">Build Error Occurred</span>
+          <h1 id="err-title">We failed to build Your project</h1>
+          <p class="lead">
+            We hit an unexpected error while trying to build your project.
+            Use an AI to get it fixed automatically.
+          </p>
+          <div class="actions">
+            <a class="btn primary" id="homeBtn" onClick="fixWithAI()">Fix with AI</a>
+          </div>
+        </section>
+      </main>
+    `;
+    return html;
+  }
+  constructor(error) {
+    console.error("monitor:error", error);
+    const overlay = document.createElement("div");
+    overlay.innerHTML = _ErrorOverlay.getOverlayHTML();
+    window.fixWithAI = function() {
+      window.parent?.postMessage(
+        {
+          type: "clientError",
+          clientErrorData: {
+            errorType: "build",
+            message: error.message || "Build/Runtime error occured",
+            stack: error.stack || error.message || "No error details available"
+          }
+        },
+        "*"
+      );
+    };
+    return overlay;
+  }
+};
+function clientErrorMonitor() {
+  return {
+    name: "@wix/dev-machine-monitor",
+    hooks: {
+      async "astro:config:setup"({ command, updateConfig }) {
+        if (command != "dev") {
+          return;
+        }
+        updateConfig({
+          vite: {
+            plugins: [
+              customErrorOverlayPlugin()
+            ]
+          }
+        });
+      }
+    }
+  };
+}
+function customErrorOverlayPlugin() {
+  return {
+    name: "custom-error-overlay",
+    transform(code, id, opts = {}) {
+      if (opts?.ssr) {
+        return;
+      }
+      if (!id.includes("vite/dist/client/client.mjs")) {
+        return;
+      }
+      return patchOverlay(code);
+    }
+  };
+}
+function patchOverlay(code) {
+  return code.replace("class ErrorOverlay", getOverlayCode() + "\nclass OldErrorOverlay");
+}
+function getOverlayCode() {
+  return `${ErrorOverlay.toString()}
+var ErrorOverlay = _ErrorOverlay;`;
+}
+export {
+  clientErrorMonitor
+};