feat(core): use zip snapshot for onboarding page (#6495)

packages/frontend/core/src/bootstrap/first-app-data.ts

@@ -1,8 +1,61 @@
 import { DebugLogger } from '@affine/debug';
 import { DEFAULT_WORKSPACE_NAME } from '@affine/env/constant';
 import { WorkspaceFlavour } from '@affine/env/workspace';
-import type { WorkspaceManager } from '@toeverything/infra';
-import { buildShowcaseWorkspace, initEmptyPage } from '@toeverything/infra';
+import onboardingUrl from '@affine/templates/onboarding.zip';
+import { ZipTransformer } from '@blocksuite/blocks';
+import {
+  initEmptyPage,
+  PageRecordList,
+  type WorkspaceManager,
+} from '@toeverything/infra';
+
+export async function buildShowcaseWorkspace(
+  workspaceManager: WorkspaceManager,
+  flavour: WorkspaceFlavour,
+  workspaceName: string
+) {
+  const meta = await workspaceManager.createWorkspace(
+    flavour,
+    async docCollection => {
+      docCollection.meta.setName(workspaceName);
+      const blob = await (await fetch(onboardingUrl)).blob();
+
+      await ZipTransformer.importDocs(docCollection, blob);
+    }
+  );
+
+  const { workspace, release } = workspaceManager.open(meta);
+
+  await workspace.engine.waitForRootDocReady();
+
+  const pageRecordList = workspace.services.get(PageRecordList);
+
+  // todo: find better way to do the following
+  // perhaps put them into middleware?
+  {
+    // the "Write, Draw, Plan all at Once." page should be set to edgeless mode
+    const edgelessPage1 = pageRecordList.records$.value.find(
+      p => p.title$.value === 'Write, Draw, Plan all at Once.'
+    );
+
+    if (edgelessPage1) {
+      edgelessPage1.setMode('edgeless');
+    }
+
+    // should jump to "Write, Draw, Plan all at Once." by default
+    const defaultPage = pageRecordList.records$.value.find(p =>
+      p.title$.value.startsWith('Write, Draw, Plan all at Once.')
+    );
+
+    if (defaultPage) {
+      defaultPage.setMeta({
+        jumpOnce: true,
+      });
+    }
+  }
+  release();
+  return meta;
+}
 
 const logger = new DebugLogger('createFirstAppData');
 

packages/frontend/core/src/components/affine/create-workspace-modal/index.tsx

@@ -10,7 +10,6 @@ import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { _addLocalWorkspace } from '@affine/workspace-impl';
 import {
-  buildShowcaseWorkspace,
   initEmptyPage,
   useService,
   WorkspaceManager,
@@ -19,6 +18,7 @@ import { useSetAtom } from 'jotai';
 import type { KeyboardEvent } from 'react';
 import { useCallback, useLayoutEffect, useState } from 'react';
 
+import { buildShowcaseWorkspace } from '../../../bootstrap/first-app-data';
 import { mixpanel } from '../../../utils';
 import { CloudSvg } from '../share-page-modal/cloud-svg';
 import * as styles from './index.css';

packages/frontend/core/src/pages/workspace/index.tsx

@@ -1,4 +1,5 @@
 import { useWorkspace } from '@affine/core/hooks/use-workspace';
+import { ZipTransformer } from '@blocksuite/blocks';
 import type { Workspace } from '@toeverything/infra';
 import {
   ServiceProviderContext,
@@ -28,6 +29,8 @@ declare global {
    */
   // eslint-disable-next-line no-var
   var currentWorkspace: Workspace | undefined;
+  // eslint-disable-next-line no-var
+  var exportWorkspaceSnapshot: () => Promise<void>;
   interface WindowEventMap {
     'affine:workspace:change': CustomEvent<{ id: string }>;
   }
@@ -60,6 +63,19 @@ export const Component = (): ReactElement => {
 
     // for debug purpose
     window.currentWorkspace = workspace;
+    window.exportWorkspaceSnapshot = async () => {
+      const zip = await ZipTransformer.exportDocs(
+        workspace.docCollection,
+        Array.from(workspace.docCollection.docs.values())
+      );
+      const url = URL.createObjectURL(zip);
+      // download url
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${workspace.docCollection.meta.name}.zip`;
+      a.click();
+      URL.revokeObjectURL(url);
+    };
     window.dispatchEvent(
       new CustomEvent('affine:workspace:change', {
         detail: {

packages/frontend/core/src/types/types.d.ts

@@ -14,6 +14,11 @@ declare module '*.assets.svg' {
   export default url;
 }
 
+declare module '*.zip' {
+  const url: string;
+  export default url;
+}
+
 declare module '*.png' {
   const url: string;
   export default url;

packages/frontend/templates/build.mjs

@@ -1,32 +0,0 @@
-import fs from 'node:fs';
-import path, { join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-import * as glob from 'glob';
-
-// purpose: bundle all json files into one json file in onboarding folder
-const __dirname = join(fileURLToPath(import.meta.url), '..');
-
-const jsonFiles = glob.sync('./*.json', {
-  cwd: path.join(__dirname, 'onboarding'),
-});
-
-const imports = jsonFiles
-  .map(
-    (fileName, index) => `import json_${index} from './onboarding/${fileName}';`
-  )
-  .join('\n');
-
-const exports = `export const onboarding = {
-${jsonFiles
-  .map((fileName, index) => {
-    return `  '${fileName}': json_${index}`;
-  })
-  .join(',\n')}
-}`;
-
-const template = `/* eslint-disable simple-import-sort/imports */
-// Auto generated, do not edit manually
-${imports}\n\n${exports}`;
-
-fs.writeFileSync(path.join(__dirname, 'templates.gen.ts'), template);

packages/frontend/templates/onboarding/info.json

@@ -1,21 +0,0 @@
-{
-  "type": "info",
-  "id": "dc61f2e3-a973-432f-a463-164a15cfc778",
-  "pageVersion": 2,
-  "workspaceVersion": 2,
-  "properties": {
-    "tags": {
-      "options": []
-    }
-  },
-  "pages": [
-    {
-      "id": "W-d9_llZ6rE-qoTiHKTk4",
-      "createDate": 1706862386590,
-      "tags": [],
-      "favorite": false,
-      "title": "Write, Draw, Plan all at Once.",
-      "updatedDate": 1709110332309
-    }
-  ]
-}

packages/frontend/templates/package.json

@@ -4,11 +4,11 @@
   "sideEffect": false,
   "version": "0.14.0",
   "scripts": {
-    "postinstall": "node ./build.mjs && node ./build-edgeless.mjs"
+    "postinstall": "node ./build-edgeless.mjs"
   },
   "type": "module",
   "exports": {
-    ".": "./templates.gen.ts",
+    "./onboarding.zip": "./onboarding/onboarding.zip",
     "./edgeless": "./edgeless-templates.gen.ts",
     "./build-edgeless": "./build-edgeless.mjs"
   },

packages/frontend/templates/templates.gen.ts

@@ -1,11 +0,0 @@
-/* eslint-disable simple-import-sort/imports */
-// Auto generated, do not edit manually
-import json_0 from './onboarding/info.json';
-import json_1 from './onboarding/blob.json';
-import json_2 from './onboarding/W-d9_llZ6rE-qoTiHKTk4.snapshot.json';
-
-export const onboarding = {
-  'info.json': json_0,
-  'blob.json': json_1,
-  'W-d9_llZ6rE-qoTiHKTk4.snapshot.json': json_2
-}

packages/frontend/workspace-impl/src/cloud/list.ts

@@ -76,12 +76,6 @@ export class CloudWorkspaceListProvider implements WorkspaceListProvider {
   ): Promise<WorkspaceMetadata> {
     const tempId = nanoid();
 
-    const docCollection = new DocCollection({
-      id: tempId,
-      idGenerator: () => nanoid(),
-      schema: globalBlockSuiteSchema,
-    });
-
     // create workspace on cloud, get workspace id
     const {
       createWorkspace: { id: workspaceId },
@@ -97,6 +91,19 @@ export class CloudWorkspaceListProvider implements WorkspaceListProvider {
       ? new SqliteDocStorage(workspaceId)
       : new IndexedDBDocStorage(workspaceId);
 
+    const docCollection = new DocCollection({
+      id: tempId,
+      idGenerator: () => nanoid(),
+      schema: globalBlockSuiteSchema,
+      blobStorages: [
+        () => {
+          return {
+            crud: blobStorage,
+          };
+        },
+      ],
+    });
+
     // apply initial state
     await initial(docCollection, blobStorage);
 

packages/frontend/workspace-impl/src/local/list.ts

@@ -70,6 +70,13 @@ export class LocalWorkspaceListProvider implements WorkspaceListProvider {
       id: id,
       idGenerator: () => nanoid(),
       schema: globalBlockSuiteSchema,
+      blobStorages: [
+        () => {
+          return {
+            crud: blobStorage,
+          };
+        },
+      ],
     });
 
     // apply initial state