@evershop/evershop 1.0.0-beta

package/bin/lib/watch/watchMR.js

@@ -0,0 +1,90 @@
+const chokidar = require('chokidar');
+const { existsSync } = require('fs');
+const { resolve } = require('path');
+const { CONSTANTS } = require('../../../src/lib/helpers');
+const { Handler } = require('../../../src/lib/middleware/Handler');
+const { updateApp } = require('../startUp');
+const { broadcash } = require('./broadcash');
+const { red } = require('kleur');
+
+function watchMR() {
+  const watcher = chokidar.watch(resolve(CONSTANTS.ROOTPATH, 'extensions/*/controllers/**'), {
+    //ignored: /node_modules[\\/]/,
+    ignoreInitial: true,
+    persistent: true
+  });
+  watcher.add(resolve(CONSTANTS.ROOTPATH, 'extensions/*/apiControllers/**'))
+  if (existsSync(resolve(CONSTANTS.ROOTPATH, 'packages'))) {
+    watcher.add(resolve(CONSTANTS.ROOTPATH, 'packages/evershop/src/modules/*/controllers/**'))
+    watcher.add(resolve(CONSTANTS.ROOTPATH, 'packages/evershop/src/modules/*/apiControllers/**'))
+  }
+  watcher.on('change', (path) => {
+    console.log('Middleware updated', path);
+
+    if (!path.endsWith('.js')) {
+      return
+    }
+    delete require.cache[require.resolve(resolve(CONSTANTS.ROOTPATH, path))];
+    broadcash();
+  });
+
+  watcher.on('unlink', (path) => {
+    if (!path.endsWith('.js')) {
+      return
+    }
+    console.log('Middleware removed', path);
+    Handler.removeMiddleware(resolve(CONSTANTS.ROOTPATH, path));
+    broadcash();
+  });
+
+  watcher.on('add', (path) => {
+    if (!path.endsWith('.js')) {
+      return
+    }
+    console.log('Middleware added', path);
+    try {
+      Handler.addMiddlewareFromPath(resolve(CONSTANTS.ROOTPATH, path));
+      broadcash();
+    } catch (e) {
+      console.log(red(`Hot Reload Error: ${e.message}`));
+    }
+  });
+
+  /** Implement routing update*/
+  watcher.on('change', (path) => {
+    if (!path.endsWith('route')) {
+      return
+    }
+    console.log('Route updated', path);
+    updateApp(broadcash);
+  });
+
+  watcher.on('unlink', (path) => {
+    if (!path.endsWith('route')) {
+      return
+    }
+    console.log('Route removed', path);
+    broadcash();
+  });
+
+  watcher.on('add', (path) => {
+    if (!path.endsWith('route')) {
+      return
+    }
+    console.log('Route added', path);
+    updateApp(broadcash);
+  });
+
+  watcher.on('unlinkDir', (path) => {
+    console.log('Dir removed', path);
+    broadcash();
+  });
+
+  watcher.on('addDir', (path) => {
+    console.log('Dir added', path);
+    updateApp(broadcash);
+  });
+
+}
+
+module.exports.watchMR = watchMR;

package/bin/lib/watch/watchPage.js

@@ -0,0 +1,10 @@
+const touch = require("touch");
+const { resolve } = require('path');
+const { CONSTANTS } = require("../../../src/lib/helpers");
+
+module.exports.watchPage = function (event, path) {
+  if (event === 'add') {
+    // TODO: Touching this file will trigger a rebuild of all pages. This is not optimized
+    touch(resolve(CONSTANTS.LIBPATH, 'components/react/client/Index.js'));
+  }
+}

package/bin/lib/watch/watchSchema.js

@@ -0,0 +1,20 @@
+const { normalize, resolve } = require('path');
+const { CONSTANTS } = require("../../../src/lib/helpers");
+const { broadcash } = require('./broadcash');
+
+module.exports.watchSchema = function (event, path) {
+  // Check if path include graphql/types
+  if (!path.includes(normalize('graphql/types'))) {
+    return;
+  }
+  console.log(event)
+  if (event === 'change') {
+    console.log('updating', path);
+    delete require.cache[require.resolve(path)];
+  }
+  console.log('cleaning require cache');
+  // Delete buildSchema.js cache
+  delete require.cache[require.resolve(resolve(CONSTANTS.MOLDULESPATH, 'graphql/services/buildSchema'))];
+  require(resolve(CONSTANTS.MOLDULESPATH, 'graphql/services/buildSchema'));
+  broadcash();
+}

package/bin/start/index.js

@@ -0,0 +1,5 @@
+const { start } = require('../lib/startUp');
+
+(async () => {
+  await start();
+})();

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@evershop/evershop",
+  "version": "1.0.0-beta",
+  "description": "The React Ecommerce platform. Built with React and MySQL. Open-source and free. Fast and customizable.",
+  "files": [
+    "bin",
+    "src"
+  ],
+  "bin": {
+    "evershop": "./bin/evershop"
+  },
+  "scripts": {
+    "prepublishOnly": "node prepublish.js",
+    "prepack": "node prepublish.js",
+    "dev": "evershop dev",
+    "build": "evershop build",
+    "start": "evershop start",
+    "test": "jest"
+  },
+  "author": "The Nguyen (https://evershop.io)",
+  "license": "GNU GENERAL PUBLIC LICENSE 3.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/evershopcommerce/evershop.git"
+  },
+  "keywords": [
+    "ecommerce",
+    "shopping cart",
+    "cart"
+  ],
+  "bugs": {
+    "url": "https://github.com/evershopcommerce/evershop/issues"
+  },
+  "homepage": "https://github.com/evershopcommerce/evershop",
+  "dependencies": {
+    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-react": "^7.16.0",
+    "@evershop/mysql-query-builder": "^1.3.7",
+    "@graphql-tools/load-files": "^6.6.1",
+    "@graphql-tools/merge": "^8.3.5",
+    "@graphql-tools/schema": "^9.0.3",
+    "@hapi/topo": "^5.0.0",
+    "@heroicons/react": "^1.0.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.8",
+    "@shopify/draggable": "^1.0.0-beta.8",
+    "@stripe/react-stripe-js": "^1.5.0",
+    "@stripe/stripe-js": "^1.18.0",
+    "axios": "^0.21.1",
+    "babel-loader": "^8.2.3",
+    "bcrypt": "^5.0.1",
+    "body-parser": "^1.20.0",
+    "boxen": "^5.1.2",
+    "chokidar": "^3.5.3",
+    "clean-css": "^5.3.1",
+    "config": "^3.3.6",
+    "cookie-parser": "^1.4.6",
+    "css-loader": "^6.7.1",
+    "dayjs": "^1.10.6",
+    "debug": "^4.3.2",
+    "dependency-tree": "^8.1.2",
+    "enquirer": "^2.3.6",
+    "express": "^4.18.1",
+    "express-session": "^1.17.1",
+    "flatpickr": "^4.6.9",
+    "graphql": "^16.6.0",
+    "graphql-tag": "^2.12.6",
+    "html-webpack-harddisk-plugin": "^2.0.0",
+    "html-webpack-plugin": "^5.5.0",
+    "immer": "^9.0.3",
+    "is-object": "^1.0.2",
+    "json5": "^2.2.1",
+    "jsonwebtoken": "^8.5.1",
+    "kleur": "3.0.3",
+    "luxon": "^2.0.2",
+    "mini-css-extract-plugin": "^2.6.1",
+    "multer": "^1.4.2",
+    "mysql": "^2.18.1",
+    "node-sass": "^7.0.1",
+    "npm": "^8.18.0",
+    "ora": "^5.4.1",
+    "postcss": "^8.4.18",
+    "postcss-loader": "^7.0.1",
+    "postcss-preset-env": "^7.8.2",
+    "promise.allsettled": "^1.0.4",
+    "prop-types": "^15.8.1",
+    "pubsub-js": "^1.9.3",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-select": "^5.4.0",
+    "react-toastify": "^6.2.0",
+    "recharts": "^2.0.9",
+    "sass": "^1.53.0",
+    "sass-loader": "^13.0.2",
+    "semver": "^7.3.5",
+    "session-file-store": "^1.5.0",
+    "sharp": "^0.30.5",
+    "stripe": "^8.176.0",
+    "style-loader": "^3.3.1",
+    "tailwindcss": "^3.2.1",
+    "terser-webpack-plugin": "^5.3.3",
+    "touch": "^3.1.0",
+    "uniqid": "^5.3.0",
+    "urql": "^3.0.3",
+    "uuid": "^9.0.0",
+    "webpack": "^5.72.1",
+    "webpack-dev-middleware": "^5.3.3",
+    "webpack-hot-middleware": "^2.25.1",
+    "webpackbar": "^5.0.2",
+    "winston": "^3.3.3",
+    "yargs": "^16.2.0",
+    "zero-decimal-currencies": "^1.2.0"
+  }
+}

package/src/lib/babel/config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  parserOpts: { allowReturnOutsideFunction: true },
+  presets: [
+    '@babel/preset-react',
+    [
+      "@babel/preset-env",
+      {
+        "exclude": ["@babel/plugin-transform-regenerator", "@babel/plugin-transform-async-to-generator"]
+      }
+    ]
+  ],
+  ignore: ['node_modules']
+}

package/src/lib/babel/index.js

@@ -0,0 +1,2 @@
+const config = require('./config');
+require('@babel/register')(config);

package/src/lib/bundlee.js

@@ -0,0 +1,175 @@
+/* eslint-disable no-underscore-dangle */
+const { inspect } = require('util');
+const { writeFile, mkdir, rmdir } = require('fs/promises');
+const { existsSync, statSync, readdirSync } = require('fs');
+const path = require('path');
+const sass = require('node-sass');
+const CleanCss = require('clean-css');
+const { CONSTANTS } = require('./helpers');
+const { buildUrl } = require('./router/buildUrl');
+const { getComponentsByRoute } = require('./componee/getComponentByRoute');
+const { createWebpack } = require('./webpack/webpack');
+
+module.exports = async (request, response, route) => {
+  /** Only create bundle file for GET and "text/html" route */
+  if (route.isApi === true) {
+    return;
+  }
+
+  if (['adminStaticAsset', 'staticAsset'].includes(route.id)) {
+    return;
+  }
+
+  const scopePath = route.isAdmin === true ? `./admin/${route.id}` : `./frontStore/${route.id}`;
+  response.context.componentsPath = `${scopePath}/components.js`;
+  /** This middleware only required for development */
+  if (process.env.NODE_ENV === 'production') {
+    let hash;
+    if (route.isAdmin === true) {
+      const bundles = readdirSync(path.resolve(CONSTANTS.ROOTPATH, './.evershop/build/admin', route.id), { withFileTypes: true })
+        .filter((dirent) => dirent.isFile())
+        .map((dirent) => dirent.name);
+      bundles.forEach((b) => {
+        if (b.endsWith('.css')) {
+          hash = b.substring(0, b.indexOf('.css'));
+        }
+      });
+      response.context.bundleJs = buildUrl('adminStaticAsset', [`${scopePath}/${hash}.js`]);
+      response.context.bundleCss = buildUrl('adminStaticAsset', [`${scopePath}/${hash}.css`]);
+    } else {
+      const bundles = readdirSync(path.resolve(CONSTANTS.ROOTPATH, './.evershop/build/frontStore', route.id), { withFileTypes: true })
+        .filter((dirent) => dirent.isFile())
+        .map((dirent) => dirent.name);
+      bundles.forEach((b) => {
+        if (b.endsWith('.css')) {
+          hash = b.substring(0, b.indexOf('.css'));
+        }
+      });
+      response.context.bundleJs = buildUrl('staticAsset', [`${scopePath}/${hash}.js`]);
+      response.context.bundleCss = buildUrl('staticAsset', [`${scopePath}/${hash}.css`]);
+    }
+    return;
+  }
+
+  if (route.__BUILDREQUIRED__ === false) {
+    if (request.isAdmin === true) {
+      response.context.bundleJs = buildUrl('adminStaticAsset', [`${scopePath}/${route.__BUNDLEHASH__}.js`]);
+      response.context.bundleCss = buildUrl('adminStaticAsset', [`${scopePath}/${route.__BUNDLEHASH__}.css`]);
+    } else {
+      response.context.bundleJs = buildUrl('staticAsset', [`${scopePath}/${route.__BUNDLEHASH__}.js`]);
+      response.context.bundleCss = buildUrl('staticAsset', [`${scopePath}/${route.__BUNDLEHASH__}.css`]);
+    }
+    return;
+  }
+  if (route.__BUILDING__ === true) {
+    await new Promise((resolve, reject) => {
+      let timer = 0;
+      // eslint-disable-next-line no-var
+      var check = setInterval(() => {
+        // We only wait for 1 min maximum for the bundle
+        if (timer > 60000) {
+          clearInterval(check);
+          reject(new Error('Something wrong with bundling'));
+        }
+        if (route.__BUNDLEHASH__) {
+          clearInterval(check);
+          if (request.isAdmin === true) {
+            response.context.bundleJs = buildUrl('adminStaticAsset', [`${scopePath}/${route.__BUNDLEHASH__}.js`]);
+            response.context.bundleCss = buildUrl('adminStaticAsset', [`${scopePath}/${route.__BUNDLEHASH__}.css`]);
+          } else {
+            response.context.bundleJs = buildUrl('staticAsset', [`${scopePath}/${route.__BUNDLEHASH__}.js`]);
+            response.context.bundleCss = buildUrl('staticAsset', [`${scopePath}/${route.__BUNDLEHASH__}.css`]);
+          }
+          resolve(1);
+        }
+        timer += 200;
+      }, 200);
+    });
+    return;
+  }
+  // eslint-disable-next-line no-param-reassign
+  route.__BUILDING__ = true;
+
+  if (existsSync(path.resolve(CONSTANTS.ROOTPATH, './.evershop/build', scopePath)))
+    await rmdir(path.resolve(CONSTANTS.ROOTPATH, './.evershop/build', scopePath), { recursive: true });
+
+  const components = JSON.parse(JSON.stringify(getComponentsByRoute(route.id))) || {};
+  Object.keys(components).forEach((area) => {
+    Object.keys(components[area]).forEach((id) => {
+      components[area][id].component = `---require("${components[area][id].source}")---`;
+      delete components[area][id].source;
+    });
+  });
+  const content = `var components = module.exports = exports = ${inspect(components, { depth: 5 }).replace(/'---/g, '').replace(/---'/g, '')}`;
+  await mkdir(path.resolve(CONSTANTS.ROOTPATH, './.evershop/build', scopePath), { recursive: true });
+  await writeFile(path.resolve(CONSTANTS.ROOTPATH, '.evershop/build', scopePath, 'components.js'), content);
+
+  // Create a complier object
+  const complier = createWebpack(scopePath);
+
+  // Start bundling css
+  let cssFiles = '';
+  let mTime = new Date('1988-10-08T03:24:00');
+  complier.hooks.afterCompile.tap(
+    'PostCssBundling',
+    (compilation) => {
+      const list = compilation._modules;
+      list.forEach((element) => {
+        if (element.resource && element.resource.endsWith('.js')) {
+          let filePath = element.resource.replace('.js', '.scss');
+          filePath = filePath.split(path.sep).join(path.posix.sep);
+          if (existsSync(filePath)) {
+            cssFiles += `@import '${filePath}';`;
+            const stats = statSync(filePath);
+            if (stats.mtime > mTime) { mTime = stats.mtime; }
+          }
+        }
+      });
+    }
+  );
+  let hash;
+  const webpackPromise = new Promise((resolve, reject) => {
+    complier.run((err, stats) => {
+      if (err) {
+        reject(err);
+      } else if (stats.hasErrors()) {
+        reject(new Error(stats.toString({
+          errorDetails: true,
+          warnings: true
+        })));
+      } else {
+        hash = stats.hash;
+        resolve(stats);
+      }
+    });
+  });
+  await webpackPromise;
+  const cssOutput = new CleanCss({
+    level: {
+      2: {
+        removeDuplicateRules: true // turns on removing duplicate rules
+      }
+    }
+  }).minify(sass.renderSync({
+    data: cssFiles
+  }).css);
+
+  await writeFile(path.resolve(CONSTANTS.ROOTPATH, '.evershop/build', scopePath, `${hash}.css`), cssOutput.styles);
+
+  if (!response.context.bundleJs || route.id === "notFound") {
+    if (request.isAdmin === true) {
+      response.context.bundleJs = buildUrl('adminStaticAsset', [`${scopePath}/${hash}.js`]);
+      response.context.bundleCss = buildUrl('adminStaticAsset', [`${scopePath}/${hash}.css`]);
+    } else {
+      response.context.bundleJs = buildUrl('staticAsset', [`${scopePath}/${hash}.js`]);
+      response.context.bundleCss = buildUrl('staticAsset', [`${scopePath}/${hash}.css`]);
+    }
+  }
+
+  // eslint-disable-next-line no-param-reassign
+  route.__BUILDREQUIRED__ = false;
+  // eslint-disable-next-line no-param-reassign
+  route.__BUNDLEHASH__ = hash;
+  // eslint-disable-next-line no-param-reassign
+  route.__BUILDING__ = false;
+};

package/src/lib/componee/Componee.js

@@ -0,0 +1,154 @@
+const { existsSync } = require('fs');
+const path = require('path');
+const { getEnabledExtensions } = require('../../../bin/extension');
+const { getCoreModules } = require('../../../bin/lib/loadModules');
+const { getAdminRoutes, getFrontStoreRoutes } = require('../router/Router');
+const { assign } = require('../util/assign');
+const isDevelopmentMode = require('../util/isDevelopmentMode');
+const { scanForComponents } = require('./scanForComponents');
+
+class Componee {
+  static components = {
+    frontStore: {},
+    admin: {}
+  }
+
+  static currentScope;
+  static currentModule;
+
+  static componentsByModule = {}
+
+  static addComponent(scope, route, id, areaId, source, props, sortOrder) {
+    const data = {
+      [scope]: {
+        [route]: {
+          [areaId]: {
+            [id]: {
+              id,
+              source,
+              props,
+              sortOrder
+            }
+          }
+        }
+      }
+    };
+    assign(this.components, data);
+  }
+
+  static addComponents(scope, componentObjects) {
+    const routes = scope === 'admin' ? getAdminRoutes() : getFrontStoreRoutes();
+    Object.keys(componentObjects).forEach((key) => {
+      if (!Array.isArray(componentObjects[key])) {
+        throw new TypeError(`Component list under ${key} must be an array.`);
+      }
+      if (key === '*') {
+        routes.forEach((route) => {
+          if (route.method.length === 1 && route.method[0] === 'GET') {
+            componentObjects[key].forEach((c) => {
+              this.addComponent(scope, route.id, c.id, c.areaId, c.source, c.props, c.sortOrder);
+            });
+          }
+        });
+      } else if (/^\*-([a-zA-Z,])+/g.test(key)) {
+        const excepts = key.split('-')[1].split(',');
+        routes.forEach((route) => {
+          if (route.method.length === 1 && route.method[0] === 'GET' && !excepts.includes(route.id)) {
+            componentObjects[key].forEach((c) => {
+              this.addComponent(scope, route.id, c.id, c.areaId, c.source, c.props, c.sortOrder);
+            });
+          }
+        });
+        // eslint-disable-next-line no-useless-escape
+      } else if (/([a-zA-Z\+])/.test(key)) {
+        const list = key.split('+');
+        routes.forEach((route) => {
+          if (route.method.length === 1 && route.method[0] === 'GET' && list.includes(route.id)) {
+            componentObjects[key].forEach((c) => {
+              this.addComponent(scope, route.id, c.id, c.areaId, c.source, c.props, c.sortOrder);
+            });
+          }
+        });
+      }
+    });
+  }
+
+  static loadModuleComponents(module) {
+    const modulePath = module.path;
+    this.currentModule = module.name;
+    this.componentsByModule[modulePath] = {};
+    if (existsSync(path.resolve(modulePath, 'views/frontStore/components.js'))) {
+      this.currentScope = 'frontStore';
+      const components = require(path.resolve(modulePath, 'views/frontStore/components.js'));
+      if (typeof components === 'object' && components !== null) {
+        this.addComponents(this.currentScope, components);
+        if (isDevelopmentMode()) {
+          this.componentsByModule[modulePath][this.currentScope] = components;
+        }
+      }
+    }
+    if (existsSync(path.resolve(modulePath, 'views/admin/components.js'))) {
+      this.currentScope = 'admin';
+      const components = require(path.resolve(modulePath, 'views/admin/components.js'));
+      if (typeof components === 'object' && components !== null) {
+        this.addComponents(this.currentScope, components);
+        if (isDevelopmentMode()) {
+          this.componentsByModule[modulePath][this.currentScope] = components;
+        }
+      }
+    }
+  }
+
+  static loadComponentsByRoute(route) {
+    let components = [];
+    const modules = [...getCoreModules(), ...getEnabledExtensions()];
+    modules.forEach((module) => {
+      const pagePath = route.isAdmin ?
+        path.resolve(module.path, 'pages/admin', route.id) :
+        path.resolve(module.path, 'pages/frontStore', route.id);
+
+      components = [...components, ...scanForComponents(pagePath)];
+    });
+
+    return components;
+  }
+
+  static getComponentsByRoute(routeId) {
+    if (this.components.frontStore[routeId]) {
+      return this.components.frontStore[routeId];
+    } else if (this.components.admin[routeId]) {
+      return this.components.admin[routeId];
+    } else {
+      return null;
+    }
+  };
+
+  static rebuild() {
+    this.components = {
+      frontStore: {},
+      admin: {}
+    };
+
+    Object.keys(this.componentsByModule).forEach((modulePath) => {
+      const siteComponents = this.componentsByModule[modulePath]['frontStore'] || {};
+      const adminComponents = this.componentsByModule[modulePath]['admin'] || {};
+      this.addComponents('frontStore', siteComponents);
+      this.addComponents('admin', adminComponents);
+    });
+  }
+
+  static updateModuleComponents(module) {
+    const modulePath = module.path;
+    if (existsSync(path.resolve(modulePath, 'views/frontStore/components.js'))) {
+      delete require.cache[path.resolve(modulePath, 'views/frontStore/components.js')];
+    }
+    if (existsSync(path.resolve(modulePath, 'views/admin/components.js'))) {
+      delete require.cache[path.resolve(modulePath, 'views/admin/components.js')];
+    }
+    this.loadModuleComponents(module);
+    this.rebuild();
+  }
+}
+
+module.exports = exports;
+exports.Componee = Componee;

package/src/lib/componee/getComponentsByRoute.js

@@ -0,0 +1,69 @@
+const { normalize, resolve, join } = require('path');
+const { existsSync, readdirSync } = require('fs');
+const { getEnabledExtensions } = require('../../../bin/extension');
+const { getCoreModules } = require('../../../bin/lib/loadModules');
+const { scanForComponents } = require('./scanForComponents');
+const { getConfig } = require('../util/getConfig');
+const { CONSTANTS } = require('../helpers');
+
+// eslint-disable-next-line no-multi-assign
+module.exports = exports = {};
+
+exports.getComponentsByRoute = function getComponentsByRoute(route) {
+  let components = [];
+  const modules = [...getCoreModules(), ...getEnabledExtensions()];
+
+  modules.forEach((module) => {
+    // Scan for 'all' components
+    const rootPath = route.isAdmin ? resolve(module.path, 'pages/admin') : resolve(module.path, 'pages/frontStore');
+    // Get all folders in the rootPath
+    const pages = existsSync(rootPath) ? readdirSync(rootPath, { withFileTypes: true })
+      .filter((dirent) => dirent.isDirectory())
+      .map((dirent) => dirent.name) : [];
+
+    pages.forEach((page) => {
+      if (page === 'all' || page === route.id) {
+        components = [...components, ...scanForComponents(resolve(rootPath, page))];
+      }
+      // Check if page include `+ page` or `page+` in the name
+      if (page.includes('+') && page.includes(route.id)) {
+        components = [...components, ...scanForComponents(resolve(rootPath, page))];
+      }
+    });
+  });
+
+  if (route.isAdmin) {
+    return components; // We currently don't have any admin theme
+  } else {
+    // Get current theme
+    const theme = getConfig('system.theme');
+    if (!theme) {
+      return components;
+    }
+
+    const themePath = resolve(CONSTANTS.THEMEPATH, theme);
+    // Check if the path is exists
+    if (existsSync(themePath)) {
+      // Get all theme components inside 'theme/pages' folder
+      let themeComponents = [];
+      if (existsSync(resolve(themePath, 'pages', route.id))) {
+        themeComponents = scanForComponents(resolve(themePath, 'pages', route.id));
+      }
+      return themeComponents.concat(components.map((component) => {
+        // Get the subpath of `moduleName/pages/frontStore/{component.js}`;
+        const splits = component.split(normalize('/pages/frontStore'));
+        // Get the moduleName
+        const moduleName = splits[0].split(normalize('/')).pop();
+        const subPath = splits[1];
+        const fullPath = join(themePath, moduleName, 'pages', subPath);
+        if (existsSync(fullPath)) {
+          return fullPath;
+        } else {
+          return component;
+        }
+      }));
+    } else {
+      return components;
+    }
+  }
+};

package/src/lib/componee/scanForComponents.js

@@ -0,0 +1,14 @@
+/* eslint-disable global-require */
+const { readdirSync } = require('fs');
+const { resolve } = require('path');
+
+// eslint-disable-next-line no-multi-assign
+module.exports = exports = {};
+
+exports.scanForComponents = function scanForComponents(path) {
+  return readdirSync(resolve(path), { withFileTypes: true })
+    .filter((dirent) => dirent.isFile() && /.js$/.test(dirent.name) && /^[A-Z]/.test(dirent.name[0]))
+    .map((dirent) => {
+      return resolve(path, dirent.name);
+    });
+};