@quintype/framework 7.1.1-socket-timeout.2 → 7.2.0-fcm-madrid.0

package/client/start.js

@@ -7,12 +7,7 @@
  * @module start
  */
 
-import {
-  BreakingNews,
-  CLIENT_SIDE_RENDERED,
-  NAVIGATE_TO_PAGE,
-  PAGE_LOADING
-} from "@quintype/components";
+import { BreakingNews, CLIENT_SIDE_RENDERED, NAVIGATE_TO_PAGE, PAGE_LOADING } from "@quintype/components";
 import { createBrowserHistory } from "history";
 import get from "lodash/get";
 import React from "react";
@@ -21,17 +16,12 @@ import { Provider } from "react-redux";
 import { IsomorphicComponent } from "../isomorphic/component";
 import { makePickComponentSync } from "../isomorphic/impl/make-pick-component-sync";
 import { createQtStore } from "../store/create-store";
-import {
-  registerPageView,
-  registerStoryShare,
-  setMemberId,
-  startAnalytics
-} from "./analytics";
+import { registerPageView, registerStoryShare, setMemberId, startAnalytics } from "./analytics";
 import { initializeFCM } from "./impl/fcm";
 import {
   checkForServiceWorkerUpdates,
   registerServiceWorker,
-  setupServiceWorkerUpdates
+  setupServiceWorkerUpdates,
 } from "./impl/load-service-worker";
 
 require("../assetify/client")();
@@ -55,28 +45,20 @@ export const app = {
 };
 
 function getRouteDataAndPath(path, mountAt) {
-  const relativePath = path.startsWith(mountAt)
-    ? path.slice(mountAt.length)
-    : path;
+  const relativePath = path.startsWith(mountAt) ? path.slice(mountAt.length) : path;
   return [`${mountAt || ""}/route-data.json`, relativePath];
 }
 
-function getRouteData(
-  path,
-  { location = global.location, existingFetch, mountAt = global.qtMountAt }
-) {
+function getRouteData(path, { location = global.location, existingFetch, mountAt = global.qtMountAt }) {
   // if mountAt is set, then hit /mountAt/route-data, remove mountAt from path
 
   const [routeDataPath, relativePath] = getRouteDataAndPath(path, mountAt);
   const url = new URL(relativePath, location.origin);
   return (
     existingFetch ||
-    fetch(
-      `${routeDataPath}?path=${encodeURIComponent(url.pathname)}${
-        url.search ? `&${url.search.slice(1)}` : ""
-      }`,
-      { credentials: "same-origin" }
-    )
+    fetch(`${routeDataPath}?path=${encodeURIComponent(url.pathname)}${url.search ? `&${url.search.slice(1)}` : ""}`, {
+      credentials: "same-origin",
+    })
   )
     .then((response) => {
       if (response.status == 404) {
@@ -99,11 +81,7 @@ function getRouteData(
   }
 
   function maybeBypassServiceWorker(e) {
-    if (
-      global.qtLoadedFromShell ||
-      `${location.pathname}${location.search}${location.hash}` !=
-        `${path}#bypass-sw`
-    ) {
+    if (global.qtLoadedFromShell || `${location.pathname}${location.search}${location.hash}` != `${path}#bypass-sw`) {
       location.href = `${path}#bypass-sw`;
       location.reload();
     }
@@ -124,8 +102,7 @@ let pickComponentWrapper = null;
  * @returns {void}
  */
 export function navigateToPage(dispatch, path, doNotPushPath) {
-  const pathname =
-    !path || path === "undefined" ? global.location.pathname : path;
+  const pathname = !path || path === "undefined" ? global.location.pathname : path;
 
   if (global.disableAjaxNavigation) {
     global.location = pathname;
@@ -134,8 +111,7 @@ export function navigateToPage(dispatch, path, doNotPushPath) {
   dispatch({ type: PAGE_LOADING });
   getRouteData(pathname, {}).then((page) => {
     if (!page) {
-      console &&
-        console.log("Recieved a null page. Expecting the browser to redirect.");
+      console && console.log("Recieved a null page. Expecting the browser to redirect.");
       return;
     }
 
@@ -147,8 +123,7 @@ export function navigateToPage(dispatch, path, doNotPushPath) {
     }
 
     Promise.resolve(
-      pickComponentWrapper &&
-        pickComponentWrapper.preloadComponent(page.pageType, page.subPageType)
+      pickComponentWrapper && pickComponentWrapper.preloadComponent(page.pageType, page.subPageType)
     ).then(() => {
       dispatch({
         type: NAVIGATE_TO_PAGE,
@@ -177,8 +152,7 @@ export function navigateToPage(dispatch, path, doNotPushPath) {
  * @returns {void}
  */
 export function maybeNavigateTo(path, store) {
-  if (store.getState().qt.currentPath != path)
-    navigateToPage(store.dispatch, path, true);
+  if (store.getState().qt.currentPath != path) navigateToPage(store.dispatch, path, true);
 }
 
 /**
@@ -205,24 +179,12 @@ export function maybeSetUrl(path, title) {
  * @param {callback} callback Callback on completion
  */
 export function renderComponent(clazz, container, store, props = {}, callback) {
-  const component = React.createElement(
-    Provider,
-    { store },
-    React.createElement(clazz, props || {})
-  );
+  const component = React.createElement(Provider, { store }, React.createElement(clazz, props || {}));
 
   if (props.hydrate) {
-    return ReactDOM.hydrate(
-      component,
-      document.getElementById(container),
-      callback
-    );
+    return ReactDOM.hydrate(component, document.getElementById(container), callback);
   }
-  return ReactDOM.render(
-    component,
-    document.getElementById(container),
-    callback
-  );
+  return ReactDOM.render(component, document.getElementById(container), callback);
 }
 
 /**
@@ -233,19 +195,11 @@ export function renderComponent(clazz, container, store, props = {}, callback) {
  * @param {Object} props Properties to bootstrap the component with
  * @param {boolean} props.hydrate Hydrate the component instead of rendering it
  */
-export function renderIsomorphicComponent(
-  container,
-  store,
-  pickComponent,
-  props
-) {
+export function renderIsomorphicComponent(container, store, pickComponent, props) {
   if (!store.getState().qt.disableIsomorphicComponent) {
     pickComponentWrapper = makePickComponentSync(pickComponent);
     return pickComponentWrapper
-      .preloadComponent(
-        store.getState().qt.pageType,
-        store.getState().qt.subPageType
-      )
+      .preloadComponent(store.getState().qt.pageType, store.getState().qt.subPageType)
       .then(() =>
         renderComponent(
           IsomorphicComponent,
@@ -267,12 +221,7 @@ export function renderIsomorphicComponent(
  * @param {Object} props Properties to bootstrap the component with
  */
 export function renderBreakingNews(container, store, view, props) {
-  return renderComponent(
-    BreakingNews,
-    container,
-    store,
-    Object.assign({ view }, props)
-  );
+  return renderComponent(BreakingNews, container, store, Object.assign({ view }, props));
 }
 
 function getJsonContent(id) {
@@ -294,7 +243,7 @@ function runWithTiming(name, f) {
  * @param {Object} reducers A list of custom reducers for your application. This will be merged with the built in reducers
  * @param {Object} opts Options
  * @param {function} opts.preRenderApplication Render a part of the application on boot. See [preRenderApplication](https://developers.quintype.com/malibu/isomorphic-rendering/client-side-architecture.html#prerenderapplication)
- * @param {boolean} opts.enableFCM Enable Firebase Cloud Messaging for push notifications
+ * @param {(function|string)} opts.fcmMessagingSenderId Enable Firebase Cloud Messaging for push notifications
  * @param {boolean} opts.enableServiceWorker Should service worker be enabled
  * @param {string} opts.serviceWorkerLocation Location of the service worker (default: /service-worker.js). Note, if using mountAt, this is relative to the mount point.
  * @param {number} opts.appVersion App Version. See [Updating App Version](https://developers.quintype.com/malibu/tutorial/updating-app-version)
@@ -306,8 +255,7 @@ export function startApp(renderApplication, reducers, opts) {
   global.app = app;
   const { location } = global;
   const path = `${location.pathname}${location.search || ""}`;
-  const staticData =
-    global.staticPageStoreContent || getJsonContent("static-page");
+  const staticData = global.staticPageStoreContent || getJsonContent("static-page");
   const dataPromise = staticData
     ? Promise.resolve(staticData.qt)
     : getRouteData(path, { existingFetch: global.initialFetch });
@@ -316,10 +264,7 @@ export function startApp(renderApplication, reducers, opts) {
 
   const store = createQtStore(
     reducers,
-    (staticData && staticData.qt) ||
-      global.initialPage ||
-      getJsonContent("initial-page") ||
-      {},
+    (staticData && staticData.qt) || global.initialPage || getJsonContent("initial-page") || {},
     {}
   );
 
@@ -331,29 +276,28 @@ export function startApp(renderApplication, reducers, opts) {
 
   function doStartApp(page, opts) {
     if (!page) {
-      console &&
-        console.log("Received a null page. Expecting the browser to redirect.");
+      console && console.log("Received a null page. Expecting the browser to redirect.");
       return;
     }
 
     store.dispatch({ type: NAVIGATE_TO_PAGE, page, currentPath: path });
-    if (opts.enableFCM) {
-      const mssgSenderId = get(page, ["config", "fcmMessageSenderId"], null);
+
+    if (opts.fcmMessagingSenderId) {
+      const mssgSenderId =
+        typeof opts.fcmMessagingSenderId === "function" ? opts.fcmMessagingSenderId(page) : opts.fcmMessagingSenderId;
       initializeFCM(mssgSenderId);
     }
 
     const { config: { "theme-attributes": pageThemeAttributes = {} } = {} } = page;
     const version = pageThemeAttributes["cache-burst"] || app.getAppVersion();
 
-    const serviceWorkerPromise = registerServiceWorker({...opts, version});
+    const serviceWorkerPromise = registerServiceWorker({ ...opts, version });
 
     setupServiceWorkerUpdates(serviceWorkerPromise, app, store, page, opts);
 
     runWithTiming("qt_render", () => renderApplication(store));
 
-    history.listen((change) =>
-      app.maybeNavigateTo(`${change.pathname}${change.search || ""}`, store)
-    );
+    history.listen((change) => app.maybeNavigateTo(`${change.pathname}${change.search || ""}`, store));
 
     registerPageView(store.getState().qt);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/framework",
-  "version": "7.1.1-socket-timeout.2",
+  "version": "7.2.0-fcm-madrid.0",
   "description": "Libraries to help build Quintype Node.js apps",
   "main": "index.js",
   "scripts": {
@@ -28,7 +28,7 @@
   "dependencies": {
     "@ampproject/toolbox-optimizer": "2.8.3",
     "@quintype/amp": "^2.4.19",
-    "@quintype/backend": "^2.2.1-socket-timeout.0",
+    "@quintype/backend": "^2.2.0",
     "@quintype/components": "^3.0.0",
     "@quintype/prerender-node": "^3.2.24",
     "@quintype/seo": "^1.38.1",
@@ -38,7 +38,7 @@
     "compression": "^1.7.4",
     "ejs": "^3.1.6",
     "express": "^4.17.1",
-    "firebase": "^9.1.1",
+    "firebase": "^6.0.2",
     "get-youtube-id": "^1.0.1",
     "grpc": "^1.21.1",
     "http-proxy": "^1.18.1",

package/server/handlers/fcm-registration-handler.js

@@ -5,7 +5,8 @@ exports.registerFCMTopic = async function registerFCM(
   req,
   res,
   next,
-  { config, client, publisherConfig }
+  { config, client, publisherConfig },
+  fcmServerKey
 ) {
   const token = get(req, ["body", "token"], null);
   if (!token) {
@@ -13,7 +14,8 @@ exports.registerFCMTopic = async function registerFCM(
     return;
   }
 
-  const serverKey = get(publisherConfig, ["fcm", "serverKey"], null);
+  const serverKey = typeof fcmServerKey === "function" ? fcmServerKey(config) : fcmServerKey;
+
   if (!serverKey) {
     res.status(500).send("Server Key is not available");
     return;

package/server/routes.js

@@ -276,6 +276,7 @@ function getWithConfig(app, route, handler, opts = {}) {
  * @param {boolean|function} redirectToLowercaseSlugs If set or evaluates to true, then for every story-page request having capital latin letters in the slug, it responds with a 301 redirect to the lowercase slug URL. (default: true)
  * @param {boolean|function} shouldEncodeAmpUri If set to true, then for every story-page request the slug will be encoded, in case of a vernacular slug this should be set to false. Receives path as param (default: true)
  * @param {number} sMaxAge Overrides the s-maxage value, the default value is set to 900 seconds. We can set `isomorphicRoutesSmaxage: 900` under `publisher` in publisher.yml config file that comes from BlackKnight or pass sMaxAge as a param.
+ * @param {(string|function)} fcmServerKey  FCM serverKey is used for registering FCM Topic.
  * @param {string} appLoadingPlaceholder This string gets injected into the app container when the page is loaded via service worker. Can be used to show skeleton layouts, animations or other progress indicators before it is replaced by the page content.
  */
 exports.isomorphicRoutes = function isomorphicRoutes(
@@ -319,6 +320,7 @@ exports.isomorphicRoutes = function isomorphicRoutes(
     shouldEncodeAmpUri,
     sMaxAge = 900,
     appLoadingPlaceholder = "",
+    fcmServerKey = "",
   }
 ) {
   const withConfig = withConfigPartial(getClient, logError, publisherConfig, configWrapper);
@@ -410,7 +412,7 @@ exports.isomorphicRoutes = function isomorphicRoutes(
     })
   );
 
-  app.post("/register-fcm-topic", bodyParser.json(), withConfig(registerFCMTopic, { publisherConfig }));
+  app.post("/register-fcm-topic", bodyParser.json(), withConfig(registerFCMTopic, { publisherConfig }, fcmServerKey));
 
   if (manifestFn) {
     app.get("/manifest.json", withConfig(handleManifest, { manifestFn, logError }));

package/server/start.js

@@ -16,7 +16,6 @@ const process = require("process");
 const { initializeAllClients } = require("./api-client");
 const logger = require("./logger");
 const logSuccess = chalk.bold.cyanBright;
-const http = require('http');
 
 function startMaster({ workers = 4 }) {
   let terminating = false;
@@ -54,7 +53,7 @@ function startMaster({ workers = 4 }) {
     );
 
     if (terminating) {
-      if (aliveWorkers.length === 0) {
+      if (aliveWorkers.length == 0) {
         logger.info("All Workers Terminated. Gracefully Exiting");
         process.exit();
       }
@@ -74,19 +73,12 @@ async function startWorker(appThunk, opts) {
     const app = appThunk();
 
     await initializeAllClients();
-    const server = http.createServer(app).listen(opts.port || 3000, () => {
+    const server = app.listen(opts.port || 3000, () => {
       console.log(logSuccess(`||=============================||`));
-      console.log(logSuccess(`|| App listening on port ${opts.port || 3000}! ||`));
+      console.log(logSuccess(`|| App listening on port ${opts.port || 3000}! ||`))
       console.log(logSuccess(`||=============================||`));
     });
 
-    server.setTimeout(opts.socketTimeout || 2000,()=>{
-      console.log("Socket is destroyed due to timeout");
-      server.close(()=>{
-        console.log("Server is closed");
-      })
-    })
-
     process.on("SIGTERM", () => {
       server.close(() => {
         cluster.worker.disconnect();