Pre-81: Switch to newer rendering pathways for stagedRender and improve type safety of framework

CONTRIBUTING.md

@@ -6,7 +6,7 @@ This guide assumes you:
 
 - Have read through the [React Native Docs](https://reactnative.dev/docs/getting-started). In particular:
   - Understand classes vs function components (we use the latter) and [hooks](https://reactjs.org/docs/hooks-intro.html). Here's a good [video](https://www.youtube.com/watch?v=dpw9EHDh2bM) that explains function components and hooks for traditional OOP developers.
-  - Understand [Native Modules](https://reactnative.dev/docs/0.74/native-modules-intro).
+  - Understand [Native Modules](https://reactnative.dev/docs/turbo-native-modules-introduction).
 - Have a local fork of FluentUI React Native and have run the test app.
 
 ## Understanding the Repository Structure
@@ -44,7 +44,7 @@ Tokens help us achieve simpler customization for complex higher order components
 
 This section covers creating and adding a new component package to FluentUI React Native's monorepo. If you are instead working on an existing component and adding a native module, skip to the next two sections.
 
-Most components should use the compose framework as it offers the comprehensive set of patterns like tokens and slots, but if you're creating a simple component that doesn't require those patterns, there's a lighter pattern called [stagedComponent](./packages/framework/use-slot/src/stagedComponent.ts). The stagedComponent pattern splits up the render function into two stages. Stage 1 handles building props and hook calls (best to separate the hook calls from the render tree since they rely on call order). Stage 2 returns the actual element tree, any conditional branching should happen here (Icon is a good example of using stagedCompoenent).
+Most components should use the compose framework as it offers the comprehensive set of patterns like tokens and slots, but if you're creating a simple component that doesn't require those patterns, there's a lighter pattern called [stagedComponent](./packages/framework-base/src/component-patterns/stagedComponent.ts). The stagedComponent pattern splits up the render function into two stages. Stage 1 handles building props and hook calls (best to separate the hook calls from the render tree since they rely on call order). Stage 2 returns the actual element tree, any conditional branching should happen here (Icon is a good example of using stagedCompoenent).
 
 1. Create a new directory in of these two locations, depending on your component:
 
@@ -82,7 +82,7 @@ Reach out to Samuel Freiberg with any questions related to E2E testing.
 
 ## Adding native code to your new component
 
-Through the power of [Native Modules](https://reactnative.dev/docs/0.74/native-modules-intro), we are able to create components that are comprised of native platform code, rather than JS. This is particularly useful if you want platform specific behavior, or if you want a component that feels much more aligned to it's specific platform. The downside is you must implement the Native module for every platform you wish to support. It's worth investigating whether you truly need a native module, or if a more cross platform JS implementation is the better approach.
+Through the power of [Native Modules](https://reactnative.dev/docs/turbo-native-modules-introduction), we are able to create components that are comprised of native platform code, rather than JS. This is particularly useful if you want platform specific behavior, or if you want a component that feels much more aligned to it's specific platform. The downside is you must implement the Native module for every platform you wish to support. It's worth investigating whether you truly need a native module, or if a more cross platform JS implementation is the better approach.
 
 There are a few caveats to know of adding a native module to a FluentUI React Native component:
 

change/@fluentui-react-native-avatar-689eeb48-a17f-4e9e-b79f-0851a62daeb1.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix dead links in markdown files",
+  "packageName": "@fluentui-react-native/avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-native-badge-c8e784a3-a099-423c-9b00-394902c91768.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix dead links in markdown files",
+  "packageName": "@fluentui-react-native/badge",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-native-button-720b78fc-c110-4878-8d65-4b9e3f2598e9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "tighten up typing for framework, fixing the resulting errors",
+  "packageName": "@fluentui-react-native/button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-checkbox-f7259c8f-e095-4e14-bba6-308783257d5a.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix dead links in markdown files",
+  "packageName": "@fluentui-react-native/checkbox",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-native-chip-75152240-0686-467f-91ab-065fe4a758bb.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix dead links in markdown files",
+  "packageName": "@fluentui-react-native/chip",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-native-composition-3f1b63a7-572b-41d3-aa58-4e9e63a67d7b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "tighten up typing for framework, fixing the resulting errors",
+  "packageName": "@fluentui-react-native/composition",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-dropdown-87c83670-53db-4b52-b2d1-85e71f24ba52.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix use-slot to use new rendering patterns",
+  "packageName": "@fluentui-react-native/dropdown",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-checkbox-272753d7-8b40-4478-b320-23b75fda2f54.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "tighten up typing for framework, fixing the resulting errors",
+  "packageName": "@fluentui-react-native/experimental-checkbox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-expander-f3f75eb3-6a92-43b2-99d7-9d8eaae37046.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "tighten up typing for framework, fixing the resulting errors",
+  "packageName": "@fluentui-react-native/experimental-expander",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-menu-button-87ab93a8-c1d4-4b77-95ae-85825caa81f7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "tighten up typing for framework, fixing the resulting errors",
+  "packageName": "@fluentui-react-native/experimental-menu-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-shadow-e6c1af9b-c5aa-44e6-9b66-cd38207c7522.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update phasedComponent pattern and switch direct stagedComponent callers to use it",
+  "packageName": "@fluentui-react-native/experimental-shadow",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-shimmer-2dc223cd-30f0-49d6-89e5-55a93f329af2.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix dead links in markdown files",
+  "packageName": "@fluentui-react-native/experimental-shimmer",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-native-framework-base-9f12c70a-179d-4a28-803a-73bbb2b3df97.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update phasedComponent pattern and switch direct stagedComponent callers to use it",
+  "packageName": "@fluentui-react-native/framework-base",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-icon-2d7e4a6e-0c5a-4f1f-b456-98beb80c1bff.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update phasedComponent pattern and switch direct stagedComponent callers to use it",
+  "packageName": "@fluentui-react-native/icon",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-input-2c14e3bd-0d66-406a-9a03-e69d6f966661.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix dead links in markdown files",
+  "packageName": "@fluentui-react-native/input",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-native-link-9380078e-205f-4cb3-9fb0-ae48cc0b919c.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix dead links in markdown files",
+  "packageName": "@fluentui-react-native/link",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-native-menu-52a2dd2f-433b-4a98-bbd2-02d1ca0c4de3.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update phasedComponent pattern and switch direct stagedComponent callers to use it",
+  "packageName": "@fluentui-react-native/menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-notification-39168bfc-7644-4bb1-b193-784c84c637a8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update phasedComponent pattern and switch direct stagedComponent callers to use it",
+  "packageName": "@fluentui-react-native/notification",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-overflow-913fd2cf-938c-4465-a1ae-3c42126abb1a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update phasedComponent pattern and switch direct stagedComponent callers to use it",
+  "packageName": "@fluentui-react-native/overflow",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-radio-group-498dca51-c0bd-40d9-8dc7-857fc6a801c2.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix dead links in markdown files",
+  "packageName": "@fluentui-react-native/radio-group",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-native-switch-e9541e88-729c-46a0-b35a-8e6caa138780.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "tighten up typing for framework, fixing the resulting errors",
+  "packageName": "@fluentui-react-native/switch",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tablist-eae99f12-b52e-426c-938f-460f65a5ce4f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update phasedComponent pattern and switch direct stagedComponent callers to use it",
+  "packageName": "@fluentui-react-native/tablist",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-text-56972ac3-eb80-4ea3-9803-94b9a069b787.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix dead links in markdown files",
+  "packageName": "@fluentui-react-native/text",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-native-tooltip-d650af05-51c4-488a-878b-6dca19b33999.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update phasedComponent pattern and switch direct stagedComponent callers to use it",
+  "packageName": "@fluentui-react-native/tooltip",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-use-slot-04b210fb-fca7-4403-818f-9560758017cb.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix use-slot to use new rendering patterns",
+  "packageName": "@fluentui-react-native/use-slot",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-use-slots-0995e553-335e-4dd8-b247-323d189a4a9d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "tighten up typing for framework, fixing the resulting errors",
+  "packageName": "@fluentui-react-native/use-slots",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-use-styling-563d6e04-7aa2-45a0-b967-6f289375c2b2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "tighten up typing for framework, fixing the resulting errors",
+  "packageName": "@fluentui-react-native/use-styling",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/components/Avatar/SPEC.md

@@ -20,7 +20,7 @@ Basic examples:
   <Avatar shape="square" avatarColor="purple" name="Richard Feynman" />
 ```
 
-More examples on the [Test pages for the Avatar](../../../apps/fluent-tester/src/TestComponents/Avatar). Instructions on running the tester app can be found [here](../../../apps/fluent-tester/README.md).
+More examples on the [Test pages for the Avatar](../../../apps/tester-core/src/TestComponents/Avatar). Instructions on running the tester app can be found [here](../../../apps/fluent-tester/README.md).
 
 ## Variants
 

packages/components/Badge/SPEC.md

@@ -24,7 +24,7 @@ Basic examples:
   <PresenceBadge outOfOffice={true} status="away" />
 ```
 
-More examples on the [Test pages for the Badge](../../../apps/fluent-tester/src/TestComponents/Badge). Instructions on running the tester app can be found [here](../../../apps/fluent-tester/README.md).
+More examples on the [Test pages for the Badge](../../../apps/tester-core/src/TestComponents/Badge). Instructions on running the tester app can be found [here](../../../apps/fluent-tester/README.md).
 
 ## Visual Examples
 

packages/components/Button/SPEC.md

@@ -28,7 +28,7 @@ Basic examples:
 <Button size="large">Text</Button>
 ```
 
-More examples on the [Test pages for the Button](../../../apps/fluent-tester/src/TestComponents/Button). Instructions on running the tester app can be found [here](../../../apps/fluent-tester/README.md).
+More examples on the [Test pages for the Button](../../../apps/tester-core/src/TestComponents/Button). Instructions on running the tester app can be found [here](../../../apps/fluent-tester/README.md).
 
 ## Visual Examples
 

packages/components/Button/src/CompoundButton/CompoundButton.mobile.tsx

@@ -1,14 +1,21 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
-import { View } from 'react-native';
+import { View, type ViewProps } from 'react-native';
 
 import { compose } from '@fluentui-react-native/framework';
 import { Icon } from '@fluentui-react-native/icon';
 import { TextV1 as Text } from '@fluentui-react-native/text';
 
-import type { CompoundButtonType } from './CompoundButton.types';
+import type { CompoundButtonSlotProps, CompoundButtonType } from './CompoundButton.types';
 import { compoundButtonName } from './CompoundButton.types';
 
-export const CompoundButton = compose<CompoundButtonType>({
+export interface MobileSlotProps extends CompoundButtonSlotProps {
+  root: ViewProps;
+}
+export interface CompoundButtonMobileType extends CompoundButtonType {
+  slotProps: MobileSlotProps;
+}
+
+export const CompoundButton = compose<CompoundButtonMobileType>({
   displayName: compoundButtonName,
   slots: {
     root: View,

packages/components/Button/src/CompoundButton/SPEC.md

@@ -22,7 +22,7 @@ Basic examples:
 <CompoundButton size="small" secondaryContent="A second line">Text</CompoundButton>
 ```
 
-More examples on the [Test pages for the Button](../../../../../apps/fluent-tester/src/TestComponents/Button). Instructions on running the tester app can be found [here](../../../../../apps/fluent-tester/README.md).
+More examples on the [Test pages for the Button](../../../../../apps/tester-core/src/TestComponents/Button). Instructions on running the tester app can be found [here](../../../../../apps/fluent-tester/README.md).
 
 ## Visual Examples
 

packages/components/Button/src/FAB/SPEC.md

@@ -25,7 +25,7 @@ const flipFABcontent = React.useCallback(() => setShowFABText(!showFABText), [sh
 <FAB showContent={showFABText} onClick={flipFABcontent}>Text</FAB>
 ```
 
-More examples on the [Test pages for the Button](../../../../../apps/fluent-tester/src/TestComponents/Button). Instructions on running the tester app can be found [here](../../../../../apps/fluent-tester/README.md).
+More examples on the [Test pages for the Button](../../../../../apps/tester-core/src/TestComponents/Button). Instructions on running the tester app can be found [here](../../../../../apps/fluent-tester/README.md).
 
 ## Visual Examples
 

packages/components/Button/src/ToggleButton/SPEC.md

@@ -24,7 +24,7 @@ Basic examples:
 <ToggleButton size="small">Text</ToggleButton>
 ```
 
-More examples on the [Test pages for the Button](../../../../../apps/fluent-tester/src/TestComponents/Button). Instructions on running the tester app can be found [here](../../../../../apps/fluent-tester/README.md).
+More examples on the [Test pages for the Button](../../../../../apps/tester-core/src/TestComponents/Button). Instructions on running the tester app can be found [here](../../../../../apps/fluent-tester/README.md).
 
 ## Visual Examples
 

packages/components/Button/src/ToggleButton/ToggleButton.android.tsx

@@ -1,14 +1,22 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
-import { View } from 'react-native';
+import { View, type ViewProps } from 'react-native';
 
 import { compose } from '@fluentui-react-native/framework';
 import { Icon } from '@fluentui-react-native/icon';
 import { TextV1 as Text } from '@fluentui-react-native/text';
 
-import type { ToggleButtonType } from './ToggleButton.types';
+import type { ToggleButtonSlotProps, ToggleButtonType } from './ToggleButton.types';
 import { toggleButtonName } from './ToggleButton.types';
 
-export const ToggleButton = compose<ToggleButtonType>({
+interface ToggleButtonSlotPropsAndroid extends ToggleButtonSlotProps {
+  root: ViewProps;
+}
+
+interface ToggleButtonAndroidType extends ToggleButtonType {
+  slotProps: ToggleButtonSlotPropsAndroid;
+}
+
+export const ToggleButton = compose<ToggleButtonAndroidType>({
   displayName: toggleButtonName,
   slots: {
     root: View,

packages/components/Checkbox/SPEC.md

@@ -26,7 +26,7 @@ Basic examples:
 <Checkbox label="Controlled Checkbox" onChange={onChangeFunction} checked={checked} />
 ```
 
-More examples on the [Test pages for the Checkbox](../../../apps/fluent-tester/src/TestComponents/CheckboxV1). Instructions on running the tester app can be found [here](../../../apps/fluent-tester/README.md).
+More examples on the [Test pages for the Checkbox](../../../apps/tester-core/src/TestComponents/CheckboxV1). Instructions on running the tester app can be found [here](../../../apps/fluent-tester/README.md).
 
 ## Visual Examples
 

packages/components/Chip/SPEC.md

@@ -18,7 +18,7 @@ Basic examples:
   <Chip icon={{ svgSource: { src: TestSvg, viewBox: '0 0 500 500' } }} disabled />
 ```
 
-More examples on the [Test pages for the Chip](../../../apps/fluent-tester/src/TestComponents/Chip). Instructions on running the tester app can be found [here](../../../apps/fluent-tester/README.md).
+More examples on the [Test pages for the Chip](../../../apps/tester-core/src/TestComponents/Chip). Instructions on running the tester app can be found [here](../../../apps/fluent-tester/README.md).
 
 ## Visual Examples
 

packages/components/Icon/SPEC.md

@@ -42,7 +42,7 @@ const svgSrcProps: SvgIconProps = {
     <FontIcon {...fontBuiltInProps} />
 ```
 
-More examples on the [Test pages for the Icon](../../../apps/fluent-tester/src/TestComponents/Icon). Instructions on running the tester app can be found [here](../../../apps/fluent-tester/README.md).
+More examples on the [Test pages for the Icon](../../../apps/tester-core/src/TestComponents/Icon). Instructions on running the tester app can be found [here](../../../apps/fluent-tester/README.md).
 
 ## Visual Examples
 

packages/components/Icon/package.json

@@ -34,6 +34,7 @@
   "dependencies": {
     "@fluentui-react-native/adapters": "workspace:*",
     "@fluentui-react-native/framework": "workspace:*",
+    "@fluentui-react-native/framework-base": "workspace:*",
     "@fluentui-react-native/text": "workspace:*"
   },
   "devDependencies": {