[WIP] Brought back APIs, moved route generation to proper v7 convention, allowed for user decision on SSR

waspc/data/Generator/templates/react-app/src/root.tsx

@@ -6,6 +6,7 @@ import {
   Scripts,
   ScrollRestoration,
 } from "react-router";
+import { DefaultRootErrorBoundary } from "./components/DefaultRootErrorBoundary";
 
 export function Layout({
   children,
@@ -35,6 +36,9 @@ export function Layout({
   );
 }
 
+
 export default function Root() {
   return <Outlet />;
-}
+}
+
+export const ErrorBoundary = DefaultRootErrorBoundary

waspc/data/Generator/templates/react-app/src/routes.ts

@@ -2,8 +2,34 @@ import {
   type RouteConfig,
   route,
 } from "@react-router/dev/routes";
+import { layout, route } from "@react-router/dev/routes";
+import { routes } from 'wasp/client/router'
+
+export const routeNameToRouteComponent = {
+  {=# routes =}
+  {= name =}: {= targetComponent =},
+  {=/ routes =}
+} as const;
+
+const waspDefinedRoutes = [
+  {=# isExternalAuthEnabled =}
+  route("{= oAuthCallbackPath =}", "./auth/pages/OAuthCallback"),
+  {=/ isExternalAuthEnabled =}
+]
+const userDefinedRoutes = Object.entries(routes).map(([routeKey, route]) => {
+  // TODO: This should be the path to the route module file (eg. /src/routes/home.tsx)
+  return route(routeKey, route)
+
+})
+
 
 export default [
-  // * matches all URLs, the ? makes it optional so it will match / as well
-  route("*?", "catchall.tsx"),
+  layout(
+    // TODO: This should maybe always be defined, if not, 
+    // TODO: the code should be (if defined => layout, otherwise => spread the routes normally in the array)
+    {=# rootComponent.isDefined =}
+    "{= rootComponent.importIdentifier =}"
+    {=/ rootComponent.isDefined =}, 
+    [...waspDefinedRoutes, ...userDefinedRoutes]
+  ), 
 ] satisfies RouteConfig;

waspc/data/Generator/templates/react-app/vite.config.ts

@@ -3,7 +3,7 @@
 import { mergeConfig } from "vite";
 import { reactRouter } from "@react-router/dev/vite";
 import { defaultExclude } from "vitest/config"
-
+import { reactRouterDevtools } from "react-router-devtools";
 {=# customViteConfig.isDefined =}
 // Ignoring the TS error because we are importing a file outside of TS root dir.
 // @ts-ignore
@@ -16,7 +16,7 @@ const _waspUserProvidedConfig = {};
 
 const defaultViteConfig = {
   base: "{= baseDir =}",
-  plugins: [reactRouter()],
+  plugins: [reactRouterDevtools(), reactRouter()],
   optimizeDeps: {
     exclude: ['wasp']
   },

waspc/data/Generator/templates/sdk/wasp/api/index.ts

@@ -11,7 +11,7 @@ export const api: AxiosInstance = axios.create({
 
 const WASP_APP_AUTH_SESSION_ID_NAME = 'sessionId'
 
-let waspAppAuthSessionId: string | undefined = undefined // storage.get(WASP_APP_AUTH_SESSION_ID_NAME) as string | undefined
+let waspAppAuthSessionId: string | undefined = storage.get(WASP_APP_AUTH_SESSION_ID_NAME)
 
 // PRIVATE API (sdk)
 export function setSessionId(sessionId: string): void {
@@ -39,37 +39,39 @@ export function removeLocalUserData(): void {
   apiEventsEmitter.emit('sessionId.clear')
 }
 
-// api.interceptors.request.use((request) => {
-//   const sessionId = getSessionId()
-//   if (sessionId) {
-//     request.headers['Authorization'] = `Bearer ${sessionId}`
-//   }
-//   return request
-// })
+api.interceptors.request.use((request) => {
+  const sessionId = getSessionId()
+  if (sessionId) {
+    request.headers['Authorization'] = `Bearer ${sessionId}`
+  }
+  return request
+})
 
-// api.interceptors.response.use(undefined, (error) => {
-//   if (error.response?.status === 401) {
-//     clearSessionId()
-//   }
-//   return Promise.reject(error)
-// })
+api.interceptors.response.use(undefined, (error) => {
+  if (error.response?.status === 401) {
+    clearSessionId()
+  }
+  return Promise.reject(error)
+})
 
 // This handler will run on other tabs (not the active one calling API functions),
 // and will ensure they know about auth session ID changes.
 // Ref: https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event
 // "Note: This won't work on the same page that is making the changes — it is really a way
 // for other pages on the domain using the storage to sync any changes that are made."
-// window.addEventListener('storage', (event) => {
-//   if (event.key === storage.getPrefixedKey(WASP_APP_AUTH_SESSION_ID_NAME)) {
-//     if (!!event.newValue) {
-//       waspAppAuthSessionId = event.newValue
-//       apiEventsEmitter.emit('sessionId.set')
-//     } else {
-//       waspAppAuthSessionId = undefined
-//       apiEventsEmitter.emit('sessionId.clear')
-//     }
-//   }
-// })
+if (typeof window !== 'undefined') {
+  window.addEventListener('storage', (event) => {
+    if (event.key === storage.getPrefixedKey(WASP_APP_AUTH_SESSION_ID_NAME)) {
+      if (!!event.newValue) {
+        waspAppAuthSessionId = event.newValue
+        apiEventsEmitter.emit('sessionId.set')
+      } else {
+        waspAppAuthSessionId = undefined
+        apiEventsEmitter.emit('sessionId.clear')
+      }
+    }
+  })
+}
 
 // PRIVATE API (sdk)
 /**

waspc/data/Generator/templates/sdk/wasp/core/storage.ts

@@ -6,45 +6,50 @@ export type DataStore = {
   clear(): void
 }
 
-function createLocalStorageDataStore(prefix: string): DataStore {
+function createStorageDataStore(prefix: string): DataStore {
   function getPrefixedKey(key: string): string {
     return `${prefix}:${key}`
   }
 
   return {
     getPrefixedKey,
     set(key, value) {
-      ensureLocalStorageIsAvailable()
-      localStorage.setItem(getPrefixedKey(key), JSON.stringify(value))
+      const storage =getStorage()
+      storage?.setItem(getPrefixedKey(key), JSON.stringify(value))
     },
     get(key) {
-      ensureLocalStorageIsAvailable()
-      const value = localStorage.getItem(getPrefixedKey(key))
+      const storage = getStorage()
+      const value = storage?.getItem(getPrefixedKey(key))
       try {
         return value ? JSON.parse(value) : undefined
       } catch (e: any) {
         return undefined
       }
     },
     remove(key) {
-      ensureLocalStorageIsAvailable()
-      localStorage.removeItem(getPrefixedKey(key))
+      const storage = getStorage()
+      storage?.removeItem(getPrefixedKey(key))
     },
     clear() {
-      ensureLocalStorageIsAvailable()
-      Object.keys(localStorage).forEach((key) => {
+      const storage = getStorage()
+      if(!storage) {
+        return
+      }
+      Object.keys(storage).forEach((key) => {
         if (key.startsWith(prefix)) {
-          localStorage.removeItem(key)
+          storage.removeItem(key)
         }
       })
     },
   }
 }
 
-export const storage = createLocalStorageDataStore('wasp')
+export const storage = createStorageDataStore('wasp')
 
-function ensureLocalStorageIsAvailable(): void {
-  if (!window || !window.localStorage) {
-    throw new Error('Local storage is not available.')
+// TODO: Make this function work in the server context as well.
+function getStorage(): Storage | undefined {
+  if (typeof localStorage === 'undefined') {
+    return undefined
   }
+  return localStorage
 }

waspc/src/Wasp/Generator/WebAppGenerator.hs

@@ -147,6 +147,8 @@ npmDepsForWasp _spec =
             -- NOTE: Make sure to bump the version of the tsconfig
             -- when updating Vite or React versions
             ("@tsconfig/vite-react", "^2.0.0"),
+            -- NOTE: You can remove this if you don't want to use the React Router DevTools
+            ("react-router-devtools", "^1.1.0"),
             ("@react-router/dev", "^7.1.1")
           ]
     }