react-native-windows 0.71.10 → 0.72.0-preview.2

package/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/conversions.h

@@ -7,243 +7,21 @@
 
 #pragma once
 
-#include <butter/map.h>
-#include <glog/logging.h>
-#include <react/debug/react_native_assert.h>
-#include <react/renderer/core/PropsParserContext.h>
-#include <react/renderer/core/RawProps.h>
-#include <react/renderer/graphics/Color.h>
-#include <react/renderer/graphics/Geometry.h>
-// [Windows Windows does not parse PlatformColor to RGB
-// #include <react/renderer/graphis/PlatformColorParser.h>
-// WIndows]
-
-namespace facebook {
-namespace react {
-
-#pragma mark - Color
-
-inline void fromRawValue(const PropsParserContext &context, const RawValue &value, SharedColor &result) {
-  ColorComponents colorComponents = {0, 0, 0, 0};
-
-  if (value.hasType<int>()) {
-    auto argb = (int64_t)value;
-    auto ratio = 255.f;
-    colorComponents.alpha = ((argb >> 24) & 0xFF) / ratio;
-    colorComponents.red = ((argb >> 16) & 0xFF) / ratio;
-    colorComponents.green = ((argb >> 8) & 0xFF) / ratio;
-    colorComponents.blue = (argb & 0xFF) / ratio;
-  } else if (value.hasType<std::vector<float>>()) {
-    auto items = (std::vector<float>)value;
-    auto length = items.size();
-    react_native_assert(length == 3 || length == 4);
-    colorComponents.red = items.at(0);
-    colorComponents.green = items.at(1);
-    colorComponents.blue = items.at(2);
-    colorComponents.alpha = length == 4 ? items.at(3) : 1.0f;
-    // [Windows - Embed WindowBrush into SharedColor instead of trying to parse PlatformColor into RGB
-  } else if (value.hasType<butter::map<std::string, std::string>>()) {
-    auto map = (butter::map<std::string, std::string>)value;
-    for (const auto &pair : map) {
-      if (pair.first == "windowsbrush") {
-        result = SharedColor(std::string(pair.second));
-        return;
-      }
-    }
-  }
-  // Windows]
-
-  result = colorFromComponents(colorComponents);
-}
-
-#ifdef ANDROID
-
-inline int toAndroidRepr(const SharedColor &color) {
-  ColorComponents components = colorComponentsFromColor(color);
-  auto ratio = 255.f;
-  return (
-      ((int)round(components.alpha * ratio) & 0xff) << 24 | ((int)round(components.red * ratio) & 0xff) << 16 |
-      ((int)round(components.green * ratio) & 0xff) << 8 | ((int)round(components.blue * ratio) & 0xff));
-}
-
-#endif
-
-inline std::string toString(const SharedColor &value) {
-  ColorComponents components = colorComponentsFromColor(value);
-  auto ratio = 255.f;
-  return "rgba(" + folly::to<std::string>(round(components.red * ratio)) + ", " +
-      folly::to<std::string>(round(components.green * ratio)) + ", " +
-      folly::to<std::string>(round(components.blue * ratio)) + ", " +
-      folly::to<std::string>(round(components.alpha * ratio)) + ")";
-}
-
-#pragma mark - Geometry
-
-inline void fromRawValue(const PropsParserContext &context, const RawValue &value, Point &result) {
-  if (value.hasType<butter::map<std::string, Float>>()) {
-    auto map = (butter::map<std::string, Float>)value;
-    for (const auto &pair : map) {
-      if (pair.first == "x") {
-        result.x = pair.second;
-      } else if (pair.first == "y") {
-        result.y = pair.second;
-      }
-    }
-    return;
-  }
-
-  react_native_assert(value.hasType<std::vector<Float>>());
-  if (value.hasType<std::vector<Float>>()) {
-    auto array = (std::vector<Float>)value;
-    react_native_assert(array.size() == 2);
-    if (array.size() >= 2) {
-      result = {array.at(0), array.at(1)};
-    } else {
-      result = {0, 0};
-      LOG(ERROR) << "Unsupported Point vector size: " << array.size();
-    }
-  } else {
-    LOG(ERROR) << "Unsupported Point type";
-  }
-}
-
-inline void fromRawValue(const PropsParserContext &context, const RawValue &value, Size &result) {
-  if (value.hasType<butter::map<std::string, Float>>()) {
-    auto map = (butter::map<std::string, Float>)value;
-    for (const auto &pair : map) {
-      if (pair.first == "width") {
-        result.width = pair.second;
-      } else if (pair.first == "height") {
-        result.height = pair.second;
-      } else {
-        LOG(ERROR) << "Unsupported Size map key: " << pair.first;
-        react_native_assert(false);
-      }
-    }
-    return;
-  }
-
-  react_native_assert(value.hasType<std::vector<Float>>());
-  if (value.hasType<std::vector<Float>>()) {
-    auto array = (std::vector<Float>)value;
-    react_native_assert(array.size() == 2);
-    if (array.size() >= 2) {
-      result = {array.at(0), array.at(1)};
-    } else {
-      result = {0, 0};
-      LOG(ERROR) << "Unsupported Size vector size: " << array.size();
-    }
-  } else {
-    LOG(ERROR) << "Unsupported Size type";
-  }
-}
-
-inline void fromRawValue(const PropsParserContext &context, const RawValue &value, EdgeInsets &result) {
-  if (value.hasType<Float>()) {
-    auto number = (Float)value;
-    result = {number, number, number, number};
-    return;
-  }
-
-  if (value.hasType<butter::map<std::string, Float>>()) {
-    auto map = (butter::map<std::string, Float>)value;
-    for (const auto &pair : map) {
-      if (pair.first == "top") {
-        result.top = pair.second;
-      } else if (pair.first == "left") {
-        result.left = pair.second;
-      } else if (pair.first == "bottom") {
-        result.bottom = pair.second;
-      } else if (pair.first == "right") {
-        result.right = pair.second;
-      } else {
-        LOG(ERROR) << "Unsupported EdgeInsets map key: " << pair.first;
-        react_native_assert(false);
-      }
-    }
-    return;
-  }
-
-  react_native_assert(value.hasType<std::vector<Float>>());
-  if (value.hasType<std::vector<Float>>()) {
-    auto array = (std::vector<Float>)value;
-    react_native_assert(array.size() == 4);
-    if (array.size() >= 4) {
-      result = {array.at(0), array.at(1), array.at(2), array.at(3)};
-    } else {
-      result = {0, 0, 0, 0};
-      LOG(ERROR) << "Unsupported EdgeInsets vector size: " << array.size();
-    }
-  } else {
-    LOG(ERROR) << "Unsupported EdgeInsets type";
-  }
-}
-
-inline void fromRawValue(const PropsParserContext &context, const RawValue &value, CornerInsets &result) {
-  if (value.hasType<Float>()) {
-    auto number = (Float)value;
-    result = {number, number, number, number};
-    return;
-  }
-
-  if (value.hasType<butter::map<std::string, Float>>()) {
-    auto map = (butter::map<std::string, Float>)value;
-    for (const auto &pair : map) {
-      if (pair.first == "topLeft") {
-        result.topLeft = pair.second;
-      } else if (pair.first == "topRight") {
-        result.topRight = pair.second;
-      } else if (pair.first == "bottomLeft") {
-        result.bottomLeft = pair.second;
-      } else if (pair.first == "bottomRight") {
-        result.bottomRight = pair.second;
-      } else {
-        LOG(ERROR) << "Unsupported CornerInsets map key: " << pair.first;
-        react_native_assert(false);
-      }
-    }
-    return;
-  }
-
-  react_native_assert(value.hasType<std::vector<Float>>());
-  if (value.hasType<std::vector<Float>>()) {
-    auto array = (std::vector<Float>)value;
-    react_native_assert(array.size() == 4);
-    if (array.size() >= 4) {
-      result = {array.at(0), array.at(1), array.at(2), array.at(3)};
-    } else {
-      LOG(ERROR) << "Unsupported CornerInsets vector size: " << array.size();
-    }
-  }
-
-  // Error case - we should only here if all other supported cases fail
-  // In dev we would crash on assert before this point
-  result = {0, 0, 0, 0};
-  LOG(ERROR) << "Unsupported CornerInsets type";
-}
-
-inline std::string toString(const Point &point) {
-  return "{" + folly::to<std::string>(point.x) + ", " + folly::to<std::string>(point.y) + "}";
-}
-
-inline std::string toString(const Size &size) {
-  return "{" + folly::to<std::string>(size.width) + ", " + folly::to<std::string>(size.height) + "}";
-}
-
-inline std::string toString(const Rect &rect) {
-  return "{" + toString(rect.origin) + ", " + toString(rect.size) + "}";
-}
-
-inline std::string toString(const EdgeInsets &edgeInsets) {
-  return "{" + folly::to<std::string>(edgeInsets.left) + ", " + folly::to<std::string>(edgeInsets.top) + ", " +
-      folly::to<std::string>(edgeInsets.right) + ", " + folly::to<std::string>(edgeInsets.bottom) + "}";
-}
-
-inline std::string toString(const CornerInsets &cornerInsets) {
-  return "{" + folly::to<std::string>(cornerInsets.topLeft) + ", " + folly::to<std::string>(cornerInsets.topRight) +
-      ", " + folly::to<std::string>(cornerInsets.bottomLeft) + ", " + folly::to<std::string>(cornerInsets.bottomRight) +
-      "}";
-}
-
-} // namespace react
-} // namespace facebook
+#include <react/renderer/core/graphicsConversions.h>
+
+// This file belongs to the React-graphics module.
+// This file also used to have a reference to two files that are located in the
+// react/renderer/core folder. That folder belongs to a module that is called
+// React-Fabric.
+// The React-Fabric module declares an explicit dependency on
+// React-graphics. Including those files in a React-graphics' file created a
+// circular dependency because React-Fabric was explicitly depending on
+// React-graphics, which was implicitly depending on React-Fabric. We break that
+// dependency by moving the old `graphics/conversions.h` file to the
+// React-Fabric module and renaming it `core/graphicsConversions.h`.
+
+#warning \
+    "[DEPRECATION] `graphics/conversions.h` is deprecated and will be removed in the future. \
+    If this warning appears due to a library, please open an issue in that library, and ask for an update. \
+    Please, replace the `#include <react/renderer/graphics/conversions.h>` statements \
+    with `#include <react/renderer/core/graphicsConversions.h>`."

package/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/TextLayoutManager.cpp

@@ -6,7 +6,10 @@
 #include "pch.h"
 
 #include <Fabric/DWriteHelpers.h>
+#include <Utils/TransformableText.h>
 #include <dwrite.h>
+#include <dwrite_1.h>
+#include <react/renderer/telemetry/TransactionTelemetry.h>
 #include "TextLayoutManager.h"
 
 #include <unicode.h>
@@ -17,7 +20,6 @@ void TextLayoutManager::GetTextLayout(
     AttributedStringBox attributedStringBox,
     ParagraphAttributes paragraphAttributes,
     LayoutConstraints layoutConstraints,
-    const std::optional<TextAlignment> &textAlignment,
     winrt::com_ptr<IDWriteTextLayout> &spTextLayout) noexcept {
   if (attributedStringBox.getValue().isEmpty())
     return;
@@ -45,9 +47,23 @@ void TextLayoutManager::GetTextLayout(
       L"",
       spTextFormat.put()));
 
+  if (!isnan(outerFragment.textAttributes.lineHeight)) {
+    winrt::check_hresult(spTextFormat->SetLineSpacing(
+        DWRITE_LINE_SPACING_METHOD_UNIFORM,
+        outerFragment.textAttributes.lineHeight,
+        // Recommended ratio of baseline to lineSpacing is 80%
+        // https://learn.microsoft.com/en-us/windows/win32/api/dwrite/nf-dwrite-idwritetextformat-getlinespacing
+        // It is possible we need to load full font metrics to calculate a better baseline value.
+        // For a particular font, you can determine what lineSpacing and baseline should be by examing a
+        // DWRITE_FONT_METRICS method available from the GetMetrics method of IDWriteFont or IDWriteFontFace. For normal
+        // behavior, you'd set lineSpacing to the sum of ascent, descent and lineGap (adjusted for the em size, of
+        // course), and baseline to the ascent value.
+        outerFragment.textAttributes.lineHeight * 0.8f));
+  }
+
   DWRITE_TEXT_ALIGNMENT alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
-  if (textAlignment) {
-    switch (*textAlignment) {
+  if (outerFragment.textAttributes.alignment) {
+    switch (*outerFragment.textAttributes.alignment) {
       case facebook::react::TextAlignment::Center:
         alignment = DWRITE_TEXT_ALIGNMENT_CENTER;
         break;
@@ -70,11 +86,11 @@ void TextLayoutManager::GetTextLayout(
   }
   winrt::check_hresult(spTextFormat->SetTextAlignment(alignment));
 
-  auto str = Microsoft::Common::Unicode::Utf8ToUtf16(attributedStringBox.getValue().getString());
+  auto str = GetTransformedText(attributedStringBox);
 
   winrt::check_hresult(Microsoft::ReactNative::DWriteFactory()->CreateTextLayout(
       str.c_str(), // The string to be laid out and formatted.
-      static_cast<UINT32>(str.length()), // The length of the string.
+      static_cast<UINT32>(str.size()), // The length of the string.
       spTextFormat.get(), // The text format to apply to the string (contains font information, etc).
       layoutConstraints.maximumSize.width, // The width of the layout box.
       layoutConstraints.maximumSize.height, // The height of the layout box.
@@ -104,6 +120,11 @@ void TextLayoutManager::GetTextLayout(
     winrt::check_hresult(spTextLayout->SetFontStyle(fragmentStyle, range));
     winrt::check_hresult(spTextLayout->SetFontSize(attributes.fontSize, range));
 
+    if (!isnan(attributes.letterSpacing)) {
+      winrt::check_hresult(
+          spTextLayout.as<IDWriteTextLayout1>()->SetCharacterSpacing(0, attributes.letterSpacing, 0, range));
+    }
+
     position += length;
   }
 }
@@ -111,18 +132,50 @@ void TextLayoutManager::GetTextLayout(
 TextMeasurement TextLayoutManager::measure(
     AttributedStringBox attributedStringBox,
     ParagraphAttributes paragraphAttributes,
-    LayoutConstraints layoutConstraints) const {
-  winrt::com_ptr<IDWriteTextLayout> spTextLayout;
-
-  GetTextLayout(attributedStringBox, paragraphAttributes, layoutConstraints, TextAlignment::Left, spTextLayout);
-
-  TextMeasurement tm{};
-  if (spTextLayout) {
-    DWRITE_TEXT_METRICS dtm{};
-    winrt::check_hresult(spTextLayout->GetMetrics(&dtm));
-    tm.size = {dtm.width, dtm.height};
-  }
-  return tm;
+    LayoutConstraints layoutConstraints,
+    std::shared_ptr<void> /* hostTextStorage */) const {
+  TextMeasurement measurement{};
+  auto &attributedString = attributedStringBox.getValue();
+  measurement = m_measureCache.get(
+      {attributedString, paragraphAttributes, layoutConstraints}, [&](TextMeasureCacheKey const &key) {
+        auto telemetry = TransactionTelemetry::threadLocalTelemetry();
+        if (telemetry) {
+          telemetry->willMeasureText();
+        }
+
+        winrt::com_ptr<IDWriteTextLayout> spTextLayout;
+
+        GetTextLayout(attributedStringBox, paragraphAttributes, layoutConstraints, spTextLayout);
+
+        if (spTextLayout) {
+          auto maxHeight = std::numeric_limits<float>().max();
+          if (paragraphAttributes.maximumNumberOfLines > 0) {
+            std::vector<DWRITE_LINE_METRICS> lineMetrics;
+            uint32_t actualLineCount;
+            spTextLayout->GetLineMetrics(nullptr, 0, &actualLineCount);
+            lineMetrics.resize(static_cast<size_t>(actualLineCount));
+            winrt::check_hresult(spTextLayout->GetLineMetrics(lineMetrics.data(), actualLineCount, &actualLineCount));
+            maxHeight = 0;
+            const auto count =
+                std::min(static_cast<uint32_t>(paragraphAttributes.maximumNumberOfLines), actualLineCount);
+            for (uint32_t i = 0; i < count; ++i) {
+              maxHeight += lineMetrics[i].height;
+            }
+          }
+
+          DWRITE_TEXT_METRICS dtm{};
+          winrt::check_hresult(spTextLayout->GetMetrics(&dtm));
+          measurement.size = {dtm.width, std::min(dtm.height, maxHeight)};
+        }
+
+        if (telemetry) {
+          telemetry->didMeasureText();
+        }
+
+        return measurement;
+      });
+
+  return measurement;
 }
 
 /**
@@ -145,8 +198,45 @@ LinesMeasurements TextLayoutManager::measureLines(
   return {};
 }
 
+std::shared_ptr<void> TextLayoutManager::getHostTextStorage(
+    AttributedString attributedString,
+    ParagraphAttributes paragraphAttributes,
+    LayoutConstraints layoutConstraints) const {
+  return nullptr;
+}
+
 void *TextLayoutManager::getNativeTextLayoutManager() const {
   return (void *)this;
 }
 
+Microsoft::ReactNative::TextTransform ConvertTextTransform(std::optional<TextTransform> const &transform) {
+  if (transform) {
+    switch (transform.value()) {
+      case TextTransform::Capitalize:
+        return Microsoft::ReactNative::TextTransform::Capitalize;
+      case TextTransform::Lowercase:
+        return Microsoft::ReactNative::TextTransform::Lowercase;
+      case TextTransform::Uppercase:
+        return Microsoft::ReactNative::TextTransform::Uppercase;
+      case TextTransform::None:
+        return Microsoft::ReactNative::TextTransform::None;
+      default:
+        break;
+    }
+  }
+
+  return Microsoft::ReactNative::TextTransform::Undefined;
+}
+
+winrt::hstring TextLayoutManager::GetTransformedText(AttributedStringBox const &attributedStringBox) {
+  winrt::hstring result{};
+  for (const auto &fragment : attributedStringBox.getValue().getFragments()) {
+    result = result +
+        Microsoft::ReactNative::TransformableText::TransformText(
+                 winrt::hstring{Microsoft::Common::Unicode::Utf8ToUtf16(fragment.string)},
+                 ConvertTextTransform(fragment.textAttributes.textTransform));
+  }
+  return result;
+}
+
 } // namespace facebook::react

package/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/TextLayoutManager.h

@@ -36,7 +36,8 @@ class TextLayoutManager {
   TextMeasurement measure(
       AttributedStringBox attributedStringBox,
       ParagraphAttributes paragraphAttributes,
-      LayoutConstraints layoutConstraints) const;
+      LayoutConstraints layoutConstraints,
+      std::shared_ptr<void> /* hostTextStorage */) const;
 
   /*
    * Measures lines of `attributedString` using native text rendering
@@ -45,6 +46,11 @@ class TextLayoutManager {
   LinesMeasurements measureLines(AttributedString attributedString, ParagraphAttributes paragraphAttributes, Size size)
       const;
 
+  std::shared_ptr<void> getHostTextStorage(
+      AttributedString attributedString,
+      ParagraphAttributes paragraphAttributes,
+      LayoutConstraints layoutConstraints) const;
+
   /**
    * Measures an AttributedString on the platform, as identified by some
    * opaque cache ID.
@@ -64,13 +70,18 @@ class TextLayoutManager {
       AttributedStringBox attributedStringBox,
       ParagraphAttributes paragraphAttributes,
       LayoutConstraints layoutConstraints,
-      const std::optional<TextAlignment> &textAlignment,
       winrt::com_ptr<IDWriteTextLayout> &spTextLayout) noexcept;
 
 #pragma endregion
 
  private:
+  static winrt::hstring GetTransformedText(AttributedStringBox const &attributedStringBox);
+
   ContextContainer::Shared m_contextContainer;
+#pragma warning(push)
+#pragma warning(disable : 5028)
+  TextMeasureCache m_measureCache{};
+#pragma warning(pop)
 };
 
 } // namespace react

package/Microsoft.ReactNative/IReactCompositionViewComponentBuilder.idl

@@ -0,0 +1,87 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "DocString.h"
+import "CompositionSwitcher.idl";
+import "IJSValueReader.idl";
+import "ViewProps.idl";
+
+namespace Microsoft.ReactNative.Composition
+{
+  [webhosthidden]
+  [experimental]
+  struct LayoutMetrics {
+    Windows.Foundation.Rect Frame;
+    Single PointScaleFactor;
+  };
+
+  [experimental]
+  DOC_STRING("Provides a factory method to create an instance of a ViewComponent. See @IReactCompositionViewComponentBuilder.SetCreateView")
+  delegate Object CompositionComponentFactory(ICompositionContext context);
+
+  // TODO should make an event args, with a handled bit instead of return value
+  [experimental]
+  DOC_STRING("A delegate that handles commands for an instance of a ViewComponent. See @IReactCompositionViewComponentBuilder.SetCommandHandler")
+  delegate Boolean CommandHandler(Object handle, String commandName, Microsoft.ReactNative.IJSValueReader args);
+
+  [experimental]
+  DOC_STRING("A delegate that updates the properties for an instance of a ViewComponent. See @IReactCompositionViewComponentBuilder.SetPropsUpdater")
+  delegate void PropsUpdater(Object handle, Microsoft.ReactNative.IComponentProps props);
+
+  [experimental]
+  DOC_STRING("A delegate that updates the @LayoutMetrics for an instance of a ViewComponent. See @IReactCompositionViewComponentBuilder.SetLayoutMetricsUpdater")
+  delegate void LayoutMetricsUpdater(Object handle, LayoutMetrics metrics);
+
+  [experimental]
+  DOC_STRING("A delegate that finalizes the updates for an instance of a ViewComponent. See @IReactCompositionViewComponentBuilder.SetUpdateFinalizer")
+  delegate void UpdateFinalizer(Object handle);
+
+  [experimental]
+  DOC_STRING("A delegate that creates the @IVisual for an instance of a ViewComponent. See @IReactCompositionViewComponentBuilder.SetVisualCreator")
+  delegate IVisual VisualCreator(Object handle);
+
+  [experimental]
+  DOC_STRING("A delegate that handles input messages for an instance of a ViewComponent. See @IReactCompositionViewComponentBuilder.SetMessageHandler")
+  delegate Int64 MessageHandler(Object handle, UInt32 Msg, UInt64 WParam, Int64 LParam);
+
+  [webhosthidden]
+  [experimental]
+  DOC_STRING(".")
+  interface IReactCompositionViewComponentBuilder
+  {
+    // (ICompositionContext) => Handle
+    void SetCreateView(CompositionComponentFactory impl);
+
+    DOC_STRING("Called when a command is run against this component.  If the command is handled this function should return true.")
+    // (Object handle, String commandName, Microsoft.ReactNative.IJSValueReader args) => bool
+    void SetCommandHandler(CommandHandler commandHandler);
+
+    // TODO -void UpdateEventEmitter(IEventEmitter emitter);
+
+    DOC_STRING("Called whenever the properties change.")
+    // (Object handle, Microsoft.ReactNative.IComponentProps props) => void
+    void SetPropsUpdater(PropsUpdater impl);
+
+    DOC_STRING("Called whenever the layout metrics change.")
+    // (Object handle, LayoutMetrics metrics) => void
+    void SetLayoutMetricsUpdater(LayoutMetricsUpdater impl);
+
+    // TODO - void UpdateState(...);
+
+    DOC_STRING("Called on any update, after props, layout, and state have been updated.")
+    // (Object handle) => void
+    void SetUpdateFinalizer(UpdateFinalizer impl);
+
+    DOC_STRING("This visual will be added to the visual tree, and should be used to display this component.")
+    // (Object handle) => IVisual
+    void SetVisualCreator(VisualCreator impl);
+
+    DOC_STRING("Used to handle native input into this component.")
+    // (Object handle, UInt32 Msg, UInt64 WParam, Int64 LParam) => Int64
+    void SetMessageHandler(MessageHandler impl);
+  };
+
+
+
+
+} // namespace Microsoft.ReactNative

package/Microsoft.ReactNative/IReactContext.cpp

@@ -61,6 +61,10 @@ hstring ReactSettingsSnapshot::JavaScriptBundleFile() const noexcept {
   return winrt::to_hstring(m_settings->JavaScriptBundleFile());
 }
 
+hstring ReactSettingsSnapshot::BundleAppId() const noexcept {
+  return winrt::to_hstring(m_settings->BundleAppId());
+}
+
 Mso::React::IReactSettingsSnapshot const &ReactSettingsSnapshot::GetInner() const noexcept {
   return *m_settings;
 }

package/Microsoft.ReactNative/IReactContext.h

@@ -23,6 +23,7 @@ struct ReactSettingsSnapshot : winrt::implements<ReactSettingsSnapshot, IReactSe
   uint16_t SourceBundlePort() const noexcept;
   bool RequestInlineSourceMap() const noexcept;
   hstring JavaScriptBundleFile() const noexcept;
+  hstring BundleAppId() const noexcept;
 
  public:
   // Internal accessor for within the Microsoft.ReactNative dll to allow calling into internal methods

package/Microsoft.ReactNative/IReactContext.idl

@@ -120,6 +120,11 @@ namespace Microsoft.ReactNative
       "The `.bundle` extension will be appended to the end, when looking for the bundle file.")
     String JavaScriptBundleFile { get; };
 
+    DOC_STRING(
+      "A read-only snapshot of the @ReactInstanceSettings.BundleAppId property value "
+      "at the time when the React instance was created.\n"
+      "The name of the app passed to the packager server via the 'app' query parameter.")
+    String BundleAppId { get; };
   }
 
   [webhosthidden]

package/Microsoft.ReactNative/IReactDispatcher.cpp

@@ -124,6 +124,10 @@ void ReactDispatcher::InvokeElsePost(Mso::DispatchTask &&task) const noexcept {
   return jsThreadDispatcherProperty;
 }
 
+/*static*/ IReactDispatcher ReactDispatcher::GetJSDispatcher(IReactPropertyBag const &properties) noexcept {
+  return properties.Get(JSDispatcherProperty()).try_as<IReactDispatcher>();
+}
+
 /*static*/ IReactPropertyName ReactDispatcher::JSDispatcherTaskStartingEventName() noexcept {
   static IReactPropertyName jsThreadDispatcherProperty{ReactPropertyBagHelper::GetName(
       ReactPropertyBagHelper::GetNamespace(L"ReactNative.Dispatcher"), L"JSDispatcherTaskStartingEventName")};

package/Microsoft.ReactNative/IReactDispatcher.h

@@ -38,6 +38,7 @@ struct ReactDispatcher : implements<ReactDispatcher, IReactDispatcher, Mso::Reac
   static void SetUIThreadDispatcher(IReactPropertyBag const &properties) noexcept;
 
   static IReactPropertyName JSDispatcherProperty() noexcept;
+  static IReactDispatcher GetJSDispatcher(IReactPropertyBag const &properties) noexcept;
   static IReactPropertyName JSDispatcherTaskStartingEventName() noexcept;
   static IReactPropertyName JSDispatcherIdleWaitStartingEventName() noexcept;
   static IReactPropertyName JSDispatcherIdleWaitCompletedEventName() noexcept;

package/Microsoft.ReactNative/IReactPackageBuilderFabric.idl

@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import "IReactViewComponentBuilder.idl";
+
+#include "DocString.h"
+
+namespace Microsoft.ReactNative
+{
+  [experimental]
+  DOC_STRING("Provides information about a custom view component. See @IReactPackageBuilderFabric.AddViewComponent")
+  delegate void ReactViewComponentProvider(IReactViewComponentBuilder viewComponentBuilder);
+
+  [webhosthidden]
+  [experimental]
+  DOC_STRING("Provides ability to register custom ViewComponents when running fabric.  Methods on this interface will eventually be moved onto @IReactPackageProvider once fabric ships.")
+  interface IReactPackageBuilderFabric
+  {
+    DOC_STRING("Registers a custom native view component.")
+    void AddViewComponent(String componentName, ReactViewComponentProvider componentProvider);
+  };
+
+} // namespace Microsoft.ReactNative

package/Microsoft.ReactNative/IReactViewComponentBuilder.idl

@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import "ViewProps.idl";
+
+#include "DocString.h"
+
+namespace Microsoft.ReactNative
+{
+  [experimental]
+  DOC_STRING("A delegate that creates a @IComponentProps object for an instance of @ViewProps. See @IReactViewComponentBuilder.SetCreateProps")
+  delegate IComponentProps ViewPropsFactory(ViewProps props);
+
+  [webhosthidden]
+  [experimental]
+  DOC_STRING(".")
+  interface IReactViewComponentBuilder
+  {
+    DOC_STRING("Create an implementation of your custom Props type that will be passed to your components @Composition.ICompositionViewComponent.UpdateProps method.")
+    void SetCreateProps(ViewPropsFactory impl);
+  };
+
+} // namespace Microsoft.ReactNative