refactor(cxl-ui): use @lit/context for media queries

packages/cxl-ui/package.json

@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "@conversionxl/normalize-wheel": "^1.0.1",
+    "@lit/context": "^1.0.1",
     "@vaadin/accordion": "^23.3.7",
     "@vaadin/button": "^23.3.7",
     "@vaadin/checkbox": "^23.3.7",

packages/cxl-ui/src/components/cxl-app-layout.js

@@ -10,6 +10,8 @@ import { MediaQueryController } from '@vaadin/component-base/src/media-query-con
 import cxlAppLayoutStyles from '../styles/cxl-app-layout-css.js';
 import cxlAppLayoutGlobalStyles from '../styles/global/cxl-app-layout-css.js';
 import '@vaadin/button';
+import { mediaContext } from '../media-context.js';
+import { provide } from '@lit/context';
 
 const ASIDE_LOCAL_STORAGE_KEY = 'cxl-app-layout-aside-opened';
 
@@ -54,14 +56,21 @@ export class CXLAppLayoutElement extends LitElement {
   @property()
   layout = '1c';
 
-  // MediaQueryController.
-  @property({ type: Boolean, reflect: true })
-  wide;
+  // @see https://github.com/vaadin/web-components/blob/de3db720ec8448a26d2f84d00965a9e369a1c3fb/packages/select/src/vaadin-select.js#L297
+  _phoneMediaQuery = '(max-width: 568px), (max-height: 568px)';
 
   // @TODO: Improve media query using shared state, possibly @lit/Context (https://lit.dev/docs/data/context/)
   // Device Detector media query.
   _wideMediaQuery = '(min-width: 528px)';
 
+  @provide({ context: mediaContext })
+  @property()
+  _phone = false;
+
+  @provide({ context: mediaContext })
+  @property()
+  _wide = false;
+
   static get styles() {
     return [cxlAppLayoutStyles];
   }
@@ -116,9 +125,19 @@ export class CXLAppLayoutElement extends LitElement {
 
     this.addController(
       new MediaQueryController(this._wideMediaQuery, (matches) => {
+        if (this.wide !== undefined && this.wide !== matches) {
+          window.location.reload();
+        }
+
         this.wide = matches;
       })
     );
+
+    this.addController(
+      new MediaQueryController(this._phoneMediaQuery, (matches) => {
+        this._phone = matches;
+      })
+    );
   }
 
   updated(changedProperties) {

packages/cxl-ui/src/components/cxl-marketing-nav.js

@@ -11,6 +11,8 @@ import cxlMarketingNavGlobalStyles from '../styles/global/cxl-marketing-nav-css.
 import '@vaadin/button';
 import '@vaadin/tabs';
 import '@vaadin/context-menu';
+import {consume} from '@lit/context';
+import {mediaContext} from '../media-context.js';
 
 @customElement('cxl-marketing-nav')
 export class CXLMarketingNavElement extends LitElement {
@@ -40,8 +42,12 @@ export class CXLMarketingNavElement extends LitElement {
   @property({ type: Boolean, reflect: true })
   minimal = false;
 
-  // MediaQueryController.
-  @property({ type: Boolean, reflect: true })
+  @consume({ context: mediaContext, subscribe: true })
+  @property({ type: Boolean })
+  _phone;
+
+  @consume({ context: mediaContext, subscribe: true })
+  @property({ type: Boolean })
   wide;
 
   // Device Detector media query.
@@ -50,9 +56,6 @@ export class CXLMarketingNavElement extends LitElement {
   @property({ type: Boolean, reflect: true })
   _phone;
 
-  // @see https://github.com/vaadin/web-components/blob/de3db720ec8448a26d2f84d00965a9e369a1c3fb/packages/select/src/vaadin-select.js#L297
-  _phoneMediaQuery = '(max-width: 568px), (max-height: 568px)';
-
   @property({ type: HTMLElement })
   submenuOverlay = null;
 
@@ -123,22 +126,6 @@ export class CXLMarketingNavElement extends LitElement {
   connectedCallback() {
     super.connectedCallback();
 
-    this.addController(
-      new MediaQueryController(this._wideMediaQuery, (matches) => {
-        if (this.wide !== undefined && this.wide !== matches) {
-          window.location.reload();
-        }
-
-        this.wide = matches;
-      })
-    );
-
-    this.addController(
-      new MediaQueryController(this._phoneMediaQuery, (matches) => {
-        this._phone = matches;
-      })
-    );
-
     this._boundOnOverlayOpen = this._onOverlayOpen.bind(this);
     const overlaysWrapper = document.createElement('div');
     overlaysWrapper.id = 'overlays-wrapper';

packages/cxl-ui/src/media-context.js

@@ -0,0 +1,3 @@
+import { createContext } from "@lit/context";
+
+export const mediaContext = createContext(Symbol("media-context"));

yarn.lock

@@ -2365,6 +2365,18 @@
   resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz#64df34e2f12e68e78ac57e571d25ec07fa460ca9"
   integrity sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ==
 
+"@lit-labs/ssr-dom-shim@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz#d693d972974a354034454ec1317eb6afd0b00312"
+  integrity sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g==
+
+"@lit/context@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@lit/context/-/context-1.0.1.tgz#4f4293096d4a1c9386f4ef7c0dbadf418ab4ece6"
+  integrity sha512-ujQEV42vRjhNzCu/YNc+dy8eq48cEYO2SvEl7iCmMzt8X7ixUYcDt8DPV1UBr58FJ7EUe9vTLPv/0soAi9bfRw==
+  dependencies:
+    "@lit/reactive-element" "^1.6.2 || ^2.0.0"
+
 "@lit/reactive-element@^1.1.0":
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.6.3.tgz#25b4eece2592132845d303e091bad9b04cdcfe03"
@@ -2379,6 +2391,13 @@
   dependencies:
     "@lit-labs/ssr-dom-shim" "^1.0.0"
 
+"@lit/reactive-element@^1.6.2 || ^2.0.0":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-2.0.1.tgz#b17d8818d9c72ccc489f44e35d87cfa18a9c8c93"
+  integrity sha512-eu50SQXHRthFwWJMp0oAFg95Rvm6MTPjxSXWuvAu7It90WVFLFpNBoIno7XOXSDvVgTrtKnUV4OLJqys2Svn4g==
+  dependencies:
+    "@lit-labs/ssr-dom-shim" "^1.1.2"
+
 "@mdx-js/mdx@^1.6.22":
   version "1.6.22"
   resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.22.tgz#8a723157bf90e78f17dc0f27995398e6c731f1ba"