feat(modal): adding global state service

• added service to manage and update global state
• this serves as the foundation for the focus trap and registry fixes

Signed-off-by: Scott Mathis <[email protected]>

Author: Scott Mathis

packages/core/src/internal/index.ts

@@ -23,6 +23,7 @@ export * from './decorators/id.js';
 export * from './decorators/i18n.js';
 export * from './decorators/global-style.js';
 export * from './services/focus-trap-tracker.service.js';
+export * from './services/global.service.js';
 export * from './services/i18n.service.js';
 export * from './services/log.service.js';
 export * from './utils/async.js';

packages/core/src/internal/services/global.service.spec.ts

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+import { GlobalState } from './global.service.js';
+import { setupCDSGlobal } from '../utils/global.js';
+import { LogService } from './log.service.js';
+
+function resetGlobalState() {
+  window.CDS.state = {};
+}
+
+describe('Global State Service', () => {
+  beforeAll(() => {
+    setupCDSGlobal();
+  });
+
+  afterEach(() => {
+    resetGlobalState();
+  });
+
+  it('.state should return all global state', () => {
+    window.CDS.state.focusTraps = ['ohai'];
+    const current = GlobalState.state;
+    expect(current.focusTraps[0]).toBe('ohai');
+    window.CDS.state = {};
+  });
+
+  it('getValue should return value of state key', () => {
+    (window.CDS.state as any).focusTraps = ['yolo', 'howdy'];
+    const testme = GlobalState.getValue('focusTraps');
+    expect(testme).toEqual(['yolo', 'howdy']);
+  });
+
+  it('setValue should assign value to key', () => {
+    (window.CDS.state as any).focusTraps = ['yolo', 'howdy'];
+    GlobalState.setValue('focusTraps', ['ohai']);
+    expect(GlobalState.getValue('focusTraps')).toEqual(['ohai']);
+  });
+
+  it('.log() should log state to the console', () => {
+    const spy = spyOn(LogService, 'log');
+    GlobalState.log();
+    expect(spy).toHaveBeenCalled();
+  });
+});

packages/core/src/internal/services/global.service.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+import { CDSState, setupCDSGlobal } from '../utils/global.js';
+import { LogService } from './log.service.js';
+
+export class GlobalState {
+  static get state(): Readonly<CDSState> {
+    setupCDSGlobal();
+    return window?.CDS?.state;
+  }
+
+  static getValue(key: string): any {
+    setupCDSGlobal();
+    return (window.CDS.state as any)[key];
+  }
+
+  static setValue(key: string, val: any) {
+    setupCDSGlobal();
+    (window.CDS.state as any)[key] = val;
+  }
+
+  static log() {
+    setupCDSGlobal();
+    LogService.log(JSON.stringify(window?.CDS?.state, null, 2));
+  }
+}

packages/core/src/internal/utils/framework.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -60,5 +60,5 @@ export function getVueVersion(useCache = true) {
 }
 
 export function isStorybook() {
-  return window.location.href.includes('localhost:6006');
+  return window?.location?.href?.includes('localhost:6006');
 }

packages/core/src/internal/utils/global.ts

@@ -20,6 +20,7 @@ export interface CDSGlobal {
     /** Set to true for production env to disable dev time logging and tooling */
     production: boolean;
   };
+  state?: CDSState;
 }
 
 export interface CDSLog {
@@ -36,6 +37,9 @@ export interface CDSLog {
   };
 }
 
+export interface CDSState {
+  focusTraps?: string[];
+}
 declare global {
   interface Window {
     CDS: CDSGlobal;
@@ -50,22 +54,26 @@ export function setupCDSGlobal() {
 }
 
 function getVersion() {
-  const log: CDSLog = {
-    versions: window.CDS._version,
-    environment: window.CDS.environment,
-    userAgent: navigator.userAgent,
-    supports: window.CDS._supports,
-    angularVersion: getAngularVersion(false),
-    angularJSVersion: getAngularJSVersion(false),
-    reactVersion: getReactVersion(false),
-    vueVersion: getVueVersion(false),
-    loadedElements: window.CDS._loadedElements,
-  };
-  return log;
+  if (isBrowser()) {
+    const log: CDSLog = {
+      versions: window.CDS._version,
+      environment: window.CDS.environment,
+      userAgent: navigator.userAgent,
+      supports: window.CDS._supports,
+      angularVersion: getAngularVersion(false),
+      angularJSVersion: getAngularJSVersion(false),
+      reactVersion: getReactVersion(false),
+      vueVersion: getVueVersion(false),
+      loadedElements: window.CDS._loadedElements,
+    };
+    return log;
+  }
+
+  return void 0;
 }
 
 function logVersion() {
-  console.log(JSON.stringify(getVersion(), null, 2));
+  LogService.log(JSON.stringify(getVersion(), null, 2));
 }
 
 function initializeCDSGlobal() {
@@ -77,6 +85,7 @@ function initializeCDSGlobal() {
     environment: {
       production: false,
     },
+    state: {},
     getVersion,
     logVersion,
   };

packages/core/src/internal/utils/register.ts

@@ -20,7 +20,7 @@ const addElementToRegistry = curryN(
       registry.define(tagName, applyCSSGapShim(elementClass));
       setupCDSGlobal();
 
-      if (!window.CDS._loadedElements.some(i => i === tagName)) {
+      if (window && !window.CDS._loadedElements.some(i => i === tagName)) {
         window.CDS._loadedElements.push(tagName);
       }
     }