@shopware/cms-base-layer 3.0.1 → 4.0.0

package/app/components/public/cms/element/CmsElementText.vue

@@ -32,6 +32,10 @@ const CmsTextRender = defineComponent({
     const { resolveUrl } = useUrlResolver();
 
     const config = {
+      container: {
+        type: "div",
+        class: "cms-element-text",
+      },
       textTransformer: (text: string) => decodeHTML(text),
       extraComponentsMap: {
         link: {
@@ -148,7 +152,7 @@ const CmsTextRender = defineComponent({
     const rawHtml =
       mappedContent.value?.length > 0
         ? mappedContent.value
-        : "<div class='cms-element-text missing-content-element'></div>";
+        : "<div class='missing-content-element'></div>";
 
     return () => renderHtml(rawHtml, config, h, context, resolveUrl);
   },
@@ -160,34 +164,3 @@ const CmsTextRender = defineComponent({
   </div>
   <CmsTextRender v-else />
 </template>
-<style scoped>
-/** Global CSS styles for text elements */
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin-bottom: 10px;
-  font-weight: 600;
-}
-h1 {
-  line-height: 2.5rem;
-  font-size: 2.25rem;
-}
-h2 {
-  line-height: 2rem;
-  font-size: 1.75rem;
-}
-h3 {
-  line-height: 1.5rem;
-  font-size: 1.25rem;
-}
-ol,
-ul,
-dl {
-  list-style-type: disc;
-  padding-left: 40px;
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-</style>

package/app/helpers/html-to-vue/renderToHtml.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+import { h } from "vue";
+
+import { renderHtml } from "./renderToHtml";
+
+describe("renderHtml", () => {
+  const resolveUrl = (url: string) => url;
+
+  const render = (
+    html: string,
+    config: Parameters<typeof renderHtml>[1] = {},
+  ) => renderHtml(html, config, h, null, resolveUrl);
+
+  it("wraps the content in a plain div by default", () => {
+    const vnode = render("<p>content</p>");
+
+    expect(vnode.type).toBe("div");
+    expect(vnode.props?.class).toBeUndefined();
+  });
+
+  it("applies container.class to the wrapper element", () => {
+    const vnode = render("<h1>headline</h1>", {
+      container: { type: "div", class: "cms-element-text" },
+    });
+
+    expect(vnode.props?.class).toBe("cms-element-text");
+  });
+
+  it("honours a custom container type", () => {
+    const vnode = render("<p>content</p>", {
+      container: { type: "section", class: "cms-element-text" },
+    });
+
+    expect(vnode.type).toBe("section");
+  });
+
+  it("does not leak container.class into later renders", () => {
+    render("<p>scoped</p>", {
+      container: { type: "div", class: "cms-element-text" },
+    });
+
+    const vnode = render("<p>unscoped</p>");
+
+    expect(vnode.props?.class).toBeUndefined();
+  });
+
+  it("keeps rendering the parsed children next to the container class", () => {
+    const vnode = render("<h2>headline</h2>", {
+      container: { type: "div", class: "cms-element-text" },
+    });
+
+    expect(Array.isArray(vnode.children)).toBe(true);
+    expect((vnode.children as { type: string }[])[0]?.type).toBe("h2");
+  });
+});

package/app/helpers/html-to-vue/renderToHtml.ts

@@ -25,7 +25,11 @@ export function renderHtml(
   context: ComponentInternalInstance | null,
   resolveUrl: (url: string) => string,
 ) {
-  const mergedConfig = Object.assign(defaultConfig, config);
+  const mergedConfig: DefaultConfig = {
+    ...defaultConfig,
+    ...config,
+    container: { ...defaultConfig.container, ...config.container },
+  };
   const _ast = generateAST(html);
   const rectifyConfig: RectifyConfig = {
     extraComponentsMap: config.extraComponentsMap,

package/app/helpers/html-to-vue/renderer.ts

@@ -27,6 +27,7 @@ export type ExtraComponentConfig = {
 export type RendererConfig = {
   container: {
     type: string;
+    class?: string;
   };
   extraComponentsMap: Record<string, ExtraComponentConfig>;
   renderAnyway: boolean;
@@ -113,5 +114,13 @@ export function renderer(
   const rendered = _render(createElement, ast);
   const children = flattenChildren(rendered);
 
-  return createElement(config.container.type, context?.data || {}, children);
+  const containerProps: Record<string, unknown> = { ...(context?.data || {}) };
+
+  if (config.container.class) {
+    containerProps.class = containerProps.class
+      ? [containerProps.class, config.container.class]
+      : config.container.class;
+  }
+
+  return createElement(config.container.type, containerProps, children);
 }

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/app/utils/routeQuery.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+
+import { firstQueryValue, toNumber } from "./routeQuery";
+
+describe("firstQueryValue", () => {
+  it("returns a plain string value", () => {
+    expect(firstQueryValue("name-asc")).toBe("name-asc");
+  });
+
+  it("returns the first element of a repeated (array) param", () => {
+    expect(firstQueryValue(["30", "45"])).toBe("30");
+  });
+
+  it("returns undefined for undefined", () => {
+    expect(firstQueryValue(undefined)).toBeUndefined();
+  });
+
+  it("returns undefined for null", () => {
+    expect(firstQueryValue(null)).toBeUndefined();
+  });
+
+  it("returns undefined for an empty array", () => {
+    expect(firstQueryValue([])).toBeUndefined();
+  });
+
+  it("returns undefined when the first array element is null", () => {
+    expect(firstQueryValue([null])).toBeUndefined();
+  });
+});
+
+describe("toNumber", () => {
+  it("parses an integer string", () => {
+    expect(toNumber("15")).toBe(15);
+  });
+
+  it("parses a decimal string", () => {
+    expect(toNumber("19.99")).toBe(19.99);
+  });
+
+  it("parses zero and negative values", () => {
+    expect(toNumber("0")).toBe(0);
+    expect(toNumber("-5")).toBe(-5);
+  });
+
+  it("returns undefined for undefined", () => {
+    expect(toNumber(undefined)).toBeUndefined();
+  });
+
+  it("returns undefined for an empty string", () => {
+    expect(toNumber("")).toBeUndefined();
+  });
+
+  it("returns undefined for a non-numeric string", () => {
+    expect(toNumber("abc")).toBeUndefined();
+    expect(toNumber("12px")).toBeUndefined();
+  });
+
+  it("returns undefined for non-finite values", () => {
+    expect(toNumber("Infinity")).toBeUndefined();
+  });
+
+  it("composes with firstQueryValue for repeated numeric params", () => {
+    expect(toNumber(firstQueryValue(["30", "45"]))).toBe(30);
+  });
+});

package/app/utils/routeQuery.ts

@@ -0,0 +1,26 @@
+import type { LocationQuery } from "vue-router";
+
+/**
+ * Collapses a route-query param to a single string.
+ *
+ * Router query values are `string | null`, an array when a param is repeated
+ * (e.g. `?p=1&p=2`), or `undefined` when absent. Returns the first usable
+ * string, or `undefined` for missing/empty/null values.
+ */
+export const firstQueryValue = (
+  value: LocationQuery[string] | undefined,
+): string | undefined => {
+  const raw = Array.isArray(value) ? value[0] : value;
+  return raw ?? undefined;
+};
+
+/**
+ * Parses a query string (typically from {@link firstQueryValue}) into a finite
+ * number, or `undefined` when missing/empty/non-numeric. Lets callers fall back
+ * with `??` instead of forwarding `NaN` into a request.
+ */
+export const toNumber = (value: string | undefined): number | undefined => {
+  if (value === undefined || value === "") return undefined;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : undefined;
+};

package/app/utils/useSelectedListingFilters.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  applyQueryToFilters,
+  createEmptyFilterState,
+} from "./useSelectedListingFilters";
+
+describe("applyQueryToFilters", () => {
+  it("populates sets from pipe-joined values", () => {
+    const state = createEmptyFilterState();
+    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",
+      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", () => {
+    const state = createEmptyFilterState();
+    applyQueryToFilters(state, {
+      "min-price": "10",
+      "max-price": "20",
+      rating: "4",
+      "shipping-free": "true",
+    });
+    applyQueryToFilters(state, {});
+    expect(state["min-price"]).toBeUndefined();
+    expect(state["max-price"]).toBeUndefined();
+    expect(state.rating).toBeUndefined();
+    expect(state["shipping-free"]).toBeUndefined();
+  });
+
+  it("keeps the Set identity stable across re-applies (reactive binding)", () => {
+    const state = createEmptyFilterState();
+    const manufacturerRef = state.manufacturer;
+    const propertiesRef = state.properties;
+    applyQueryToFilters(state, { manufacturer: "a" });
+    expect(state.manufacturer).toBe(manufacturerRef);
+    expect(state.properties).toBe(propertiesRef);
+  });
+
+  it("drops empty members from pipe-joined values", () => {
+    const state = createEmptyFilterState();
+    applyQueryToFilters(state, { manufacturer: "a||b|" });
+    expect([...state.manufacturer]).toEqual(["a", "b"]);
+  });
+
+  it("parses scalars array/NaN-safe and ignores junk", () => {
+    const state = createEmptyFilterState();
+    applyQueryToFilters(state, {
+      "min-price": ["10", "20"],
+      "max-price": "abc",
+      rating: "4",
+      "shipping-free": "true",
+    });
+    expect(state["min-price"]).toBe(10); // first of repeated param
+    expect(state["max-price"]).toBeUndefined(); // NaN -> undefined
+    expect(state.rating).toBe(4);
+    expect(state["shipping-free"]).toBe(true);
+  });
+
+  it("treats shipping-free other than 'true' as false", () => {
+    const state = createEmptyFilterState();
+    applyQueryToFilters(state, { "shipping-free": "false" });
+    expect(state["shipping-free"]).toBe(false);
+  });
+
+  it("is idempotent (same query twice -> equal state)", () => {
+    const state = createEmptyFilterState();
+    const query = { manufacturer: "a|b", rating: "4" };
+    applyQueryToFilters(state, query);
+    applyQueryToFilters(state, query);
+    expect([...state.manufacturer]).toEqual(["a", "b"]);
+    expect(state.rating).toBe(4);
+  });
+});

package/app/utils/useSelectedListingFilters.ts

@@ -0,0 +1,111 @@
+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";
+
+export type FilterState = {
+  manufacturer: Set<string>;
+  properties: Set<string>;
+  categories: Set<string>;
+  "min-price": number | undefined;
+  "max-price": number | undefined;
+  rating: number | undefined;
+  "shipping-free": boolean | undefined;
+};
+
+/** Fresh, fully-empty filter state. The single source of "no selection". */
+export const createEmptyFilterState = (): FilterState => ({
+  manufacturer: new Set<string>(),
+  properties: new Set<string>(),
+  categories: new Set<string>(),
+  "min-price": undefined,
+  "max-price": undefined,
+  rating: undefined,
+  "shipping-free": undefined,
+});
+
+/**
+ * Resets `state` to empty, then repopulates it from `query`. Pure with respect
+ * to the router: it only mutates `state`, never navigates or fetches.
+ *
+ * Reset-first is what clears filters whose query param vanished (e.g. browser
+ * Back/Forward), which the old add-only loop left lingering. Idempotent:
+ * applying the same query twice yields identical contents, so it is safe to
+ * call from a route.query watcher that also fires on the user's own
+ * executeSearch() push.
+ *
+ * Array-valued params (e.g. ?manufacturer=a&manufacturer=b) collapse to the
+ * first value via firstQueryValue; numeric params are NaN-safe via toNumber -
+ * consistent with the rest of the listing parsing.
+ */
+export const applyQueryToFilters = (
+  state: FilterState,
+  query: LocationQuery,
+): void => {
+  // 1) Reset every field. Clear the Sets in place so their identity is kept
+  //    (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", "categories"] as const) {
+    const value = firstQueryValue(query[code]);
+    if (!value) continue;
+    for (const element of value.split("|")) {
+      if (element) state[code].add(element);
+    }
+  }
+
+  const minPrice = toNumber(firstQueryValue(query["min-price"]));
+  if (minPrice !== undefined) state["min-price"] = minPrice;
+
+  const maxPrice = toNumber(firstQueryValue(query["max-price"]));
+  if (maxPrice !== undefined) state["max-price"] = maxPrice;
+
+  const rating = toNumber(firstQueryValue(query.rating));
+  if (rating !== undefined) state.rating = rating;
+
+  const shippingFree = firstQueryValue(query["shipping-free"]);
+  if (shippingFree !== undefined) {
+    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();
+  // Fresh state per call, deliberately: the sidebar and the horizontal filter
+  // bar each hold their own selection object, so a mutation in one is invisible
+  // to the other until it reaches the route. The URL is what synchronises them.
+  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/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

@@ -1,6 +1,9 @@
 import { createResolver } from "@nuxt/kit";
 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);
 
@@ -9,20 +12,20 @@ export default defineNuxtConfig({
   // to prevent bundling heavy 3D libraries in the initial bundle.
   // If you need 3D support, add "@tresjs/nuxt" to your app's nuxt.config.ts modules array
   // and dynamically import SwMedia3D using defineAsyncComponent.
-  modules: ["@unocss/nuxt", "@nuxt/image"],
+  //
+  // @unocss/nuxt is not included here either. This layer only ships CMS components,
+  // 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);
       }
     },
   },
@@ -85,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"),
   },
@@ -115,6 +103,24 @@ export default defineNuxtConfig({
     optimizeDeps: {
       include: ["xss"],
     },
+    build: {
+      // Async SwMedia3D/three chunk is ~977 kB after minify; that split is intentional.
+      chunkSizeWarningLimit: 1000,
+    },
+  },
+  nitro: {
+    rollupConfig: {
+      // @vueuse/shared still embeds @__NO_SIDE_EFFECTS__ inside JSDoc (injectLocal).
+      // Nitro/Rollup treats that as a misplaced annotation. Track upstream vueuse.
+      onwarn(warning: RollupLog, warn: LoggingFunction) {
+        if (
+          warning.message?.includes("annotation that Rollup cannot interpret")
+        ) {
+          return;
+        }
+        warn(warning);
+      },
+    },
   },
   telemetry: {
     enabled: false,