React Native: Split bf-wc-component into bf-wc-dom

[compulim]

Additional context

• Isolate Web Worker downscaler
• Isolate window.open (may be related to Embedded links in the same domain as the webchat should open in the same tab, instead of a new tab - related to #3087 #2892)
  • If extra user code is needed in React Native apps, make sure those "glue code" are also written for other "embed"

Update 1 (2020-09-25)

Instead of creating a new package bf-wc-dom, I think we should refactor the hooks into bf-wc-core.

• bf-wc-core is cross-platform
  • At some points of time in the future, we want to make Redux less visible by replacing everything with hooks or props
  • Then, we can turn Redux into (another form of) chat adapter
    • If you want to build with your own service, implement our Redux store
    • We should do some experiment here, we already have a pretty good chat adapter
    • Or maybe, we can "clear DLJS responsibilities" using this Redux store
• bf-wc-component is for HTML
• bf-wc-native-component is for React Native
• bf-wc (the entrypoint) will detect/treeshake if it's from HTML or React Native
  • Goals:
    • Clear distinctions between 2 entrypoints
    • Devs won't easily mix up HTML or RN version of components (i.e. won't load HTML side of JS inside RN entrypoints)
  • We might need to work on import 'botframework-webchat/hooks/useStyleSet' and other treeshaking features

To-do

• We should study whether package.json/exports (named exports) will work for exporting hooks in a treeshakable way, https://nodejs.org/api/modules.html#modules_module_exports.
  • Tested in CRA and it is not working yet, https://github.com/compulim/experiment-module-exports

Update 2 (2020-09-25)

I think we should still keep core away from React. So I am thinking this layering:

• core: internally Redux
  • We want to looks platform agnostic and hide the fact that we are using Redux
  • This is a "bridge to chat adapter", hide all the complexity and weirdness about the chat adapter
• api: Our API, depends on core
  • Currently React Hooks API
  • Future, if we want to use new API format, we could, import useActivities from 'botframework-webchat-api/hooks/useActivities
• component: React DOM components, depends on api
  • We can't rename, but the name implies botframework-webchat-react-component
• react-native-component: React Native components, depends on api
• bundle: Webpack entrypoint to component and native-component, tree-shakable and good isolation between DOM and RN

[compulim]

Now, the packaging became: