Update example

Author: KyleJune

deno.jsonc

@@ -1,13 +1,13 @@
 {
   "tasks": {
     // Builds the application.
-    "build": "deno run -A --config=deno.jsonc jsr:@udibo/react-app@0.21/build",
+    "build": "deno run -A --config=deno.jsonc jsr:@udibo/react-app@0.22/build",
     // Builds the application in development mode.
     "build-dev": "export APP_ENV=development NODE_ENV=development && deno task build",
     // Builds the application in production mode.
     "build-prod": "export APP_ENV=production NODE_ENV=production && deno task build",
     // Builds and runs the application in development mode, with hot reloading.
-    "dev": "export APP_ENV=development NODE_ENV=development && deno run -A --config=deno.jsonc jsr:@udibo/react-app@0.21/dev",
+    "dev": "export APP_ENV=development NODE_ENV=development && deno run -A --config=deno.jsonc jsr:@udibo/react-app@0.22/dev",
     // Runs the application. Requires the application to be built first.
     "run": "deno run -A ./main.ts",
     // Runs the application in development mode. Requires the application to be built first.
@@ -37,7 +37,7 @@
   },
   "imports": {
     "@udibo/http-error": "jsr:@udibo/http-error@0",
-    "@udibo/react-app": "jsr:@udibo/react-app@0.20.3",
+    "@udibo/react-app": "jsr:@udibo/react-app@0.22",
     "@luca/esbuild-deno-loader": "jsr:@luca/[email protected]",
     "@oak/oak": "jsr:@oak/oak@16",
     "@std/assert": "jsr:@std/assert@1",

deno.lock

@@ -1,10 +1,14 @@
 import * as log from "@std/log";
+import { isDevelopment, logFormatter } from "@udibo/react-app";
 
+const level = isDevelopment() ? "DEBUG" : "INFO";
 log.setup({
+  handlers: {
+    default: new log.ConsoleHandler(level, {
+      formatter: logFormatter,
+    }),
+  },
   loggers: {
-    "react-app": {
-      level: "INFO",
-      handlers: ["default"],
-    },
+    "react-app": { level, handlers: ["default"] },
   },
 });

log.ts

@@ -1,4 +1,5 @@
 import { Router } from "@udibo/react-app/server";
+import * as log from "@std/log";
 
 import type { AppState } from "../state.ts";
 
@@ -9,13 +10,11 @@ export default new Router<AppState>()
     try {
       await next();
     } finally {
-      const dt = Date.now() - start;
-      response.headers.set("X-Response-Time", `${dt}ms`);
-      console.log({
-        status: response.status,
-        method: request.method,
-        href: request.url.href,
-        responseTime: dt,
-      });
+      const responseTime = Date.now() - start;
+      response.headers.set("X-Response-Time", `${responseTime}ms`);
+      log.info(
+        `${request.method} ${request.url.href}`,
+        { status: response.status, responseTime },
+      );
     }
   });