Store data on each component so that child components can be inited when needed. Original code by https://github.com/imankulov in bd45c5d.

Author: adamghill

django_unicorn/components/unicorn_template_response.py

@@ -153,6 +153,8 @@ def render(self):
         root_element["unicorn:name"] = self.component.component_name
         root_element["unicorn:key"] = self.component.component_key
         root_element["unicorn:checksum"] = checksum
+        root_element["unicorn:data"] = frontend_context_variables
+        root_element["unicorn:calls"] = orjson.dumps(self.component.calls).decode("utf-8")
 
         # Generate the checksum based on the rendered content (without script tag)
         content_hash = generate_checksum(UnicornTemplateResponse._desoupify(soup))

django_unicorn/static/unicorn/js/component.js

@@ -84,6 +84,7 @@ export class Component {
         // Skip the component root element
         return;
       }
+
       const componentId = el.getAttribute("unicorn:id");
 
       if (componentId) {
@@ -550,4 +551,51 @@ export class Component {
       }
     });
   }
+
+  /**
+   * Replace the target DOM with the rerendered component.
+   *
+   * The function updates the DOM, and updates the Unicorn component store by deleting
+   * components that were removed, and adding new components.
+   */
+  morph(targetDom, rerenderedComponent) {
+    if (!rerenderedComponent) {
+      return;
+    }
+
+    // Helper function that returns an array of nodes with an attribute unicorn:id
+    const findUnicorns = () => [
+      ...targetDom.querySelectorAll("[unicorn\\:id]"),
+    ];
+
+    // Find component IDs before morphing
+    const componentIdsBeforeMorph = new Set(
+      findUnicorns().map((el) => el.getAttribute("unicorn:id"))
+    );
+
+    // Morph
+    this.morpher.morph(targetDom, rerenderedComponent);
+
+    // Find all component IDs after morphing
+    const componentIdsAfterMorph = new Set(
+      findUnicorns().map((el) => el.getAttribute("unicorn:id"))
+    );
+
+    // Delete components that were removed
+    const removedComponentIds = [...componentIdsBeforeMorph].filter(
+      (id) => !componentIdsAfterMorph.has(id)
+    );
+    removedComponentIds.forEach((id) => {
+      Unicorn.deleteComponent(id);
+    });
+
+    // Populate Unicorn with new components
+    findUnicorns().forEach((el) => {
+      Unicorn.insertComponentFromDom(el);
+    });
+  }
+
+  morphRoot(rerenderedComponent) {
+    this.morph(this.root, rerenderedComponent);
+  }
 }

django_unicorn/static/unicorn/js/messageSender.js

@@ -170,7 +170,7 @@ export function send(component, callback) {
           }
 
           if (parent.dom) {
-            component.morpher.morph(parentComponent.root, parent.dom);
+            parentComponent.morphRoot(parent.dom);
 
             parentComponent.loadingEls.forEach((loadingElement) => {
               if (loadingElement.loading.hide) {
@@ -198,10 +198,10 @@ export function send(component, callback) {
 
           parentComponent.refreshEventListeners();
 
-          parentComponent.getChildrenComponents().forEach((child) => {
-            child.init();
-            child.refreshEventListeners();
-          });
+          // parentComponent.getChildrenComponents().forEach((child) => {
+          //   child.init();
+          //   child.refreshEventListeners();
+          // });
         }
         parent = parent.parent || {};
       }
@@ -226,7 +226,7 @@ export function send(component, callback) {
           }
 
           if (targetDom) {
-            component.morpher.morph(targetDom, partial.dom);
+            component.morph(targetDom, partial.dom);
           }
         }
 
@@ -235,13 +235,18 @@ export function send(component, callback) {
           component.refreshChecksum();
         }
       } else if (rerenderedComponent) {
-        component.morpher.morph(component.root, rerenderedComponent);
+        component.morphRoot(rerenderedComponent);
       }
 
       component.triggerLifecycleEvent("updated");
 
-      // Re-init to refresh the root and checksum based on the new data
-      component.init();
+      try {
+        // Re-init to refresh the root and checksum based on the new data
+        component.init();
+      } catch (err) {
+        // No id found error will be thrown here for child components.
+        return;
+      }
 
       // Reset all event listeners
       component.refreshEventListeners();

django_unicorn/static/unicorn/js/unicorn.js

@@ -54,6 +54,30 @@ export function componentInit(args) {
   component.setModelValues();
 }
 
+/**
+ * Initialize the component from the DOM element if it hasn't been initialized yet.
+ *
+ * Used to populate the components object with fresh components, created by the server.
+ *
+ * @param {Object} node The node to check for initialization.
+ */
+export function insertComponentFromDom(node) {
+  const nodeId = node.getAttribute("unicorn:id");
+
+  if (!components[nodeId]) {
+    const args = {
+      id: nodeId,
+      name: node.getAttribute("unicorn:name"),
+      key: node.getAttribute("unicorn:key"),
+      checksum: node.getAttribute("unicorn:checksum"),
+      data: JSON.parse(node.getAttribute("unicorn:data")),
+      calls: JSON.parse(node.getAttribute("unicorn:calls")),
+    };
+
+    componentInit(args);
+  }
+}
+
 /**
  * Gets the component with the specified name or key.
  * Component keys are searched first, then names.
@@ -92,6 +116,14 @@ export function getComponent(componentNameOrKey) {
   return component;
 }
 
+/**
+ * Deletes the component from the component store.
+ * @param {String} componentId.
+ */
+export function deleteComponent(componentId) {
+  delete components[componentId];
+}
+
 /**
  * Call an action on the specified component.
  */