fix: fixed critical circular dependencies (#549)

---------

Co-authored-by: d3m1d0v <[email protected]>

Author: obenjiro

.github/workflows/ci.yml

@@ -41,3 +41,19 @@ jobs:
       run: npm run test
     - name: ESBuild compatability
       run: npm run test:esbuild
+
+  check_circular_deps:
+    name: Check Circular Dependencies
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+    - name: Setup Node
+      uses: actions/setup-node@v3
+      with:
+        node-version: 18
+        cache: npm
+    - name: Install Packages
+      run: npm ci
+    - name: Check circular dependencies
+      run: npm run check-circular-deps

demo/stories/ghost/ghostExtension/toolbar.ts

@@ -1,7 +1,6 @@
 import {Ghost} from '@gravity-ui/icons';
 
-import {ToolbarDataType} from '../../../../src';
-import {MToolbarSingleItemData} from '../../../../src/bundle/config/markup';
+import {type MToolbarSingleItemData, ToolbarDataType} from '../../../../src';
 
 import {showGhostPopup} from './commands';
 

package-lock.json

@@ -25,6 +25,7 @@
     "lint:js": "eslint \"{src,demo}/**/*.{js,jsx,ts,tsx}\"",
     "lint:styles": "stylelint \"{src,demo}/**/*.{css,scss}\"",
     "lint:prettier": "prettier --check \"{src,demo}/**/*.{js,jsx,ts,tsx,css,scss}\"",
+    "check-circular-deps": "node scripts/check-circular-deps.js 48",
     "test": "jest",
     "test:cov": "jest --coverage",
     "test:watch": "jest --watchAll",
@@ -235,6 +236,7 @@
     "@types/rimraf": "3.0.2",
     "@types/sanitize-html": "2.11.0",
     "bem-cn-lite": "4.1.0",
+    "dpdm": "3.14.0",
     "esbuild-sass-plugin": "2.15.0",
     "eslint": "8.56.0",
     "eslint-plugin-lodash": "7.4.0",

package.json

@@ -0,0 +1,24 @@
+/* eslint-disable no-console, import/no-extraneous-dependencies, no-undef */
+const process = require('process');
+
+const {parseDependencyTree, parseCircular, prettyCircular} = require('dpdm');
+
+const threshold = parseInt(process.argv[2], 10) || 99; // Default to 99 if no argument provided
+
+parseDependencyTree('./src/index.ts', {
+    /* options, see https://github.com/acrazing/dpdm?tab=readme-ov-file#api-reference */
+}).then((tree) => {
+    const circulars = parseCircular(tree);
+    if (circulars.length > threshold) {
+        console.error(prettyCircular(circulars));
+        console.error(
+            `Circular dependencies check failed (found: ${circulars.length}, threshold: ${threshold})`,
+        );
+        process.exit(1);
+    }
+
+    console.log(
+        `Circular dependencies check passed (found: ${circulars.length}, threshold: ${threshold})`,
+    );
+    process.exit(0);
+});

scripts/check-circular-deps.js

@@ -16,10 +16,10 @@ import {HorizontalDrag} from './HorizontalDrag';
 import {MarkupEditorView} from './MarkupEditorView';
 import {SplitModeView} from './SplitModeView';
 import {WysiwygEditorView} from './WysiwygEditorView';
-import {MToolbarData, MToolbarItemData, WToolbarData, WToolbarItemData} from './config';
 import {useMarkdownEditorContext} from './context';
-import {EditorSettings, EditorSettingsProps} from './settings';
+import {EditorSettings, type EditorSettingsProps} from './settings';
 import {stickyCn} from './sticky';
+import type {MToolbarData, MToolbarItemData, WToolbarData, WToolbarItemData} from './toolbar/types';
 import {getToolbarsConfigs} from './toolbar/utils/toolbarsConfigs';
 import type {MarkdownEditorMode} from './types';
 

src/bundle/MarkdownEditorView.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 
-import {ClassNameProps, cn} from '../classname';
+import {type ClassNameProps, cn} from '../classname';
 import {ReactRendererComponent} from '../extensions';
 import {logger} from '../logger';
 import {useRenderTime} from '../react-utils/hooks';
 
 import type {EditorInt} from './Editor';
 import {MarkupEditorComponent} from './MarkupEditorComponent';
 import {ToolbarView} from './ToolbarView';
-import type {MToolbarData, MToolbarItemData} from './config/markup';
 import {MarkupToolbarContextProvider} from './toolbar/markup/context';
+import type {MToolbarData, MToolbarItemData} from './toolbar/types';
 import type {MarkdownEditorSplitMode} from './types';
 
 import './MarkupEditorView.scss';

src/bundle/MarkupEditorView.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
-import {ClassNameProps, cn} from '../classname';
+import {type ClassNameProps, cn} from '../classname';
 import {ReactRendererComponent} from '../extensions';
 import {logger} from '../logger';
 import {useRenderTime} from '../react-utils/hooks';
 
 import type {EditorInt} from './Editor';
 import {ToolbarView} from './ToolbarView';
 import {WysiwygEditorComponent} from './WysiwygEditorComponent';
-import type {WToolbarData, WToolbarItemData} from './config/wysiwyg';
+import type {WToolbarData, WToolbarItemData} from './toolbar/types';
 
 import './WysiwygEditorView.scss';
 

src/bundle/WysiwygEditorView.tsx

@@ -40,42 +40,43 @@ import {
     wrapToYfmCut,
     wrapToYfmNote,
 } from '../../markup/commands';
-import {CodeEditor} from '../../markup/editor';
+import type {CodeEditor} from '../../markup/editor';
 import {Action as A, formatter as f} from '../../shortcuts';
-import {ToolbarData} from '../../toolbar/Toolbar';
-import {ToolbarGroupData} from '../../toolbar/ToolbarGroup';
-import {ToolbarListButtonData} from '../../toolbar/ToolbarListButton';
-import {
-    ToolbarButtonPopupData,
-    ToolbarDataType,
-    ToolbarItemData,
-    ToolbarListButtonItemData,
-    ToolbarListItemData,
-    ToolbarReactComponentData,
-    ToolbarSingleItemData,
-} from '../../toolbar/types';
 import {MToolbarColors} from '../toolbar/markup/MToolbarColors';
 import {MToolbarFilePopup} from '../toolbar/markup/MToolbarFilePopup';
 import {MToolbarImagePopup} from '../toolbar/markup/MToolbarImagePopup';
+import type {
+    MToolbarButtonPopupData,
+    MToolbarData,
+    MToolbarGroupData,
+    MToolbarItemData,
+    MToolbarListButtonData,
+    MToolbarListItemData,
+    MToolbarSingleItemData,
+    ToolbarListButtonItemData,
+} from '../toolbar/types';
+import {ToolbarDataType} from '../toolbar/types';
 import type {MarkdownEditorPreset} from '../types';
 
 import {ActionName} from './action-names';
 import {icons} from './icons';
 
+export type {
+    MToolbarData,
+    MToolbarItemData,
+    MToolbarSingleItemData,
+    MToolbarGroupData,
+    MToolbarReactComponentData,
+    MToolbarListButtonData,
+    MToolbarListItemData,
+    MToolbarButtonPopupData,
+} from '../toolbar/types';
+
 const noop = () => {};
 const inactive = () => false;
 const enable = () => true;
 const disable = () => false;
 
-export type MToolbarData = ToolbarData<CodeEditor>;
-export type MToolbarItemData = ToolbarItemData<CodeEditor>;
-export type MToolbarSingleItemData = ToolbarSingleItemData<CodeEditor>;
-export type MToolbarGroupData = ToolbarGroupData<CodeEditor>;
-export type MToolbarReactComponentData = ToolbarReactComponentData<CodeEditor>;
-export type MToolbarListButtonData = ToolbarListButtonData<CodeEditor>;
-export type MToolbarListItemData = ToolbarListItemData<CodeEditor>;
-export type MToolbarButtonPopupData = ToolbarButtonPopupData<CodeEditor>;
-
 export const mUndoItemData: MToolbarSingleItemData = {
     id: ActionName.undo,
     type: ToolbarDataType.SingleButton,