@peachy/plugin-react 0.0.1

package/README.md

@@ -0,0 +1,3 @@
+# @peachy/plugin-react
+
+A set of Rolldown plugins that enable React Fast Refresh to work with GTK+React.

package/dist/index.d.mts

@@ -0,0 +1,6 @@
+import { Plugin } from "rolldown";
+
+//#region src/index.d.ts
+declare function react(port: number): Plugin[];
+//#endregion
+export { react };

package/dist/index.mjs

@@ -0,0 +1,105 @@
+import { babel } from "@rollup/plugin-babel";
+import ReactFreshBabelPlugin from "react-refresh/babel";
+import BabelJSX from "@babel/plugin-syntax-jsx";
+import BabelTS from "@babel/plugin-syntax-typescript";
+import { resolve } from "path";
+import { readFileSync } from "fs";
+
+//#region src/entrypoint.ts
+function addHmrEntrypoint(input) {
+	const PREFIX = "\0virtual:hmr-wrapper:";
+	if (typeof input === "string") return PREFIX + input;
+	else if (Array.isArray(input)) return input.map((entry) => PREFIX + entry);
+	else if (typeof input === "object") {
+		const wrapped = {};
+		for (const [key, value] of Object.entries(input)) wrapped[key] = PREFIX + value;
+		return wrapped;
+	}
+	return input;
+}
+function createHmrEntrypointPlugin() {
+	const PREFIX = "\0virtual:hmr-wrapper:";
+	const resolvedPath = resolve(import.meta.dirname, "./templates/hmr-entrypoint.ts");
+	return {
+		name: "hmr2-entrypoint",
+		options(opts) {
+			return {
+				...opts,
+				input: addHmrEntrypoint(opts.input)
+			};
+		},
+		resolveId(id) {
+			if (id.startsWith(PREFIX)) return id;
+			return null;
+		},
+		load(id) {
+			if (id.startsWith(PREFIX)) {
+				const actualEntry = id.slice(21);
+				return `import '${resolvedPath}';\nimport '${resolve(process.cwd(), actualEntry)}';`;
+			}
+			return null;
+		}
+	};
+}
+
+//#endregion
+//#region src/runtime.ts
+function hmrRuntimePlugin(port) {
+	const runtime = resolve(import.meta.dirname, "./templates/hmr-runtime.ts");
+	return {
+		name: "hmr-runtime-plugin",
+		resolveId(id) {
+			if (id === "\0virtual:hmr-runtime") return runtime;
+		},
+		async transform(code, id) {
+			if (id === runtime) return { code: code.replace("$port$", port.toString()) };
+		}
+	};
+}
+
+//#endregion
+//#region src/wrapper.ts
+function reactRefreshWrapperPlugin() {
+	const template = readFileSync(resolve(import.meta.dirname, "./templates/hmr-wrapper.ts"), "utf-8");
+	return {
+		name: "react-refresh-wrapper",
+		transform(code, id) {
+			if (!id.startsWith(process.cwd()) || !id.match(/\.[tj]sx?$/) || id.includes("node_modules") || id.startsWith("gi://*")) return null;
+			return {
+				code: template.replace("$sourceCode$", code).replaceAll("$hmrId$", JSON.stringify(id)),
+				map: null
+			};
+		}
+	};
+}
+
+//#endregion
+//#region src/index.ts
+function react(port) {
+	return [
+		babel({
+			plugins: [
+				BabelJSX,
+				[BabelTS, { isTSX: true }],
+				ReactFreshBabelPlugin
+			],
+			babelHelpers: "bundled",
+			ignore: [/node_modules/],
+			extensions: [
+				".js",
+				".jsx",
+				".es6",
+				".es",
+				".mjs",
+				".ts",
+				".tsx"
+			]
+		}),
+		createHmrEntrypointPlugin(),
+		reactRefreshWrapperPlugin(),
+		hmrRuntimePlugin(port)
+	];
+}
+
+//#endregion
+export { react };

package/dist/templates/hmr-entrypoint.ts

@@ -0,0 +1,9 @@
+/// @ts-nocheck
+
+import * as RefreshRuntime from "react-refresh";
+
+globalThis.$RefreshRuntime$ = RefreshRuntime;
+
+globalThis.$RefreshRuntime$.injectIntoGlobalHook(globalThis);
+globalThis.$RefreshReg$ = () => {};
+globalThis.$RefreshSig$ = () => (type) => type;

package/dist/templates/hmr-runtime.ts

@@ -0,0 +1,164 @@
+/// @ts-nocheck
+
+import Gio from "gi://Gio?version=2.0";
+import GLib from "gi://GLib?version=2.0";
+import Soup from "gi://Soup?version=3.0";
+
+Gio._promisify(Soup.Session.prototype, "websocket_connect_async");
+
+declare global {
+  var __hmr__: {
+    contexts: Record<string, ImportMetaHot>;
+  };
+}
+
+// To prevent the connection being garbage collected
+let connection;
+
+if (!globalThis.__hmr__) {
+  globalThis.__hmr__ = {
+    contexts: {},
+  };
+
+  const socketURL = "ws://localhost:$port$/";
+  const session = new Soup.Session({
+    idleTimeout: GLib.MAXINT32,
+    maxConns: 1,
+    timeout: GLib.MAXINT32,
+  });
+
+  session
+    .websocket_connect_async(
+      Soup.Message.new("GET", socketURL.toString()),
+      null,
+      null,
+      GLib.PRIORITY_DEFAULT,
+      null,
+    )
+    .then((conn) => {
+      connection = conn;
+      console.log("[HMR] Connected to HMR server at", socketURL);
+
+      connection.set_keepalive_interval(1);
+
+      connection.connect("message", async (_, _type, event) => {
+        const decoder = new TextDecoder();
+        const payload = JSON.parse(
+          decoder.decode(event.toArray()),
+        ) as HMRMessage;
+
+        switch (payload?.type) {
+          case "reload":
+            console.info("[HMR] Reloading...");
+            // TODO: handle this
+            break;
+          case "hmr":
+            {
+              if (!payload.updates?.length) return;
+
+              let anyAccepted = false;
+              for (const update of payload.updates) {
+                if (globalThis.__hmr__.contexts[update.id]) {
+                  try {
+                    const module = await import(
+                      "file://" + update.url + "?t=" + Date.now()
+                    );
+
+                    const accepted =
+                      globalThis.__hmr__.contexts[update.id].emit(module);
+
+                    if (accepted) {
+                      console.info("[HMR] Update accepted by", update.id);
+                      anyAccepted = true;
+                    }
+                  } catch (err) {
+                    console.debug("[HMR] Error when hot-refreshing", err);
+                  }
+                }
+              }
+
+              if (!anyAccepted) {
+                console.info("[HMR] Update rejected, reloading...");
+                connection.send_text(JSON.stringify({ type: "reload" }));
+              }
+            }
+            break;
+        }
+      });
+
+      connection.connect("closed", () => {
+        console.log("[HMR] Connection closed");
+      });
+    })
+    .catch(console.error);
+}
+
+export function createHotContext(id: string): ImportMetaHot {
+  let callback: undefined | ((mod: ModuleNamespace) => boolean);
+  let disposed = false;
+
+  const hot = {
+    accept: (cb) => {
+      if (disposed) {
+        throw new Error("import.meta.hot.accept() called after dispose()");
+      }
+      if (callback) {
+        throw new Error("import.meta.hot.accept() called multiple times");
+      }
+      callback = cb;
+    },
+    dispose: () => {
+      disposed = true;
+      callback = undefined;
+    },
+    emit(self: ModuleNamespace) {
+      if (disposed) {
+        throw new Error("import.meta.hot.emit() called after dispose()");
+      }
+
+      if (callback) {
+        return !!callback(self);
+      }
+
+      return false;
+    },
+  };
+
+  if (globalThis.__hmr__.contexts[id]) {
+    globalThis.__hmr__.contexts[id].dispose();
+    globalThis.__hmr__.contexts[id] = undefined;
+  }
+  globalThis.__hmr__.contexts[id] = hot;
+
+  return hot;
+}
+
+// From: https://github.com/facebook/metro/blob/e232f39fcd82defb421899a8c9b2b3accee90e86/packages/metro-runtime/src/polyfills/require.js#L948
+export function isReactRefreshBoundary(moduleExports) {
+  if (globalThis.$RefreshRuntime$.isLikelyComponentType(moduleExports)) {
+    return true;
+  }
+
+  if (moduleExports == null || typeof moduleExports !== "object") {
+    // Exit if we can't iterate over exports.
+    return false;
+  }
+  let hasExports = false;
+  let areAllExportsComponents = true;
+  for (const key in moduleExports) {
+    hasExports = true;
+    if (key === "__esModule") {
+      continue;
+    }
+    const desc = Object.getOwnPropertyDescriptor(moduleExports, key);
+    if (desc && desc.get) {
+      // Don't invoke getters as they may have side effects.
+      return false;
+    }
+    const exportValue = moduleExports[key];
+    if (!globalThis.$RefreshRuntime$.isLikelyComponentType(exportValue)) {
+      areAllExportsComponents = false;
+    }
+  }
+  return hasExports && areAllExportsComponents;
+}

package/dist/templates/hmr-wrapper.ts

@@ -0,0 +1,40 @@
+/// @ts-nocheck
+
+import * as __hmr__ from "\0virtual:hmr-runtime";
+
+if (import.meta) {
+  import.meta.hot = __hmr__.createHotContext($hmrId$);
+}
+
+var NO_FAST_REFRESH =
+  !globalThis.$RefreshReg$ ||
+  !globalThis.$RefreshSig$ ||
+  !globalThis.$RefreshRuntime$;
+if (NO_FAST_REFRESH) {
+  console.warn(
+    "[HMR]: React Refresh is not enabled. Please ensure that you have installed the necessary dependencies and enabled the plugin in your webpack configuration.",
+  );
+} else {
+  var prevRefreshReg = globalThis.$RefreshReg$;
+  var prevRefreshSig = globalThis.$RefreshSig$;
+  globalThis.$RefreshReg$ = (type, id) => {
+    const fullId = $hmrId$ + "#" + id;
+    globalThis.$RefreshRuntime$.register(type, fullId);
+  };
+  globalThis.$RefreshSig$ =
+    globalThis.$RefreshRuntime$.createSignatureFunctionForTransform;
+}
+
+$sourceCode$;
+
+if (!NO_FAST_REFRESH) {
+  globalThis.$RefreshReg$ = prevRefreshReg;
+  globalThis.$RefreshSig$ = prevRefreshSig;
+  import.meta.hot.accept((moduleExports) => {
+    if (__hmr__.isReactRefreshBoundary(moduleExports)) {
+      // TODO: debounce this
+      globalThis.$RefreshRuntime$.performReactRefresh();
+      return true;
+    }
+  });
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@peachy/plugin-react",
+  "version": "0.0.1",
+  "description": "HMR for react",
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "keywords": [],
+  "author": "Angelo Verlain <hey@vixalien.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "rolldown": "1.0.0-beta.58",
+    "tsdown": "0.20.0-beta.3",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "@babel/plugin-syntax-jsx": "^7.28.6",
+    "@babel/plugin-syntax-typescript": "^7.28.6",
+    "@rollup/plugin-babel": "^6.1.0",
+    "react-refresh": "^0.18.0"
+  },
+  "peerDependencies": {
+    "rolldown": "1.0.0-beta.58"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown src/index.ts --dts && mkdir -p dist/templates && cp src/templates/* dist/templates"
+  },
+  "types": "./dist/index.d.mts"
+}