Merge branch 'master' into minor

e2e-common/vitest.config.bench.ts

@@ -0,0 +1,36 @@
+import path from 'path';
+import swc from 'unplugin-swc';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+    test: {
+        include: ['**/*.bench.ts'],
+        /**
+         * For local debugging of the e2e tests, we set a very long timeout value otherwise tests will
+         * automatically fail for going over the 5 second default timeout.
+         */
+        testTimeout: process.env.E2E_DEBUG ? 1800 * 1000 : process.env.CI ? 30 * 1000 : 15 * 1000,
+        // threads: false,
+        // singleThread: true,
+        // reporters: ['verbose'],
+        typecheck: {
+            tsconfig: path.join(__dirname, 'tsconfig.e2e.json'),
+        },
+        // In jobs-queue.e2e-spec.ts, we use `it.only()` for sqljs, so we need this
+        // set to true to avoid failures in CI.
+        allowOnly: true,
+    },
+    plugins: [
+        // SWC required to support decorators used in test plugins
+        // See https://github.com/vitest-dev/vitest/issues/708#issuecomment-1118628479
+        // Vite plugin
+        swc.vite({
+            jsc: {
+                transform: {
+                    // See https://github.com/vendure-ecommerce/vendure/issues/2099
+                    useDefineForClassFields: false,
+                },
+            },
+        }),
+    ],
+});

package.json

@@ -50,6 +50,7 @@
     "lerna": "^7.1.5",
     "lint-staged": "^10.5.4",
     "prettier": "^2.2.1",
+    "tinybench": "^2.5.1",
     "ts-node": "^10.9.1",
     "typescript": "4.9.5",
     "unplugin-swc": "^1.3.2",

packages/admin-ui-plugin/README.md

@@ -2,4 +2,4 @@
 
 `npm install @vendure/admin-ui-plugin`
 
-For documentation, see [docs.vendure.io/typescript-api/core-plugins/admin-ui-plugin/](https://docs.vendure.io/typescript-api/core-plugins/admin-ui-plugin/)
+For documentation, see [docs.vendure.io/reference/core-plugins/admin-ui-plugin/](https://docs.vendure.io/reference/core-plugins/admin-ui-plugin/)

packages/admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.scss

@@ -17,6 +17,9 @@ clr-checkbox-wrapper {
         font-size: 0.65rem;
         display: inline-block;
         margin-inline-end: 10px;
+        &:last-child {
+            font-weight: 600;
+        }
     }
     li:not(:last-child)::after {
         content: '›';

packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.html

@@ -20,20 +20,21 @@
             <hr />
             <vdr-main-nav displayMode="settings" (itemClick)="collapseNav()"></vdr-main-nav>
         </div>
-        <div class="mx-2">
-            <div *ngIf="devMode" class="flex center mb-2">
-                <vdr-dropdown>
-                    <button class="icon-button dev-mode-button" vdrDropdownTrigger title="DEV MODE">
-                        <clr-icon shape="code" size="24"></clr-icon> DEV MODE
-                    </button>
-                    <vdr-dropdown-menu>
-                        <div class="px-2 py-1">
-                            <div>Version: {{ version }}</div>
-                            <div>View UI extension points: <kbd>CTRL + U</kbd></div>
-                        </div>
-                    </vdr-dropdown-menu>
-                </vdr-dropdown>
+        <div class="mx-2 flex center mb-2">
+            <div *ngIf="!hideVersion" class="version">
+                v{{ version }}
             </div>
+            <vdr-dropdown *ngIf="devMode">
+                <button class="icon-button dev-mode-button" vdrDropdownTrigger title="DEV MODE">
+                    <clr-icon shape="code" size="24"></clr-icon> DEV MODE
+                </button>
+                <vdr-dropdown-menu>
+                    <div class="px-2 py-1">
+                        <div>Version: {{ version }}</div>
+                        <div>View UI extension points: <kbd>CTRL + U</kbd></div>
+                    </div>
+                </vdr-dropdown-menu>
+            </vdr-dropdown>
         </div>
     </div>
 

packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.scss

@@ -30,6 +30,10 @@
     }
 }
 
+.version {
+    color: var(--color-grey-300);
+}
+
 // fade in animation
 @keyframes fade-in {
     0% {

packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.ts

@@ -32,6 +32,7 @@ export class AppShellComponent implements OnInit {
     availableLanguages: LanguageCode[] = [];
     availableLocales: string[] = [];
     hideVendureBranding = getAppConfig().hideVendureBranding;
+    hideVersion = getAppConfig().hideVersion;
     pageTitle$: Observable<string>;
     mainNavExpanded$: Observable<boolean>;
     devMode = isDevMode();

packages/admin-ui/src/lib/core/src/shared/components/page-header-tabs/page-header-tabs.component.scss

@@ -5,6 +5,11 @@
 
 .tab-bar {
     display: flex;
+
+    & a:hover {
+        color: var(--color-text-active);
+        border-bottom-color: var(--color-text-active);
+    }
 }
 
 .tab {

packages/admin-ui/src/lib/login/src/components/login/login.component.html

@@ -70,13 +70,6 @@
                         </button>
                     </div>
                 </div>
-                <div class="version">
-                    <span *ngIf="brand"
-                        >{{ brand }} <span *ngIf="!hideVendureBranding || !hideVersion">-</span></span
-                    >
-                    <span *ngIf="!hideVendureBranding">vendure</span>
-                    <span *ngIf="!hideVersion">v{{ version }}</span>
-                </div>
             </form>
         </div>
         <img class="login-wrapper-logo" src="assets/logo-login.webp" *ngIf="!hideVendureBranding" />

packages/admin-ui/src/lib/login/src/components/login/login.component.scss

@@ -1,7 +1,7 @@
 @import 'variables';
 
 .login-wrapper {
-    background: var(--color-login-page-bg);
+    background: var(--color-weight-100);
     background-image: none;
     height: 100vh;
     display: flex;
@@ -12,7 +12,7 @@
     .login-wrapper-inner {
 
 
-        background: #fff;
+        background: var(--login-wrapper-inner-bg);
         width: 1120px;
         height: 590px;
         display: flex;
@@ -101,7 +101,6 @@
             justify-content: center;
             box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.1);
             overflow: hidden;
-            border-radius: 5px;
             flex-shrink: 0;
 
             @media (max-width: $breakpoint-medium) {

packages/admin-ui/src/lib/login/src/components/login/login.component.ts

@@ -1,7 +1,14 @@
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { ADMIN_UI_VERSION, AuthService, AUTH_REDIRECT_PARAM, getAppConfig, LocalizationDirectionType, LocalizationService } from '@vendure/admin-ui/core';
+import {
+    ADMIN_UI_VERSION,
+    AuthService,
+    AUTH_REDIRECT_PARAM,
+    getAppConfig,
+    LocalizationDirectionType,
+    LocalizationService,
+} from '@vendure/admin-ui/core';
 
 @Component({
     selector: 'vdr-login',
@@ -18,7 +25,6 @@ export class LoginComponent implements OnInit {
     errorMessage: string | undefined;
     brand = getAppConfig().brand;
     hideVendureBranding = getAppConfig().hideVendureBranding;
-    hideVersion = getAppConfig().hideVersion;
     customImageUrl = getAppConfig().loginImageUrl;
     imageUrl = '';
     imageUnsplashUrl = '';
@@ -26,7 +32,12 @@ export class LoginComponent implements OnInit {
     imageCreator = '';
     imageCreatorUrl = '';
 
-    constructor(private authService: AuthService, private router: Router, private httpClient: HttpClient, private localizationService: LocalizationService) {
+    constructor(
+        private authService: AuthService,
+        private router: Router,
+        private httpClient: HttpClient,
+        private localizationService: LocalizationService,
+    ) {
         if (this.customImageUrl) {
             this.imageUrl = this.customImageUrl;
         } else {

packages/admin-ui/src/lib/order/src/components/order-payment-card/order-payment-card.component.scss

@@ -3,6 +3,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    line-break: anywhere;
 }
 
 .refund-icon {

packages/admin-ui/src/lib/static/i18n-messages/en.json

@@ -522,9 +522,9 @@
     "shipping-methods": "Shipping methods",
     "stock-locations": "Stock locations",
     "system": "System",
-    "system-status": "System Status",
+    "system-status": "System status",
     "tax-categories": "Tax categories",
-    "tax-rates": "Tax Rates",
+    "tax-rates": "Tax rates",
     "zones": "Zones"
   },
   "order": {
@@ -736,7 +736,7 @@
     "seller": "Seller",
     "shipping-calculator": "Shipping calculator",
     "shipping-eligibility-checker": "Shipping eligibility checker",
-    "shipping-method": "Shipping Method",
+    "shipping-method": "Shipping method",
     "tax-category": "Tax category",
     "tax-rate": "Tax rate",
     "test-address": "Test address",

packages/admin-ui/src/lib/static/styles/global/_sass-overrides.scss

@@ -1,3 +1,8 @@
 // Note: variables defined in this file should use the !default flag so they can be
 // overridden by custom Admin UI applications
 $clr-sidenav-width: 10.8rem !default;
+
+$clr-link-visited-color: var(--color-weight-700) !default;
+$clr-link-hover-color: var(--color-weight-700) !default;
+$clr-link-active-color: var(--color-weight-700) !default;
+$clr-link-color: var(--color-weight-700) !default;

packages/admin-ui/src/lib/static/styles/theme/default.scss

@@ -185,8 +185,6 @@
     --color-split-view-separator-border: var(--color-weight-150);
     --color-split-view-separator-resize-border: var(--color-primary-400);
 
-    --color-login-page-bg: var(--color-weight-100);
-
     --color-dropdown-item-focus-outline: rgba(77, 207, 255, 0.53);
 
     // Layout
@@ -214,6 +212,7 @@
     }
 
     // Login page
+    --login-wrapper-inner-bg: var(--color-white);
     --login-page-bg: url(data:image/gif;base64,R0lGODlhFAAhAKIAABwcHBsbGxcXFx0dHRUVFRkZGR4eHhQUFCH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ2NzI5LCAyMDEyLzA1LzAzLTEzOjQwOjAzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgRWxlbWVudHMgMTIuMCBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhBOTg1NDlCNjMwNDExRUFBNEUwQ0M2RDdENUQ3RTBFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhBOTg1NDlDNjMwNDExRUFBNEUwQ0M2RDdENUQ3RTBFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OEE5ODU0OTk2MzA0MTFFQUE0RTBDQzZEN0Q1RDdFMEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEE5ODU0OUE2MzA0MTFFQUE0RTBDQzZEN0Q1RDdFMEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQAAAAAACwAAAAAFAAhAAADfSi23M7igEcZOIfUSvApm1N42RAuQ0cqZ0Ri0xa8nlaltAdSY44RJsfAt3q4iLDGDFlj4Ji6RQ/6GwypqyOtwO12BQKv+EawnRq93dlwLa0NWtZpSYptniRzZfpSP9o0QBVaNHJKUHYoKkh6BnxIaoBMgnBYGAp0lgCLlgQJADs=);
     --color-login-gradient-top: var(--color-primary-800);
     --color-login-gradient-bottom: black;
@@ -236,4 +235,10 @@
 
     // spacing
     --space-unit: 8px;
+
+    // clarity styles
+    --clr-link-visited-color: var(--color-weight-700);
+    --clr-link-hover-color: var(--color-weight-700);
+    --clr-link-active-color: var(--color-weight-700);
+    --clr-link-color: var(--color-weight-700);
 }

packages/asset-server-plugin/README.md

@@ -4,4 +4,4 @@ The `AssetServerPlugin` serves assets (images and other files) from the local fi
 
 `npm install @vendure/asset-server-plugin`
 
-For documentation, see [docs.vendure.io/typescript-api/core-plugins/asset-server-plugin/](https://docs.vendure.io/typescript-api/core-plugins/asset-server-plugin/)
+For documentation, see [docs.vendure.io/reference/core-plugins/asset-server-plugin/](https://docs.vendure.io/reference/core-plugins/asset-server-plugin/)

packages/core/e2e/default-search-plugin.bench.ts

@@ -0,0 +1,114 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { DefaultJobQueuePlugin, DefaultSearchPlugin, mergeConfig } from '@vendure/core';
+import { createTestEnvironment, registerInitializer, SqljsInitializer } from '@vendure/testing';
+import path from 'path';
+import { Bench } from 'tinybench';
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
+
+import { initialData } from '../../../e2e-common/e2e-initial-data';
+import { testConfig, TEST_SETUP_TIMEOUT_MS } from '../../../e2e-common/test-config';
+
+import {
+    SearchProductsShopQuery,
+    SearchProductsShopQueryVariables,
+} from './graphql/generated-e2e-shop-types';
+import { SEARCH_PRODUCTS_SHOP } from './graphql/shop-definitions';
+import { awaitRunningJobs } from './utils/await-running-jobs';
+
+registerInitializer('sqljs', new SqljsInitializer(path.join(__dirname, '__data__'), 1000));
+
+interface SearchProductsShopQueryVariablesExt extends SearchProductsShopQueryVariables {
+    input: SearchProductsShopQueryVariables['input'] & {
+        // This input field is dynamically added only when the `indexStockStatus` init option
+        // is set to `true`, and therefore not included in the generated type. Therefore
+        // we need to manually patch it here.
+        inStock?: boolean;
+    };
+}
+
+const { server, adminClient, shopClient } = createTestEnvironment(
+    mergeConfig(testConfig(), {
+        plugins: [DefaultSearchPlugin.init({ indexStockStatus: true }), DefaultJobQueuePlugin],
+    }),
+);
+
+let marginFactor = 1; // Defaults to 1, will be adjusted during test
+let cpuFactor = 1; // Defaults to 1, will be adjusted during test
+const fibonacci = (i: number): number => {
+    if (i <= 1) return i;
+    return fibonacci(i - 1) + fibonacci(i - 2);
+};
+
+beforeAll(async () => {
+    await server.init({
+        initialData,
+        productsCsvPath: path.join(__dirname, 'fixtures/e2e-products-default-search.csv'),
+        customerCount: 1,
+    });
+    await adminClient.asSuperAdmin();
+    await awaitRunningJobs(adminClient);
+}, TEST_SETUP_TIMEOUT_MS);
+
+afterAll(async () => {
+    await server.destroy();
+});
+
+const isDevelopment = process.env.NODE_ENV === 'development';
+describe.skipIf(isDevelopment)('Default search plugin - benchmark', () => {
+    it('defines benchmark cpu and margin factor', async () => {
+        const bench = new Bench({
+            warmupTime: 0,
+            warmupIterations: 1,
+            time: 0,
+            iterations: 10,
+        });
+
+        bench.add('measure time to calcualate fibonacci', () => {
+            fibonacci(41); // If this task would take 1000 ms the cpuFactor would be 1.
+        });
+
+        const tasks = await bench.run();
+
+        // console.table(bench.table());
+
+        tasks.forEach(task => {
+            expect(task.result?.rme).toBeDefined();
+            expect(task.result?.mean).toBeDefined();
+            if (task.result?.rme && task.result?.mean) {
+                marginFactor = 1 + task.result.rme / 100;
+                cpuFactor = 1000 / task.result.mean;
+            }
+        });
+    });
+
+    it('performs when grouped by product', async () => {
+        const bench = new Bench({
+            warmupTime: 0,
+            warmupIterations: 3,
+            time: 0,
+            iterations: 1000,
+        });
+
+        bench.add('group by product', async () => {
+            await shopClient.query<SearchProductsShopQuery, SearchProductsShopQueryVariablesExt>(
+                SEARCH_PRODUCTS_SHOP,
+                {
+                    input: {
+                        groupByProduct: true,
+                    },
+                },
+            );
+        });
+
+        const tasks = await bench.run();
+
+        // console.table(bench.table());
+
+        tasks.forEach(task => {
+            expect(task.result?.mean).toBeDefined();
+            if (task.result?.mean) {
+                expect(task.result.mean * cpuFactor).toBeLessThan(6.835 * marginFactor);
+            }
+        });
+    });
+});

packages/core/package.json

@@ -27,6 +27,7 @@
         "test": "vitest --config ./vitest.config.ts --run",
         "e2e": "cross-env PACKAGE=core vitest --config ../../e2e-common/vitest.config.ts --run",
         "e2e:watch": "cross-env PACKAGE=core vitest --config ../../e2e-common/vitest.config.ts",
+        "bench": "cross-env PACKAGE=core vitest --config ../../e2e-common/vitest.config.bench.ts --run",
         "ci": "yarn build"
     },
     "publishConfig": {

packages/dev-server/example-plugins/multivendor-plugin/README.md

@@ -8,6 +8,8 @@ The parts of the plugin are documented with explanations, and the overall guide
 
 Add this plugin to your VendureConfig:
 ```ts
+import { MultivendorPlugin } from './plugins/multivendor-plugin/multivendor.plugin';
+
  plugins: [
    MultivendorPlugin.init({
        platformFeePercent: 10,

packages/elasticsearch-plugin/README.md

@@ -6,4 +6,4 @@ The `ElasticsearchPlugin` uses Elasticsearch to power the Vendure product search
 
 `npm install @vendure/elasticsearch-plugin`
 
-For documentation, see [docs.vendure.io/typescript-api/core-plugins/elasticsearch-plugin/](https://docs.vendure.io/typescript-api/core-plugins/elasticsearch-plugin/)
+For documentation, see [docs.vendure.io/reference/core-plugins/elasticsearch-plugin/](https://docs.vendure.io/reference/core-plugins/elasticsearch-plugin/)

packages/email-plugin/README.md

@@ -4,4 +4,4 @@ The `EmailPlugin` generates and sends emails based on Vendure server events.
 
 `npm install @vendure/email-plugin`
 
-For documentation, see [docs.vendure.io/typescript-api/core-plugins/email-plugin/](https://docs.vendure.io/typescript-api/core-plugins/email-plugin/)
+For documentation, see [docs.vendure.io/reference/core-plugins/email-plugin/](https://docs.vendure.io/reference/core-plugins/email-plugin/)

packages/harden-plugin/README.md

@@ -4,4 +4,4 @@ Hardens your Vendure GraphQL APIs against attacks.
 
 `npm install @vendure/harden-plugin`
 
-For documentation, see [docs.vendure.io/typescript-api/core-plugins/harden-plugin/](https://docs.vendure.io/typescript-api/core-plugins/harden-plugin/)
+For documentation, see [docs.vendure.io/reference/core-plugins/harden-plugin/](https://docs.vendure.io/reference/core-plugins/harden-plugin/)

packages/payments-plugin/README.md

@@ -1,6 +1,6 @@
 # Payments plugin
 
-For documentation, see [docs.vendure.io/typescript-api/core-plugins/payments-plugin/](https://docs.vendure.io/typescript-api/core-plugins/payments-plugin/)
+For documentation, see [docs.vendure.io/reference/core-plugins/payments-plugin/](https://docs.vendure.io/reference/core-plugins/payments-plugin/)
 
 ## Development
 

packages/payments-plugin/src/stripe/README.md

@@ -2,4 +2,4 @@
 
 Plugin to enable payments through [Stripe](https://stripe.com/docs).
 
-For documentation, see [https://www.vendure.io/docs/typescript-api/payments-plugin/stripe-plugin](https://docs.vendure.io/typescript-api/core-plugins/payments-plugin/stripe-plugin/)https://docs.vendure.io/typescript-api/core-plugins/payments-plugin/stripe-plugin/
+For documentation, see [https://www.vendure.io/docs/typescript-api/payments-plugin/stripe-plugin](https://docs.vendure.io/reference/core-plugins/payments-plugin/stripe-plugin/)https://docs.vendure.io/reference/core-plugins/payments-plugin/stripe-plugin/

yarn.lock

@@ -17746,6 +17746,11 @@ tinybench@^2.5.0:
   resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.5.0.tgz#4711c99bbf6f3e986f67eb722fed9cddb3a68ba5"
   integrity sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==
 
+tinybench@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.5.1.tgz#3408f6552125e53a5a48adee31261686fd71587e"
+  integrity sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==
+
 tinypool@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-0.7.0.tgz#88053cc99b4a594382af23190c609d93fddf8021"