chore(education); faster and modern hydration

Author: zoobestik

static/js/ktl-component/ktl-helpers.js

@@ -1,5 +1,5 @@
-import { hydrate } from "react-dom";
 import { createElement } from "react";
+import { hydrateRoot } from 'react-dom/client';
 
 export function ktlHelpers() {
   const comment = " ktl_component: ";
@@ -25,26 +25,7 @@ export function ktlHelpers() {
 
 export function initComponent(node, Component, props) {
   const fake_node = document.createElement('div');
-  hydrate(createElement(Component, props), fake_node);
+  fake_node.appendChild(node.cloneNode(true));
   node.replaceWith(fake_node);
-}
-
-export function replaceByComponent(node, Component, props) {
-  const parentNode = node.parentNode;
-  const fakeNode = document.createElement('div');
-
-  hydrate(createElement(Component, props), fakeNode);
-
-  let renderedNode = fakeNode.lastChild;
-
-  if (fakeNode.children.length === 1) {
-    node.replaceWith(renderedNode);
-    return;
-  }
-
-  do {
-    parentNode.insertBefore(node, renderedNode);
-  } while (renderedNode = renderedNode.previousSibling)
-
-  parentNode.removeChild(node);
+  hydrateRoot(fake_node, createElement(Component, props));
 }