[next] Add support for embed (#1762)

* Move talk-server/config to talk-common/config

* Refactor build into /src/core/build and use common config

* Add embed webpack config

* Start implementing embed

* Implement embed

* Add pym types

* Add event emitter to Talk Context

* Add MatchMedia test for passing values from the context

* Add support for click far away

* Integrate pym click events to registerClickFarAway

* Add tests

* Resolve merge issues

* Apply PR review

scripts/build.ts

@@ -1,8 +1,20 @@
-"use strict";
+#!/usr/bin/env ts-node
+
+import chalk from "chalk";
+import fs from "fs-extra";
+import FileSizeReporter from "react-dev-utils/FileSizeReporter";
+import formatWebpackMessages from "react-dev-utils/formatWebpackMessages";
+import printBuildError from "react-dev-utils/printBuildError";
+import webpack from "webpack";
+
+import paths from "../config/paths";
+import createWebpackConfig from "../src/core/build/createWebpackConfig";
+import config, { createClientEnv } from "../src/core/common/config";
 
 // tslint:disable: no-console
 
-// Do this as the first thing so that any code reading it knows the right env.
+// Enforce environment to be production.
+config.validate().set("env", "production");
 process.env.BABEL_ENV = "production";
 process.env.NODE_ENV = "production";
 
@@ -13,20 +25,6 @@ process.on("unhandledRejection", err => {
   throw err;
 });
 
-// Ensure environment variables are read.
-require("../config/env");
-
-const path = require("path");
-const chalk = require("chalk");
-const fs = require("fs-extra");
-const webpack = require("webpack");
-const config = require("../config/webpack.config.prod");
-const paths = require("../config/paths");
-const formatWebpackMessages = require("react-dev-utils/formatWebpackMessages");
-const printHostingInstructions = require("react-dev-utils/printHostingInstructions");
-const FileSizeReporter = require("react-dev-utils/FileSizeReporter");
-const printBuildError = require("react-dev-utils/printBuildError");
-
 const measureFileSizesBeforeBuild =
   FileSizeReporter.measureFileSizesBeforeBuild;
 const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
@@ -42,15 +40,15 @@ const treatWarningsAsErrors =
   false &&
   process.env.CI &&
   (typeof process.env.CI !== "string" ||
-    process.env.CI.toLowerCase() !== "false");
+    process.env.CI!.toLowerCase() !== "false");
 
 // First, read the current file sizes in build directory.
 // This lets us display how much they changed later.
-measureFileSizesBeforeBuild(paths.appDist)
-  .then(previousFileSizes => {
+measureFileSizesBeforeBuild(paths.appDistStatic)
+  .then((previousFileSizes: any) => {
     // Remove all content but keep the directory so that
     // if you're in it, you don't end up in Trash
-    fs.emptyDirSync(paths.appDist);
+    fs.emptyDirSync(paths.appDistStatic);
     // Merge with the public folder
     if (fs.pathExistsSync(paths.appPublic)) {
       copyPublicFolder();
@@ -59,7 +57,7 @@ measureFileSizesBeforeBuild(paths.appDist)
     return build(previousFileSizes);
   })
   .then(
-    ({ stats, previousFileSizes, warnings }) => {
+    ({ stats, previousFileSizes, warnings }: any) => {
       if (warnings.length) {
         console.log(chalk.yellow("Compiled with warnings.\n"));
         console.log(warnings.join("\n\n"));
@@ -81,13 +79,13 @@ measureFileSizesBeforeBuild(paths.appDist)
       printFileSizesAfterBuild(
         stats,
         previousFileSizes,
-        paths.appDist,
+        paths.appDistStatic,
         WARN_AFTER_BUNDLE_GZIP_SIZE,
         WARN_AFTER_CHUNK_GZIP_SIZE
       );
       console.log();
     },
-    err => {
+    (err: Error) => {
       console.log(chalk.red("Failed to compile.\n"));
       printBuildError(err);
       process.exit(1);
@@ -95,16 +93,18 @@ measureFileSizesBeforeBuild(paths.appDist)
   );
 
 // Create the production build and print the deployment instructions.
-function build(previousFileSizes) {
+function build(previousFileSizes: any) {
   console.log("Creating an optimized production build...");
-
-  let compiler = webpack(config);
+  const webpackConfig = createWebpackConfig({
+    env: createClientEnv(config),
+  });
+  const compiler = webpack(webpackConfig);
   return new Promise((resolve, reject) => {
     compiler.run((err, stats) => {
       if (err) {
         return reject(err);
       }
-      const messages = formatWebpackMessages(stats.toJson({}, true));
+      const messages = formatWebpackMessages(stats.toJson({}));
       if (messages.errors.length) {
         // Only keep the first error. Others are often indicative
         // of the same problem, but confuse the reader with noise.
@@ -132,7 +132,7 @@ function build(previousFileSizes) {
 }
 
 function copyPublicFolder() {
-  fs.copySync(paths.appPublic, paths.appDist, {
+  fs.copySync(paths.appPublic, paths.appDistStatic, {
     dereference: true,
   });
 }

scripts/start.ts

@@ -1,8 +1,22 @@
-"use strict";
+#!/usr/bin/env ts-node
+
+import chalk from "chalk";
+import {
+  choosePort,
+  createCompiler,
+  prepareUrls,
+} from "react-dev-utils/WebpackDevServerUtils";
+import webpack from "webpack";
+import WebpackDevServer from "webpack-dev-server";
+
+import createDevServerConfig from "../config/webpackDevServer.config";
+import createWebpackConfig from "../src/core/build/createWebpackConfig";
+import config, { createClientEnv } from "../src/core/common/config";
 
 // tslint:disable: no-console
 
-// Do this as the first thing so that any code reading it knows the right env.
+// Enforce environment to be development.
+config.validate().set("env", "development");
 process.env.BABEL_ENV = "development";
 process.env.NODE_ENV = "development";
 
@@ -13,25 +27,8 @@ process.on("unhandledRejection", err => {
   throw err;
 });
 
-// Ensure environment variables are read.
-require("../config/env");
-
-const fs = require("fs");
-const chalk = require("chalk");
-const webpack = require("webpack");
-const WebpackDevServer = require("webpack-dev-server");
-const {
-  choosePort,
-  createCompiler,
-  prepareProxy,
-  prepareUrls,
-} = require("react-dev-utils/WebpackDevServerUtils");
-const paths = require("../config/paths");
-const config = require("../config/webpack.config.dev");
-const createDevServerConfig = require("../config/webpackDevServer.config");
-
-const PORT = parseInt(process.env.DEV_SERVER_PORT, 10) || 8080;
-const HOST = process.env.HOST || "0.0.0.0";
+const PORT = parseInt(process.env.DEV_SERVER_PORT!, 10) || 8080;
+const HOST = "0.0.0.0";
 
 if (process.env.HOST) {
   console.log(
@@ -51,42 +48,43 @@ if (process.env.HOST) {
 // We attempt to use the default port but if it is busy, we offer the user to
 // run on a different port. `choosePort()` Promise resolves to the next free port.
 choosePort(HOST, PORT)
-  .then(port => {
+  .then((port: number) => {
     if (port == null) {
       // We have not found a port.
       return;
     }
-    const protocol = process.env.HTTPS === "true" ? "https" : "http";
-    const appName = require(paths.appPackageJson).name;
+    const protocol = "http";
+    const appName = "Talk";
     const urls = prepareUrls(protocol, HOST, port);
+    const webpackConfig = createWebpackConfig({
+      env: createClientEnv(config),
+    });
     // Create a webpack compiler that is configured with custom messages.
-    const compiler = createCompiler(webpack, config, appName, urls);
-    // Load proxy config
-    const proxySetting = require(paths.appPackageJson).proxy;
-    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
+    const compiler = createCompiler(webpack, webpackConfig, appName, urls);
     // Serve webpack assets generated by the compiler over a web sever.
-    const serverConfig = createDevServerConfig(
-      proxyConfig,
-      urls.lanUrlForConfig
-    );
+    const serverConfig = createDevServerConfig({
+      allowedHost: urls.lanUrlForConfig,
+      serverPort: config.get("port"),
+      publicPath: webpackConfig[0].output!.publicPath!,
+    });
     const devServer = new WebpackDevServer(compiler, serverConfig);
     // Launch WebpackDevServer.
-    devServer.listen(port, HOST, err => {
+    devServer.listen(port, HOST, (err: Error) => {
       if (err) {
         return console.log(err);
       }
       console.log(chalk.cyan("Starting the development server...\n"));
     });
 
-    ["SIGINT", "SIGTERM"].forEach(function(sig) {
-      process.on(sig, function() {
+    ["SIGINT", "SIGTERM"].forEach((sig: any) => {
+      process.once(sig, () => {
         devServer.close();
         process.exit();
       });
     });
   })
-  .catch(err => {
-    if (err && err.message) {
+  .catch((err: Error) => {
+    if (err.message) {
       console.log(err.message);
     }
     process.exit(1);

scripts/test.js

@@ -1,9 +1,16 @@
+#!/usr/bin/env node
+
 "use strict";
 
+// Allow importing typescript files.
+require("ts-node/register");
+
+// Apply all the configuration provided in the .env file.
+require("dotenv").config();
+
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = "test";
 process.env.NODE_ENV = "test";
-process.env.PUBLIC_URL = "";
 
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
@@ -12,10 +19,7 @@ process.on("unhandledRejection", err => {
   throw err;
 });
 
-// Ensure environment variables are read.
-require("../config/env");
-
-const paths = require("../config/paths");
+const paths = require("../config/paths.ts").default;
 
 const jest = require("jest");
 let argv = process.argv.slice(2);