@shaper.org/core 1.0.1 → 1.0.2

package/dist/index.d.mts

@@ -1,3 +1,6 @@
+import * as vite0 from "vite";
+import { HmrContext, ViteDevServer } from "vite";
+
 //#region src/iframe-post-message.d.ts
 type PostMessageType = "server-ready" | "all-routes" | "route-change" | "route-refresh";
 interface PostMessage {
@@ -43,6 +46,27 @@ declare class IframePostMessageClient {
   sendRouteChange(route: RouteInfo): void;
   sendRouteRefresh(route: RouteInfo): void;
 }
-declare const iframePostMessageClient: IframePostMessageClient;
 //#endregion
-export { AllRoutesMessage, IframePostMessageClient, PostMessage, PostMessageType, RouteChangeMessage, RouteInfo, RouteRefreshMessage, ServerReadyMessage, iframePostMessageClient };
+//#region src/hmr-events-plugin.d.ts
+declare const HMREventsPlugin: () => {
+  name: string;
+  enforce: string;
+  resolveId(id: string): "virtual:hmr-events-plugin" | undefined;
+  load(id: string): string | undefined;
+  transformIndexHtml(html: string): {
+    html: string;
+    tags: {
+      tag: string;
+      injectTo: string;
+      type: string;
+      attrs: {
+        src: string;
+        type: string;
+      };
+    }[];
+  };
+  configureServer(server: ViteDevServer): void;
+  handleHotUpdate(ctx: HmrContext): vite0.ModuleNode[];
+};
+//#endregion
+export { AllRoutesMessage, HMREventsPlugin, IframePostMessageClient, PostMessage, PostMessageType, RouteChangeMessage, RouteInfo, RouteRefreshMessage, ServerReadyMessage };

package/dist/index.mjs

@@ -1,3 +1,5 @@
+import { fileURLToPath } from "url";
+
 //#region src/iframe-post-message.ts
 var IframePostMessageClient = class {
 	authHost;
@@ -43,7 +45,50 @@ var IframePostMessageClient = class {
 		this._send(message);
 	}
 };
-const iframePostMessageClient = new IframePostMessageClient();
 
 //#endregion
-export { IframePostMessageClient, iframePostMessageClient };
+//#region src/hmr-events-plugin.ts
+const HMREventsPlugin = () => {
+	return {
+		name: "hmr-events-plugin",
+		enforce: "pre",
+		resolveId(id) {
+			if (id === "virtual:hmr-events-plugin") return id;
+		},
+		load(id) {
+			if (id === "virtual:hmr-events-plugin") {
+				const runtimePath = fileURLToPath(new URL("./runtime/error-tracker", import.meta.url));
+				return `import ${JSON.stringify(runtimePath)};`;
+			}
+		},
+		transformIndexHtml(html) {
+			return {
+				html,
+				tags: [{
+					tag: "script",
+					injectTo: "body",
+					type: "module",
+					attrs: {
+						src: "/@id/virtual:hmr-events-plugin",
+						type: "module"
+					}
+				}]
+			};
+		},
+		configureServer(server) {
+			server.ws.on("breeze:beforeUpdate", (event) => {});
+			server.ws.on("breeze:afterUpdate", (event) => {
+				for (let eventMessage of event.data) console.log(eventMessage.message);
+				console.log("[breeze] end update");
+			});
+		},
+		handleHotUpdate(ctx) {
+			const { file, timestamp, read, server, modules } = ctx;
+			console.log(`[breeze] hmr update: ${file}`);
+			return modules;
+		}
+	};
+};
+
+//#endregion
+export { HMREventsPlugin, IframePostMessageClient };

package/dist/runtime/error-tracker.ts

@@ -0,0 +1,166 @@
+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;
+
+class ErrorTracker {
+    eventsQueue: Event[];
+
+    public vHook: ViteHook;
+    public viteMessage: ViteMessage;
+
+    constructor() {
+        this.eventsQueue = [];
+
+        this.viteMessage = new ViteMessage();
+
+        this.vHook = new ViteHook();
+    }
+
+    isBlankScreen() {
+        const app = document.querySelector("div#app");
+        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();
+
+                let events = this.eventsQueue.filter(
+                    (event) =>
+                        event.timestamp >= startTimestamp &&
+                        event.timestamp <= endTimestamp,
+                );
+
+                this.viteMessage.sendAfterUpdate(events);
+
+                this.eventsQueue = [];
+            }, 5);
+        });
+    }
+
+    consoleInterception() {
+        const originalConsole = {
+            log: console.log,
+            warn: console.warn,
+            error: console.error,
+            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(" "),
+                });
+                originalConsole[logLevel].apply(this, args);
+            }.bind(this);
+        }
+    }
+
+    handleUnhandledrejection() {
+        window.addEventListener("unhandledrejection", (evt) => {
+            console.debug(evt);
+            const UnhandledrejectionMessage = {
+                type: "unhandledrejectionEvent",
+                message: evt.reason.stack || evt.reason.message,
+                timestamp: Date.now(),
+            };
+
+            this.eventsQueue.push(UnhandledrejectionMessage);
+        });
+    }
+
+    handleError() {
+        window.addEventListener("error", (evt) => {
+            let message;
+            if (evt.error) {
+                message = evt.error.stack || evt.error.message;
+            } else {
+                message = evt.message;
+            }
+
+            console.debug(evt);
+            const errorMessage = {
+                type: "errorEvent",
+                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

@@ -0,0 +1,133 @@
+import {
+  ErrorPayload,
+  FullReloadPayload,
+  PrunePayload,
+  UpdatePayload,
+} from "vite/types/hmrPayload.js";
+import { ViteHotContext } from "vite/types/hot.js";
+
+type ViteUpdateCallback =
+  | ((data: UpdatePayload, timestamp: number) => void)
+  | null;
+
+type VitePruneCallback =
+  | ((data: PrunePayload, timestamp: number) => void)
+  | null;
+
+type VitFullReloadCallback =
+  | ((data: FullReloadPayload, timestamp: number) => void)
+  | null;
+
+type ViteErrorCallback =
+  | ((data: ErrorPayload, timestamp: number) => void)
+  | null;
+
+type ViteInvalidateCallback = ((data: any, timestamp: number) => void) | null;
+
+type ViteWebSocketConnectCallback =
+  | ((data: any, timestamp: number) => void)
+  | null;
+
+type ViteWebSocketDisconnectCallback =
+  | ((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);
+    });
+  }
+}
+
+export { ViteHook };

package/dist/runtime/vite-message.ts

@@ -0,0 +1,61 @@
+import { ViteHotContext } from "vite/types/hot.js";
+
+interface MessageEvent {
+  type: "custom";
+  event: string;
+  data: any;
+}
+
+enum MessageEventType {
+  BEFORE_UPDATE = "breeze:beforeUpdate",
+  AFTER_UPDATE = "breeze:afterUpdate",
+  ERROR = "breeze:error",
+}
+
+class ViteMessage {
+  private server: ViteHotContext | undefined;
+
+  constructor() {
+    this.server = import.meta.hot;
+  }
+
+  hotExists(server: ViteHotContext | undefined): server is ViteHotContext {
+    if (server) return true;
+    console.error("HotContext does not exists");
+    return false;
+  }
+
+  send(event: string, message: MessageEvent) {
+    if (!this.hotExists(this.server)) return;
+    this.server.send(event, message);
+  }
+
+  sendBeforeUpdate(data: any) {
+    if (!this.hotExists(this.server)) return;
+    this.server.send(MessageEventType.BEFORE_UPDATE, {
+      type: "custom",
+      event: MessageEventType.BEFORE_UPDATE,
+      data: data,
+    });
+  }
+
+  sendError(data: any) {
+    if (!this.hotExists(this.server)) return;
+    this.server.send(MessageEventType.ERROR, {
+      type: "custom",
+      event: MessageEventType.ERROR,
+      data: data,
+    });
+  }
+
+  sendAfterUpdate(data: any) {
+    if (!this.hotExists(this.server)) return;
+    this.server.send(MessageEventType.AFTER_UPDATE, {
+      type: "custom",
+      event: MessageEventType.AFTER_UPDATE,
+      data: data,
+    });
+  }
+}
+
+export { ViteMessage };

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@shaper.org/core",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "type": "module",
   "private": false,
   "files": [
-    "dist"
+    "dist",
+    "src/runtime"
   ],
   "exports": {
     ".": {
@@ -36,12 +37,16 @@
   },
   "dependencies": {
     "@rolldown/pluginutils": "1.0.0-beta.50",
-    "tsup": "^8.5.1"
+    "tsup": "^8.5.1",
+    "esbuild": "^0.27.0"
   },
   "tsdown": {
     "dts": true,
     "format": [
       "esm"
+    ],
+    "copy": [
+      "src/runtime/"
     ]
   },
   "publishConfig": {

package/src/runtime/error-tracker.ts

@@ -0,0 +1,166 @@
+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;
+
+class ErrorTracker {
+    eventsQueue: Event[];
+
+    public vHook: ViteHook;
+    public viteMessage: ViteMessage;
+
+    constructor() {
+        this.eventsQueue = [];
+
+        this.viteMessage = new ViteMessage();
+
+        this.vHook = new ViteHook();
+    }
+
+    isBlankScreen() {
+        const app = document.querySelector("div#app");
+        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();
+
+                let events = this.eventsQueue.filter(
+                    (event) =>
+                        event.timestamp >= startTimestamp &&
+                        event.timestamp <= endTimestamp,
+                );
+
+                this.viteMessage.sendAfterUpdate(events);
+
+                this.eventsQueue = [];
+            }, 5);
+        });
+    }
+
+    consoleInterception() {
+        const originalConsole = {
+            log: console.log,
+            warn: console.warn,
+            error: console.error,
+            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(" "),
+                });
+                originalConsole[logLevel].apply(this, args);
+            }.bind(this);
+        }
+    }
+
+    handleUnhandledrejection() {
+        window.addEventListener("unhandledrejection", (evt) => {
+            console.debug(evt);
+            const UnhandledrejectionMessage = {
+                type: "unhandledrejectionEvent",
+                message: evt.reason.stack || evt.reason.message,
+                timestamp: Date.now(),
+            };
+
+            this.eventsQueue.push(UnhandledrejectionMessage);
+        });
+    }
+
+    handleError() {
+        window.addEventListener("error", (evt) => {
+            let message;
+            if (evt.error) {
+                message = evt.error.stack || evt.error.message;
+            } else {
+                message = evt.message;
+            }
+
+            console.debug(evt);
+            const errorMessage = {
+                type: "errorEvent",
+                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/src/runtime/vite-hook.ts

@@ -0,0 +1,133 @@
+import {
+  ErrorPayload,
+  FullReloadPayload,
+  PrunePayload,
+  UpdatePayload,
+} from "vite/types/hmrPayload.js";
+import { ViteHotContext } from "vite/types/hot.js";
+
+type ViteUpdateCallback =
+  | ((data: UpdatePayload, timestamp: number) => void)
+  | null;
+
+type VitePruneCallback =
+  | ((data: PrunePayload, timestamp: number) => void)
+  | null;
+
+type VitFullReloadCallback =
+  | ((data: FullReloadPayload, timestamp: number) => void)
+  | null;
+
+type ViteErrorCallback =
+  | ((data: ErrorPayload, timestamp: number) => void)
+  | null;
+
+type ViteInvalidateCallback = ((data: any, timestamp: number) => void) | null;
+
+type ViteWebSocketConnectCallback =
+  | ((data: any, timestamp: number) => void)
+  | null;
+
+type ViteWebSocketDisconnectCallback =
+  | ((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);
+    });
+  }
+}
+
+export { ViteHook };

package/src/runtime/vite-message.ts

@@ -0,0 +1,61 @@
+import { ViteHotContext } from "vite/types/hot.js";
+
+interface MessageEvent {
+  type: "custom";
+  event: string;
+  data: any;
+}
+
+enum MessageEventType {
+  BEFORE_UPDATE = "breeze:beforeUpdate",
+  AFTER_UPDATE = "breeze:afterUpdate",
+  ERROR = "breeze:error",
+}
+
+class ViteMessage {
+  private server: ViteHotContext | undefined;
+
+  constructor() {
+    this.server = import.meta.hot;
+  }
+
+  hotExists(server: ViteHotContext | undefined): server is ViteHotContext {
+    if (server) return true;
+    console.error("HotContext does not exists");
+    return false;
+  }
+
+  send(event: string, message: MessageEvent) {
+    if (!this.hotExists(this.server)) return;
+    this.server.send(event, message);
+  }
+
+  sendBeforeUpdate(data: any) {
+    if (!this.hotExists(this.server)) return;
+    this.server.send(MessageEventType.BEFORE_UPDATE, {
+      type: "custom",
+      event: MessageEventType.BEFORE_UPDATE,
+      data: data,
+    });
+  }
+
+  sendError(data: any) {
+    if (!this.hotExists(this.server)) return;
+    this.server.send(MessageEventType.ERROR, {
+      type: "custom",
+      event: MessageEventType.ERROR,
+      data: data,
+    });
+  }
+
+  sendAfterUpdate(data: any) {
+    if (!this.hotExists(this.server)) return;
+    this.server.send(MessageEventType.AFTER_UPDATE, {
+      type: "custom",
+      event: MessageEventType.AFTER_UPDATE,
+      data: data,
+    });
+  }
+}
+
+export { ViteMessage };