@shaper.org/vite-react-plugin 1.0.8 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shaper.org/vite-react-plugin",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "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",
@@ -51,6 +51,9 @@
     "dts": true,
     "format": [
       "esm"
+    ],
+    "external": [
+      "esbuild"
     ]
   },
   "publishConfig": {

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,9 @@ 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);
     }
 
     stop() {
@@ -117,6 +117,7 @@ export class ReactRouteMonitor {
 
         window.removeEventListener("locationchange", this.onLocationChange);
         window.removeEventListener("popstate", this.triggerRouteChange);
+        window.removeEventListener("getroutes", this.triggerRoutes);
     }
 
     patchHistory() {
@@ -131,6 +132,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 +178,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 +237,4 @@ const monitor = new ReactRouteMonitor({
 });
 
 monitor.start();
+monitor.triggerRoutes();