Bucket for platform-independent work

Please vote this feature using emoji. We will tally them during planning.

Background

Today, we run in a browser. Tomorrow, we run on React Native iOS and Android, and probably more.

Description

Today, Web Chat assumes it is running in a browser.

Tomorrow, we want to separate out platform-dependent features into separate packages. Separate packages for fewer dependencies.

That means, we want to enable:

• Server-side rendered React
  • No window object, no fetch on initial render, etc
  • Related to #3189
• React Native
  • No window object
  • No Node.js libraries, e.g.
    • jsonwebtoken depends on stream, which is replaced by node-libs-browser during bundling
• No assumption of Webpack as the bundler
• Put DOM tree into other packages
• Make sure our dependencies are pure or isomorphic in core packages
  • Even they are isomorphic, it doesn't guarantee they will work in all environments. Pure is better.
  • Our dependencies should not use node-libs-browser

This is a bucket list and we will keep growing the list as we found issues in our codebase.

Buckets of work

jsonwebtoken

This is for "no assumption of Webpack", which bring node-libs-browser.

Remove jsonwebtoken package and replace it with a simpler approach, as we do not verify the integrity of the JWT, only parse its content for warning messages.

Action items

Use js-base64 to decode the token

js-base64 allows safe decoding of Base64 strings into Unicode strings, instead of binary string (atob).

import { decode } from 'js-base64';

function getUserIdFromDirectLineToken(jwt) {
  // Add error handling, return `undefined` if not able to parse or doesn't appear to be a JWT token
  return decode(jwt.split('.')[1]).user;
}

No window object

For React Native and server-side render of React.

(TBD)

No fetch or network calls

Limit our usage on fetch or any networking calls. Allow polyfills of fetch.

(TBD)

Put <Composer> and React hooks into core package

Our hooks are great way to recompose Web Chat.

<BasicWebChat> and <BasicXxx> are designed to be HTML presentation of the composable API of Web Chat.

Open questions

• What is the base of Web Chat? React or Redux?
  • Core was designed to be a stateful data layer, i.e. Redux only, so someone can use it on other platforms
• Where should we put the React hooks?
• Should we refactor out HTML/CSS into a new package botframework-webchat-html?

Start by reviewing the current use of jsonwebtoken, the browser assumptions around window and fetch, and the existing package boundaries. Consider the open questions about React, Redux, hooks, and HTML/CSS before choosing a scope. Done means platform-dependent features and dependencies are separated so core packages can support React Native and server-side rendering without Webpack-specific assumptions.