chore: Debug AetherPage SSR

codinsonn · codinsonn · commit b4cdc94078d9 · 2024-01-12T00:03:50.000+01:00
diff --git a/apps/next/next.config.js b/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/],
         }))
+        // Uncomment these lines to debug with console logs during `next build`
+        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
     },
diff --git a/features/app-core/routes/bio/index.tsx b/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'
 
diff --git a/features/app-core/routes/cv/index.tsx b/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'
 
diff --git a/features/app-core/routes/index.tsx b/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'
 
diff --git a/features/app-core/routes/layout.tsx b/features/app-core/routes/layout.tsx
@@ -1,5 +1,5 @@
 'use client'
-import React from 'react'
+import React /*, { Suspense } */ from 'react'
 import ErrorBoundary from '../screens/ErrorBoundary'
 import { View } from 'aetherspace/primitives'
 import { AetherClerkProvider } from '@aetherspace/clerk-auth/context/ClerkProvider'
@@ -8,9 +8,11 @@ import { AetherClerkProvider } from '@aetherspace/clerk-auth/context/ClerkProvid
 
 const RootLayout = ({ children }: { children: React.ReactNode }) => (
   <ErrorBoundary>
+    {/* <Suspense fallback={<View tw="flex flex-col min-h-full w-full">{children}</View>}> */}
     <AetherClerkProvider>
       <View tw="flex flex-col min-h-full w-full">{children}</View>
     </AetherClerkProvider>
+    {/* </Suspense> */}
   </ErrorBoundary>
 )
 
diff --git a/features/app-core/routes/links/index.tsx b/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'
 
diff --git a/features/app-core/routes/resume/index.tsx b/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'
 
diff --git a/features/cv-page/routes/cv/[slug]/edit/index.tsx b/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'
 
diff --git a/features/cv-page/routes/cv/[slug]/index.tsx b/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'
 
diff --git a/features/cv-page/routes/resume/[slug]/index.tsx b/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 ---------------------------------------------------------------------------------- */
diff --git a/features/links-page/routes/bio/[slug].tsx b/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'
 
diff --git a/features/user-management/routes/me/index.tsx b/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 ---------------------------------------------------------------------------------- */
diff --git a/features/user-management/routes/sign-in/index.tsx b/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 ---------------------------------------------------------------------------------- */
diff --git a/features/user-management/routes/sign-up/index.tsx b/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 ---------------------------------------------------------------------------------- */
diff --git a/features/user-management/screens/SignUpScreen.tsx b/features/user-management/screens/SignUpScreen.tsx
@@ -1,3 +1,4 @@
+'use client'
 import React from 'react'
 import { Text, View } from 'aetherspace/primitives'
 import { TextInput, Button } from 'aetherspace/forms'
diff --git a/packages/@aetherspace-clerk-auth/context/ClerkProvider.web.tsx b/packages/@aetherspace-clerk-auth/context/ClerkProvider.web.tsx
@@ -1,3 +1,4 @@
+'use client'
 import React, { useMemo } from 'react'
 import { ClerkProvider } from '@clerk/nextjs'
 import type { ClerkProviderProps } from './ClerkProvider.types'
diff --git a/packages/@aetherspace-clerk-auth/middleware/swrClerkAuthMiddleware.ts b/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() --------------------------------------------------------------- */
diff --git a/packages/@aetherspace/generators/templates/screen-route-simple.hbs b/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 ---------------------------------------------------------------------------------- */
diff --git a/packages/@aetherspace/generators/templates/screen-route.hbs b/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 ---------------------------------------------------------------------------------- */
diff --git a/packages/@aetherspace/navigation/AetherPage/AetherPage.web.tsx b/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)} />}
diff --git a/packages/@aetherspace/navigation/useRouteParams/useRouteParams.ts b/packages/@aetherspace/navigation/useRouteParams/useRouteParams.ts
@@ -1,5 +1,4 @@
 import { useSearchParams } from 'expo-router'
-// Types
 import { RoutePropsType } from './useRouteParams.types'
 
 /** --- useRouteParams() ----------------------------------------------------------------------- */
diff --git a/packages/@aetherspace/navigation/useRouteParams/useRouteParams.web.ts b/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 }
diff --git a/packages/@aetherspace/scripts/link-routes.ts b/packages/@aetherspace/scripts/link-routes.ts
@@ -106,6 +106,7 @@ const linkRoutes = () => {
       const { workspacePackageName, routeParts, nextExports, expoExports, screenComponentName } = parsePath(pth) // prettier-ignore
       const routeSegments = routeParts.split('index.ts')[0]
       if (screenComponentName) routeManifest[routeSegments] = screenComponentName
+      // if (!['SignUpScreen', 'SignInScreen', 'UserInfoScreen'].includes(screenComponentName)) {
       const importPath = `${workspacePackageName}/routes${routeSegments}index`
       const expoExportLine = `${genMsg}\nexport { ${expoExports.join(', ')} } from '${importPath}'\n` // prettier-ignore
       const nextExportLine = `'use client'\nexport { ${nextExports.join(', ')} } from '${importPath}'\n` // prettier-ignore
@@ -116,6 +117,9 @@ const linkRoutes = () => {
       fs.mkdirSync(`../../apps/next/app/(generated)${routeSegments}`, { recursive: true })
       fs.writeFileSync(`../../apps/next/app/(generated)${routeSegments}page.tsx`, nextExportLine)
       console.log(`      └── /apps/next/app/(generated)${routeSegments}page.tsx`)
+      // } else {
+      //   console.log(` ✅ ${routeSegments}   -- Ignored "${pth}"`)
+      // }
     })
     // Reexport fs based slug routing in next & expo app dirs
     paramRoutes.forEach((pth) => {
diff --git a/patches/@clerk+nextjs+4.29.1.patch b/patches/@clerk+nextjs+4.29.1.patch
@@ -0,0 +1,38 @@
+diff --git a/node_modules/@clerk/nextjs/dist/cjs/app-router/client/ClerkProvider.js b/node_modules/@clerk/nextjs/dist/cjs/app-router/client/ClerkProvider.js
+index 4f25392..b77dacc 100644
+--- a/node_modules/@clerk/nextjs/dist/cjs/app-router/client/ClerkProvider.js
++++ b/node_modules/@clerk/nextjs/dist/cjs/app-router/client/ClerkProvider.js
+@@ -38,11 +38,12 @@ var import_react = __toESM(require("react"));
+ var import_NextOptionsContext = require("../../client-boundary/NextOptionsContext");
+ var import_useSafeLayoutEffect = require("../../client-boundary/useSafeLayoutEffect");
+ var import_mergeNextClerkPropsWithEnv = require("../../utils/mergeNextClerkPropsWithEnv");
+-var import_useAwaitableNavigate = require("./useAwaitableNavigate");
++// var import_useAwaitableNavigate = require("./useAwaitableNavigate");
+ const ClientClerkProvider = (props) => {
+   const { __unstable_invokeMiddlewareOnAuthStateChange = true } = props;
+   const router = (0, import_navigation.useRouter)();
+-  const navigate = (0, import_useAwaitableNavigate.useAwaitableNavigate)();
++  // const navigate = (0, import_useAwaitableNavigate.useAwaitableNavigate)();
++  const navigate = router.push;
+   (0, import_useSafeLayoutEffect.useSafeLayoutEffect)(() => {
+     window.__unstable__onBeforeSetActive = () => {
+       if (__unstable_invokeMiddlewareOnAuthStateChange) {
+diff --git a/node_modules/@clerk/nextjs/dist/esm/app-router/client/ClerkProvider.js b/node_modules/@clerk/nextjs/dist/esm/app-router/client/ClerkProvider.js
+index 79a81db..7a5ba43 100644
+--- a/node_modules/@clerk/nextjs/dist/esm/app-router/client/ClerkProvider.js
++++ b/node_modules/@clerk/nextjs/dist/esm/app-router/client/ClerkProvider.js
+@@ -5,11 +5,12 @@ import React from "react";
+ import { ClerkNextOptionsProvider } from "../../client-boundary/NextOptionsContext";
+ import { useSafeLayoutEffect } from "../../client-boundary/useSafeLayoutEffect";
+ import { mergeNextClerkPropsWithEnv } from "../../utils/mergeNextClerkPropsWithEnv";
+-import { useAwaitableNavigate } from "./useAwaitableNavigate";
++// import { useAwaitableNavigate } from "./useAwaitableNavigate";
+ const ClientClerkProvider = (props) => {
+   const { __unstable_invokeMiddlewareOnAuthStateChange = true } = props;
+   const router = useRouter();
+-  const navigate = useAwaitableNavigate();
++  // const navigate = useAwaitableNavigate();
++  const navigate = router.push;
+   useSafeLayoutEffect(() => {
+     window.__unstable__onBeforeSetActive = () => {
+       if (__unstable_invokeMiddlewareOnAuthStateChange) {
