@shopware/cms-base-layer 3.1.0 → 4.1.0

package/app/utils/{useSelectedListingFilters.test.ts → listingFilterState.test.ts}

@@ -3,22 +3,32 @@ import { describe, expect, it } from "vitest";
 import {
   applyQueryToFilters,
   createEmptyFilterState,
-} from "./useSelectedListingFilters";
+} from "./listingFilterState";
 
 describe("applyQueryToFilters", () => {
   it("populates sets from pipe-joined values", () => {
     const state = createEmptyFilterState();
-    applyQueryToFilters(state, { manufacturer: "a|b", properties: "x" });
+    applyQueryToFilters(state, {
+      manufacturer: "a|b",
+      properties: "x",
+      categories: "c1|c2",
+    });
     expect([...state.manufacturer]).toEqual(["a", "b"]);
     expect([...state.properties]).toEqual(["x"]);
+    expect([...state.categories]).toEqual(["c1", "c2"]);
   });
 
   it("clears removed filters when the query no longer has them (Back/Forward)", () => {
     const state = createEmptyFilterState();
-    applyQueryToFilters(state, { manufacturer: "a|b", search: "shirt" });
-    applyQueryToFilters(state, { search: "shirt" }); // manufacturer removed
+    applyQueryToFilters(state, {
+      manufacturer: "a|b",
+      categories: "c1",
+      search: "shirt",
+    });
+    applyQueryToFilters(state, { search: "shirt" }); // manufacturer + categories removed
     expect(state.manufacturer.size).toBe(0);
     expect(state.properties.size).toBe(0);
+    expect(state.categories.size).toBe(0);
   });
 
   it("clears removed scalar filters on resync", () => {

package/app/utils/{useSelectedListingFilters.ts → listingFilterState.ts}

@@ -1,6 +1,3 @@
-import { reactive, watch } from "vue";
-import type { UnwrapNestedRefs } from "vue";
-import { useRoute } from "vue-router";
 import type { LocationQuery } from "vue-router";
 
 import { firstQueryValue, toNumber } from "./routeQuery";
@@ -8,6 +5,7 @@ import { firstQueryValue, toNumber } from "./routeQuery";
 export type FilterState = {
   manufacturer: Set<string>;
   properties: Set<string>;
+  categories: Set<string>;
   "min-price": number | undefined;
   "max-price": number | undefined;
   rating: number | undefined;
@@ -18,6 +16,7 @@ export type FilterState = {
 export const createEmptyFilterState = (): FilterState => ({
   manufacturer: new Set<string>(),
   properties: new Set<string>(),
+  categories: new Set<string>(),
   "min-price": undefined,
   "max-price": undefined,
   rating: undefined,
@@ -46,13 +45,14 @@ export const applyQueryToFilters = (
   //    (props bound to them stay reactive); replace scalars with undefined.
   state.manufacturer.clear();
   state.properties.clear();
+  state.categories.clear();
   state["min-price"] = undefined;
   state["max-price"] = undefined;
   state.rating = undefined;
   state["shipping-free"] = undefined;
 
   // 2) Repopulate from the current query.
-  for (const code of ["manufacturer", "properties"] as const) {
+  for (const code of ["manufacturer", "properties", "categories"] as const) {
     const value = firstQueryValue(query[code]);
     if (!value) continue;
     for (const element of value.split("|")) {
@@ -74,32 +74,3 @@ export const applyQueryToFilters = (
     state["shipping-free"] = shippingFree === "true";
   }
 };
-
-/**
- * Returns the reactive filter state, populated from the current route.query at
- * setup (runs on server AND client -> identical first render, no hydration
- * mismatch) and kept in sync on every subsequent query-only navigation
- * (Back/Forward, manual URL edits, the component's own executeSearch push).
- *
- * The watcher is intentionally NOT immediate: the setup-time apply already
- * covers the first render, and an immediate watcher would re-run during
- * hydration. It only resyncs UI state - it never navigates or fetches - so it
- * cannot loop with executeSearch() nor cause an extra listing request.
- */
-export const useSelectedListingFilters = (): UnwrapNestedRefs<FilterState> => {
-  const route = useRoute();
-  const state = reactive<FilterState>(createEmptyFilterState());
-
-  // Initial parse (SSR + first client render).
-  applyQueryToFilters(state as FilterState, route.query);
-
-  // Resync on query-only route changes while the component stays mounted.
-  watch(
-    () => route.query,
-    (query) => {
-      applyQueryToFilters(state as FilterState, query);
-    },
-  );
-
-  return state;
-};

package/app/utils/listingFilters.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+
+import { getVisibleListingFilters } from "./listingFilters";
+
+describe("getVisibleListingFilters", () => {
+  const filters = [
+    { code: "manufacturer" },
+    { code: "categories" },
+    { code: "price" },
+  ];
+
+  it("should keep the categories filter on a search listing", () => {
+    expect(
+      getVisibleListingFilters(filters, { isProductSearch: true }),
+    ).toStrictEqual(filters);
+  });
+
+  it("should drop the categories filter on a non-search listing", () => {
+    expect(
+      getVisibleListingFilters(filters, { isProductSearch: false }),
+    ).toStrictEqual([{ code: "manufacturer" }, { code: "price" }]);
+  });
+
+  it("should leave listings without a categories filter untouched", () => {
+    const withoutCategories = [{ code: "manufacturer" }, { code: "rating" }];
+    expect(
+      getVisibleListingFilters(withoutCategories, { isProductSearch: false }),
+    ).toStrictEqual(withoutCategories);
+  });
+
+  it("should return an empty array for missing filters", () => {
+    expect(
+      getVisibleListingFilters(undefined, { isProductSearch: true }),
+    ).toStrictEqual([]);
+    expect(
+      getVisibleListingFilters(null, { isProductSearch: false }),
+    ).toStrictEqual([]);
+  });
+});

package/app/utils/listingFilters.ts

@@ -0,0 +1,19 @@
+import { CATEGORY_AGGREGATION_NAME } from "@shopware/helpers";
+
+/**
+ * Narrows the listing filters to the ones the current listing can act on.
+ *
+ * The category selection is only written to the `categories` URL param and to
+ * the criteria `post-filter` on search listings. A category listing that
+ * happens to request the category aggregations would otherwise render a
+ * checkbox that the next query sync resets and that never changes the result
+ * set, so the filter is dropped there.
+ */
+export const getVisibleListingFilters = <T extends { code: string }>(
+  filters: T[] | undefined | null,
+  { isProductSearch }: { isProductSearch: boolean },
+): T[] => {
+  if (!filters) return [];
+  if (isProductSearch) return filters;
+  return filters.filter((filter) => filter.code !== CATEGORY_AGGREGATION_NAME);
+};

package/component-dirs.json

@@ -0,0 +1,20 @@
+{
+  "dirs": [
+    {
+      "path": "./app/components",
+      "pattern": "Sw*",
+      "global": true
+    },
+    {
+      "path": "./app/components/public",
+      "pathPrefix": false,
+      "global": true
+    },
+    {
+      "path": "./app/components/ui",
+      "prefix": "Sw",
+      "global": true
+    }
+  ],
+  "excluded": ["SwMedia3D"]
+}

package/index.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="@nuxt/schema" />
 
-export * from "@shopware/composables";
-export * from "./.nuxt/imports";
 
 type CmsBaseLayerAppConfig = {
   /** Placeholder shown while CMS images are loading */
@@ -42,3 +40,5 @@ declare module "@nuxt/schema" {
   interface AppConfig extends CmsBaseLayerAppConfig {}
   interface AppConfigInput extends CmsBaseLayerAppConfig {}
 }
+
+export {};

package/nuxt.config.ts

@@ -3,6 +3,8 @@ import type { NuxtConfig } from "@nuxt/schema";
 import { defineNuxtConfig } from "nuxt/config";
 import type { LoggingFunction, RollupLog } from "rollup";
 
+import componentDirs from "./component-dirs.json";
+
 const { resolve: resolveLayer } = createResolver(import.meta.url);
 
 export default defineNuxtConfig({
@@ -15,19 +17,15 @@ export default defineNuxtConfig({
   // the UnoCSS setup lives in @shopware/unocss-design-tokens-layer (or your own config),
   // so apps that don't use UnoCSS can still extend this layer.
   modules: ["@nuxt/image"],
+  css: [resolveLayer("./app/assets/css/rich-text.css")],
 
   hooks: {
     "components:extend"(components) {
       // Exclude SwMedia3D from auto-import to prevent bundling heavy 3D libraries
       // It should be dynamically imported when needed using defineAsyncComponent.
-      const index = components.findIndex(
-        (c) =>
-          c.pascalName === "SwMedia3D" ||
-          c.kebabName === "sw-media3-d" ||
-          c.filePath?.includes("SwMedia3D.vue"),
-      );
-      if (index > -1) {
-        components.splice(index, 1);
+      for (const name of componentDirs.excluded) {
+        const index = components.findIndex((c) => c.pascalName === name);
+        if (index > -1) components.splice(index, 1);
       }
     },
   },
@@ -90,26 +88,11 @@ export default defineNuxtConfig({
     },
   },
 
-  components: [
-    {
-      path: resolveLayer("./app/components"),
-      pattern: "Sw*",
-      extensions: [".vue"],
-      global: true,
-    },
-    {
-      path: resolveLayer("./app/components/ui"),
-      extensions: [".vue"],
-      prefix: "Sw",
-      global: true,
-    },
-    {
-      path: resolveLayer("./app/components/public"),
-      pathPrefix: false,
-      global: true,
-      extensions: [".vue"],
-    },
-  ],
+  components: componentDirs.dirs.map(({ path, ...dir }) => ({
+    ...dir,
+    path: resolveLayer(path),
+    extensions: [".vue"],
+  })),
   alias: {
     "@cms-assets": resolveLayer("./app/assets"),
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopware/cms-base-layer",
-  "version": "3.1.0",
+  "version": "4.1.0",
   "description": "Vue CMS Nuxt Layer for Shopware",
   "author": "Shopware",
   "repository": {
@@ -21,55 +21,52 @@
   "license": "MIT",
   "type": "module",
   "main": "./nuxt.config.ts",
+  "exports": {
+    ".": "./nuxt.config.ts",
+    "./package.json": "./package.json"
+  },
   "files": [
-    "dist",
     "app",
-    "helpers",
-    "index.cjs",
+    "component-dirs.json",
     "index.d.ts",
-    "app.config.ts",
     "nuxt.config.ts"
   ],
   "dependencies": {
-    "@iconify-json/carbon": "1.2.24",
-    "@nuxt/image": "2.0.0",
-    "@nuxt/kit": "4.4.8",
-    "@tresjs/cientos": "5.7.2",
+    "@iconify-json/carbon": "1.2.27",
+    "@nuxt/image": "2.1.0",
+    "@nuxt/kit": "4.5.2",
+    "@tresjs/cientos": "5.8.1",
     "@tresjs/nuxt": "^5.6.3",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
-    "@vueuse/core": "14.4.0",
+    "@vueuse/core": "15.0.0",
     "entities": "8.0.0",
     "scule": "1.3.0",
     "html-to-ast": "0.0.6",
-    "three": "0.183.2",
-    "vue": "3.5.39",
+    "three": "0.185.1",
+    "vue": "3.5.43",
     "xss": "1.0.15",
-    "@shopware/api-client": "1.5.1",
-    "@shopware/composables": "1.12.1",
-    "@shopware/helpers": "1.7.2"
+    "@shopware/api-client": "1.7.0",
+    "@shopware/composables": "1.14.0",
+    "@shopware/helpers": "1.8.0"
   },
   "devDependencies": {
-    "@nuxt/schema": "4.4.8",
+    "@nuxt/schema": "4.5.2",
     "@types/three": "0.182.0",
     "@typescript/native-preview": "7.0.0-dev.20260205.1",
-    "@vitest/coverage-v8": "4.1.10",
-    "nuxt": "4.4.8",
+    "@vitest/coverage-v8": "5.0.0",
+    "nuxt": "4.5.2",
     "typescript": "5.9.3",
-    "unbuild": "3.6.1",
-    "vitest": "4.1.10",
-    "vue-router": "5.1.0",
-    "vue-tsc": "3.3.7",
+    "vitest": "5.0.0",
+    "vue-router": "5.3.1",
+    "vue-tsc": "3.3.11",
     "tsconfig": "0.0.0"
   },
   "scripts": {
-    "build": "nuxt prepare && unbuild",
-    "dev": "unbuild --stub",
     "lint": "oxlint . && oxfmt --check .",
     "lint:fix": "oxlint --fix . && oxfmt --write . && pnpm run typecheck",
     "typecheck": "pnpm nuxt prepare && tsgo --noEmit",
     "test": "vitest run",
-    "test:watch": "vitest",
-    "check-colors": "tsx scripts/check-unused-colors.ts"
+    "test:watch": "vitest"
   }
 }

package/dist/index.d.mts

@@ -1,5 +0,0 @@
-import * as _nuxt_schema from '@nuxt/schema';
-
-declare const _default: _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions, _nuxt_schema.ModuleOptions, false>;
-
-export { _default as default };

package/dist/index.d.ts

@@ -1,5 +0,0 @@
-import * as _nuxt_schema from '@nuxt/schema';
-
-declare const _default: _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions, _nuxt_schema.ModuleOptions, false>;
-
-export { _default as default };

package/dist/index.mjs

@@ -1,31 +0,0 @@
-import { resolve } from 'node:path';
-import { defineNuxtModule } from '@nuxt/kit';
-
-
-
-// -- Unbuild CommonJS Shims --
-import __cjs_url__ from 'url';
-import __cjs_path__ from 'path';
-import __cjs_mod__ from 'module';
-const __filename = __cjs_url__.fileURLToPath(import.meta.url);
-const __dirname = __cjs_path__.dirname(__filename);
-const require = __cjs_mod__.createRequire(import.meta.url);
-const index = defineNuxtModule({
-  meta: {
-    name: "@shopware/cms-base",
-    configKey: "shopware-cms"
-  },
-  setup(_, nuxt) {
-    nuxt.hook("components:dirs", (c) => {
-      c.push({
-        path: resolve(__dirname, "../components/public"),
-        global: true
-      });
-    });
-    nuxt.options.imports.transform = nuxt.options.imports.transform || {};
-    nuxt.options.imports.transform.include = nuxt.options.imports.transform?.include || [];
-    nuxt.options.imports.transform?.include.push(/.+cms-base.+/);
-  }
-});
-
-export { index as default };

package/index.cjs

@@ -1,7 +0,0 @@
-// CommonJS proxy to bypass jiti transforms from nuxt 2 and using native ESM
-module.exports = function (...args) {
-  return import("./dist/index.mjs").then((m) => m.default.call(this, ...args));
-};
-
-// eslint-disable-next-line
-module.exports.meta = require("./package.json");