catalyst-core 0.0.1-beta.2 → 0.0.1-beta.3

package/server/utils/validator.js

@@ -7,7 +7,7 @@ const handleError = e => {
 const validatePreInitServer = fn => {
   try {
     if (!fn) throw new Error("preServerInit named function should be defined in server/index.js");
-    if (typeof fn !== 'function') throw new Error("preServerInit should be function present in server/index.js");
+    if (typeof fn !== "function") throw new Error("preServerInit should be function present in server/index.js");
     return true;
   } catch (e) {
     handleError(e);
@@ -16,7 +16,7 @@ const validatePreInitServer = fn => {
 const validateMiddleware = fn => {
   try {
     if (!fn) throw new Error("addMiddlewares named function not found in server/server.js");
-    if (typeof fn !== 'function') throw new Error("addMiddlewares should be function present in server/server.js");
+    if (typeof fn !== "function") throw new Error("addMiddlewares should be function present in server/server.js");
     return true;
   } catch (e) {
     handleError(e);
@@ -25,7 +25,7 @@ const validateMiddleware = fn => {
 const validateReducerFunction = fn => {
   try {
     if (!fn) throw new Error("reducer not found in src/js/containers/App/reducer");
-    if (typeof fn !== 'function') throw new Error("reducer should present in src/js/containers/App/reducer");
+    if (typeof fn !== "function") throw new Error("reducer should present in src/js/containers/App/reducer");
     return true;
   } catch (e) {
     handleError(e);
@@ -34,7 +34,24 @@ const validateReducerFunction = fn => {
 const validateConfigFile = obj => {
   try {
     if (!obj) throw new Error("config not found in config folder");
-    if (typeof obj !== 'object') throw new Error("config object should be exported from config folder inside your project root directory");
+    if (typeof obj !== "object") throw new Error("config object should be exported from config folder inside your project root directory");
+    if (typeof obj === "object") {
+      const requiredConfigKeys = {
+        NODE_SERVER_HOSTNAME: "",
+        NODE_SERVER_PORT: "",
+        WEBPACK_DEV_SERVER_HOSTNAME: "",
+        WEBPACK_DEV_SERVER_PORT: "",
+        BUILD_OUTPUT_PATH: "",
+        PUBLIC_STATIC_ASSET_PATH: "",
+        PUBLIC_STATIC_ASSET_URL: "",
+        NODE_ENV: "",
+        CLIENT_ENV_VARIABLES: [],
+        ANALYZE_BUNDLE: ""
+      };
+      for (let key in requiredConfigKeys) {
+        if (!(key in obj)) throw new Error(`${key} key not found inside config.json`);
+      }
+    }
     return true;
   } catch (e) {
     handleError(e);
@@ -43,7 +60,7 @@ const validateConfigFile = obj => {
 const validatePackageJson = obj => {
   try {
     if (!obj) throw new Error("package.json not found in the project");
-    if (typeof obj !== 'object') throw new Error("package.json should be defined in project root directory");
+    if (typeof obj !== "object") throw new Error("package.json should be defined in project root directory");
     return true;
   } catch (e) {
     handleError(e);
@@ -52,7 +69,20 @@ const validatePackageJson = obj => {
 const validateModuleAlias = obj => {
   try {
     if (!obj) throw new Error("moduleAliases not found in package.json file present in root directory.");
-    if (typeof obj !== 'object') throw new Error("moduleAliases named object should be exported from package.json");
+    if (typeof obj !== "object") throw new Error("moduleAliases named object should be exported from package.json");
+    if (typeof obj === "object") {
+      const requiredModuleAliases = {
+        "@api": "api.js",
+        "@containers": "src/js/containers",
+        "@server": "server",
+        "@config": "config",
+        "@css": "src/static/css",
+        "@routes": "src/js/routes/"
+      };
+      for (let key in requiredModuleAliases) {
+        if (!(key in obj)) throw new Error(`${key} module alias not defined inside package.json`);
+      }
+    }
     return true;
   } catch (e) {
     handleError(e);
@@ -61,7 +91,7 @@ const validateModuleAlias = obj => {
 const validateConfigureStore = fn => {
   try {
     if (!fn) throw new Error("configureStore not found in file src/js/store/index.js");
-    if (typeof fn !== 'function') throw new Error("configureStore should be function exported from src/js/store/index.js");
+    if (typeof fn !== "function") throw new Error("configureStore should be function exported from src/js/store/index.js");
     return true;
   } catch (e) {
     handleError(e);
@@ -69,8 +99,8 @@ const validateConfigureStore = fn => {
 };
 const validateGetRoutes = fn => {
   try {
-    if (!fn) throw new Error("getRoutes not found in file src/js/routers/index.js");
-    if (typeof fn !== 'function') throw new Error("getRoutes should be function exported from src/js/routers/index.js");
+    if (!fn) throw new Error("getRoutes not found in file src/js/routes/utils.js");
+    if (typeof fn !== "function") throw new Error("getRoutes should be function exported from src/js/routers/index.js");
     return true;
   } catch (e) {
     handleError(e);
@@ -79,7 +109,7 @@ const validateGetRoutes = fn => {
 const validateCustomDocument = fn => {
   try {
     if (!fn) throw new Error("document not found in file server/document.js");
-    if (typeof fn !== 'function') throw new Error("document should be a react component exported from server/document.js");
+    if (typeof fn !== "function") throw new Error("document should be a react component exported from server/document.js");
     return true;
   } catch (e) {
     handleError(e);

package/webpack/babel-plugins/remove-client.plugin.js

@@ -7,7 +7,7 @@ exports.default = _default;
 /**
  * @description babel plugin used to remove unwanted code from the build.
  * @return babel plugin object
-*/
+ */
 function _default() {
   return {
     name: "ast-transform",

package/webpack/babel-plugins/remove-ssr.plugin.js

@@ -7,7 +7,7 @@ exports.default = _default;
 /**
  * @description babel plugin used to remove unwanted code from the build.
  * @return babel plugin object
-*/
+ */
 function _default() {
   return {
     name: "ast-transform",

package/webpack/babel.config.client.js

@@ -16,8 +16,8 @@ var _default = exports.default = {
     production: {
       plugins: [require("./babel-plugins/remove-ssr.plugin").default, "transform-react-remove-prop-types"]
     },
-    "test": {
-      "presets": ["@babel/preset-react"]
+    test: {
+      presets: ["@babel/preset-react"]
     }
   },
   ignore: ["__TEST__"]

package/webpack/base.babel.js

@@ -16,14 +16,14 @@ var _loadEnvironmentVariables = _interopRequireDefault(require("../scripts/loadE
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const catalystConfig = require(_path.default.resolve(__dirname, "..", "config.json"));
 const {
-  enableDynamicImports,
-  clientEnv
-} = require(`${process.env.src_path}/config`);
+  CLIENT_ENV_VARIABLES: clientEnv,
+  ANALYZE_BUNDLE
+} = require(`${process.env.src_path}/config/config.json`);
 const {
   _moduleAliases
 } = require(`${process.env.src_path}/package.json`);
 (0, _loadEnvironmentVariables.default)();
-const isDev = process.env.NODE_ENV !== "production";
+const isDev = process.env.NODE_ENV === "development";
 const isSSR = !!process.env.SSR || false;
 const basePlugins = exports.basePlugins = [new _webpackPlugin.default({
   filename: "loadable-stats.json",
@@ -36,45 +36,45 @@ new _webpack.default.DefinePlugin({
   "process.env": ([...clientEnv, ...Object.keys(process.env)] || []).reduce((clientEnvMap, env) => {
     clientEnvMap[env] = JSON.stringify(process.env[env]);
     return clientEnvMap;
-  }, {}),
-  // Loadable dynamic rendring config
-  "process.loadableConfig": {
-    CLIENT_ONLY_RENDER: process.env["CLIENT_ONLY_RENDER"] === "true",
-    SERVER_SIDE_RENDER: process.env["SERVER_SIDE_RENDER"] === "true"
-  }
+  }, {})
 }),
 // ** This is used to analyze bundle size.
-catalystConfig.analyzeBundle && new _webpackBundleAnalyzer.BundleAnalyzerPlugin({
-  generateStatsFile: true
+ANALYZE_BUNDLE && new _webpackBundleAnalyzer.BundleAnalyzerPlugin({
+  generateStatsFile: ANALYZE_BUNDLE
 }), new _webpack.default.IgnorePlugin({
   resourceRegExp: /^\.\/locale$/,
   contextRegExp: /moment$/
 })];
-let publicPath = process.env.PUBLIC_ASSET_PATH || "/";
+const {
+  PUBLIC_STATIC_ASSET_URL,
+  PUBLIC_STATIC_ASSET_PATH,
+  WEBPACK_DEV_SERVER_HOSTNAME,
+  WEBPACK_DEV_SERVER_PORT
+} = process.env;
+let publicPath = isDev ? `http://${WEBPACK_DEV_SERVER_HOSTNAME}:${WEBPACK_DEV_SERVER_PORT}/` : `${PUBLIC_STATIC_ASSET_URL}${PUBLIC_STATIC_ASSET_PATH}`;
 var _default = exports.default = {
   context: _path.default.resolve(process.env.src_path),
   mode: isDev ? "development" : "production",
   entry: {
     app: [_path.default.resolve(process.env.src_path, "./client/index.js")]
   },
-  // TODO this will be moved each config
-
   output: {
-    path: _path.default.join(process.env.src_path, process.env.PUBLIC_OUTPUT_PATH),
-    filename: catalystConfig.chunkFileNameDev,
+    path: _path.default.join(process.env.src_path, `${process.env.BUILD_OUTPUT_PATH}/public`),
+    chunkFilename: process.env.NODE_ENV === "development" ? catalystConfig.chunkFileNameDev : catalystConfig.chunkFileNameProd,
     publicPath: publicPath,
-    chunkFilename: enableDynamicImports ? catalystConfig.chunkFileNameDev : undefined
+    chunkFilename: process.env.NODE_ENV === "development" ? catalystConfig.chunkFileNameDev : catalystConfig.chunkFileNameProd
   },
   resolve: {
+    fallback: {
+      url: require.resolve("url")
+    },
     extensions: [".js", ".jsx", ".scss"],
     alias: Object.keys(_moduleAliases || {}).reduce((moduleEnvMap, alias) => {
       moduleEnvMap[alias] = _path.default.join(process.env.src_path, ..._moduleAliases[alias].split("/"));
       return moduleEnvMap;
     }, {})
   },
-  // TODO common plugins here. Rest will be moved to each file
   plugins: basePlugins,
-  // TODO  module rules will be here. and should be common for all
   module: {
     rules: [{
       test: /\.jsx$|\.js$/,
@@ -84,9 +84,7 @@ var _default = exports.default = {
         options: isSSR ? _babelConfig2.default : _babelConfig.default
       }
     }, {
-      // For all .scss files that should be modularized. This should exclude
-      // anything inside node_modules and everything inside src/css/base
-      // since they should be globally scoped.
+      // This loader processes all the .scss files that should be modularized. This should exclude anything inside node_modules and everything inside src/css/base since they should be globally scoped.
       test: /\.scss$/,
       exclude: [_path.default.resolve(process.env.src_path, "./node_modules"), _path.default.resolve(process.env.src_path, "./src/static/css/base")],
       use: [isDev && "css-hot-loader", !isSSR && _miniCssExtractPlugin.default.loader, {
@@ -96,15 +94,14 @@ var _default = exports.default = {
             mode: "local",
             exportOnlyLocals: !isDev && isSSR,
             localIdentName: isDev ? catalystConfig.cssModulesIdentifierDev : catalystConfig.cssModulesIdentifierProd
-          },
-          importLoaders: 0
+          }
         }
       }, {
         loader: "postcss-loader"
       }, {
         loader: "sass-loader",
         options: {
-          additionalData: "$font_url: " + (0, _scssParams.fontUrl)() + ";" + "$url_for: " + (0, _scssParams.urlFor)() + ";"
+          additionalData: "$font_url: " + (0, _scssParams.fontUrl)() + ";" + "$url_for: " + (0, _scssParams.imageUrl)() + ";"
         }
       }, {
         loader: "sass-resources-loader",
@@ -113,19 +110,17 @@ var _default = exports.default = {
         }
       }]
     }, {
-      // in local dev, client request app.css whoever in prod this css is injected in the doc sent from the server
-      // for .scss modules that need to be available globally, we don't pass
-      // the files through css-loader to be modularized.
+      // In development mode, client request app.css ,which has all the css in node_modules and src/static/css/base, This is served by webpack-dev-server. However in prod this css is injected in the doc sent from the server and needs to be global, so we don't pass the files through css-loader to be modularized.
       test: /\.scss$/,
       include: [_path.default.resolve(process.env.src_path, "./node_modules"), _path.default.resolve(process.env.src_path, "./src/static/css/base")],
-      use: ["css-hot-loader", !isSSR && _miniCssExtractPlugin.default.loader, {
+      use: [isDev && "css-hot-loader", !isSSR && _miniCssExtractPlugin.default.loader, {
         loader: "css-loader"
       }, {
         loader: "postcss-loader"
       }, {
         loader: "sass-loader",
         options: {
-          additionalData: "$font_url: " + (0, _scssParams.fontUrl)() + ";" + "$url_for: " + (0, _scssParams.urlFor)() + ";"
+          additionalData: "$font_url: " + (0, _scssParams.fontUrl)() + ";" + "$url_for: " + (0, _scssParams.imageUrl)() + ";"
         }
       }, {
         loader: "sass-resources-loader",
@@ -136,9 +131,7 @@ var _default = exports.default = {
     }, {
       test: /\.css$/,
       use: [!isSSR && _miniCssExtractPlugin.default.loader, "css-loader", "postcss-loader"]
-    },
-    // TODO replace them with asset/module
-    {
+    }, {
       test: /\.(png|jpg|gif|jpeg|ico?)$/,
       use: ["url-loader?limit=10240", "img-loader"]
     }, {
@@ -146,7 +139,7 @@ var _default = exports.default = {
       issuer: /\.[jt]sx?$/,
       use: ["@svgr/webpack", "url-loader?limit=10240", "img-loader"]
     }, {
-      // Load fonts using file-loader
+      // This loader loads fonts in src/static/fonts using file-loader
       test: /\.(ttf|eot|woff2|json?)$/,
       use: [{
         loader: "url-loader",
@@ -156,7 +149,7 @@ var _default = exports.default = {
         }
       }, "file-loader"]
     }, {
-      // Load html files
+      // This loader loads html files
       test: /\.html$/,
       use: [{
         loader: "html-loader",

package/webpack/development.client.babel.js

@@ -11,19 +11,21 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* eslint-disable no-console */
 
 const {
-  DEV_SERVER_HOST_URL
+  WEBPACK_DEV_SERVER_PORT,
+  WEBPACK_DEV_SERVER_HOSTNAME,
+  NODE_SERVER_PORT,
+  NODE_SERVER_HOSTNAME
 } = process.env;
 const catalystConfig = require(_path.default.resolve(__dirname, "..", "config.json"));
 const plugins = require(_path.default.join(process.env.src_path, "webpackConfig.js"));
 const webpackConfig = (0, _webpackMerge.default)(_baseBabel.default, {
   devtool: "inline-source-map",
+  stats: "minimal",
   plugins: [new _reactRefreshWebpackPlugin.default({
     overlay: {
       entry: false
     }
-  }),
-  // TODO added in client and dev build
-  new _miniCssExtractPlugin.default({
+  }), new _miniCssExtractPlugin.default({
     filename: catalystConfig.cssChunkFileName,
     ignoreOrder: true
   }), ...plugins.developmentPlugins].filter(Boolean),
@@ -33,7 +35,7 @@ const webpackConfig = (0, _webpackMerge.default)(_baseBabel.default, {
     splitChunks: {
       cacheGroups: {
         commonVendor: {
-          test: /[\\/]node_modules[\\/](react|react-dom|react-redux|react-router|react-router-dom|redux|redux-thunk|axios|react-loadable-visibility|react-helmet-async|react-google-recaptcha|normalize.css|react-detect-offline|react-side-effect|react-fast-compare|react-async-script|babel|history)[\\/]/,
+          test: /[\\/]node_modules[\\/](react|react-dom|react-redux|react-router|react-router-dom|redux|redux-thunk|axios|react-loadable-visibility|react-helmet-async|react-fast-compare|react-async-script|babel|@loadable\/component|catalyst)[\\/]/,
           name: "commonVendor",
           minSize: 30000
         },
@@ -57,12 +59,14 @@ const webpackConfig = (0, _webpackMerge.default)(_baseBabel.default, {
 });
 console.info("Firing up catalyst dev server...\n");
 let devServer = new _webpackDevServer.default({
-  port: process.env.DEV_SERVER_PORT,
+  port: WEBPACK_DEV_SERVER_PORT,
+  host: WEBPACK_DEV_SERVER_HOSTNAME,
   static: {
     publicPath: webpackConfig.output.publicPath
   },
   hot: true,
   historyApiFallback: true,
+  open: [`http://${NODE_SERVER_HOSTNAME}:${NODE_SERVER_PORT}`],
   headers: {
     "Access-Control-Allow-Origin": "*"
   },
@@ -73,10 +77,9 @@ let devServer = new _webpackDevServer.default({
       warnings: false,
       runtimeErrors: false
     },
-    progress: true,
     reconnect: true
   }
 }, (0, _webpack.default)(webpackConfig));
 devServer.startCallback(() => {
-  console.info(`Webpack dev server mounted at ${DEV_SERVER_HOST_URL}.`);
+  console.info(`Webpack dev server mounted at http://${WEBPACK_DEV_SERVER_HOSTNAME}:${WEBPACK_DEV_SERVER_PORT}.`);
 });

package/webpack/production.client.babel.js

@@ -15,7 +15,6 @@ const {
 } = require("webpack-merge");
 const plugins = require(_path.default.join(process.env.src_path, "webpackConfig.js"));
 const catalystConfig = require(_path.default.resolve(__dirname, "..", "config.json"));
-const isSSR = !!process.env.SSR || false;
 const clientConfig = mergeWithCustomize({
   customizeArray: customizeArray({
     entry: "prepend",
@@ -36,7 +35,7 @@ const clientConfig = mergeWithCustomize({
       cacheGroups: {
         commonVendor: {
           chunks: "all",
-          test: /[\\/]node_modules[\\/](react|react-dom|react-redux|react-router|react-router-dom|redux|redux-thunk|axios|react-loadable-visibility|react-helmet-async|react-google-recaptcha|normalize.css|react-detect-offline|react-side-effect|react-fast-compare|react-async-script|babel|history|@tata1mg|@loadable\/component|framer-motion|pwa|)[\\/]/,
+          test: /[\\/]node_modules[\\/](react|react-dom|react-redux|react-router|react-router-dom|redux|redux-thunk|axios|react-loadable-visibility|react-helmet-async|react-fast-compare|react-async-script|babel|@loadable\/component|catalyst)[\\/]/,
           name: "commonVendor",
           minSize: 400000,
           maxSize: 400000

package/webpack/production.ssr.babel.js

@@ -36,7 +36,7 @@ const ssrConfig = mergeWithCustomize({
       name: false
     }
   },
-  plugins: [...plugins.ssrPrugins],
+  plugins: [...plugins.ssrPlugins],
   target: "node",
   entry: {
     handler: _path.default.resolve(__dirname, "..", "./server/renderer/handler.js")
@@ -52,8 +52,8 @@ const ssrConfig = mergeWithCustomize({
     modulesDir: _path.default.join(rootWorkspacePath.path, "./node_modules")
   })],
   output: {
-    path: _path.default.join(process.env.src_path, process.env.OUTPUT_PATH, "renderer"),
-    chunkFilename: catalystConfig.chunkFileNameDev,
+    path: _path.default.join(process.env.src_path, process.env.BUILD_OUTPUT_PATH, "/renderer"),
+    chunkFilename: catalystConfig.chunkFileNameProd,
     filename: "handler.js",
     libraryTarget: "commonjs"
   }

package/webpack/scssParams.js

@@ -3,29 +3,33 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.urlFor = exports.fontUrl = void 0;
+exports.imageUrl = exports.fontUrl = void 0;
 /**
  * @description generate assets url according to enviorment
  * @returns returns path required for loading assets according to enviorment
-*/
-const urlFor = () => {
-  const isDev = process.env.NODE_ENV !== "production",
-    isLocalBuild = process.env.BUILD_ENV === "localBuild";
-  const localPath = JSON.stringify(`${process.env.SERVER_PATH + process.env.LOCAL_ASSET_PATH}`);
-  const cdnPath = JSON.stringify(`${process.env.PUBLIC_ASSET_PATH}images/`);
-  return isDev || isLocalBuild ? localPath : cdnPath;
+ */
+const imageUrl = () => {
+  const {
+    PUBLIC_STATIC_ASSET_URL,
+    PUBLIC_STATIC_ASSET_PATH
+  } = process.env;
+  let publicPath = `${PUBLIC_STATIC_ASSET_URL}${PUBLIC_STATIC_ASSET_PATH}`;
+  const imagePath = JSON.stringify(`${publicPath}images/`);
+  return imagePath;
 };
 
 /**
  * @description generate assets font url according to enviorment
  * @returns returns path required for loading fonts according to enviorment
-*/
-exports.urlFor = urlFor;
+ */
+exports.imageUrl = imageUrl;
 const fontUrl = () => {
-  const isDev = process.env.NODE_ENV !== "production",
-    isLocalBuild = process.env.BUILD_ENV === "localBuild";
-  const localPath = JSON.stringify(`${process.env.SERVER_PATH + process.env.LOCAL_ASSET_PATH}`);
-  const cdnPath = JSON.stringify(`${process.env.PUBLIC_ASSET_PATH}fonts/`);
-  return isDev || isLocalBuild ? localPath : cdnPath;
+  const {
+    PUBLIC_STATIC_ASSET_URL,
+    PUBLIC_STATIC_ASSET_PATH
+  } = process.env;
+  let publicPath = `${PUBLIC_STATIC_ASSET_URL}${PUBLIC_STATIC_ASSET_PATH}`;
+  const fontPath = JSON.stringify(`${publicPath}fonts/`);
+  return fontPath;
 };
 exports.fontUrl = fontUrl;

package/.prettierignore

@@ -1,2 +0,0 @@
-**/*.html
-

package/.prettierrc.json

@@ -1,7 +0,0 @@
-{
-    "trailingComma": "es5",
-    "tabWidth": 4,
-    "semi": false,
-    "arrowParens": "always",
-    "printWidth": 110
-}

package/checkVersion.js

@@ -1,3 +0,0 @@
-if(process.versions.node.split(".")[0]<20){
-    console.error('\x1b[31m%s\x1b[0m', 'use node version >=20');
-}

package/config/config.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = exports.default = {
-  "S3_BUCKET": "stagassets.1mg.com",
-  "S3_FOLDER": "pwa-app",
-  "CDN_ASSET_PATH": "https://stagstatic.1mg.com",
-  "APPLICATION_PORT": "3005",
-  "APPLICATION_BASE_URL": "http://localhost:3005",
-  "SERVER_PATH": "http://localhost:3005",
-  "OUTPUT_PATH": "build",
-  "PUBLIC_OUTPUT_PATH": "build/public",
-  "PUBLIC_ASSET_PATH": "http://localhost:3006/assets/",
-  "LOCAL_ASSET_PATH": "/assets/",
-  "EXTERNAL_BASE_URL": "http://localhost:3005",
-  "DEV_SERVER_PORT": 3006,
-  "DEV_SERVER_HOSTNAME": "localhost",
-  "DEV_SERVER_HOST_URL": "http://localhost:3006",
-  "ENV_NAME": "local",
-  "BUILD_ENV": ""
-};