@wix/dev-machine-monitor 1.0.6 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/build/integration.js +8 -197
  2. package/build/integration.js.map +1 -0
  3. package/build/run.cjs +240 -477
  4. package/build/run.cjs.map +1 -1
  5. package/package.json +23 -13
  6. package/README.md +0 -16
package/build/integration.js CHANGED
@@ -1,198 +1,10 @@
1
+ // lib/templates/error-client.html
2
+ var error_client_default = '<style>\n :root {\n --bg: #0f1724;\n --card: #0b1220;\n --accent: #7dd3fc;\n --muted: #94a3b8;\n --glass: rgba(255, 255, 255, 0.04);\n --radius: 16px;\n color-scheme: light dark;\n }\n * {\n box-sizing: border-box;\n }\n html,\n body {\n height: 100%;\n }\n body {\n margin: 0;\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",\n Roboto, "Helvetica Neue", Arial;\n background: radial-gradient(\n 1200px 600px at 10% 10%,\n rgba(125, 211, 252, 0.06),\n transparent\n ),\n linear-gradient(180deg, var(--bg), #071025 80%);\n color: #e6eef8;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 32px;\n }\n .card {\n width: min(980px, 100%);\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.02),\n rgba(255, 255, 255, 0.01)\n );\n border: 1px solid rgba(255, 255, 255, 0.04);\n border-radius: var(--radius);\n padding: 32px;\n display: grid;\n grid-template-columns: 300px 1fr;\n gap: 24px;\n align-items: center;\n box-shadow: 0 8px 40px rgba(2, 6, 23, 0.6);\n }\n .illustration {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .badge {\n background: var(--glass);\n padding: 14px;\n border-radius: 14px;\n text-align: center;\n }\n .code {\n font-weight: 700;\n font-size: 48px;\n letter-spacing: -2px;\n color: var(--accent);\n display: block;\n }\n h1 {\n margin: 0 0 6px 0;\n font-size: 20px;\n }\n p.lead {\n margin: 0;\n color: var(--muted);\n }\n .actions {\n margin-top: 18px;\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n }\n .btn {\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.03),\n rgba(255, 255, 255, 0.01)\n );\n border: 1px solid rgba(255, 255, 255, 0.05);\n padding: 10px 14px;\n border-radius: 12px;\n cursor: pointer;\n font-weight: 600;\n color: inherit;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n }\n .btn.primary {\n background: linear-gradient(180deg, var(--accent), #4ecfe8);\n color: #032;\n box-shadow: 0 6px 18px rgba(125, 211, 252, 0.08);\n }\n @media (max-width: 720px) {\n .card {\n grid-template-columns: 1fr;\n padding: 20px;\n }\n .illustration {\n order: -1;\n }\n }\n .wobble {\n transform-origin: center;\n animation: wob 6s ease-in-out infinite;\n }\n @keyframes wob {\n 0% {\n transform: rotate(-3deg);\n }\n 50% {\n transform: rotate(3deg);\n }\n 100% {\n transform: rotate(-3deg);\n }\n }\n</style>\n<main class="card">\n <div class="illustration">\n <div class="badge">\n <svg\n width="160"\n height="160"\n viewBox="0 0 64 64"\n fill="none"\n xmlns="http://www.w3.org/2000/svg"\n class="wobble"\n role="img"\n aria-hidden="true"\n >\n <rect\n x="6"\n y="10"\n width="52"\n height="36"\n rx="6"\n fill="rgba(125,211,252,0.06)"\n stroke="rgba(125,211,252,0.12)"\n />\n <circle cx="20" cy="28" r="4" fill="rgba(125,211,252,0.18)" />\n <rect\n x="32"\n y="24"\n width="16"\n height="6"\n rx="2"\n fill="rgba(125,211,252,0.22)"\n />\n <path\n d="M18 46c2-3 6-5 10-5s8 2 10 5"\n stroke="rgba(255,255,255,0.06)"\n stroke-width="1.5"\n stroke-linecap="round"\n />\n <path\n d="M42 20l6-6"\n stroke="rgba(255,255,255,0.06)"\n stroke-width="2"\n stroke-linecap="round"\n />\n </svg>\n </div>\n </div>\n\n <section>\n <span class="code" id="err-code">Build Error Occurred</span>\n <h1 id="err-title">We failed to build Your project</h1>\n <p class="lead">\n We hit an unexpected error while trying to build your project. Use an AI\n to get it fixed automatically.\n </p>\n <div class="actions">\n <a class="btn primary" id="homeBtn" onClick="fixWithAI()">Fix with AI</a>\n </div>\n </section>\n</main>\n';
3
+
1
4
  // lib/integration.ts
2
5
  var ErrorOverlay = class _ErrorOverlay {
3
6
  static getOverlayHTML() {
4
- const html = `
5
- <style>
6
- :root {
7
- --bg: #0f1724;
8
- --card: #0b1220;
9
- --accent: #7dd3fc;
10
- --muted: #94a3b8;
11
- --glass: rgba(255, 255, 255, 0.04);
12
- --radius: 16px;
13
- color-scheme: light dark;
14
- }
15
- * {
16
- box-sizing: border-box;
17
- }
18
- html,
19
- body {
20
- height: 100%;
21
- }
22
- body {
23
- margin: 0;
24
- font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
25
- Roboto, "Helvetica Neue", Arial;
26
- background: radial-gradient(
27
- 1200px 600px at 10% 10%,
28
- rgba(125, 211, 252, 0.06),
29
- transparent
30
- ),
31
- linear-gradient(180deg, var(--bg), #071025 80%);
32
- color: #e6eef8;
33
- -webkit-font-smoothing: antialiased;
34
- -moz-osx-font-smoothing: grayscale;
35
- display: flex;
36
- align-items: center;
37
- justify-content: center;
38
- padding: 32px;
39
- }
40
- .card {
41
- width: min(980px, 100%);
42
- background: linear-gradient(
43
- 180deg,
44
- rgba(255, 255, 255, 0.02),
45
- rgba(255, 255, 255, 0.01)
46
- );
47
- border: 1px solid rgba(255, 255, 255, 0.04);
48
- border-radius: var(--radius);
49
- padding: 32px;
50
- display: grid;
51
- grid-template-columns: 300px 1fr;
52
- gap: 24px;
53
- align-items: center;
54
- box-shadow: 0 8px 40px rgba(2, 6, 23, 0.6);
55
- }
56
- .illustration {
57
- display: flex;
58
- align-items: center;
59
- justify-content: center;
60
- }
61
- .badge {
62
- background: var(--glass);
63
- padding: 14px;
64
- border-radius: 14px;
65
- text-align: center;
66
- }
67
- .code {
68
- font-weight: 700;
69
- font-size: 48px;
70
- letter-spacing: -2px;
71
- color: var(--accent);
72
- display: block;
73
- }
74
- h1 {
75
- margin: 0 0 6px 0;
76
- font-size: 20px;
77
- }
78
- p.lead {
79
- margin: 0;
80
- color: var(--muted);
81
- }
82
- .actions {
83
- margin-top: 18px;
84
- display: flex;
85
- gap: 12px;
86
- flex-wrap: wrap;
87
- }
88
- .btn {
89
- background: linear-gradient(
90
- 180deg,
91
- rgba(255, 255, 255, 0.03),
92
- rgba(255, 255, 255, 0.01)
93
- );
94
- border: 1px solid rgba(255, 255, 255, 0.05);
95
- padding: 10px 14px;
96
- border-radius: 12px;
97
- cursor: pointer;
98
- font-weight: 600;
99
- color: inherit;
100
- text-decoration: none;
101
- display: inline-flex;
102
- align-items: center;
103
- gap: 10px;
104
- }
105
- .btn.primary {
106
- background: linear-gradient(180deg, var(--accent), #4ecfe8);
107
- color: #032;
108
- box-shadow: 0 6px 18px rgba(125, 211, 252, 0.08);
109
- }
110
- @media (max-width: 720px) {
111
- .card {
112
- grid-template-columns: 1fr;
113
- padding: 20px;
114
- }
115
- .illustration {
116
- order: -1;
117
- }
118
- }
119
- .wobble {
120
- transform-origin: center;
121
- animation: wob 6s ease-in-out infinite;
122
- }
123
- @keyframes wob {
124
- 0% {
125
- transform: rotate(-3deg);
126
- }
127
- 50% {
128
- transform: rotate(3deg);
129
- }
130
- 100% {
131
- transform: rotate(-3deg);
132
- }
133
- }
134
- </style>
135
- <main class="card">
136
- <div class="illustration">
137
- <div class="badge">
138
- <svg
139
- width="160"
140
- height="160"
141
- viewBox="0 0 64 64"
142
- fill="none"
143
- xmlns="http://www.w3.org/2000/svg"
144
- class="wobble"
145
- role="img"
146
- aria-hidden="true"
147
- >
148
- <rect
149
- x="6"
150
- y="10"
151
- width="52"
152
- height="36"
153
- rx="6"
154
- fill="rgba(125,211,252,0.06)"
155
- stroke="rgba(125,211,252,0.12)"
156
- />
157
- <circle cx="20" cy="28" r="4" fill="rgba(125,211,252,0.18)" />
158
- <rect
159
- x="32"
160
- y="24"
161
- width="16"
162
- height="6"
163
- rx="2"
164
- fill="rgba(125,211,252,0.22)"
165
- />
166
- <path
167
- d="M18 46c2-3 6-5 10-5s8 2 10 5"
168
- stroke="rgba(255,255,255,0.06)"
169
- stroke-width="1.5"
170
- stroke-linecap="round"
171
- />
172
- <path
173
- d="M42 20l6-6"
174
- stroke="rgba(255,255,255,0.06)"
175
- stroke-width="2"
176
- stroke-linecap="round"
177
- />
178
- </svg>
179
- </div>
180
- </div>
181
-
182
- <section>
183
- <span class="code" id="err-code">Build Error Occurred</span>
184
- <h1 id="err-title">We failed to build Your project</h1>
185
- <p class="lead">
186
- We hit an unexpected error while trying to build your project.
187
- Use an AI to get it fixed automatically.
188
- </p>
189
- <div class="actions">
190
- <a class="btn primary" id="homeBtn" onClick="fixWithAI()">Fix with AI</a>
191
- </div>
192
- </section>
193
- </main>
194
- `;
195
- return html;
7
+ return `__TEMPLATE__`;
196
8
  }
197
9
  constructor(error) {
198
10
  console.error("monitor:error", error);
@@ -243,17 +55,16 @@ function customErrorOverlayPlugin() {
243
55
  if (!id.includes("vite/dist/client/client.mjs")) {
244
56
  return;
245
57
  }
246
- return patchOverlay(code);
58
+ return code.replace("class ErrorOverlay", getOverlayCode() + "\nclass OldErrorOverlay");
247
59
  }
248
60
  };
249
61
  }
250
- function patchOverlay(code) {
251
- return code.replace("class ErrorOverlay", getOverlayCode() + "\nclass OldErrorOverlay");
252
- }
253
62
  function getOverlayCode() {
254
- return `${ErrorOverlay.toString()}
63
+ const overlayAsString = ErrorOverlay.toString().replace("__TEMPLATE__", error_client_default);
64
+ return `${overlayAsString}
255
65
  var ErrorOverlay = _ErrorOverlay;`;
256
66
  }
257
67
  export {
258
68
  clientErrorMonitor
259
69
  };
70
+ //# sourceMappingURL=integration.js.map
package/build/integration.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../lib/templates/error-client.html","../lib/integration.ts"],"sourcesContent":["<style>\n :root {\n --bg: #0f1724;\n --card: #0b1220;\n --accent: #7dd3fc;\n --muted: #94a3b8;\n --glass: rgba(255, 255, 255, 0.04);\n --radius: 16px;\n color-scheme: light dark;\n }\n * {\n box-sizing: border-box;\n }\n html,\n body {\n height: 100%;\n }\n body {\n margin: 0;\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\",\n Roboto, \"Helvetica Neue\", Arial;\n background: radial-gradient(\n 1200px 600px at 10% 10%,\n rgba(125, 211, 252, 0.06),\n transparent\n ),\n linear-gradient(180deg, var(--bg), #071025 80%);\n color: #e6eef8;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 32px;\n }\n .card {\n width: min(980px, 100%);\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.02),\n rgba(255, 255, 255, 0.01)\n );\n border: 1px solid rgba(255, 255, 255, 0.04);\n border-radius: var(--radius);\n padding: 32px;\n display: grid;\n grid-template-columns: 300px 1fr;\n gap: 24px;\n align-items: center;\n box-shadow: 0 8px 40px rgba(2, 6, 23, 0.6);\n }\n .illustration {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .badge {\n background: var(--glass);\n padding: 14px;\n border-radius: 14px;\n text-align: center;\n }\n .code {\n font-weight: 700;\n font-size: 48px;\n letter-spacing: -2px;\n color: var(--accent);\n display: block;\n }\n h1 {\n margin: 0 0 6px 0;\n font-size: 20px;\n }\n p.lead {\n margin: 0;\n color: var(--muted);\n }\n .actions {\n margin-top: 18px;\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n }\n .btn {\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.03),\n rgba(255, 255, 255, 0.01)\n );\n border: 1px solid rgba(255, 255, 255, 0.05);\n padding: 10px 14px;\n border-radius: 12px;\n cursor: pointer;\n font-weight: 600;\n color: inherit;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n }\n .btn.primary {\n background: linear-gradient(180deg, var(--accent), #4ecfe8);\n color: #032;\n box-shadow: 0 6px 18px rgba(125, 211, 252, 0.08);\n }\n @media (max-width: 720px) {\n .card {\n grid-template-columns: 1fr;\n padding: 20px;\n }\n .illustration {\n order: -1;\n }\n }\n .wobble {\n transform-origin: center;\n animation: wob 6s ease-in-out infinite;\n }\n @keyframes wob {\n 0% {\n transform: rotate(-3deg);\n }\n 50% {\n transform: rotate(3deg);\n }\n 100% {\n transform: rotate(-3deg);\n }\n }\n</style>\n<main class=\"card\">\n <div class=\"illustration\">\n <div class=\"badge\">\n <svg\n width=\"160\"\n height=\"160\"\n viewBox=\"0 0 64 64\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"wobble\"\n role=\"img\"\n aria-hidden=\"true\"\n >\n <rect\n x=\"6\"\n y=\"10\"\n width=\"52\"\n height=\"36\"\n rx=\"6\"\n fill=\"rgba(125,211,252,0.06)\"\n stroke=\"rgba(125,211,252,0.12)\"\n />\n <circle cx=\"20\" cy=\"28\" r=\"4\" fill=\"rgba(125,211,252,0.18)\" />\n <rect\n x=\"32\"\n y=\"24\"\n width=\"16\"\n height=\"6\"\n rx=\"2\"\n fill=\"rgba(125,211,252,0.22)\"\n />\n <path\n d=\"M18 46c2-3 6-5 10-5s8 2 10 5\"\n stroke=\"rgba(255,255,255,0.06)\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n <path\n d=\"M42 20l6-6\"\n stroke=\"rgba(255,255,255,0.06)\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n </div>\n </div>\n\n <section>\n <span class=\"code\" id=\"err-code\">Build Error Occurred</span>\n <h1 id=\"err-title\">We failed to build Your project</h1>\n <p class=\"lead\">\n We hit an unexpected error while trying to build your project. Use an AI\n to get it fixed automatically.\n </p>\n <div class=\"actions\">\n <a class=\"btn primary\" id=\"homeBtn\" onClick=\"fixWithAI()\">Fix with AI</a>\n </div>\n </section>\n</main>\n","import type { AstroIntegration } from 'astro';\nimport type { PluginOption } from 'vite';\nimport template from './templates/error-client.html';\n\nclass ErrorOverlay {\n static getOverlayHTML() {\n return `__TEMPLATE__`;\n }\n\n constructor(error: Error) {\n console.error(\"monitor:error\", error);\n\n const overlay = document.createElement('div');\n overlay.innerHTML = ErrorOverlay.getOverlayHTML();\n\n window.fixWithAI = function() {\n window.parent?.postMessage(\n {\n type: \"clientError\",\n clientErrorData: {\n errorType: \"build\",\n message: error.message || \"Build/Runtime error occured\",\n stack: error.stack || error.message || 'No error details available',\n },\n },\n \"*\"\n );\n };\n\n return overlay;\n }\n}\n \nexport function clientErrorMonitor(): AstroIntegration {\n return {\n name: '@wix/dev-machine-monitor',\n hooks: {\n async 'astro:config:setup'({ command, updateConfig }) {\n if (command != \"dev\") {\n return;\n }\n\n updateConfig({\n vite: {\n plugins: [\n customErrorOverlayPlugin()\n ],\n }\n })\n }\n }\n }\n}\n \nfunction customErrorOverlayPlugin(): PluginOption {\n return {\n name: 'custom-error-overlay',\n transform(code, id, opts = {}) {\n if (opts?.ssr) {\n return;\n }\n\n if (!id.includes('vite/dist/client/client.mjs')) {\n return;\n }\n\n return code.replace('class ErrorOverlay', getOverlayCode() + '\\nclass OldErrorOverlay')\n },\n };\n}\n\n\nfunction getOverlayCode() {\n const overlayAsString = ErrorOverlay.toString().replace('__TEMPLATE__', template);\n return `${overlayAsString}\\nvar ErrorOverlay = _ErrorOverlay;`;\n}\n"],"mappings":";AAAA;;;ACIA,IAAM,eAAN,MAAM,cAAa;AAAA,EACjB,OAAO,iBAAiB;AACtB,WAAO;AAAA,EACT;AAAA,EAEA,YAAY,OAAc;AACxB,YAAQ,MAAM,iBAAiB,KAAK;AAEpC,UAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,YAAQ,YAAY,cAAa,eAAe;AAEhD,WAAO,YAAY,WAAW;AAC5B,aAAO,QAAQ;AAAA,QACb;AAAA,UACE,MAAM;AAAA,UACN,iBAAiB;AAAA,YACf,WAAW;AAAA,YACX,SAAS,MAAM,WAAW;AAAA,YAC1B,OAAO,MAAM,SAAS,MAAM,WAAW;AAAA,UACzC;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AACF;AAEO,SAAS,qBAAuC;AACnD,SAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,MACL,MAAM,qBAAqB,EAAE,SAAS,aAAa,GAAG;AACpD,YAAI,WAAW,OAAO;AACpB;AAAA,QACF;AAEA,qBAAa;AAAA,UACX,MAAM;AAAA,YACJ,SAAS;AAAA,cACP,yBAAyB;AAAA,YAC3B;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACJ;AAAA,EACF;AACF;AAEA,SAAS,2BAAyC;AAChD,SAAO;AAAA,IACL,MAAM;AAAA,IACN,UAAU,MAAM,IAAI,OAAO,CAAC,GAAG;AAC7B,UAAI,MAAM,KAAK;AACb;AAAA,MACF;AAEA,UAAI,CAAC,GAAG,SAAS,6BAA6B,GAAG;AAC/C;AAAA,MACF;AAEA,aAAO,KAAK,QAAQ,sBAAsB,eAAe,IAAI,yBAAyB;AAAA,IACxF;AAAA,EACF;AACF;AAGA,SAAS,iBAAiB;AACxB,QAAM,kBAAkB,aAAa,SAAS,EAAE,QAAQ,gBAAgB,oBAAQ;AAChF,SAAO,GAAG,eAAe;AAAA;AAC3B;","names":[]}