@shopware/cms-base-layer 0.0.0-canary-20260119085417 → 0.0.0-canary-20260119102238

package/README.md

@@ -349,7 +349,7 @@ No additional packages needed to be installed.
 
 Full changelog for stable version is available [here](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/CHANGELOG.md)
 
-### Latest changes: 0.0.0-canary-20260119085417
+### Latest changes: 0.0.0-canary-20260119102238
 
 ### Minor Changes
 
@@ -357,6 +357,8 @@ Full changelog for stable version is available [here](https://github.com/shopwar
 
   Includes new `SwFilterDropdown` and `SwProductListingFiltersHorizontal` components, with a `displayMode` prop added to all filter components to support both layouts.
 
+- [#2214](https://github.com/shopware/frontends/pull/2214) [`ccb9384`](https://github.com/shopware/frontends/commit/ccb93849be07f1b6a4e192de02579a528b5b6ac4) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Add full TypeScript typing to html-to-vue helper functions
+
 ### Patch Changes
 
 - [#2210](https://github.com/shopware/frontends/pull/2210) [`c6b88b7`](https://github.com/shopware/frontends/commit/c6b88b7d2c50054188356aeb0f83053554d442f5) Thanks [@mkucmus](https://github.com/mkucmus)! - Anchor tags with "btn btn-primary" classes from the API were not being

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

@@ -1,51 +1,80 @@
-//@ts-nocheck
 /**
  * Based on the https://github.com/HCESrl/html-to-vue
  */
+// @ts-expect-error - html-to-ast has type definition issues with package.json exports
 import { parse } from "html-to-ast";
 import type { NodeObject } from "./getOptionsFromNode";
 
+type ASTNode = NodeObject | NodeObject[];
+
+type VisitCallback = (
+  node: unknown,
+  parent: NodeObject | null,
+  key: string | null,
+  index: number | undefined,
+) => void;
+
+type ExtraComponentConfig = {
+  conditions: (node: NodeObject) => boolean;
+  renderer?: unknown;
+};
+
+export type RectifyConfig = {
+  extraComponentsMap?: Record<string, ExtraComponentConfig>;
+};
+
 /**
  * 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
+ * @param ast html-parse-stringify AST
+ * @param callback
  */
-function _visitAST(ast, callback) {
-  function _visit(node, parent, key, index) {
+function _visitAST(ast: ASTNode, callback: VisitCallback): void {
+  function _visit(
+    node: unknown,
+    parent: NodeObject | null,
+    key: string | null,
+    index: number | undefined,
+  ): void {
     callback(node, parent, key, index);
     if (Array.isArray(node)) {
       // node is an array
-      node.forEach((value, index) => {
-        _visit.call(this, value, node, null, index);
+      node.forEach((value, idx) => {
+        _visit(value, node as unknown as NodeObject, null, idx);
       });
     } else if (isNode(node)) {
       const keys = Object.keys(node);
       for (let i = 0; i < keys.length; i++) {
-        const child = node[keys[i]];
+        const childKey = keys[i];
+        if (childKey === undefined) continue;
+        const child = (node as Record<string, unknown>)[childKey];
         if (Array.isArray(child)) {
           for (let j = 0; j < child.length; j++) {
-            _visit.call(this, child[j], node, key, j);
+            _visit(child[j], node, key, j);
           }
         } else if (isNode(child)) {
-          _visit.call(this, child, node, key, undefined);
+          _visit(child, node, key, undefined);
         }
       }
     }
   }
-  _visit.call(this, ast, null, undefined, undefined);
+  _visit(ast, null, null, undefined);
 }
 
 /**
  *
  * @param node html-parse-stringify AST node
- * @returns {boolean|boolean}
+ * @returns {boolean}
  */
-export function isNode(node: NodeObject) {
-  return typeof node === "object" && typeof node.type !== "undefined";
+export function isNode(node: unknown): node is NodeObject {
+  return (
+    typeof node === "object" &&
+    node !== null &&
+    typeof (node as NodeObject).type !== "undefined"
+  );
 }
 
-export function generateAST(html) {
-  return parse(html);
+export function generateAST(html: string): ASTNode {
+  return parse(html) as ASTNode;
 }
 
 /**
@@ -54,16 +83,21 @@ export function generateAST(html) {
  * @param config
  * @returns {*}
  */
-export function rectifyAST(ast, config) {
-  const _ast = JSON.parse(JSON.stringify(ast));
+export function rectifyAST(ast: ASTNode, config: RectifyConfig): ASTNode {
+  const _ast = JSON.parse(JSON.stringify(ast)) as ASTNode;
   const keys = config.extraComponentsMap
     ? Object.keys(config.extraComponentsMap)
     : [];
   _visitAST(_ast, (node) => {
+    if (!isNode(node)) {
+      return;
+    }
     // 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)) {
+      if (currentKey === undefined) continue;
+      const componentConfig = config.extraComponentsMap?.[currentKey];
+      if (componentConfig?.conditions(node)) {
         node.name = currentKey;
       }
     }

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

@@ -7,7 +7,7 @@ export type NodeObject = {
   content: string;
 };
 
-type Options = {
+export type Options = {
   align?: string;
   attrs: Record<string, string>;
   class?: string;

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

@@ -3,17 +3,10 @@
  */
 
 import type { ComponentInternalInstance, h } from "vue";
-import { generateAST, rectifyAST } from "./ast";
-import { renderer } from "./renderer";
+import { type RectifyConfig, generateAST, rectifyAST } from "./ast";
+import { type RendererConfig, renderer } from "./renderer";
 
-type DefaultConfig = {
-  container: {
-    type: string;
-  };
-  extraComponentsMap: Record<string, unknown>;
-  renderAnyway: boolean;
-  textTransformer: (text: string) => string;
-};
+type DefaultConfig = RendererConfig;
 
 const defaultConfig: DefaultConfig = {
   container: {
@@ -33,7 +26,10 @@ export function renderHtml(
 ) {
   const mergedConfig = Object.assign(defaultConfig, config);
   const _ast = generateAST(html);
-  const _rectifiedAst = rectifyAST(_ast, config);
+  const rectifyConfig: RectifyConfig = {
+    extraComponentsMap: config.extraComponentsMap,
+  };
+  const _rectifiedAst = rectifyAST(_ast, rectifyConfig);
 
   return renderer(
     _rectifiedAst,

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

@@ -1,26 +1,86 @@
-//@ts-nocheck
 /**
  * Based on the https://github.com/HCESrl/html-to-vue
  */
 
+import type { ComponentInternalInstance, VNode } from "vue";
 import { isNode } from "./ast";
+import type { NodeObject } from "./getOptionsFromNode";
 import { getOptionsFromNode } from "./getOptionsFromNode";
 
+type ASTNode = NodeObject | NodeObject[];
+
+type RawChildren = string | number | boolean | VNode;
+
+type ExtraComponentRenderer = (
+  node: NodeObject,
+  children: RawChildren[],
+  createElement: typeof import("vue").h,
+  context: ComponentInternalInstance | null,
+) => VNode;
+
+export type ExtraComponentConfig = {
+  conditions: (node: NodeObject) => boolean;
+  renderer: ExtraComponentRenderer;
+};
+
+export type RendererConfig = {
+  container: {
+    type: string;
+  };
+  extraComponentsMap: Record<string, ExtraComponentConfig>;
+  renderAnyway: boolean;
+  textTransformer: (text: string) => string;
+};
+
+function flattenChildren(
+  children: RawChildren | RawChildren[] | undefined,
+): RawChildren[] {
+  if (children === undefined) {
+    return [];
+  }
+  if (Array.isArray(children)) {
+    const result: RawChildren[] = [];
+    for (const child of children) {
+      if (child !== null && child !== undefined) {
+        if (Array.isArray(child)) {
+          result.push(...flattenChildren(child));
+        } else {
+          result.push(child);
+        }
+      }
+    }
+    return result;
+  }
+  return [children];
+}
+
 /**
  * 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
+ * @param ast AST generated by html-parse-stringify
+ * @param config our configuration
+ * @param createElement vue's createElement
+ * @param context vue functional component context
+ * @param resolveUrl function to resolve URLs
  */
-export function renderer(ast, config, createElement, context, resolveUrl) {
-  function _render(h, node) {
+export function renderer(
+  ast: ASTNode,
+  config: RendererConfig,
+  createElement: typeof import("vue").h,
+  context: ComponentInternalInstance | null,
+  resolveUrl: (url: string) => string,
+): VNode {
+  function _render(
+    h: typeof createElement,
+    node: unknown,
+  ): RawChildren | RawChildren[] | undefined {
     if (Array.isArray(node)) {
-      const nodes = [];
+      const nodes: RawChildren[] = [];
       // node is an array
-      node.forEach((subnode, index) => {
-        nodes.push(_render.call(this, h, subnode, node, null, index, h));
-      });
+      for (const subnode of node) {
+        const rendered = _render(h, subnode);
+        const flattened = flattenChildren(rendered);
+        nodes.push(...flattened);
+      }
       return nodes;
     }
 
@@ -31,26 +91,26 @@ export function renderer(ast, config, createElement, context, resolveUrl) {
       }
       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));
-        });
+        const children: RawChildren[] = [];
+        for (const child of node.children) {
+          const rendered = _render(h, child);
+          const flattened = flattenChildren(rendered);
+          children.push(...flattened);
+        }
         // if it's an extra component use custom renderer
-        if (typeof config.extraComponentsMap[node.name] !== "undefined") {
-          return config.extraComponentsMap[node.name].renderer.call(
-            this,
-            node,
-            children,
-            h,
-            context,
-          );
+        const componentConfig = config.extraComponentsMap[node.name];
+        if (componentConfig !== undefined) {
+          return componentConfig.renderer(node, children, h, context);
         }
         // else, create normal html element
         return h(node.name, transformedNode, [...children]);
       }
     }
+    return undefined;
   }
-  return createElement(config.container.type, context.data, [
-    ..._render.call(this, createElement, ast),
-  ]);
+
+  const rendered = _render(createElement, ast);
+  const children = flattenChildren(rendered);
+
+  return createElement(config.container.type, context?.data || {}, children);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopware/cms-base-layer",
-  "version": "0.0.0-canary-20260119085417",
+  "version": "0.0.0-canary-20260119102238",
   "description": "Vue CMS Nuxt Layer for Shopware",
   "author": "Shopware",
   "repository": {