Port app to Fabric

[chrisglein]

Summary

Started with this as a basis: https://github.com/chiaramooney/sample-fabric
But in 0.73+ this is now replaced with the official app template: https://github.com/microsoft/react-native-windows/wiki/Using-the-new-architecture-templates

Plan

• Stubbed out all dependencies
• Made a quick JS-only implementation of Picker and Popup
• Try to bring in the JS-only dependencies (to get Markdown working again, for example)
• Take a crack at local native code (version info, but not on UWP) - need to learn about Fabric codegen?
• Non-UWP alternatives for other non-UI module dependencies (If needed?)
  • Modify min Fabric app sample to be packaged? Should get access to some of the UWP-style APIs? (e.g. Clipboard via DataTransfer)
  • Clipboard
    • Local workaround
    • Restore use of "@react-native-clipboard/clipboard"
  • AsyncStorage
    • Restore use of "@react-native-async-storage/async-storage"
• UI module dependencies
  • Picker
    • Local workaround
    • Restore use of "@react-native-picker/picker"
• Identify the key gaps in what it's implemented for RNW Fabric thus far
• Copy app .png assets to .ico files
• Release Fabric version of app to store

Issues Found

• Fabric TextInput generates double key presses (0.0.0-canary.637) microsoft/react-native-windows#11452 Typing produces double keypresses
• Fabric Button does not render anything (due to lack of PlatformColor) microsoft/react-native-windows#11456 Button text does not render
• Fabric Button does not render anything (due to lack of PlatformColor) microsoft/react-native-windows#11456 Button background/border does not render
• Fabric's TextInput caret displays in wrong position microsoft/react-native-windows#11486 Caret in wrong position
• Setting a single border (e.g. borderBottomWidth) in Fabric doesn't work microsoft/react-native-windows#11549 Bottom border doesn't render
• Release builds of Fabric should bundle microsoft/react-native-windows#11564 Need to run Metro in the meantime
• Fabric TextInput doesn't apply background color microsoft/react-native-windows#11763 Chat entry has no background plate (will be a difference between Paper and Fabric)
• Fabric Text renders emojis in monochrome microsoft/react-native-windows#11764
• Accessibility headers/groups not showing in Accessibility Insights
• Invoke pattern on button components does not invoke them (may need app side to use onAccessibilityTap)
• Fabric ScrollView does not render a scroll bar microsoft/react-native-windows#12075 ScrollView does not display a scroll bar
• Fabric ScrollView does not respond to keyboard commands (page up, page down, home, end, or arrow keys) microsoft/react-native-windows#12076 ScrollView cannot be controlled with keyboard events (page up, page down, home, end)
• Fabric components should support the app theme (light/dark) microsoft/react-native-windows#11489 Components do not respond to dark mode
• Not yet able to include non-UI component projects (async-storage, clipboard) in a Fabric project microsoft/react-native-windows#12786

Not Yet Implemented

• Implement TextInput.secureTextEntry for Fabric microsoft/react-native-windows#11457
• Implement TextInput.placeholder for Fabric microsoft/react-native-windows#11458
• Implement TextInput.onSubmitEditing for Fabric microsoft/react-native-windows#11459
• Implement TextInput.submitKeyEvents for Fabric microsoft/react-native-windows#11460
• Implement TextInput.multiline for Fabric microsoft/react-native-windows#11461
• Implement TextInput.onChangeText for Fabric microsoft/react-native-windows#11462
• Implement ScrollView scrollToEnd() for Fabric microsoft/react-native-windows#12074

Screenshot of In-Progress Implementation

[chrisglein]

Latest comparison of Paper to Fabric:

Paper	Fabric

Technically the left version was on the #114 branch, so it's not quite apples to apples. And the size difference is due to running on different machines. But it gives you the gist.

[chrisglein]

That previous set of screenshots was across 2 different machines with different resolutions. Here's a more apples to apples comparison (both running side by side on same dev box):

Paper	Fabric

For the dialogs, the Paper version was using the RNW Popup component, which doesn't exist in Fabric. Alongside some other control dependencies like Picker. So there are some placeholders here in the meantime:

Paper	Fabric

[acoates-ms]

Are we missing a border in those tables? (The horizontal lines) Any idea what that is? I thought our border implementation on fabric is actually more complete than the paper one.

[chrisglein]

Are we missing a border in those tables? (The horizontal lines) Any idea what that is? I thought our border implementation on fabric is actually more complete than the paper one.

Yeah, I had noticed that one but haven't had a chance to dig in yet. I'm using a JS-only module for markdown rendering, and the styling for those tables should be here. That table element is using borderBottomWidth. So it appears that in Fabric the borderBottomWidth isn't registering. It's marked as completed in the table, so I assume there's a bug somewhere in the handling. I'll poke around and open a bug to track this (update: here's the bug).

[chrisglein]

Would probably be possible to merge this sooner if there was the ability to have file redirects for fabric components. Example: mycomponent.windows.fabric.js.

[chrisglein]

Grabbing the latest Canary build with some fixes that have happened, the addition of color emojis is great. Accessibility information is starting to come online too, so we can start looking at those gaps.

Paper	Fabric

[chrisglein]

On canary 694:

Paper	Fabric

[chrisglein]

Brought in latest canary (761) and we have a working scrollbar now: