chrisglein/artificial-chat

Port app to Fabric

chrisglein opened this issue · 8 comments

chrisglein commented

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

Not Yet Implemented

Screenshot of In-Progress Implementation

artificialChatOnFabric

chrisglein commented

Latest comparison of Paper to Fabric:

Paper Fabric
image image

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

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
image image
image image
image image

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
image image
acoates-ms commented

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

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

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

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
image image
image image
chrisglein commented

On canary 694:

Paper Fabric
image image
image image
image image
image image
  • ❤️1
chrisglein commented

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

  • ❤️2