+
+ ${Footer()}
+
+
+
+
+
+ `;
+};
diff --git a/examples/hono-tractor-store-2.0/src/explore/pages/StoresPage.css b/examples/hono-tractor-store-2.0/src/explore/pages/StoresPage.css
new file mode 100644
index 0000000..5b747ea
--- /dev/null
+++ b/examples/hono-tractor-store-2.0/src/explore/pages/StoresPage.css
@@ -0,0 +1,19 @@
+.e_StoresPage {
+ max-width: calc(1000px + var(--outer-space) * 2);
+ padding: 0 var(--outer-space);
+ margin: 0 auto;
+}
+
+.e_StoresPage_list {
+ list-style: none;
+ padding: 0;
+ margin: 5em 0 4em;
+ display: flex;
+ justify-content: space-between;
+ gap: 2em;
+ flex-wrap: wrap;
+}
+
+.e_StoresPage p {
+ max-width: 80ch;
+}
diff --git a/examples/hono-tractor-store-2.0/src/explore/pages/StoresPage.js b/examples/hono-tractor-store-2.0/src/explore/pages/StoresPage.js
new file mode 100644
index 0000000..12344c5
--- /dev/null
+++ b/examples/hono-tractor-store-2.0/src/explore/pages/StoresPage.js
@@ -0,0 +1,45 @@
+import data from "../database/index.js";
+import Header from "../components/Header.js";
+import Footer from "../components/Footer.js";
+import Store from "../components/Store.js";
+import { html } from "../utils.js";
+import Meta from "../components/Meta.js";
+
+/**
+ * StoresPage component.
+ * @param {object} props - The properties of the StoresPage component.
+ * @param {string} props.category - The category key.
+ * @param {HonoContext} props.c - The hone context.
+ * @returns {string} The StoresPage component markup.
+ */
+export default ({ c }) => {
+ return html`
+
+
+ Tractor Store
+
+
+
+ ${Meta()}
+
+
+ ${Header({ c })}
+
+
Our Stores
+
+ Want to see our products in person? Visit one of our stores to see
+ our products up close and talk to our experts. We have stores in the
+ following locations:
+
+
+ ${data.stores.map(Store).join("")}
+
+
+ ${Footer()}
+
+
+
+
+
+ `;
+};
diff --git a/examples/hono-tractor-store-2.0/src/explore/scripts.js b/examples/hono-tractor-store-2.0/src/explore/scripts.js
new file mode 100644
index 0000000..5442265
--- /dev/null
+++ b/examples/hono-tractor-store-2.0/src/explore/scripts.js
@@ -0,0 +1,28 @@
+/* client side javascript */
+
+/**
+ * Store picker fragment
+ * - open dialog on button click
+ * - select store on button click
+ * - publish event on store selected
+ */
+const $picker = document.querySelector(".e_StorePicker");
+if ($picker) {
+ const dialog = $picker.querySelector(".e_StorePicker dialog");
+ const chooseButton = $picker.querySelector(".e_StorePicker_choose");
+ const selectButtons = $picker.querySelectorAll(".e_StorePicker_select");
+ const selected = $picker.querySelector(".e_StorePicker_selected");
+
+ chooseButton.addEventListener("click", () => dialog.showModal());
+ [...selectButtons].forEach((button) => {
+ button.addEventListener("click", (e) => {
+ const detail = e.currentTarget.getAttribute("data-id");
+ $picker.dispatchEvent(
+ new CustomEvent("explore:store-selected", { bubbles: true, detail }),
+ );
+ dialog.close();
+ // copy selected store content to top level
+ selected.innerHTML = e.currentTarget.previousElementSibling.innerHTML;
+ });
+ });
+}
diff --git a/examples/hono-tractor-store-2.0/src/explore/styles.css b/examples/hono-tractor-store-2.0/src/explore/styles.css
new file mode 100644
index 0000000..b1a6c06
--- /dev/null
+++ b/examples/hono-tractor-store-2.0/src/explore/styles.css
@@ -0,0 +1,43 @@
+@import url("./components/Header.css");
+@import url("./components/Navigation.css");
+@import url("./components/Footer.css");
+@import url("./components/StorePicker.css");
+@import url("./components/Product.css");
+@import url("./components/Recommendations.css");
+@import url("./components/Recommendation.css");
+@import url("./components/Button.css");
+@import url("./components/Filter.css");
+@import url("./pages/CategoryPage.css");
+@import url("./pages/StoresPage.css");
+@import url("./pages/HomePage.css");
+
+@font-face {
+ font-family: "Raleway";
+ src: url("https://cdn.the-tractor.store/cdn/font/raleway-regular.woff2")
+ format("woff2");
+ font-weight: normal;
+ font-style: normal;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-family: Raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 16px;
+}
+
+body {
+ padding: 0;
+ margin: 0;
+ overflow-x: hidden;
+}
+
+p {
+ line-height: 1.5;
+}
+
+:root {
+ --outer-space: 1.5rem;
+}
diff --git a/examples/hono-tractor-store-2.0/src/explore/types.js b/examples/hono-tractor-store-2.0/src/explore/types.js
new file mode 100644
index 0000000..ae1e689
--- /dev/null
+++ b/examples/hono-tractor-store-2.0/src/explore/types.js
@@ -0,0 +1,39 @@
+/**
+ * @typedef {object} Product
+ * @property {string} id - The ID of the product.
+ * @property {string} name - The name of the product.
+ * @property {string} image - The image URL of the product.
+ * @property {string} url - The URL of the product.
+ * @property {number} startPrice - The starting price of the product.
+ */
+
+/**
+ * @typedef {object} Variant
+ * @property {string} name - The name of the variant.
+ * @property {string} sku - The SKU of the variant.
+ * @property {string} image - The image URL of the variant.
+ * @property {string} product - The ID of the product the variant belongs to.
+ * @property {string} url - The URL of the variant.
+ */
+
+/**
+ * @typedef {object} RecoItem
+ * @property {string} name - The name of the recommendation item.
+ * @property {string} sku - The SKU of the recommendation item.
+ * @property {string} image - The image URL of the recommendation item.
+ * @property {string} url - The URL of the recommendation item.
+ * @property {number[]} rgb - The RGB color of the recommendation item.
+ */
+
+/**
+ * @typedef {object} Category
+ * @property {string} key - The key of the category.
+ * @property {string} name - The name of the category.
+ * @property {Product[]} products - The products in the category.
+ */
+
+/**
+ * @typedef {object} Database
+ * @property {Category[]} categories - The categories in the database.
+ * @property {{[key: string]: RecoItem}} recommendations - The recommendations in the database.
+ */
diff --git a/examples/hono-tractor-store-2.0/src/explore/utils.js b/examples/hono-tractor-store-2.0/src/explore/utils.js
new file mode 100644
index 0000000..7d1c762
--- /dev/null
+++ b/examples/hono-tractor-store-2.0/src/explore/utils.js
@@ -0,0 +1,38 @@
+// for prettier formatting
+// see https://prettier.io/docs/en/options.html#embedded-language-formatting
+export const html = String.raw;
+
+// use the image server if not using local images
+export const IMAGE_SERVER =
+ typeof process === "undefined" || process.env.USE_LOCAL_IMAGES !== "true"
+ ? "https://cdn.the-tractor.store"
+ : "";
+
+/**
+ * Replaces the placeholder "[size]" in the image URL with the specified size.
+ * @param {string} image - The original image URL.
+ * @param {number} size - The desired size for the image.
+ * @returns {string} - The modified image URL with the size placeholder replaced.
+ */
+export function src(image, size) {
+ return IMAGE_SERVER + image.replace("[size]", `${size}`);
+}
+
+/**
+ * Generates the srcset attribute value for an image with different sizes.
+ * @param {string} image - The original image URL.
+ * @param {number[]} sizes - The array of sizes for the image.
+ * @returns {string} - The srcset attribute value.
+ */
+export function srcset(image, sizes = []) {
+ return sizes.map((size) => `${src(image, size)} ${size}w`).join(", ");
+}
+
+/**
+ * Formats a price value.
+ * @param {number} price - The price value to format.
+ * @returns {string} - The formatted price.
+ */
+export function fmtprice(price) {
+ return `${price},00 Ø`;
+}
diff --git a/examples/hono-tractor-store-2.0/src/server.cloudflare.js b/examples/hono-tractor-store-2.0/src/server.cloudflare.js
new file mode 100644
index 0000000..88b9548
--- /dev/null
+++ b/examples/hono-tractor-store-2.0/src/server.cloudflare.js
@@ -0,0 +1,12 @@
+import createServer from "./server.js";
+import { serveStatic } from "hono/cloudflare-workers";
+import manifest from "__STATIC_CONTENT_MANIFEST";
+
+const app = createServer();
+
+app.use("/cdn/*", serveStatic({ root: "./", manifest }));
+["explore", "decide", "checkout"].forEach((team) => {
+ app.use(`/${team}/static/*`, serveStatic({ root: `./`, manifest }));
+});
+
+export default app;
diff --git a/examples/hono-tractor-store-2.0/src/server.js b/examples/hono-tractor-store-2.0/src/server.js
new file mode 100644
index 0000000..f466755
--- /dev/null
+++ b/examples/hono-tractor-store-2.0/src/server.js
@@ -0,0 +1,68 @@
+import { Hono } from "hono";
+import { logger } from "hono/logger";
+import { HomePage, StoresPage, CategoryPage } from "./explore/index.js";
+import { ProductPage } from "./decide/index.js";
+import {
+ MiniCart,
+ CartPage,
+ Checkout,
+ Thanks,
+ handleAddToCart,
+ handleRemoveFromCart,
+ handlePlaceOrder,
+} from "./checkout/index.js";
+
+/**
+ * Creates a server instance.
+ * @returns {Hono} The server instance.
+ */
+export default function createServer() {
+ const app = new Hono();
+ app.use(logger());
+
+ /**
+ * Team Explore
+ */
+ app.get("/", async (c) => {
+ return c.html(HomePage({ c }));
+ });
+ app.get("/stores", async (c) => {
+ return c.html(StoresPage({ c }));
+ });
+ app.get("/products/:category?", async (c) => {
+ console.log("category", c.req.param("category"));
+ const category = c.req.param("category");
+ return c.html(CategoryPage({ category, c }));
+ });
+
+ /**
+ * Team Decide
+ */
+ app.get("/product/:id", async (c) => {
+ const { id } = c.req.param();
+ const sku = c.req.query("sku");
+ return c.html(ProductPage({ id, sku, c }));
+ });
+
+ /**
+ * Team Buy
+ */
+ app.get("/checkout/cart", (c) => c.html(CartPage({ c })));
+ app.get("/checkout/checkout", (c) => c.html(Checkout()));
+ app.get("/checkout/mini-cart", (c) => c.html(MiniCart({ c })));
+ app.post("/checkout/cart/add", async (c) => {
+ await handleAddToCart(c);
+ return c.redirect("/checkout/cart");
+ });
+ app.post("/checkout/cart/remove", async (c) => {
+ await handleRemoveFromCart(c);
+ return c.redirect("/checkout/cart");
+ });
+ app.post("/checkout/place-order", async (c) => {
+ await handlePlaceOrder(c);
+ return c.redirect("/checkout/thanks");
+ });
+ app.get("/checkout/thanks", (c) => c.html(Thanks({ c })));
+
+ return app;
+}
diff --git a/examples/hono-tractor-store-2.0/src/server.node.js b/examples/hono-tractor-store-2.0/src/server.node.js
new file mode 100644
index 0000000..9c24684
--- /dev/null
+++ b/examples/hono-tractor-store-2.0/src/server.node.js
@@ -0,0 +1,27 @@
+import createServer from "./server.js";
+import { serve } from "@hono/node-server";
+import { serveStatic } from "@hono/node-server/serve-static";
+
+const app = createServer();
+
+// Serve static files
+const isProd = process.env.NODE_ENV === "production";
+const cacheControl = isProd ? "public, max-age=86400" : "no-store";
+const setHeaders = (res) => {
+ res.setHeader("Cache-Control", cacheControl);
+};
+
+const onNotFound = (path, c) =>
+ console.log(`${path} is not found, request to ${c.req.path}`);
+
+app.use("/cdn/*", serveStatic({ root: "./public/", setHeaders, onNotFound }));
+["explore", "decide", "checkout"].forEach((team) => {
+ app.use(
+ `/${team}/static/*`,
+ serveStatic({ root: `./public/`, setHeaders, onNotFound }),
+ );
+});
+
+serve({ fetch: app.fetch, port: 3000 }, (info) => {
+ console.log(`Listening on http://localhost:${info.port}`);
+});
diff --git a/examples/hono-tractor-store-2.0/src/types.js b/examples/hono-tractor-store-2.0/src/types.js
new file mode 100644
index 0000000..70eaea8
--- /dev/null
+++ b/examples/hono-tractor-store-2.0/src/types.js
@@ -0,0 +1,16 @@
+/**
+ * HonoContext.
+ * @typedef {object} HonoContext
+ * @property {HonoRequest} req - The request object.
+ * @property {Function} html - Returns the HTML content.
+ * @property {Function} redirect - Redirects to a URL.
+ */
+
+/**
+ * HonoRequest.
+ * @typedef {object} HonoRequest
+ * @property {Function} parseBody - Parses the request body.
+ * @property {Function} query - Returns the request query.
+ * @property {Function} param - Returns the request params.
+ * @property {string} path - Returns the request path.
+ */
diff --git a/examples/hono-tractor-store-2.0/wrangler.toml b/examples/hono-tractor-store-2.0/wrangler.toml
new file mode 100644
index 0000000..bd69b53
--- /dev/null
+++ b/examples/hono-tractor-store-2.0/wrangler.toml
@@ -0,0 +1,6 @@
+name = "tractor-store-blueprint"
+main = "src/server.cloudflare.js"
+compatibility_date = "2024-03-12"
+
+[site]
+bucket = "./public"
\ No newline at end of file
diff --git a/rspack_hmr/README.md b/rspack_hmr/README.md
new file mode 100644
index 0000000..4edb088
--- /dev/null
+++ b/rspack_hmr/README.md
@@ -0,0 +1,101 @@
+# mf-runtime
+
+## How to run this example
+First install all by running
+
+```sh
+pnpm install && pnpm run install-all
+```
+
+After installation run:
+`pnpm run start`
+
+Rspack remotes:
+run `host` (localhost:3000) and `app2`
+
+runtime remotes:
+run `runhost` (localhost:3003) and `app2`
+
+HMR should work fine in both cases!
+
+## How does it work
+
+We pay attention to all the `rspack.config.ts` in each of the modules.
+
+Let's start with `app_02` where it provides the component to others.
+
+Within [`app_02`'s `rspack.config.ts`](./app2/rspack.config.js), we expose two things (only one thing is used atm for other hosts)
+
+```js
+ new ModuleFederationPlugin({
+ name: name,
+ filename: 'remoteEntry.js',
+ exposes: {
+ './Hello': './src/Hello.tsx',
+ './pi': './src/pi.ts',
+ },
+ manifest: true,
+
+ }),
+```
+
+The component is exposed from the configuration, while we define a public path (for other consuming application to find it) at:
+
+```js
+ output: {
+ path: __dirname + '/dist',
+ uniqueName: name1,
+ publicPath: 'http://localhost:3001/',
+ filename: '[name].js',
+ },
+```
+And of course, often time we run into `CORS` error so we also need to make sure the headers are configured correctly since we will be fetching part of the frontend from `app2` to other host application (in this case, dir name `host` and `runhost`):
+
+```js
+headers: {
+ 'Access-Control-Allow-Origin': '*',
+ 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+ 'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
+ },
+```
+
+Next we go into [`host/rspack.config.ts`](./host/rspack.config.js), to consume the remote module from other application we will need:
+1. the app's unique name `app_02`
+2. the public path (at the moment it runs on your local computer)
+3. the module federation manifest
+4. specify if there is any shared dependencies
+
+This part of the code is how `host` can find `app2`:
+
+```js
+ new ModuleFederationPlugin({
+ name: name,
+ filename: 'remoteEntry.js',
+ remotes: {
+ app_02: 'app_02@http://localhost:3001/mf-manifest.json',
+ },
+
+ shared: ['react', 'react-dom'],
+ }),
+```
+
+When we are going to consume the `Hello` module from `app2`, we find the [`host/src/App.tsx`](./host/src/App.tsx) and import it just like every other React component with a path we have defined in `rspack.config.ts`:
+
+```tsx
+import { Hello } from 'app_02/Hello';
+
+```
+and then within the component:
+```tsx
+...
+
+
+ 
+