Ensure build output has the generated view configs (#3572)

* Ensure build output has the generated view configs

* Change files

* Build fixes

change/@fluentui-react-native-callout-eaf652cf-c188-4712-890e-745e1923c731.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Ensure build output has the generated view configs",
+  "packageName": "@fluentui-react-native/callout",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-avatar-42bc3f20-c84a-4101-9f16-077e209f8871.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Ensure build output has the generated view configs",
+  "packageName": "@fluentui-react-native/experimental-avatar",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-checkbox-e06bc97e-08d5-4889-ba01-40e982a76491.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Ensure build output has the generated view configs",
+  "packageName": "@fluentui-react-native/experimental-checkbox",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-expander-2981d24b-00a6-4930-a127-2649ac6c0584.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Ensure build output has the generated view configs",
+  "packageName": "@fluentui-react-native/experimental-expander",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-shimmer-9b229127-9f6c-443d-a2f8-42a41713be9c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Ensure build output has the generated view configs",
+  "packageName": "@fluentui-react-native/experimental-shimmer",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-focus-trap-zone-42a60348-76b2-4bfc-af76-2dfafdbeac6a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Ensure build output has the generated view configs",
+  "packageName": "@fluentui-react-native/focus-trap-zone",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-focus-zone-45a26335-ac60-4527-b931-d9222a6e7528.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Ensure build output has the generated view configs",
+  "packageName": "@fluentui-react-native/focus-zone",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-menu-button-8dc3f9a8-a30b-4125-8ed4-eab8e40e3a2e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Ensure build output has the generated view configs",
+  "packageName": "@fluentui-react-native/menu-button",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-radio-group-5df88d3b-0b4d-4b9e-a03e-5f03253ca925.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Ensure build output has the generated view configs",
+  "packageName": "@fluentui-react-native/radio-group",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-spinner-89106b5d-7e94-4d21-8a94-8ad01f3c9b09.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Ensure build output has the generated view configs",
+  "packageName": "@fluentui-react-native/spinner",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tooltip-beb684c7-6761-4244-8e6a-0c829faaf671.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Ensure build output has the generated view configs",
+  "packageName": "@fluentui-react-native/tooltip",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-vibrancy-view-e93ce2a1-cc34-4b1d-9401-288c6e1d5259.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Ensure build output has the generated view configs",
+  "packageName": "@fluentui-react-native/vibrancy-view",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/experimental/Checkbox/babel.config.js

@@ -0,0 +1 @@
+module.exports = require('@fluentui-react-native/scripts/babel.config');

packages/experimental/Expander/src/ExpanderNativeComponent.ts

@@ -6,17 +6,17 @@
 
 import type { ColorValue, HostComponent, ViewProps } from 'react-native';
 
-import type { DirectEventHandler, Double } from 'react-native/Libraries/Types/CodegenTypes';
+import type { DirectEventHandler, Double, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
 export interface NativeProps extends ViewProps {
-  expandDirection?: 'up' | 'down';
+  expandDirection?: WithDefault<'up' | 'down', 'down'>;
   expanded?: boolean;
   enabled?: boolean;
   width?: Double;
   height?: Double;
-  contentHorizontalAlignment?: 'center' | 'left' | 'right' | 'stretch';
-  contentVerticalAlignment?: 'bottom' | 'center' | 'stretch' | 'top';
+  contentHorizontalAlignment?: WithDefault<'center' | 'left' | 'right' | 'stretch', 'stretch'>;
+  contentVerticalAlignment?: WithDefault<'bottom' | 'center' | 'stretch' | 'top', 'top'>;
   headerBackground?: ColorValue;
   headerForeground?: ColorValue;
   headerForegroundPointerOver?: ColorValue;

packages/experimental/Spinner/babel.config.js

@@ -0,0 +1 @@
+module.exports = require('@fluentui-react-native/scripts/babel.config');

scripts/src/justPreset.ts

@@ -9,6 +9,7 @@ const { clean } = require('./tasks/clean');
 const { copy } = require('./tasks/copy');
 const { jest } = require('./tasks/jest');
 const { ts } = require('./tasks/ts');
+const { codegenNativeComponents } = require('./tasks/codegenNativeComponents')
 const { eslint } = require('./tasks/eslint');
 const { depcheckTask } = require('./tasks/depcheck');
 const { checkForModifiedFiles } = require('./tasks/checkForModifiedFilesTask');
@@ -32,6 +33,7 @@ export function preset() {
   task('clean', clean);
   task('copy', copy);
   task('jest', jest);
+  task('codegenNativeComponents', codegenNativeComponents);
   task('ts:commonjs', ts.commonjs);
   task('ts:esm', ts.esm);
   task('eslint', eslint);
@@ -71,7 +73,7 @@ export function preset() {
     ),
   );
 
-  task('build', series('clean', 'copy', 'ts'));
+  task('build', series('clean', 'copy', 'ts', 'codegenNativeComponents'));
 
   task('depcheck', depcheckTask);
 

scripts/src/tasks/codegenNativeComponents.js

@@ -0,0 +1,33 @@
+// @ts-check
+import * as glob from 'glob';
+
+const fs = require('fs');
+const path = require('path');
+
+exports.codegenNativeComponents = () => {
+  const babel = require("@babel/core");
+  const matches = glob.sync("src/**/*NativeComponent.ts");
+
+  matches.forEach(matchedPath => {
+    const relativePath = path.relative(path.resolve(process.cwd(), 'src'), matchedPath);
+    const code = fs.readFileSync(matchedPath).toString();
+    const filename = path.resolve(process.cwd(), matchedPath);
+
+    const res = babel.transformSync(code,
+      {
+        ast: false,
+        filename,
+        cwd: process.cwd(),
+        sourceRoot: process.cwd(),
+        root: process.cwd(),
+        babelrc: true
+      });
+
+    const relativeOutputPath = relativePath.replace(/\.ts$/, '.js');
+
+    fs.writeFileSync(path.resolve(process.cwd(), 'lib', relativeOutputPath), res?.code);
+  });
+
+
+
+};