deps(webpack): Implement webpack 5 (#332)

* wip

* remove unencessary items

* fix assets

* remove unused package

* fix lint js error

* fix: css lint issue

* update pack

* remove text on header

* update helper

* fix lint

Co-authored-by: Harshith Raj <[email protected]>

.eslintrc.js

@@ -0,0 +1,32 @@
+module.exports = {
+  extends: [
+    "standard",
+    "prettier",
+    "plugin:react/recommended",
+    "plugin:jest/recommended",
+    "plugin:prettier/recommended",
+  ],
+  plugins: ["react", "standard", "jest"],
+  env: {
+    node: true,
+    commonjs: true,
+    browser: true,
+    es6: true,
+    "shared-node-browser": true,
+  },
+  parser: "@babel/eslint-parser",
+  parserOptions: {
+    sourceType: "module",
+    babelOptions: {
+      configFile: "./babel.config.js",
+    },
+  },
+  rules: {
+    "max-len": ["warn", { code: 120 }],
+  },
+  settings: {
+    react: {
+      version: "16.2",
+    },
+  },
+};

app/assets/stylesheets/app.scss

@@ -2,11 +2,11 @@
 @import "modal";
 @import "base";
 
-@import "./base/z-index.scss";
-@import "./base/colors.scss";
-@import "./base/normalize.scss";
-@import "./base/typography.scss";
-@import "@quintype/arrow/app.scss";
+@import "./base/z-index";
+@import "./base/colors";
+@import "./base/normalize";
+@import "./base/typography";
+@import "@quintype/arrow/app";
 
 :root {
   --container-width: 1280px;
@@ -128,7 +128,7 @@ a {
 
     .youtube-playBtn {
       background: #282828;
-      border-radius: 50%/10%;
+      border-radius: 50% / 10%;
       font-size: 1em;
       height: 3em;
       padding: 0;
@@ -149,7 +149,7 @@ a {
 
     .youtube-playBtn::before {
       background: inherit;
-      border-radius: 5%/50%;
+      border-radius: 5% / 50%;
       bottom: 9%;
       content: "";
       left: -5%;

app/server/helpers/index.js

@@ -1,6 +1,7 @@
 import path from "path";
 import get from "lodash/get";
 import { ChunkExtractor } from "@loadable/server";
+import axios from "axios";
 
 const statsFile = path.resolve("stats.json");
 
@@ -13,7 +14,7 @@ const statsFile = path.resolve("stats.json");
 export async function getArrowCss(state, { qtAssetHelpers = require("@quintype/framework/server/asset-helper") } = {}) {
   const layout = get(state, ["qt", "data", "collection", "items", 0, "associated-metadata", "layout"], null);
   const pageType = get(state, ["qt", "pageType"], "");
-  const extractor = entryPoint => {
+  const extractor = (entryPoint) => {
     const getExtractor = new ChunkExtractor({ statsFile, entrypoints: [entryPoint] });
     return getExtractor.getCssString();
   };
@@ -43,12 +44,25 @@ export async function getArrowCss(state, { qtAssetHelpers = require("@quintype/f
   }
 }
 
-function getAsset(asset, qtAssetHelpers) {
+async function getAsset(asset, qtAssetHelpers) {
   const { assetPath, readAsset } = qtAssetHelpers;
-  return assetPath(asset) ? readAsset(asset) : "";
+  const assetAbsolutePath = assetPath(asset);
+
+  if (process.env.NODE_ENV === "development") {
+    try {
+      const { data } = await axios.get(assetAbsolutePath);
+      return data;
+    } catch (error) {
+      console.warn("HMR chunk rendering failure");
+      console.warn(error);
+      return "";
+    }
+  }
+
+  return assetAbsolutePath ? readAsset(asset) : "";
 }
 
-export const getConfig = state => {
+export const getConfig = (state) => {
   return {
     gtmId: get(state, ["qt", "config", "publisher-attributes", "google_tag_manager", "id"], ""),
     isGtmEnable: get(state, ["qt", "config", "publisher-attributes", "google_tag_manager", "is_enable"], false),
@@ -58,7 +72,7 @@ export const getConfig = state => {
     isOnesignalEnable: get(state, ["qt", "config", "publisher-attributes", "onesignal", "is_enable"], false),
     enableAds: get(state, ["qt", "config", "ads-config", "dfp_ads", "enable_ads"]),
     loadAdsSynchronously: get(state, ["qt", "config", "ads-config", "dfp_ads", "load_ads_synchronously"]),
-    pageType: get(state, ["qt", "pageType"], "")
+    pageType: get(state, ["qt", "pageType"], ""),
   };
 };
 

config/publisher.yml

@@ -1,5 +1,5 @@
 asset_host: http://localhost:8080
-sketches_host: https://malibu-web.qtstage.io
+sketches_host: https://malibu-web.quintype.io
 host_to_api_host:
   help.lvh.me: https://user-documentation.quintype.io
 host_to_automatic_api_host:

nodemon.json

@@ -0,0 +1,4 @@
+{
+  "verbose": true,
+  "delay": 2500
+}