@shaper.org/vite-react-plugin 1.0.16 → 1.0.18

package/dist/index.d.mts

@@ -2,26 +2,10 @@ import * as vite0 from "vite";
 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[];
-} | {
+type ReactPluginConfig = UserConfig & {
+  useGenerouted?: boolean;
+};
+declare const reactPlugin: (config: ReactPluginConfig) => ({
   name: string;
   enforce: string;
   transform(code: any, id: any): Promise<{
@@ -34,6 +18,9 @@ declare const reactPlugin: (config: UserConfig) => ({
   apply: string;
   configResolved(resolvedConfig: vite0.ResolvedConfig): void;
   transform(code: string, id: string, options: Record<string, any>): Promise<string | undefined>;
+} | {
+  name: string;
+  configureServer(server: any): void;
 })[];
 //#endregion
 export { reactPlugin };

package/dist/index.mjs

@@ -15,9 +15,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function() {
-	return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
+var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __copyProps = (to, from, except, desc) => {
 	if (from && typeof from === "object" || typeof from === "function") {
 		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
@@ -39,9 +37,35 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 
 //#endregion
 //#region src/react-route-plugin.ts
-const mainContentPath = join(dirname(fileURLToPath(import.meta.url)), "../templates/main.ts");
-const appendTo = "src/routes.tsx";
+const mainContentPath$1 = join(dirname(fileURLToPath(import.meta.url)), "../templates/main.ts");
+const appendTo$1 = "src/main.tsx";
 const reactRoutesPlugin = () => {
+	return {
+		name: "react-routes-plugin",
+		enforce: "post",
+		apply: "serve",
+		configResolved(resolvedConfig) {},
+		async transform(code, id, options) {
+			if (options?.ssr) return;
+			const [filename] = id.split("?", 2);
+			if (typeof appendTo$1 === "string" && filename.endsWith(appendTo$1)) {
+				const transformed = await transform(await readFile(mainContentPath$1, { encoding: "utf-8" }), {
+					loader: "ts",
+					format: "esm",
+					target: "es2022"
+				});
+				code = `${code}\n${transformed.code}`;
+			}
+			return code;
+		}
+	};
+};
+
+//#endregion
+//#region src/react-route-generouted.ts
+const mainContentPath = join(dirname(fileURLToPath(import.meta.url)), "../templates/main-generouted.ts");
+const appendTo = "src/router.ts";
+const reactRoutesGeneroutedPlugin = () => {
 	return {
 		name: "react-routes-plugin",
 		enforce: "post",
@@ -65,7 +89,7 @@ const reactRoutesPlugin = () => {
 
 //#endregion
 //#region ../../node_modules/.pnpm/picomatch@4.0.3/node_modules/picomatch/lib/constants.js
-var require_constants = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/picomatch@4.0.3/node_modules/picomatch/lib/constants.js": ((exports, module) => {
+var require_constants = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	const WIN_SLASH = "\\\\/";
 	const WIN_NO_SLASH = `[^${WIN_SLASH}]`;
 	/**
@@ -226,11 +250,11 @@ var require_constants = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/p
 			return win32$1 === true ? WINDOWS_CHARS : POSIX_CHARS;
 		}
 	};
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/picomatch@4.0.3/node_modules/picomatch/lib/utils.js
-var require_utils = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/picomatch@4.0.3/node_modules/picomatch/lib/utils.js": ((exports) => {
+var require_utils = /* @__PURE__ */ __commonJSMin(((exports) => {
 	const { REGEX_BACKSLASH, REGEX_REMOVE_BACKSLASH, REGEX_SPECIAL_CHARS, REGEX_SPECIAL_CHARS_GLOBAL } = require_constants();
 	exports.isObject = (val) => val !== null && typeof val === "object" && !Array.isArray(val);
 	exports.hasRegexChars = (str) => REGEX_SPECIAL_CHARS.test(str);
@@ -275,11 +299,11 @@ var require_utils = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/picom
 		if (last === "") return segs[segs.length - 2];
 		return last;
 	};
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/picomatch@4.0.3/node_modules/picomatch/lib/scan.js
-var require_scan = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/picomatch@4.0.3/node_modules/picomatch/lib/scan.js": ((exports, module) => {
+var require_scan = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	const utils$3 = require_utils();
 	const { CHAR_ASTERISK, CHAR_AT, CHAR_BACKWARD_SLASH, CHAR_COMMA, CHAR_DOT, CHAR_EXCLAMATION_MARK, CHAR_FORWARD_SLASH, CHAR_LEFT_CURLY_BRACE, CHAR_LEFT_PARENTHESES, CHAR_LEFT_SQUARE_BRACKET, CHAR_PLUS, CHAR_QUESTION_MARK, CHAR_RIGHT_CURLY_BRACE, CHAR_RIGHT_PARENTHESES, CHAR_RIGHT_SQUARE_BRACKET } = require_constants();
 	const isPathSeparator = (code) => {
@@ -563,11 +587,11 @@ var require_scan = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/picoma
 		return state;
 	};
 	module.exports = scan$1;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/picomatch@4.0.3/node_modules/picomatch/lib/parse.js
-var require_parse = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/picomatch@4.0.3/node_modules/picomatch/lib/parse.js": ((exports, module) => {
+var require_parse = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	const constants$1 = require_constants();
 	const utils$2 = require_utils();
 	/**
@@ -1422,11 +1446,11 @@ var require_parse = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/picom
 		return source;
 	};
 	module.exports = parse$1;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/picomatch@4.0.3/node_modules/picomatch/lib/picomatch.js
-var require_picomatch$1 = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/picomatch@4.0.3/node_modules/picomatch/lib/picomatch.js": ((exports, module) => {
+var require_picomatch$1 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	const scan = require_scan();
 	const parse = require_parse();
 	const utils$1 = require_utils();
@@ -1715,11 +1739,11 @@ var require_picomatch$1 = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm
 	* Expose "picomatch"
 	*/
 	module.exports = picomatch$1;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/picomatch@4.0.3/node_modules/picomatch/index.js
-var require_picomatch = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/picomatch@4.0.3/node_modules/picomatch/index.js": ((exports, module) => {
+var require_picomatch = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	const pico = require_picomatch$1();
 	const utils = require_utils();
 	function picomatch(glob, options, returnState = false) {
@@ -1731,10 +1755,10 @@ var require_picomatch = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/p
 	}
 	Object.assign(picomatch, pico);
 	module.exports = picomatch;
-}) });
+}));
 
 //#endregion
-//#region ../../node_modules/.pnpm/@rollup+pluginutils@5.3.0_rollup@4.53.3/node_modules/@rollup/pluginutils/dist/es/index.js
+//#region ../../node_modules/.pnpm/@rollup+pluginutils@5.3.0_rollup@4.59.0/node_modules/@rollup/pluginutils/dist/es/index.js
 var import_picomatch = /* @__PURE__ */ __toESM(require_picomatch(), 1);
 function isArray(arg) {
 	return Array.isArray(arg);
@@ -1861,13 +1885,47 @@ function jsxSourcePlugin(options = {}) {
 	};
 }
 
+//#endregion
+//#region src/analyze-deps-plugin.ts
+function analyzeDepsPlugin() {
+	return {
+		name: "analyze-deps",
+		configureServer(server) {
+			server.middlewares.use("/__analyze", async (req, res) => {
+				console.log(req.url);
+				try {
+					const entry = new URL(req.url, "http://localhost").searchParams.get("entry");
+					await server.transformRequest(entry);
+					const mod = await server.moduleGraph.getModuleByUrl(entry);
+					const result = [];
+					for (const nodeModule of mod._clientModule.importedModules) result.push({
+						id: nodeModule.id,
+						file: nodeModule.file
+					});
+					res.setHeader("Content-Type", "application/json");
+					res.statusCode = 200;
+					res.end(JSON.stringify({
+						modules: result,
+						file: mod._clientModule.file
+					}));
+				} catch (err) {
+					res.setHeader("Content-Type", "application/json");
+					res.statusCode = 500;
+					res.end(JSON.stringify({ msg: err.message ?? "Unexpected error." }));
+				}
+			});
+		}
+	};
+}
+
 //#endregion
 //#region src/index.ts
 const reactPlugin = (config) => {
 	return [
 		HMREventsPlugin(),
 		jsxSourcePlugin(config),
-		reactRoutesPlugin()
+		config?.useGenerouted ? reactRoutesGeneroutedPlugin() : reactRoutesPlugin(),
+		analyzeDepsPlugin()
 	];
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shaper.org/vite-react-plugin",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "",
   "type": "module",
   "private": false,

package/templates/main-generouted.ts

@@ -0,0 +1,243 @@
+/// <reference lib="dom" />
+import { IframePostMessageClient } from "@shaper.org/core/client";
+import { routes } from "@generouted/react-router/lazy";
+
+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 GeneroutedRoute {
+    id: string;
+    path: string;
+}
+
+export interface GeneroutedRoutes {
+    children: GeneroutedRoute[];
+}
+
+export interface ReactRouteMonitorOptions {
+    routes: GeneroutedRoutes[];
+    eventSettings: EventsSetting;
+}
+
+export class ReactRouteMonitor {
+    private iframeClient: IframePostMessageClient;
+    private eventSettings: EventsSetting;
+
+    private origPush: History["pushState"];
+    private origReplace: History["replaceState"];
+
+    private listeners: Array<() => void>;
+
+    private selectedNode: HTMLElement | null = null;
+
+    private routes: GeneroutedRoutes[];
+
+    constructor({ routes, eventSettings }: ReactRouteMonitorOptions) {
+        this.routes = routes;
+        this.iframeClient = new 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);
+
+        this.sendAllRoutes = this.sendAllRoutes.bind(this);
+        window.addEventListener("getroutes", this.sendAllRoutes);
+    }
+
+    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);
+        window.removeEventListener("getroutes", this.triggerRoutes);
+    }
+
+    patchHistory() {
+        history.pushState = (...args) => {
+            this.origPush.apply(history, args);
+            this.triggerRouteChange();
+        };
+
+        history.replaceState = (...args) => {
+            this.origReplace.apply(history, args);
+            this.triggerRouteChange();
+        };
+    }
+
+    sendAllRoutes(event: CustomEvent<{ routes: GeneroutedRoute[] }>) {
+        if (!event) return;
+
+        const validRoutes = event.detail.routes.filter(
+            (route) => route.path !== "*",
+        );
+
+        const routes = validRoutes.map((route) => ({
+            name: route.id,
+            path: route.id === "index" ? route.path : `/${route.path}`,
+            file: `src/${route.id}.tsx`,
+        }));
+
+        this.iframeClient.sendAllRoutes(routes);
+    }
+
+    triggerRoutes = () => {
+        window.dispatchEvent(
+            new CustomEvent("getroutes", {
+                detail: { routes: this.routes[0].children },
+            }),
+        );
+    };
+
+    triggerRouteChange = () => {
+        window.dispatchEvent(
+            new CustomEvent("locationchange", {
+                detail: { node: this.selectedNode },
+            }),
+        );
+    };
+
+    onLocationChange = (_event: CustomEvent<{ node?: HTMLElement }>) => {
+        const toPathname = window.location.pathname;
+
+        const matches = this.routes[0].children.filter((r) =>
+            toPathname === "/"
+                ? r.path === toPathname
+                : `/${r.path}` === toPathname,
+        );
+
+        if (matches.length === 0) return;
+
+        const to = matches[0];
+
+        const routeInfo = {
+            name: to.id,
+            path: to.id === "index" ? to.path : `/${to.path}`,
+            file: `src/${to.id}.tsx`,
+        };
+        this.iframeClient.sendRouteChange(routeInfo);
+    };
+
+    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;
+            }
+        };
+    }
+}
+
+const monitor = new ReactRouteMonitor({
+    routes,
+    eventSettings: {
+        Click: true,
+    },
+});
+
+monitor.start();
+monitor.triggerRoutes();

package/templates/main.ts

@@ -139,6 +139,8 @@ export class ReactRouteMonitor {
             (route) => route.element !== undefined && route.path !== "*",
         );
 
+        console.log(validRoutes);
+
         const routes = validRoutes.map((route) => ({
             name: route.path,
             path: route.path,
@@ -231,7 +233,7 @@ export class ReactRouteMonitor {
         };
     }
 }
-
+console.log(router);
 const monitor = new ReactRouteMonitor({
     router,
     eventSettings: {
@@ -239,7 +241,5 @@ const monitor = new ReactRouteMonitor({
     },
 });
 
-
-
 monitor.start();
 monitor.triggerRoutes();