@shaper.org/vite-react-plugin 1.0.6 → 1.0.7

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@shaper.org/vite-react-plugin",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "",
   "type": "module",
   "private": false,
   "files": [
     "dist",
-    "template"
+    "templates"
   ],
   "exports": {
     ".": "./dist/index.mjs",

package/templates/main.ts

@@ -0,0 +1,217 @@
+/// <reference lib="dom" />
+import {
+    iframePostMessageClient,
+    IframePostMessageClient,
+} from "@shaper.org/core";
+
+export const eventMap = {
+    MouseUp: 0,
+    MouseDown: 1,
+    Click: 2,
+    ContextMenu: 3,
+    DblClick: 4,
+    Focus: 5,
+    Blur: 6,
+    TouchStart: 7,
+    TouchMove: 8,
+    TouchEnd: 9,
+    TouchCancel: 10,
+};
+export type EventName = keyof typeof eventMap;
+
+export const settings = {
+    MouseUp: true,
+    MouseDown: true,
+    Click: true,
+    ContextMenu: true,
+    DblClick: true,
+    Focus: true,
+    Blur: true,
+    TouchStart: true,
+    TouchMove: true,
+    TouchEnd: true,
+    TouchCancel: true,
+};
+
+export interface EventsSetting {
+    MouseUp?: boolean;
+    MouseDown?: boolean;
+    Click?: boolean;
+    ContextMenu?: boolean;
+    DblClick?: boolean;
+    Focus?: boolean;
+    Blur?: boolean;
+    TouchStart?: boolean;
+    TouchMove?: boolean;
+    TouchEnd?: boolean;
+    TouchCancel?: boolean;
+}
+
+export interface Router {
+    routes: Array<{ path: string; name?: string }>;
+    state: {
+        matches: Array<{
+            route: { path: string; name?: string };
+        }>;
+    };
+}
+
+export interface ReactRouteMonitorOptions {
+    router: Router;
+    eventSettings: EventsSetting;
+}
+
+export class ReactRouteMonitor {
+    private iframeClient: IframePostMessageClient;
+    private eventSettings: EventsSetting;
+    private router: Router;
+
+    private origPush: History["pushState"];
+    private origReplace: History["replaceState"];
+
+    private listeners: Array<() => void>;
+
+    private selectedNode: HTMLElement | null = null;
+
+    constructor({ router, eventSettings }: ReactRouteMonitorOptions) {
+        this.router = router;
+        this.iframeClient = iframePostMessageClient;
+
+        // store originals
+        this.origPush = history.pushState;
+        this.origReplace = history.replaceState;
+
+        this.listeners = [];
+
+        this.eventSettings = this._buildEventSettings(eventSettings);
+    }
+
+    _buildEventSettings(userSettings: EventsSetting) {
+        const settings: EventsSetting = {};
+
+        (Object.keys(eventMap) as EventName[]).forEach((key) => {
+            settings[key] =
+                typeof userSettings[key] === "boolean"
+                    ? userSettings[key]!
+                    : false;
+        });
+
+        return settings;
+    }
+
+    start() {
+        this.patchHistory();
+        this.attachGlobalListeners();
+        window.addEventListener("locationchange", this.onLocationChange);
+        window.addEventListener("popstate", this.triggerRouteChange);
+    }
+
+    stop() {
+        // Restore history
+        history.pushState = this.origPush;
+        history.replaceState = this.origReplace;
+
+        // Remove listeners
+        this.listeners.forEach((remove: () => void) => remove());
+        this.listeners = [];
+
+        window.removeEventListener("locationchange", this.onLocationChange);
+        window.removeEventListener("popstate", this.triggerRouteChange);
+    }
+
+    patchHistory() {
+        history.pushState = (...args) => {
+            this.origPush.apply(history, args);
+            this.triggerRouteChange();
+        };
+
+        history.replaceState = (...args) => {
+            this.origReplace.apply(history, args);
+            this.triggerRouteChange();
+        };
+    }
+
+    triggerRouteChange = () => {
+        window.dispatchEvent(
+            new CustomEvent("locationchange", {
+                detail: { node: this.selectedNode },
+            }),
+        );
+    };
+
+    onLocationChange = (_event: CustomEvent<{ node?: HTMLElement }>) => {
+        const url = new URL(window.location.href);
+        const toPathname = url.pathname;
+
+        const matches = this.router.routes.filter((r) => r.path === toPathname);
+        if (matches.length === 0) return;
+
+        const to = matches[0];
+
+        const state = this.router.state;
+        if (state.matches.length === 0) return;
+
+        const from = state.matches[0].route;
+        const fromPathname = this.router.state.location.pathname;
+
+        if (toPathname === fromPathname) {
+            this.iframeClient.sendRouteRefresh({
+                name: toPathname,
+                path: toPathname,
+                file: to.element.type().props["data-loc"],
+            });
+        } else {
+            this.iframeClient.sendRouteChange({
+                name: toPathname,
+                path: toPathname,
+                file: to.element.type().props["data-loc"],
+            });
+        }
+    };
+
+    attachGlobalListeners() {
+        (Object.keys(eventMap) as EventName[])
+            .filter((key) => this.eventSettings[key] !== false)
+            .forEach((key) => {
+                const handler = this._createInteractionHandler(key);
+                const remove = this._addEventListenerToDocument(
+                    key.toLowerCase(),
+                    handler,
+                );
+                this.listeners.push(remove);
+            });
+    }
+
+    _addEventListenerToDocument(eventName: string, handler: EventListener) {
+        document.addEventListener(eventName, handler, true);
+        return () => document.removeEventListener(eventName, handler, true);
+    }
+
+    _createInteractionHandler(eventType: EventName) {
+        return (event: Event) => {
+            if (eventMap[eventType] === eventMap.Click) {
+                const target = event.target as HTMLElement | null;
+
+                if (!target) return;
+
+                this.selectedNode = target;
+
+                const a = target.closest("a");
+
+                if (!a || a.target === "_blank" || a.href.startsWith("mailto:"))
+                    return;
+
+                this.triggerRouteChange();
+            }
+        };
+    }
+}
+
+const monitor = new ReactRouteMonitor({
+    router,
+    eventSettings: {
+        Click: true,
+    },
+});
+
+monitor.start();