@evershop/evershop 2.1.0 → 2.1.2

package/src/bin/lib/{addDefaultMiddlewareFuncs.js → addDefaultMiddlewareFuncs.ts}

@@ -1,13 +1,8 @@
-import path from 'path';
 import { select } from '@evershop/postgres-query-builder';
 import sessionStorage from 'connect-pg-simple';
 import cookieParser from 'cookie-parser';
 import session from 'express-session';
 import pathToRegexp from 'path-to-regexp';
-import webpack from 'webpack';
-import middleware from 'webpack-dev-middleware';
-import webpackHotMiddleware from 'webpack-hot-middleware';
-import { CONSTANTS } from '../../lib/helpers.js';
 import { translate } from '../../lib/locale/translate/translate.js';
 import { debug, warning } from '../../lib/log/logger.js';
 import publicStatic from '../../lib/middlewares/publicStatic.js';
@@ -15,18 +10,13 @@ import themePublicStatic from '../../lib/middlewares/themePublicStatic.js';
 import { pool } from '../../lib/postgres/connection.js';
 import { getRoutes } from '../../lib/router/Router.js';
 import { getConfig } from '../../lib/util/getConfig.js';
-import { getEnabledTheme } from '../../lib/util/getEnabledTheme.js';
 import isDevelopmentMode from '../../lib/util/isDevelopmentMode.js';
 import isProductionMode from '../../lib/util/isProductionMode.js';
-import { createConfigClient } from '../../lib/webpack/dev/createConfigClient.js';
-import { isBuildRequired } from '../../lib/webpack/isBuildRequired.js';
-import { getTailwindConfig } from '../../lib/webpack/util/getTailwindConfig.js';
 import { getAdminSessionCookieName } from '../../modules/auth/services/getAdminSessionCookieName.js';
 import { getCookieSecret } from '../../modules/auth/services/getCookieSecret.js';
 import { getFrontStoreSessionCookieName } from '../../modules/auth/services/getFrontStoreSessionCookieName.js';
 import { setPageMetaInfo } from '../../modules/cms/services/pageMetaInfo.js';
-import { getEnabledExtensions } from '../extension/index.js';
-import { findRoute } from './findRoute.js';
+import { getDevMiddleware, getHotMiddleware } from './devEnvHelper.js';
 
 export function addDefaultMiddlewareFuncs(app) {
   app.use((request, response, next) => {
@@ -70,11 +60,11 @@ export function addDefaultMiddlewareFuncs(app) {
     },
     resave: getConfig('system.session.resave', false),
     saveUninitialized: getConfig('system.session.saveUninitialized', true)
-  };
+  } as session.SessionOptions;
 
   if (isProductionMode()) {
     app.set('trust proxy', 1);
-    sess.cookie.secure = false;
+    sess.cookie!.secure = false;
   }
 
   const adminSessionMiddleware = session({
@@ -156,7 +146,7 @@ export function addDefaultMiddlewareFuncs(app) {
         if (match) {
           request.locals = request.locals || {};
           request.locals.customParams = {};
-          const keys = [];
+          const keys: any[] = [];
           pathToRegexp(r.path, keys);
           keys.forEach((key, index) => {
             request.locals.customParams[key.name] = match[index + 1];
@@ -177,149 +167,60 @@ export function addDefaultMiddlewareFuncs(app) {
     }
   });
 
-  app.use(async (request, response, next) => {
-    if (!isDevelopmentMode()) {
-      return next();
-    }
-
-    const routes = getRoutes();
-    const route = findRoute(request);
-    request.locals = request.locals || {};
-    request.locals.webpackMatchedRoute = route;
-    if (!route || !isBuildRequired(route)) {
-      next();
-    } else {
-      const adminTailwindConfig = await getTailwindConfig(true);
-      const frontStoreTailwindConfig = await getTailwindConfig(false);
-      const enabledExtensions = getEnabledExtensions();
-      adminTailwindConfig.content = frontStoreTailwindConfig.content = [
-        // All file in packages/evershop/dist and name is capitalized
-        path.join(
-          CONSTANTS.ROOTPATH,
-          'packages',
-          'evershop',
-          'dist',
-          '**',
-          '[A-Z]*.js'
-        ),
-        // All file in node_modules/@evershop/evershop/dist and name is capitalized
-        path.join(
-          CONSTANTS.ROOTPATH,
-          'node_modules',
-          '@evershop',
-          'evershop',
-          'dist',
-          '**',
-          '[A-Z]*.js'
-        ),
-        ...enabledExtensions.map((extension) =>
-          path.join(extension.path, '**', '[A-Z]*.js')
-        )
-      ];
-      const theme = getEnabledTheme();
-      if (theme) {
-        frontStoreTailwindConfig.content.push(
-          path.join(theme.path, 'dist', '**', '[A-Z]*.js')
-        );
-      }
-      if (!route.webpackCompiler) {
-        route.webpackCompiler = webpack(
-          createConfigClient(
-            route,
-            route.isAdmin ? adminTailwindConfig : frontStoreTailwindConfig
-          )
-        );
-      }
-      const { webpackCompiler } = route;
-      let middlewareFunc;
-      if (!route.webpackMiddleware) {
-        middlewareFunc = route.webpackMiddleware = middleware(webpackCompiler, {
-          serverSideRender: true,
-          publicPath: '/',
-          stats: 'none'
+  if (isDevelopmentMode()) {
+    // Admin webpack dev middleware - only for /backend/* paths
+    app.use((request, response, next) => {
+      if (request.path.startsWith('/backend/')) {
+        const adminDevMiddleware = getDevMiddleware(true);
+        adminDevMiddleware.waitUntilValid(() => {
+          const { stats } = adminDevMiddleware.context;
+          if (stats) {
+            response.locals.jsonWebpackStats = stats.toJson();
+          }
         });
-        middlewareFunc.context.logger.info = () => {};
+        adminDevMiddleware(request, response, next);
       } else {
-        middlewareFunc = route.webpackMiddleware;
+        next();
       }
-      middlewareFunc.waitUntilValid(() => {
-        const { stats } = middlewareFunc.context;
-        const jsonWebpackStats = stats.toJson();
-        response.locals.jsonWebpackStats = jsonWebpackStats;
-      });
-      // We need to run build for notFound route
-      const notFoundRoute = routes.find((r) => r.id === 'notFound');
-      if (!notFoundRoute.webpackCompiler) {
-        notFoundRoute.webpackCompiler = webpack(
-          createConfigClient(notFoundRoute, frontStoreTailwindConfig)
-        );
+    });
+
+    app.use((request, response, next) => {
+      if (request.path.startsWith('/__webpack_hmr_admin')) {
+        const adminHotMiddleware = getHotMiddleware(true);
+        adminHotMiddleware(request, response, next);
+      } else {
+        next();
       }
-      const notFoundWebpackCompiler = notFoundRoute.webpackCompiler;
-      let notFoundMiddlewareFunc;
-      if (!notFoundRoute.webpackMiddleware) {
-        notFoundMiddlewareFunc = notFoundRoute.webpackMiddleware = middleware(
-          notFoundWebpackCompiler,
-          {
-            serverSideRender: true,
-            publicPath: '/',
-            stats: 'none'
+    });
+
+    // Frontstore webpack dev middleware - for all other paths
+    app.use((request, response, next) => {
+      if (
+        !request.path.startsWith('/backend/') &&
+        !request.path.startsWith('/__webpack_hmr_admin')
+      ) {
+        const frontstoreDevMiddleware = getDevMiddleware(false);
+        frontstoreDevMiddleware.waitUntilValid(() => {
+          const { stats } = frontstoreDevMiddleware.context;
+          if (stats) {
+            response.locals.jsonWebpackStats = stats.toJson();
           }
-        );
-        notFoundMiddlewareFunc.context.logger.info = () => {};
+        });
+        frontstoreDevMiddleware(request, response, next);
       } else {
-        notFoundMiddlewareFunc = notFoundRoute.webpackMiddleware;
+        next();
       }
+    });
 
-      // We need to run build for adminNotFound route
-      const adminNotFoundRoute = routes.find((r) => r.id === 'adminNotFound');
-      if (!adminNotFoundRoute.webpackCompiler) {
-        adminNotFoundRoute.webpackCompiler = webpack(
-          createConfigClient(adminNotFoundRoute, adminTailwindConfig)
-        );
-      }
-      const adminNotFoundWebpackCompiler = adminNotFoundRoute.webpackCompiler;
-      let adminNotFoundMiddlewareFunc;
-      if (!adminNotFoundRoute.webpackMiddleware) {
-        adminNotFoundMiddlewareFunc = adminNotFoundRoute.webpackMiddleware =
-          middleware(adminNotFoundWebpackCompiler, {
-            serverSideRender: true,
-            publicPath: '/',
-            stats: 'none'
-          });
-        adminNotFoundMiddlewareFunc.context.logger.info = () => {};
+    app.use((request, response, next) => {
+      if (request.path.startsWith('/__webpack_hmr_frontstore')) {
+        const frontstoreHotMiddleware = getHotMiddleware(false);
+        frontstoreHotMiddleware(request, response, next);
       } else {
-        adminNotFoundMiddlewareFunc = adminNotFoundRoute.webpackMiddleware;
+        next();
       }
-
-      middlewareFunc(request, response, () => {
-        notFoundMiddlewareFunc(request, response, () => {
-          adminNotFoundMiddlewareFunc(request, response, next);
-        });
-      });
-    }
-  });
-  app.use((request, response, next) => {
-    if (!isDevelopmentMode()) {
-      return next();
-    }
-    const routes = getRoutes();
-    const route = findRoute(request);
-    request.currentRoute = route;
-    if (!isBuildRequired(route)) {
-      return next();
-    }
-    if (!route.hotMiddleware) {
-      const { webpackCompiler } = route;
-      const hotMiddleware = webpackHotMiddleware(webpackCompiler, {
-        path: `/eHot/${route.id}`
-      });
-      route.hotMiddleware = hotMiddleware;
-    }
-    return route.hotMiddleware(request, response, () => {
-      next();
     });
-  });
-
+  }
   /** 404 Not Found handle */
   app.use((request, response, next) => {
     if (!request.currentRoute) {

package/src/bin/lib/bootstrap/bootstrap.ts

@@ -27,6 +27,7 @@ export const loadBootstrapScript = async function loadBootstrapScript(
   if (!existsSync(filePath)) {
     return;
   }
+
   // Convert path to a URL
   const bootstrapPath = pathToFileURL(filePath).toString();
   const bootstrap = (await import(bootstrapPath)) as BootstrapModule;

package/src/bin/lib/buildEntry.js

@@ -7,8 +7,8 @@ import JSON5 from 'json5';
 import { getComponentsByRoute } from '../../lib/componee/getComponentsByRoute.js';
 import { CONSTANTS } from '../../lib/helpers.js';
 import { error } from '../../lib/log/logger.js';
+import { generateComponentKey } from '../../lib/util/keyGenerator.js';
 import { getRouteBuildPath } from '../../lib/webpack/getRouteBuildPath.js';
-import { generateComponentKey } from '../../lib/webpack/util/keyGenerator.js';
 import { parseGraphql } from '../../lib/webpack/util/parseGraphql.js';
 import { getEnabledWidgets } from '../../lib/widget/widgetManager.js';
 /**
@@ -71,12 +71,17 @@ export async function buildEntry(routes, clientOnly = false) {
         const url = route.isAdmin
           ? pathToFileURL(widget.settingComponent).toString()
           : pathToFileURL(widget.component).toString();
-        imports.push(`import ${widget.type} from '${url}';`);
-        areas['*'][widget.type] = {
-          id: widget.type,
+        const id = generateComponentKey(
+          route.isAdmin
+            ? `admin_widget_${widget.type}`
+            : `widget_${widget.type}`
+        );
+        imports.push(`import ${id} from '${url}';`);
+        areas['*'][id] = {
+          id,
           sortOrder: widget.sortOrder || 0,
           component: {
-            default: `---${widget.type}---`
+            default: `---${id}---`
           }
         };
       });

package/src/bin/lib/devEnvHelper.ts

@@ -0,0 +1,59 @@
+import webpack from 'webpack';
+import middleware from 'webpack-dev-middleware';
+import webpackHotMiddleware from 'webpack-hot-middleware';
+import { createConfigClient } from '../../lib/webpack/dev/createConfigClient.js';
+
+type DevConfig = {
+  admin: {
+    compiler?: webpack.Compiler;
+    devMiddleware?: ReturnType<typeof middleware>;
+    hotMiddleware?: ReturnType<typeof webpackHotMiddleware>;
+  };
+  frontStore: {
+    compiler?: webpack.Compiler | null;
+    devMiddleware?: ReturnType<typeof middleware> | null;
+    hotMiddleware?: ReturnType<typeof webpackHotMiddleware> | null;
+  };
+};
+
+const webpackConfig = {
+  admin: {},
+  frontStore: {}
+} as DevConfig;
+
+function getWebpackCompiler(isAdmin: boolean) {
+  const area = isAdmin ? 'admin' : 'frontStore';
+  if (!webpackConfig[area].compiler) {
+    webpackConfig[area].compiler = webpack(createConfigClient(isAdmin) as any);
+  }
+  return webpackConfig[area].compiler;
+}
+
+function getDevMiddleware(isAdmin: boolean) {
+  const area = isAdmin ? 'admin' : 'frontStore';
+  if (!webpackConfig[area].devMiddleware) {
+    const compiler = getWebpackCompiler(isAdmin);
+    const devMiddleware = middleware(compiler, {
+      serverSideRender: true,
+      publicPath: isAdmin ? '/backend/' : '/',
+      stats: 'none'
+    });
+    devMiddleware.context.logger.info = () => {};
+    webpackConfig[area].devMiddleware = devMiddleware;
+  }
+  return webpackConfig[area].devMiddleware;
+}
+
+function getHotMiddleware(isAdmin: boolean) {
+  const area = isAdmin ? 'admin' : 'frontStore';
+  if (!webpackConfig[area].hotMiddleware) {
+    const compiler = getWebpackCompiler(isAdmin);
+    const hotMiddleware = webpackHotMiddleware(compiler, {
+      path: isAdmin ? `/__webpack_hmr_admin` : `/__webpack_hmr_frontstore`
+    });
+    webpackConfig[area].hotMiddleware = hotMiddleware;
+  }
+  return webpackConfig[area].hotMiddleware;
+}
+
+export { getWebpackCompiler, getDevMiddleware, getHotMiddleware };

package/src/bin/theme/twizz.ts

@@ -255,7 +255,7 @@ async function getOverrideCandidates(): Promise<string[]> {
 }
 
 function getCurrentTheme(): string {
-  const theme = getConfig<string>('system.theme');
+  const theme = getConfig('system.theme');
   if (theme) {
     return theme;
   } else {

package/src/components/admin/AttributeGroupSelector.tsx

@@ -1,9 +1,10 @@
-import { Card } from '@components/admin/Card.js';
 import { SimplePagination } from '@components/common/SimplePagination.js';
-import { CheckIcon } from '@heroicons/react/24/outline';
+import { Button } from '@components/common/ui/Button.js';
+import { Input } from '@components/common/ui/Input.js';
+import { Skeleton } from '@components/common/ui/Skeleton.js';
+import { Check } from 'lucide-react';
 import React from 'react';
 import { useQuery } from 'urql';
-import './AttributeGroupSelector.scss';
 import { AtLeastOne } from '../../types/atLeastOne.js';
 
 const SearchQuery = `
@@ -28,20 +29,17 @@ const AttributeGroupListSkeleton: React.FC = () => {
   const skeletonItems = Array(5).fill(0);
 
   return (
-    <div className="attribute-group-list-skeleton">
+    <div className="attribute-group-list-skeleton space-y-2 divide-y">
       {skeletonItems.map((_, index) => (
         <div
           key={index}
-          className="attribute-group-skeleton-item border-b flex justify-between items-center"
+          className="attribute-group-skeleton-item border-border pb-2 flex justify-between items-center "
         >
           <div className="flex items-center">
-            <div>
-              <div className="skeleton-title h-5 w-30 bg-gray-200 rounded skeleton-pulse mb-2"></div>
-              <div className="skeleton-id h-4 w-20 bg-gray-200 rounded skeleton-pulse"></div>
-            </div>
+            <Skeleton className="h-5 w-30 rounded"></Skeleton>
           </div>
           <div className="select-button">
-            <div className="skeleton-button h-6 w-12 bg-gray-200 rounded skeleton-pulse"></div>
+            <Skeleton className="h-6 w-12 rounded"></Skeleton>
           </div>
         </div>
       ))}
@@ -124,7 +122,7 @@ const AttributeGroupSelector: React.FC<{
 
   if (error) {
     return (
-      <p className="text-critical">
+      <p className="text-destructive">
         There was an error fetching attribute groups.
         {error.message}
       </p>
@@ -132,108 +130,101 @@ const AttributeGroupSelector: React.FC<{
   }
 
   return (
-    <Card title="Select Attribute Groups">
-      <Card.Session>
-        <div>
-          <div className="border rounded border-divider mb-5">
-            <input
-              type="text"
-              value={inputValue || ''}
-              placeholder="Search attribute groups"
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                setInputValue(e.target.value);
-                setLoading(true);
-              }}
-            />
-          </div>
-          {(fetching || loading) && <AttributeGroupListSkeleton />}
-          {!fetching && data && (
-            <div className="divide-y">
-              {data.attributeGroups.items.length === 0 && (
-                <div className="p-2 border border-divider rounded flex justify-center items-center">
-                  {inputValue ? (
-                    <p>
-                      No attribute groups found for query &quot;{inputValue}
-                      &rdquo;
-                    </p>
-                  ) : (
-                    <p>You have no attribute groups to display</p>
-                  )}
-                </div>
-              )}
-              {data.attributeGroups.items.map((a) => (
-                <div
-                  key={a.uuid}
-                  className="grid grid-cols-8 gap-5 py-2 border-divider items-center"
-                >
-                  <div className="col-span-5">
-                    <h3>{a.groupName}</h3>
-                  </div>
-                  <div className="col-span-3 text-right">
-                    {!isAttributeGroupSelected(
-                      a,
-                      internalSelectedAttributeGroups
-                    ) && (
-                      <button
-                        type="button"
-                        className="button secondary"
-                        onClick={async (e) => {
-                          e.preventDefault();
-                          setInternalSelectedAttributeGroups((prev) => [
-                            ...prev,
-                            {
-                              attributeGroupId: a.attributeGroupId,
-                              uuid: a.uuid,
-                              groupName: a.groupName
-                            }
-                          ]);
-                          onSelect(a.attributeGroupId, a.uuid, a.groupName);
-                        }}
-                      >
-                        Select
-                      </button>
-                    )}
-                    {isAttributeGroupSelected(
-                      a,
-                      internalSelectedAttributeGroups
-                    ) && (
-                      <a
-                        className="button primary"
-                        href="#"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          setInternalSelectedAttributeGroups((prev) =>
-                            prev.filter(
-                              (c) =>
-                                c.attributeGroupId !== a.attributeGroupId &&
-                                c.uuid !== a.uuid
-                            )
-                          );
-                          onUnSelect(a.attributeGroupId, a.uuid, a.groupName);
-                        }}
-                      >
-                        <CheckIcon className="w-5 h-5" />
-                      </a>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </Card.Session>
-      <Card.Session>
-        <div className="flex justify-between gap-5">
-          <SimplePagination
-            total={data?.attributeGroups.total || 0}
-            count={data?.attributeGroups?.items?.length || 0}
-            page={page}
-            hasNext={limit * page < data?.attributeGroups.total}
-            setPage={setPage}
+    <div>
+      <div>
+        <div className="mb-5">
+          <Input
+            type="text"
+            value={inputValue || ''}
+            placeholder="Search attribute groups"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setInputValue(e.target.value);
+              setLoading(true);
+            }}
           />
         </div>
-      </Card.Session>
-    </Card>
+        {(fetching || loading) && <AttributeGroupListSkeleton />}
+        {!fetching && data && (
+          <div className="divide-y">
+            {data.attributeGroups.items.length === 0 && (
+              <div className="p-2 border border-divider rounded flex justify-center items-center">
+                {inputValue ? (
+                  <p>
+                    No attribute groups found for query &quot;{inputValue}
+                    &rdquo;
+                  </p>
+                ) : (
+                  <p>You have no attribute groups to display</p>
+                )}
+              </div>
+            )}
+            {data.attributeGroups.items.map((a) => (
+              <div
+                key={a.uuid}
+                className="grid grid-cols-8 gap-5 py-2 border-divider items-center"
+              >
+                <div className="col-span-5">
+                  <h3>{a.groupName}</h3>
+                </div>
+                <div className="col-span-3 text-right">
+                  {!isAttributeGroupSelected(
+                    a,
+                    internalSelectedAttributeGroups
+                  ) && (
+                    <Button
+                      variant="outline"
+                      onClick={async (e) => {
+                        e.preventDefault();
+                        setInternalSelectedAttributeGroups((prev) => [
+                          ...prev,
+                          {
+                            attributeGroupId: a.attributeGroupId,
+                            uuid: a.uuid,
+                            groupName: a.groupName
+                          }
+                        ]);
+                        onSelect(a.attributeGroupId, a.uuid, a.groupName);
+                      }}
+                    >
+                      Select
+                    </Button>
+                  )}
+                  {isAttributeGroupSelected(
+                    a,
+                    internalSelectedAttributeGroups
+                  ) && (
+                    <Button
+                      onClick={(e) => {
+                        e.preventDefault();
+                        setInternalSelectedAttributeGroups((prev) =>
+                          prev.filter(
+                            (c) =>
+                              c.attributeGroupId !== a.attributeGroupId &&
+                              c.uuid !== a.uuid
+                          )
+                        );
+                        onUnSelect(a.attributeGroupId, a.uuid, a.groupName);
+                      }}
+                    >
+                      <Check className="w-5 h-5" />
+                    </Button>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      <div className="flex justify-between gap-5 mt-3">
+        <SimplePagination
+          total={data?.attributeGroups.total || 0}
+          count={data?.attributeGroups?.items?.length || 0}
+          page={page}
+          hasNext={limit * page < data?.attributeGroups.total}
+          setPage={setPage}
+        />
+      </div>
+    </div>
   );
 };