[next] Auth Callback + Chunking (#2139)

* feat: added new auth-callback

* fix: removed unused polyfill code

* fix: fixed missed intersection observer

* feat: enabled vendor chunks

* fix: fix some issues with chunk splitting

* fix: added intersection-observer to app polyfill

* fix: fixed test

* fix: removed lodash plugin which caused issue in prod

* chore: access_token -> accessToken

* feat: Show social login errors

* fix: lint + add test

* fix: restore width after facebook social login

src/core/client/framework/helpers/storageKeys.ts

@@ -0,0 +1 @@
+export const authRedirectBackTo = "authRedirectBackTo";

src/core/client/framework/helpers/urls.tsx

@@ -4,6 +4,7 @@ export default (process.env.NODE_ENV !== "development"
       embed: {
         stream: "/embed/stream",
         auth: "/embed/auth",
+        authCallback: "/embed/auth/callback",
       },
     }
   : {
@@ -11,5 +12,6 @@ export default (process.env.NODE_ENV !== "development"
       embed: {
         stream: "/stream.html",
         auth: "/auth.html",
+        authCallback: "/auth-callback.html",
       },
     });

src/core/client/framework/lib/intersection/IntersectionContext.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 
 import { createContextHOC } from "talk-framework/helpers";
-import ensurePolyfill from "./ensurePolyfill";
 
 export type IntersectionCallback = (entry: IntersectionObserverEntry) => void;
 export type Observe = (
@@ -24,18 +23,16 @@ export class IntersectionProvider extends React.Component<any, any> {
   private unmounted = false;
 
   public componentDidMount() {
-    ensurePolyfill().then(() => {
-      if (this.unmounted) {
-        return;
-      }
-      this.observer = new IntersectionObserver(this.onIntersect, {
-        root: this.props.node ? this.props.node : undefined,
-        rootMargin: "0px",
-        threshold: 0.25,
-      });
-      this.elementBuffer.forEach(element => this.observer.observe(element));
-      this.elementBuffer = [];
+    if (this.unmounted) {
+      return;
+    }
+    this.observer = new IntersectionObserver(this.onIntersect, {
+      root: this.props.node ? this.props.node : undefined,
+      rootMargin: "0px",
+      threshold: 0.25,
     });
+    this.elementBuffer.forEach(element => this.observer.observe(element));
+    this.elementBuffer = [];
   }
 
   public componentWillUnmount() {

src/core/client/framework/lib/intersection/ensurePolyfill.ts

@@ -1,9 +0,0 @@
-/**
- * Loads intersection-observer polyfill if it doesn't exist.
- */
-export default async function ensurePolyfill() {
-  if (!(window as any).IntersectionObserver) {
-    await import("intersection-observer");
-  }
-  return;
-}

src/core/client/framework/lib/intersection/index.ts

@@ -4,4 +4,3 @@ export {
   withIntersectionContext,
 } from "./IntersectionContext";
 export { default as withInView } from "./withInView";
-export { default as ensurePolyfill } from "./ensurePolyfill";