Plan

[x] Stubbed out all dependencies
[x] Made a quick JS-only implementation of Picker and Popup
[x] Try to bring in the JS-only dependencies (to get Markdown working again, for example)
[x] 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?)
- [x] Modify min Fabric app sample to be packaged? Should get access to some of the UWP-style APIs? (e.g. Clipboard via DataTransfer)
- [ ] Clipboard
- [x] Local workaround
- [ ] Restore use of "@react-native-clipboard/clipboard"
- [ ] AsyncStorage
- [ ] Restore use of "@react-native-async-storage/async-storage"
[ ] UI module dependencies
- [ ] Picker
- [x] Local workaround
- [ ] Restore use of "@react-native-picker/picker"
[x] Identify the key gaps in what it's implemented for RNW Fabric thus far
[x] Copy app .png assets to .ico files
[x] Release Fabric version of app to store

Issues Found

[x] https://github.com/microsoft/react-native-windows/issues/11452 Typing produces double keypresses
[x] https://github.com/microsoft/react-native-windows/issues/11456 Button text does not render
[x] https://github.com/microsoft/react-native-windows/issues/11456 Button background/border does not render
[x] https://github.com/microsoft/react-native-windows/issues/11486 Caret in wrong position
[x] https://github.com/microsoft/react-native-windows/issues/11549 Bottom border doesn't render
[x] https://github.com/microsoft/react-native-windows/issues/11564 Need to run Metro in the meantime
[x] https://github.com/microsoft/react-native-windows/issues/11763 Chat entry has no background plate (will be a difference between Paper and Fabric)
[x] https://github.com/microsoft/react-native-windows/issues/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)
[x] https://github.com/microsoft/react-native-windows/issues/12075 ScrollView does not display a scroll bar
[x] https://github.com/microsoft/react-native-windows/issues/12076 ScrollView cannot be controlled with keyboard events (page up, page down, home, end)
[ ] https://github.com/microsoft/react-native-windows/issues/11489 Components do not respond to dark mode
[ ] https://github.com/microsoft/react-native-windows/issues/12786

Not Yet Implemented

Screenshot of In-Progress Implementation

artificialChatOnFabric

chrisglein commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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.