fix: dynamic imports in vite prod build (#1023)

Co-authored-by: Ilya Mitin <[email protected]>

Author: persovt2

src/editor/components/AddBlock/AddBlock.tsx

@@ -2,15 +2,15 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 // TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
 
-import React, {PropsWithChildren, useMemo, useRef, useState} from 'react';
+import React, {PropsWithChildren, useEffect, useMemo, useRef, useState} from 'react';
 
 import {Plus} from '@gravity-ui/icons';
 import {Popup, TextInput} from '@gravity-ui/uikit';
 
 import {blockMap} from '../../../constructor-items';
 import {Block, BlockType, ClassNameProps} from '../../../models';
 import {block} from '../../../utils';
-import EditorBlocksData from '../../data';
+import {EditorBlocksData, getEditorBlocksData} from '../../data';
 
 import './AddBlock.scss';
 
@@ -25,16 +25,29 @@ const sortedBlockNames = Object.keys(blockMap).sort();
 const AddBlock = ({onAdd, className}: PropsWithChildren<AddBlockProps>) => {
     const [isOpened, setIsOpened] = useState(false);
     const [search, setSearch] = useState('');
+    const [editorBlocksData, setEditorBlocksData] = useState<EditorBlocksData | null>(null);
+
     const ref = useRef(null);
-    const blocks = useMemo(
-        () =>
-            sortedBlockNames.filter((blockName) =>
-                EditorBlocksData[blockName as BlockType].meta.title
-                    .toLocaleLowerCase()
-                    .startsWith(search.toLocaleLowerCase()),
-            ),
-        [search],
-    );
+    const blocks = useMemo(() => {
+        if (!editorBlocksData) {
+            return [];
+        }
+
+        return sortedBlockNames.filter((blockName) =>
+            editorBlocksData[blockName as BlockType]?.meta.title
+                .toLocaleLowerCase()
+                .startsWith(search.toLocaleLowerCase()),
+        );
+    }, [editorBlocksData, search]);
+
+    useEffect(() => {
+        const loadEditorBlocksData = async () => {
+            const data = await getEditorBlocksData();
+            setEditorBlocksData(data);
+        };
+
+        loadEditorBlocksData();
+    }, []);
 
     return (
         <div className={b(null, className)} ref={ref}>
@@ -68,10 +81,14 @@ const AddBlock = ({onAdd, className}: PropsWithChildren<AddBlockProps>) => {
                     </div>
                     <div className={b('blocks')}>
                         {blocks.map((blockName) => {
-                            const blockData = EditorBlocksData[blockName as BlockType];
-                            const Preview = blockData?.preview as React.FC<
-                                React.SVGProps<SVGSVGElement>
-                            >;
+                            const blockData = editorBlocksData?.[blockName as BlockType];
+
+                            if (!blockData) {
+                                return null;
+                            }
+
+                            const Preview: React.FC<React.SVGProps<SVGSVGElement>> =
+                                blockData.preview;
 
                             return (
                                 <div

src/editor/data/index.ts

@@ -2,6 +2,7 @@ import {Block, BlockType} from '../../models';
 import {formatBlockName} from '../utils';
 
 import DefaultPreview from './previews/default-preview';
+import HeaderBlock from './previews/header-block';
 
 export type PreviewComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
 
@@ -14,33 +15,43 @@ export interface EdiorBlockData {
     };
 }
 
-const getBlockTemplate = (blockType: BlockType) =>
-    require(`./templates/${blockType}.json`) as Omit<EdiorBlockData, 'preview'>;
+const getBlockTemplate = (blockType: BlockType): Promise<Omit<EdiorBlockData, 'preview'>> =>
+    import(`./templates/${blockType}.json`).then((data) => data.default);
 
-const getBlockPreview = (blockType: BlockType) => {
+const getBlockPreview = (blockType: BlockType): PreviewComponent => {
     try {
-        return require(`./previews/${blockType}.tsx`).default as PreviewComponent;
+        if (blockType === BlockType.HeaderBlock) {
+            return HeaderBlock;
+        }
+
+        return DefaultPreview;
     } catch (err) {
         /*eslint-disable no-console */
         console.warn(`Preview image for ${blockType} not found`);
         return DefaultPreview;
     }
 };
 
-const EditorBlocksData = Object.values(BlockType).reduce((previewData, blockType) => {
-    const template = getBlockTemplate(blockType);
-    const preview = getBlockPreview(blockType);
+type EditorBlocksData = Partial<Record<BlockType, EdiorBlockData>>;
+
+async function getEditorBlocksData(): Promise<EditorBlocksData> {
+    const EdiorBlockData: EditorBlocksData = {};
+
+    for (const blockType of Object.values(BlockType)) {
+        const template = await getBlockTemplate(blockType as BlockType);
 
-    template.meta = template.meta || {};
-    template.meta.title = template.meta.title || formatBlockName(blockType);
+        const preview = getBlockPreview(blockType);
 
-    /* eslint-disable no-param-reassign */
-    previewData[blockType] = {
-        ...template,
-        preview,
-    } as EdiorBlockData;
+        template.meta = template.meta || {};
+        template.meta.title = template.meta.title || formatBlockName(blockType);
 
-    return previewData;
-}, {} as Record<BlockType, EdiorBlockData>);
+        EdiorBlockData[blockType] = {
+            ...template,
+            preview,
+        };
+    }
+
+    return EdiorBlockData;
+}
 
-export default EditorBlocksData;
+export {EditorBlocksData, getEditorBlocksData};