zack3d/big-agi
1
0
Fork 0
mirror of https://github.com/enricoros/big-AGI.git synced 2026-05-10 21:50:14 -07:00
Code Issues Packages Projects Releases Wiki Activity

Deflate bundle by reverting to per-page Layouts (keep the typings at least)

Browse Source
This commit is contained in:
Enrico Ros
2023-12-26 01:11:21 -08:00
parent 2f45ce48fa
commit a5332d2c82
12 changed files with 63 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_app.tsx
+3 -16
View File
@@ -10,8 +10,6 @@ import 'katex/dist/katex.min.css';
import '~/common/styles/CodePrism.css';
import '~/common/styles/GithubMarkdown.css';
import { OptimaLayout } from '~/common/layout/optima/OptimaLayout';
import { PlainLayout } from '~/common/layout/plain/PlainLayout';
import { ProviderBackendAndNoSSR } from '~/common/state/ProviderBackendAndNoSSR';
import { ProviderSingleTab } from '~/common/state/ProviderSingleTab';
import { ProviderSnacks } from '~/common/state/ProviderSnacks';
@@ -19,16 +17,8 @@ import { ProviderTRPCQueryClient } from '~/common/state/ProviderTRPCQueryClient'
import { ProviderTheming } from '~/common/state/ProviderTheming';
const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) => {
// [dynamic page-level layouting] based on the the layoutOptions.type property of the Component
const { layoutOptions } = Component;
const LayoutComponent =
layoutOptions?.type === 'optima' ? OptimaLayout
: layoutOptions?.type === 'plain' ? PlainLayout
: (props: { children?: React.ReactNode }) => props.children; // this is here for the /404, /500, etc. pages
return <>
const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) =>
<>
<Head>
<title>{Brand.Title.Common}</title>
@@ -40,9 +30,7 @@ const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) => {
<ProviderTRPCQueryClient>
<ProviderSnacks>
<ProviderBackendAndNoSSR>
<LayoutComponent {...layoutOptions}>
<Component {...pageProps} />
</LayoutComponent>
<Component {...pageProps} />
</ProviderBackendAndNoSSR>
</ProviderSnacks>
</ProviderTRPCQueryClient>
@@ -52,7 +40,6 @@ const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) => {
<VercelAnalytics debug={false} />
</>;
};
// enables the React Query API invocation
export default apiQuery.withTRPC(MyApp);
pages/_document.tsx
-2
View File
@@ -93,10 +93,8 @@ MyDocument.getInitialProps = async (ctx: DocumentContext) => {
ctx.renderPage = () =>
originalRenderPage({
// @ts-ignore Inored since we added the 'layoutOptions' property to the Component
enhanceApp: (App: React.ComponentType<React.ComponentProps<AppType> & MyAppProps>) =>
function EnhanceApp(props) {
// @ts-ignore Inored since we added the 'layoutOptions' property to the Component
return <App emotionCache={cache} {...props} />;
},
});
pages/call.tsx
+3 -4
View File
@@ -2,10 +2,9 @@ import * as React from 'react';
import { AppCall } from '../src/apps/call/AppCall';
import type { LayoutOptions } from '~/common/layout/LayoutOptions';
import { withLayout } from '~/common/layout/withLayout';
export default function CallPage() {
return <AppCall />;
}
CallPage.layoutOptions = { type: 'optima' } satisfies LayoutOptions;
return withLayout({ type: 'optima' }, <AppCall />);
}
pages/index.tsx
+3 -4
View File
@@ -3,13 +3,12 @@ import * as React from 'react';
import { AppChat } from '../src/apps/chat/AppChat';
import { useRedirectToNewsOnUpdates } from '../src/apps/news/news.hooks';
import type { LayoutOptions } from '~/common/layout/LayoutOptions';
import { withLayout } from '~/common/layout/withLayout';
export default function ChatPage() {
// show the News page if there are unseen updates
useRedirectToNewsOnUpdates();
return <AppChat />;
}
ChatPage.layoutOptions = { type: 'optima' } satisfies LayoutOptions;
return withLayout({ type: 'optima' }, <AppChat />);
}
pages/link/callback_openrouter.tsx
+5 -5
View File
@@ -3,13 +3,14 @@ import { useRouter } from 'next/router';
import { Box, Typography } from '@mui/joy';
import type { LayoutOptions } from '~/common/layout/LayoutOptions';
import { useModelsStore } from '~/modules/llms/store-llms';
import { InlineError } from '~/common/components/InlineError';
import { apiQuery } from '~/common/util/trpc.client';
import { navigateToIndex } from '~/common/app.routes';
import { openLayoutModelsSetup } from '~/common/layout/store-applayout';
import { themeBgApp } from '~/common/app.theme';
import { useModelsStore } from '~/modules/llms/store-llms';
import { withLayout } from '~/common/layout/withLayout';
function CallbackOpenRouterPage(props: { openRouterCode: string | undefined }) {
@@ -90,6 +91,5 @@ export default function CallbackPage() {
const { query } = useRouter();
const { code: openRouterCode } = query;
return <CallbackOpenRouterPage openRouterCode={openRouterCode as (string | undefined)} />;
}
CallbackPage.layoutOptions = { type: 'plain' } satisfies LayoutOptions;
return withLayout({ type: 'plain' }, <CallbackOpenRouterPage openRouterCode={openRouterCode as (string | undefined)} />);
}
pages/link/chat/[chatLinkId].tsx
+3 -4
View File
@@ -3,13 +3,12 @@ import { useRouter } from 'next/router';
import { AppChatLink } from '../../../src/apps/link/AppChatLink';
import type { LayoutOptions } from '~/common/layout/LayoutOptions';
import { withLayout } from '~/common/layout/withLayout';
export default function ChatLinkPage() {
const { query } = useRouter();
const chatLinkId = query?.chatLinkId as string ?? '';
return <AppChatLink linkId={chatLinkId} />;
}
ChatLinkPage.layoutOptions = { type: 'optima', suspendAutoModelsSetup: true } satisfies LayoutOptions;
return withLayout({ type: 'optima', suspendAutoModelsSetup: true }, <AppChatLink linkId={chatLinkId} />);
}
pages/link/share_target.tsx
+3 -4
View File
@@ -8,11 +8,11 @@ import { setComposerStartupText } from '../../src/apps/chat/components/composer/
import { callBrowseFetchPage } from '~/modules/browse/browse.client';
import type { LayoutOptions } from '~/common/layout/LayoutOptions';
import { LogoProgress } from '~/common/components/LogoProgress';
import { asValidURL } from '~/common/util/urlUtils';
import { navigateToIndex } from '~/common/app.routes';
import { themeBgApp } from '~/common/app.theme';
import { withLayout } from '~/common/layout/withLayout';
/**
@@ -134,6 +134,5 @@ function AppShareTarget() {
* Example URL: https://localhost:3000/link/share_target?title=This+Title&text=https%3A%2F%2Fexample.com%2Fapp%2Fpath
*/
export default function ShareTargetPage() {
return <AppShareTarget />;
}
ShareTargetPage.layoutOptions = { type: 'plain' } satisfies LayoutOptions;
return withLayout({ type: 'plain' }, <AppShareTarget />);
}
pages/news.tsx
+3 -4
View File
@@ -3,13 +3,12 @@ import * as React from 'react';
import { AppNews } from '../src/apps/news/AppNews';
import { useMarkNewsAsSeen } from '../src/apps/news/news.hooks';
import type { LayoutOptions } from '~/common/layout/LayoutOptions';
import { withLayout } from '~/common/layout/withLayout';
export default function NewsPage() {
// 'touch' the last seen news version
useMarkNewsAsSeen();
return <AppNews />;
}
NewsPage.layoutOptions = { type: 'optima', suspendAutoModelsSetup: true } satisfies LayoutOptions;
return withLayout({ type: 'optima', suspendAutoModelsSetup: true }, <AppNews />);
}
pages/personas.tsx
+3 -5
View File
@@ -2,11 +2,9 @@ import * as React from 'react';
import { AppPersonas } from '../src/apps/personas/AppPersonas';
import type { LayoutOptions } from '~/common/layout/LayoutOptions';
import { withLayout } from '~/common/layout/withLayout';
export default function PersonasPage() {
return <AppPersonas />;
}
PersonasPage.layoutOptions = { type: 'optima' } satisfies LayoutOptions;
return withLayout({ type: 'optima' }, <AppPersonas />);
}
src/common/layout/LayoutOptions.ts
-7
View File
@@ -1,7 +0,0 @@
export type LayoutOptions = {
type: 'optima';
noAppBar?: boolean;
suspendAutoModelsSetup?: boolean;
} | {
type: 'plain';
};
src/common/layout/withLayout.tsx
+32
View File
@@ -0,0 +1,32 @@
import * as React from 'react';
import { OptimaLayout } from './optima/OptimaLayout';
import { PlainLayout } from './plain/PlainLayout';
type WithLayout = {
type: 'optima';
noAppBar?: boolean;
suspendAutoModelsSetup?: boolean;
} | {
type: 'plain';
};
/**
* A wrapper that adds a layout around the children.
*/
export function withLayout(layoutOptions: WithLayout, children: React.ReactNode): React.ReactElement {
// [dynamic page-level layouting] based on the the layoutOptions.type property of the Component
const LayoutComponent =
layoutOptions?.type === 'optima' ? OptimaLayout
: layoutOptions?.type === 'plain' ? PlainLayout
: (props: { children?: React.ReactNode }) => props.children; // this is here for the /404, /500, etc. pages
return (
<LayoutComponent {...layoutOptions}>
{children}
</LayoutComponent>
);
}
src/common/types/next.page.d.ts
Vendored
+5 -8
View File
@@ -1,20 +1,17 @@
import type { NextPage } from 'next';
import type { EmotionCache } from '@emotion/react';
import type { LayoutOptions } from '~/common/layout/LayoutOptions';
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
// require .layoutOptions on the page component
layoutOptions: LayoutOptions;
};
// export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
// // require .layoutOptions on the page component
// layoutOptions: LayoutOptions;
// };
// Extend the AppProps type with the custom page component type
declare module 'next/app' {
import { AppProps } from 'next/app';
type MyAppProps = AppProps & {
Component: NextPageWithLayout;
// Component: NextPageWithLayout;
emotionCache?: EmotionCache;
};
}