react-native-windows 0.72.13 → 0.73.0-preview.1

package/Libraries/WebPerformance/PerformanceEventTiming.js

@@ -8,10 +8,18 @@
  * @flow strict
  */
 
-import type {HighResTimeStamp} from './PerformanceEntry';
+import type {HighResTimeStamp, PerformanceEntryJSON} from './PerformanceEntry';
 
 import {PerformanceEntry} from './PerformanceEntry';
 
+export type PerformanceEventTimingJSON = {
+  ...PerformanceEntryJSON,
+  processingStart: HighResTimeStamp,
+  processingEnd: HighResTimeStamp,
+  interactionId: number,
+  ...
+};
+
 export class PerformanceEventTiming extends PerformanceEntry {
   processingStart: HighResTimeStamp;
   processingEnd: HighResTimeStamp;
@@ -35,4 +43,13 @@ export class PerformanceEventTiming extends PerformanceEntry {
     this.processingEnd = init.processingEnd ?? 0;
     this.interactionId = init.interactionId ?? 0;
   }
+
+  toJSON(): PerformanceEventTimingJSON {
+    return {
+      ...super.toJSON(),
+      processingStart: this.processingStart,
+      processingEnd: this.processingEnd,
+      interactionId: this.interactionId,
+    };
+  }
 }

package/Libraries/WebPerformance/ReactNativeStartupTiming.js

@@ -11,23 +11,35 @@
 
 // flowlint unsafe-getters-setters:off
 
-import type {ReactNativeStartupTiming as ReactNativeStartupTimingType} from './NativePerformance';
+type ReactNativeStartupTimingLike = {
+  startTime: ?number,
+  endTime: ?number,
+  initializeRuntimeStart: ?number,
+  initializeRuntimeEnd: ?number,
+  executeJavaScriptBundleEntryPointStart: ?number,
+  executeJavaScriptBundleEntryPointEnd: ?number,
+};
 
 // Read-only object with RN startup timing information.
 // This is returned by the performance.reactNativeStartup API.
 export default class ReactNativeStartupTiming {
-  // All time information here are in ms. To match web spec,
-  // the default value for timings are zero if not present.
-  // See https://www.w3.org/TR/performance-timeline/#performancetiming-interface
-  _startTime = 0;
-  _endTime = 0;
-  _executeJavaScriptBundleEntryPointStart = 0;
-  _executeJavaScriptBundleEntryPointEnd = 0;
+  // All time information here are in ms. The values may be null if not provided.
+  // We do NOT match web spect here for two reasons:
+  // 1. The `ReactNativeStartupTiming` is non-standard API
+  // 2. The timing information is relative to the time origin, which means `0` has valid meaning
+  _startTime: ?number;
+  _endTime: ?number;
+  _initializeRuntimeStart: ?number;
+  _initializeRuntimeEnd: ?number;
+  _executeJavaScriptBundleEntryPointStart: ?number;
+  _executeJavaScriptBundleEntryPointEnd: ?number;
 
-  constructor(startUpTiming: ?ReactNativeStartupTimingType) {
+  constructor(startUpTiming: ?ReactNativeStartupTimingLike) {
     if (startUpTiming != null) {
       this._startTime = startUpTiming.startTime;
       this._endTime = startUpTiming.endTime;
+      this._initializeRuntimeStart = startUpTiming.initializeRuntimeStart;
+      this._initializeRuntimeEnd = startUpTiming.initializeRuntimeEnd;
       this._executeJavaScriptBundleEntryPointStart =
         startUpTiming.executeJavaScriptBundleEntryPointStart;
       this._executeJavaScriptBundleEntryPointEnd =
@@ -36,30 +48,44 @@ export default class ReactNativeStartupTiming {
   }
 
   /**
-   *  Start time of the RN app startup process. This is provided by the platform by implementing the `ReactMarker.setAppStartTime` API in the native platform code.
+   * Start time of the RN app startup process. This is provided by the platform by implementing the `ReactMarker.setAppStartTime` API in the native platform code.
    */
-  get startTime(): number {
+  get startTime(): ?number {
     return this._startTime;
   }
 
   /**
    * End time of the RN app startup process. This is equal to `executeJavaScriptBundleEntryPointEnd`.
    */
-  get endTime(): number {
+  get endTime(): ?number {
     return this._endTime;
   }
 
+  /**
+   * Start time when RN runtime get initialized. This is when RN infra first kicks in app startup process.
+   */
+  get initializeRuntimeStart(): ?number {
+    return this._initializeRuntimeStart;
+  }
+
+  /**
+   * End time when RN runtime get initialized. This is the last marker before ends of the app startup process.
+   */
+  get initializeRuntimeEnd(): ?number {
+    return this._initializeRuntimeEnd;
+  }
+
   /**
    * Start time of JS bundle being executed. This indicates the RN JS bundle is loaded and start to be evaluated.
    */
-  get executeJavaScriptBundleEntryPointStart(): number {
+  get executeJavaScriptBundleEntryPointStart(): ?number {
     return this._executeJavaScriptBundleEntryPointStart;
   }
 
   /**
    * End time of JS bundle being executed. This indicates all the synchronous entry point jobs are finished.
    */
-  get executeJavaScriptBundleEntryPointEnd(): number {
+  get executeJavaScriptBundleEntryPointEnd(): ?number {
     return this._executeJavaScriptBundleEntryPointEnd;
   }
 }

package/Libraries/WebPerformance/__mocks__/NativePerformance.js

@@ -20,12 +20,12 @@ import {RawPerformanceEntryTypeValues} from '../RawPerformanceEntry';
 const marks: Map<string, number> = new Map();
 
 const NativePerformanceMock: NativePerformance = {
-  mark: (name: string, startTime: number, duration: number): void => {
+  mark: (name: string, startTime: number): void => {
     NativePerformanceObserver?.logRawEntry({
       name,
       entryType: RawPerformanceEntryTypeValues.MARK,
       startTime,
-      duration,
+      duration: 0,
     });
     marks.set(name, startTime);
   },
@@ -58,6 +58,8 @@ const NativePerformanceMock: NativePerformance = {
       endTime: 0,
       executeJavaScriptBundleEntryPointStart: 0,
       executeJavaScriptBundleEntryPointEnd: 0,
+      initializeRuntimeStart: 0,
+      initializeRuntimeEnd: 0,
     };
   },
 };

package/Libraries/WebPerformance/__mocks__/NativePerformanceObserver.js

@@ -18,6 +18,7 @@ import type {
 import {RawPerformanceEntryTypeValues} from '../RawPerformanceEntry';
 
 const reportingType: Set<RawPerformanceEntryType> = new Set();
+const isAlwaysLogged: Set<RawPerformanceEntryType> = new Set();
 const eventCounts: Map<string, number> = new Map();
 const durationThresholds: Map<RawPerformanceEntryType, number> = new Map();
 let entries: Array<RawPerformanceEntry> = [];
@@ -33,6 +34,19 @@ const NativePerformanceObserverMock: NativePerformanceObserver = {
     durationThresholds.delete(entryType);
   },
 
+  setIsBuffered: (
+    entryTypes: $ReadOnlyArray<RawPerformanceEntryType>,
+    isBuffered: boolean,
+  ) => {
+    for (const entryType of entryTypes) {
+      if (isBuffered) {
+        isAlwaysLogged.add(entryType);
+      } else {
+        isAlwaysLogged.delete(entryType);
+      }
+    }
+  },
+
   popPendingEntries: (): GetPendingEntriesResult => {
     const res = entries;
     entries = [];
@@ -47,7 +61,10 @@ const NativePerformanceObserverMock: NativePerformanceObserver = {
   },
 
   logRawEntry: (entry: RawPerformanceEntry) => {
-    if (reportingType.has(entry.entryType)) {
+    if (
+      reportingType.has(entry.entryType) ||
+      isAlwaysLogged.has(entry.entryType)
+    ) {
       const durationThreshold = durationThresholds.get(entry.entryType);
       if (
         durationThreshold !== undefined &&
@@ -81,8 +98,9 @@ const NativePerformanceObserverMock: NativePerformanceObserver = {
   clearEntries: (entryType: RawPerformanceEntryType, entryName?: string) => {
     entries = entries.filter(
       e =>
-        e.entryType === entryType &&
-        (entryName == null || e.name === entryName),
+        (entryType !== RawPerformanceEntryTypeValues.UNDEFINED &&
+          e.entryType !== entryType) ||
+        (entryName != null && e.name !== entryName),
     );
   },
 

package/Libraries/__tests__/ViewWindows-test.js

@@ -4,12 +4,12 @@
 const React = require('react');
 const ReactTestRenderer = require('react-test-renderer');
 
-const {ViewWindows} = require('../Components/View/ViewWindows');
+const View = require('../Components/View/View');
 
-describe('ViewWindows', () => {
+describe('View', () => {
   it('renders basic view', () => {
     const component = ReactTestRenderer.create(
-      <ViewWindows/>
+      <View/>
     );
     expect(component).toMatchSnapshot();
   });

package/Libraries/platform-types.d.ts

@@ -10,6 +10,10 @@ export {Glyph, GlyphProps, GlyphStyle} from './Components/Glyph/Glyph';
 export {IPopupProps, Popup} from './Components/Popup/Popup';
 export * from './Components/Keyboard/KeyboardExt';
 export * from './Components/Keyboard/KeyboardExtProps';
-export * from './Components/View/ViewWindowsProps';
-export * from './Components/View/ViewWindows';
+import type {ViewProps} from './Components/View/ViewPropTypes';
+export type IViewWindowsProps = ViewProps;
+import {View} from './Components/View/View';
+export const ViewWindows = View;
+import type {View} from './Components/View/View';
+export type ViewWindows = View;
 export * from './AppTheme/AppThemeTypes';

package/Libraries/promiseRejectionTrackingOptions.js

@@ -10,9 +10,7 @@
 
 import typeof {enable} from 'promise/setimmediate/rejection-tracking';
 
-type ExtractOptionsType = <P>(((options?: ?P) => void)) => P;
-
-let rejectionTrackingOptions: $Call<ExtractOptionsType, enable> = {
+let rejectionTrackingOptions: $NonMaybeType<Parameters<enable>[0]> = {
   allRejections: true,
   onUnhandled: (id, rejection = {}) => {
     let message: string;

package/Libraries/vendor/emitter/EventEmitter.js

@@ -15,13 +15,13 @@ export interface EventSubscription {
 export interface IEventEmitter<TEventToArgsMap: {...}> {
   addListener<TEvent: $Keys<TEventToArgsMap>>(
     eventType: TEvent,
-    listener: (...args: $ElementType<TEventToArgsMap, TEvent>) => mixed,
+    listener: (...args: TEventToArgsMap[TEvent]) => mixed,
     context?: mixed,
   ): EventSubscription;
 
   emit<TEvent: $Keys<TEventToArgsMap>>(
     eventType: TEvent,
-    ...args: $ElementType<TEventToArgsMap, TEvent>
+    ...args: TEventToArgsMap[TEvent]
   ): void;
 
   removeAllListeners<TEvent: $Keys<TEventToArgsMap>>(eventType?: ?TEvent): void;
@@ -63,7 +63,7 @@ type Registry<TEventToArgsMap: {...}> = $ObjMap<
 export default class EventEmitter<TEventToArgsMap: {...}>
   implements IEventEmitter<TEventToArgsMap>
 {
-  _registry: Registry<TEventToArgsMap> = {};
+  #registry: Registry<TEventToArgsMap> = {};
 
   /**
    * Registers a listener that is called when the supplied event is emitted.
@@ -71,7 +71,7 @@ export default class EventEmitter<TEventToArgsMap: {...}>
    */
   addListener<TEvent: $Keys<TEventToArgsMap>>(
     eventType: TEvent,
-    listener: (...args: $ElementType<TEventToArgsMap, TEvent>) => mixed,
+    listener: (...args: TEventToArgsMap[TEvent]) => mixed,
     context: mixed,
   ): EventSubscription {
     if (typeof listener !== 'function') {
@@ -79,11 +79,12 @@ export default class EventEmitter<TEventToArgsMap: {...}>
         'EventEmitter.addListener(...): 2nd argument must be a function.',
       );
     }
-    const registrations = allocate<_, _, TEventToArgsMap[TEvent]>(
-      this._registry,
-      eventType,
-    );
-    const registration: Registration<$ElementType<TEventToArgsMap, TEvent>> = {
+    const registrations = allocate<
+      TEventToArgsMap,
+      TEvent,
+      TEventToArgsMap[TEvent],
+    >(this.#registry, eventType);
+    const registration: Registration<TEventToArgsMap[TEvent]> = {
       context,
       listener,
       remove(): void {
@@ -103,13 +104,14 @@ export default class EventEmitter<TEventToArgsMap: {...}>
    */
   emit<TEvent: $Keys<TEventToArgsMap>>(
     eventType: TEvent,
-    ...args: $ElementType<TEventToArgsMap, TEvent>
+    ...args: TEventToArgsMap[TEvent]
   ): void {
-    const registrations: ?Set<
-      Registration<$ElementType<TEventToArgsMap, TEvent>>,
-    > = this._registry[eventType];
+    const registrations: ?Set<Registration<TEventToArgsMap[TEvent]>> =
+      this.#registry[eventType];
     if (registrations != null) {
-      for (const registration of [...registrations]) {
+      // Copy `registrations` to take a snapshot when we invoke `emit`, in case
+      // registrations are added or removed when listeners are invoked.
+      for (const registration of Array.from(registrations)) {
         registration.listener.apply(registration.context, args);
       }
     }
@@ -122,9 +124,9 @@ export default class EventEmitter<TEventToArgsMap: {...}>
     eventType?: ?TEvent,
   ): void {
     if (eventType == null) {
-      this._registry = {};
+      this.#registry = {};
     } else {
-      delete this._registry[eventType];
+      delete this.#registry[eventType];
     }
   }
 
@@ -132,7 +134,7 @@ export default class EventEmitter<TEventToArgsMap: {...}>
    * Returns the number of registered listeners for the supplied event.
    */
   listenerCount<TEvent: $Keys<TEventToArgsMap>>(eventType: TEvent): number {
-    const registrations: ?Set<Registration<mixed>> = this._registry[eventType];
+    const registrations: ?Set<Registration<mixed>> = this.#registry[eventType];
     return registrations == null ? 0 : registrations.size;
   }
 }
@@ -140,7 +142,7 @@ export default class EventEmitter<TEventToArgsMap: {...}>
 function allocate<
   TEventToArgsMap: {...},
   TEvent: $Keys<TEventToArgsMap>,
-  TEventArgs: $ElementType<TEventToArgsMap, TEvent>,
+  TEventArgs: TEventToArgsMap[TEvent],
 >(
   registry: Registry<TEventToArgsMap>,
   eventType: TEvent,

package/Microsoft.ReactNative/Composition.Input.idl

@@ -0,0 +1,103 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "NamespaceRedirect.h"
+#include "DocString.h"
+
+namespace Microsoft.ReactNative.Composition.Input
+{
+  interface KeyboardSource
+  {
+    Windows.UI.Core.CoreVirtualKeyStates GetKeyState(Windows.System.VirtualKey key);
+  }
+
+  interface RoutedEventArgs
+  {
+    Int32 OriginalSource { get; };
+  }
+
+  interface KeyRoutedEventArgs requires RoutedEventArgs
+  {
+    String DeviceId { get; };
+    Boolean Handled { get; set; };
+    Windows.System.VirtualKey Key { get; };
+    Windows.UI.Core.CorePhysicalKeyStatus KeyStatus { get; };
+    Windows.System.VirtualKey OriginalKey { get; };
+  }
+
+  interface IPointerPointTransform
+  {
+    IPointerPointTransform Inverse { get; };
+    Boolean TryTransform(Windows.Foundation.Point inPoint, out Windows.Foundation.Point outPoint);
+    Boolean TryTransformBounds(Windows.Foundation.Rect inRect, out Windows.Foundation.Rect outRect);
+  };
+
+  enum PointerDeviceType
+  {
+    Touch = 0,
+    Pen,
+    Mouse,
+    Touchpad,
+  };
+
+  enum PointerUpdateKind
+  {
+      Other = 0,
+      LeftButtonPressed,
+      LeftButtonReleased,
+      RightButtonPressed,
+      RightButtonReleased,
+      MiddleButtonPressed,
+      MiddleButtonReleased,
+      XButton1Pressed,
+      XButton1Released,
+      XButton2Pressed,
+      XButton2Released,
+  };
+
+  runtimeclass PointerPointProperties
+  {
+    Windows.Foundation.Rect ContactRect { get; };
+    Boolean IsBarrelButtonPressed { get; };
+    Boolean IsCanceled { get; };
+    Boolean IsEraser { get; };
+    Boolean IsHorizontalMouseWheel { get; };
+    Boolean IsInRange { get; };
+    Boolean IsInverted { get; };
+    Boolean IsLeftButtonPressed { get; };
+    Boolean IsMiddleButtonPressed { get; };
+    Boolean IsPrimary { get; };
+    Boolean IsRightButtonPressed { get; };
+    Boolean IsXButton1Pressed { get; };
+    Boolean IsXButton2Pressed { get; };
+    Int32 MouseWheelDelta { get; };
+    Single Orientation { get; };
+    PointerUpdateKind PointerUpdateKind{ get; };
+    Single Pressure { get; };
+    Boolean TouchConfidence { get; };
+    Single Twist { get; };
+    Single XTilt { get; };
+    Single YTilt { get; };
+  };
+
+  runtimeclass PointerPoint
+  {
+    UInt32 FrameId { get; };
+    Boolean IsInContact{ get; };
+    PointerDeviceType PointerDeviceType { get; };
+    UInt32 PointerId{ get; };
+    Windows.Foundation.Point Position { get; };
+    PointerPointProperties Properties{ get; };
+    UInt64 Timestamp { get; };
+    PointerPoint GetTransformedPoint(
+        IPointerPointTransform transform);
+  };
+
+  runtimeclass PointerRoutedEventArgs : RoutedEventArgs
+  {
+    PointerPoint GetCurrentPoint(Int32 tag);
+    Boolean Handled;
+    Windows.System.VirtualKeyModifiers KeyModifiers { get; };
+  };
+
+} // namespace Microsoft.ReactNative.Composition.Input

package/Microsoft.ReactNative/CompositionContext.idl

@@ -11,21 +11,44 @@ namespace Microsoft.ReactNative.Composition
   [default_interface]
   [experimental]
   DOC_STRING("A helper static class for to create a @ICompositionContext based on Windows.Composition Visuals.  And to access the underlying Windows.Composition objects from the abstraction.")
-  static runtimeclass CompositionContextHelper
+  static runtimeclass WindowsCompositionContextHelper
   {
     DOC_STRING(
       "Creates a @ICompositionContext from a Compositor")
-    static ICompositionContext CreateContext(COMP_NAMESPACE.Compositor compositor);
+    static ICompositionContext CreateContext(Windows.UI.Composition.Compositor compositor);
 
     DOC_STRING(
       "Creates a @IVisual from a Visual")
-    static IVisual CreateVisual(COMP_NAMESPACE.Visual visual);
+    static IVisual CreateVisual(Windows.UI.Composition.Visual visual);
 
-    static COMP_NAMESPACE.Compositor InnerCompositor(ICompositionContext context);
-    static COMP_NAMESPACE.Visual InnerVisual(IVisual visual);
-    static COMP_NAMESPACE.DropShadow InnerDropShadow(IDropShadow shadow);
-    static COMP_NAMESPACE.CompositionBrush InnerBrush(IBrush brush);
-    static COMP_NAMESPACE.ICompositionSurface InnerSurface(ICompositionDrawingSurface surface);
+    static Windows.UI.Composition.Compositor InnerCompositor(ICompositionContext context);
+    static Windows.UI.Composition.Visual InnerVisual(IVisual visual);
+    static Windows.UI.Composition.DropShadow InnerDropShadow(IDropShadow shadow);
+    static Windows.UI.Composition.CompositionBrush InnerBrush(IBrush brush);
+    static Windows.UI.Composition.ICompositionSurface InnerSurface(IDrawingSurfaceBrush surface);
   }
 
+#ifdef USE_WINUI3
+  [webhosthidden]
+  [default_interface]
+  [experimental]
+  DOC_STRING("A helper static class for to create a @ICompositionContext based on Microsoft.Composition Visuals.  And to access the underlying Microsoft.Composition objects from the abstraction.")
+  static runtimeclass MicrosoftCompositionContextHelper
+  {
+    DOC_STRING(
+      "Creates a @ICompositionContext from a Compositor")
+    static ICompositionContext CreateContext(Microsoft.UI.Composition.Compositor compositor);
+
+    DOC_STRING(
+      "Creates a @IVisual from a Visual")
+    static IVisual CreateVisual(Microsoft.UI.Composition.Visual visual);
+
+    static Microsoft.UI.Composition.Compositor InnerCompositor(ICompositionContext context);
+    static Microsoft.UI.Composition.Visual InnerVisual(IVisual visual);
+    static Microsoft.UI.Composition.DropShadow InnerDropShadow(IDropShadow shadow);
+    static Microsoft.UI.Composition.CompositionBrush InnerBrush(IBrush brush);
+    static Microsoft.UI.Composition.ICompositionSurface InnerSurface(IDrawingSurfaceBrush surface);
+  }
+#endif
+
 } // namespace Microsoft.ReactNative.Composition

package/Microsoft.ReactNative/CompositionRootView.idl

@@ -49,6 +49,10 @@ namespace Microsoft.ReactNative
     DOC_STRING("Creates a new instance of @CompositionRootView.")
     CompositionRootView();
 
+#ifdef USE_WINUI3
+    CompositionRootView(Microsoft.UI.Composition.Compositor compositor);
+#endif
+
     DOC_STRING(
       "A ReactViewHost specifies the root UI component and initial properties to render in this RootView"
       "It must be set to show any React UI elements.")
@@ -60,7 +64,7 @@ namespace Microsoft.ReactNative
     Windows.Foundation.Size Size {get; set; };
 
     DOC_STRING("ScaleFactor for this windows (DPI/96)")
-    Double ScaleFactor {get; set;};
+    Single ScaleFactor {get; set;};
 
     DOC_STRING("Move focus to this @CompositionRootView")
     FocusNavigationResult NavigateFocus(FocusNavigationRequest request);
@@ -72,9 +76,9 @@ namespace Microsoft.ReactNative
 
     Object GetUiaProvider();
 
-    //void OnPointerPressed(PointerPressedArgs args);
-    //void OnMouseUp(Windows.Foundation.Point point);
-    void OnScrollWheel(Windows.Foundation.Point point, Int32 delta);
+#ifdef USE_WINUI3
+    Microsoft.UI.Content.ContentIsland Island { get; };
+#endif
   }
 
 } // namespace Microsoft.ReactNative

package/Microsoft.ReactNative/CompositionSwitcher.idl

@@ -23,14 +23,14 @@ namespace Microsoft.ReactNative.Composition
 
   [webhosthidden]
   [uuid("172def51-9e1a-4e3c-841a-e5a470065acc")] // uuid needed for empty interfaces
-  [version(1)]
+  [version(0)]
   [experimental]
   interface IBrush {
   }
 
   [webhosthidden]
   [experimental]
-  runtimeclass SurfaceBrush : IBrush
+  interface IDrawingSurfaceBrush requires IBrush
   {
     void HorizontalAlignmentRatio(Single value);
     void VerticalAlignmentRatio(Single value);
@@ -67,7 +67,7 @@ namespace Microsoft.ReactNative.Composition
 
   [webhosthidden]
   [experimental]
-  runtimeclass SpriteVisual : IVisual
+  interface ISpriteVisual requires IVisual
   {
     void Brush(IBrush brush);
     void Shadow(IDropShadow shadow);
@@ -75,29 +75,28 @@ namespace Microsoft.ReactNative.Composition
 
   [webhosthidden]
   [experimental]
-  runtimeclass ScrollPositionChangedArgs
+  interface IScrollPositionChangedArgs
   {
     Windows.Foundation.Numerics.Vector2 Position { get; };
   }
 
   [webhosthidden]
   [experimental]
-  runtimeclass ScrollVisual : IVisual
+  interface IScrollVisual requires IVisual
   {
     void Brush(IBrush brush);
-    event Windows.Foundation.EventHandler<ScrollPositionChangedArgs> ScrollPositionChanged;
+    event Windows.Foundation.EventHandler<IScrollPositionChangedArgs> ScrollPositionChanged;
     void ContentSize(Windows.Foundation.Numerics.Vector2 size);
     Windows.Foundation.Numerics.Vector3 ScrollPosition { get; };
-    void ScrollBy(Windows.Foundation.Numerics.Vector3 offset);
+    void ScrollBy(Windows.Foundation.Numerics.Vector3 offset, Boolean animate);
     void TryUpdatePosition(Windows.Foundation.Numerics.Vector3 position, Boolean animate);
   }
 
   [webhosthidden]
-  [uuid("a74bfffc-7f2d-432f-8291-654782ab0d52")] // uuid needed for empty interfaces
-  [version(1)]
   [experimental]
-  interface ICompositionDrawingSurface
+  interface IActivityVisual requires IVisual
   {
+    void Color(Windows.UI.Color color);
   }
 
   [webhosthidden]
@@ -108,6 +107,18 @@ namespace Microsoft.ReactNative.Composition
     void Size(Windows.Foundation.Numerics.Vector2 size);
     void Position(Windows.Foundation.Numerics.Vector2 position);
     Boolean IsVisible { get; set; };
+    void Color(Windows.UI.Color color);
+  }
+
+  [webhosthidden]
+  [experimental]
+  interface ISwitchThumbVisual
+  {
+    IVisual InnerVisual { get; };
+    void Size(Windows.Foundation.Numerics.Vector2 size);
+    void Position(Windows.Foundation.Numerics.Vector2 position);
+    Boolean IsVisible { get; set; };
+    void Color(Windows.UI.Color color);
   }
 
   [webhosthidden]
@@ -123,17 +134,17 @@ namespace Microsoft.ReactNative.Composition
   [experimental]
   interface ICompositionContext
   {
-    ICompositionDrawingSurface CreateDrawingSurface(Windows.Foundation.Size surfaceSize,
-      Windows.Graphics.DirectX.DirectXPixelFormat pixelFormat,
-      Windows.Graphics.DirectX.DirectXAlphaMode alphaMode);
-
-    SpriteVisual CreateSpriteVisual();
-    ScrollVisual CreateScrollerVisual();
+    ISpriteVisual CreateSpriteVisual();
+    IScrollVisual CreateScrollerVisual();
+    IActivityVisual CreateActivityVisual();
     ICaretVisual CreateCaretVisual();
+    ISwitchThumbVisual CreateSwitchThumbVisual();
     IFocusVisual CreateFocusVisual();
     IDropShadow CreateDropShadow();
     IBrush CreateColorBrush(Windows.UI.Color color);
-    SurfaceBrush CreateSurfaceBrush(ICompositionDrawingSurface surface);
+    IDrawingSurfaceBrush CreateDrawingSurfaceBrush(Windows.Foundation.Size surfaceSize,
+      Windows.Graphics.DirectX.DirectXPixelFormat pixelFormat,
+      Windows.Graphics.DirectX.DirectXAlphaMode alphaMode);
 
     // TODO Add and hook up to rootnode - to notify the tree
     // event Windows.Foundation.EventHandler<RenderingDeviceReplacedArgs> RenderingDeviceReplaced;