toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-11-22 08:24:44 +03: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
No known key found for this signature in database
GPG Key ID: 56709255DC7EC728
90 changed files with 297 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@ -34,7 +34,7 @@ const createPattern = packageName => [
{
group: ['@affine/env/constant'],
message:
'Do not import from @affine/env/constant. Use `environment.isElectron` instead',
'Do not import from @affine/env/constant. Use `BUILD_CONFIG.isElectron` instead',
importNames: ['isElectron'],
},
];

3
packages/common/env/src/constant.ts vendored
View File

@ -10,9 +10,6 @@ declare global {
};
}
//#region runtime variables
export const isElectron = !!globalThis.__appInfo?.electron;
//#endregion
export const DEFAULT_WORKSPACE_NAME = 'Demo Workspace';
export const UNTITLED_WORKSPACE_NAME = 'Untitled';

94
packages/common/env/src/global.ts vendored
View File

@ -1,51 +1,47 @@
/// <reference types="@blocksuite/global" />
import { assertEquals } from '@blocksuite/global/utils';
import { z } from 'zod';
import { isElectron } from './constant.js';
import { UaHelper } from './ua-helper.js';
export const BUILD_CONFIG_SCHEMA = z.object({
// this is for the electron app
serverUrlPrefix: z.string(),
appVersion: z.string(),
editorVersion: z.string(),
distribution: z.enum(['web', 'desktop', 'admin', 'mobile']),
appBuildType: z.union([
z.literal('stable'),
z.literal('beta'),
z.literal('internal'),
z.literal('canary'),
]),
isSelfHosted: z.boolean().optional(),
githubUrl: z.string(),
changelogUrl: z.string(),
downloadUrl: z.string(),
// see: tools/workers
imageProxyUrl: z.string(),
linkPreviewUrl: z.string(),
allowLocalWorkspace: z.boolean(),
enablePreloading: z.boolean(),
enableNewSettingUnstableApi: z.boolean(),
enableExperimentalFeature: z.boolean(),
enableThemeEditor: z.boolean(),
});
export type BUILD_CONFIG_TYPE = z.infer<typeof BUILD_CONFIG_SCHEMA>;
export type Environment = {
isDebug: boolean;
// Edition
export type BUILD_CONFIG_TYPE = {
debug: boolean;
distribution: 'web' | 'desktop' | 'admin' | 'mobile';
/**
* 'web' | 'desktop' | 'admin'
*/
isDesktopEdition: boolean;
/**
* 'mobile'
*/
isMobileEdition: boolean;
// Platform/Entry
isElectron: boolean;
isDesktopWeb: boolean;
isWeb: boolean;
isMobileWeb: boolean;
isStandalone?: boolean;
// this is for the electron app
serverUrlPrefix: string;
appVersion: string;
editorVersion: string;
appBuildType: 'stable' | 'beta' | 'internal' | 'canary';
githubUrl: string;
changelogUrl: string;
downloadUrl: string;
// see: tools/workers
imageProxyUrl: string;
linkPreviewUrl: string;
allowLocalWorkspace: boolean;
enablePreloading: boolean;
enableNewSettingUnstableApi: boolean;
enableExperimentalFeature: boolean;
enableThemeEditor: boolean;
// TODO(@forehalo): remove
isSelfHosted: boolean;
};
export type Environment = {
// Device
isLinux: boolean;
isMacOs: boolean;
@ -55,6 +51,8 @@ export type Environment = {
isFireFox: boolean;
isMobile: boolean;
isChrome: boolean;
isPwa: boolean;
chromeVersion?: number;
};
@ -64,17 +62,9 @@ export function setupGlobal() {
}
let environment: Environment;
const isDebug = process.env.NODE_ENV === 'development';
if (!globalThis.navigator) {
environment = {
isDesktopEdition: false,
isMobileEdition: false,
isElectron: false,
isDesktopWeb: false,
isMobileWeb: false,
isMobile: false,
isDebug,
isLinux: false,
isMacOs: false,
isSafari: false,
@ -82,17 +72,13 @@ export function setupGlobal() {
isFireFox: false,
isChrome: false,
isIOS: false,
isPwa: false,
isMobile: false,
};
} else {
const uaHelper = new UaHelper(globalThis.navigator);
environment = {
isDesktopEdition: BUILD_CONFIG.distribution !== 'mobile',
isMobileEdition: BUILD_CONFIG.distribution === 'mobile',
isDesktopWeb: BUILD_CONFIG.distribution === 'web',
isMobileWeb: BUILD_CONFIG.distribution === 'mobile',
isElectron,
isDebug,
isMobile: uaHelper.isMobile,
isLinux: uaHelper.isLinux,
isMacOs: uaHelper.isMacOs,
@ -101,12 +87,10 @@ export function setupGlobal() {
isFireFox: uaHelper.isFireFox,
isChrome: uaHelper.isChrome,
isIOS: uaHelper.isIOS,
isStandalone: uaHelper.isStandalone,
isPwa: uaHelper.isStandalone,
};
// Chrome on iOS is still Safari
if (environment.isChrome && !environment.isIOS) {
assertEquals(environment.isSafari, false);
assertEquals(environment.isFireFox, false);
environment = {
...environment,
isSafari: false,

4
packages/common/infra/src/atom/settings.ts
View File

@ -44,7 +44,7 @@ export const dateFormatOptions: DateFormats[] = [
];
const appSettingBaseAtom = atomWithStorage<AppSetting>('affine-settings', {
clientBorder: environment.isElectron && !environment.isWindows,
clientBorder: BUILD_CONFIG.isElectron && !environment.isWindows,
windowFrameStyle: 'frameless',
dateFormat: dateFormatOptions[0],
startWeekOnMonday: false,
@ -61,7 +61,7 @@ type SetStateAction<Value> = Value | ((prev: Value) => Value);
const appSettingEffect = atomEffect(get => {
const settings = get(appSettingBaseAtom);
// some values in settings should be synced into electron side
if (environment.isElectron) {
if (BUILD_CONFIG.isElectron) {
logger.debug('sync settings to electron', settings);
// this api type in @affine/electron-api, but it is circular dependency this package, use any here
(window as any).apis?.updater

2
packages/common/infra/src/livedata/effect/index.ts
View File

@ -75,7 +75,7 @@ export function effect<T, A, B, C, D, E, F>(
export function effect(...args: any[]) {
const subject$ = new Subject<any>();
const effectLocation = environment.isDebug
const effectLocation = BUILD_CONFIG.debug
? `(${new Error().stack?.split('\n')[2].trim()})`
: '';

2
packages/common/infra/src/modules/feature-flag/constant.ts
View File

@ -1,7 +1,7 @@
import type { FlagInfo } from './types';
const isNotStableBuild = BUILD_CONFIG.appBuildType !== 'stable';
const isDesktopEnvironment = environment.isElectron;
const isDesktopEnvironment = BUILD_CONFIG.isElectron;
const isCanaryBuild = BUILD_CONFIG.appBuildType === 'canary';
export const AFFINE_FLAGS = {

4
packages/frontend/apps/electron/renderer/app.tsx
View File

@ -43,8 +43,8 @@ const desktopWhiteList = [
'/magic-link',
];
if (
!environment.isElectron &&
environment.isDebug &&
!BUILD_CONFIG.isElectron &&
BUILD_CONFIG.debug &&
desktopWhiteList.every(path => !location.pathname.startsWith(path))
) {
document.body.innerHTML = `<h1 style="color:red;font-size:5rem;text-align:center;">Don't run electron entry in browser.</h1>`;

2
packages/frontend/apps/electron/renderer/index.tsx
View File

@ -39,7 +39,7 @@ function main() {
performanceMainLogger.info('skip setup');
} else {
performanceMainLogger.info('setup start');
if (window.SENTRY_RELEASE || environment.isDebug) {
if (BUILD_CONFIG.debug || window.SENTRY_RELEASE) {
// https://docs.sentry.io/platforms/javascript/guides/electron/
init({
dsn: process.env.SENTRY_DSN,

8
packages/frontend/apps/electron/renderer/shell/shell.tsx
View File

@ -1,4 +1,4 @@
import { AppFallback } from '@affine/core/components/affine/app-container';
import { ShellAppFallback } from '@affine/core/components/affine/app-container';
import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
import { AppTabsHeader } from '@affine/core/modules/app-tabs-header';
import { SplitViewFallback } from '@affine/core/modules/workbench/view/split-view/split-view';
@ -8,15 +8,15 @@ import * as styles from './shell.css';
export function ShellRoot() {
const { appSettings } = useAppSettingHelper();
const translucent =
environment.isElectron &&
BUILD_CONFIG.isElectron &&
environment.isMacOs &&
appSettings.enableBlurBackground;
return (
<div className={styles.root} data-translucent={translucent}>
<AppTabsHeader mode="shell" className={styles.appTabsHeader} />
<AppFallback className={styles.fallbackRoot}>
<ShellAppFallback className={styles.fallbackRoot}>
<SplitViewFallback className={styles.splitViewFallback} />
</AppFallback>
</ShellAppFallback>
</div>
);
}

6
packages/frontend/apps/electron/scripts/common.ts
View File

@ -2,7 +2,7 @@ import { resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
// eslint-disable-next-line @typescript-eslint/no-restricted-imports
import { getRuntimeConfig } from '@affine/cli/src/webpack/runtime-config';
import { getBuildConfig } from '@affine/cli/src/webpack/runtime-config';
import { sentryEsbuildPlugin } from '@sentry/esbuild-plugin';
import type { BuildOptions, Plugin } from 'esbuild';
@ -20,8 +20,8 @@ export const config = (): BuildOptions => {
define['REPLACE_ME_BUILD_ENV'] = `"${process.env.BUILD_TYPE ?? 'stable'}"`;
define['runtimeConfig'] = JSON.stringify(
getRuntimeConfig({
define['BUILD_CONFIG'] = JSON.stringify(
getBuildConfig({
channel: (process.env.BUILD_TYPE as any) ?? 'canary',
distribution: 'desktop',
mode:

4
packages/frontend/apps/electron/src/main/windows-manager/main-window.ts
View File

@ -254,10 +254,10 @@ export async function openUrlInHiddenWindow(urlObj: URL) {
preload: join(__dirname, './preload.js'),
additionalArguments: await getWindowAdditionalArguments(),
},
show: environment.isDebug,
show: BUILD_CONFIG.debug,
});
if (environment.isDebug) {
if (BUILD_CONFIG.debug) {
win.webContents.openDevTools({
mode: 'detach',
});

5
packages/frontend/apps/mobile/src/app.tsx
View File

@ -29,11 +29,6 @@ import { RouterProvider } from 'react-router-dom';
import { configureMobileModules } from './modules';
import { router } from './router';
if (environment.isElectron && environment.isDebug) {
document.body.innerHTML = `<h1 style="color:red;font-size:5rem;text-align:center;">Don't run web entry in electron.</h1>`;
throw new Error('Wrong distribution');
}
const future = {
v7_startTransition: true,
} as const;

2
packages/frontend/apps/mobile/src/index.tsx
View File

@ -20,7 +20,7 @@ import { App } from './app';
const performanceMainLogger = performanceLogger.namespace('main');
function main() {
performanceMainLogger.info('setup start');
if (window.SENTRY_RELEASE || environment.isDebug) {
if (BUILD_CONFIG.debug || window.SENTRY_RELEASE) {
// https://docs.sentry.io/platforms/javascript/guides/react/#configure
init({
dsn: process.env.SENTRY_DSN,

4
packages/frontend/apps/mobile/src/pages/workspace/index.tsx
View File

@ -125,8 +125,8 @@ export const Component = () => {
if (workspaceNotFound) {
if (
detailDocRoute /* */ &&
environment.isDesktopEdition /* only browser has share page */
BUILD_CONFIG.isDesktopEdition /* only browser has share page */ &&
detailDocRoute
) {
return <div>TODO: share page</div>;
}

5
packages/frontend/apps/web/src/app.tsx
View File

@ -31,11 +31,6 @@ import {
import { Suspense } from 'react';
import { RouterProvider } from 'react-router-dom';
if (environment.isElectron && environment.isDebug) {
document.body.innerHTML = `<h1 style="color:red;font-size:5rem;text-align:center;">Don't run web entry in electron.</h1>`;
throw new Error('Wrong distribution');
}
const performanceI18nLogger = performanceLogger.namespace('i18n');
const cache = createEmotionCache();

4
packages/frontend/apps/web/src/index.tsx
View File

@ -23,11 +23,11 @@ function main() {
performanceMainLogger.info('start');
// skip bootstrap setup for desktop onboarding
if (environment.isElectron && appInfo?.windowName === 'onboarding') {
if (BUILD_CONFIG.isElectron && appInfo?.windowName === 'onboarding') {
performanceMainLogger.info('skip setup');
} else {
performanceMainLogger.info('setup start');
if (window.SENTRY_RELEASE || environment.isDebug) {
if (BUILD_CONFIG.debug || window.SENTRY_RELEASE) {
// https://docs.sentry.io/platforms/javascript/guides/react/#configure
init({
dsn: process.env.SENTRY_DSN,

5
packages/frontend/component/.storybook/main.ts
View File

@ -3,7 +3,7 @@ import { StorybookConfig } from '@storybook/react-vite';
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
import swc from 'unplugin-swc';
import { mergeConfig } from 'vite';
import { getRuntimeConfig } from '@affine/cli/src/webpack/runtime-config';
import { getBuildConfig } from '@affine/cli/src/webpack/runtime-config';
export default {
stories: ['../src/ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
@ -54,13 +54,12 @@ export default {
],
define: {
'process.env.CAPTCHA_SITE_KEY': `"${process.env.CAPTCHA_SITE_KEY}"`,
runtimeConfig: getRuntimeConfig({
runtimeConfig: getBuildConfig({
distribution: 'web',
mode: 'development',
channel: 'canary',
static: false,
coverage: false,
static: false,
}),
},
});

2
packages/frontend/component/src/components/affine-other-page-layout/layout.tsx
View File

@ -20,7 +20,7 @@ export const AffineOtherPageLayout = ({
return (
<div className={styles.root}>
{environment.isElectron ? (
{BUILD_CONFIG.isElectron ? (
<div className={styles.draggableHeader} />
) : (
<div className={styles.topNav}>

4
packages/frontend/component/src/components/auth-components/onboarding-page.tsx
View File

@ -119,8 +119,8 @@ export const OnboardingPage = ({
() => questions?.[questionIdx],
[questionIdx, questions]
);
const isMacosDesktop = environment.isElectron && environment.isMacOs;
const isWindowsDesktop = environment.isElectron && environment.isWindows;
const isMacosDesktop = BUILD_CONFIG.isElectron && environment.isMacOs;
const isWindowsDesktop = BUILD_CONFIG.isElectron && environment.isWindows;
if (!questions) {
return null;

2
packages/frontend/component/src/components/theme-provider/index.tsx
View File

@ -10,7 +10,7 @@ const DesktopThemeSync = memo(function DesktopThemeSync() {
const lastThemeRef = useRef(theme);
const onceRef = useRef(false);
if (lastThemeRef.current !== theme || !onceRef.current) {
if (environment.isElectron && theme) {
if (BUILD_CONFIG.isElectron && theme) {
apis?.ui
.handleThemeChange(theme as 'dark' | 'light' | 'system')
.catch(err => {

2
packages/frontend/component/src/ui/button/button.tsx
View File

@ -162,7 +162,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
data-size={size}
data-variant={variant}
data-no-hover={withoutHover || undefined}
data-mobile={environment.isMobileEdition}
data-mobile={BUILD_CONFIG.isMobileEdition}
onClick={handleClick}
>
<IconSlot

10
packages/frontend/component/src/ui/menu/index.ts
View File

@ -9,12 +9,14 @@ import { MobileMenu } from './mobile/root';
import { MobileMenuSeparator } from './mobile/separator';
import { MobileMenuSub } from './mobile/sub';
const MenuItem = environment.isMobileEdition ? MobileMenuItem : DesktopMenuItem;
const MenuSeparator = environment.isMobileEdition
const MenuItem = BUILD_CONFIG.isMobileEdition
? MobileMenuItem
: DesktopMenuItem;
const MenuSeparator = BUILD_CONFIG.isMobileEdition
? MobileMenuSeparator
: DesktopMenuSeparator;
const MenuSub = environment.isMobileEdition ? MobileMenuSub : DesktopMenuSub;
const Menu = environment.isMobileEdition ? MobileMenu : DesktopMenu;
const MenuSub = BUILD_CONFIG.isMobileEdition ? MobileMenuSub : DesktopMenuSub;
const Menu = BUILD_CONFIG.isMobileEdition ? MobileMenu : DesktopMenu;
export {
DesktopMenu,

2
packages/frontend/component/src/ui/menu/use-menu-item.tsx
View File

@ -26,7 +26,7 @@ export const useMenuItem = <T extends MenuItemProps>({
checked,
selected,
block,
[mobileMenuItem]: environment.isMobileEdition,
[mobileMenuItem]: BUILD_CONFIG.isMobileEdition,
},
propsClassName
);

6
packages/frontend/component/src/ui/modal/modal.tsx
View File

@ -149,7 +149,7 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
children,
contentWrapperClassName,
contentWrapperStyle,
animation = environment.isMobileEdition ? 'slideBottom' : 'fadeScaleTop',
animation = BUILD_CONFIG.isMobileEdition ? 'slideBottom' : 'fadeScaleTop',
fullScreen,
...otherProps
} = props;
@ -208,7 +208,7 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
`anim-${animation}`,
styles.modalOverlay,
overlayClassName,
{ mobile: environment.isMobileEdition }
{ mobile: BUILD_CONFIG.isMobileEdition }
)}
style={{
...overlayStyle,
@ -216,7 +216,7 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
{...otherOverlayOptions}
>
<SafeArea
bottom={environment.isMobileEdition}
bottom={BUILD_CONFIG.isMobileEdition}
bottomOffset={12}
data-full-screen={fullScreen}
data-modal={modal}

2
packages/frontend/component/src/ui/safe-area/index.tsx
View File

@ -30,7 +30,7 @@ export const SafeArea = forwardRef<HTMLDivElement, SafeAreaProps>(
<div
ref={ref}
className={clsx(safeArea, className)}
data-standalone={environment.isStandalone ? '' : undefined}
data-standalone={environment.isPwa ? '' : undefined}
data-bottom={bottom ? '' : undefined}
data-top={top ? '' : undefined}
style={{

4
packages/frontend/core/src/commands/affine-creation.tsx
View File

@ -23,7 +23,7 @@ export function registerAffineCreationCommands({
category: 'affine:creation',
label: t['com.affine.cmdk.affine.new-page'](),
icon: <PlusIcon />,
keyBinding: environment.isElectron
keyBinding: BUILD_CONFIG.isElectron
? {
binding: '$mod+N',
skipRegister: true,
@ -73,7 +73,7 @@ export function registerAffineCreationCommands({
icon: <ImportIcon />,
label: t['com.affine.cmdk.affine.import-workspace'](),
preconditionStrategy: () => {
return environment.isElectron;
return BUILD_CONFIG.isElectron;
},
run() {
track.$.cmdk.workspace.createWorkspace({

7
packages/frontend/core/src/commands/affine-settings.tsx
View File

@ -183,7 +183,7 @@ export function registerAffineSettingsCommands({
`,
category: 'affine:settings',
icon: <SettingsIcon />,
preconditionStrategy: () => environment.isElectron,
preconditionStrategy: () => BUILD_CONFIG.isElectron,
run() {
track.$.cmdk.settings.changeAppSetting({
key: 'clientBorder',
@ -231,7 +231,7 @@ export function registerAffineSettingsCommands({
]()}`,
category: 'affine:settings',
icon: <SettingsIcon />,
preconditionStrategy: () => environment.isElectron,
preconditionStrategy: () => BUILD_CONFIG.isElectron,
run() {
track.$.cmdk.settings.changeAppSetting({
key: 'enableNoisyBackground',
@ -257,7 +257,8 @@ export function registerAffineSettingsCommands({
]()}`,
category: 'affine:settings',
icon: <SettingsIcon />,
preconditionStrategy: () => environment.isElectron && environment.isMacOs,
preconditionStrategy: () =>
BUILD_CONFIG.isElectron && environment.isMacOs,
run() {
track.$.cmdk.settings.changeAppSetting({
key: 'enableBlurBackground',

24
packages/frontend/core/src/components/affine/app-container.tsx
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>
);
};

4
packages/frontend/core/src/components/affine/auth/oauth.tsx
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}`;
}

2
packages/frontend/core/src/components/affine/auth/send-email.tsx
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'
}`,
});
},

10
packages/frontend/core/src/components/affine/auth/use-captcha.tsx
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 {

4
packages/frontend/core/src/components/affine/empty/action-button.tsx
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}

4
packages/frontend/core/src/components/affine/empty/collection-detail.tsx
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}
/>

2
packages/frontend/core/src/components/affine/empty/docs.tsx
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) => {

2
packages/frontend/core/src/components/affine/onboarding/onboarding.tsx
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}>

2
packages/frontend/core/src/components/affine/setting-modal/general-setting/about/index.tsx
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

6
packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx
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']()}
>

2
packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/theme-editor-setting.tsx
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');

4
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/general.tsx
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 (

2
packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/index.tsx
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}

6
packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx
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>

5
packages/frontend/core/src/components/affine/subscription-landing/notify.tsx
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']()
}

2
packages/frontend/core/src/components/app-sidebar/index.jotai.ts
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);

70
packages/frontend/core/src/components/app-sidebar/index.tsx
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 />

3
packages/frontend/core/src/components/app-sidebar/quick-search-input/index.tsx
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>

3
packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx
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"

4
packages/frontend/core/src/components/page-list/operation-cell.tsx
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>

2
packages/frontend/core/src/components/page-list/view/collection-operations.tsx
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 />,

4
packages/frontend/core/src/components/pure/help-island/index.tsx
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({

4
packages/frontend/core/src/components/root-app-sidebar/index.tsx
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>
);

6
packages/frontend/core/src/components/top-tip.tsx
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 (

4
packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/add-workspace/index.tsx
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 />}

4
packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx
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';

7
packages/frontend/core/src/components/workspace/index.tsx
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}

2
packages/frontend/core/src/hooks/affine/use-register-find-in-page-commands.ts
View File

@ -18,7 +18,7 @@ export function useRegisterFindInPageCommands() {
}, [findInPage]);
useEffect(() => {
if (!environment.isElectron) {
if (!BUILD_CONFIG.isElectron) {
return;
}
const unsubs: Array<() => void> = [];

38
packages/frontend/core/src/hooks/affine/use-shortcuts.ts
View File

@ -279,50 +279,56 @@ export const useWinMarkdownShortcuts = (): ShortcutMap => {
);
};
const shortcutsMap = environment.isMacOs
? {
useMarkdownShortcuts: useMacMarkdownShortcuts,
usePageShortcuts: useMacPageKeyboardShortcuts,
useEdgelessShortcuts: useMacEdgelessKeyboardShortcuts,
useGeneralShortcuts: useMacGeneralKeyboardShortcuts,
}
: {
useMarkdownShortcuts: useWinMarkdownShortcuts,
usePageShortcuts: useWinPageKeyboardShortcuts,
useEdgelessShortcuts: useWinEdgelessKeyboardShortcuts,
useGeneralShortcuts: useWinGeneralKeyboardShortcuts,
};
export const useMarkdownShortcuts = (): ShortcutsInfo => {
const t = useI18n();
const shortcuts = shortcutsMap.useMarkdownShortcuts();
const macMarkdownShortcuts = useMacMarkdownShortcuts();
const winMarkdownShortcuts = useWinMarkdownShortcuts();
const isMac = environment.isMacOs;
return {
title: t['com.affine.shortcutsTitle.markdownSyntax'](),
shortcuts: isMac ? macMarkdownShortcuts : winMarkdownShortcuts,
shortcuts,
};
};
export const usePageShortcuts = (): ShortcutsInfo => {
const t = useI18n();
const shortcuts = shortcutsMap.usePageShortcuts();
const macPageShortcuts = useMacPageKeyboardShortcuts();
const winPageShortcuts = useWinPageKeyboardShortcuts();
const isMac = environment.isMacOs;
return {
title: t['com.affine.shortcutsTitle.page'](),
shortcuts: isMac ? macPageShortcuts : winPageShortcuts,
shortcuts,
};
};
export const useEdgelessShortcuts = (): ShortcutsInfo => {
const t = useI18n();
const shortcuts = shortcutsMap.useEdgelessShortcuts();
const macEdgelessShortcuts = useMacEdgelessKeyboardShortcuts();
const winEdgelessShortcuts = useWinEdgelessKeyboardShortcuts();
const isMac = environment.isMacOs;
return {
title: t['com.affine.shortcutsTitle.edgeless'](),
shortcuts: isMac ? macEdgelessShortcuts : winEdgelessShortcuts,
shortcuts,
};
};
export const useGeneralShortcuts = (): ShortcutsInfo => {
const t = useI18n();
const shortcuts = shortcutsMap.useGeneralShortcuts();
const macGeneralShortcuts = useMacGeneralKeyboardShortcuts();
const winGeneralShortcuts = useWinGeneralKeyboardShortcuts();
const isMac = environment.isMacOs;
return {
title: t['com.affine.shortcutsTitle.general'](),
shortcuts: isMac ? macGeneralShortcuts : winGeneralShortcuts,
shortcuts,
};
};

5
packages/frontend/core/src/hooks/use-app-config-storage.ts
View File

@ -1,5 +1,4 @@
import { apis } from '@affine/electron-api';
import { setupGlobal } from '@affine/env/global';
import { assertExists } from '@blocksuite/global/utils';
import type { AppConfigSchema } from '@toeverything/infra';
import { AppConfigStorage, defaultAppConfig } from '@toeverything/infra';
@ -33,9 +32,7 @@ class AppConfigProxy {
}
export const appConfigProxy = new AppConfigProxy();
setupGlobal();
const storage = environment.isElectron
const storage = BUILD_CONFIG.isElectron
? new AppConfigStorage({
config: defaultAppConfig,
get: () => appConfigProxy.get(),

2
packages/frontend/core/src/hooks/use-app-updater.ts
View File

@ -29,7 +29,7 @@ function rpcToObservable<
return new Observable<T | null>(subscriber => {
subscriber.next(initialValue);
onSubscribe?.();
if (!environment.isElectron || !event) {
if (!BUILD_CONFIG.isElectron || !event) {
subscriber.complete();
return;
}

2
packages/frontend/core/src/hooks/use-global-state.ts
View File

@ -3,7 +3,7 @@ import { useEffect } from 'react';
export function useDocumentTitle(newTitle?: string | null) {
useEffect(() => {
if (environment.isElectron || !newTitle) {
if (BUILD_CONFIG.isElectron || !newTitle) {
return noop;
}

5
packages/frontend/core/src/layouts/workspace-layout.tsx
View File

@ -211,6 +211,8 @@ const BrowserLayout = ({ children }: PropsWithChildren) => {
);
};
const LayoutComponent = BUILD_CONFIG.isElectron ? DesktopLayout : BrowserLayout;
/**
* Wraps the workspace layout main router view
*/
@ -223,9 +225,6 @@ const WorkspaceLayoutUIContainer = ({ children }: PropsWithChildren) => {
);
const resizing = useAtomValue(appSidebarResizingAtom);
const LayoutComponent = environment.isElectron
? DesktopLayout
: BrowserLayout;
return (
<AppContainer data-current-path={currentPath} resizing={resizing}>

4
packages/frontend/core/src/mixpanel/mixpanel.ts
View File

@ -35,8 +35,8 @@ function createMixpanel() {
appVersion: BUILD_CONFIG.appVersion,
environment: BUILD_CONFIG.appBuildType,
editorVersion: BUILD_CONFIG.editorVersion,
isSelfHosted: Boolean(BUILD_CONFIG.isSelfHosted),
isDesktop: environment.isElectron,
isSelfHosted: BUILD_CONFIG.isSelfHosted,
isDesktop: BUILD_CONFIG.isElectron,
});
},
reset() {

9
packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx
View File

@ -303,7 +303,8 @@ export const AppTabsHeader = ({
const sidebarWidth = useAtomValue(appSidebarWidthAtom);
const sidebarOpen = useAtomValue(appSidebarOpenAtom);
const sidebarResizing = useAtomValue(appSidebarResizingAtom);
const isMacosDesktop = environment.isElectron && environment.isMacOs;
const isMacosDesktop = BUILD_CONFIG.isElectron && environment.isMacOs;
const isWindowsDesktop = BUILD_CONFIG.isElectron && environment.isWindows;
const fullScreen = useIsFullScreen();
const tabsHeaderService = useService(AppTabsHeaderService);
@ -412,7 +413,7 @@ export const AppTabsHeader = ({
className={clsx(styles.root, className)}
style={style}
data-mode={mode}
data-is-windows={environment.isElectron && environment.isWindows}
data-is-windows={isWindowsDesktop}
>
<div
style={{
@ -473,9 +474,9 @@ export const AppTabsHeader = ({
<IconButton size="24" onClick={onToggleRightSidebar}>
<RightSidebarIcon />
</IconButton>
{environment.isElectron && environment.isWindows ? (
{isWindowsDesktop && (
<div className={styles.windowsAppControlsPlaceholder} />
) : null}
)}
</div>
);
};

2
packages/frontend/core/src/modules/cloud/services/auth.ts
View File

@ -91,7 +91,7 @@ export class AuthService extends Service {
email,
// we call it [callbackUrl] instead of [redirect_uri]
// to make it clear the url is used to finish the sign-in process instead of redirect after signed-in
callbackUrl: `/magic-link?client=${environment.isElectron ? appInfo?.schema : 'web'}`,
callbackUrl: `/magic-link?client=${BUILD_CONFIG.isElectron ? appInfo?.schema : 'web'}`,
}),
headers: {
'content-type': 'application/json',

2
packages/frontend/core/src/modules/cloud/services/fetch.ts
View File

@ -5,7 +5,7 @@ import { fromPromise, Service } from '@toeverything/infra';
import { BackendError, NetworkError } from '../error';
export function getAffineCloudBaseUrl(): string {
if (environment.isElectron) {
if (BUILD_CONFIG.isElectron) {
return BUILD_CONFIG.serverUrlPrefix;
}
const { protocol, hostname, port } = window.location;

2
packages/frontend/core/src/modules/cloud/stores/subscription.ts
View File

@ -28,7 +28,7 @@ const getDefaultSubscriptionSuccessCallbackLink = (
plan === SubscriptionPlan.AI ? '/ai-upgrade-success' : '/upgrade-success';
const urlString = getAffineCloudBaseUrl() + path;
const url = new URL(urlString);
if (environment.isElectron && appInfo) {
if (BUILD_CONFIG.isElectron && appInfo) {
url.searchParams.set('schema', appInfo.schema);
}
return url.toString();

2
packages/frontend/core/src/modules/explorer/views/nodes/collection/operations.tsx
View File

@ -183,7 +183,7 @@ export const useExplorerCollectionNodeOperations = (
</MenuItem>
),
},
...(environment.isElectron && enableMultiView
...(BUILD_CONFIG.isElectron && enableMultiView
? [
{
index: 99,

2
packages/frontend/core/src/modules/explorer/views/nodes/doc/operations.tsx
View File

@ -192,7 +192,7 @@ export const useExplorerDocNodeOperations = (
</MenuItem>
),
},
...(enableMultiView && environment.isElectron
...(BUILD_CONFIG.isElectron && enableMultiView
? [
{
index: 100,

2
packages/frontend/core/src/modules/explorer/views/nodes/tag/operations.tsx
View File

@ -119,7 +119,7 @@ export const useExplorerTagNodeOperations = (
</MenuItem>
),
},
...(enableMultiView && environment.isElectron
...(BUILD_CONFIG.isElectron && enableMultiView
? [
{
index: 100,

4
packages/frontend/core/src/modules/navigation/entities/navigator.ts
View File

@ -40,7 +40,7 @@ export class Navigator extends Entity {
);
back() {
if (!environment.isElectron) {
if (!BUILD_CONFIG.isElectron) {
window.history.back();
} else {
this.history$.value.back();
@ -48,7 +48,7 @@ export class Navigator extends Entity {
}
forward() {
if (!environment.isElectron) {
if (!BUILD_CONFIG.isElectron) {
window.history.forward();
} else {
this.history$.value.forward();

12
packages/frontend/core/src/modules/navigation/view/navigation-buttons.tsx
View File

@ -10,6 +10,14 @@ import * as styles from './navigation-buttons.css';
const tooltipSideBottom = { side: 'bottom' as const };
export const NavigationButtons = () => {
if (!BUILD_CONFIG.isElectron) {
return null;
}
return <ElectronNavigationButtons />;
};
const ElectronNavigationButtons = () => {
const t = useI18n();
const navigator = useService(NavigatorService).navigator;
@ -44,10 +52,6 @@ export const NavigationButtons = () => {
};
}, [navigator]);
if (!environment.isElectron) {
return null;
}
return (
<div className={styles.container}>
<IconButton

2
packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx
View File

@ -129,7 +129,7 @@ export const DocPeekViewControls = ({
peekView.close('none');
},
},
environment.isElectron && {
BUILD_CONFIG.isElectron && {
icon: <SplitViewIcon />,
nameKey: 'split-view',
name: t['com.affine.peek-view-controls.open-doc-in-split-view'](),

2
packages/frontend/core/src/modules/workbench/services/desktop-state-synchronizer.ts
View File

@ -13,7 +13,7 @@ export class DesktopStateSynchronizer extends Service {
}
startSync = () => {
if (!environment.isElectron) {
if (!BUILD_CONFIG.isElectron) {
return;
}

4
packages/frontend/core/src/modules/workbench/view/route-container.tsx
View File

@ -54,7 +54,7 @@ export const RouteContainer = () => {
return (
<div className={styles.root}>
<div className={styles.header}>
{viewPosition.isFirst && !environment.isElectron && (
{!BUILD_CONFIG.isElectron && viewPosition.isFirst && (
<SidebarSwitch
show={!leftSidebarOpen}
className={styles.leftSidebarButton}
@ -64,7 +64,7 @@ export const RouteContainer = () => {
viewId={view.id}
className={styles.viewHeaderContainer}
/>
{viewPosition.isLast && !environment.isElectron && (
{!BUILD_CONFIG.isElectron && viewPosition.isLast && (
<ToggleButton
show={!sidebarOpen}
className={styles.rightSidebarButton}

2
packages/frontend/core/src/modules/workbench/view/sidebar/sidebar-container.tsx
View File

@ -38,7 +38,7 @@ export const SidebarContainer = ({
viewId={view.id}
className={clsx(
styles.sidebarBodyTarget,
!environment.isElectron && styles.borderTop
!BUILD_CONFIG.isElectron && styles.borderTop
)}
/>
))

2
packages/frontend/core/src/modules/workbench/view/sidebar/sidebar-header.tsx
View File

@ -44,7 +44,7 @@ export const Header = ({ floating, children, onToggle }: HeaderProps) => {
return (
<Container className={styles.header} floating={floating}>
{children}
{!environment.isElectron && (
{!BUILD_CONFIG.isElectron && (
<>
<div className={styles.spacer} />
<ToggleButton onToggle={onToggle} />

2
packages/frontend/core/src/modules/workbench/view/workbench-link.tsx
View File

@ -40,7 +40,7 @@ export const WorkbenchLink = forwardRef<HTMLAnchorElement, WorkbenchLinkProps>(
}
const at = (() => {
if (isNewTabTrigger(event)) {
return event.altKey && enableMultiView && environment.isElectron
return BUILD_CONFIG.isElectron && event.altKey && enableMultiView
? 'tail'
: 'new-tab';
}

2
packages/frontend/core/src/modules/workbench/view/workbench-root.tsx
View File

@ -22,7 +22,7 @@ import { ViewIslandRegistryProvider } from './view-islands';
import { ViewRoot } from './view-root';
import * as styles from './workbench-root.css';
const useAdapter = environment.isElectron
const useAdapter = BUILD_CONFIG.isElectron
? useBindWorkbenchToDesktopRouter
: useBindWorkbenchToBrowserRouter;

2
packages/frontend/core/src/modules/workspace-engine/impls/local.ts
View File

@ -51,7 +51,7 @@ export class LocalWorkspaceFlavourProvider
JSON.stringify(allWorkspaceIDs.filter(x => x !== id))
);
if (apis && environment.isElectron) {
if (BUILD_CONFIG.isElectron && apis) {
await apis.workspace.delete(id);
}

2
packages/frontend/core/src/pages/auth/common.ts
View File

@ -5,5 +5,5 @@ export const supportedClient = z.enum([
'affine',
'affine-canary',
'affine-beta',
...(environment.isDebug ? ['affine-dev'] : []),
...(BUILD_CONFIG.debug ? ['affine-dev'] : []),
]);

5
packages/frontend/core/src/pages/auth/sign-in.tsx
View File

@ -1,7 +1,6 @@
import { AffineOtherPageLayout } from '@affine/component/affine-other-page-layout';
import { SignInPageContainer } from '@affine/component/auth-components';
import { AuthService } from '@affine/core/modules/cloud';
import { appInfo } from '@affine/electron-api';
import { useLiveData, useService } from '@toeverything/infra';
import { useEffect } from 'react';
// eslint-disable-next-line @typescript-eslint/no-restricted-imports
@ -20,10 +19,6 @@ export const SignIn = () => {
const isLoggedIn = status === 'authenticated' && !isRevalidating;
useEffect(() => {
if (environment.isElectron && appInfo?.windowName === 'hidden-window') {
return;
}
if (isLoggedIn) {
const redirectUri = searchParams.get('redirect_uri');
if (redirectUri) {

4
packages/frontend/core/src/pages/onboarding.tsx
View File

@ -11,7 +11,7 @@ import {
import { RouteLogic, useNavigateHelper } from '../hooks/use-navigate-helper';
export const loader = () => {
if (!environment.isElectron && !appConfigStorage.get('onBoarding')) {
if (!BUILD_CONFIG.isElectron && !appConfigStorage.get('onBoarding')) {
// onboarding is off, redirect to index
return redirect('/');
}
@ -24,7 +24,7 @@ export const Component = () => {
const [, setOnboarding] = useAppConfigStorage('onBoarding');
const openApp = useCallback(() => {
if (environment.isElectron) {
if (BUILD_CONFIG.isElectron) {
assertExists(apis);
apis.ui.handleOpenMainApp().catch(err => {
console.log('failed to open main app', err);

3
packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
View File

@ -204,7 +204,6 @@ const DetailPageImpl = memo(function DetailPageImpl() {
);
const [refCallback, hasScrollTop] = useHasScrollTop();
const dynamicTopBorder = environment.isElectron;
const openOutlinePanel = useCallback(() => {
workbench.openSidebar();
@ -219,7 +218,7 @@ const DetailPageImpl = memo(function DetailPageImpl() {
<ViewBody>
<div
className={styles.mainContainer}
data-dynamic-top-border={dynamicTopBorder}
data-dynamic-top-border={BUILD_CONFIG.isElectron}
data-has-scroll-top={hasScrollTop}
>
{/* Add a key to force rerender when page changed, to avoid error boundary persisting. */}

4
packages/frontend/core/src/pages/workspace/detail-page/use-header-responsive.ts
View File

@ -20,10 +20,10 @@ export const useDetailPageHeaderResponsive = (availableWidth: number) => {
const hideToday = availableWidth < 300;
const showDivider =
!BUILD_CONFIG.isElectron &&
viewPosition.isLast &&
!rightSidebarOpen &&
!(hidePresent && hideShare) &&
!environment.isElectron;
!(hidePresent && hideShare);
return {
hideShare,

4
packages/frontend/core/src/pages/workspace/index.tsx
View File

@ -99,8 +99,8 @@ export const Component = (): ReactElement => {
if (workspaceNotFound) {
if (
detailDocRoute /* */ &&
!environment.isElectron /* only browser has share page */
!BUILD_CONFIG.isElectron /* only browser has share page */ &&
detailDocRoute
) {
return (
<SharePage

4
packages/frontend/core/src/providers/modal-provider.tsx
View File

@ -62,7 +62,7 @@ export const Setting = () => {
);
useEffect(() => {
if (environment.isElectron) {
if (BUILD_CONFIG.isElectron) {
return events?.applicationMenu.openAboutPageInSettingModal(() =>
setOpenSettingModalAtom({
activeTab: 'about',
@ -120,7 +120,7 @@ export function CurrentWorkspaceModals() {
)}
<AiLoginRequiredModal />
<PeekViewManagerModal />
{environment.isElectron && <FindInPageModal />}
{BUILD_CONFIG.isElectron && <FindInPageModal />}
<MoveToTrash.ConfirmModal
open={trashConfirmOpen}
onConfirm={handleOnConfirm}

2
packages/frontend/graphql/src/index.ts
View File

@ -10,7 +10,7 @@ import { gqlFetcherFactory } from './fetcher';
setupGlobal();
export function getBaseUrl(): string {
if (environment.isElectron) {
if (BUILD_CONFIG.isElectron) {
return BUILD_CONFIG.serverUrlPrefix;
}
if (typeof window === 'undefined') {

4
scripts/setup/global.ts
View File

@ -1,7 +1,7 @@
import { getRuntimeConfig } from '@affine/cli/src/webpack/runtime-config';
import { getBuildConfig } from '@affine/cli/src/webpack/runtime-config';
import { setupGlobal } from '@affine/env/global';
globalThis.BUILD_CONFIG = getRuntimeConfig({
globalThis.BUILD_CONFIG = getBuildConfig({
distribution: 'web',
mode: 'development',
channel: 'canary',

2
tools/@types/env/__all.d.ts vendored
View File

@ -1,3 +1,5 @@
import '@affine/env/constant';
import type { BUILD_CONFIG_TYPE, Environment } from '@affine/env/global';
declare global {

15
tools/cli/src/webpack/runtime-config.ts
View File

@ -3,11 +3,23 @@ import type { BUILD_CONFIG_TYPE } from '@affine/env/global';
import packageJson from '../../package.json' assert { type: 'json' };
import type { BuildFlags } from '../config';
export function getRuntimeConfig(buildFlags: BuildFlags): BUILD_CONFIG_TYPE {
export function getBuildConfig(buildFlags: BuildFlags): BUILD_CONFIG_TYPE {
const buildPreset: Record<BuildFlags['channel'], BUILD_CONFIG_TYPE> = {
get stable() {
return {
debug: buildFlags.mode === 'development',
distribution: buildFlags.distribution,
isDesktopEdition: (
['web', 'desktop', 'admin'] as BuildFlags['distribution'][]
).includes(buildFlags.distribution),
isMobileEdition: (['mobile'] as BuildFlags['distribution'][]).includes(
buildFlags.distribution
),
isElectron: buildFlags.distribution === 'desktop',
isWeb: buildFlags.distribution === 'web',
isMobileWeb: buildFlags.distribution === 'mobile',
isSelfHosted: process.env.SELF_HOSTED === 'true',
appBuildType: 'stable' as const,
serverUrlPrefix: 'https://app.affine.pro',
appVersion: packageJson.version,
@ -87,7 +99,6 @@ export function getRuntimeConfig(buildFlags: BuildFlags): BUILD_CONFIG_TYPE {
}
return {
isSelfHosted: process.env.SELF_HOSTED === 'true',
...currentBuildPreset,
// environment preset will overwrite current build preset
// this environment variable is for debug proposes only

6
tools/cli/src/webpack/webpack.config.ts
View File

@ -9,7 +9,7 @@ import webpack from 'webpack';
import { merge } from 'webpack-merge';
import { createConfiguration, rootPath, workspaceRoot } from './config.js';
import { getRuntimeConfig } from './runtime-config.js';
import { getBuildConfig } from './runtime-config.js';
const DESCRIPTION = `There can be more than Notion and Miro. AFFiNE is a next-gen knowledge base that brings planning, sorting and creating all together.`;
@ -31,8 +31,8 @@ const gitShortHash = once(() => {
export function createWebpackConfig(cwd: string, flags: BuildFlags) {
console.log('build flags', flags);
const runtimeConfig = getRuntimeConfig(flags);
console.log('runtime config', runtimeConfig);
const runtimeConfig = getBuildConfig(flags);
console.log('BUILD_CONFIG', runtimeConfig);
const config = createConfiguration(cwd, flags, runtimeConfig);
const entry =
typeof flags.entry === 'string' || !flags.entry