Decouple botframework-directlinejs from business logics

[compulim]

Do not merge this before the bump-4.15.8-0 PR.

Fixes #4643.

Changelog Entry

Added

• Resolved #4643. Decoupling botframework-directlinejs from business logic of Web Chat for better tree-shaking, by @compulim, in PR #4645

Description

Outside of createDirectLine, Web Chat should decouple itself from botframework-directlinejs.

We found that the only coupling is at connectSaga.js, which it imported implementation code from bf-dljs. For other places, it is importing only the types.

After this is done, we saw a 11.5% decrease in bundle size, if only our root UI component is imported.

Design

Web Chat generally decouple itself from bf-dljs. Only typing (non-runtime code) and explicit-import (import { createDirectLine } from 'bf-wc') is coupled to bf-dljs.

Once this is done, when importing our root UI component, we saw a sharp decrease of app bundle size:

import { ReactWebChat } from 'botframework-webchat/lib/ReactWebChat';

However, note should be taken. ReactWebChat is NOT expected to be imported via bf-wc/lib/ReactWebChat. Web Chat should carefully design its named exports for this to fully work. And named exports could means breaking changes for web devs who use NPM version of Web Chat.

Specific Changes

• Update connectSaga.js and bring DLJS ConnectionStatus in connectSaga

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)