chore: Debug AetherPage SSR

apps/next/app/ClientRootLayout.tsx

@@ -27,17 +27,17 @@ const NextClientRootLayout = (props: { children: React.ReactNode }) => {
   const { children } = props
 
   // Auth
-  const { getToken } = useAuth()
+  // const { getToken } = useAuth()
 
   // -- Fonts --
 
   useLoadFonts()
 
   // -- Effects --
 
-  useEffect(() => {
-    setGlobal('getAuthToken', getToken)
-  }, [getToken])
+  // useEffect(() => {
+  //   setGlobal('getAuthToken', getToken)
+  // }, [getToken])
 
   // -- Render --
 
@@ -48,7 +48,7 @@ const NextClientRootLayout = (props: { children: React.ReactNode }) => {
         assets={{}}
         icons={{}}
         twConfig={tailwindConfig}
-        getAuthToken={getToken}
+        // getAuthToken={getToken}
         isAppDir
         isNextJS
       >

apps/next/next.config.js

@@ -70,7 +70,7 @@ const nextConfig = {
     images: {
         domains: ['i3.ytimg.com'],
     },
-    webpack: (config, { isServer }) => {
+    webpack: (config, { dev, isServer }) => {
         // -i- Run aetherspace automation scripts in DEV mode
         if (!isServer && process.env.NODE_ENV === 'development') withAutomation()
         // Enable top level await in API handlers
@@ -87,6 +87,20 @@ const nextConfig = {
         config.plugins.push(new FilterWarningsPlugin({
             exclude: [/the request of a dependency is an expression/],
         }))
+        // Debug during build step?
+        if (!dev && !isServer) {
+            config.optimization.minimizer = config.optimization.minimizer.map(plugin => {
+                if (plugin.constructor.name === 'TerserPlugin') {
+                    plugin.options.terserOptions = {
+                        ...plugin.options.terserOptions,
+                        // Prevent discarding or mangling of console statements
+                        compress: { ...plugin.options.terserOptions.compress, drop_console: false },
+                        mangle: { ...plugin.options.terserOptions.mangle, reserved: ['console'] },
+                    }
+                }
+                return plugin;
+            })
+        }
         // Return config
         return config
     },

features/app-core/routes/bio/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AetherPage } from 'aetherspace/navigation'
+import { AetherPage } from 'aetherspace/navigation/AetherPage'
 import * as bioScreen from 'links-page/screens/BioScreen'
 import { userBioMock } from 'links-page/mocks/userBio.mock'
 

features/app-core/routes/cv/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AetherPage } from 'aetherspace/navigation'
+import { AetherPage } from 'aetherspace/navigation/AetherPage'
 import * as ResumeScreen from 'cv-page/screens/ResumeScreen'
 import { dummyResumeData } from 'cv-page/mocks/resumeData.mock'
 

features/app-core/routes/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AetherPage } from 'aetherspace/navigation'
+import { AetherPage } from 'aetherspace/navigation/AetherPage'
 import * as bioScreen from 'links-page/screens/BioScreen'
 import { userBioMock } from 'links-page/mocks/userBio.mock'
 

features/app-core/routes/layout.tsx

@@ -2,15 +2,15 @@
 import React from 'react'
 import ErrorBoundary from '../screens/ErrorBoundary'
 import { View } from 'aetherspace/primitives'
-import { AetherClerkProvider } from '@aetherspace/clerk-auth/context/ClerkProvider'
+// import { AetherClerkProvider } from '@aetherspace/clerk-auth/context/ClerkProvider'
 
 /* --- <RootLayout/> --------------------------------------------------------------------------- */
 
 const RootLayout = ({ children }: { children: React.ReactNode }) => (
   <ErrorBoundary>
-    <AetherClerkProvider>
-      <View tw="flex flex-col min-h-full w-full">{children}</View>
-    </AetherClerkProvider>
+    {/*<AetherClerkProvider>*/}
+    <View tw="flex flex-col min-h-full w-full">{children}</View>
+    {/*</AetherClerkProvider>*/}
   </ErrorBoundary>
 )
 

features/app-core/routes/links/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AetherPage } from 'aetherspace/navigation'
+import { AetherPage } from 'aetherspace/navigation/AetherPage'
 import * as bioScreen from 'links-page/screens/BioScreen'
 import { userBioMock } from 'links-page/mocks/userBio.mock'
 

features/app-core/routes/resume/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AetherPage } from 'aetherspace/navigation'
+import { AetherPage } from 'aetherspace/navigation/AetherPage'
 import * as ResumeScreen from 'cv-page/screens/ResumeScreen'
 import { dummyResumeData } from 'cv-page/mocks/resumeData.mock'
 

features/cv-page/routes/cv/[slug]/edit/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 // Navigation
-import { AetherPage } from 'aetherspace/navigation'
+import { AetherPage } from 'aetherspace/navigation/AetherPage'
 // Screens
 import * as UpdateResumeScreen from '../../../../screens/UpdateResumeScreen'
 

features/cv-page/routes/cv/[slug]/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 // Navigation
-import { AetherPage } from 'aetherspace/navigation'
+import { AetherPage } from 'aetherspace/navigation/AetherPage'
 // Screens
 import * as ResumeScreen from '../../../screens/ResumeScreen'
 

features/cv-page/routes/resume/[slug]/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AetherPage } from 'aetherspace/navigation'
+import { AetherPage } from 'aetherspace/navigation/AetherPage'
 import * as ResumeScreen from '../../../screens/ResumeScreen'
 
 /* --- Config ---------------------------------------------------------------------------------- */

features/links-page/routes/bio/[slug].tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 // Navigation
-import { AetherPage } from 'aetherspace/navigation'
+import { AetherPage } from 'aetherspace/navigation/AetherPage'
 // Screens
 import * as bioScreen from '../../screens/BioScreen'
 

features/user-management/routes/me/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AetherPage } from 'aetherspace/navigation'
+import { AetherPage } from 'aetherspace/navigation/AetherPage'
 import * as UserInfoScreen from '../../screens/UserInfoScreen'
 
 /* --- Config ---------------------------------------------------------------------------------- */

features/user-management/routes/sign-in/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AetherPage } from 'aetherspace/navigation'
+import { AetherPage } from 'aetherspace/navigation/AetherPage'
 import * as SignInScreen from '../../screens/SignInScreen'
 
 /* --- Config ---------------------------------------------------------------------------------- */

features/user-management/routes/sign-up/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AetherPage } from 'aetherspace/navigation'
+import { AetherPage } from 'aetherspace/navigation/AetherPage'
 import * as signUpScreen from '../../screens/SignUpScreen'
 
 /* --- Config ---------------------------------------------------------------------------------- */

packages/@aetherspace-clerk-auth/middleware/swrClerkAuthMiddleware.ts

@@ -1,6 +1,6 @@
 import { Middleware } from 'swr'
 import { getEnvList, getEnvVar, getGlobal, setGlobal } from 'aetherspace/utils'
-import { AetherFetcherOptions } from 'aetherspace/navigation'
+import type { AetherFetcherOptions } from 'aetherspace/navigation'
 import axios from 'axios'
 
 /** --- swrClerkAuthMiddleware() --------------------------------------------------------------- */

packages/@aetherspace/generators/templates/screen-route-simple.hbs

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AetherPage } from 'aetherspace/navigation'
+import { AetherPage } from 'aetherspace/navigation/AetherPage'
 import * as {{screenName}} from '{{screenImportPath}}'
 
 /* --- Config ---------------------------------------------------------------------------------- */

packages/@aetherspace/generators/templates/screen-route.hbs

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AetherPage } from 'aetherspace/navigation'
+import { AetherPage } from 'aetherspace/navigation/AetherPage'
 import * as {{screenModuleName}} from '{{screenImportPath}}'
 
 /* --- Config ---------------------------------------------------------------------------------- */

packages/@aetherspace/navigation/AetherPage/AetherPage.web.tsx

@@ -56,6 +56,8 @@ export const AetherPage = <SC extends AetherScreenConfig>(props: AetherPageProps
     const fallback = hydrationData ? { [fallbackKey]: hydrationData } : {}
     const renderHydrationData = !!hydrationData && !hydratedData // Only render the hydration data if it's not already in state
 
+    console.warn('AetherPage (Client)', 1, { hydrationData })
+
     return (
       <SWRConfig value={{ use: [swrClerkAuthMiddleware], fallback }}>
         {renderHydrationData && <div id="ssr-data" data-ssr={JSON.stringify(hydrationData)} />}
@@ -66,8 +68,12 @@ export const AetherPage = <SC extends AetherScreenConfig>(props: AetherPageProps
 
   // -- Server --
 
+  console.warn('AetherPage (SSR)', 1)
+
   const ssrData = use(getGraphqlData(graphqlQuery, { variables }))
 
+  console.warn('AetherPage (SSR)', 2, { ssrData })
+
   return (
     <SWRConfig value={{ use: [swrClerkAuthMiddleware], fallback: { [fallbackKey]: ssrData } }}>
       {!!ssrData && <div id="ssr-data" data-ssr={JSON.stringify(ssrData)} />}

packages/@aetherspace/navigation/useRouteParams/useRouteParams.ts

@@ -1,5 +1,4 @@
 import { useSearchParams } from 'expo-router'
-// Types
 import { RoutePropsType } from './useRouteParams.types'
 
 /** --- useRouteParams() ----------------------------------------------------------------------- */

packages/@aetherspace/navigation/useRouteParams/useRouteParams.web.ts

@@ -1,11 +1,11 @@
 import { useSearchParams } from 'next/navigation'
-// Types
 import { RoutePropsType } from './useRouteParams.types'
 
 /** --- useRouteParams() ----------------------------------------------------------------------- */
 /** -i- Get the route params from the expo (mobile) or next (web) router */
 export const useRouteParams = (props: Partial<RoutePropsType>) => {
   const routeParams = props.params || {}
+  console.error('-!- useRouteParams(web) -!-', { routeParams })
   const search = useSearchParams()
   const searchParams = Object.fromEntries(search.entries())
   const params = { ...routeParams, ...searchParams }