Hook up fabric view component codegen (#7759)

* Hook up view component codegen

* Change files

* Dont use relative imports

* format

* Change files

* Run codegen for all the view components

* fix path

* change to ignore codegen formatting

* x86 build fix

* Add clang-format override file for codegen

* codegen uses LF

* yse yargs required

* tmp

* readd codegen'd files using LF

* Disable sort includes on the codegen files

* updated clang-format file

.gitattributes

@@ -11,6 +11,7 @@
 
 # Spec Codegen uses LF
 *Spec.g.h eol=lf
+/vnext/codegen/** eol=lf
 
 # Force Visual Studio project files (mostly XML) to CRLF
 # This helps avoid conflict which occurs when Xmarian/Mac contributors with AutoCRLF=input (or off)

change/@react-native-windows-codegen-8bf5b93f-6631-4c78-9860-a9e27b71521e.json

@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "Hook up view component codegen",
+ "packageName": "@react-native-windows/codegen",
+ "email": "30809111+acoates-ms@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}

change/@rnw-scripts-format-files-04311b1d-6be6-4a29-a7ad-193f9d1481e8.json

@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "Dont format files in codegen",
+ "packageName": "@rnw-scripts/format-files",
+ "email": "30809111+acoates-ms@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}

change/react-native-windows-5b852b93-ed97-49c0-a263-a649a03c12fa.json

@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "Hook up view component codegen",
+ "packageName": "react-native-windows",
+ "email": "30809111+acoates-ms@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}

packages/@react-native-windows/codegen/src/Cli.ts

@@ -33,6 +33,11 @@ const argv = yargs.options({
  describe: 'C++/C# Namespace to put generated native modules in',
  default: 'MyNamespace',
  },
+ libraryName: {
+ type: 'string',
+ required: true,
+ describe: 'Used for part of the path generated within the codegen dir',
+ },
 }).argv;
 
 import {SchemaType} from 'react-native-tscodegen';
@@ -141,7 +146,14 @@ function generate(
 ): boolean {
  schemaValidator.validate(schema);
 
- const generatedFiles = [];
+ const componentOutputdir = path.join(
+ outputDirectory,
+ 'react/components',
+ libraryName,
+ );
+
+ const generatedModuleFiles = [];
+ const generatedComponentFiles = [];
  /*
  for (const name of generators) {
  for (const generator of GENERATORS[name]) {
@@ -151,16 +163,50 @@ function generate(
 */
 
  const generateNM2 = createNM2Generator({namespace: argv.namespace});
+ const generatorPropsH = require('react-native-tscodegen/lib/rncodegen/src/generators/components/GeneratePropsH')
+ .generate;
+ const generatorPropsCPP = require('react-native-tscodegen/lib/rncodegen/src/generators/components/GeneratePropsCPP')
+ .generate;
+ const generatorShadowNodeH = require('react-native-tscodegen/lib/rncodegen/src/generators/components/GenerateShadowNodeH')
+ .generate;
+ const generatorShadowNodeCPP = require('react-native-tscodegen/lib/rncodegen/src/generators/components/GenerateShadowNodeCPP')
+ .generate;
+ const generatorComponentDescriptorH = require('react-native-tscodegen/lib/rncodegen/src/generators/components/GenerateComponentDescriptorH')
+ .generate;
+ const generatorEventEmitterH = require('react-native-tscodegen/lib/rncodegen/src/generators/components/GenerateEventEmitterH')
+ .generate;
+
+ generatedModuleFiles.push(
+ ...generateNM2(libraryName, schema, moduleSpecName),
+ );
 
- generatedFiles.push(...generateNM2(libraryName, schema, moduleSpecName));
+ generatedComponentFiles.push(
+ ...generatorPropsH(libraryName, schema, moduleSpecName),
+ ...generatorPropsCPP(libraryName, schema, moduleSpecName),
+ ...generatorShadowNodeH(libraryName, schema, moduleSpecName),
+ ...generatorShadowNodeCPP(libraryName, schema, moduleSpecName),
+ ...generatorComponentDescriptorH(libraryName, schema, moduleSpecName),
+ ...generatorEventEmitterH(libraryName, schema, moduleSpecName),
+ );
 
- const filesToUpdate = new Map<string, string>([...generatedFiles]);
+ const moduleFilesToUpdate = new Map<string, string>([
+ ...generatedModuleFiles,
+ ]);
+ const componentFilesToUpdate = new Map<string, string>([
+ ...generatedComponentFiles,
+ ]);
 
  if (test === true) {
- return checkFilesForChanges(filesToUpdate, outputDirectory);
+ return (
+ checkFilesForChanges(moduleFilesToUpdate, outputDirectory) &&
+ checkFilesForChanges(componentFilesToUpdate, componentOutputdir)
+ );
  }
 
- return writeMapToFiles(filesToUpdate, outputDirectory);
+ return (
+ writeMapToFiles(moduleFilesToUpdate, outputDirectory) &&
+ writeMapToFiles(componentFilesToUpdate, componentOutputdir)
+ );
 }
 
 if ((argv.file && argv.files) || (!argv.file && !argv.files)) {
@@ -175,7 +221,7 @@ if (argv.file) {
  schema = combineSchemas(globby.sync(argv.files as string[]));
 }
 
-const libraryName = 'libraryName';
+const libraryName = argv.libraryName;
 const moduleSpecName = 'moduleSpecName';
 const outputDirectory = 'codegen';
 generate(

packages/@react-native-windows/codegen/src/generators/GenerateNM2.ts

@@ -314,32 +314,30 @@ export function createNM2Generator({namespace}: {namespace: string}) {
  const files = new Map<string, string>();
 
  const nativeModules = Object.keys(schema.modules)
- .map(moduleName => {
- const modules = schema.modules[moduleName].nativeModules;
- if (!modules) {
- throw new Error('modules does not exist');
- }
-
- return modules;
- })
+ .map(moduleName => schema.modules[moduleName].nativeModules)
  .filter(Boolean)
  .reduce((acc, components) => Object.assign(acc, components), {});
 
- Object.keys(nativeModules).forEach(name => {
- console.log(`Generating Native${name}Spec.g.h`);
- const {properties} = nativeModules[name];
- const traversedProperties = renderProperties(properties, false);
- const traversedPropertyTuples = renderProperties(properties, true);
-
- files.set(
- `Native${name}Spec.g.h`,
- moduleTemplate
- .replace(/::_MODULE_PROPERTIES_TUPLE_::/g, traversedPropertyTuples)
- .replace(/::_MODULE_PROPERTIES_SPEC_ERRORS_::/g, traversedProperties)
- .replace(/::_MODULE_NAME_::/g, name)
- .replace(/::_NAMESPACE_::/g, namespace),
- );
- });
+ if (nativeModules) {
+ Object.keys(nativeModules).forEach(name => {
+ console.log(`Generating Native${name}Spec.g.h`);
+ const {properties} = nativeModules[name];
+ const traversedProperties = renderProperties(properties, false);
+ const traversedPropertyTuples = renderProperties(properties, true);
+
+ files.set(
+ `Native${name}Spec.g.h`,
+ moduleTemplate
+ .replace(/::_MODULE_PROPERTIES_TUPLE_::/g, traversedPropertyTuples)
+ .replace(
+ /::_MODULE_PROPERTIES_SPEC_ERRORS_::/g,
+ traversedProperties,
+ )
+ .replace(/::_MODULE_NAME_::/g, name)
+ .replace(/::_NAMESPACE_::/g, namespace),
+ );
+ });
+ }
 
  return files;
  };

vnext/Microsoft.ReactNative/Fabric/ActivityIndicatorComponentView.cpp

@@ -0,0 +1,82 @@
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "ActivityIndicatorComponentView.h"
+
+#include <UI.Xaml.Controls.h>
+#include <Utils/ValueUtils.h>
+
+#include <react/components/rnwcore/Props.h>
+
+namespace Microsoft::ReactNative {
+
+ActivityIndicatorComponentView::ActivityIndicatorComponentView() : m_element(xaml::Controls::ProgressRing()) {
+ static auto const defaultProps = std::make_shared<facebook::react::ActivityIndicatorViewProps const>();
+ m_props = defaultProps;
+}
+
+std::vector<facebook::react::ComponentDescriptorProvider>
+ActivityIndicatorComponentView::supplementalComponentDescriptorProviders() noexcept {
+ return {};
+}
+
+void ActivityIndicatorComponentView::mountChildComponentView(
+ const IComponentView &childComponentView,
+ uint32_t index) noexcept {
+ assert(false);
+}
+
+void ActivityIndicatorComponentView::unmountChildComponentView(
+ const IComponentView &childComponentView,
+ uint32_t index) noexcept {
+ assert(false);
+}
+
+void ActivityIndicatorComponentView::updateProps(
+ facebook::react::Props::Shared const &props,
+ facebook::react::Props::Shared const &oldProps) noexcept {
+ const auto &oldActivityProps = *std::static_pointer_cast<const facebook::react::ActivityIndicatorViewProps>(m_props);
+ const auto &newActivityProps = *std::static_pointer_cast<const facebook::react::ActivityIndicatorViewProps>(props);
+
+ if (oldActivityProps.animating != newActivityProps.animating) {
+ m_element.IsActive(newActivityProps.animating);
+ }
+
+ if (oldActivityProps.color != newActivityProps.color) {
+ m_element.Foreground(SolidColorBrushFrom(newActivityProps.color));
+ }
+
+ m_props = std::static_pointer_cast<facebook::react::ActivityIndicatorViewProps const>(props);
+}
+
+void ActivityIndicatorComponentView::updateState(
+ facebook::react::State::Shared const &state,
+ facebook::react::State::Shared const &oldState) noexcept {}
+void ActivityIndicatorComponentView::updateLayoutMetrics(
+ facebook::react::LayoutMetrics const &layoutMetrics,
+ facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
+ // Set Position & Size Properties
+
+ m_layoutMetrics = layoutMetrics;
+
+ winrt::Microsoft::ReactNative::ViewPanel::SetLeft(m_element, layoutMetrics.frame.origin.x);
+ winrt::Microsoft::ReactNative::ViewPanel::SetTop(m_element, layoutMetrics.frame.origin.y);
+
+ m_element.Width(layoutMetrics.frame.size.width);
+ m_element.Height(layoutMetrics.frame.size.height);
+}
+void ActivityIndicatorComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {}
+void ActivityIndicatorComponentView::prepareForRecycle() noexcept {}
+facebook::react::SharedProps ActivityIndicatorComponentView::props() noexcept {
+ assert(false);
+ return {};
+}
+
+const xaml::FrameworkElement ActivityIndicatorComponentView::Element() const noexcept {
+ return m_element;
+}
+
+} // namespace Microsoft::ReactNative

vnext/Microsoft.ReactNative/Fabric/ActivityIndicatorComponentView.h

@@ -0,0 +1,46 @@
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "ComponentView.h"
+
+#include <Microsoft.ReactNative.Cxx/ReactContext.h>
+#include <UI.Xaml.Controls.h>
+#include "ViewComponentView.h"
+
+#pragma warning(push)
+#pragma warning(disable : 4244 4305)
+#include <react/renderer/components/view/ViewProps.h>
+#pragma warning(pop)
+
+namespace Microsoft::ReactNative {
+
+struct ActivityIndicatorComponentView : BaseComponentView {
+ ActivityIndicatorComponentView();
+
+ std::vector<facebook::react::ComponentDescriptorProvider> supplementalComponentDescriptorProviders() noexcept
+ override;
+ void mountChildComponentView(const IComponentView &childComponentView, uint32_t index) noexcept override;
+ void unmountChildComponentView(const IComponentView &childComponentView, uint32_t index) noexcept override;
+ void updateProps(facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) noexcept
+ override;
+ void updateState(facebook::react::State::Shared const &state, facebook::react::State::Shared const &oldState) noexcept
+ override;
+ void updateLayoutMetrics(
+ facebook::react::LayoutMetrics const &layoutMetrics,
+ facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept override;
+ void finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept override;
+ void prepareForRecycle() noexcept override;
+ facebook::react::SharedProps props() noexcept override;
+
+ const xaml::FrameworkElement Element() const noexcept override;
+
+ private:
+ facebook::react::SharedViewProps m_props;
+ facebook::react::LayoutMetrics m_layoutMetrics;
+ xaml::Controls::ProgressRing m_element;
+};
+
+} // namespace Microsoft::ReactNative

vnext/Microsoft.ReactNative/Fabric/ComponentViewRegistry.cpp

@@ -10,6 +10,7 @@
 #include <react/renderer/components/scrollview/ScrollViewShadowNode.h>
 #pragma warning(pop)
 
+#include <react/components/rnwcore/ShadowNodes.h>
 #include <react/renderer/components/image/ImageShadowNode.h>
 #include <react/renderer/components/root/RootShadowNode.h>
 #include <react/renderer/components/text/ParagraphShadowNode.h>
@@ -18,6 +19,7 @@
 #include <react/renderer/components/textinput/iostextinput/TextInputShadowNode.h>
 #include <react/renderer/components/view/ViewShadowNode.h>
 
+#include "ActivityIndicatorComponentView.h"
 #include "ImageComponentView.h"
 #include "ParagraphComponentView.h"
 #include "ScrollViewComponentView.h"
@@ -45,6 +47,8 @@ ComponentViewDescriptor const &ComponentViewRegistry::dequeueComponentViewWithCo
  view = std::make_shared<ScrollViewComponentView>();
  } else if (componentHandle == facebook::react::ImageShadowNode::Handle()) {
  view = std::make_shared<ImageComponentView>(m_context);
+ } else if (componentHandle == facebook::react::ActivityIndicatorViewShadowNode::Handle()) {
+ view = std::make_shared<ActivityIndicatorComponentView>();
  } else {
  // Just to keep track of what kinds of shadownodes we are being used verify we know about them here
  assert(

vnext/Microsoft.ReactNative/Fabric/FabricUIManagerModule.cpp

@@ -14,6 +14,7 @@
 #include <JSI/jsi.h>
 #include <SchedulerSettings.h>
 #include <UI.Xaml.Controls.h>
+#include <react/components/rnwcore/ComponentDescriptors.h>
 #include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
 #include <react/renderer/components/image/ImageComponentDescriptor.h>
 #include <react/renderer/components/text/ParagraphComponentDescriptor.h>
@@ -134,6 +135,8 @@ class AsyncEventBeat final : public facebook::react::EventBeat { //, public face
 std::shared_ptr<facebook::react::ComponentDescriptorProviderRegistry const> sharedProviderRegistry() {
  static auto providerRegistry = []() -> std::shared_ptr<facebook::react::ComponentDescriptorProviderRegistry> {
  auto providerRegistry = std::make_shared<facebook::react::ComponentDescriptorProviderRegistry>();
+ providerRegistry->add(facebook::react::concreteComponentDescriptorProvider<
+ facebook::react::ActivityIndicatorViewComponentDescriptor>());
  providerRegistry->add(
  facebook::react::concreteComponentDescriptorProvider<facebook::react::ImageComponentDescriptor>());
  providerRegistry->add(

vnext/Microsoft.ReactNative/Fabric/platform/react/components/image/conversions.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/components/image/conversions.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/components/view/ConcreteViewShadowNode.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/components/view/ViewEventEmitter.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/components/view/ViewEventEmitter.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/components/view/ViewProps.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/components/view/ViewProps.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/core/ConcreteComponentDescriptor.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/core/ConcreteComponentDescriptor.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/core/propsConversions.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/core/propsConversions.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/graphics/Color.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.h>