@genesislcap/foundation-layout 14.77.1-alpha-7248576.0 → 14.77.2

package/README.md

@@ -282,7 +282,7 @@ In the `@genesislcap/foundation-utils` package, there is a mix-in class `Lifecyc
 
 These can be used to gate certain functionality.
 
-For example, if there are parts of `disconnectedCallback` that you don't want to run when the item is being dragged around the layout, you can gate it behind a `(!this.shouldRunDisconnect) return;` early return. See [this example](#resource-intensive-component-resetting-in-layout).
+For example, if there are parts of `disconnectedCallback` that you don't want to run when the item is being dragged around the layout, you can gate it behind a `(!this.shouldRunDisconnect) return;` early return. See [this example](#resource-intensive-component-resetting-in-layout) and [this example](#consuming-lifecycle-value-multiple-times).
 
 :::warning
 At the very least, you must run `super` calls to the lifecycle methods, or else your custom element will not work correctly.
@@ -1158,6 +1158,67 @@ The above is quite a comprehensive example, it doesn't necessarily have to be so
 The requirement to capture the parameter in the example above (e.g. `const shouldRunDisconnect = shouldRunDisconnect`) is to cache the information at the time of the lifecycle change, for use when the `DOM.queueUpdate` work is performed. This is not required if you run your lifecycle methods synchronously, but if you follow the above pattern you need to consider the `async` functionality being scheduled for after the layout considers the relevant lifecycle-gating functionality (such as dragging) to be over.
 :::
 
+### Consuming lifecycle value multiple times
+
+Consider the following example where you're gating multiple bits of functionality with `shouldRunConnect`:
+```typescript
+@customElement({
+  name: 'mock-connected',
+})
+export class MockConnected extends LifecycleMixin(FASTElement) {
+  @observable resource = '';
+
+  async connectedCallback(): Promise<void> {
+    super.connectedCallback();
+    console.log("shouldRunConnect: " + this.shouldRunConnect)
+    if (this.shouldRunConnect) {
+      await this.init();
+    }
+    await otherSetup(this.shouldRunConnect);
+  }
+
+  // Simulate doing work with an external service
+  async init(): Promise<void> { }
+  async otherSetup(connectToResource: boolean): Promise<void> {}
+  // Similar setup in disconnectedCallback...
+}
+```
+
+In this example when you have this item inside of the layout, the functionality will not correctly be gated when you add or remove other items as intended.
+
+This is because `shouldRunConnect` (and `shouldRunDisconnect`) perform a check to see whether the layout has performed an event which should gate functionality, and reading the value multiple times will incorrectly signal that there hasn't been another lifecycle event upon subsequent reads during the same cycle. The mental model you can use here is thinking of consuming the check when you read the variable.
+
+Therefore, if you want to use the value multiple times in the `connectedCallback` and `disconnectedCallback` functions you should cache the variable.
+
+** You should only read the variables `this.shouldRunConnect` and `this.shouldRunDisconnect` once per `shouldRunConnect` and `shouldRunDisconnect` cycle respectively. **
+
+```typescript
+  async connectedCallback(): Promise<void> {
+    super.connectedCallback();
+    if (this.shouldRunConnect) {
+      console.log("shouldRunConnect: " + this.shouldRunConnect)
+      await this.init();
+      await otherSetup(true);
+    } else {
+      await otherSetup(false);
+    }
+  }
+  // or....
+  async connectedCallback(): Promise<void> {
+    super.connectedCallback();
+    const runFullConnect = this.shouldRunConnect;
+    console.log("shouldRunConnect: " + runFullConnect)
+    if (runFullConnect) {
+      await this.init();
+    }
+    await otherSetup(runFullConnect);
+  }
+```
+
+:::danger
+The same limitation applies if you're checking the variable multiple times due to having a hierarchy of extending classes. Again, you should cache the variable for checking in this case.
+:::
+
 ## Supplementary information
 
 ### Custom components to handle bindings and event listeners

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-layout",
   "description": "Genesis Foundation UI App Layout",
-  "version": "14.77.1-alpha-7248576.0",
+  "version": "14.77.2",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-layout.d.ts",
@@ -24,14 +24,14 @@
     "test:debug": "genx test --debug"
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.77.1-alpha-7248576.0",
-    "@genesislcap/genx": "14.77.1-alpha-7248576.0",
+    "@genesislcap/foundation-testing": "14.77.2",
+    "@genesislcap/genx": "14.77.2",
     "rimraf": "^3.0.2"
   },
   "dependencies": {
-    "@genesis-community/golden-layout": "^2.10.0",
-    "@genesislcap/foundation-comms": "14.77.1-alpha-7248576.0",
-    "@genesislcap/foundation-utils": "14.77.1-alpha-7248576.0",
+    "@genesis-community/golden-layout": "^2.10.1",
+    "@genesislcap/foundation-comms": "14.77.2",
+    "@genesislcap/foundation-utils": "14.77.2",
     "@microsoft/fast-components": "^2.21.3",
     "@microsoft/fast-element": "^1.7.0",
     "@microsoft/fast-foundation": "^2.33.2",
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "feff0c2dba8bff2b00afe0e4aa3bf1d5d649a7b0"
+  "gitHead": "b47f3a7923044c6a2075e35d8bb066bddb9f9bad"
 }