Skip to content

Commit b4cdc94

Browse files
codinsonncodinsonn
committed
chore: Debug AetherPage SSR
1 parent 3a870b8 commit b4cdc94

File tree

24 files changed

+84
-19
lines changed

24 files changed

+84
-19
lines changed

‎apps/next/next.config.js

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ const nextConfig = {
7070
images: {
7171
domains: ['i3.ytimg.com'],
7272
},
73-
webpack: (config, { isServer }) => {
73+
webpack: (config, { dev, isServer }) => {
7474
// -i- Run aetherspace automation scripts in DEV mode
7575
if (!isServer && process.env.NODE_ENV === 'development') withAutomation()
7676
// Enable top level await in API handlers
@@ -87,6 +87,20 @@ const nextConfig = {
8787
config.plugins.push(new FilterWarningsPlugin({
8888
exclude: [/the request of a dependency is an expression/],
8989
}))
90+
// Uncomment these lines to debug with console logs during `next build`
91+
if (!dev && !isServer) {
92+
config.optimization.minimizer = config.optimization.minimizer.map(plugin => {
93+
if (plugin.constructor.name === 'TerserPlugin') {
94+
plugin.options.terserOptions = {
95+
...plugin.options.terserOptions,
96+
// Prevent discarding or mangling of console statements
97+
compress: { ...plugin.options.terserOptions.compress, drop_console: false },
98+
mangle: { ...plugin.options.terserOptions.mangle, reserved: ['console'] },
99+
}
100+
}
101+
return plugin;
102+
})
103+
}
90104
// Return config
91105
return config
92106
},

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { AetherPage } from 'aetherspace/navigation'
2+
import { AetherPage } from 'aetherspace/navigation/AetherPage'
33
import * as bioScreen from 'links-page/screens/BioScreen'
44
import { userBioMock } from 'links-page/mocks/userBio.mock'
55

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { AetherPage } from 'aetherspace/navigation'
2+
import { AetherPage } from 'aetherspace/navigation/AetherPage'
33
import * as ResumeScreen from 'cv-page/screens/ResumeScreen'
44
import { dummyResumeData } from 'cv-page/mocks/resumeData.mock'
55

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { AetherPage } from 'aetherspace/navigation'
2+
import { AetherPage } from 'aetherspace/navigation/AetherPage'
33
import * as bioScreen from 'links-page/screens/BioScreen'
44
import { userBioMock } from 'links-page/mocks/userBio.mock'
55

‎features/app-core/routes/layout.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
'use client'
2-
import React from 'react'
2+
import React /*, { Suspense } */ from 'react'
33
import ErrorBoundary from '../screens/ErrorBoundary'
44
import { View } from 'aetherspace/primitives'
55
import { AetherClerkProvider } from '@aetherspace/clerk-auth/context/ClerkProvider'
@@ -8,9 +8,11 @@ import { AetherClerkProvider } from '@aetherspace/clerk-auth/context/ClerkProvid
88

99
const RootLayout = ({ children }: { children: React.ReactNode }) => (
1010
<ErrorBoundary>
11+
{/* <Suspense fallback={<View tw="flex flex-col min-h-full w-full">{children}</View>}> */}
1112
<AetherClerkProvider>
1213
<View tw="flex flex-col min-h-full w-full">{children}</View>
1314
</AetherClerkProvider>
15+
{/* </Suspense> */}
1416
</ErrorBoundary>
1517
)
1618

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { AetherPage } from 'aetherspace/navigation'
2+
import { AetherPage } from 'aetherspace/navigation/AetherPage'
33
import * as bioScreen from 'links-page/screens/BioScreen'
44
import { userBioMock } from 'links-page/mocks/userBio.mock'
55

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { AetherPage } from 'aetherspace/navigation'
2+
import { AetherPage } from 'aetherspace/navigation/AetherPage'
33
import * as ResumeScreen from 'cv-page/screens/ResumeScreen'
44
import { dummyResumeData } from 'cv-page/mocks/resumeData.mock'
55

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
// Navigation
3-
import { AetherPage } from 'aetherspace/navigation'
3+
import { AetherPage } from 'aetherspace/navigation/AetherPage'
44
// Screens
55
import * as UpdateResumeScreen from '../../../../screens/UpdateResumeScreen'
66

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
// Navigation
3-
import { AetherPage } from 'aetherspace/navigation'
3+
import { AetherPage } from 'aetherspace/navigation/AetherPage'
44
// Screens
55
import * as ResumeScreen from '../../../screens/ResumeScreen'
66

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { AetherPage } from 'aetherspace/navigation'
2+
import { AetherPage } from 'aetherspace/navigation/AetherPage'
33
import * as ResumeScreen from '../../../screens/ResumeScreen'
44

55
/* --- Config ---------------------------------------------------------------------------------- */

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
// Navigation
3-
import { AetherPage } from 'aetherspace/navigation'
3+
import { AetherPage } from 'aetherspace/navigation/AetherPage'
44
// Screens
55
import * as bioScreen from '../../screens/BioScreen'
66

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { AetherPage } from 'aetherspace/navigation'
2+
import { AetherPage } from 'aetherspace/navigation/AetherPage'
33
import * as UserInfoScreen from '../../screens/UserInfoScreen'
44

55
/* --- Config ---------------------------------------------------------------------------------- */

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { AetherPage } from 'aetherspace/navigation'
2+
import { AetherPage } from 'aetherspace/navigation/AetherPage'
33
import * as SignInScreen from '../../screens/SignInScreen'
44

55
/* --- Config ---------------------------------------------------------------------------------- */

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { AetherPage } from 'aetherspace/navigation'
2+
import { AetherPage } from 'aetherspace/navigation/AetherPage'
33
import * as signUpScreen from '../../screens/SignUpScreen'
44

55
/* --- Config ---------------------------------------------------------------------------------- */

‎features/user-management/screens/SignUpScreen.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
'use client'
12
import React from 'react'
23
import { Text, View } from 'aetherspace/primitives'
34
import { TextInput, Button } from 'aetherspace/forms'

‎packages/@aetherspace-clerk-auth/context/ClerkProvider.web.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
'use client'
12
import React, { useMemo } from 'react'
23
import { ClerkProvider } from '@clerk/nextjs'
34
import type { ClerkProviderProps } from './ClerkProvider.types'

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Middleware } from 'swr'
22
import { getEnvList, getEnvVar, getGlobal, setGlobal } from 'aetherspace/utils'
3-
import { AetherFetcherOptions } from 'aetherspace/navigation'
3+
import type { AetherFetcherOptions } from 'aetherspace/navigation'
44
import axios from 'axios'
55

66
/** --- swrClerkAuthMiddleware() --------------------------------------------------------------- */

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { AetherPage } from 'aetherspace/navigation'
2+
import { AetherPage } from 'aetherspace/navigation/AetherPage'
33
import * as {{screenName}} from '{{screenImportPath}}'
44

55
/* --- Config ---------------------------------------------------------------------------------- */

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { AetherPage } from 'aetherspace/navigation'
2+
import { AetherPage } from 'aetherspace/navigation/AetherPage'
33
import * as {{screenModuleName}} from '{{screenImportPath}}'
44

55
/* --- Config ---------------------------------------------------------------------------------- */

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@ export const AetherPage = <SC extends AetherScreenConfig>(props: AetherPageProps
5656
const fallback = hydrationData ? { [fallbackKey]: hydrationData } : {}
5757
const renderHydrationData = !!hydrationData && !hydratedData // Only render the hydration data if it's not already in state
5858

59+
console.warn('AetherPage (Client)', 1, { hydrationData })
60+
5961
return (
6062
<SWRConfig value={{ use: [swrClerkAuthMiddleware], fallback }}>
6163
{renderHydrationData && <div id="ssr-data" data-ssr={JSON.stringify(hydrationData)} />}
@@ -66,8 +68,12 @@ export const AetherPage = <SC extends AetherScreenConfig>(props: AetherPageProps
6668

6769
// -- Server --
6870

71+
console.warn('AetherPage (SSR)', 1)
72+
6973
const ssrData = use(getGraphqlData(graphqlQuery, { variables }))
7074

75+
console.warn('AetherPage (SSR)', 2, { ssrData })
76+
7177
return (
7278
<SWRConfig value={{ use: [swrClerkAuthMiddleware], fallback: { [fallbackKey]: ssrData } }}>
7379
{!!ssrData && <div id="ssr-data" data-ssr={JSON.stringify(ssrData)} />}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useSearchParams } from 'expo-router'
2-
// Types
32
import { RoutePropsType } from './useRouteParams.types'
43

54
/** --- useRouteParams() ----------------------------------------------------------------------- */

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { useSearchParams } from 'next/navigation'
2-
// Types
32
import { RoutePropsType } from './useRouteParams.types'
43

54
/** --- useRouteParams() ----------------------------------------------------------------------- */
65
/** -i- Get the route params from the expo (mobile) or next (web) router */
76
export const useRouteParams = (props: Partial<RoutePropsType>) => {
87
const routeParams = props.params || {}
8+
console.error('-!- useRouteParams(web) -!-', { routeParams })
99
const search = useSearchParams()
1010
const searchParams = Object.fromEntries(search.entries())
1111
const params = { ...routeParams, ...searchParams }

‎packages/@aetherspace/scripts/link-routes.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ const linkRoutes = () => {
106106
const { workspacePackageName, routeParts, nextExports, expoExports, screenComponentName } = parsePath(pth) // prettier-ignore
107107
const routeSegments = routeParts.split('index.ts')[0]
108108
if (screenComponentName) routeManifest[routeSegments] = screenComponentName
109+
// if (!['SignUpScreen', 'SignInScreen', 'UserInfoScreen'].includes(screenComponentName)) {
109110
const importPath = `${workspacePackageName}/routes${routeSegments}index`
110111
const expoExportLine = `${genMsg}\nexport { ${expoExports.join(', ')} } from '${importPath}'\n` // prettier-ignore
111112
const nextExportLine = `'use client'\nexport { ${nextExports.join(', ')} } from '${importPath}'\n` // prettier-ignore
@@ -116,6 +117,9 @@ const linkRoutes = () => {
116117
fs.mkdirSync(`../../apps/next/app/(generated)${routeSegments}`, { recursive: true })
117118
fs.writeFileSync(`../../apps/next/app/(generated)${routeSegments}page.tsx`, nextExportLine)
118119
console.log(` └── /apps/next/app/(generated)${routeSegments}page.tsx`)
120+
// } else {
121+
// console.log(` ✅ ${routeSegments} -- Ignored "${pth}"`)
122+
// }
119123
})
120124
// Reexport fs based slug routing in next & expo app dirs
121125
paramRoutes.forEach((pth) => {

‎patches/@clerk+nextjs+4.29.1.patch

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
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
2+
index 4f25392..b77dacc 100644
3+
--- a/node_modules/@clerk/nextjs/dist/cjs/app-router/client/ClerkProvider.js
4+
+++ b/node_modules/@clerk/nextjs/dist/cjs/app-router/client/ClerkProvider.js
5+
@@ -38,11 +38,12 @@ var import_react = __toESM(require("react"));
6+
var import_NextOptionsContext = require("../../client-boundary/NextOptionsContext");
7+
var import_useSafeLayoutEffect = require("../../client-boundary/useSafeLayoutEffect");
8+
var import_mergeNextClerkPropsWithEnv = require("../../utils/mergeNextClerkPropsWithEnv");
9+
-var import_useAwaitableNavigate = require("./useAwaitableNavigate");
10+
+// var import_useAwaitableNavigate = require("./useAwaitableNavigate");
11+
const ClientClerkProvider = (props) => {
12+
const { __unstable_invokeMiddlewareOnAuthStateChange = true } = props;
13+
const router = (0, import_navigation.useRouter)();
14+
- const navigate = (0, import_useAwaitableNavigate.useAwaitableNavigate)();
15+
+ // const navigate = (0, import_useAwaitableNavigate.useAwaitableNavigate)();
16+
+ const navigate = router.push;
17+
(0, import_useSafeLayoutEffect.useSafeLayoutEffect)(() => {
18+
window.__unstable__onBeforeSetActive = () => {
19+
if (__unstable_invokeMiddlewareOnAuthStateChange) {
20+
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
21+
index 79a81db..7a5ba43 100644
22+
--- a/node_modules/@clerk/nextjs/dist/esm/app-router/client/ClerkProvider.js
23+
+++ b/node_modules/@clerk/nextjs/dist/esm/app-router/client/ClerkProvider.js
24+
@@ -5,11 +5,12 @@ import React from "react";
25+
import { ClerkNextOptionsProvider } from "../../client-boundary/NextOptionsContext";
26+
import { useSafeLayoutEffect } from "../../client-boundary/useSafeLayoutEffect";
27+
import { mergeNextClerkPropsWithEnv } from "../../utils/mergeNextClerkPropsWithEnv";
28+
-import { useAwaitableNavigate } from "./useAwaitableNavigate";
29+
+// import { useAwaitableNavigate } from "./useAwaitableNavigate";
30+
const ClientClerkProvider = (props) => {
31+
const { __unstable_invokeMiddlewareOnAuthStateChange = true } = props;
32+
const router = useRouter();
33+
- const navigate = useAwaitableNavigate();
34+
+ // const navigate = useAwaitableNavigate();
35+
+ const navigate = router.push;
36+
useSafeLayoutEffect(() => {
37+
window.__unstable__onBeforeSetActive = () => {
38+
if (__unstable_invokeMiddlewareOnAuthStateChange) {

0 commit comments

Comments
 (0)