@shaper.org/vite-react-plugin 1.0.9 → 1.0.11

package/dist/index.d.mts

@@ -3,6 +3,25 @@ import { UserConfig } from "vite";
 
 //#region src/index.d.ts
 declare const reactPlugin: (config: UserConfig) => ({
+  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: vite0.ViteDevServer): void;
+  handleHotUpdate(ctx: vite0.HmrContext): vite0.ModuleNode[];
+} | {
   name: string;
   enforce: string;
   transform(code: any, id: any): Promise<{

package/dist/index.mjs

@@ -6,6 +6,7 @@ import * as PathUtil from "path";
 import { isAbsolute, posix, resolve, win32 } from "path";
 import babel from "@babel/core";
 import * as t from "@babel/types";
+import { HMREventsPlugin } from "@shaper.org/core/node";
 
 //#region rolldown:runtime
 var __create = Object.create;
@@ -1820,7 +1821,11 @@ function jsxSourcePlugin(options = {}) {
 //#endregion
 //#region src/index.ts
 const reactPlugin = (config) => {
-	return [jsxSourcePlugin(config), reactRoutesPlugin()];
+	return [
+		HMREventsPlugin(),
+		jsxSourcePlugin(config),
+		reactRoutesPlugin()
+	];
 };
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shaper.org/vite-react-plugin",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "",
   "type": "module",
   "private": false,
@@ -16,7 +16,7 @@
     "node": "^20.19.0 || >=22.12.0"
   },
   "peerDependencies": {
-    "@shaper.org/core": "1.0.1",
+    "@shaper.org/core": "^1.0.4",
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
     "vue": "^3.2.25"
   },
@@ -28,7 +28,7 @@
     "@jridgewell/gen-mapping": "^0.3.13",
     "@jridgewell/trace-mapping": "^0.3.31",
     "@rollup/pluginutils": "^5.3.0",
-    "@shaper.org/core": "1.0.1",
+    "@shaper.org/core": "^1.0.4",
     "esbuild": "^0.27.0",
     "obug": "^2.0.0",
     "rollup": "^4.53.3",

package/templates/main.ts

@@ -1,8 +1,5 @@
 /// <reference lib="dom" />
-import {
-    iframePostMessageClient,
-    IframePostMessageClient,
-} from "@shaper.org/core";
+import { IframePostMessageClient } from "@shaper.org/core/client";
 
 export const eventMap = {
     MouseUp: 0,
@@ -75,7 +72,7 @@ export class ReactRouteMonitor {
 
     constructor({ router, eventSettings }: ReactRouteMonitorOptions) {
         this.router = router;
-        this.iframeClient = iframePostMessageClient;
+        this.iframeClient = new IframePostMessageClient();
 
         // store originals
         this.origPush = history.pushState;
@@ -104,6 +101,16 @@ export class ReactRouteMonitor {
         this.attachGlobalListeners();
         window.addEventListener("locationchange", this.onLocationChange);
         window.addEventListener("popstate", this.triggerRouteChange);
+
+        this.sendAllRoutes = this.sendAllRoutes.bind(this);
+        window.addEventListener("getroutes", this.sendAllRoutes);
+
+        this.iframeClient.onMessage((event) => {
+            const messageData = event.data;
+            if (messageData.type == "push-route") {
+                window.location.href = messageData.message.path;
+            }
+        });
     }
 
     stop() {
@@ -117,6 +124,7 @@ export class ReactRouteMonitor {
 
         window.removeEventListener("locationchange", this.onLocationChange);
         window.removeEventListener("popstate", this.triggerRouteChange);
+        window.removeEventListener("getroutes", this.triggerRoutes);
     }
 
     patchHistory() {
@@ -131,6 +139,29 @@ export class ReactRouteMonitor {
         };
     }
 
+    sendAllRoutes(event: CustomEvent<{ routes?: any }>) {
+        if (!event) return;
+
+        const validRoutes = event.detail.routes.filter(
+            (route) => route.element !== undefined && route.path !== "*",
+        );
+        const routes = validRoutes.map((route) => ({
+            name: route.path,
+            path: route.path,
+            file: route.element.type().props["data-loc"],
+        }));
+
+        this.iframeClient.sendAllRoutes(routes);
+    }
+
+    triggerRoutes = () => {
+        window.dispatchEvent(
+            new CustomEvent("getroutes", {
+                detail: { routes: this.router.routes },
+            }),
+        );
+    };
+
     triggerRouteChange = () => {
         window.dispatchEvent(
             new CustomEvent("locationchange", {
@@ -154,18 +185,16 @@ export class ReactRouteMonitor {
         const from = state.matches[0].route;
         const fromPathname = this.router.state.location.pathname;
 
+        const routeInfo = {
+            name: toPathname,
+            path: toPathname,
+            file: to.element.type().props["data-loc"],
+        };
+
         if (toPathname === fromPathname) {
-            this.iframeClient.sendRouteRefresh({
-                name: toPathname,
-                path: toPathname,
-                file: to.element.type().props["data-loc"],
-            });
+            this.iframeClient.sendRouteRefresh(routeInfo);
         } else {
-            this.iframeClient.sendRouteChange({
-                name: toPathname,
-                path: toPathname,
-                file: to.element.type().props["data-loc"],
-            });
+            this.iframeClient.sendRouteChange(routeInfo);
         }
     };
 
@@ -215,3 +244,4 @@ const monitor = new ReactRouteMonitor({
 });
 
 monitor.start();
+monitor.triggerRoutes();