From a10107be009e430a9bcf9c8c9dbd34f001c6cf63 Mon Sep 17 00:00:00 2001
From: EhsanM <e.mahmoudi.a@gmail.com>
Date: Thu, 21 Mar 2024 13:59:48 +0330
Subject: [PATCH 1/2] feat: [ts-starter #9] create a minimal bootstrap entry
 point

---
 src/bootstrap.tsx  | 18 ++++++++++++++++++
 src/index.tsx      | 23 ++++++++++-------------
 webpack.config.mjs |  6 +++++-
 3 files changed, 33 insertions(+), 14 deletions(-)
 create mode 100644 src/bootstrap.tsx

diff --git a/src/bootstrap.tsx b/src/bootstrap.tsx
new file mode 100644
index 0000000..4221fb3
--- /dev/null
+++ b/src/bootstrap.tsx
@@ -0,0 +1,18 @@
+import { lazy, Suspense } from "react";
+import { createRoot } from "react-dom/client";
+import { ErrorBoundary } from "react-error-boundary";
+
+const Index = lazy(async () => import("./index"));
+const containerId = "root";
+const container = document.getElementById(containerId);
+if (!container) {
+  throw Error(`couldn't find element with id ${containerId}!`);
+}
+const root = createRoot(container);
+root.render(
+  <ErrorBoundary fallback={<div>Something went wrong...</div>}>
+    <Suspense fallback="loading">
+      <Index />
+    </Suspense>
+  </ErrorBoundary>,
+);
diff --git a/src/index.tsx b/src/index.tsx
index 51706af..238be1e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,18 +1,15 @@
 import { lazy, Suspense } from "react";
-import { createRoot } from "react-dom/client";
+import type { ReactElement } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
 const App = lazy(async () => import("./App"));
-const containerId = "root";
-const container = document.getElementById(containerId);
-if (!container) {
-  throw Error(`couldn't find element with id ${containerId}!`);
+
+export default function Index(): ReactElement {
+  return (
+    <ErrorBoundary fallback={<div>shit hit the fan bruv!</div>}>
+      <Suspense fallback="loading">
+        <App />
+      </Suspense>
+    </ErrorBoundary>
+  );
 }
-const root = createRoot(container);
-root.render(
-  <ErrorBoundary fallback={<div>shit hit the fan bruv!</div>}>
-    <Suspense fallback="loading">
-      <App />
-    </Suspense>
-  </ErrorBoundary>,
-);
diff --git a/webpack.config.mjs b/webpack.config.mjs
index 1981d5d..25883bf 100644
--- a/webpack.config.mjs
+++ b/webpack.config.mjs
@@ -52,7 +52,7 @@ function webpackConfig(_env, { mode = "development" }) {
   return {
     mode,
     devtool: isDevelopment ? "eval-source-map" : "source-map",
-    entry: "./src/index.tsx",
+    entry: "./src/bootstrap.tsx",
     devServer: {
       hot: true,
       historyApiFallback: true,
@@ -94,6 +94,10 @@ function webpackConfig(_env, { mode = "development" }) {
       }),
       isDevelopment && new ReactRefreshWebpackPlugin(),
     ].filter(Boolean),
+    performance: {
+      maxEntrypointSize: 150000,
+      hints: "warning",
+    },
   };
 }
 

From 0331bd2807eb928971f87cc1c1131e8fe0e73be2 Mon Sep 17 00:00:00 2001
From: EhsanM <e.mahmoudi.a@gmail.com>
Date: Sat, 23 Mar 2024 17:44:07 +0330
Subject: [PATCH 2/2] fixup! feat: [ts-starter #9] create a minimal bootstrap
 entry point

---
 src/index.tsx      |  6 +++++-
 webpack.config.mjs | 11 +++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 238be1e..cf3252a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,10 +6,14 @@ const App = lazy(async () => import("./App"));
 
 export default function Index(): ReactElement {
   return (
-    <ErrorBoundary fallback={<div>shit hit the fan bruv!</div>}>
+    <ErrorBoundary FallbackComponent={Fallback}>
       <Suspense fallback="loading">
         <App />
       </Suspense>
     </ErrorBoundary>
   );
 }
+
+function Fallback({ error }: { error: Error }): ReactElement {
+  return <p>{error.message}</p>;
+}
diff --git a/webpack.config.mjs b/webpack.config.mjs
index 25883bf..2e9ae7f 100644
--- a/webpack.config.mjs
+++ b/webpack.config.mjs
@@ -94,10 +94,13 @@ function webpackConfig(_env, { mode = "development" }) {
       }),
       isDevelopment && new ReactRefreshWebpackPlugin(),
     ].filter(Boolean),
-    performance: {
-      maxEntrypointSize: 150000,
-      hints: "warning",
-    },
+    performance:
+      mode === "production"
+        ? {
+            maxEntrypointSize: 200000,
+            hints: "warning",
+          }
+        : undefined,
   };
 }