@shaper.org/core 1.0.4 → 1.0.6

package/dist/client/index.d.mts

@@ -1,8 +1,9 @@
 //#region src/client/iframe-post-message.d.ts
-type PostMessageType = "server-ready" | "all-routes" | "route-change" | "route-refresh";
+type PostMessageType = "server-ready" | "all-routes" | "route-change" | "route-refresh" | "error";
 interface PostMessage {
   message: any;
   type: PostMessageType;
+  object: "shaper-post-message";
 }
 interface RouteInfo {
   name: string;
@@ -29,6 +30,15 @@ interface RouteRefreshMessage extends PostMessage {
   type: "route-refresh";
   message: RouteInfo;
 }
+interface ErrorInfo {
+  errorType: string;
+  timestamp: number;
+  lineno?: number;
+  colno?: number;
+  stack: string;
+  has_blank_screen: boolean;
+  filename?: string;
+}
 declare class IframePostMessageClient {
   authHost: string;
   private receiveCallbacks;
@@ -44,6 +54,8 @@ declare class IframePostMessageClient {
   sendAllRoutes(routes: RouteInfo[]): void;
   sendRouteChange(route: RouteInfo): void;
   sendRouteRefresh(route: RouteInfo): void;
+  sendError(errorInfo: ErrorInfo): void;
+  sendConsole(): void;
 }
 //#endregion
 export { AllRoutesMessage, IframePostMessageClient, PostMessage, PostMessageType, RouteChangeMessage, RouteInfo, RouteRefreshMessage, ServerReadyMessage };

package/dist/client/index.mjs

@@ -33,14 +33,16 @@ var IframePostMessageClient = class {
 	sendServerReady() {
 		this._send({
 			type: "server-ready",
-			message: { satus: "ok" }
+			message: { satus: "ok" },
+			object: "shaper-post-message"
 		});
 	}
 	sendAllRoutes(routes) {
 		for (let route of routes) this._ensure_route_file(route);
 		const message = {
 			type: "all-routes",
-			message: { routes }
+			message: { routes },
+			object: "shaper-post-message"
 		};
 		this._send(message);
 	}
@@ -48,7 +50,8 @@ var IframePostMessageClient = class {
 		this._ensure_route_file(route);
 		const message = {
 			type: "route-change",
-			message: { ...route }
+			message: { ...route },
+			object: "shaper-post-message"
 		};
 		this._send(message);
 	}
@@ -56,10 +59,20 @@ var IframePostMessageClient = class {
 		this._ensure_route_file(route);
 		const message = {
 			type: "route-refresh",
-			message: { ...route }
+			message: { ...route },
+			object: "shaper-post-message"
 		};
 		this._send(message);
 	}
+	sendError(errorInfo) {
+		const message = {
+			type: "error",
+			message: errorInfo,
+			object: "shaper-post-message"
+		};
+		this._send(message);
+	}
+	sendConsole() {}
 };
 
 //#endregion

package/dist/node/index.d.mts

@@ -5,6 +5,7 @@ import { HmrContext, ViteDevServer } from "vite";
 declare const HMREventsPlugin: () => {
   name: string;
   enforce: string;
+  apply: string;
   resolveId(id: string): "virtual:hmr-events-plugin" | undefined;
   load(id: string): string | undefined;
   transformIndexHtml(html: string): {

package/dist/node/index.mjs

@@ -4,7 +4,8 @@ import { fileURLToPath } from "url";
 const HMREventsPlugin = () => {
 	return {
 		name: "hmr-events-plugin",
-		enforce: "pre",
+		enforce: "post",
+		apply: "serve",
 		resolveId(id) {
 			if (id === "virtual:hmr-events-plugin") return id;
 		},

package/dist/runtime/error-tracker.ts

@@ -1,82 +1,49 @@
 import { ViteHook } from "./vite-hook";
-import { ViteMessage } from "./vite-message";
-
-interface LogEvent {
-    type: "logEvent";
-    logLevel: string;
-    timestamp: number;
-    message: string;
-}
-
-interface UnhandledrejectionEvent {
-    type: "unhandledrejectionEvent";
-    message: string;
-    timestamp: number;
-}
-
-interface ErrorEvent {
-    type: "errorEvent";
-    lineno: number;
-    colno: number;
-    filename: string;
-    message: string;
-    timestamp: number;
-}
-
-type Event = LogEvent | UnhandledrejectionEvent | ErrorEvent;
+import { IframePostMessageClient } from "../client";
+import { ErrorInfo } from "src/client/iframe-post-message";
 
 class ErrorTracker {
-    eventsQueue: Event[];
-
     public vHook: ViteHook;
-    public viteMessage: ViteMessage;
+    private iframeClient: IframePostMessageClient;
 
     constructor() {
-        this.eventsQueue = [];
-
-        this.viteMessage = new ViteMessage();
-
         this.vHook = new ViteHook();
+        this.iframeClient = new IframePostMessageClient();
     }
 
     isBlankScreen() {
-        const app = document.querySelector("div#app");
+        const app = document.querySelector("div#root");
         return app ? app.childElementCount === 0 : false;
     }
 
     start() {
         this.handleError();
         this.handleUnhandledrejection();
-        this.consoleInterception();
-
-        let startTimestamp: number;
-        this.vHook.onBeforeUpdate((data, timestamp) => {
-            startTimestamp = timestamp;
-            this.viteMessage.sendBeforeUpdate(data);
-        });
-
-        this.vHook.onError((data, timestamp) => {
-            console.debug(data);
-        });
-
-        this.vHook.onAfterUpdate((data, timestamp) => {
-            setTimeout(() => {
-                const endTimestamp = Date.now();
+        this.handleConsoleInterception();
+        this.handleViteError();
+    }
 
-                let events = this.eventsQueue.filter(
-                    (event) =>
-                        event.timestamp >= startTimestamp &&
-                        event.timestamp <= endTimestamp,
-                );
+    formatConsoleMessage(args: unknown[]): string {
+        let error;
+        const texts = [];
+        for (let arg of args) {
+            if (arg instanceof Error) {
+                error = arg;
+            } else {
+                texts.push(arg);
+            }
+        }
 
-                this.viteMessage.sendAfterUpdate(events);
+        if (error) {
+            return error.stack || error.message;
+        }
 
-                this.eventsQueue = [];
-            }, 5);
-        });
+        return texts.map((text) => String(text)).join(" ");
     }
 
-    consoleInterception() {
+    handleConsoleInterception() {
+        type LogLevel = keyof typeof originalConsole;
+
         const originalConsole = {
             log: console.log,
             warn: console.warn,
@@ -84,83 +51,85 @@ class ErrorTracker {
             trace: console.trace,
             //   debug: console.debug,
         };
-
-        for (let logLevel of Object.keys(originalConsole)) {
-            console[logLevel] = function (...args) {
-                const logArgumentsString = args.map((arg) => {
-                    if (arg) {
-                        return arg.toString();
-                    }
-                });
-
-                this.eventsQueue.push({
-                    type: "logEvent",
-                    logLevel,
-                    timestamp: Date.now(),
-                    message: logArgumentsString.join(" "),
-                });
+        for (let logLevel of Object.keys(originalConsole) as LogLevel[]) {
+            console[logLevel] = function (
+                this: ErrorTracker,
+                ...args: unknown[]
+            ) {
                 originalConsole[logLevel].apply(this, args);
+
+                const message = this.formatConsoleMessage(args);
+
+                if (!message) return;
+
+                if (logLevel === "error") {
+                    console.debug("[vite-shaper] console error", message);
+                    this.iframeClient.sendError({
+                        errorType: "RUNTIME_ERROR",
+                        timestamp: Date.now(),
+                        stack: message,
+                        has_blank_screen: this.isBlankScreen(),
+                    });
+                }
             }.bind(this);
         }
     }
 
-    handleUnhandledrejection() {
-        window.addEventListener("unhandledrejection", (evt) => {
-            console.debug(evt);
-            const UnhandledrejectionMessage = {
-                type: "unhandledrejectionEvent",
-                message: evt.reason.stack || evt.reason.message,
+    handleViteError() {
+        this.vHook.onError((data) => {
+            console.debug("[vite-shaper] vite:error", data);
+
+            let error: ErrorInfo = {
+                errorType: "RUNTIME_ERROR",
                 timestamp: Date.now(),
+                stack: data.err.message,
+                has_blank_screen: this.isBlankScreen(),
             };
+            if (data.err.loc) {
+                error = {
+                    ...error,
+                    lineno: data.err.loc.line,
+                    colno: data.err.loc.column,
+                    filename: data.err.loc.file,
+                };
+            }
+            this.iframeClient.sendError(error);
+        });
+    }
 
-            this.eventsQueue.push(UnhandledrejectionMessage);
+    handleUnhandledrejection() {
+        window.addEventListener("unhandledrejection", (evt) => {
+            console.debug("[vite-shaper] handleUnhandledrejection", evt);
+            this.iframeClient.sendError({
+                errorType: "RUNTIME_ERROR",
+                timestamp: Date.now(),
+                stack: evt.reason.stack || evt.reason.message,
+                has_blank_screen: this.isBlankScreen(),
+            });
         });
     }
 
     handleError() {
         window.addEventListener("error", (evt) => {
+            console.debug("[vite-shaper] handleError", evt);
             let message;
             if (evt.error) {
                 message = evt.error.stack || evt.error.message;
             } else {
                 message = evt.message;
             }
-
-            console.debug(evt);
-            const errorMessage = {
-                type: "errorEvent",
+            this.iframeClient.sendError({
+                errorType: "RUNTIME_ERROR",
+                timestamp: Date.now(),
+                stack: message,
+                has_blank_screen: this.isBlankScreen(),
                 lineno: evt.lineno,
                 colno: evt.colno,
                 filename: evt.filename,
-                message: message,
-                timestamp: Date.now(),
-            };
-
-            this.eventsQueue.push(errorMessage);
+            });
         });
-
-        // This handle the following kind of runtime error
-        // For now it's diffcult to know what to do because those errors are not sync with the HMR lifecyle
-        // Maybe use a queue
-        // <script setup lang="ts">
-        // import { onMounted } from 'vue';
-
-        // onMounted(() => {
-        //   // This will trigger the error event because it happens at runtime
-        //   setTimeout(() => {
-        //     undefinedFunction(); // Runtime error - WILL trigger window.error
-        //   }, 0);
-        // });
-        // </script>
     }
 }
 
 const tracker = new ErrorTracker();
 tracker.start();
-
-// HMR listening
-// const handleMessage = (event) => {
-//   console.log(event);
-// };
-
-// window.addEventListener("message", handleMessage);

package/dist/runtime/vite-hook.ts

@@ -1,133 +1,133 @@
 import {
-  ErrorPayload,
-  FullReloadPayload,
-  PrunePayload,
-  UpdatePayload,
+    ErrorPayload,
+    FullReloadPayload,
+    PrunePayload,
+    UpdatePayload,
 } from "vite/types/hmrPayload.js";
 import { ViteHotContext } from "vite/types/hot.js";
 
 type ViteUpdateCallback =
-  | ((data: UpdatePayload, timestamp: number) => void)
-  | null;
+    | ((data: UpdatePayload, timestamp: number) => void)
+    | null;
 
 type VitePruneCallback =
-  | ((data: PrunePayload, timestamp: number) => void)
-  | null;
+    | ((data: PrunePayload, timestamp: number) => void)
+    | null;
 
 type VitFullReloadCallback =
-  | ((data: FullReloadPayload, timestamp: number) => void)
-  | null;
+    | ((data: FullReloadPayload, timestamp: number) => void)
+    | null;
 
 type ViteErrorCallback =
-  | ((data: ErrorPayload, timestamp: number) => void)
-  | null;
+    | ((data: ErrorPayload, timestamp: number) => void)
+    | null;
 
 type ViteInvalidateCallback = ((data: any, timestamp: number) => void) | null;
 
 type ViteWebSocketConnectCallback =
-  | ((data: any, timestamp: number) => void)
-  | null;
+    | ((data: any, timestamp: number) => void)
+    | null;
 
 type ViteWebSocketDisconnectCallback =
-  | ((data: any, timestamp: number) => void)
-  | null;
+    | ((data: any, timestamp: number) => void)
+    | null;
 
 class ViteHook {
-  private hmr: ViteHotContext | undefined;
-  constructor() {
-    this.hmr = import.meta.hot;
-  }
-  hotExists(hmr: ViteHotContext | undefined): hmr is ViteHotContext {
-    if (hmr) return true;
-    console.error("HotContext does not exists");
-    return false;
-  }
-
-  onBeforeUpdate(fn: ViteUpdateCallback = null) {
-    if (!this.hotExists(this.hmr)) return;
-
-    this.hmr.on("vite:beforeUpdate", (data: UpdatePayload) => {
-      const timestamp = Date.now();
-      console.debug("beforeUpdate");
-      fn && fn(data, timestamp);
-    });
-  }
-
-  onAfterUpdate(fn: ViteUpdateCallback = null) {
-    if (!this.hotExists(this.hmr)) return;
-
-    this.hmr.on("vite:afterUpdate", (data: UpdatePayload) => {
-      const timestamp = Date.now();
-      console.debug("afterUpdate");
-      fn && fn(data, timestamp);
-    });
-  }
-
-  onBeforePrune(fn: VitePruneCallback = null) {
-    if (!this.hotExists(this.hmr)) return;
-
-    this.hmr.on("vite:beforePrune", (data: PrunePayload) => {
-      const timestamp = Date.now();
-      console.debug("beforePrune");
-
-      fn && fn(data, timestamp);
-    });
-  }
-
-  onBeforeFullReload(fn: VitFullReloadCallback = null) {
-    if (!this.hotExists(this.hmr)) return;
-
-    this.hmr.on("vite:beforeFullReload", (data: FullReloadPayload) => {
-      const timestamp = Date.now();
-      console.debug("beforeFullReload");
-
-      fn && fn(data, timestamp);
-    });
-  }
-
-  onError(fn: ViteErrorCallback = null) {
-    if (!this.hotExists(this.hmr)) return;
-
-    this.hmr.on("vite:error", (data: ErrorPayload) => {
-      const timestamp = Date.now();
-      console.debug("error");
-
-      fn && fn(data, timestamp);
-    });
-  }
-
-  onInvalidate(fn: ViteInvalidateCallback = null) {
-    if (!this.hotExists(this.hmr)) return;
-
-    this.hmr.on("vite:invalidate", (data: any) => {
-      const timestamp = Date.now();
-      console.debug("invalidate");
-
-      fn && fn(data, timestamp);
-    });
-  }
-
-  onWsConnect(fn: ViteWebSocketConnectCallback = null) {
-    if (!this.hotExists(this.hmr)) return;
-
-    this.hmr.on("vite:ws:connect", (data: any) => {
-      const timestamp = Date.now();
-      console.debug("ws:connect");
-
-      fn && fn(data, timestamp);
-    });
-  }
-
-  onWsDisconnect(fn: ViteWebSocketDisconnectCallback = null) {
-    if (!this.hotExists(this.hmr)) return;
-
-    this.hmr.on("vite:ws:disconnect", (data: any) => {
-      const timestamp = Date.now();
-      console.debug(":ws:disconnect");
-
-      fn && fn(data, timestamp);
-    });
-  }
+    private hmr: ViteHotContext | undefined;
+    constructor() {
+        this.hmr = import.meta.hot;
+    }
+    hotExists(hmr: ViteHotContext | undefined): hmr is ViteHotContext {
+        if (hmr) return true;
+        console.error("HotContext does not exists");
+        return false;
+    }
+
+    onBeforeUpdate(fn: ViteUpdateCallback = null) {
+        if (!this.hotExists(this.hmr)) return;
+
+        this.hmr.on("vite:beforeUpdate", (data: UpdatePayload) => {
+            const timestamp = Date.now();
+            console.debug("beforeUpdate");
+            fn && fn(data, timestamp);
+        });
+    }
+
+    onAfterUpdate(fn: ViteUpdateCallback = null) {
+        if (!this.hotExists(this.hmr)) return;
+
+        this.hmr.on("vite:afterUpdate", (data: UpdatePayload) => {
+            const timestamp = Date.now();
+            console.debug("afterUpdate");
+            fn && fn(data, timestamp);
+        });
+    }
+
+    onBeforePrune(fn: VitePruneCallback = null) {
+        if (!this.hotExists(this.hmr)) return;
+
+        this.hmr.on("vite:beforePrune", (data: PrunePayload) => {
+            const timestamp = Date.now();
+            console.debug("beforePrune");
+
+            fn && fn(data, timestamp);
+        });
+    }
+
+    onBeforeFullReload(fn: VitFullReloadCallback = null) {
+        if (!this.hotExists(this.hmr)) return;
+
+        this.hmr.on("vite:beforeFullReload", (data: FullReloadPayload) => {
+            const timestamp = Date.now();
+            console.debug("beforeFullReload");
+
+            fn && fn(data, timestamp);
+        });
+    }
+
+    onError(fn: ViteErrorCallback = null) {
+        if (!this.hotExists(this.hmr)) return;
+
+        this.hmr.on("vite:error", (data: ErrorPayload) => {
+            const timestamp = Date.now();
+            console.debug("error");
+
+            fn && fn(data, timestamp);
+        });
+    }
+
+    onInvalidate(fn: ViteInvalidateCallback = null) {
+        if (!this.hotExists(this.hmr)) return;
+
+        this.hmr.on("vite:invalidate", (data: any) => {
+            const timestamp = Date.now();
+            console.debug("invalidate");
+
+            fn && fn(data, timestamp);
+        });
+    }
+
+    onWsConnect(fn: ViteWebSocketConnectCallback = null) {
+        if (!this.hotExists(this.hmr)) return;
+
+        this.hmr.on("vite:ws:connect", (data: any) => {
+            const timestamp = Date.now();
+            console.debug("ws:connect");
+
+            fn && fn(data, timestamp);
+        });
+    }
+
+    onWsDisconnect(fn: ViteWebSocketDisconnectCallback = null) {
+        if (!this.hotExists(this.hmr)) return;
+
+        this.hmr.on("vite:ws:disconnect", (data: any) => {
+            const timestamp = Date.now();
+            console.debug(":ws:disconnect");
+
+            fn && fn(data, timestamp);
+        });
+    }
 }
 
 export { ViteHook };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shaper.org/core",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "",
   "type": "module",
   "private": false,