@pushwoosh/dumb-components 1.1.38 → 1.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.38",
+  "version": "1.1.40",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -37,10 +37,10 @@
     "@codemirror/lang-liquid": "^6.2.2",
     "@floating-ui/react-dom": "^2.1.2",
     "@lezer/highlight": "^1.2.1",
-    "@pushwoosh/kit-constants": "^1.6.9",
-    "@pushwoosh/kit-helpers": "^4.8.2",
-    "@pushwoosh/kit-icons": "^2.1.2",
-    "@pushwoosh/kit-typography": "^1.7.3",
+    "@pushwoosh/kit-constants": "^1.6.12",
+    "@pushwoosh/kit-helpers": "^4.8.5",
+    "@pushwoosh/kit-icons": "^2.1.8",
+    "@pushwoosh/kit-typography": "^1.7.4",
     "@tippyjs/react": "^4.2.6",
     "@uiw/codemirror-themes": "^4.23.8",
     "@uiw/react-codemirror": "^4.23.8",

package/polyglot/liquid/parser.d.ts

@@ -1,3 +1,4 @@
 import { type ScalarValue, type ASTNodeList, type IfOperator } from './types';
+export declare const voidTags: Set<string>;
 export declare const ifOperatorFns: Record<IfOperator, (a: ScalarValue, b: ScalarValue) => boolean>;
 export declare function stringToAst(template: string): ASTNodeList;

package/polyglot/liquid/parser.js

@@ -7,6 +7,8 @@ const pairedControlTokensReversed = {
   endfor: 'for',
   endif: 'if'
 };
+// Add a list of void/self-closing HTML-like tags that do not require an explicit closing tag
+export const voidTags = new Set(['br', 'hr', 'img']);
 function tokenizeLiquid(template) {
   const tokens = [];
   let cursor = 0;
@@ -106,25 +108,40 @@ function tokenizeLiquid(template) {
     }
   };
   const captureTag = () => {
-    const value = captureUntil('>', 1);
-    const [tagName, args] = smartSplitAtFirstDelimiter(value, ' ');
-    if (tagName.startsWith('/')) {
+    const raw = captureUntil('>', 1);
+    const value = raw.trim();
+    // Closing tag: </tag>
+    if (value.startsWith('/')) {
+      const endName = value.slice(1).trim();
       tokens.push({
         type: 'TagEnd',
-        value: tagName.slice(1),
+        value: endName,
         lineNo
       });
-    } else {
+      return;
+    }
+    // Detect explicit self-closing syntax: <tag ... /> or <tag/>
+    const hasExplicitSelfClose = /\/$/.test(value);
+    const normalized = hasExplicitSelfClose ? value.replace(/\/$/, '').trimEnd() : value;
+    const [tagNameRaw, args] = smartSplitAtFirstDelimiter(normalized, ' ');
+    const tagName = tagNameRaw.trim();
+    tokens.push({
+      type: 'Tag',
+      value: tagName,
+      lineNo
+    });
+    tokens.push({
+      type: 'TagArg',
+      value: (args || '').trim(),
+      lineNo
+    });
+    // If the tag is a known void tag or explicitly self-closed, emit an immediate TagEnd
+    if (hasExplicitSelfClose || voidTags.has(tagName.toLowerCase())) {
       tokens.push({
-        type: 'Tag',
+        type: 'TagEnd',
         value: tagName,
         lineNo
       });
-      tokens.push({
-        type: 'TagArg',
-        value: args || '',
-        lineNo
-      });
     }
   };
   while (!isEOF()) {

package/polyglot/liquid/render.js

@@ -4,7 +4,7 @@ import { Color } from '@pushwoosh/kit-constants';
 import { variants } from '@pushwoosh/kit-typography/map';
 import { filters } from './filters';
 import { stringifyScalarOrVariable, unpackScalarOrValue } from './helpers';
-import { ifOperatorFns } from './parser';
+import { ifOperatorFns, voidTags } from './parser';
 // Applies a filter to a value.
 // @param filterName The name of the filter to apply.
 // @param value The value to which the filter should be applied.
@@ -75,7 +75,13 @@ function renderNodesToArray(ast, context, renderTag) {
   return output;
 }
 export function renderToString(ast, context) {
-  const outArr = renderNodesToArray(ast, context, (tagNode, children) => [`<${tagNode.name} ${Object.entries(tagNode.params).map(([key, value]) => `${key}=${stringifyScalarOrVariable(value)}`).join(' ')}>`, ...children, `</${tagNode.name}>`]);
+  const outArr = renderNodesToArray(ast, context, (tagNode, children) => {
+    const attrs = Object.entries(tagNode.params).map(([key, value]) => `${key}=${stringifyScalarOrVariable(value)}`).join(' ');
+    if (voidTags.has(tagNode.name)) {
+      return [attrs ? `<${tagNode.name} ${attrs}/>` : `<${tagNode.name}/>`];
+    }
+    return [attrs ? `<${tagNode.name} ${attrs}>` : `<${tagNode.name}>`, ...children, `</${tagNode.name}>`];
+  });
   return outArr.join('');
 }
 function getColor(color) {
@@ -107,6 +113,12 @@ export function renderToReact(ast, context) {
         key: key
       }, children)];
     }
+    if (voidTags.has(TagName)) {
+      return [React.createElement(TagName, {
+        ...props,
+        key: key
+      })];
+    }
     return [React.createElement(TagName, {
       ...props,
       key: key