feat: [ts-starter #9] create bootstrap

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>,
+);

src/index.tsx

@@ -1,18 +1,19 @@
 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 FallbackComponent={Fallback}>
+      <Suspense fallback="loading">
+        <App />
+      </Suspense>
+    </ErrorBoundary>
+  );
+}
+
+function Fallback({ error }: { error: Error }): ReactElement {
+  return <p>{error.message}</p>;
 }
-const root = createRoot(container);
-root.render(
-  <ErrorBoundary fallback={<div>shit hit the fan bruv!</div>}>
-    <Suspense fallback="loading">
-      <App />
-    </Suspense>
-  </ErrorBoundary>,
-);

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,13 @@ function webpackConfig(_env, { mode = "development" }) {
       }),
       isDevelopment && new ReactRefreshWebpackPlugin(),
     ].filter(Boolean),
+    performance:
+      mode === "production"
+        ? {
+            maxEntrypointSize: 200000,
+            hints: "warning",
+          }
+        : undefined,
   };
 }