PLANET-7727: Clean up the frontendIndex.js file (#2811)

- Clean up the frontendIndex.js file.
- Move elements to a new JS file.

Author: mardelnet

assets/src/blocks/components/BlockFrontend/setupBlockFrontend.js

@@ -0,0 +1,39 @@
+import {createRoot} from 'react-dom/client';
+
+import {TableOfContentsFrontend} from '../../TableOfContents/TableOfContentsFrontend.js';
+import {HappyPointFrontend} from '../../HappyPoint/HappyPointFrontend.js';
+import {ColumnsFrontend} from '../../Columns/ColumnsFrontend.js';
+import {TopicLinkFrontend} from '../../TopicLink/TopicLinkFrontend.js';
+import {SecondaryNavigationFrontend} from '../../SecondaryNavigation/SecondaryNavigationFrontend.js';
+
+// Render React components
+const COMPONENTS = {
+  'planet4-blocks/submenu': TableOfContentsFrontend,
+  'planet4-blocks/happypoint': HappyPointFrontend,
+  'planet4-blocks/columns': ColumnsFrontend,
+  'planet4-blocks/topic-link': TopicLinkFrontend,
+  'planet4-blocks/secondary-navigation': SecondaryNavigationFrontend,
+};
+
+export const setupBlockFrontend = () => {
+  document.querySelectorAll('[data-render]').forEach(
+    blockNode => {
+      const blockName = blockNode.dataset.render;
+      if (!COMPONENTS[blockName]) {
+        return;
+      }
+
+      const BlockFrontend = COMPONENTS[blockName];
+      if (!BlockFrontend) {
+        return;
+      }
+      const attributes = JSON.parse(blockNode.dataset.attributes);
+
+      if (!blockNode._reactRoot) {
+        blockNode._reactRoot = createRoot(blockNode);
+      }
+      blockNode._reactRoot.render(<BlockFrontend {...attributes.attributes} />);
+    }
+  );
+
+};

assets/src/frontendIndex.js

@@ -3,42 +3,12 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import 'regenerator-runtime/runtime';
 
-import {createRoot} from 'react-dom/client';
-import {TableOfContentsFrontend} from './blocks/TableOfContents/TableOfContentsFrontend';
-import {HappyPointFrontend} from './blocks/HappyPoint/HappyPointFrontend';
-import {ColumnsFrontend} from './blocks/Columns/ColumnsFrontend';
-import {TopicLinkFrontend} from './blocks/TopicLink/TopicLinkFrontend';
 import {setupLightboxForImages} from './blocks/components/Lightbox/setupLightboxForImages';
 import {setupParallax} from './blocks/components/Parallax/setupParallax';
-import {SecondaryNavigationFrontend} from './blocks/SecondaryNavigation/SecondaryNavigationFrontend';
-
-// Render React components
-const COMPONENTS = {
-  'planet4-blocks/submenu': TableOfContentsFrontend,
-  'planet4-blocks/happypoint': HappyPointFrontend,
-  'planet4-blocks/columns': ColumnsFrontend,
-  'planet4-blocks/topic-link': TopicLinkFrontend,
-  'planet4-blocks/secondary-navigation': SecondaryNavigationFrontend,
-};
+import {setupBlockFrontend} from './blocks/components/BlockFrontend/setupBlockFrontend';
 
 document.addEventListener('DOMContentLoaded', () => {
-  document.querySelectorAll('[data-render]').forEach(
-    blockNode => {
-      const blockName = blockNode.dataset.render;
-      if (!COMPONENTS[blockName]) {
-        return;
-      }
-
-      const BlockFrontend = COMPONENTS[blockName];
-      if (!BlockFrontend) {
-        return;
-      }
-      const attributes = JSON.parse(blockNode.dataset.attributes);
-      const rootElement = createRoot(blockNode);
-      rootElement.render(<BlockFrontend {...attributes.attributes} />);
-    }
-  );
-
+  setupBlockFrontend();
   setupLightboxForImages();
   setupParallax();
 });