@quintype/framework 6.3.1 → 7.0.2-gtm.0

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [7.0.1](https://github.com/quintype/quintype-node-framework/compare/v6.3.0...v7.0.1) (2021-12-15)
+
+
+### Bug Fixes
+
+* remove visual stories from amp infinite scroll ([#282](https://github.com/quintype/quintype-node-framework/issues/282)) ([719f048](https://github.com/quintype/quintype-node-framework/commit/719f0482bcd730604dcc4273cf2e8465f2232fb6))
+
+## [7.0.0](https://github.com/quintype/quintype-node-framework/compare/v6.3.1...v7.0.0) (2021-11-30)
+
 ### [6.3.1](https://github.com/quintype/quintype-node-framework/compare/v6.3.0...v6.3.1) (2021-11-25)
 
 

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) {
@@ -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,8 +276,7 @@ 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;
     }
 
@@ -345,20 +289,18 @@ export function startApp(renderApplication, reducers, opts) {
     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);
 
     if (page.title) {
-      global.document.title = get(
+      global.document.title = global.pageTitle = get(
         page,
         ["data", "customSeo", "title"],
         get(page, ["data", "story", "seo", "meta-title"], page.title)

package/docs-src/tutorials/migrate-from-v6-to-v7.md

@@ -0,0 +1,155 @@
+## Migrate from v6 to v7 of @quintype/framework
+
+In version 7 of @quintype/framework, we've bumped [webpack](https://www.npmjs.com/package/webpack) from version 4 to 5. Please refer webpack's official migration doc [here](https://webpack.js.org/migrate/5/)
+
+PR in malibu for reference > https://github.com/quintype/malibu-advanced/pull/332/files
+
+In your malibu app,
+
+- bump `"@quintype/framework": "^7.x.x"`
+- bump build `"@quintype/build": "^4.x.x",`
+- bump components (if applicable) `"@quintype/components": "^3.x.x"`
+- bump arrow (if applicable) `"@quintype/arrow": "^3.x.x"`
+- bump SEO `"@quintype/seo": "^1.39.x"`
+- update `react` and `react-dom` to latest minor version (16.14.0 at the time of writing)
+- update `react-redux` to latest minor version (7.2.5 at the time of writing)
+- you'll also need a library like [axios](https://www.npmjs.com/package/axios) or something similar to make api calls for HMR to work during development
+- Bump following dependancies (whichever are applicable):
+  - "lint-staged": "^11.2.3",
+    "nodemon": "^2.0.14",
+    "postcss": "^8.3.11",
+    "eslint": "^8.1.0",
+    "prettier": "2.4.1",
+    "react-test-renderer": "^17.0.2",
+    "stylelint": "^14.0.0",
+    "stylelint-config-recommended-scss": "^5.0.0",
+    "stylelint-scss": "^4.0.0",
+    "svg-sprite-loader": "^6.0.10",
+    "svg-transform-loader": "^2.0.13",
+    "webpack": "^5.59.1",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "4.9.1",
+    "webpack-dev-server": "^4.3.1",
+    "svgo-loader": "^3.0.0"
+- create a file called `nodemon.json`, add following to it
+  ```json
+  {
+    "verbose": true,
+    "delay": 2500
+  }
+  ```
+- in `app/server/helpers/index.js`, change
+
+  ```js
+  function getAsset(asset, qtAssetHelpers) {
+    const { assetPath, readAsset } = qtAssetHelpers;
+    return assetPath(asset) ? readAsset(asset) : "";
+  }
+  ```
+
+  to
+
+  ```js
+  async function getAsset(asset, qtAssetHelpers) {
+    const { assetPath, readAsset } = qtAssetHelpers;
+    const assetAbsolutePath = assetPath(asset);
+
+    if (process.env.NODE_ENV === "development") {
+      try {
+        // using axios here, can use any other package to make below call
+        const { data } = await axios.get(assetAbsolutePath);
+        return data;
+      } catch (error) {
+        console.warn("HMR chunk rendering failure");
+        console.warn(error);
+        return "";
+      }
+    }
+
+    return assetAbsolutePath ? readAsset(asset) : "";
+  }
+  ```
+
+- webpack has changed the API of `webpack.config.js` (check migration doc given above fore more info), so we gotta change the config accordingly. _Please note that your project might not need below change if you're not using SVG sprites. In that case please change the webpack config as per the new API_
+
+change what's applicable
+
+```js
+const webpackConfig = require("@quintype/build/config/webpack");
+const path = require("path");
+
+const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");
+const svgSprite = {
+  test: /\.svg$/,
+  loader: "svg-sprite-loader",
+  options: {
+    extract: true,
+    publicPath: "/",
+    symbolId: (filePath) => {
+      return path.basename(filePath).replace(".svg", "").toLowerCase();
+    },
+    spriteFilename: process.env.NODE_ENV === "production" ? "sprite-[hash].svg" : "sprite.svg",
+    esModule: false,
+  },
+};
+
+webpackConfig.module.rules.push(svgSprite);
+webpackConfig.module.rules.find((rule) => rule.loader === "file-loader").exclude = [
+  /app\/assets\/icons\/[a-z-]+\.svg$/,
+];
+
+const svgPlugin = () =>
+  new SpriteLoaderPlugin({
+    plainSprite: true,
+  });
+
+webpackConfig.plugins.push(svgPlugin());
+
+module.exports = {
+  ...webpackConfig,
+};
+```
+
+to
+
+```js
+const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");
+const path = require("path");
+const webpackConfig = require("@quintype/build/config/webpack");
+
+const { plugins, output, module: webpackModule } = webpackConfig;
+if (process.env.NODE_ENV !== "production") output.path = path.resolve("./public");
+const getSpritePlugin = () => new SpriteLoaderPlugin({ plainSprite: true });
+const insertIntoIndex = (arr, index, newItem) => [...arr.slice(0, index), newItem, ...arr.slice(index)];
+const enhancedPlugins = insertIntoIndex(plugins, 1, getSpritePlugin());
+const spriteRule = {
+  test: /\.svg$/,
+  use: [
+    {
+      loader: "svg-sprite-loader",
+      options: {
+        extract: true,
+        spriteFilename: process.env.NODE_ENV === "production" ? "svg-sprite-[hash].svg" : "svg-sprite.svg",
+        esModule: false,
+      },
+    },
+    "svg-transform-loader",
+    "svgo-loader",
+  ],
+};
+
+const enhancedRules = insertIntoIndex(webpackModule.rules, 5, spriteRule);
+enhancedRules[8] = {
+  test: /\.(jpe?g|gif|png|woff|woff2|eot|ttf|wav|mp3|ico|mp4)$/,
+  loader: "file-loader",
+  options: { context: "./app/assets", name: "[name].[ext]" },
+};
+
+module.exports = {
+  ...webpackConfig,
+  module: { ...webpackModule, ...{ rules: enhancedRules } },
+  plugins: enhancedPlugins,
+};
+```
+
+- please test thoroughly. Also webpack 5 shows warnings in browser, please resolve them if present

package/docs-src/tutorials/tutorials.json

@@ -0,0 +1,5 @@
+{
+  "migrate-from-v6-to-v7": {
+    "title": "Migrate from framework version 6 to 7"
+  }
+}

package/jsdoc.json

@@ -18,7 +18,7 @@
     "readme": "docs-src/home.md",
     "recurse": true,
     "verbose": true,
-    "tutorials": false,
+    "tutorials": "./docs-src/tutorials",
     "template": "./docs-src",
     "sitemapRoot": "https://developers.quintype.com/quintype-node-framework"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/framework",
-  "version": "6.3.1",
+  "version": "7.0.2-gtm.0",
   "description": "Libraries to help build Quintype Node.js apps",
   "main": "index.js",
   "scripts": {
@@ -26,75 +26,76 @@
   },
   "homepage": "https://github.com/quintype/quintype-node-framework#readme",
   "dependencies": {
-    "@ampproject/toolbox-optimizer": "2.8.0",
-    "@quintype/amp": "^2.4.15",
+    "@ampproject/toolbox-optimizer": "2.8.3",
+    "@quintype/amp": "^2.4.17",
     "@quintype/backend": "^2.1.0",
-    "@quintype/components": "^2.31.2",
+    "@quintype/components": "^3.0.0",
     "@quintype/prerender-node": "^3.2.24",
     "@quintype/seo": "^1.38.1",
     "atob": "^2.1.2",
+    "chalk": "^4.1.2",
     "cluster": "^0.7.7",
     "compression": "^1.7.4",
-    "ejs": "^2.6.1",
-    "express": "^4.16.4",
-    "firebase": "^6.0.2",
+    "ejs": "^3.1.6",
+    "express": "^4.17.1",
+    "firebase": "^9.1.1",
     "get-youtube-id": "^1.0.1",
     "grpc": "^1.21.1",
-    "http-proxy": "^1.17.0",
-    "js-yaml": "^3.13.1",
-    "lodash": "^4.17.15",
+    "http-proxy": "^1.18.1",
+    "js-yaml": "^4.1.0",
+    "lodash": "^4.17.21",
     "mocha-snapshots": "^4.2.0",
-    "morgan": "^1.9.1",
+    "morgan": "^1.10.0",
     "path-to-regexp": "^6.2.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-redux": "^7.0.1",
-    "react-router": "^5.0.0",
-    "redux": "^4.0.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-redux": "^7.2.5",
+    "react-router": "^5.2.1",
+    "redux": "^4.1.1",
     "request-promise": "^4.2.6",
-    "sleep-promise": "^8.0.1",
-    "winston": "3.2.1"
+    "sleep-promise": "^9.1.0",
+    "winston": "3.3.3"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.14.5",
-    "@loadable/component": "^5.14.1",
-    "@loadable/server": "^5.14.2",
-    "@quintype/build": "^3.13.0",
+    "@babel/eslint-parser": "^7.15.7",
+    "@loadable/component": "^5.15.0",
+    "@loadable/server": "^5.15.1",
+    "@quintype/build": "^3.13.1",
     "babel-plugin-quintype-assets": "^1.1.1",
-    "babel-plugin-react-css-modules": "^5.2.4",
+    "babel-plugin-react-css-modules": "^5.2.6",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-es2015-tree-shaking": "^1.0.1",
     "babel-preset-react": "^6.24.1",
     "babel-register": "^6.26.0",
-    "better-docs": "^1.3.0",
-    "eslint": "^5.16.0",
-    "eslint-config-prettier": "^4.1.0",
-    "eslint-config-standard": "^12.0.0",
-    "eslint-plugin-import": "^2.17.2",
-    "eslint-plugin-node": "^8.0.1",
-    "eslint-plugin-prettier": "^3.0.1",
-    "eslint-plugin-promise": "^4.1.1",
-    "eslint-plugin-react": "^7.12.4",
-    "eslint-plugin-standard": "^4.0.1",
-    "gh-pages": "^2.1.1",
-    "history": "^4.9.0",
-    "husky": "^4.3.8",
-    "jsdoc": "^3.6.3",
-    "jsdom": "^14.0.0",
+    "better-docs": "^2.3.2",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-standard": "^4.1.0",
+    "gh-pages": "^3.2.3",
+    "history": "^5.0.1",
+    "husky": "^7.0.2",
+    "jsdoc": "^3.6.7",
+    "jsdom": "^17.0.0",
     "jsdom-global": "3.0.2",
-    "lint-staged": "^8.1.5",
-    "mocha": "^6.1.4",
-    "nyc": "^14.1.1",
-    "onchange": "^4.1.0",
+    "lint-staged": "^11.2.0",
+    "mocha": "^9.1.2",
+    "nyc": "^15.1.0",
+    "onchange": "^7.1.0",
     "path": "^0.12.7",
-    "prettier": "^2.2.1",
-    "standard-version": "^8.0.1",
-    "supertest": "^4.0.2"
+    "prettier": "^2.4.1",
+    "standard-version": "^9.3.1",
+    "supertest": "^6.1.6"
   },
   "peerDependencies": {
-    "@quintype/seo": "^1.22.0"
+    "@quintype/seo": "^1.39.0"
   },
   "nyc": {
     "exclude": [

package/server/publisher-config.js

@@ -13,6 +13,6 @@
 const fs = require("fs");
 const yaml = require("js-yaml");
 
-const publisher = yaml.safeLoad(fs.readFileSync("config/publisher.yml"));
+const publisher = yaml.load(fs.readFileSync("config/publisher.yml"));
 
 module.exports = publisher;

package/server/start.js

@@ -10,10 +10,12 @@
 // istanbul ignore file
 // This is the start file, to be called from your start.js
 
+const chalk = require('chalk');
 const cluster = require("cluster");
 const process = require("process");
 const { initializeAllClients } = require("./api-client");
 const logger = require("./logger");
+const logSuccess = chalk.bold.cyanBright;
 
 function startMaster({ workers = 4 }) {
   let terminating = false;
@@ -62,7 +64,7 @@ function startMaster({ workers = 4 }) {
 }
 
 async function startWorker(appThunk, opts) {
-  if (process.env.NODE_ENV != "production") {
+  if (process.env.NODE_ENV !== "production") {
     require("@quintype/build")(opts);
   }
   require("../assetify/server")();
@@ -71,9 +73,11 @@ async function startWorker(appThunk, opts) {
     const app = appThunk();
 
     await initializeAllClients();
-    const server = app.listen(opts.port || 3000, () =>
-      console.log(`App listening on port ${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(`||=============================||`));
+    });
 
     process.on("SIGTERM", () => {
       server.close(() => {
@@ -83,7 +87,7 @@ async function startWorker(appThunk, opts) {
     });
     process.on("SIGHUP", () => {});
   } catch (e) {
-    if (process.env.NODE_ENV != "production") {
+    if (process.env.NODE_ENV !== "production") {
       console.log(e.stack);
     }
 

package/server/static-configuration.js

@@ -18,7 +18,7 @@ module.exports = fs
   .readdirSync("config")
   .filter((x) => x.match(/\.yml$/))
   .reduce((acc, x) => {
-    acc[x.replace(/\.yml$/, "")] = yaml.safeLoad(
+    acc[x.replace(/\.yml$/, "")] = yaml.load(
       fs.readFileSync(`config/${x}`)
     );
     return acc;

package/server/utils/apm.js

@@ -0,0 +1,7 @@
+const handleSpanInstance = (_) => {
+    return true;
+};
+
+module.exports = {
+    handleSpanInstance
+};