Initial prototype for lifecycle events.

Author: adamghill

django_unicorn/static/unicorn/js/component.js

@@ -5,7 +5,7 @@ import {
   addDbEventListener,
   addModelEventListener,
 } from "./eventListeners.js";
-import { components } from "./store.js";
+import { components, lifecycleEvents } from "./store.js";
 import { send } from "./messageSender.js";
 import morphdom from "./morphdom/2.6.1/morphdom.js";
 import {
@@ -517,4 +517,10 @@ export class Component {
       debounce(send, debounceTime, false)(this, callback);
     }
   }
+
+  triggerLifecycleEvent(eventName) {
+    if (eventName in lifecycleEvents) {
+      lifecycleEvents[eventName].forEach((cb) => cb(this));
+    }
+  }
 }

django_unicorn/static/unicorn/js/messageSender.js

@@ -215,6 +215,8 @@ export function send(component, callback) {
         );
       }
 
+      component.triggerLifecycleEvent("updated");
+
       // Re-init to refresh the root and checksum based on the new data
       component.init();
 

django_unicorn/static/unicorn/js/store.js

@@ -1 +1,15 @@
+/**
+ * Stores components.
+ *
+ * Key is the component id.
+ * Value is the instantiated component.
+ */
 export const components = {};
+
+/**
+ * Stores lifecycle events to fire.
+ *
+ * Key is the event name.
+ * Value is an array of callback functions.
+ */
+export const lifecycleEvents = {};

django_unicorn/static/unicorn/js/unicorn.js

@@ -1,6 +1,6 @@
 import { Component } from "./component.js";
 import { isEmpty, hasValue } from "./utils.js";
-import { components } from "./store.js";
+import { components, lifecycleEvents } from "./store.js";
 
 let messageUrl = "";
 let csrfTokenHeaderName = "X-CSRFToken";
@@ -108,3 +108,16 @@ export function getReturnValue(componentNameOrKey) {
 
   return component.return.value;
 }
+
+/**
+ * Adds an event listener for particular events.
+ * @param {String} eventName The event to register under. Current events are: `updated`.
+ * @param {Function} callback Function to call when the event gets fired.
+ */
+export function addEventListener(eventName, callback) {
+  if (!(eventName in lifecycleEvents)) {
+    lifecycleEvents[eventName] = [];
+  }
+
+  lifecycleEvents[eventName].push(callback);
+}

example/unicorn/templates/unicorn/hello-world-test.html

@@ -1,10 +1,16 @@
 <div>
-    <button unicorn:click="$reset">Reset the component</button>
-    <br />
-    <br />
+  <button unicorn:click="$reset">Reset the component</button>
+  <br />
+  <br />
 
-    <label></label>
-    <input unicorn:model="name" type="text" id="name" unicorn:key="key1">
+  <label></label>
+  <input unicorn:model="name" type="text" id="name" unicorn:key="key1">
 
-    Hello, {{ name|default:'World' }}!
-</div>
+  Hello, {{ name|default:'World' }}!
+</div>
+
+<script type="application/javascript">
+  window.addEventListener('DOMContentLoaded', (event) => {
+    Unicorn.addEventListener('updated', (component) => console.log('got updated', component));
+  });
+</script>