Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-21 20:16:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: migrate environment to BUILD_CONFIG (#8206)

Browse Source
This commit is contained in:
forehalo
2024-09-13 07:58:20 +00:00
parent 561f96bb71
commit a387e4ac07
90 changed files with 297 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/core/src/components/affine/app-container.tsx
+17 -7
View File
@@ -2,7 +2,7 @@ import clsx from 'clsx';
import type { PropsWithChildren, ReactElement } from 'react';
import { useAppSettingHelper } from '../../hooks/affine/use-app-setting-helper';
import { AppSidebarFallback } from '../app-sidebar';
import { AppSidebarFallback, ShellAppSidebarFallback } from '../app-sidebar';
import type { WorkspaceRootProps } from '../workspace';
import {
AppContainer as AppContainerWithoutSettings,
@@ -16,11 +16,7 @@ export const AppContainer = (props: WorkspaceRootProps) => {
return (
<AppContainerWithoutSettings
useNoisyBackground={appSettings.enableNoisyBackground}
useBlurBackground={
appSettings.enableBlurBackground &&
environment.isElectron &&
environment.isMacOs
}
useBlurBackground={appSettings.enableBlurBackground}
{...props}
/>
);
@@ -36,7 +32,7 @@ export const AppFallback = ({
<AppContainer
className={clsx(
className,
environment.isElectron && styles.electronFallback
BUILD_CONFIG.isElectron && styles.electronFallback
)}
>
<AppSidebarFallback />
@@ -44,3 +40,17 @@ export const AppFallback = ({
</AppContainer>
);
};
export const ShellAppFallback = ({
className,
children,
}: PropsWithChildren<{
className?: string;
}>): ReactElement => {
return (
<AppContainer className={className}>
<ShellAppSidebarFallback />
<MainContainerFallback>{children}</MainContainerFallback>
</AppContainer>
);
};
packages/frontend/core/src/components/affine/auth/oauth.tsx
+2 -2
View File
@@ -50,10 +50,10 @@ function OAuthProvider({ provider }: { provider: OAuthProviderType }) {
const onClick = useCallback(() => {
let oauthUrl =
(environment.isElectron ? BUILD_CONFIG.serverUrlPrefix : '') +
(BUILD_CONFIG.isElectron ? BUILD_CONFIG.serverUrlPrefix : '') +
`/oauth/login?provider=${provider}`;
if (environment.isElectron) {
if (BUILD_CONFIG.isElectron) {
oauthUrl += `&client=${appInfo?.schema}`;
}
packages/frontend/core/src/components/affine/auth/send-email.tsx
+1 -1
View File
@@ -122,7 +122,7 @@ const useSendEmail = (emailType: AuthPanelProps<'sendEmail'>['emailType']) => {
return trigger({
email,
callbackUrl: `/auth/${callbackUrl}?isClient=${
environment.isElectron ? 'true' : 'false'
BUILD_CONFIG.isElectron ? 'true' : 'false'
}`,
});
},
packages/frontend/core/src/components/affine/auth/use-captcha.tsx
+5 -5
View File
@@ -14,7 +14,7 @@ type Challenge = {
};
const challengeFetcher = async (url: string) => {
if (!environment.isElectron) {
if (!BUILD_CONFIG.isElectron) {
return undefined;
}
@@ -31,7 +31,7 @@ const challengeFetcher = async (url: string) => {
};
const generateChallengeResponse = async (challenge: string) => {
if (!environment.isElectron) {
if (!BUILD_CONFIG.isElectron) {
return undefined;
}
@@ -56,7 +56,7 @@ export const Captcha = () => {
return null;
}
if (environment.isElectron) {
if (BUILD_CONFIG.isElectron) {
if (response) {
return <div className={style.captchaWrapper}>Making Challenge</div>;
} else {
@@ -86,8 +86,8 @@ export const useCaptcha = (): [string | undefined, string?] => {
useEffect(() => {
if (
BUILD_CONFIG.isElectron &&
hasCaptchaFeature &&
environment.isElectron &&
challenge?.challenge &&
prevChallenge.current !== challenge.challenge
) {
@@ -104,7 +104,7 @@ export const useCaptcha = (): [string | undefined, string?] => {
return ['XXXX.DUMMY.TOKEN.XXXX'];
}
if (environment.isElectron) {
if (BUILD_CONFIG.isElectron) {
if (response) {
return [response, challenge?.challenge];
} else {
packages/frontend/core/src/components/affine/empty/action-button.tsx
+2 -2
View File
@@ -17,11 +17,11 @@ export const ActionButton = ({
<Button
size="large"
className={clsx(
environment.isMobileEdition ? mobileActionButton : actionButton,
BUILD_CONFIG.isMobileEdition ? mobileActionButton : actionButton,
className
)}
contentClassName={clsx(
environment.isMobileEdition ? mobileActionContent : actionContent,
BUILD_CONFIG.isMobileEdition ? mobileActionContent : actionContent,
contentClassName
)}
{...props}
packages/frontend/core/src/components/affine/empty/collection-detail.tsx
+3 -1
View File
@@ -30,7 +30,9 @@ export const EmptyCollectionDetail = ({
title={t['com.affine.empty.collection-detail.title']()}
description={t['com.affine.empty.collection-detail.description']()}
action={
environment.isMobileEdition ? null : <Actions collection={collection} />
BUILD_CONFIG.isMobileEdition ? null : (
<Actions collection={collection} />
)
}
{...props}
/>
packages/frontend/core/src/components/affine/empty/docs.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export const EmptyDocs = ({
const pageHelper = usePageHelper(currentWorkspace.docCollection);
const tag = useLiveData(tagService.tagList.tagByTagId$(tagId));
const showActionButton = type !== 'trash'; // && !environment.isMobileEdition;
const showActionButton = type !== 'trash'; // && !BUILD_CONFIG.isMobileEdition;
const onCreate = useCallback(
(e: MouseEvent) => {
packages/frontend/core/src/components/affine/onboarding/onboarding.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ export const Onboarding = ({ onOpenApp }: OnboardingProps) => {
return (
<div
className={styles.onboarding}
data-is-desktop={environment.isElectron}
data-is-desktop={BUILD_CONFIG.isElectron}
data-is-window={!!status.activeId || !!status.unfoldingId}
>
<div className={styles.offsetOrigin}>
packages/frontend/core/src/components/affine/setting-modal/general-setting/about/index.tsx
+1 -1
View File
@@ -72,7 +72,7 @@ export const AboutAffine = () => {
name={t['com.affine.aboutAFFiNE.version.editor.title']()}
desc={BUILD_CONFIG.editorVersion}
/>
{environment.isElectron ? (
{BUILD_CONFIG.isElectron ? (
<>
<UpdateCheckSection />
<SettingRow
packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx
+3 -3
View File
@@ -86,7 +86,7 @@ export const AppearanceSettings = () => {
<LanguageMenu />
</div>
</SettingRow>
{environment.isElectron ? (
{BUILD_CONFIG.isElectron ? (
<SettingRow
name={t['com.affine.appearanceSettings.clientBorder.title']()}
desc={t['com.affine.appearanceSettings.clientBorder.description']()}
@@ -98,7 +98,7 @@ export const AppearanceSettings = () => {
/>
</SettingRow>
) : null}
{BUILD_CONFIG.enableNewSettingUnstableApi && environment.isElectron ? (
{BUILD_CONFIG.enableNewSettingUnstableApi && BUILD_CONFIG.isElectron ? (
<SettingRow
name={t['com.affine.appearanceSettings.windowFrame.title']()}
desc={t['com.affine.appearanceSettings.windowFrame.description']()}
@@ -144,7 +144,7 @@ export const AppearanceSettings = () => {
</SettingWrapper>
) : null}
{environment.isElectron ? (
{BUILD_CONFIG.isElectron ? (
<SettingWrapper
title={t['com.affine.appearanceSettings.sidebar.title']()}
>
packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/theme-editor-setting.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ export const ThemeEditorSetting = () => {
const modified = useLiveData(themeEditor.modified$);
const open = useCallback(() => {
if (environment.isElectron) {
if (BUILD_CONFIG.isElectron) {
apis?.ui.openThemeEditor().catch(console.error);
} else {
popupWindow('/theme-editor');
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/general.tsx
+2 -2
View File
@@ -89,7 +89,7 @@ const FontFamilySettings = () => {
const radioItems = useMemo(() => {
const items = getBaseFontStyleOptions(t);
if (!environment.isElectron) return items;
if (!BUILD_CONFIG.isElectron) return items;
// resolve custom fonts
const customOption = fontStyleOptions.find(opt => opt.key === 'Custom');
@@ -279,7 +279,7 @@ const CustomFontFamilySettings = () => {
},
[editorSettingService.editorSetting]
);
if (settings.fontFamily !== 'Custom' || !environment.isElectron) {
if (settings.fontFamily !== 'Custom' || !BUILD_CONFIG.isElectron) {
return null;
}
return (
packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/index.tsx
+1 -1
View File
@@ -69,7 +69,7 @@ export const WorkspaceSettingDetail = ({
<MembersPanel />
</SettingWrapper>
<SharingPanel />
{environment.isElectron && (
{BUILD_CONFIG.isElectron && (
<SettingWrapper title={t['Storage and Export']()}>
<ExportPanel
workspace={workspace}
packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx
+2 -4
View File
@@ -156,8 +156,6 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
}
}, [shareInfoService, t]);
const isMac = environment.isMacOs;
const { blockIds, elementIds } = useMemo(
() => getSelectedNodes(editorContainer?.host || null, currentMode),
[editorContainer, currentMode]
@@ -270,9 +268,9 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
<span className={styles.copyLinkLabelStyle}>
{t['com.affine.share-menu.copy']()}
</span>
{!environment.isMobile && (
{BUILD_CONFIG.isDesktopEdition && (
<span className={styles.copyLinkShortcutStyle}>
{isMac ? '⌘ + ⌥ + C' : 'Ctrl + Shift + C'}
{environment.isMacOs ? '⌘ + ⌥ + C' : 'Ctrl + Shift + C'}
</span>
)}
</Button>
packages/frontend/core/src/components/affine/subscription-landing/notify.tsx
+2 -3
View File
@@ -49,7 +49,6 @@ const SubscriptionChangedNotifyFooter = ({
);
};
const isDesktop = environment.isElectron;
export const useUpgradeNotify = () => {
const t = useI18n();
const prevNotifyIdRef = useRef<string | number | null>(null);
@@ -71,7 +70,7 @@ export const useUpgradeNotify = () => {
<SubscriptionChangedNotifyFooter
to={link}
okText={
isDesktop
BUILD_CONFIG.isElectron
? t['com.affine.payment.upgrade-success-notify.ok-client']()
: t['com.affine.payment.upgrade-success-notify.ok-web']()
}
@@ -112,7 +111,7 @@ export const useDowngradeNotify = () => {
<SubscriptionChangedNotifyFooter
to={link}
okText={
isDesktop
BUILD_CONFIG.isElectron
? t['com.affine.payment.downgraded-notify.ok-client']()
: t['com.affine.payment.downgraded-notify.ok-web']()
}
packages/frontend/core/src/components/app-sidebar/index.jotai.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { atom } from 'jotai';
import { atomWithStorage } from 'jotai/utils';
export const APP_SIDEBAR_OPEN = 'app-sidebar-open';
export const isMobile = window.innerWidth < 768 && !environment.isElectron;
export const isMobile = !BUILD_CONFIG.isElectron && window.innerWidth < 768;
export const appSidebarOpenAtom = atomWithStorage(APP_SIDEBAR_OPEN, !isMobile);
export const appSidebarFloatingAtom = atom(isMobile);
packages/frontend/core/src/components/app-sidebar/index.tsx
+56 -14
View File
@@ -47,7 +47,7 @@ export function AppSidebar({ children }: PropsWithChildren) {
useEffect(() => {
// do not float app sidebar on desktop
if (environment.isElectron) {
if (BUILD_CONFIG.isElectron) {
return;
}
@@ -77,8 +77,9 @@ export function AppSidebar({ children }: PropsWithChildren) {
};
}, [open, setFloating, setOpen, width]);
const hasRightBorder = !environment.isElectron && !clientBorder;
const isMacosDesktop = environment.isElectron && environment.isMacOs;
const hasRightBorder = !BUILD_CONFIG.isElectron && !clientBorder;
const isMacosDesktop = BUILD_CONFIG.isElectron && environment.isMacOs;
return (
<>
<ResizePanel
@@ -103,7 +104,7 @@ export function AppSidebar({ children }: PropsWithChildren) {
data-client-border={clientBorder}
>
<nav className={navStyle} data-testid="app-sidebar">
{!environment.isElectron && <SidebarHeader />}
{!BUILD_CONFIG.isElectron && <SidebarHeader />}
<div className={navBodyStyle} data-testid="sliderBar-inner">
{children}
</div>
@@ -120,7 +121,15 @@ export function AppSidebar({ children }: PropsWithChildren) {
);
}
const FallbackHeader = () => {
export function FallbackHeader() {
return (
<div className={styles.fallbackHeader}>
<FallbackHeaderSkeleton />
</div>
);
}
export function FallbackHeaderWithWorkspaceNavigator() {
// if navigate is not defined, it is rendered outside of router
// WorkspaceNavigator requires navigate context
// todo: refactor
@@ -136,15 +145,21 @@ const FallbackHeader = () => {
showEnableCloudButton
/>
) : (
<>
<Skeleton variant="rectangular" width={32} height={32} />
<Skeleton variant="rectangular" width={150} height={32} flex={1} />
<Skeleton variant="circular" width={25} height={25} />
</>
<FallbackHeaderSkeleton />
)}
</div>
);
};
}
export function FallbackHeaderSkeleton() {
return (
<>
<Skeleton variant="rectangular" width={32} height={32} />
<Skeleton variant="rectangular" width={150} height={32} flex={1} />
<Skeleton variant="circular" width={25} height={25} />
</>
);
}
const randomWidth = () => {
return Math.floor(Math.random() * 200) + 100;
@@ -195,17 +210,44 @@ export const AppSidebarFallback = (): ReactElement | null => {
const width = useAtomValue(appSidebarWidthAtom);
const { appSettings } = useAppSettingHelper();
const clientBorder = appSettings.clientBorder;
const hasRightBorder = !environment.isElectron && !clientBorder;
return (
<div
style={{ width }}
className={navWrapperStyle}
data-has-border={hasRightBorder}
data-has-border={!BUILD_CONFIG.isElectron && !clientBorder}
data-open="true"
>
<nav className={navStyle}>
{!environment.isElectron ? <div className={navHeaderStyle} /> : null}
{!BUILD_CONFIG.isElectron ? <div className={navHeaderStyle} /> : null}
<div className={navBodyStyle}>
<div className={styles.fallback}>
<FallbackHeaderWithWorkspaceNavigator />
<FallbackBody />
</div>
</div>
</nav>
</div>
);
};
/**
* NOTE(@forehalo): this is a copy of [AppSidebarFallback] without [WorkspaceNavigator] which will introduce a lot useless dependencies for shell(tab bar)
*/
export const ShellAppSidebarFallback = () => {
const width = useAtomValue(appSidebarWidthAtom);
const { appSettings } = useAppSettingHelper();
const clientBorder = appSettings.clientBorder;
return (
<div
style={{ width }}
className={navWrapperStyle}
data-has-border={!BUILD_CONFIG.isElectron && !clientBorder}
data-open="true"
>
<nav className={navStyle}>
{!BUILD_CONFIG.isElectron ? <div className={navHeaderStyle} /> : null}
<div className={navBodyStyle}>
<div className={styles.fallback}>
<FallbackHeader />
packages/frontend/core/src/components/app-sidebar/quick-search-input/index.tsx
+1 -2
View File
@@ -13,7 +13,6 @@ interface QuickSearchInputProps extends HTMLAttributes<HTMLDivElement> {
// Although it is called an input, it is actually a button.
export function QuickSearchInput({ onClick, ...props }: QuickSearchInputProps) {
const t = useI18n();
const isMac = environment.isMacOs;
return (
<div
@@ -27,7 +26,7 @@ export function QuickSearchInput({ onClick, ...props }: QuickSearchInputProps) {
</span>
<div className={styles.spacer} />
<div className={styles.shortcutHint}>
{isMac ? ' ⌘ + K' : ' Ctrl + K'}
{environment.isMacOs ? ' ⌘ + K' : ' Ctrl + K'}
</div>
<Spotlight />
</div>
packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx
+1 -2
View File
@@ -292,8 +292,7 @@ export const PageHeaderMenuButton = ({
>
{t['com.affine.workbench.tab.page-menu-open']()}
</MenuItem>
{environment.isElectron && (
{BUILD_CONFIG.isElectron && (
<MenuItem
prefixIcon={<SplitViewIcon />}
data-testid="editor-option-menu-open-in-split-new"
packages/frontend/core/src/components/page-list/operation-cell.tsx
+1 -3
View File
@@ -176,12 +176,10 @@ export const PageOperationCell = ({
<MenuItem onClick={onOpenInfoModal} prefixIcon={<InformationIcon />}>
{t['com.affine.page-properties.page-info.view']()}
</MenuItem>
<MenuItem onClick={onOpenInNewTab} prefixIcon={<OpenInNewIcon />}>
{t['com.affine.workbench.tab.page-menu-open']()}
</MenuItem>
{environment.isElectron && enableSplitView ? (
{BUILD_CONFIG.isElectron && enableSplitView ? (
<MenuItem onClick={onOpenInSplitView} prefixIcon={<SplitViewIcon />}>
{t['com.affine.workbench.split-view.page-menu-open']()}
</MenuItem>
packages/frontend/core/src/components/page-list/view/collection-operations.tsx
+1 -1
View File
@@ -154,7 +154,7 @@ export const CollectionOperations = ({
name: t['com.affine.workbench.tab.page-menu-open'](),
click: openCollectionNewTab,
},
...(enableMultiView && environment.isElectron
...(BUILD_CONFIG.isElectron && enableMultiView
? [
{
icon: <SplitViewIcon />,
packages/frontend/core/src/components/pure/help-island/index.tsx
+3 -1
View File
@@ -29,7 +29,9 @@ const DEFAULT_SHOW_LIST: IslandItemNames[] = [
const DESKTOP_SHOW_LIST: IslandItemNames[] = [...DEFAULT_SHOW_LIST];
type IslandItemNames = 'whatNew' | 'contact' | 'shortcuts';
const showList = environment.isElectron ? DESKTOP_SHOW_LIST : DEFAULT_SHOW_LIST;
const showList = BUILD_CONFIG.isElectron
? DESKTOP_SHOW_LIST
: DEFAULT_SHOW_LIST;
export const HelpIsland = () => {
const { globalContextService } = useServices({
packages/frontend/core/src/components/root-app-sidebar/index.tsx
+2 -2
View File
@@ -106,7 +106,7 @@ export const RootAppSidebar = (): ReactElement => {
);
useEffect(() => {
if (environment.isElectron) {
if (BUILD_CONFIG.isElectron) {
return events?.applicationMenu.onNewPageAction(() => {
apis?.ui
.isActiveTab()
@@ -197,7 +197,7 @@ export const RootAppSidebar = (): ReactElement => {
</div>
</SidebarScrollableContainer>
<SidebarContainer>
{environment.isElectron ? <UpdaterButton /> : <AppDownloadButton />}
{BUILD_CONFIG.isElectron ? <UpdaterButton /> : <AppDownloadButton />}
</SidebarContainer>
</AppSidebar>
);
packages/frontend/core/src/components/top-tip.tsx
+3 -3
View File
@@ -12,12 +12,12 @@ import { AuthService } from '../modules/cloud';
const minimumChromeVersion = 106;
const shouldShowWarning = (() => {
if (environment.isElectron) {
if (BUILD_CONFIG.isElectron) {
// even though desktop has compatibility issues,
// we don't want to show the warning
return false;
}
if (environment.isMobile) {
if (BUILD_CONFIG.isMobileEdition) {
return true;
}
if (environment.isChrome && environment.chromeVersion) {
@@ -75,8 +75,8 @@ export const TopTip = ({
}, [setAuthModal]);
if (
!BUILD_CONFIG.isElectron &&
showLocalDemoTips &&
!environment.isElectron &&
workspace.flavour === WorkspaceFlavour.LOCAL
) {
return (
packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/add-workspace/index.tsx
+2 -2
View File
@@ -15,7 +15,7 @@ export const AddWorkspace = ({
return (
<div>
{environment.isElectron ? (
{BUILD_CONFIG.isElectron && (
<MenuItem
block={true}
prefixIcon={<ImportIcon />}
@@ -27,7 +27,7 @@ export const AddWorkspace = ({
{t['com.affine.workspace.local.import']()}
</div>
</MenuItem>
) : null}
)}
<MenuItem
block={true}
prefixIcon={<PlusIcon />}
packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx
+2 -2
View File
@@ -60,7 +60,7 @@ const UnSyncWorkspaceStatus = () => {
const LocalWorkspaceStatus = () => {
return (
<>
{!environment.isElectron ? (
{!BUILD_CONFIG.isElectron ? (
<InformationFillDuotoneIcon style={{ color: cssVar('errorColor') }} />
) : (
<LocalWorkspaceIcon />
@@ -98,7 +98,7 @@ const useSyncEngineSyncProgress = (meta: WorkspaceMetadata) => {
let content;
// TODO(@eyhn): add i18n
if (workspace.flavour === WorkspaceFlavour.LOCAL) {
if (!environment.isElectron) {
if (!BUILD_CONFIG.isElectron) {
content = 'This is a local demo workspace.';
} else {
content = 'Saved locally';
packages/frontend/core/src/components/workspace/index.tsx
+4 -3
View File
@@ -28,8 +28,9 @@ export const AppContainer = ({
className,
...rest
}: WorkspaceRootProps) => {
const noisyBackground = useNoisyBackground && environment.isElectron;
const blurBackground = environment.isElectron && useBlurBackground;
const noisyBackground = BUILD_CONFIG.isElectron && useNoisyBackground;
const blurBackground =
BUILD_CONFIG.isElectron && environment.isMacOs && useBlurBackground;
return (
<div
{...rest}
@@ -59,7 +60,7 @@ export const MainContainer = forwardRef<
<div
{...props}
className={clsx(mainContainerStyle, className)}
data-is-desktop={environment.isElectron}
data-is-desktop={BUILD_CONFIG.isElectron}
data-transparent={false}
data-client-border={appSettings.clientBorder}
data-side-bar-open={appSideBarOpen}