fix(core): lazy-register context providers

if consumers upgrade first, this allows them to register on providers
after-the-fact

Author: bennypowers

.changeset/chatty-pears-press.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-core": patch
+---
+
+Register context providers even if they upgrade after the consumers

.gitignore

@@ -127,8 +127,8 @@ core/pfe-core/demo/*
 /docs/demo/**/*.d.ts
 /docs/demo/**/*.js.map
 /docs/demo/demo.js.LEGAL.txt
+/docs/demo/components.ts
 !/docs/demo/demo.css
-!/docs/demo/components.ts
 !/docs/core/styles/demo.njk
 
 

core/pfe-core/controllers/color-context-controller.ts

@@ -10,6 +10,8 @@ import { StyleController } from './style-controller.js';
 import CONTEXT_BASE_STYLES from './color-context-controller.scss';
 
 export class ColorContextController implements ReactiveController {
+  private static contextEvents = new Set<ContextEvent<UnknownContext>>();
+
   private callbacks = new Set<ColorContextController['update']>();
 
   private context: Context<ContextTheme|null>;
@@ -35,9 +37,19 @@ export class ColorContextController implements ReactiveController {
    */
   hostConnected() {
     // register as a context consumer on the nearest context-aware ancestor
-    this.host.dispatchEvent(new ContextEvent(this.context, this.contextCallback, true));
+    const event = new ContextEvent(this.context, this.contextCallback, true);
+    this.host.dispatchEvent(event);
+
+    ColorContextController.contextEvents.add(event);
+
     // become a context provider
     this.host.addEventListener('context-request', this.onChildContextEvent);
+
+    // re-fire all context events, in case this host upgraded after the previous one
+    for (const fired of ColorContextController.contextEvents) {
+      fired.target?.dispatchEvent(fired);
+    }
+
     // 💃 🕺
     this.update();
   }
@@ -63,7 +75,10 @@ export class ColorContextController implements ReactiveController {
   private isColorContextEvent(
     event: ContextEvent<UnknownContext>
   ): event is ContextEvent<Context<ContextTheme|null>> {
-    return event.context.name === `${this.prefix}-color-context`;
+    return (
+      event.target !== this.host &&
+      event.context.name === `${this.prefix}-color-context`
+    );
   }
 
   /** Return the current CSS `--context` value, or null */
@@ -103,22 +118,26 @@ export class ColorContextController implements ReactiveController {
 
   /** Sets the `on` attribute on the host and any children that requested multiple updates */
   @bound public update(fallback?: ContextTheme|null) {
-    // NB: We query the existing CSSStyleDeclaration on _every_. _single_. _update_.
-    const incoming = this.contextVariable || fallback;
-    const current = this.host.getAttribute('on');
-    if (incoming !== current) {
-      const next = incoming;
-      this.logger.log(`Resetting context from ${current} to ${next}`);
-
-      if (next != null) {
-        this.host.setAttribute('on', next);
-      } else {
-        this.host.removeAttribute('on');
-      }
-
-      for (const cb of this.callbacks) {
-        cb(incoming);
+    // ordinarily we'd prefer async/await for this,
+    // but in this case, we use `.then` to maintain the synchronous interface of ContextCallback
+    this.host.updateComplete.then(() => {
+      // NB: We query the existing CSSStyleDeclaration on _every_. _single_. _update_.
+      const incoming = this.contextVariable || fallback;
+      const current = this.host.getAttribute('on');
+      if (incoming !== current) {
+        const next = incoming;
+        this.logger.log(`Resetting context from ${current} to ${next}`);
+
+        if (next != null) {
+          this.host.setAttribute('on', next);
+        } else {
+          this.host.removeAttribute('on');
+        }
+
+        for (const cb of this.callbacks) {
+          cb(incoming);
+        }
       }
-    }
+    });
   }
 }