([]);
const [, , serverSubscribeUpdates] = useDocumentDrives(server);
+ const { readDrives } = useReadModeContext();
const clientErrorHandler = useClientErrorHandler();
- useLoadDefaultDrives();
-
async function checkLatestVersion() {
const result = await isLatestVersion();
if (result === null) return;
@@ -124,10 +123,13 @@ export const useLoadInitialData = () => {
},
[makeUiDriveNodes, setDriveNodes],
);
-
useEffect(() => {
- updateUiDriveNodes(documentDrives).catch(console.error);
- }, [documentDrives, updateUiDriveNodes]);
+ const drives: DocumentDriveDocument[] = [
+ ...readDrives,
+ ...documentDrives,
+ ];
+ updateUiDriveNodes(drives).catch(console.error);
+ }, [documentDrives, readDrives, updateUiDriveNodes]);
useEffect(() => {
const unsub = onSyncStatus(() => updateUiDriveNodes(documentDrives));
diff --git a/src/hooks/useLogin.ts b/src/hooks/useLogin.ts
index f44fa1c6..719b2f73 100644
--- a/src/hooks/useLogin.ts
+++ b/src/hooks/useLogin.ts
@@ -85,7 +85,7 @@ export const useLogin = () => {
({
openRenown,
user,
- status,
+ status: user ? 'authorized' : status,
login: renown ? login : undefined,
logout,
}) as const,
diff --git a/src/hooks/useUiNodes.ts b/src/hooks/useUiNodes.ts
index 377665e7..cd291ce9 100644
--- a/src/hooks/useUiNodes.ts
+++ b/src/hooks/useUiNodes.ts
@@ -16,10 +16,12 @@ import {
UiNode,
useUiNodesContext,
} from '@powerhousedao/design-system';
+import { ReadDrive } from 'document-drive';
import { DocumentDriveDocument } from 'document-model-libs/document-drive';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useModal } from 'src/components/modal';
+import { useReadModeContext } from 'src/context/read-mode';
import { useFileNodeDocument } from 'src/store/document-drive';
import {
useFilteredDocumentModels,
@@ -43,6 +45,7 @@ export function useUiNodes() {
setSelectedNode,
getParentNode,
} = uiNodesContext;
+ const readModeContext = useReadModeContext();
const documentDriveServer = useDocumentDriveServer();
const {
addFolder,
@@ -71,18 +74,29 @@ export function useUiNodes() {
const fileNodeDocument = useFileNodeDocument({
...uiNodesContext,
...documentDriveServer,
+ ...readModeContext,
});
const makeUiDriveNode = useCallback(
- async (drive: DocumentDriveDocument) => {
+ async (drive: DocumentDriveDocument | ReadDrive) => {
+ const isReadDrive = 'readContext' in drive;
const { id, name, icon, slug } = drive.state.global;
- const { sharingType: _sharingType, availableOffline } =
- drive.state.local;
+ const { sharingType: _sharingType, availableOffline } = !isReadDrive
+ ? drive.state.local
+ : { sharingType: PUBLIC, availableOffline: false };
const __sharingType = _sharingType?.toUpperCase();
const sharingType = (
__sharingType === 'PRIVATE' ? LOCAL : __sharingType
) as SharingType;
- const driveSyncStatus = await getSyncStatus(id, sharingType);
+ const driveSyncStatus = !isReadDrive
+ ? await getSyncStatus(id, sharingType)
+ : undefined;
+
+ // TODO: rempve this after integration in design-system
+ const normalizedDriveSyncStatus =
+ driveSyncStatus === 'INITIAL_SYNC'
+ ? 'SYNCING'
+ : driveSyncStatus;
const driveNode: UiDriveNode = {
id,
@@ -92,7 +106,7 @@ export function useUiNodes() {
children: [],
nodeMap: {},
sharingType,
- syncStatus: driveSyncStatus,
+ syncStatus: normalizedDriveSyncStatus,
availableOffline,
icon,
parentFolder: null,
@@ -106,7 +120,7 @@ export function useUiNodes() {
driveId: id,
parentFolder: n.parentFolder || id,
kind: n.kind.toUpperCase(),
- syncStatus: driveSyncStatus,
+ syncStatus: normalizedDriveSyncStatus,
sharingType,
};
@@ -130,10 +144,20 @@ export function useUiNodes() {
for await (const node of nodes) {
if (node.kind === FILE) {
- node.syncStatus = await getSyncStatus(
- node.synchronizationUnits[0].syncId,
- sharingType,
- );
+ const fileSyncStatus = !isReadDrive
+ ? await getSyncStatus(
+ node.synchronizationUnits[0].syncId,
+ sharingType,
+ )
+ : undefined;
+
+ // TODO: rempve this after integration in design-system
+ const normalizedFileSyncStatus =
+ fileSyncStatus === 'INITIAL_SYNC'
+ ? 'SYNCING'
+ : fileSyncStatus;
+
+ node.syncStatus = normalizedFileSyncStatus;
}
if (node.parentFolder === id) {
@@ -222,10 +246,13 @@ export function useUiNodes() {
if (parentNode.kind === FILE) {
throw new Error('Cannot add file to a file');
}
+
+ const fileName = file.name.replace(/\.zip$/gim, '');
+
return await addFile(
file,
parentNode.driveId,
- file.name,
+ fileName,
parentNode.id,
);
},
diff --git a/src/hooks/useUserPermissions.ts b/src/hooks/useUserPermissions.ts
index e17beb4c..2091c515 100644
--- a/src/hooks/useUserPermissions.ts
+++ b/src/hooks/useUserPermissions.ts
@@ -1,7 +1,13 @@
import { useAllowList } from './useAllowList';
export function useUserPermissions() {
- const { isAllowed, allowListType } = useAllowList();
+ const allowList = useAllowList();
+
+ if (!allowList) {
+ return undefined;
+ }
+
+ const { allowListType, isAllowed } = allowList;
if (allowListType === 'arbitrum') {
return {
diff --git a/src/hooks/utils.ts b/src/hooks/utils.ts
index cd8b99f1..d3e8b9e5 100644
--- a/src/hooks/utils.ts
+++ b/src/hooks/utils.ts
@@ -1,4 +1,5 @@
-import { version as currentVersion } from '../../package.json';
+const currentVersion = import.meta.env.APP_VERSION;
+
export const isElectron = window.navigator.userAgent.includes('Electron');
export const isMac = window.navigator.appVersion.includes('Mac');
diff --git a/src/pages/content.tsx b/src/pages/content.tsx
index 75911cc3..526246c9 100644
--- a/src/pages/content.tsx
+++ b/src/pages/content.tsx
@@ -32,6 +32,7 @@ const Content = () => {
selectedParentNode,
isRemoteDrive,
isAllowedToCreateDocuments,
+ fileNodeDocument,
selectedDocument,
documentModels,
setSelectedNode,
@@ -151,13 +152,15 @@ const Content = () => {
className="flex h-full flex-col overflow-auto bg-gray-100 p-6"
id="content-view"
>
- {selectedDocument ? (
+ {fileNodeDocument ? (
exportDocument(selectedDocument)}
+ onExport={() =>
+ selectedDocument && exportDocument(selectedDocument)
+ }
onAddOperation={handleAddOperationToSelectedDocument}
{...(isRemoteDrive && { onOpenSwitchboardLink })}
/>
diff --git a/src/renderer.ts b/src/renderer.ts
index 3aab81b3..b504cefa 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -33,10 +33,15 @@ import './index.css';
import { DocumentEditorDebugTools } from './utils/document-editor-debug-tools';
import serviceWorkerManager from './utils/registerServiceWorker';
+const AppElement = document.getElementById('app');
+if (!AppElement) {
+ throw new Error('#app element not found!');
+}
+
if (import.meta.env.MODE === 'development') {
window.documentEditorDebugTools = new DocumentEditorDebugTools();
} else {
serviceWorkerManager.registerServiceWorker(false);
}
-createRoot(document.getElementById('app')!).render(App);
+createRoot(AppElement).render(App);
diff --git a/src/service-worker.ts b/src/service-worker.ts
new file mode 100644
index 00000000..e199dfd6
--- /dev/null
+++ b/src/service-worker.ts
@@ -0,0 +1,124 @@
+///
+
+import {
+ ServiceWorkerEvent,
+ ServiceWorkerManagerMessage,
+} from './utils/registerServiceWorker';
+
+const _self = self as unknown as ServiceWorkerGlobalScope;
+
+const VERSION_CHECK_INTERVAL =
+ parseInt(import.meta.env.PH_CONNECT_VERSION_CHECK_INTERVAL as string) ||
+ 5 * 60 * 1000; // 5 minutes;
+const VERSION_CACHE = 'version-cache';
+const VERSION_KEY = 'app-version';
+
+_self.addEventListener('install', () => {
+ _self.skipWaiting().catch(console.error);
+});
+
+_self.addEventListener('activate', (event: ExtendableEvent) => {
+ event.waitUntil(_self.clients.claim());
+});
+
+export type NEW_VERSION_AVAILABLE_MESSAGE = {
+ type: 'NEW_VERSION_AVAILABLE';
+ requiresHardRefresh: boolean;
+};
+
+export type ServiceWorkerMessageData = NEW_VERSION_AVAILABLE_MESSAGE;
+
+export type ServiceWorkerMessage = ServiceWorkerEvent;
+
+interface VersionResponse {
+ version: string;
+ requiresHardRefresh: boolean;
+}
+
+function postMessage(client: Client, message: ServiceWorkerMessageData) {
+ return client.postMessage(message);
+}
+
+_self.addEventListener('message', async event => {
+ const message =
+ 'type' in event.data ? (event as ServiceWorkerManagerMessage) : null;
+ switch (message?.data.type) {
+ case 'SET_APP_VERSION': {
+ const cache = await caches.open(VERSION_CACHE);
+ await cache.put(VERSION_KEY, new Response(message.data.version));
+ break;
+ }
+ case 'NETWORK_STATUS': {
+ message.data.online
+ ? startCheckingForUpdates()
+ : stopCheckingForUpdates();
+ break;
+ }
+ default: {
+ console.warn('Unhandled message:', message);
+ break;
+ }
+ }
+});
+
+async function checkForUpdates(basePath: string) {
+ try {
+ const response = await fetch(new URL('./version.json', basePath), {
+ cache: 'no-store',
+ });
+ const newVersion = (await response.json()) as VersionResponse;
+ const cache = await caches.open(VERSION_CACHE);
+ const cachedResponse = await cache.match(VERSION_KEY);
+
+ let currentVersion = '';
+
+ if (cachedResponse) {
+ currentVersion = await cachedResponse.text();
+ }
+
+ if (currentVersion === '') {
+ // Initial cache
+ await cache.put(VERSION_KEY, new Response(newVersion.version));
+ } else if (currentVersion !== newVersion.version) {
+ // New version detected
+ console.log('Current version:', currentVersion);
+ console.log('New version:', newVersion.version);
+
+ const clients = await _self.clients.matchAll();
+ clients.forEach(client => {
+ postMessage(client, {
+ type: 'NEW_VERSION_AVAILABLE',
+ requiresHardRefresh: newVersion.requiresHardRefresh,
+ });
+ });
+
+ // Update the stored version
+ await cache.put(VERSION_KEY, new Response(newVersion.version));
+ }
+ } catch (error) {
+ console.error('Error checking version:', error);
+ }
+}
+
+let checkUpdatesInterval: number | undefined;
+function startCheckingForUpdates() {
+ stopCheckingForUpdates();
+ const basePath = _self.registration.scope;
+
+ // does the initial check right away
+ setTimeout(() => checkForUpdates(basePath), 0);
+
+ // Check for updates every 5 minutes
+ checkUpdatesInterval = setInterval(
+ () => checkForUpdates(basePath),
+ VERSION_CHECK_INTERVAL,
+ ) as unknown as number;
+}
+
+function stopCheckingForUpdates() {
+ if (checkUpdatesInterval) {
+ clearInterval(checkUpdatesInterval);
+ }
+}
+
+startCheckingForUpdates();
diff --git a/src/services/renown/constants.ts b/src/services/renown/constants.ts
index 5462e1ea..762af7a9 100644
--- a/src/services/renown/constants.ts
+++ b/src/services/renown/constants.ts
@@ -1,9 +1,9 @@
export const RENOWN_URL =
- (import.meta.env.VITE_RENOWN_URL as string) || 'https://www.renown.id';
+ import.meta.env.PH_CONNECT_RENOWN_URL || 'https://www.renown.id';
export const RENOWN_NETWORK_ID =
- (import.meta.env.VITE_RENOWN_NETWORK_ID as string) || 'eip155';
+ import.meta.env.PH_CONNECT_RENOWN_NETWORK_ID || 'eip155';
export const RENOWN_CHAIN_ID =
- (import.meta.env.VITE_RENOWN_CHAIN_ID as string) || '1';
+ import.meta.env.PH_CONNECT_RENOWN_CHAIN_ID || '1';
export const DOMAIN_TYPE = [
{ name: 'name', type: 'string' },
diff --git a/src/services/renown/index.ts b/src/services/renown/index.ts
index 8f3cc984..e2b8c395 100644
--- a/src/services/renown/index.ts
+++ b/src/services/renown/index.ts
@@ -66,12 +66,16 @@ export class Renown {
credential,
};
- try {
- const ens = await getEnsInfo(user.address, user.chainId);
- user.ens = ens;
- } catch (error) {
- console.error(error);
- }
+ getEnsInfo(user.address, user.chainId)
+ .then(ens => {
+ if (
+ this.user?.address === user.address &&
+ this.user.chainId === user.chainId
+ ) {
+ this.#updateUser({ ...this.user, ens });
+ }
+ })
+ .catch(logger.error);
this.#updateUser(user);
return user;
@@ -101,13 +105,13 @@ export class Renown {
if (!this.#baseUrl) {
throw new Error('RENOWN_URL is not set');
}
-
- const response = await fetch(
- `${this.#baseUrl}/api/auth/credential?address=${encodeURIComponent(address)}&chainId=${encodeURIComponent(chainId)}&connectId=${encodeURIComponent(connectId)}`,
- {
- method: 'GET',
- },
+ const url = new URL(
+ `/api/auth/credential?address=${encodeURIComponent(address)}&chainId=${encodeURIComponent(chainId)}&connectId=${encodeURIComponent(connectId)}`,
+ this.#baseUrl,
);
+ const response = await fetch(url, {
+ method: 'GET',
+ });
if (response.ok) {
const result = (await response.json()) as {
credential: PowerhouseVerifiableCredential;
diff --git a/src/store/document-drive.ts b/src/store/document-drive.ts
index 3021e330..9c5400a9 100644
--- a/src/store/document-drive.ts
+++ b/src/store/document-drive.ts
@@ -1,7 +1,12 @@
import { FILE, TUiNodesContext } from '@powerhousedao/design-system';
import { Document, Operation } from 'document-model/document';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { atom, useAtom, useAtomValue } from 'jotai';
+import { selectAtom } from 'jotai/utils';
+import { useCallback, useEffect, useMemo } from 'react';
+import { IReadModeContext } from 'src/context/read-mode';
+import { documentToHash } from 'src/hooks/useDocumentDrives';
import { TDocumentDriveServer } from 'src/hooks/useDocumentDriveServer';
+import { logger } from 'src/services/logger';
function debounceOperations(
callback: (operations: Operation[]) => Promise,
@@ -43,74 +48,232 @@ function debounceOperations(
};
}
+type FileNodeDocument =
+ | {
+ driveId: string;
+ documentId: string;
+ documentType: string;
+ document: Document | undefined;
+ status: 'LOADING' | 'ERROR';
+ }
+ | {
+ driveId: string;
+ documentId: string;
+ documentType: string;
+ document: Document;
+ status: 'LOADED';
+ }
+ | undefined;
+
+const documentCacheAtom = atom(new Map());
+
+const singletonFileNodeDocumentAtom = atom(undefined);
+const fileNodeDocumentAtom = atom(
+ get => get(singletonFileNodeDocumentAtom),
+ (get, set, newValue: FileNodeDocument) => {
+ const currentValue = get(singletonFileNodeDocumentAtom);
+
+ // if document will be loaded then sets
+ // the cached version while it loads
+ const documentCache = get(documentCacheAtom);
+ if (!newValue?.document && newValue?.status === 'LOADING') {
+ newValue.document = documentCache.get(
+ `${newValue.driveId}:${newValue.documentId}`,
+ );
+ }
+
+ // only change if the provided file node is different
+ if (
+ currentValue?.driveId !== newValue?.driveId ||
+ currentValue?.documentId !== newValue?.documentId ||
+ currentValue?.documentType !== newValue?.documentType ||
+ currentValue?.status !== newValue?.status ||
+ !!currentValue?.document !== !!newValue?.document ||
+ (currentValue?.document &&
+ newValue?.document &&
+ documentToHash(currentValue.document) !==
+ documentToHash(newValue.document))
+ ) {
+ // if document has been fetched then updates the cache
+ if (newValue?.status === 'LOADED') {
+ documentCache.set(
+ `${newValue.driveId}:${newValue.documentId}`,
+ newValue.document,
+ );
+ }
+
+ set(singletonFileNodeDocumentAtom, newValue);
+ return true;
+ }
+
+ return false;
+ },
+);
+
+const selectedDocumentAtom = selectAtom(
+ fileNodeDocumentAtom,
+ fileNode => fileNode?.document,
+);
+
export function useFileNodeDocument(
- props: TUiNodesContext & TDocumentDriveServer,
+ props: TUiNodesContext & TDocumentDriveServer & IReadModeContext,
) {
- const { selectedNode, openFile, addOperations, onStrandUpdate } = props;
- const [selectedDocument, setSelectedDocument] = useState<
- Document | undefined
- >();
+ const {
+ selectedNode,
+ selectedDriveNode,
+ openFile,
+ addOperations,
+ onStrandUpdate,
+ fetchDocument: fetchReadDocument,
+ } = props;
+ const [fileNodeDocument, setFileNodeDocument] =
+ useAtom(fileNodeDocumentAtom);
+ const isReadMode = selectedDriveNode?.syncStatus === undefined;
+ const driveId = selectedNode?.driveId;
+ const documentId = selectedNode?.id;
+ const kind = selectedNode?.kind;
+ const documentType =
+ kind === 'FILE' ? selectedNode?.documentType : undefined;
- const fetchDocument = useCallback(async () => {
- if (selectedNode?.kind !== FILE) {
- return;
- }
- try {
- const document = await openFile(
- selectedNode.driveId,
- selectedNode.id,
- );
- setSelectedDocument(document);
- } catch (error) {
- setSelectedDocument(undefined);
- console.error(error);
+ const selectedDocument = useAtomValue(selectedDocumentAtom);
+ const setSelectedDocument = useMemo(() => {
+ function setSelectedDocument(document: Document | undefined) {
+ if (!document) {
+ setFileNodeDocument(undefined);
+ } else if (fileNodeDocument) {
+ setFileNodeDocument({ ...fileNodeDocument, document });
+ } else {
+ throw new Error('fileNodeDocument is undefined');
+ }
}
- }, [openFile, selectedNode?.driveId, selectedNode?.id, selectedNode?.kind]);
+ return setSelectedDocument;
+ }, [fileNodeDocument, setFileNodeDocument]);
+
+ const fetchDocument = useCallback(
+ async (driveId: string, id: string, documentType: string) => {
+ const document = await (isReadMode
+ ? fetchReadDocument(driveId, id, documentType)
+ : openFile(driveId, id));
+ if (document instanceof Error) {
+ throw document;
+ }
+ return document;
+ },
+ [fetchReadDocument, isReadMode, openFile],
+ );
useEffect(() => {
- let handler: (() => void) | undefined = undefined;
- if (selectedNode?.kind === FILE) {
- handler = onStrandUpdate(strand => {
+ // if selected node is undefine then clears fileNodeDocument
+ if (!driveId || !documentId || !documentType) {
+ if (fileNodeDocument) {
+ setFileNodeDocument(undefined);
+ }
+ return;
+ }
+
+ // if selectedNode changes then fetches fileNodeDocument
+ if (
+ driveId !== fileNodeDocument?.driveId ||
+ documentId !== fileNodeDocument.documentId ||
+ documentType !== fileNodeDocument.documentType
+ ) {
+ const changed = setFileNodeDocument({
+ driveId,
+ documentId,
+ documentType,
+ document: undefined,
+ status: 'LOADING',
+ });
+
+ // if the selected file node didn't change then does nothing
+ if (!changed) {
+ return;
+ }
+ fetchDocument(driveId, documentId, documentType)
+ .then(document =>
+ setFileNodeDocument(
+ document
+ ? {
+ driveId,
+ documentId,
+ documentType,
+ document,
+ status: 'LOADED',
+ }
+ : {
+ driveId,
+ documentId,
+ documentType,
+ document,
+ status: 'ERROR',
+ },
+ ),
+ )
+ .catch(error => {
+ logger.error(error);
+ setFileNodeDocument({
+ driveId,
+ documentId,
+ documentType,
+ document: undefined,
+ status: 'ERROR',
+ });
+ });
+
+ // watches for strand updates to update the document
+ const handler = onStrandUpdate(strand => {
if (
- strand.driveId === selectedNode.driveId &&
- strand.documentId === selectedNode.id
+ strand.driveId === driveId &&
+ strand.documentId === documentId
) {
- fetchDocument().catch(console.error);
+ fetchDocument(driveId, documentId, documentType)
+ .then(setSelectedDocument)
+ .catch(logger.error);
}
});
- fetchDocument().catch(console.error);
- } else {
- setSelectedDocument(undefined);
- }
- return () => {
- handler?.();
- };
- }, [fetchDocument, onStrandUpdate, selectedNode]);
+ return () => {
+ handler();
+ };
+ }
+ }, [
+ selectedNode,
+ documentId,
+ documentType,
+ driveId,
+ fetchDocument,
+ fileNodeDocument,
+ onStrandUpdate,
+ setFileNodeDocument,
+ setSelectedDocument,
+ ]);
const addOperationToSelectedDocument = useMemo(() => {
- if (selectedNode?.kind === FILE) {
+ if (driveId && documentId && kind === FILE) {
return debounceOperations(operations =>
- addOperations(
- selectedNode.driveId,
- selectedNode.id,
- operations,
- ),
+ addOperations(driveId, documentId, operations),
);
}
- }, [
- addOperations,
- selectedNode?.driveId,
- selectedNode?.id,
- selectedNode?.kind,
- ]);
+ }, [addOperations, driveId, documentId, kind]);
+
+ const isSelectedDocument =
+ kind === FILE &&
+ fileNodeDocument?.driveId === driveId &&
+ fileNodeDocument?.documentId === documentId;
return useMemo(
() => ({
- selectedDocument,
+ fileNodeDocument,
+ selectedDocument: isSelectedDocument ? selectedDocument : undefined,
setSelectedDocument,
addOperationToSelectedDocument,
}),
- [selectedDocument, setSelectedDocument, addOperationToSelectedDocument],
+ [
+ fileNodeDocument,
+ isSelectedDocument,
+ selectedDocument,
+ setSelectedDocument,
+ addOperationToSelectedDocument,
+ ],
);
}
diff --git a/src/store/user.ts b/src/store/user.ts
index 761c34b0..0c6b31d3 100644
--- a/src/store/user.ts
+++ b/src/store/user.ts
@@ -9,7 +9,7 @@ import type { User } from 'src/services/renown/types';
let userInit = false;
-const userAtom = atom(undefined);
+const userAtom = atom(undefined);
export const useUser = () => {
const [user, setUser] = useAtom(userAtom);
@@ -31,14 +31,14 @@ export const useUser = () => {
renown
?.user()
.then(user => {
- setUser(user);
+ setUser(user || null);
})
.catch(() => {
- setUser(undefined);
+ setUser(null);
});
const unsub = renown?.on.user(user => {
- setUser(user);
+ setUser(user || null);
});
return () => {
diff --git a/src/utils/browser-document-drive.ts b/src/utils/browser-document-drive.ts
index b1cc1769..679c7471 100644
--- a/src/utils/browser-document-drive.ts
+++ b/src/utils/browser-document-drive.ts
@@ -6,12 +6,14 @@ import { BrowserStorage } from 'document-drive/storage/browser';
import { utils } from 'document-model/document';
import { logger } from 'src/services/logger';
import { documentModels } from 'src/store/document-model';
+import { getReactorDefaultDrivesConfig } from './reactor';
export const BrowserDocumentDriveServer = new DocumentDriveServer(
documentModels,
new BrowserStorage(connectConfig.routerBasename),
new InMemoryCache(),
new BaseQueueManager(1, 10),
+ { ...getReactorDefaultDrivesConfig() },
);
async function init() {
diff --git a/src/utils/document-model.ts b/src/utils/document-model.ts
index cf4a5f18..86e59315 100644
--- a/src/utils/document-model.ts
+++ b/src/utils/document-model.ts
@@ -42,7 +42,7 @@ type OnErrorHandler = (error: unknown) => void;
export function useDocumentDispatch(
documentReducer: Reducer | undefined,
- initialState: Document,
+ initialState: Document | undefined,
onError: OnErrorHandler = logger.error,
): readonly [
Document | undefined,
@@ -68,7 +68,7 @@ export function useDocumentDispatch(
) => {
setError(undefined);
setState(_state => {
- if (!documentReducer) return _state;
+ if (!documentReducer || !_state) return _state;
try {
const newState = documentReducer(_state, action);
diff --git a/src/utils/reactor.ts b/src/utils/reactor.ts
new file mode 100644
index 00000000..9c5eb46e
--- /dev/null
+++ b/src/utils/reactor.ts
@@ -0,0 +1,59 @@
+import {
+ DefaultRemoteDriveInput,
+ DocumentDriveServerOptions,
+} from 'document-drive/server';
+
+const DEFAULT_DRIVES_URL =
+ import.meta.env.PH_CONNECT_DEFAULT_DRIVES_URL || undefined;
+const defaultDrivesUrl = DEFAULT_DRIVES_URL
+ ? DEFAULT_DRIVES_URL.split(',')
+ : [];
+
+export const getReactorDefaultDrivesConfig = (): Pick<
+ DocumentDriveServerOptions,
+ 'defaultDrives'
+> => {
+ const remoteDrives: DefaultRemoteDriveInput[] = defaultDrivesUrl.map(
+ driveUrl => ({
+ url: driveUrl,
+ options: {
+ sharingType: 'PUBLIC',
+ availableOffline: true,
+ listeners: [
+ {
+ block: true,
+ callInfo: {
+ data: driveUrl,
+ name: 'switchboard-push',
+ transmitterType: 'SwitchboardPush',
+ },
+ filter: {
+ branch: ['main'],
+ documentId: ['*'],
+ documentType: ['*'],
+ scope: ['global'],
+ },
+ label: 'Switchboard Sync',
+ listenerId: '1',
+ system: true,
+ },
+ ],
+ triggers: [],
+ pullInterval: 3000,
+ },
+ }),
+ );
+
+ return {
+ defaultDrives: {
+ remoteDrives,
+ removeOldRemoteDrives:
+ defaultDrivesUrl.length > 0
+ ? {
+ strategy: 'preserve-by-url',
+ urls: defaultDrivesUrl,
+ }
+ : { strategy: 'preserve-all' },
+ },
+ };
+};
diff --git a/src/utils/registerServiceWorker.ts b/src/utils/registerServiceWorker.ts
index 45dbd781..1b7490a2 100644
--- a/src/utils/registerServiceWorker.ts
+++ b/src/utils/registerServiceWorker.ts
@@ -1,17 +1,36 @@
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-type SET_APP_VERSION_MESSAGE = {
+import connectConfig from 'connect-config';
+import { ServiceWorkerMessage } from 'src/service-worker';
+
+const basePath = connectConfig.routerBasename;
+
+const serviceWorkerScriptPath = [basePath, 'service-worker.js']
+ .join('/')
+ .replace(/\/{2,}/gm, '/');
+
+export interface IServiceWorkerMessageData {
+ type: string;
+}
+
+export interface ServiceWorkerEvent
+ extends ExtendableMessageEvent {
+ data: T;
+}
+
+export type SET_APP_VERSION = {
type: 'SET_APP_VERSION';
version: string;
};
-export type ServiceWorkerPostMessage = SET_APP_VERSION_MESSAGE;
-
-type NEW_VERSION_AVAILABLE_MESSAGE = {
- type: 'NEW_VERSION_AVAILABLE';
- requiresHardRefresh: boolean;
+export type NETWORK_STATUS = {
+ type: 'NETWORK_STATUS';
+ online: boolean;
};
-export type ServiceWorkerMessage = NEW_VERSION_AVAILABLE_MESSAGE;
+export type ServiceWorkerManagerMessageData = SET_APP_VERSION | NETWORK_STATUS;
+
+export type ServiceWorkerManagerMessage =
+ ServiceWorkerEvent;
class ServiceWorkerManager {
ready = false;
@@ -26,67 +45,93 @@ class ServiceWorkerManager {
this.debug = debug;
}
- registerServiceWorker(debug = false) {
- this.debug = debug;
+ #handleServiceWorkerMessage(event: MessageEvent | ServiceWorkerMessage) {
+ if (this.debug) {
+ console.log('ServiceWorker message: ', event);
+ }
+ const message =
+ 'type' in event.data ? (event as ServiceWorkerMessage) : null;
+ switch (message?.data.type) {
+ case 'NEW_VERSION_AVAILABLE': {
+ if (message.data.requiresHardRefresh) {
+ if (this.debug) {
+ console.log('New version available');
+ }
+ window.location.reload(); // Reload the page to load the new version
+ }
+ break;
+ }
+ default: {
+ console.warn('Unhandled message:', message);
+ break;
+ }
+ }
+ }
- if ('serviceWorker' in navigator) {
- window.addEventListener('load', () => {
- navigator.serviceWorker
- .register('/service-worker.js')
- .then(registration => {
- // Listen for messages from the service worker
- if (this.debug) {
- console.log(
- 'ServiceWorker registered: ',
- registration,
- );
- }
-
- navigator.serviceWorker.addEventListener(
- 'message',
- event => {
- if (this.debug) {
- console.log(
- 'ServiceWorker message: ',
- event,
- );
- }
-
- if (
- event.data &&
- event.data.type ===
- 'NEW_VERSION_AVAILABLE' &&
- event.data.requiresHardRefresh === true
- ) {
- if (this.debug) {
- console.log('New version available');
- }
- window.location.reload(); // Reload the page to load the new version
- }
- },
- );
-
- if (navigator.serviceWorker.controller) {
- navigator.serviceWorker.controller.postMessage({
- type: 'SET_APP_VERSION',
- version: process.env.APP_VERSION,
- });
- }
-
- this.ready = true;
- this.registration = registration;
- })
- .catch(error => {
- console.error(
- 'ServiceWorker registration failed: ',
- error,
- );
+ #handleServiceWorker(registration: ServiceWorkerRegistration) {
+ {
+ // Listen for messages from the service worker
+ if (this.debug) {
+ console.log('ServiceWorker registered: ', registration);
+ }
+
+ navigator.serviceWorker.addEventListener(
+ 'message',
+ this.#handleServiceWorkerMessage.bind(this),
+ );
+
+ this.registration = registration;
+ this.ready = true;
+
+ window.addEventListener('online', () => {
+ if (navigator.serviceWorker.controller) {
+ this.sendMessage({
+ type: 'NETWORK_STATUS',
+ online: true,
});
+ }
+ });
+
+ window.addEventListener('offline', () => {
+ if (navigator.serviceWorker.controller) {
+ this.sendMessage({
+ type: 'NETWORK_STATUS',
+ online: false,
+ });
+ }
});
+
+ if (navigator.serviceWorker.controller) {
+ this.sendMessage({
+ type: 'SET_APP_VERSION',
+ version: import.meta.env.APP_VERSION,
+ });
+ }
+ }
+ }
+
+ registerServiceWorker(debug = false) {
+ this.debug = debug;
+
+ if (!('serviceWorker' in navigator)) {
+ console.warn('Service Worker not available');
+ return;
}
+ window.addEventListener('load', () => {
+ navigator.serviceWorker
+ .register(
+ import.meta.env.MODE === 'development'
+ ? './src/service-worker.ts'
+ : serviceWorkerScriptPath,
+ )
+ .then(this.#handleServiceWorker.bind(this))
+ .catch(error => {
+ console.error('ServiceWorker registration failed: ', error);
+ });
+ });
}
- sendMessage(message: ServiceWorkerPostMessage) {
+ sendMessage(message: ServiceWorkerManagerMessageData) {
if (this.ready && this.registration) {
const serviceWorker =
this.registration.active ||
diff --git a/src/utils/validate-document.ts b/src/utils/validate-document.ts
index b28f9aad..b5e0bb83 100644
--- a/src/utils/validate-document.ts
+++ b/src/utils/validate-document.ts
@@ -1,7 +1,6 @@
import { Document, ValidationError } from 'document-model/document';
import {
DocumentModel as DocumentModelClass,
- Module,
utils as documentModelUtils,
} from 'document-model/document-model';
@@ -61,9 +60,7 @@ export const validateDocument = (document: Document) => {
}, []);
// modules validation
- const modulesErrors = documentModelUtils.validateModules(
- specs.modules as Module[],
- );
+ const modulesErrors = documentModelUtils.validateModules(specs.modules);
return [...initialStateErrors, ...schemaStateErrors, ...modulesErrors];
};
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 00000000..8246ee6d
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,66 @@
+///
+
+
+type ImportMetaEnv = {
+ // Auto-generated by `npx vite-envs update-types` and hot-reloaded by the `vite-env` plugin
+ // You probably want to add `/src/vite-env.d.ts` to your .prettierignore
+ BASE_URL: string
+ MODE: string
+ DEV: boolean
+ PROD: boolean
+ APP_VERSION: string
+ REQUIRES_HARD_REFRESH: boolean
+ SENTRY_RELEASE: string
+ BASE_PATH: string
+ BASE_HREF: string
+ PH_CONNECT_APP_REQUIRES_HARD_REFRESH: string
+ SENTRY_AUTH_TOKEN: string
+ SENTRY_ORG: string
+ SENTRY_PROJECT: string
+ PH_CONNECT_ROUTER_BASENAME: string
+ PH_CONNECT_DEFAULT_DRIVES_URL: string
+ PH_CONNECT_ENABLED_EDITORS: string
+ PH_CONNECT_SEARCH_BAR_ENABLED: string
+ PH_CONNECT_DISABLE_ADD_PUBLIC_DRIVES: string
+ PH_CONNECT_DISABLE_ADD_CLOUD_DRIVES: string
+ PH_CONNECT_DISABLE_ADD_LOCAL_DRIVES: string
+ PH_CONNECT_DISABLE_DELETE_PUBLIC_DRIVES: string
+ PH_CONNECT_DISABLE_DELETE_CLOUD_DRIVES: string
+ PH_CONNECT_DISABLE_DELETE_LOCAL_DRIVES: string
+ PH_CONNECT_PUBLIC_DRIVES_ENABLED: string
+ PH_CONNECT_CLOUD_DRIVES_ENABLED: string
+ PH_CONNECT_LOCAL_DRIVES_ENABLED: string
+ PH_CONNECT_ARBITRUM_ALLOW_LIST: string
+ PH_CONNECT_RWA_ALLOW_LIST: string
+ PH_CONNECT_HIDE_DOCUMENT_MODEL_SELECTION_SETTINGS: string
+ PH_CONNECT_RENOWN_URL: string
+ PH_CONNECT_RENOWN_NETWORK_ID: string
+ PH_CONNECT_RENOWN_CHAIN_ID: string
+ PH_CONNECT_DISABLED_EDITORS: string
+ PH_CONNECT_SENTRY_DSN: string
+ PH_CONNECT_SENTRY_PROJECT: string
+ PH_CONNECT_SENTRY_ENV: string
+ // @user-defined-start
+ /*
+ * You can use this section to explicitly extend the type definition of `import.meta.env`
+ * This is useful if you're using Vite plugins that define specific `import.meta.env` properties.
+ * If you're not using such plugins, this section should remain as is.
+ */
+ SSR: boolean;
+ // @user-defined-end
+}
+
+
+
+interface ImportMeta {
+ // Auto-generated by `npx vite-envs update-types`
+
+ url: string
+
+ readonly hot?: import('vite-envs/types/hot').ViteHotContext
+
+ readonly env: ImportMetaEnv
+
+ glob: import('vite-envs/types/importGlob').ImportGlobFunction
+}
+
diff --git a/tsconfig.json b/tsconfig.json
index 359c9407..9d552492 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,9 +20,10 @@
"baseUrl": ".",
"paths": {
"@/assets": ["assets"],
- "connect-config": ["connect.config.ts"],
+ "connect-config": ["src/connect.config.ts"],
},
- "types": ["vite/client", "vite-plugin-svgr/client", "@types/wicg-file-system-access"]
+ "types": ["vite/client", "vite-plugin-svgr/client", "@types/wicg-file-system-access"],
+ "experimentalDecorators": true
},
"include": [
"src",
diff --git a/tsconfig.sw.json b/tsconfig.sw.json
new file mode 100644
index 00000000..a9339f9d
--- /dev/null
+++ b/tsconfig.sw.json
@@ -0,0 +1,15 @@
+{
+ "compilerOptions": {
+ "allowSyntheticDefaultImports": true,
+ "isolatedModules": false,
+ "strict": true,
+ "module": "ESNext",
+ "target": "ESNext",
+ "lib": ["es2019", "es6", "dom", "webworker"],
+ "noEmit": false,
+ "moduleResolution": "node",
+ "skipLibCheck": true,
+ "outDir": "./dist"
+ },
+ "files": ["./src/service-worker.ts"]
+}
diff --git a/vite.main.config.mts b/vite.main.config.mts
index e797c701..673ff31d 100644
--- a/vite.main.config.mts
+++ b/vite.main.config.mts
@@ -6,7 +6,10 @@ export default defineConfig({
resolve: {
alias: {
src: path.resolve(__dirname, './src'),
- 'connect-config': path.resolve(__dirname, './connect.config.ts'),
+ 'connect-config': path.resolve(
+ __dirname,
+ './src/connect.config.ts',
+ ),
},
},
});
diff --git a/vite.renderer.config.mts b/vite.renderer.config.mts
index e0923b67..1d7fe1bc 100644
--- a/vite.renderer.config.mts
+++ b/vite.renderer.config.mts
@@ -1,28 +1,58 @@
+import { sentryVitePlugin } from '@sentry/vite-plugin';
import react from '@vitejs/plugin-react';
import fs from 'fs';
import jotaiDebugLabel from 'jotai/babel/plugin-debug-label';
import jotaiReactRefresh from 'jotai/babel/plugin-react-refresh';
import path from 'path';
-import { HtmlTagDescriptor, defineConfig, loadEnv } from 'vite';
+import {
+ HtmlTagDescriptor,
+ Plugin,
+ PluginOption,
+ defineConfig,
+ loadEnv,
+} from 'vite';
+import { viteEnvs } from 'vite-envs';
import { createHtmlPlugin } from 'vite-plugin-html';
import svgr from 'vite-plugin-svgr';
import pkg from './package.json';
import clientConfig from './client.config';
-const appVersion = pkg.version;
+// Plugin to generate version.json in both dev and prod
+const addToBundlePlugin = (
+ file: { version: string; requiresHardRefresh?: boolean },
+ basePath = '/',
+): Plugin => {
+ const versionManifest = {
+ version: file.version,
+ requiresHardRefresh: file.requiresHardRefresh || false,
+ };
+
+ console.info(versionManifest);
-const generateVersionPlugin = (hardRefresh = false) => {
return {
- name: 'generate-version',
+ name: 'add-to-bundle',
+
+ // Hook for development mode (serves the file dynamically)
+ configureServer(server) {
+ // Middleware to serve version.json in dev mode
+ server.middlewares.use((req, res, next) => {
+ if (req.url === path.join(basePath, './version.json')) {
+ res.setHeader('Content-Type', 'application/json');
+ res.end(JSON.stringify(versionManifest, null, 2));
+ } else {
+ next();
+ }
+ });
+ },
+
+ // Hook for production mode (writes the file to the dist folder)
closeBundle() {
- const versionManifest = {
- version: appVersion,
- requiresHardRefresh: hardRefresh,
- };
+ const outputPath = path.join('dist', 'version.json');
+ // Write the JSON file to the dist folder during production builds
fs.writeFileSync(
- path.join('dist', 'version.json'),
+ outputPath,
JSON.stringify(versionManifest, null, 2),
);
},
@@ -33,39 +63,105 @@ export default defineConfig(({ mode }) => {
const isProd = mode === 'production';
const env = loadEnv(mode, process.cwd());
- const requiresHardRefresh = env.VITE_APP_REQUIRES_HARD_REFRESH === 'true';
+ const requiresHardRefreshEnv: unknown =
+ process.env.PH_CONNECT_APP_REQUIRES_HARD_REFRESH ??
+ env.PH_CONNECT_APP_REQUIRES_HARD_REFRESH;
- return {
- define: {
- 'process.env': {
- APP_VERSION: appVersion,
- REQUIRES_HARD_REFRESH: isProd ? requiresHardRefresh : false,
- },
- },
- plugins: [
- react({
- include: 'src/**/*.tsx',
- babel: {
- plugins: isProd ? [] : [jotaiDebugLabel, jotaiReactRefresh],
+ const REQUIRES_HARD_REFRESH =
+ typeof requiresHardRefreshEnv === 'boolean'
+ ? requiresHardRefreshEnv
+ : requiresHardRefreshEnv !== undefined
+ ? requiresHardRefreshEnv === 'true'
+ : isProd;
+
+ const APP_VERSION =
+ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+ (process.env.APP_VERSION ?? env.APP_VERSION ?? pkg.version).toString();
+
+ const authToken = process.env.SENTRY_AUTH_TOKEN ?? env.SENTRY_AUTH_TOKEN;
+ const org = process.env.SENTRY_ORG ?? env.SENTRY_ORG;
+ const project = process.env.SENTRY_PROJECT ?? env.SENTRY_PROJECT;
+ const release =
+ (process.env.SENTRY_RELEASE ?? env.SENTRY_RELEASE) || APP_VERSION;
+ const uploadSentrySourcemaps = authToken && org && project;
+
+ const plugins: PluginOption[] = [
+ react({
+ include: 'src/**/*.tsx',
+ babel: {
+ parserOpts: {
+ plugins: ['decorators'],
},
- }),
- svgr(),
- createHtmlPlugin({
- minify: true,
- inject: {
- tags: [
- ...(clientConfig.meta.map(meta => ({
- ...meta,
- injectTo: 'head',
- })) as HtmlTagDescriptor[]),
- ],
+ plugins: isProd ? [] : [jotaiDebugLabel, jotaiReactRefresh],
+ },
+ }),
+ svgr(),
+ createHtmlPlugin({
+ minify: true,
+ inject: {
+ tags: [
+ ...(clientConfig.meta.map(meta => ({
+ ...meta,
+ injectTo: 'head',
+ })) as HtmlTagDescriptor[]),
+ ],
+ },
+ }),
+ addToBundlePlugin(
+ {
+ version: APP_VERSION,
+ requiresHardRefresh: REQUIRES_HARD_REFRESH,
+ },
+ env.PH_CONNECT_ROUTER_BASENAME,
+ ),
+ viteEnvs({
+ computedEnv() {
+ return {
+ APP_VERSION,
+ REQUIRES_HARD_REFRESH,
+ SENTRY_RELEASE: release,
+ };
+ },
+ }),
+ ] as const;
+
+ if (uploadSentrySourcemaps) {
+ plugins.push(
+ sentryVitePlugin({
+ release: {
+ name: release,
+ inject: false, // prevent it from injecting the release id in the service worker code, this is done in 'src/app/sentry.ts' instead
},
- }),
- generateVersionPlugin(isProd ? requiresHardRefresh : false),
- ],
+ authToken,
+ org,
+ project,
+ }) as PluginOption,
+ );
+ }
+
+ return {
+ plugins,
build: {
minify: isProd,
sourcemap: isProd,
+ rollupOptions: {
+ input: {
+ main: path.resolve(__dirname, 'index.html'),
+ // Adds the service worker as a separate file
+ 'service-worker': path.resolve(
+ __dirname,
+ 'src/service-worker.ts',
+ ),
+ },
+ output: {
+ // Ensure the service worker file goes to the root of the dist folder
+ entryFileNames: chunk => {
+ return ['service-worker'].includes(chunk.name)
+ ? `${chunk.name}.js`
+ : 'assets/[name].[hash].js';
+ },
+ },
+ },
},
resolve: {
alias: {
@@ -73,7 +169,7 @@ export default defineConfig(({ mode }) => {
src: path.resolve(__dirname, './src'),
'connect-config': path.resolve(
__dirname,
- './connect.config.ts',
+ './src/connect.config.ts',
),
path: 'rollup-plugin-node-polyfills/polyfills/path',
events: 'rollup-plugin-node-polyfills/polyfills/events',