[next] Embed: Defer login/logout until ready (#2123)

* feat: Embed defer login/-out until ready

* fix: make remove work with lazy render

* fix: typo

* fix: another typo

* fix: test

* chore: replace query-string for querystringify

* fix: types

* chore: small refactor

* feat: added webpack analzyer

* chore: rename compile -> generate

* fix: fix scripts and improve bundle size

* fix: lodash webpack plugin

src/core/client/framework/lib/bootstrap/SendPymReady.tsx

@@ -0,0 +1,29 @@
+import { Child } from "pym.js";
+import React from "react";
+import withContext from "./withContext";
+
+interface Props {
+  pym: Child;
+}
+
+/**
+ * SendPymReady will notify the parent pym that
+ * we are ready and have setup all listeners.
+ */
+class SendPymReady extends React.Component<Props> {
+  private sent = false;
+
+  public componentDidMount() {
+    if (!this.sent) {
+      this.sent = true;
+      this.props.pym.sendMessage("ready", "");
+    }
+  }
+
+  public render() {
+    return null;
+  }
+}
+
+const enhanced = withContext(({ pym }) => ({ pym }))(SendPymReady);
+export default enhanced;

src/core/client/framework/lib/bootstrap/createManaged.tsx

@@ -23,6 +23,7 @@ import { ClickFarAwayRegister } from "talk-ui/components/ClickOutside";
 import { generateBundles, LocalesData, negotiateLanguages } from "../i18n";
 import { createNetwork, TokenGetter } from "../network";
 import { PostMessageService } from "../postMessage";
+import SendPymReady from "./SendPymReady";
 import { TalkContext, TalkContextProvider } from "./TalkContext";
 
 export type InitLocalState = ((
@@ -159,6 +160,7 @@ function createMangedTalkContextProvider(
       return (
         <TalkContextProvider value={this.state.context}>
           {this.props.children}
+          {this.state.context.pym && <SendPymReady />}
         </TalkContextProvider>
       );
     }

src/core/client/framework/lib/rest.ts

@@ -1,4 +1,4 @@
-import merge from "lodash/merge";
+import { merge } from "lodash";
 import { Overwrite } from "talk-framework/types";
 
 const buildOptions = (inputOptions: RequestInit = {}) => {

src/core/client/framework/utils/modifyQuery.ts

@@ -1,11 +1,11 @@
-import qs from "query-string";
+import { parseQuery, stringifyQuery } from "talk-common/utils";
 
 import buildURL from "./buildURL";
 import parseURL from "./parseURL";
 
 export default function modifyQuery(url: string, params: {}) {
   const parsed = parseURL(url);
-  const query = qs.parse(parsed.search);
-  parsed.search = qs.stringify({ ...query, ...params });
+  const query = parseQuery(parsed.search);
+  parsed.search = stringifyQuery({ ...query, ...params });
   return buildURL(parsed);
 }

src/core/client/framework/utils/parseHashQuery.ts

@@ -1,5 +1,9 @@
-import qs from "query-string";
+import { parseQuery } from "talk-common/utils";
 
 export default function parseQueryHash(hash: string): Record<string, string> {
-  return qs.parse(hash);
+  let normalized = hash;
+  if (normalized[0] === "#") {
+    normalized = normalized.substr(1);
+  }
+  return parseQuery(normalized);
 }