@shaper.org/core 1.0.1 → 1.0.3

package/dist/{index.d.mts → client/index.d.mts}

@@ -1,4 +1,4 @@
-//#region src/iframe-post-message.d.ts
+//#region src/client/iframe-post-message.d.ts
 type PostMessageType = "server-ready" | "all-routes" | "route-change" | "route-refresh";
 interface PostMessage {
   message: any;
@@ -35,14 +35,19 @@ interface RouteRefreshMessage extends PostMessage {
 }
 declare class IframePostMessageClient {
   authHost: string;
+  private receiveCallbacks;
   constructor();
   _ensure_route_file(route: RouteInfo): void;
   _send(message: PostMessage): void;
+  /**
+   * Allow consumers to register callbacks for incoming messages.
+   */
+  onMessage(callback: (event: MessageEvent<any>) => void): void;
+  onReceiveMessage(message: MessageEvent<any>): void;
   sendServerReady(): void;
   sendAllRoutes(routes: RouteInfo[]): void;
   sendRouteChange(route: RouteInfo): void;
   sendRouteRefresh(route: RouteInfo): void;
 }
-declare const iframePostMessageClient: IframePostMessageClient;
 //#endregion
-export { AllRoutesMessage, IframePostMessageClient, PostMessage, PostMessageType, RouteChangeMessage, RouteInfo, RouteRefreshMessage, ServerReadyMessage, iframePostMessageClient };
+export { AllRoutesMessage, IframePostMessageClient, PostMessage, PostMessageType, RouteChangeMessage, RouteInfo, RouteRefreshMessage, ServerReadyMessage };

package/dist/{index.mjs → client/index.mjs}

@@ -1,17 +1,35 @@
-//#region src/iframe-post-message.ts
+//#region src/client/iframe-post-message.ts
 var IframePostMessageClient = class {
 	authHost;
+	receiveCallbacks = [];
 	constructor() {
 		if (!import.meta.env) throw new Error("import.meta.env is not defined");
 		const AUTH_HOST = import.meta.env.VITE_FRONT_URL;
 		this.authHost = AUTH_HOST.endsWith("/") ? AUTH_HOST.slice(0, -1) : AUTH_HOST;
+		this.receiveCallbacks = [];
+		this.onReceiveMessage = this.onReceiveMessage.bind(this);
+		window.addEventListener("message", this.onReceiveMessage);
 	}
 	_ensure_route_file(route) {
-		if (!route.file.startsWith("src")) throw Error(`Invalid route path, route path should be relative to the root got: ${route.file}`);
+		if (!route.file.startsWith("src")) throw Error(`Invalid route file, route file should be relative to the root got: ${route.file}`);
 	}
 	_send(message) {
 		window.parent.postMessage(message, this.authHost);
 	}
+	/**
+	* Allow consumers to register callbacks for incoming messages.
+	*/
+	onMessage(callback) {
+		this.receiveCallbacks.push(callback);
+	}
+	onReceiveMessage(message) {
+		if (message.origin !== this.authHost) return;
+		for (const cb of this.receiveCallbacks) try {
+			cb(message);
+		} catch (err) {
+			console.error("Provided callback failed:", err);
+		}
+	}
 	sendServerReady() {
 		this._send({
 			type: "server-ready",
@@ -43,7 +61,6 @@ var IframePostMessageClient = class {
 		this._send(message);
 	}
 };
-const iframePostMessageClient = new IframePostMessageClient();
 
 //#endregion
-export { IframePostMessageClient, iframePostMessageClient };
+export { IframePostMessageClient };

package/dist/node/index.d.mts

@@ -0,0 +1,26 @@
+import * as vite0 from "vite";
+import { HmrContext, ViteDevServer } from "vite";
+
+//#region src/node/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 { HMREventsPlugin };

package/dist/node/index.mjs

@@ -0,0 +1,47 @@
+import { fileURLToPath } from "url";
+
+//#region src/node/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 };

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,6 +1,6 @@
 {
   "name": "@shaper.org/core",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "",
   "type": "module",
   "private": false,
@@ -12,6 +12,14 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
+    "./client": {
+      "import": "./dist/client/index.mjs",
+      "types": "./dist/client/index.d.ts"
+    },
+    "./node": {
+      "import": "./dist/node/index.mjs",
+      "types": "./dist/node/index.d.ts"
+    },
     "./package.json": "./package.json"
   },
   "types": "./dist/index.d.ts",
@@ -36,12 +44,20 @@
   },
   "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/"
+    ],
+    "entry": [
+      "src/node/index.ts",
+      "src/client/index.ts"
     ]
   },
   "publishConfig": {