From e72a33511f03dff96a10625fd913e5fcb8e0e7d1 Mon Sep 17 00:00:00 2001 From: Pedro Pupo Sa da Costa Date: Sun, 19 Nov 2023 08:08:37 +0000 Subject: [PATCH 1/2] chore: reduce js on first load --- apps/next-app/.eslintrc.json | 3 +- apps/next-app/pages/_app.page.tsx | 22 ++++++++++----- libs/react/analytics/src/use-analytics.tsx | 33 +++++++++++++--------- tsconfig.base.json | 2 ++ 4 files changed, 38 insertions(+), 22 deletions(-) diff --git a/apps/next-app/.eslintrc.json b/apps/next-app/.eslintrc.json index 50104f0d3..875ea88f5 100644 --- a/apps/next-app/.eslintrc.json +++ b/apps/next-app/.eslintrc.json @@ -11,7 +11,8 @@ { "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], "rules": { - "@next/next/no-html-link-for-pages": ["error", "apps/next-app/pages"] + "@next/next/no-html-link-for-pages": ["error", "apps/next-app/pages"], + "@nrwl/nx/enforce-module-boundaries": ["off"] } }, { diff --git a/apps/next-app/pages/_app.page.tsx b/apps/next-app/pages/_app.page.tsx index 04e901261..3cd7749a4 100644 --- a/apps/next-app/pages/_app.page.tsx +++ b/apps/next-app/pages/_app.page.tsx @@ -1,11 +1,11 @@ import React, { StrictMode } from "react"; +import { default as dynamic } from "next/dynamic"; import { default as Head } from "next/head"; -import { NoSsr } from "@mui/base"; import { CssBaseline, CssVarsProvider } from "@mui/joy"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { AnalyticsProvider } from "@chair-flight/react/analytics"; -import { StopResizeAnimation, Toaster } from "@chair-flight/react/components"; -import { AppTransition, theme } from "@chair-flight/react/containers"; +import { StopResizeAnimation } from "@chair-flight/react/components"; +import { theme } from "@chair-flight/react/containers"; import { trpc } from "@chair-flight/trpc/client"; import type { DefaultColorScheme } from "@mui/joy/styles/types"; import type { AppProps } from "next/app"; @@ -16,6 +16,16 @@ if (typeof document === "undefined") { React.useLayoutEffect = React.useEffect; } +const DynamicToaster = dynamic( + () => import("@chair-flight/react/components").then((m) => m.Toaster), + { loading: () => null, ssr: false }, +); + +const DynamicAppTransition = dynamic( + () => import("@chair-flight/react/containers").then((m) => m.AppTransition), + { loading: () => null, ssr: false }, +); + const App: FunctionComponent = ({ Component, pageProps }) => { return ( @@ -32,10 +42,8 @@ const App: FunctionComponent = ({ Component, pageProps }) => { - - - - + + diff --git a/libs/react/analytics/src/use-analytics.tsx b/libs/react/analytics/src/use-analytics.tsx index 2bb23fc47..e2a9060f9 100644 --- a/libs/react/analytics/src/use-analytics.tsx +++ b/libs/react/analytics/src/use-analytics.tsx @@ -1,5 +1,4 @@ -import { createContext, useContext, useState } from "react"; -import { default as Analytics } from "analytics"; +import { createContext, useContext, useEffect, useState } from "react"; import { useAnalyticsPlugin } from "./use-analytics-plugin"; import type { TrackEventName, @@ -8,21 +7,27 @@ import type { import type { AnalyticsInstance } from "analytics"; import type { FunctionComponent, PropsWithChildren } from "react"; -const analyticsContext = createContext( - null as unknown as AnalyticsInstance, -); +const analyticsContext = createContext(null); export const AnalyticsProvider: FunctionComponent = ({ children, }) => { const plugin = useAnalyticsPlugin(); - const [analytics] = useState(() => - Analytics({ - app: "chair-flight", - version: "1", - plugins: [plugin], - }), - ); + const [analytics, setAnalytics] = useState(null); + + useEffect(() => { + (async () => { + const Analytics = (await import("analytics")).default; + setAnalytics( + Analytics({ + app: "chair-flight", + version: "1", + plugins: [plugin], + }), + ); + })(); + }, [plugin]); + return ( {children} @@ -35,14 +40,14 @@ export const useAnalytics = () => { return { page: () => { - analytics.page(); + analytics?.page(); }, track: ( name: T, payload: TrackEventPayload = {}, ) => { - analytics.track(name, payload); + analytics?.track(name, payload); }, }; }; diff --git a/tsconfig.base.json b/tsconfig.base.json index 99cea7490..04362f15f 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -39,7 +39,9 @@ "@chair-flight/core/github": ["libs/core/github/src/index.ts"], "@chair-flight/react/analytics": ["libs/react/analytics/src/index.ts"], "@chair-flight/react/components": ["libs/react/components/src/index.ts"], + "@chair-flight/react/components/toaster": ["libs/react/components/src/toaster/index.ts"], "@chair-flight/react/containers": ["libs/react/containers/src/index.ts"], + "@chair-flight/react/containers/app-transition": ["libs/react/containers/src/app/app-transition/index.ts"], "@chair-flight/react/games": ["libs/react/games/src/index.ts"], "@chair-flight/trpc/client": ["libs/trpc/client/src/index.ts"], "@chair-flight/trpc/mock": ["libs/trpc/mock/src/index.ts"], From 93b89055ad7d1205b5c312f40440faf56e5d243a Mon Sep 17 00:00:00 2001 From: PupoSDC Date: Sun, 19 Nov 2023 08:24:47 +0000 Subject: [PATCH 2/2] Update tsconfig.base.json --- tsconfig.base.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/tsconfig.base.json b/tsconfig.base.json index 04362f15f..99cea7490 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -39,9 +39,7 @@ "@chair-flight/core/github": ["libs/core/github/src/index.ts"], "@chair-flight/react/analytics": ["libs/react/analytics/src/index.ts"], "@chair-flight/react/components": ["libs/react/components/src/index.ts"], - "@chair-flight/react/components/toaster": ["libs/react/components/src/toaster/index.ts"], "@chair-flight/react/containers": ["libs/react/containers/src/index.ts"], - "@chair-flight/react/containers/app-transition": ["libs/react/containers/src/app/app-transition/index.ts"], "@chair-flight/react/games": ["libs/react/games/src/index.ts"], "@chair-flight/trpc/client": ["libs/trpc/client/src/index.ts"], "@chair-flight/trpc/mock": ["libs/trpc/mock/src/index.ts"],