@shopware/cms-base-layer 0.0.0-canary-20250116171244

package/components/public/cms/section/CmsSectionSidebar.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { useCmsSection } from "@shopware/composables";
+import type { CmsSectionSidebar } from "@shopware/composables";
+import { getTranslatedProperty } from "@shopware/helpers";
+import { computed } from "vue";
+import { useCategory } from "#imports";
+
+const props = defineProps<{
+  content: CmsSectionSidebar;
+}>();
+const { getPositionContent } = useCmsSection(props.content);
+
+const sidebarBlocks = getPositionContent("sidebar");
+const mainBlocks = getPositionContent("main");
+const mobileBehavior = computed(() => props.content.mobileBehavior);
+const { category } = useCategory();
+</script>
+
+<template>
+  <div class="cms-section-sidebar grid grid-cols-12 md:grid">
+    <div class="col-span-12 mx-8 md:mx-5 mt-8">
+      <h1 class="text-4xl font-extrabold tracking-tight text-gray-900">
+        {{ getTranslatedProperty(category, "name") }}
+      </h1>
+    </div>
+    <div class="col-span-12 md:col-span-7 lg:col-span-9 order-1 md:order-2">
+      <CmsGenericBlock
+        v-for="cmsBlock in mainBlocks"
+        :key="cmsBlock.id"
+        class="overflow-auto"
+        :content="cmsBlock"
+      />
+    </div>
+    <div
+      :class="{
+        'align-top col-span-12 md:col-span-5 lg:col-span-3 order-2 md:order-1':
+          mobileBehavior !== 'hidden',
+        'hidden md:block': mobileBehavior === 'hidden',
+      }"
+    >
+      <CmsGenericBlock
+        v-for="cmsBlock in sidebarBlocks"
+        :key="cmsBlock.id"
+        class="overflow-auto"
+        :content="cmsBlock"
+      />
+    </div>
+  </div>
+</template>

package/components/public/cms/skeleton/ProductCardSkeleton.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    role="status"
+    class="max-w-sm p-4 border border-gray-200 rounded shadow animate-pulse md:p-6 dark:border-gray-700"
+  >
+    <div
+      class="flex items-center justify-center h-48 mb-4 bg-gray-300 rounded dark:bg-gray-700"
+    >
+      <svg
+        class="w-10 h-10 text-gray-200 dark:text-gray-600"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 16 20"
+      >
+        <path
+          d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"
+        />
+        <path
+          d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"
+        />
+      </svg>
+    </div>
+    <div
+      class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"
+    ></div>
+    <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
+    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
+    <div class="mt-4 text-right">
+      <div
+        class="mt-8 h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-24"
+      ></div>
+      <button
+        disabled
+        tabindex="-1"
+        class="select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 rounded-lg text-white shadow-gray-900/10 hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none h-8 w-20 bg-gray-300 shadow-none hover:shadow-none"
+        type="button"
+      >
+        &nbsp;
+      </button>
+    </div>
+    <span class="sr-only">Loading...</span>
+  </div>
+</template>

package/dist/index.d.mts

@@ -0,0 +1,5 @@
+import { NuxtModule } from '@nuxt/schema';
+
+declare const nuxtModule: NuxtModule;
+
+export { nuxtModule as default };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { NuxtModule } from '@nuxt/schema';
+
+declare const nuxtModule: NuxtModule;
+
+export { nuxtModule as default };

package/dist/index.mjs

@@ -0,0 +1,31 @@
+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 nuxtModule = 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 { nuxtModule as default };

package/helpers/clientOnly.ts

@@ -0,0 +1,11 @@
+import { defineComponent, onMounted, ref } from "vue";
+
+export const ClientOnly = defineComponent({
+  setup(_, { slots }) {
+    const init = ref(false);
+    onMounted(() => {
+      init.value = true;
+    });
+    return () => (init.value && slots.default ? slots.default() : null);
+  },
+});

package/helpers/html-to-vue/ast.ts

@@ -0,0 +1,72 @@
+//@ts-nocheck
+/**
+ * Based on the https://github.com/HCESrl/html-to-vue
+ */
+import { parse } from "html-to-ast";
+import type { NodeObject } from "./getOptionsFromNode";
+
+/**
+ * Visit each node in the AST - with callback (adapted from https://lihautan.com/manipulating-ast-with-javascript/)
+ * @param {*} ast html-parse-stringify AST
+ * @param {*} callback
+ */
+function _visitAST(ast, callback) {
+  function _visit(node, parent, key, index) {
+    callback(node, parent, key, index);
+    if (Array.isArray(node)) {
+      // node is an array
+      node.forEach((value, index) => {
+        _visit.call(this, value, node, null, index);
+      });
+    } else if (isNode(node)) {
+      const keys = Object.keys(node);
+      for (let i = 0; i < keys.length; i++) {
+        const child = node[keys[i]];
+        if (Array.isArray(child)) {
+          for (let j = 0; j < child.length; j++) {
+            _visit.call(this, child[j], node, key, j);
+          }
+        } else if (isNode(child)) {
+          _visit.call(this, child, node, key, undefined);
+        }
+      }
+    }
+  }
+  _visit.call(this, ast, null, undefined, undefined);
+}
+
+/**
+ *
+ * @param node html-parse-stringify AST node
+ * @returns {boolean|boolean}
+ */
+export function isNode(node: NodeObject) {
+  return typeof node === "object" && typeof node.type !== "undefined";
+}
+
+export function generateAST(html) {
+  return parse(html);
+}
+
+/**
+ * Converts ast html nodes in vue components
+ * @param ast
+ * @param config
+ * @returns {*}
+ */
+export function rectifyAST(ast, config) {
+  const _ast = JSON.parse(JSON.stringify(ast));
+  const keys = config.extraComponentsMap
+    ? Object.keys(config.extraComponentsMap)
+    : [];
+  _visitAST(_ast, (node) => {
+    // checking whether the AST has some components that has to become Vue Components
+    for (let i = 0; i < keys.length; i++) {
+      const currentKey = keys[i];
+      if (config.extraComponentsMap[currentKey].conditions(node)) {
+        node.name = currentKey;
+      }
+    }
+  });
+  return _ast;
+}

package/helpers/html-to-vue/getOptionsFromNode.test.ts

@@ -0,0 +1,129 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { getOptionsFromNode } from "./getOptionsFromNode";
+import type { NodeObject } from "./getOptionsFromNode";
+
+describe("getOptionsFromNode", () => {
+  const consoleErrorSpy = vi.spyOn(console, "error");
+  const urlResolverMock = vi.fn();
+
+  beforeEach(() => {
+    vi.resetAllMocks();
+    consoleErrorSpy.mockImplementation(() => {});
+    urlResolverMock.mockImplementation((url) => `resolved-url${url}`);
+  });
+
+  it("should return empty object if node is undefined", () => {
+    const options = getOptionsFromNode(
+      undefined as unknown as NodeObject,
+      urlResolverMock,
+    );
+
+    expect(options).toEqual({
+      attrs: {},
+    });
+  });
+
+  it("should return options object with style, classNames, and align", () => {
+    const node = {
+      attrs: {
+        style: "color: red",
+        class: "my-class",
+        align: "center",
+      },
+    };
+
+    const options = getOptionsFromNode(
+      node as unknown as NodeObject,
+      urlResolverMock,
+    );
+
+    expect(options).toEqual({
+      style: "color: red",
+      class: "my-class",
+      align: "center",
+      attrs: {},
+    });
+  });
+
+  it("should return options object without style, classNames, and align if they are not present in node.attrs", () => {
+    const node = {
+      attrs: {},
+    };
+
+    const options = getOptionsFromNode(
+      node as unknown as NodeObject,
+      urlResolverMock,
+    );
+
+    expect(options).toEqual({
+      attrs: {},
+    });
+  });
+
+  it("should return empty object when no attrs in node", () => {
+    const node = {
+      attrs: undefined,
+    };
+
+    const options = getOptionsFromNode(
+      node as unknown as NodeObject,
+      urlResolverMock,
+    );
+
+    expect(options).toEqual({
+      attrs: {},
+    });
+  });
+
+  it("should resolve URL if attrs.href exists", () => {
+    const node = {
+      attrs: {
+        href: "/path/to/page",
+      },
+    };
+
+    const options = getOptionsFromNode(
+      node as unknown as NodeObject,
+      urlResolverMock,
+    );
+
+    expect(options.attrs.href).toEqual("resolved-url/path/to/page");
+  });
+
+  it('should add additional attrs to "attrs" object', () => {
+    const node = {
+      attrs: {
+        href: "/path/to/page",
+        "data-test": "test",
+      },
+    };
+
+    const options = getOptionsFromNode(
+      node as unknown as NodeObject,
+      urlResolverMock,
+    );
+
+    expect(options.attrs.href).toEqual("resolved-url/path/to/page");
+    expect(options.attrs["data-test"]).toEqual("test");
+  });
+
+  it("should show console error if something went wrong", () => {
+    const node = {
+      attrs: {
+        href: "/path/to/page",
+      },
+    };
+
+    const consoleErrorSpy = vi.spyOn(console, "error");
+
+    const options = getOptionsFromNode(
+      node as unknown as NodeObject,
+      undefined as unknown as (url: string) => string,
+    );
+
+    expect(options).toEqual({
+      attrs: {},
+    });
+    expect(consoleErrorSpy).toBeCalled();
+  });
+});

package/helpers/html-to-vue/getOptionsFromNode.ts

@@ -0,0 +1,52 @@
+export type NodeObject = {
+  type: string;
+  name: string;
+  attrs?: Options;
+  children: NodeObject[];
+  voidElement: boolean;
+  content: string;
+};
+
+type Options = {
+  align?: string;
+  attrs: Record<string, string>;
+  class?: string;
+  color?: string;
+  style?: string;
+  href?: string;
+};
+
+export function getOptionsFromNode(
+  node: NodeObject,
+  resolveUrl: (url: string) => string,
+): Options {
+  const response: Options = {
+    attrs: {},
+  };
+  try {
+    if (!node?.attrs) {
+      return response;
+    }
+
+    const { align, style, class: classNames, href, ...attrs } = node.attrs;
+
+    if (align) {
+      response.align = align;
+    }
+    if (style) {
+      response.style = style;
+    }
+    if (classNames) {
+      response.class = classNames;
+    }
+    if (attrs && Object.keys(attrs).length > 0) {
+      response.attrs = attrs as unknown as Record<string, string>;
+    }
+    if (href) {
+      response.attrs.href = resolveUrl(href);
+    }
+  } catch (e) {
+    console.error("[Shopware][cms][getOptionsFromNode] error", e);
+  }
+  return response;
+}

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

@@ -0,0 +1,45 @@
+/**
+ * Based on the https://github.com/HCESrl/html-to-vue
+ */
+
+import type { ComponentInternalInstance, h } from "vue";
+import { generateAST, rectifyAST } from "./ast";
+import { renderer } from "./renderer";
+
+type DefaultConfig = {
+  container: {
+    type: string;
+  };
+  extraComponentsMap: Record<string, unknown>;
+  renderAnyway: boolean;
+  textTransformer: (text: string) => string;
+};
+
+const defaultConfig: DefaultConfig = {
+  container: {
+    type: "div",
+  },
+  extraComponentsMap: {},
+  renderAnyway: false,
+  textTransformer: (text: string) => text,
+};
+
+export function renderHtml(
+  html: string,
+  config: Partial<DefaultConfig>,
+  createElement: typeof h,
+  context: ComponentInternalInstance | null,
+  resolveUrl: (url: string) => string,
+) {
+  const mergedConfig = Object.assign(defaultConfig, config);
+  const _ast = generateAST(html);
+  const _rectifiedAst = rectifyAST(_ast, config);
+
+  return renderer(
+    _rectifiedAst,
+    mergedConfig,
+    createElement,
+    context,
+    resolveUrl,
+  );
+}

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

@@ -0,0 +1,56 @@
+//@ts-nocheck
+/**
+ * Based on the https://github.com/HCESrl/html-to-vue
+ */
+
+import { isNode } from "./ast";
+import { getOptionsFromNode } from "./getOptionsFromNode";
+
+/**
+ * rendering the ast into vue render functions
+ * @param {*} ast AST generated by html-parse-stringify
+ * @param {*} config our configuration
+ * @param {*} createElement vue's createElement
+ * @param {*} context vue functional component context
+ */
+export function renderer(ast, config, createElement, context, resolveUrl) {
+  function _render(h, node) {
+    if (Array.isArray(node)) {
+      const nodes = [];
+      // node is an array
+      node.forEach((subnode, index) => {
+        nodes.push(_render.call(this, h, subnode, node, null, index, h));
+      });
+      return nodes;
+    }
+
+    if (isNode(node)) {
+      // node is either a node with children or a node or a text node
+      if (node.type === "text") {
+        return config.textTransformer(node.content); // return text
+      }
+      if (node.type === "tag") {
+        const transformedNode = getOptionsFromNode(node, resolveUrl);
+        const children = [];
+        node.children.forEach((child, index) => {
+          children.push(_render.call(this, h, child, transformedNode, index));
+        });
+        // if it's an extra component use custom renderer
+        if (typeof config.extraComponentsMap[node.name] !== "undefined") {
+          return config.extraComponentsMap[node.name].renderer.call(
+            this,
+            transformedNode,
+            children,
+            h,
+            context,
+          );
+        }
+        // else, create normal html element
+        return h(node.name, transformedNode, [...children]);
+      }
+    }
+  }
+  return createElement(config.container.type, context.data, [
+    ..._render.call(this, createElement, ast),
+  ]);
+}

package/helpers/media/isSpatial.ts

@@ -0,0 +1,8 @@
+export function isSpatial<
+  T extends {
+    fileExtension: string;
+    url?: string;
+  },
+>(media: T) {
+  return media.fileExtension === "glb" || !!media.url?.endsWith(".glb");
+}

package/index.cjs

@@ -0,0 +1,7 @@
+// 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");

package/nuxt.config.ts

@@ -0,0 +1,21 @@
+import type { NuxtConfig } from "@nuxt/schema";
+import { defineNuxtConfig } from "nuxt/config";
+export default defineNuxtConfig({
+  components: [
+    {
+      path: "./components/public",
+      pathPrefix: false,
+      // global: true,
+    },
+    {
+      path: "./components/",
+      pattern: "Sw*",
+      extensions: [".vue"],
+      global: false,
+    },
+  ],
+  build: {
+    transpile: ["@shopware/cms-base-layer"],
+  },
+  telemetry: false,
+}) as NuxtConfig;

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@shopware/cms-base-layer",
+  "version": "0.0.0-canary-20250116171244",
+  "description": "Vue CMS Nuxt Layer for Shopware",
+  "author": "Shopware",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shopware/frontends.git"
+  },
+  "homepage": "https://frontends.shopware.com/framework/shopping-experiences.html",
+  "keywords": [
+    "Shopware",
+    "Vue",
+    "CMS",
+    "Nuxt",
+    "Layer"
+  ],
+  "bugs": {
+    "url": "https://github.com/shopware/frontends/issues"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "files": [
+    "dist",
+    "components",
+    "helpers",
+    "index.cjs",
+    "nuxt.config.ts"
+  ],
+  "dependencies": {
+    "@nuxt/kit": "3.14.1592",
+    "@tresjs/cientos": "4.0.2",
+    "@tresjs/core": "4.3.1",
+    "@vuelidate/core": "2.0.3",
+    "@vuelidate/validators": "2.0.4",
+    "@vueuse/core": "11.2.0",
+    "entities": "5.0.0",
+    "html-to-ast": "0.0.6",
+    "three": "0.166.1",
+    "vue": "3.5.13",
+    "xss": "1.0.15",
+    "@shopware/composables": "0.0.0-canary-20250116171244",
+    "@shopware/helpers": "0.0.0-canary-20250116171244",
+    "@shopware/api-client": "1.2.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.8.3",
+    "@nuxt/schema": "3.14.1592",
+    "@types/three": "0.166.0",
+    "@vitest/coverage-v8": "2.1.8",
+    "nuxt": "3.14.1592",
+    "typescript": "5.6.3",
+    "unbuild": "2.0.0",
+    "vitest": "2.1.8",
+    "vue-router": "4.5.0",
+    "vue-tsc": "2.1.10",
+    "tsconfig": "0.0.0"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --stub",
+    "lint": "biome check .",
+    "lint:fix": "biome check . --write && pnpm run typecheck",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}