Use getConstants() when accessing constants from TurboModules/NativeModules (#3608)

* Use getConstants() when accessing constants from TurboModules/NativeModules * Change files * prettier * update test snapshots
2024-05-01 20:03:11 -07:00 · 2024-05-01 20:03:11 -07:00 · adf19a343e
--- a/change/@fluentui-react-native-experimental-avatar-1001cfb8-b7d1-4910-9bf4-3910f8ad9218.json
+++ b/change/@fluentui-react-native-experimental-avatar-1001cfb8-b7d1-4910-9bf4-3910f8ad9218.json
@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Use getConstants() when accessing constants from TurboModules/NativeModules",
+  "packageName": "@fluentui-react-native/experimental-avatar",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
--- a/change/@fluentui-react-native-win32-theme-5c743424-8703-4345-9062-ff5223de31e3.json
+++ b/change/@fluentui-react-native-win32-theme-5c743424-8703-4345-9062-ff5223de31e3.json
@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Use getConstants() when accessing constants from TurboModules/NativeModules",
+  "packageName": "@fluentui-react-native/win32-theme",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
--- a/change/@uifabricshared-theming-react-native-7dd87a85-73a7-45fc-9dc2-10cb7a610a5a.json
+++ b/change/@uifabricshared-theming-react-native-7dd87a85-73a7-45fc-9dc2-10cb7a610a5a.json
@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Use getConstants() when accessing constants from TurboModules/NativeModules",
+  "packageName": "@uifabricshared/theming-react-native",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
--- a/packages/deprecated/theming-react-native/src/NativeModule/ThemingModuleHelpers.ts
+++ b/packages/deprecated/theming-react-native/src/NativeModule/ThemingModuleHelpers.ts
@ -50,7 +50,7 @@ export function translateOfficeTheme(module: OfficeThemingModule, cache: Palette
 export function createThemingModuleHelper(themingModule?: OfficeThemingModule, emitter?: IEventEmitter): IThemingModuleHelper {
  themingModule || console.error('No NativeModule for Theming found');
  const paletteCache: PaletteCache = {};
-  let _hostTheme = themingModule.initialHostThemeSetting || '';
+  let _hostTheme = themingModule.getConstants().initialHostThemeSetting || '';
  emitter &&
    emitter.addListener('onPlatformDefaultsChanged', (args: PlatformDefaultsChangedArgs) => {
      _hostTheme = (args && args.hostThemeSetting) || _hostTheme;
--- a/packages/experimental/Avatar/src/NativeAvatar.tsx
+++ b/packages/experimental/Avatar/src/NativeAvatar.tsx
@ -26,7 +26,8 @@ interface ExportedConstants {
  sizes: { [key in Size]: number };
 }

-const ExportedNativeConstants: ExportedConstants = TurboModuleRegistry.get('FRNAvatarConstants') || NativeModules.FRNAvatarViewManager;
+const ExportedNativeConstants: ExportedConstants =
+  TurboModuleRegistry.get('FRNAvatarConstants')?.getConstants() || NativeModules.FRNAvatarViewManager;

 export type NativeAvatarTokens = {
  /**
--- a/packages/theming/win32-theme/src/NativeModule/fallbackOfficeModule.ts
+++ b/packages/theming/win32-theme/src/NativeModule/fallbackOfficeModule.ts
@ -152,19 +152,23 @@ export function fallbackGetPalette(pal?: string): OfficePalette {
 }

 export const fallbackOfficeModule: OfficeThemingModule = {
-  ramps: {
-    App: ['#F8F8F8', '#EFF6FC', '#BBDAF3', '#55A4E2', '#359EDD', '#0078d7', '#283E4A', '#030C13'],
-    FluentGrays: ['#FAF9F8', '#797775', '#11100F'],
-    ClassicGrays: ['#FFFFFF', '#737373', '#000000'],
-    Sepias: ['#ECE6DE'],
-  },
  getPalette: fallbackGetPalette,
-  typography: {},
-  fluentTypography: {},
-  rampNames: {
-    App: ['FakeApp1', 'App2', 'App3', 'App4', 'App5', 'App6', 'App7', 'App8'],
-    FluentGrays: ['FakeGray1', 'Gray2', 'Gray3'],
-    ClassicGrays: ['FakeGray4', 'Gray5', 'Gray6'],
-    Sepias: ['FakeSepia'],
+  getConstants() {
+    return {
+      ramps: {
+        App: ['#F8F8F8', '#EFF6FC', '#BBDAF3', '#55A4E2', '#359EDD', '#0078d7', '#283E4A', '#030C13'],
+        FluentGrays: ['#FAF9F8', '#797775', '#11100F'],
+        ClassicGrays: ['#FFFFFF', '#737373', '#000000'],
+        Sepias: ['#ECE6DE'],
+      },
+      typography: {},
+      fluentTypography: {},
+      rampNames: {
+        App: ['FakeApp1', 'App2', 'App3', 'App4', 'App5', 'App6', 'App7', 'App8'],
+        FluentGrays: ['FakeGray1', 'Gray2', 'Gray3'],
+        ClassicGrays: ['FakeGray4', 'Gray5', 'Gray6'],
+        Sepias: ['FakeSepia'],
+      },
+    };
  },
 } as OfficeThemingModule;
--- a/packages/theming/win32-theme/src/NativeModule/getThemingModule.native.ts
+++ b/packages/theming/win32-theme/src/NativeModule/getThemingModule.native.ts
@ -1,19 +1,14 @@
-import type { DeviceEventEmitter, TurboModule } from 'react-native';
 import { NativeEventEmitter, TurboModuleRegistry } from 'react-native';

 import { fallbackGetPalette, fallbackOfficeModule } from './fallbackOfficeModule';
 import { setCurrentHostThemeSetting } from './hostThemeSetting';
 import type { OfficeThemingModule } from './officeThemingModule';

-type EventSubscriptionVendor = typeof DeviceEventEmitter.sharedSubscriber;
-
 /**
 *  If we have a userAgent string, let's assume we're web debugging.  __DEV__ is for developer bundles.  Currently,
 *  react-native only polyfills navigator with { product: 'ReactNative', geolocation: NativeModules.Geolocation }
 */

-type ITurboModuleRegistry = TurboModule & OfficeThemingModule & EventSubscriptionVendor;
-
 function disableGetPalette(): boolean {
  const disabled = __DEV__ && navigator && navigator.userAgent !== undefined;
  disabled && console.warn(console.warn('Web Debugging forces Theming Native Module to fallback to fake color values.'));
@ -21,13 +16,13 @@ function disableGetPalette(): boolean {
 }

 export function getThemingModule(): [OfficeThemingModule, NativeEventEmitter | undefined] {
-  const module = TurboModuleRegistry.get<ITurboModuleRegistry>('Theming');
+  const module = TurboModuleRegistry.get<OfficeThemingModule>('Theming');
  // if the native module exists return the module + an emitter for it
  if (module) {
    if (!isInstantiated) {
      // We need to store the host theme so that when themes are created
      // they can use this information.
-      setCurrentHostThemeSetting(module.initialHostThemeSetting);
+      setCurrentHostThemeSetting(module.getConstants().initialHostThemeSetting);
      isInstantiated = true;
    }
    // mock getPalette if it should be disabled, otherwise return the module directly
--- a/packages/theming/win32-theme/src/NativeModule/officeThemingModule.ts
+++ b/packages/theming/win32-theme/src/NativeModule/officeThemingModule.ts
@ -26,11 +26,13 @@ export interface NativeColorNames {

 export interface OfficeThemingModule extends NativeModule {
  getPalette(palette?: string): OfficePalette | CxxException;
-  typography: object; // eslint-disable-line @typescript-eslint/ban-types
-  fluentTypography: Typography;
-  ramps: NativeColorRamps;
-  rampNames: NativeColorNames;
-  initialHostThemeSetting?: string;
+  getConstants(): {
+    typography: object; // eslint-disable-line @typescript-eslint/ban-types
+    fluentTypography: Typography;
+    ramps: NativeColorRamps;
+    rampNames: NativeColorNames;
+    initialHostThemeSetting?: string;
+  };
 }

 export interface IEventEmitter {
--- a/packages/theming/win32-theme/src/tests/snapshots/win32-theme.test.ts.snap
+++ b/packages/theming/win32-theme/src/tests/snapshots/win32-theme.test.ts.snap
@ -3501,8 +3501,14 @@ exports[`fallbackGetPalette test TaskPane palette 1`] = `

 exports[`fallbackOfficeModule test 1`] = `
 {
-  "fluentTypography": {},
+  "getConstants": [Function],
  "getPalette": [Function],
+}
+`;
+
+exports[`fallbackOfficeModule test 2`] = `
+{
+  "fluentTypography": {},
  "rampNames": {
    "App": [
      "FakeApp1",
@ -4190,62 +4196,68 @@ exports[`getCurrentBrandAliasTokens test themeName: null, appPrimary: #d83b01 1`
 exports[`getThemingModule test 1`] = `
 [
  {
-    "fluentTypography": {},
+    "getConstants": [Function],
    "getPalette": [Function],
-    "rampNames": {
-      "App": [
-        "FakeApp1",
-        "App2",
-        "App3",
-        "App4",
-        "App5",
-        "App6",
-        "App7",
-        "App8",
-      ],
-      "ClassicGrays": [
-        "FakeGray4",
-        "Gray5",
-        "Gray6",
-      ],
-      "FluentGrays": [
-        "FakeGray1",
-        "Gray2",
-        "Gray3",
-      ],
-      "Sepias": [
-        "FakeSepia",
-      ],
-    },
-    "ramps": {
-      "App": [
-        "#F8F8F8",
-        "#EFF6FC",
-        "#BBDAF3",
-        "#55A4E2",
-        "#359EDD",
-        "#0078d7",
-        "#283E4A",
-        "#030C13",
-      ],
-      "ClassicGrays": [
-        "#FFFFFF",
-        "#737373",
-        "#000000",
-      ],
-      "FluentGrays": [
-        "#FAF9F8",
-        "#797775",
-        "#11100F",
-      ],
-      "Sepias": [
-        "#ECE6DE",
-      ],
-    },
-    "typography": {},
  },
  undefined,
 ]
 `;

+exports[`getThemingModule test 2`] = `
+{
+  "fluentTypography": {},
+  "rampNames": {
+    "App": [
+      "FakeApp1",
+      "App2",
+      "App3",
+      "App4",
+      "App5",
+      "App6",
+      "App7",
+      "App8",
+    ],
+    "ClassicGrays": [
+      "FakeGray4",
+      "Gray5",
+      "Gray6",
+    ],
+    "FluentGrays": [
+      "FakeGray1",
+      "Gray2",
+      "Gray3",
+    ],
+    "Sepias": [
+      "FakeSepia",
+    ],
+  },
+  "ramps": {
+    "App": [
+      "#F8F8F8",
+      "#EFF6FC",
+      "#BBDAF3",
+      "#55A4E2",
+      "#359EDD",
+      "#0078d7",
+      "#283E4A",
+      "#030C13",
+    ],
+    "ClassicGrays": [
+      "#FFFFFF",
+      "#737373",
+      "#000000",
+    ],
+    "FluentGrays": [
+      "#FAF9F8",
+      "#797775",
+      "#11100F",
+    ],
+    "Sepias": [
+      "#ECE6DE",
+    ],
+  },
+  "typography": {},
+}
+`;
+
 exports[`win32Typography test 1`] = `[Function]`;
--- a/packages/theming/win32-theme/src/tests/win32-theme.test.ts
+++ b/packages/theming/win32-theme/src/tests/win32-theme.test.ts
@ -16,11 +16,13 @@ it('win32Typography test', () => {

 it('fallbackOfficeModule test', () => {
  expect(fallbackOfficeModule).toMatchSnapshot();
+  expect(fallbackOfficeModule.getConstants()).toMatchSnapshot();
 });

 it('getThemingModule test', () => {
  const themingModule = getThemingModule();
  expect(themingModule).toMatchSnapshot();
+  expect(themingModule[0].getConstants()).toMatchSnapshot();
 });

 it('createPartialOfficeTheme test', () => {
--- a/packages/theming/win32-theme/src/createPartialOfficeTheme.ts
+++ b/packages/theming/win32-theme/src/createPartialOfficeTheme.ts
@ -6,11 +6,11 @@ import { paletteFromOfficeColors } from './paletteFromOfficeColors';
 type Colors = { [key: string]: string };

 const getRamps = (module: OfficeThemingModule): Colors => {
-  return Object.keys(module.ramps).reduce<Colors>((total: Colors, colorRamp: string) => {
+  return Object.keys(module.getConstants().ramps).reduce<Colors>((total: Colors, colorRamp: string) => {
    return Object.assign(
      total,
-      ...module.rampNames[colorRamp].map((rampValueName: string, index: number) => {
-        return { [rampValueName]: module.ramps[colorRamp][index] };
+      ...module.getConstants().rampNames[colorRamp].map((rampValueName: string, index: number) => {
+        return { [rampValueName]: module.getConstants().ramps[colorRamp][index] };
      }),
    );
  }, {});
@ -27,7 +27,7 @@ export function createPartialOfficeTheme(module: OfficeThemingModule, themeName?
    colors: {
      ...(palette && paletteFromOfficeColors(palette)),
    },
-    typography: module.fluentTypography,
+    typography: module.getConstants().fluentTypography,
    host: {
      // Office Semantic Colors
      palette: palette || {},