Bug: Fix issue with reaction usage for SSR

Author: jlukic

RELEASE-NOTES.md

@@ -6,6 +6,10 @@ This is a pre-release version and APIs will change quickly. Before `1.0` release
 
 Please note after `1.0` Semver will be followed using normal protocols.
 
+# Version 0.13.1 - 07.14.2025
+
+* **Bug** - Fixed a bug with SSR in reactive directives like conditional/data. If a reaction was long-lived (for example an interval is set up in onCreated) the reaction would not properly get gced and could rerun on the server causing an ssr error like (TypeError: this._$Ct._$AI is not a function at ReactiveDataDirective.setValue)
+
 # Version 0.13.0 - 07.14.2025
 
 ## CSS Tokens

packages/renderer/src/lit/directives/reactive-async.js

@@ -21,13 +21,23 @@ export class ReactiveAsyncDirective extends AsyncDirective {
       this.reaction = null;
     }
 
+    // Create a new reaction that watches for reactive changes on client
+    if(isClient) {
+      this.watchChanges();
+    }
+
+    // Return initial render
+    return this.renderCurrentState(asyncCondition);
+  }
+
+  watchChanges() {
+
     // pass through context for debugging
     let context = {
       message: `async block: {#async ${asyncCondition.expression}}`,
       async: asyncCondition,
     };
 
-    // Create a new reaction
     this.reaction = Reaction.create((computation) => {
       if (!this.isConnected) {
         computation.stop();
@@ -46,9 +56,6 @@ export class ReactiveAsyncDirective extends AsyncDirective {
         this.setValue(rendered);
       }
     }, { context });
-
-    // Return initial render
-    return this.renderCurrentState(asyncCondition);
   }
 
   handleExpressionResult(result, asyncCondition) {

packages/renderer/src/lit/directives/reactive-conditional.js

@@ -1,5 +1,5 @@
 import { Reaction } from '@semantic-ui/reactivity';
-import { each } from '@semantic-ui/utils';
+import { each, isClient } from '@semantic-ui/utils';
 import { nothing, noChange } from 'lit';
 import { AsyncDirective } from 'lit/async-directive.js';
 import { directive } from 'lit/directive.js';
@@ -21,53 +21,71 @@ export class ReactiveConditionalDirective extends AsyncDirective {
       message: `if/else statement: {#if ${conditional.expression}}`,
       conditional: conditional,
     };
-    this.reaction = Reaction.create((comp) => {
-      if (!this.isConnected) {
-        comp.stop();
-        return;
-      }
-      let matchIndex = -1;
-      if (conditional.condition()) {
-        html = conditional.content();
-        matchIndex = 1000; // special index for if condition
-      }
-      else if (conditional.branches?.length) {
-        // evaluate each elseif/else branch
-        each(conditional.branches, (branch, index) => {
-          if(matchIndex === -1) {
-            if (branch.type == 'elseif' && branch.condition()) {
-              matchIndex = index;
-              html = branch.content();
-            }
-            else if (branch.type == 'else') {
-              matchIndex = index;
-              html = branch.content();
-            }
-          }
-        });
-      }
-      else {
-        html = nothing;
-        delete this.matchIndex;
-      }
-      if (!html) {
-        html = nothing;
-        delete this.matchIndex;
-      }
-      if (!comp.firstRun && this.matchIndex !== matchIndex) {
-        this.matchIndex = matchIndex;
-        this.setValue(html);
-      }
-      return html;
-    }, { context });
-    /* Commented out until can resolve mobile menu
+
+    // Create a new reaction that watches for reactive changes on client
+    if(isClient) {
+      this.reaction = Reaction.create((comp) => {
+        if (!this.isConnected) {
+          comp.stop();
+          return;
+        }
+
+        const result = this.getBranch(conditional);
+        matchIndex = result.matchIndex
+        html = result.html;
+
+        if (!comp.firstRun && this.matchIndex !== matchIndex) {
+          this.matchIndex = matchIndex;
+          this.setValue(html);
+        }
+        return html;
+      }, { context });
+    }
+    else {
+      const result = this.getBranch(conditional);
+      matchIndex = result.matchIndex
+      html = result.html;
+    }
+
+    /* Experimental (not used currently *
     if(this.matchIndex == matchIndex) {
       return noChange;
-    }
-    */
+    } */
     return html;
   }
 
+  getBranch(conditional) {
+    let matchIndex = -1;
+    let html;
+    if (conditional.condition()) {
+      html = conditional.content();
+      matchIndex = 1000; // special index for if condition
+    }
+    else if (conditional.branches?.length) {
+      // evaluate each elseif/else branch
+      each(conditional.branches, (branch, index) => {
+        if(matchIndex === -1) {
+          if (branch.type == 'elseif' && branch.condition()) {
+            matchIndex = index;
+            html = branch.content();
+          }
+          else if (branch.type == 'else') {
+            matchIndex = index;
+            html = branch.content();
+          }
+        }
+      });
+    }
+    else {
+      html = nothing;
+      delete this.matchIndex;
+    }
+    if(!html) {
+      html = nothing;
+    }
+    return { matchIndex, html };
+  }
+
   disconnected() {
     if (this.reaction) {
       this.reaction.stop();

packages/renderer/src/lit/directives/reactive-data.js

@@ -3,7 +3,7 @@ import { AsyncDirective } from 'lit/async-directive.js';
 import { directive } from 'lit/directive.js';
 
 import { Reaction } from '@semantic-ui/reactivity';
-import { inArray, isArray, isObject } from '@semantic-ui/utils';
+import { inArray, isServer, isArray, isObject, isClient } from '@semantic-ui/utils';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
@@ -26,7 +26,6 @@ export class ReactiveDataDirective extends AsyncDirective {
 
     // Create a new reaction to rerun the computation function if reactive data updates
     // that dont trigger rerender occur
-
     if (this.reaction) {
       // if reaction already set up just return value for rerender
       return this.getReactiveValue();
@@ -35,30 +34,41 @@ export class ReactiveDataDirective extends AsyncDirective {
       // Create a new reaction to rerun the computation function if reactive data updates
       // that dont trigger rerender occur
       let value;
-
-      const context = {
-        message: `expression: {${expression.expression}}`,
-        expression: expression.expression,
-      };
-
-      this.reaction = Reaction.create((computation) => {
-        if (!this.isConnected) {
-          computation.stop();
-          return;
-        }
+      if(isClient) {
+        value = this.watchChanges();
+      }
+      else {
         value = this.getReactiveValue();
-        if (this.settings.unsafeHTML) {
-          value = unsafeHTML(value);
-        }
-        if (!computation.firstRun) {
-          this.setValue(value);
-        }
-      }, { context });
-
+      }
       return value;
     }
   }
 
+  watchChanges() {
+    const context = {
+      message: `expression: {${this.expression.expression}}`,
+      expression: this.expression.expression,
+    };
+    let value;
+    this.reaction = Reaction.create((computation) => {
+      if (!this.isConnected) {
+        computation.stop();
+        return;
+      }
+      value = this.getReactiveValue();
+      if (this.settings.unsafeHTML) {
+        value = unsafeHTML(value);
+      }
+      if (!computation.firstRun) {
+        this.setValue(value);
+      }
+    }, { context });
+
+    // this returns the value for perf
+    // otherwise we calculate twice on first run
+    return value;
+  }
+
   getReactiveValue() {
     let reactiveValue = this.expression.value();
 

packages/renderer/src/lit/directives/reactive-each.js

@@ -6,7 +6,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { Reaction } from '@semantic-ui/reactivity';
 import { isEmpty } from '@semantic-ui/utils';
 
-import { arrayFromObject, isArray, isPlainObject, isString } from '@semantic-ui/utils';
+import { arrayFromObject, isArray, isPlainObject, isString, isClient } from '@semantic-ui/utils';
 
 export class ReactiveEachDirective extends AsyncDirective {
   constructor(partInfo) {
@@ -36,19 +36,23 @@ export class ReactiveEachDirective extends AsyncDirective {
     }
 
     // Create a new reaction
-    this.reaction = Reaction.create((computation) => {
-      if (!this.isConnected) {
-        computation.stop();
-        return;
-      }
-      this.items = this.getItems(this.eachCondition);
-      if (!computation.firstRun) {
-        const rendered = this.renderItems();
-        this.setValue(rendered);
-      }
-    }, { context });
-
-    return this.renderItems();
+    let html = this.renderItems();
+
+    if(isClient) {
+      this.reaction = Reaction.create((computation) => {
+        if (!this.isConnected) {
+          computation.stop();
+          return;
+        }
+        this.items = this.getItems(this.eachCondition);
+        if (!computation.firstRun) {
+          html = this.renderItems();
+          this.setValue(html);
+        }
+      }, { context });
+    }
+
+    return html;
   }
 
   renderItems() {

packages/renderer/src/lit/directives/render-template.js

@@ -1,6 +1,6 @@
 import { Reaction } from '@semantic-ui/reactivity';
 import { Template } from '@semantic-ui/templating';
-import { isEqual, isString, mapObject } from '@semantic-ui/utils';
+import { isEqual, isClient, isString, mapObject } from '@semantic-ui/utils';
 import { noChange, nothing } from 'lit';
 import { AsyncDirective } from 'lit/async-directive.js';
 import { directive } from 'lit/directive.js';
@@ -20,6 +20,22 @@ export class RenderTemplateDirective extends AsyncDirective {
     this.subTemplates = subTemplates;
     this.data = data;
     this.ast = null;
+
+    // Create a new reaction that watches for reactive changes on client
+    if(isClient) {
+      this.watchChanges();
+    }
+
+    this.maybeCreateTemplate();
+
+    // this is an empty template
+    if (!this.template || this.template?.ast.length == 0) {
+      return nothing;
+    }
+    return this.renderTemplate();
+  }
+
+  watchChanges() {
     this.reaction = Reaction.create((reaction) => {
       this.maybeCreateTemplate(); // reactive reference to template
       const dataContext = this.unpackData(this.data); // reactive reference to data
@@ -29,6 +45,7 @@ export class RenderTemplateDirective extends AsyncDirective {
         reaction.stop();
         return;
       }
+
       // first run handled by main path
       if (reaction.firstRun) {
         return;
@@ -51,14 +68,6 @@ export class RenderTemplateDirective extends AsyncDirective {
       const html = this.renderTemplate(dataContext);
       this.setValue(html);
     });
-
-    this.maybeCreateTemplate();
-
-    // this is an empty template
-    if (!this.template || this.template?.ast.length == 0) {
-      return nothing;
-    }
-    return this.renderTemplate();
   }
 
   renderTemplate(dataContext) {