vite-plugin-garfish-mf 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 mokeykingblack
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,56 @@
+## vite-plugin-garfish-mf
+
+A Vite plugin that helps you run a Vite sub-application inside a micro-frontend architecture powered by [Garfish](https://www.garfishjs.org).
+
+This plugin adapts Vite-based apps to work smoothly as sub-applications, handling base URL configuration and sandbox compatibility.
+
+### Installation
+
+```
+npm install --save-dev vite-plugin-garfish-mf
+```
+
+### Getting Started
+
+Add the plugin to sub-application's Vite configuration shown below (make sure the plugin is placed after the **react**/**vue** plugin, if present):
+
+```js
+// vite.config.js
+
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import garfish from "vite-plugin-garfish-mf";
+
+export default defineConfig({
+  plugins: [react(), garfish({
+      base: "http://localhost:3000",
+      sandbox: true
+    })
+  ],
+});
+```
+
+|  Property   | Prequire |  Type   |          Default          | Description                                                                                                                  |
+| :---------: | :------: | :-----: | :-----------------------: | :--------------------------------------------------------------------------------------------------------------------------- |
+|  **base**   |   [x]    | string  | **http://localhost:5173** | Base origin where the sub-application is served. Overrides server.port and server.origin                                     |
+| **sandbox** |   [ ]    | boolean |         **true**          | Enable this when running the sub-application inside a  [Sandbox](https://www.garfishjs.org/api/run.html#sandbox) environment |
+
+
+### How It Works
+
+- Overrides Vite’s dev server origin so the sub-app can be correctly loaded by Garfish
+- Ensures assets and HMR work as expected in a micro-frontend context
+- Supports sandboxed execution to avoid global scope conflicts
+
+### Inspiration
+
+This plugin is inspired by the following projects and communities:
+
+- [vite-plugin-qiankun](https://github.com/tengmaoqing/vite-plugin-qiankun)
+- [vite-plugin-qiankun-lite](https://github.com/kotarella1110/vite-plugin-qiankun-lite)
+
+Their ideas and implementations were invaluable references when building this plugin.
+
+### License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,89 @@
+let cheerio = require("cheerio");
+
+//#region src/utils.ts
+function scriptTransform(script$, publicPath) {
+	let src = script$.attr("src");
+	if (!src) return;
+	script$.removeAttr("src").removeAttr("type").html(`import("${publicPath + src}")`);
+	return script$;
+}
+function reactHRMScriptTransfrom(script$, publicPath) {
+	script$.removeAttr("type").html(`
+      ((window) => {
+        import("${publicPath}/@react-refresh").then(({default: RefreshRuntime}) => {
+          RefreshRuntime.injectIntoGlobalHook(window);
+          window.$RefreshReg$ = () => {};
+          window.$RefreshSig$ = () => (type) => type;
+          window.__vite_plugin_react_preamble_installed__ = true;
+        })
+      })(new Function("return this")());
+  `);
+}
+function injectGarfishProvider(script$, publicPath) {
+	let src = script$.attr("src");
+	if (!src) return;
+	script$.removeAttr("src").removeAttr("type").html(`
+    if (window.__GARFISH__ && typeof __GARFISH_EXPORTS__ === "object") {
+      let provider = new Promise((resolve) => {
+        import("${publicPath + src}").then(({provider}) => resolve(provider))
+      })
+      if (__GARFISH_EXPORTS__.registerProvider) {
+        __GARFISH_EXPORTS__.registerProvider(provider);
+      } else {
+        __GARFISH_EXPORTS__.provider = provider;
+      }
+    } else {
+      import("${publicPath + src}")
+    }
+  `);
+}
+
+//#endregion
+//#region src/plugin.ts
+const vitePluginGarfish = ({ base = "http://localhost:5173", sandbox = true }) => {
+	let config;
+	let isUseWithReact;
+	return [{
+		name: "vite-plugin-garfish-fm:resolve-config",
+		enforce: "post",
+		config() {
+			let url = new URL(base);
+			return {
+				base,
+				server: {
+					port: Number(url.port),
+					origin: url.origin
+				},
+				preview: { port: Number(url.port) }
+			};
+		},
+		configResolved(resolvedConfig) {
+			config = resolvedConfig;
+			isUseWithReact = config.plugins.findIndex((plugin) => plugin.name === "vite:react-swc" || plugin.name === "vite:react-babel") !== -1;
+		}
+	}, {
+		name: "vite-plugin-garfish-fm:html-transfrom",
+		enforce: "post",
+		apply: "serve",
+		transformIndexHtml(html) {
+			const $ = (0, cheerio.load)(html);
+			const moduleScripts$ = $("body script[src][type], head script[src]");
+			if (sandbox) injectGarfishProvider(moduleScripts$.last(), base);
+			moduleScripts$.each((_, script$) => void scriptTransform($(script$), base));
+			if (isUseWithReact) {
+				const reactHMRScript = $("script:not([src])[type=module]").filter((_, el) => {
+					return ($(el).html() || "").includes("/@react-refresh");
+				});
+				if (reactHMRScript.length > 0) reactHRMScriptTransfrom($(reactHMRScript[0]), base);
+			}
+			return $.html();
+		}
+	}];
+};
+
+//#endregion
+//#region src/index.ts
+var src_default = vitePluginGarfish;
+
+//#endregion
+module.exports = src_default;

package/dist/index.d.cts

@@ -0,0 +1,13 @@
+import { PluginOption } from "vite";
+
+//#region src/plugin.d.ts
+type Options = {
+  base: string;
+  sandbox?: boolean;
+};
+declare const vitePluginGarfish: ({
+  base,
+  sandbox
+}: Options) => PluginOption;
+//#endregion
+export { type Options, vitePluginGarfish as default };

package/dist/index.d.mts

@@ -0,0 +1,13 @@
+import { PluginOption } from "vite";
+
+//#region src/plugin.d.ts
+type Options = {
+  base: string;
+  sandbox?: boolean;
+};
+declare const vitePluginGarfish: ({
+  base,
+  sandbox
+}: Options) => PluginOption;
+//#endregion
+export { type Options, vitePluginGarfish as default };

package/dist/index.mjs

@@ -0,0 +1,89 @@
+import { load } from "cheerio";
+
+//#region src/utils.ts
+function scriptTransform(script$, publicPath) {
+	let src = script$.attr("src");
+	if (!src) return;
+	script$.removeAttr("src").removeAttr("type").html(`import("${publicPath + src}")`);
+	return script$;
+}
+function reactHRMScriptTransfrom(script$, publicPath) {
+	script$.removeAttr("type").html(`
+      ((window) => {
+        import("${publicPath}/@react-refresh").then(({default: RefreshRuntime}) => {
+          RefreshRuntime.injectIntoGlobalHook(window);
+          window.$RefreshReg$ = () => {};
+          window.$RefreshSig$ = () => (type) => type;
+          window.__vite_plugin_react_preamble_installed__ = true;
+        })
+      })(new Function("return this")());
+  `);
+}
+function injectGarfishProvider(script$, publicPath) {
+	let src = script$.attr("src");
+	if (!src) return;
+	script$.removeAttr("src").removeAttr("type").html(`
+    if (window.__GARFISH__ && typeof __GARFISH_EXPORTS__ === "object") {
+      let provider = new Promise((resolve) => {
+        import("${publicPath + src}").then(({provider}) => resolve(provider))
+      })
+      if (__GARFISH_EXPORTS__.registerProvider) {
+        __GARFISH_EXPORTS__.registerProvider(provider);
+      } else {
+        __GARFISH_EXPORTS__.provider = provider;
+      }
+    } else {
+      import("${publicPath + src}")
+    }
+  `);
+}
+
+//#endregion
+//#region src/plugin.ts
+const vitePluginGarfish = ({ base = "http://localhost:5173", sandbox = true }) => {
+	let config;
+	let isUseWithReact;
+	return [{
+		name: "vite-plugin-garfish-fm:resolve-config",
+		enforce: "post",
+		config() {
+			let url = new URL(base);
+			return {
+				base,
+				server: {
+					port: Number(url.port),
+					origin: url.origin
+				},
+				preview: { port: Number(url.port) }
+			};
+		},
+		configResolved(resolvedConfig) {
+			config = resolvedConfig;
+			isUseWithReact = config.plugins.findIndex((plugin) => plugin.name === "vite:react-swc" || plugin.name === "vite:react-babel") !== -1;
+		}
+	}, {
+		name: "vite-plugin-garfish-fm:html-transfrom",
+		enforce: "post",
+		apply: "serve",
+		transformIndexHtml(html) {
+			const $ = load(html);
+			const moduleScripts$ = $("body script[src][type], head script[src]");
+			if (sandbox) injectGarfishProvider(moduleScripts$.last(), base);
+			moduleScripts$.each((_, script$) => void scriptTransform($(script$), base));
+			if (isUseWithReact) {
+				const reactHMRScript = $("script:not([src])[type=module]").filter((_, el) => {
+					return ($(el).html() || "").includes("/@react-refresh");
+				});
+				if (reactHMRScript.length > 0) reactHRMScriptTransfrom($(reactHMRScript[0]), base);
+			}
+			return $.html();
+		}
+	}];
+};
+
+//#endregion
+//#region src/index.ts
+var src_default = vitePluginGarfish;
+
+//#endregion
+export { src_default as default };

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "vite-plugin-garfish-mf",
+  "version": "1.0.1",
+  "description": "A vite plugin for running Micro frontend applications using garfish",
+  "keywords": [
+    "@garfish/react-bridge",
+    "garfish",
+    "micro frontend",
+    "micro frontends",
+    "micro-frontend",
+    "micro-frontends",
+    "microfrontend",
+    "microfrontends",
+    "react",
+    "vite",
+    "vite-plugin",
+    "vite-plugin-garfish"
+  ],
+  "homepage": "https://github.com/monkeykingblack/vite-plugin-garfish.git#readme",
+  "bugs": {
+    "url": "https://github.com/monkeykingblack/vite-plugin-garfish/issues"
+  },
+  "license": "MIT",
+  "author": "monkeykingblack",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/monkeykingblack/vite-plugin-garfish.git"
+  },
+  "files": [
+    "./dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "dependencies": {
+    "cheerio": "^1.2.0"
+  },
+  "devDependencies": {
+    "domhandler": "^5.0.3",
+    "tsdown": "^0.20.3"
+  },
+  "peerDependencies": {
+    "vite": ">= 4 < 8"
+  },
+  "scripts": {
+    "build": "tsdown"
+  }
+}