feat(unload): add support for unload trigger

demo/backend/behaviors/basic/triggers/unload/index.xml.njk

@@ -0,0 +1,30 @@
+---
+permalink: "/behaviors/basic/unload/index.xml"
+tags: "Behaviors/Basic/Triggers"
+hv_title: "Unload"
+hv_button_behavior: "back"
+---
+
+{% extends 'templates/scrollview.xml.njk' %}
+{% from 'macros/button/index.xml.njk' import button %}
+{% from 'macros/description/index.xml.njk' import description %}
+
+{% block content %}
+  {{ description('Navigate to the next screen. When you navigate back, a message will be displayed.') }}
+
+  <view id="confirmation" style="container-style" hide="true">
+    <text style="confirmation-label">The screen was unloaded</text>
+  </view>
+
+  {% call button('Next', attributes={xmlns:"https://hyperview.org/hyperview"}) -%}
+    <behavior action="push" href="/hyperview/public/behaviors/basic/triggers/unload/unload.xml" />
+  {%- endcall %}
+
+  <behavior
+    action="show"
+    target="confirmation"
+    trigger="on-event"
+    event-name="unload-example"
+  />
+
+{% endblock %}

demo/backend/behaviors/basic/triggers/unload/unload.xml.njk

@@ -0,0 +1,22 @@
+---
+permalink: "/behaviors/basic/triggers/unload/unload.xml"
+---
+
+{% extends 'templates/scrollview.xml.njk' %}
+{% from 'macros/button/index.xml.njk' import button %}
+{% from 'macros/description/index.xml.njk' import description %}
+
+{% block content %}
+  {{ description('Navigate back to the previous screen to see the confirmation message.') }}
+
+  {% call button('Go back', attributes={xmlns:"https://hyperview.org/hyperview"}) -%}
+    <behavior action="back" />
+  {%- endcall %}
+
+  <behavior
+    trigger="unload"
+    event-name="unload-example"
+    action="dispatch-event"
+  />
+
+{% endblock %}

docs/reference_behavior_attributes.md

@@ -105,6 +105,16 @@ These elements support the `load` trigger:
 - [`<text>`](/docs/reference_text)
 - [`<image>`](/docs/reference_image)
 
+### `unload`
+
+Triggers when the element is unloaded in the screen.
+
+> Elements with `hide="true"` are not unloaded in the screen. This means any hidden element (or child element) with the `unload` trigger will not be executed.
+
+These elements support the `unload` trigger:
+
+- [`<view>`](/docs/reference_view)
+
 ### `select`
 
 Triggers when the element is selected. Only works on selectable elements.

schema/core.xsd

@@ -42,6 +42,7 @@
       <xs:enumeration value="on-event" />
       <xs:enumeration value="change" />
       <xs:enumeration value="load-stale-error" />
+      <xs:enumeration value="unload" />
     </xs:restriction>
   </xs:simpleType>
 

src/core/hyper-ref/index.tsx

@@ -100,6 +100,9 @@ export default class HyperRef extends PureComponent<Props, State> {
     Events.unsubscribe(this.onEventDispatch);
     // Deregister event listener for back triggers
     this.removeBackBehaviors();
+    if (this.props.element.localName === LOCAL_NAME.VIEW) {
+      this.triggerUnLoadBehaviors();
+    }
   }
 
   updateBehaviorElements = () => {
@@ -218,6 +221,27 @@ export default class HyperRef extends PureComponent<Props, State> {
     }
   };
 
+  triggerUnLoadBehaviors = () => {
+    let unloadBehaviors = this.getBehaviorElements(TRIGGERS.UNLOAD);
+    if (
+      this.props.options?.staleHeaderType ===
+      X_RESPONSE_STALE_REASON.STALE_IF_ERROR
+    ) {
+      const loadStaleBehaviors = this.getBehaviorElements(
+        TRIGGERS.LOAD_STALE_ERROR,
+      );
+      unloadBehaviors = unloadBehaviors.concat(loadStaleBehaviors);
+    }
+
+    if (unloadBehaviors.length > 0) {
+      Behaviors.triggerBehaviors(
+        this.props.element,
+        unloadBehaviors,
+        this.props.onUpdate,
+      );
+    }
+  };
+
   TouchableView = ({ children }: { children: JSX.Element }): JSX.Element => {
     const behaviors = this.behaviorElements.filter(
       e =>

src/types.ts

@@ -276,6 +276,7 @@ export const TRIGGERS = Object.freeze({
   PRESS_OUT: 'pressOut',
   REFRESH: 'refresh',
   SELECT: 'select',
+  UNLOAD: 'unload',
   VISIBLE: 'visible',
 });