fix(editor): typecheck for tests and playground (#9897)

blocksuite/tests-legacy/utils/actions/block.ts

@@ -9,8 +9,7 @@ export async function updateBlockType(
 ) {
   await page.evaluate(
     ([flavour, type]) => {
-      window.host.std.command
-        .chain()
+      (window.host.std.command.chain() as any)
         .updateBlockType({
           flavour,
           props: {

blocksuite/tests-legacy/utils/actions/click.ts

@@ -1,6 +1,6 @@
 import type { IPoint } from '@blocksuite/global/utils';
+import type { Store } from '@blocksuite/store';
 import type { Page } from '@playwright/test';
-import type { Store } from '@store/index.js';
 
 import { toViewCoord } from './edgeless.js';
 import { waitNextFrame } from './misc.js';

blocksuite/tests-legacy/utils/actions/edgeless.ts

@@ -1,6 +1,6 @@
 import '../declare-test-window.js';
 
-import type { NoteBlockModel, NoteDisplayMode } from '@blocks/index.js';
+import type { NoteBlockModel, NoteDisplayMode } from '@blocksuite/affine-model';
 import type { IPoint, IVec } from '@blocksuite/global/utils';
 import { assertExists, sleep } from '@blocksuite/global/utils';
 import type { Locator, Page } from '@playwright/test';

blocksuite/tests-legacy/utils/actions/misc.ts

@@ -1,20 +1,20 @@
 import '../declare-test-window.js';
 
-import type { DatabaseBlockModel, ListType, RichText } from '@blocks/index.js';
-import type { EditorHost, ExtensionType } from '@blocksuite/block-std';
-import type { BlockSuiteFlags } from '@blocksuite/global/types';
+import type { EditorHost } from '@blocksuite/block-std';
+import type {
+  BlockSuiteFlags,
+  DatabaseBlockModel,
+  ListType,
+  RichText,
+} from '@blocksuite/blocks';
+import type { Container } from '@blocksuite/global/di';
 import { assertExists } from '@blocksuite/global/utils';
+import type { InlineRange, InlineRootElement } from '@blocksuite/inline';
 import type { AffineEditorContainer } from '@blocksuite/presets';
-import type { InlineRange, InlineRootElement } from '@inline/index.js';
-import type { CustomFramePanel } from '@playground/apps/_common/components/custom-frame-panel.js';
-import type { CustomOutlinePanel } from '@playground/apps/_common/components/custom-outline-panel.js';
-import type { CustomOutlineViewer } from '@playground/apps/_common/components/custom-outline-viewer.js';
-import type { DocsPanel } from '@playground/apps/_common/components/docs-panel.js';
-import type { StarterDebugMenu } from '@playground/apps/_common/components/starter-debug-menu.js';
+import type { BlockModel, ExtensionType } from '@blocksuite/store';
+import { uuidv4 } from '@blocksuite/store';
 import type { ConsoleMessage, Locator, Page } from '@playwright/test';
 import { expect } from '@playwright/test';
-import type { BlockModel } from '@store/schema/index.js';
-import { uuidv4 } from '@store/utils/id-generator.js';
 import lz from 'lz-string';
 
 import { currentEditorIndex, multiEditor } from '../multiple-editor.js';
@@ -95,7 +95,7 @@ async function initEmptyEditor({
           for (const [key, value] of Object.entries(flags)) {
             doc
               .get(window.$blocksuite.blocks.FeatureFlagService)
-              .setFlag(key, value);
+              .setFlag(key as keyof BlockSuiteFlags, value);
           }
           doc
             .get(window.$blocksuite.blocks.FeatureFlagService)
@@ -105,7 +105,7 @@ async function initEmptyEditor({
           const defaultExtensions: ExtensionType[] = [
             ...window.$blocksuite.defaultExtensions(),
             {
-              setup: di => {
+              setup: (di: Container) => {
                 di.addImpl(window.$blocksuite.identifiers.ParseDocUrlService, {
                   parseDocUrl() {
                     return undefined;
@@ -114,12 +114,13 @@ async function initEmptyEditor({
               },
             },
             {
-              setup: di => {
+              setup: (di: Container) => {
                 di.override(
                   window.$blocksuite.identifiers.DocModeProvider,
+                  // @ts-expect-error set mock service
                   window.$blocksuite.mockServices.mockDocModeService(
                     () => editor.mode,
-                    mode => editor.switchEditor(mode)
+                    (mode: 'page' | 'edgeless') => editor.switchEditor(mode)
                   )
                 );
               },
@@ -149,28 +150,35 @@ async function initEmptyEditor({
 
         editor.updateComplete
           .then(() => {
-            const debugMenu: StarterDebugMenu =
-              document.createElement('starter-debug-menu');
-            const docsPanel: DocsPanel = document.createElement('docs-panel');
-            const framePanel: CustomFramePanel =
-              document.createElement('custom-frame-panel');
-            const outlinePanel: CustomOutlinePanel = document.createElement(
-              'custom-outline-panel'
-            );
-            const outlineViewer: CustomOutlineViewer = document.createElement(
+            const debugMenu = document.createElement('starter-debug-menu');
+            const docsPanel = document.createElement('docs-panel');
+            const framePanel = document.createElement('custom-frame-panel');
+            const outlinePanel = document.createElement('custom-outline-panel');
+            const outlineViewer = document.createElement(
               'custom-outline-viewer'
             );
+            // @ts-expect-error set test editor
             docsPanel.editor = editor;
+            // @ts-expect-error set test editor
             framePanel.editor = editor;
+            // @ts-expect-error set test editor
             outlinePanel.editor = editor;
+            // @ts-expect-error set test editor
             outlineViewer.editor = editor;
+            // @ts-expect-error set test collection
             debugMenu.collection = collection;
+            // @ts-expect-error set test editor
             debugMenu.editor = editor;
+            // @ts-expect-error set test docsPanel
             debugMenu.docsPanel = docsPanel;
+            // @ts-expect-error set test framePanel
             debugMenu.framePanel = framePanel;
+            // @ts-expect-error set test outlineViewer
             debugMenu.outlineViewer = outlineViewer;
+            // @ts-expect-error set test outlinePanel
             debugMenu.outlinePanel = outlinePanel;
             const leftSidePanel = document.createElement('left-side-panel');
+            // @ts-expect-error set test leftSidePanel
             debugMenu.leftSidePanel = leftSidePanel;
             document.body.append(debugMenu);
             document.body.append(leftSidePanel);

blocksuite/tests-legacy/utils/asserts.ts

@@ -1,20 +1,20 @@
 import './declare-test-window.js';
 
-import type {
-  AffineInlineEditor,
-  NoteBlockModel,
-  RichText,
-  RootBlockModel,
-} from '@blocks/index.js';
 import type {
   BlockComponent,
   EditorHost,
   TextSelection,
 } from '@blocksuite/block-std';
+import type {
+  AffineInlineEditor,
+  NoteBlockModel,
+  RichText,
+  RootBlockModel,
+} from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
-import type { InlineRootElement } from '@inline/inline-editor.js';
+import type { InlineRootElement } from '@blocksuite/inline';
+import type { BlockModel } from '@blocksuite/store';
 import { expect, type Locator, type Page } from '@playwright/test';
-import type { BlockModel } from '@store/index.js';
 
 import {
   DEFAULT_NOTE_HEIGHT,
@@ -462,7 +462,9 @@ export async function assertBlockChildrenFlavours(
 ) {
   const actual = await page.evaluate(
     ({ blockId }) => {
-      const element = document.querySelector(`[data-block-id="${blockId}"]`);
+      const element = document.querySelector<BlockComponent>(
+        `[data-block-id="${blockId}"]`
+      );
       // @ts-ignore
       const model = element.model as BlockModel;
       return model.children.map(child => child.flavour);

blocksuite/tests-legacy/utils/declare-test-window.ts

@@ -1,17 +1,24 @@
-import type { RefNodeSlotsProvider, TestUtils } from '@blocks/index.js';
+import type {
+  DocModeProvider,
+  DocModeService,
+  ParseDocUrlProvider,
+  QuickSearchProvider,
+  ThemeProvider,
+} from '@blocksuite/affine-shared/services';
 import type {
   EditorHost,
-  ExtensionType,
+  WidgetViewMapExtension,
   WidgetViewMapIdentifier,
 } from '@blocksuite/block-std';
+import type { RefNodeSlotsProvider, TestUtils } from '@blocksuite/blocks';
 import type { AffineEditorContainer } from '@blocksuite/presets';
-import type { StarterDebugMenu } from '@playground/apps/_common/components/starter-debug-menu.js';
 import type {
   BlockModel,
-  Blocks,
+  ExtensionType,
+  Store,
   Transformer,
   Workspace,
-} from '@store/index.js';
+} from '@blocksuite/store';
 
 declare global {
   interface Window {
@@ -19,32 +26,32 @@ declare global {
      * the following instance are initialized in `packages/playground/apps/starter/main.ts`
      */
     $blocksuite: {
-      store: typeof import('../../framework/store/src/index.js');
-      blocks: typeof import('../../blocks/src/index.js');
+      store: typeof import('@blocksuite/store');
+      blocks: typeof import('@blocksuite/blocks');
       global: {
-        utils: typeof import('../../framework/global/src/utils.js');
+        utils: typeof import('@blocksuite/global/utils');
       };
-      editor: typeof import('../../presets/src/index.js');
+      editor: typeof import('@blocksuite/presets');
       identifiers: {
         WidgetViewMapIdentifier: typeof WidgetViewMapIdentifier;
-        QuickSearchProvider: typeof import('../../affine/shared/src/services/quick-search-service.js').QuickSearchProvider;
-        DocModeProvider: typeof import('../../affine/shared/src/services/doc-mode-service.js').DocModeProvider;
-        ThemeProvider: typeof import('../../affine/shared/src/services/theme-service.js').ThemeProvider;
+        QuickSearchProvider: typeof QuickSearchProvider;
+        DocModeProvider: typeof DocModeProvider;
+        ThemeProvider: typeof ThemeProvider;
         RefNodeSlotsProvider: typeof RefNodeSlotsProvider;
-        ParseDocUrlService: typeof import('../../affine/shared/src/services/parse-url-service.js').ParseDocUrlProvider;
+        ParseDocUrlService: typeof ParseDocUrlProvider;
       };
       defaultExtensions: () => ExtensionType[];
       extensions: {
-        WidgetViewMapExtension: typeof import('../../framework/block-std/src/extension/widget-view-map.js').WidgetViewMapExtension;
+        WidgetViewMapExtension: typeof WidgetViewMapExtension;
       };
       mockServices: {
-        mockDocModeService: typeof import('../../playground/apps/_common/mock-services.js').mockDocModeService;
+        mockDocModeService: typeof DocModeService;
       };
     };
     collection: Workspace;
     blockSchema: Record<string, typeof BlockModel>;
-    doc: Blocks;
-    debugMenu: StarterDebugMenu;
+    doc: Store;
+    debugMenu: HTMLElement;
     editor: AffineEditorContainer;
     host: EditorHost;
     testUtils: TestUtils;

blocksuite/tests-legacy/utils/ignore.ts

@@ -1,4 +1,4 @@
-import type { BlockSnapshot } from '@store/index.js';
+import type { BlockSnapshot } from '@blocksuite/store';
 
 export function ignoreFields(target: unknown, keys: string[]): unknown {
   if (Array.isArray(target)) {