Handle 404 Issues

.gitignore

@@ -7,3 +7,5 @@ tsconfig.tsbuildinfo
 dist
 example-client/dist
 .parcel-cache
+.turbo
+.turbo/*

examples/example-client/package.json

@@ -5,7 +5,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@cher-ami/router": "^3.5.2",
+    "@cher-ami/router": "^3.5.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "gsap": "^3.12.2"

examples/example-hash-history/package.json

@@ -5,7 +5,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@cher-ami/router": "^3.5.2",
+    "@cher-ami/router": "^3.5.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "gsap": "^3.12.2"

examples/example-history-block/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@cher-ami/router": "^3.5.2",
+    "@cher-ami/router": "^3.5.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/example-ssr/package.json

@@ -13,24 +13,25 @@
     "preview": "serve dist/static"
   },
   "dependencies": {
-    "@cher-ami/router": "^3.5.2",
+    "@cher-ami/router": "^3.5.4",
+    "fastify": "^5.6.2",
+    "gsap": "^3.12.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "gsap": "^3.12.2"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@cher-ami/debug": "^1.2.0",
+    "@cher-ami/mfs": "^0.2.0",
     "@types/node": "^20.8.2",
     "@types/react": "^18.2.24",
     "@types/react-dom": "^18.2.8",
     "@vitejs/plugin-react": "^4.1.0",
-    "@cher-ami/debug": "^1.2.0",
-    "@cher-ami/mfs": "^0.2.0",
     "chalk": "^5.3.0",
     "compression": "^1.7.4",
-    "isomorphic-unfetch": "^4.0.2",
     "cross-fetch": "^4.0.0",
     "express": "^4.18.2",
     "fs-extra": "^11.1.1",
+    "isomorphic-unfetch": "^4.0.2",
     "nodemon": "^3.0.1",
     "portfinder-sync": "^0.0.2",
     "vite": "^4.4.10"

examples/example-ssr/server.js

@@ -38,13 +38,19 @@ const port = portFinderSync.getPort(3000)
       try {
         // Transforms the ESM source code to be usable in Node.js
         const { render } = await vite.ssrLoadModule(`src/server/index-server.tsx`)
-        // Get react-dom from the render method
 
+        // Get react-dom from the render method
         const dom = await render(req.originalUrl, devScripts, false)
+
         // Create stream to support Suspense API
         const stream = renderToPipeableStream(dom, {
           onShellReady() {
-            res.statusCode = 200
+            // If the page is a 404 page, set the status code to 404
+            if (dom?.props?.["data-is404"]) {
+              res.statusCode = 404
+            } else {
+              res.statusCode = 200
+            }
             res.setHeader("Content-type", "text/html")
             stream.pipe(res)
           },

examples/example-ssr/src/components/App.tsx

@@ -4,7 +4,7 @@ import { languages } from "~/languages"
 import { EPages } from "~/routes"
 import { useRouter } from "@cher-ami/router"
 
-export function App() {
+export function App({ is404 }: { is404: boolean }) {
   const { langService } = useRouter()
   const [lang, setLang] = useLang()
 

examples/example-ssr/src/pages/NotFoundPage.tsx

@@ -16,14 +16,15 @@ function NotFoundPage(props, handleRef) {
 
   return (
     <div className={componentName} ref={rootRef}>
-      NOT FOUND NOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT
-      FOUNDNOT FOUNDNOT FOUNDNOT NOT FOUND NOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT
-      FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT NOT FOUND NOT FOUNDNOT
-      FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT NOT
-      FOUND NOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT
-      FOUNDNOT FOUNDNOT
+      NOT FOUND NOT FOUND NOT FOUND NOT FOUND NOT FOUND NOT FOUND NOT FOUND NOT FOUND NOT
+      FOUND NOT FOUND NOT FOUND NOT NOT FOUND NOT FOUND NOT FOUND NOT FOUND NOT FOUND NOT
+      FOUND NOT FOUND NOT FOUND NOT FOUND NOT FOUND NOT FOUND NOT NOT FOUND NOT FOUND NOT
+      FOUND NOT FOUND NOT FOUND NOT FOUND NOT FOUND NOT FOUND NOT FOUND NOT FOUND NOT
+      FOUND NOT NOT FOUND NOT FOUND NOT FOUND NOT FOUND NOT FOUND NOT FOUND NOT FOUND NOT
+      FOUND NOT FOUND NOT FOUND NOT FOUND NOT
     </div>
   )
 }
 
+NotFoundPage.displayName = componentName
 export default React.forwardRef(NotFoundPage)

examples/example-ssr/src/routes.ts

@@ -73,10 +73,20 @@ export const routes: TRoute[] = [
     path: "/contact",
     component: ContactPage,
     name: EPages.CONTACT,
+    getStaticProps: async () => {
+      const data = null
+
+      if (!data) {
+        return { notFound: true }
+      }
+    },
   },
   {
     path: "/:rest",
     component: NotFoundPage,
     name: EPages.NOT_FOUND,
+    getStaticProps: async (props) => {
+      return { notFound: true }
+    },
   },
 ]

examples/example-ssr/src/server/index-server.tsx

@@ -57,7 +57,7 @@ export async function render(
 
 
   return (
-    <html lang={langService.currentLang.key}>
+    <html lang={langService.currentLang.key} data-is404={ssrStaticProps?.props?.notFound ? "true" : null}>
       <head>
         <meta charSet="UTF-8" />
         <meta httpEquiv="x-ua-compatible" content="IE=Edge" />
@@ -81,7 +81,7 @@ export async function render(
             id={1}
           >
             <GlobalDataContext.Provider value={globalData}>
-            <App />
+            <App is404={ssrStaticProps?.props?.notFound}/>
             </GlobalDataContext.Provider>
           </Router>
         </div>

package.json

@@ -47,29 +47,29 @@
   "dependencies": {
     "@cher-ami/debug": "^1.2.0",
     "history": "^5.3.0",
-    "path-to-regexp": "^6.2.1",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "path-to-regexp": "^6.3.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@size-limit/preset-small-lib": "^8.2.6",
-    "@testing-library/react": "^14.0.0",
-    "@types/node": "^20.8.7",
-    "@types/react": "^18.2.29",
-    "@types/react-dom": "^18.2.14",
+    "@testing-library/react": "^14.3.1",
+    "@types/node": "^20.19.26",
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
-    "lint-staged": "^15.0.1",
-    "prettier": "^3.0.3",
-    "react-test-renderer": "^18.2.0",
+    "lint-staged": "^15.5.2",
+    "prettier": "^3.7.4",
+    "react-test-renderer": "^18.3.1",
     "size-limit": "^9.0.0",
     "tsup": "^7.2.0",
-    "turbo": "^1.10.15",
-    "typescript": "^5.2.2",
+    "turbo": "^1.13.4",
+    "typescript": "^5.9.3",
     "vitest": "^0.34.6"
   },
   "lint-staged": {