feat: Rewrite root module, define listeners, draft MockManager

package.json

@@ -39,8 +39,8 @@
     "@mantine/prism": "^4.2.9",
     "@mantine/rte": "^4.2.9",
     "framer-motion": "^6.3.11",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router-dom": "6.3.0",
     "styled-jsx": "^5.0.2",
     "tabler-icons-react": "^1.48.0",
@@ -55,8 +55,8 @@
     "@parcel/transformer-webmanifest": "2.3.2",
     "@types/jest": "^27.5.1",
     "@types/node": "^16.11.24",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
     "@types/react-router": "5.1.5",
     "@types/react-router-dom": "5.1.3",
     "@types/styled-jsx": "^3.4.4",

src/demo/Sample.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+
+export const Sample = () => {
+  const [message, setMessage] = useState("");
+  const [popup, setPopup] = useState<Window | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const values = Object.fromEntries(formData);
+
+    const response = await fetch("/create-user", {
+      method: "POST",
+      body: JSON.stringify(values),
+    });
+
+    const { message } = await response.json();
+    setMessage(message);
+  };
+
+  const openMockManager = () => {
+    if (popup !== null && !popup.closed) {
+      popup?.focus();
+    } else {
+      const newPopup = window.open("/mock-manager", "", "popup");
+      setPopup(newPopup);
+    }
+  };
+
+  const closeMocker = () => {
+    if (popup !== null && !popup.closed) {
+      popup.postMessage({ source: "window-parent", content: "close" }, "*");
+      setPopup(null);
+      console.log("Popup has been closed.");
+    }
+  };
+
+  return (
+    <div className="container">
+      <form onSubmit={handleSubmit}>
+        <input name="name" placeholder="name" />
+        <input name="surname" placeholder="surname" />
+        <button type="submit">SUBMIT</button>
+      </form>
+      <br />
+      <h2>{message}</h2>
+      <br />
+      <br />
+      <button onClick={openMockManager}>Open Mock Manager</button>
+      <button onClick={closeMocker}>Close Mock Manager</button>
+    </div>
+  );
+};

src/index.tsx

@@ -1,10 +1,41 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-);
+import { createRoot } from "react-dom/client";
+import { Sample } from "./demo/Sample";
+
+const container = document.getElementById("root");
+const root = createRoot(container!);
+
+if (process.env.NODE_ENV === "production") {
+  root.render(<Sample />);
+} else {
+  console.log("NODE_ENV:", process.env.NODE_ENV);
+  const { MockManager } = require("./views/MockManager");
+  const { worker } = require("./mocks/browser");
+  const { processChildIntent } = require("./utils/processChildIntent");
+  const { processParentIntent } = require("./utils/processParentIntent");
+
+  window.addEventListener(
+    "message",
+    function (event) {
+      if (event.data.source === "window-child")
+        processChildIntent(worker, event.data);
+    },
+    false
+  );
+
+  window.addEventListener(
+    "message",
+    function (event) {
+      if (event.data.source === "window-parent")
+        processParentIntent(event.data.content);
+    },
+    false
+  );
+
+  worker.start();
+
+  if (window.location.pathname === "/mock-manager") {
+    root.render(<MockManager />);
+  } else {
+    root.render(<Sample />);
+  }
+}

src/mocks/browser.ts

@@ -0,0 +1,4 @@
+import { setupWorker } from "msw";
+import { handlers } from "./handlers";
+
+export const worker = setupWorker(...handlers);

src/mocks/handlers.ts

@@ -0,0 +1,12 @@
+import { rest } from "msw";
+
+export const mswRest = rest;
+
+export const handlers = [
+  rest.post("/create-user", (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({ message: "This is the original response message" })
+    );
+  }),
+];

src/utils/processChildIntent.ts

@@ -0,0 +1,12 @@
+import { rest, SetupWorkerApi } from "msw";
+
+export const processChildIntent = (worker: SetupWorkerApi, data: any) => {
+  worker.use(
+    rest.post("/create-user", (req, res, ctx) => {
+      return res(
+        ctx.status(200),
+        ctx.json({ message: data.values.override_body })
+      );
+    })
+  );
+};

src/utils/processParentIntent.ts

@@ -0,0 +1,6 @@
+export const processParentIntent = (data: any) => {
+  switch (data) {
+    case "close":
+      window.close();
+  }
+};