Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-23 13:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: optional provider

Browse Source
This commit is contained in:
DarkSky
2022-08-12 16:54:47 +08:00
parent 57b8263acd
commit edfa95057b
11 changed files with 267 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
libs/components/account/src/login/fs.tsx
+1 -7
View File
@@ -46,7 +46,7 @@ const requestPermission = async (workspace: string) => {
};
export const FileSystem = (props: { onError: () => void }) => {
const onSelected = useLocalTrigger();
const [, onSelected] = useLocalTrigger();
const apiSupported = useMemo(() => {
try {
@@ -56,12 +56,6 @@ export const FileSystem = (props: { onError: () => void }) => {
}
}, []);
useEffect(() => {
if (process.env['NX_E2E']) {
onSelected();
}
}, []);
return (
<MuiButton
variant="outlined"
libs/components/account/src/login/index.tsx
+1 -2
View File
@@ -21,7 +21,7 @@ export function Login() {
<MuiSnackbar
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
open={error}
message="Login failed, please check if you have permission"
message="Request File Permission failed, please check if you have permission"
/>
<MuiGrid item xs={8}>
<Error
@@ -32,7 +32,6 @@ export function Login() {
</MuiGrid>
<MuiGrid item xs={4}>
{' '}
<MuiBox
style={{
display: 'flex',
libs/components/layout/src/header/FileSystem.tsx
+112
View File
@@ -0,0 +1,112 @@
/* eslint-disable filename-rules/match */
import { useCallback, useMemo, useState } from 'react';
import { IconButton, MuiSnackbar, styled } from '@toeverything/components/ui';
import { services } from '@toeverything/datasource/db-service';
import { useLocalTrigger } from '@toeverything/datasource/state';
import { CloseIcon } from '@toeverything/components/common';
const cleanupWorkspace = (workspace: string) =>
new Promise((resolve, reject) => {
const req = indexedDB.deleteDatabase(workspace);
req.addEventListener('error', e => reject(e));
req.addEventListener('blocked', e => reject(e));
req.addEventListener('upgradeneeded', e => reject(e));
req.addEventListener('success', e => resolve(e));
});
const requestPermission = async (workspace: string) => {
await cleanupWorkspace(workspace);
const dirHandler = await window.showDirectoryPicker({
id: 'AFFiNE_' + workspace,
mode: 'readwrite',
startIn: 'documents',
});
const fileHandle = await dirHandler.getFileHandle('affine.db', {
create: true,
});
const file = await fileHandle.getFile();
const initialData = new Uint8Array(await file.arrayBuffer());
const exporter = async (contents: Uint8Array) => {
try {
const writable = await fileHandle.createWritable();
await writable.write(contents);
await writable.close();
} catch (e) {
console.log(e);
}
};
await services.api.editorBlock.setupDataExporter(
workspace,
new Uint8Array(initialData),
exporter
);
};
const StyledFileSystem = styled('div')<{ disabled?: boolean }>({
padding: '10px 12px',
fontWeight: 600,
fontSize: '14px',
color: '#3E6FDB',
textTransform: 'uppercase',
cursor: 'pointer',
'&:hover': {
background: '#F5F7F8',
borderRadius: '5px',
},
});
export const FileSystem = () => {
const [selected, onSelected] = useLocalTrigger();
const [error, setError] = useState(false);
const onError = useCallback(() => {
setError(true);
setTimeout(() => setError(false), 3000);
}, []);
const apiSupported = useMemo(() => {
try {
return 'showOpenFilePicker' in window;
} catch (e) {
return false;
}
}, []);
if (apiSupported && !selected) {
return (
<>
<MuiSnackbar
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
open={error}
message="Request File Permission failed, please check if you have permission"
sx={{ marginTop: '3em' }}
action={
<IconButton
aria-label="close"
onClick={() => setError(false)}
>
<CloseIcon />
</IconButton>
}
/>
<StyledFileSystem
onClick={async () => {
try {
await requestPermission('AFFiNE');
onSelected();
} catch (e) {
onError();
}
}}
>
Sync to Disk
</StyledFileSystem>
</>
);
}
return null;
};
libs/components/layout/src/header/LayoutHeader.tsx
+4 -2
View File
@@ -1,4 +1,4 @@
import { IconButton, styled, MuiButton } from '@toeverything/components/ui';
import { IconButton, styled } from '@toeverything/components/ui';
import {
LogoIcon,
SideBarViewIcon,
@@ -7,8 +7,9 @@ import {
} from '@toeverything/components/icons';
import { useShowSettingsSidebar } from '@toeverything/datasource/state';
import { CurrentPageTitle } from './Title';
import { EditorBoardSwitcher } from './EditorBoardSwitcher';
import { FileSystem } from './FileSystem';
import { CurrentPageTitle } from './Title';
export const LayoutHeader = () => {
const { toggleSettingsSidebar: toggleInfoSidebar, showSettingsSidebar } =
@@ -25,6 +26,7 @@ export const LayoutHeader = () => {
</FlexContainer>
<FlexContainer>
<StyledHelper>
<FileSystem />
<StyledShare disabled={true}>Share</StyledShare>
<div style={{ margin: '0px 12px' }}>
<IconButton
libs/datasource/db-service/src/services/database/index.ts
+6 -7
View File
@@ -37,6 +37,11 @@ async function _getCurrentToken() {
return undefined;
}
const _enabled = {
demo: [],
AFFiNE: ['sqlite'],
} as any;
async function _getBlockDatabase(
workspace: string,
options?: BlockInitOptions
@@ -45,16 +50,10 @@ async function _getBlockDatabase(
await waitLoading(workspace);
}
// if (
// options?.userId &&
// workspaces[workspace]?.getUserId() !== options?.userId
// ) {
// delete workspaces[workspace];
// }
if (!workspaces[workspace]) {
loading.add(workspace);
workspaces[workspace] = await BlockClient.init(workspace, {
enabled: _enabled[workspace] || ['idb'],
...options,
token: await _getCurrentToken(),
});
libs/datasource/jwt/src/adapter/yjs/index.ts
+23 -19
View File
@@ -18,8 +18,6 @@ import {
snapshot,
} from 'yjs';
import { IndexedDBProvider } from '@toeverything/datasource/jwt-rpc';
import {
AsyncDatabaseAdapter,
BlockListener,
@@ -48,15 +46,17 @@ type ConnectivityListener = (
workspace: string,
connectivity: Connectivity
) => void;
type YjsProviders = {
awareness: Awareness;
idb: IndexedDBProvider;
binariesIdb: IndexedDBProvider;
binaries: Doc;
doc: Doc;
gatekeeper: GateKeeper;
connListener: { listeners?: ConnectivityListener };
userId: string;
remoteToken?: string; // remote storage token
};
const _yjsDatabaseInstance = new Map<string, YjsProviders>();
const _asyncInitLoading = new Set<string>();
@@ -90,13 +90,9 @@ async function _initYjsDatabase(
const { userId, token } = options;
const doc = new Doc({ autoLoad: true, shouldLoad: true });
const idb = await new IndexedDBProvider(workspace, doc).whenSynced;
// const idb = await new IndexedDBProvider(workspace, doc).whenSynced;
const binaries = new Doc({ autoLoad: true, shouldLoad: true });
const binariesIdb = await new IndexedDBProvider(
`${workspace}_binaries`,
binaries
).whenSynced;
const awareness = new Awareness(doc);
@@ -114,16 +110,24 @@ async function _initYjsDatabase(
const emitState = (c: Connectivity) =>
connListener.listeners?.(workspace, c);
await Promise.all(
Object.entries(options.provider).map(async ([, p]) =>
p({ awareness, doc, token, workspace, emitState })
)
Object.entries(options.provider).flatMap(async ([, p]) => [
p({ awareness, doc, token, workspace, emitState }),
p({
awareness,
doc: binaries,
token,
workspace: `${workspace}_binaries`,
emitState,
}),
])
);
}
const newInstance = {
awareness,
idb,
binariesIdb,
binaries,
doc,
gatekeeper,
connListener,
userId,
remoteToken: token,
@@ -183,7 +187,7 @@ export class YjsAdapter implements AsyncDatabaseAdapter<YjsContentOperation> {
private constructor(providers: YjsProviders) {
this._provider = providers;
this._doc = providers.idb.doc;
this._doc = providers.doc;
this._awareness = providers.awareness;
this._gatekeeper = providers.gatekeeper;
this._reload = () => {
@@ -201,7 +205,7 @@ export class YjsAdapter implements AsyncDatabaseAdapter<YjsContentOperation> {
});
// @ts-ignore
this._binaries = new YjsRemoteBinaries(
providers.binariesIdb.doc.getMap(),
providers.binaries.getMap(),
providers.remoteToken
);
// @ts-ignore
@@ -336,7 +340,7 @@ export class YjsAdapter implements AsyncDatabaseAdapter<YjsContentOperation> {
});
const [file] = (await fromEvent(handles)) as File[];
const binary = await file.arrayBuffer();
await this._provider.idb.clearData();
// await this._provider.idb.clearData();
const doc = new Doc({ autoLoad: true, shouldLoad: true });
let updated = 0;
let isUpdated = false;
@@ -357,8 +361,8 @@ export class YjsAdapter implements AsyncDatabaseAdapter<YjsContentOperation> {
};
check();
});
await new IndexedDBProvider(this._provider.idb.name, doc)
.whenSynced;
// await new IndexedDBProvider(this._provider.idb.name, doc)
// .whenSynced;
applyUpdate(doc, new Uint8Array(binary));
await update_check;
console.log('load success');
libs/datasource/jwt/src/adapter/yjs/provider.ts
+56 -41
View File
@@ -2,6 +2,7 @@ import { Doc } from 'yjs';
import { Awareness } from 'y-protocols/awareness.js';
import {
IndexedDBProvider,
SQLiteProvider,
WebsocketProvider,
} from '@toeverything/datasource/jwt-rpc';
@@ -19,7 +20,10 @@ type YjsDefaultInstances = {
export type YjsProvider = (instances: YjsDefaultInstances) => Promise<void>;
type ProviderType = 'idb' | 'sqlite' | 'ws';
export type YjsProviderOptions = {
enabled: ProviderType[];
backend: typeof BucketBackend[keyof typeof BucketBackend];
params?: Record<string, string>;
importData?: () => Promise<Uint8Array> | Uint8Array | undefined;
@@ -30,53 +34,64 @@ export type YjsProviderOptions = {
export const getYjsProviders = (
options: YjsProviderOptions
): Record<string, YjsProvider> => {
console.log('getYjsProviders', options);
return {
indexeddb: async (instances: YjsDefaultInstances) => {
if (options.enabled.includes('idb')) {
await new IndexedDBProvider(instances.workspace, instances.doc)
.whenSynced;
}
},
sqlite: async (instances: YjsDefaultInstances) => {
const fsHandle = setInterval(async () => {
if (options.hasExporter?.()) {
clearInterval(fsHandle);
const fs = new SQLiteProvider(
instances.workspace,
instances.doc,
await options.importData?.()
);
if (options.exportData) {
fs.registerExporter(options.exportData);
if (options.enabled.includes('sqlite')) {
const fsHandle = setInterval(async () => {
if (options.hasExporter?.()) {
clearInterval(fsHandle);
const fs = new SQLiteProvider(
instances.workspace,
instances.doc,
await options.importData?.()
);
if (options.exportData) {
fs.registerExporter(options.exportData);
}
await fs.whenSynced;
}
await fs.whenSynced;
}
}, 500);
}, 500);
}
},
ws: async (instances: YjsDefaultInstances) => {
if (instances.token) {
const ws = new WebsocketProvider(
instances.token,
options.backend,
instances.workspace,
instances.doc,
{
awareness: instances.awareness,
params: options.params,
}
) as any; // TODO: type is erased after cascading references
if (options.enabled.includes('ws')) {
if (instances.token) {
const ws = new WebsocketProvider(
instances.token,
options.backend,
instances.workspace,
instances.doc,
{
awareness: instances.awareness,
params: options.params,
}
) as any; // TODO: type is erased after cascading references
// Wait for ws synchronization to complete, otherwise the data will be modified in reverse, which can be optimized later
return new Promise<void>((resolve, reject) => {
// TODO: synced will also be triggered on reconnection after losing sync
// There needs to be an event mechanism to emit the synchronization state to the upper layer
ws.once('synced', () => resolve());
ws.once('lost-connection', () => resolve());
ws.once('connection-error', () => reject());
ws.on('synced', () => instances.emitState('connected'));
ws.on('lost-connection', () =>
instances.emitState('retry')
);
ws.on('connection-error', () =>
instances.emitState('retry')
);
});
} else {
return;
// Wait for ws synchronization to complete, otherwise the data will be modified in reverse, which can be optimized later
return new Promise<void>((resolve, reject) => {
// TODO: synced will also be triggered on reconnection after losing sync
// There needs to be an event mechanism to emit the synchronization state to the upper layer
ws.once('synced', () => resolve());
ws.once('lost-connection', () => resolve());
ws.once('connection-error', () => reject());
ws.on('synced', () => instances.emitState('connected'));
ws.on('lost-connection', () =>
instances.emitState('retry')
);
ws.on('connection-error', () =>
instances.emitState('retry')
);
});
} else {
return;
}
}
},
};
libs/datasource/jwt/src/index.ts
+1
View File
@@ -618,6 +618,7 @@ export class BlockClient<
const instance = await YjsAdapter.init(workspace, {
provider: getYjsProviders({
enabled: [],
backend: BucketBackend.YjsWebSocketAffine,
importData,
exportData,
libs/datasource/state/src/user.ts
+18 -3
View File
@@ -1,3 +1,4 @@
import { useNavigate } from 'react-router';
import {
getAuth,
onAuthStateChanged,
@@ -62,11 +63,17 @@ const BRAND_ID = 'AFFiNE';
const _localTrigger = atom<boolean>(false);
const _useUserAndSpacesForFreeLogin = () => {
const navigate = useNavigate();
const [user, setUser] = useAtom(_userAtom);
const [loading, setLoading] = useAtom(_loadingAtom);
const [localTrigger] = useAtom(_localTrigger);
useEffect(() => setLoading(false), []);
useEffect(() => {
if (loading) {
navigate('/demo');
setLoading(false);
}
}, []);
useEffect(() => {
if (localTrigger) {
@@ -77,6 +84,14 @@ const _useUserAndSpacesForFreeLogin = () => {
nickname: BRAND_ID,
email: '',
});
} else {
setUser({
photo: '',
id: 'demo',
username: 'demo',
nickname: 'demo',
email: '',
});
}
}, [localTrigger, setLoading, setUser]);
@@ -86,8 +101,8 @@ const _useUserAndSpacesForFreeLogin = () => {
};
export const useLocalTrigger = () => {
const [, setTrigger] = useAtom(_localTrigger);
return () => setTrigger(true);
const [trigger, setTrigger] = useAtom(_localTrigger);
return [trigger, () => setTrigger(true)] as [boolean, () => void];
};
export const useUserAndSpaces = process.env['NX_LOCAL']