@pushwoosh/dumb-components 1.0.65 → 1.0.67

package/RichMessageEditor/RichMessageEditor.js

@@ -110,6 +110,9 @@ export const RichMessageEditor = ({
         if (selection) {
           onSelectionChange(selection);
         }
+      },
+      onDelete: () => {
+        setShowDrop(undefined);
       }
     }), showDrop && React.createElement("div", {
       style: floatingStyles,

package/RichMessageEditor/slate/DynamicContentElement.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare function renderElement(props: any): React.JSX.Element;
+export declare function renderElement(props: any, onDelete: () => void): React.JSX.Element;

package/RichMessageEditor/slate/DynamicContentElement.js

@@ -6,6 +6,7 @@ import { Chip } from '../../Chip';
 const DynamicContentElementComponent = ({
   attributes,
   element,
+  onDelete,
   children
 }) => {
   const editor = useSlateStatic();
@@ -38,6 +39,7 @@ const DynamicContentElementComponent = ({
           focus: point
         });
       }
+      onDelete();
     }
   }, React.createElement("span", null, tagName || 'Not set'), children);
 };
@@ -45,12 +47,14 @@ const Element = props => {
   const {
     attributes,
     children,
-    element
+    element,
+    onDelete
   } = props;
   switch (element.type) {
     case 'dc':
       return React.createElement(DynamicContentElementComponent, {
-        ...props
+        ...props,
+        onDelete: onDelete
       });
     default:
       return React.createElement("p", {
@@ -58,8 +62,9 @@ const Element = props => {
       }, children);
   }
 };
-export function renderElement(props) {
+export function renderElement(props, onDelete) {
   return React.createElement(Element, {
-    ...props
+    ...props,
+    onDelete: onDelete
   });
 }

package/RichMessageEditor/slate/SlateEditor.d.ts

@@ -13,6 +13,7 @@ export declare const SlateEditor: FC<SlateEditor>;
 type SlateEditableProps = {
     minHeight?: string;
     onFocus?: () => void;
+    onDelete: () => void;
 };
 export declare const SlateEditable: FC<SlateEditableProps>;
 export {};

package/RichMessageEditor/slate/SlateEditor.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Slate } from 'slate-react';
+import { usePersistentFunction } from '@pushwoosh/kit-helpers';
 import { renderElement } from './DynamicContentElement';
 import { content2string, string2content } from './helpers';
 import { EditableStyled } from './SlateEditor.styled';
@@ -23,11 +24,15 @@ export const SlateEditor = ({
 };
 export const SlateEditable = ({
   minHeight,
-  onFocus
+  onFocus,
+  onDelete
 }) => {
+  const renderElementPersistent = usePersistentFunction(props => {
+    return renderElement(props, onDelete);
+  });
   return React.createElement(EditableStyled, {
     "$minHeight": minHeight,
-    renderElement: renderElement,
+    renderElement: renderElementPersistent,
     onFocus: onFocus
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.0.65",
+  "version": "1.0.67",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/polyglot/index.d.ts

@@ -0,0 +1,2 @@
+export type { LangMessages, LangProps, UseLangHook } from './types';
+export { LangProvider, LangBase, useLangBase } from './react';

package/polyglot/index.js

@@ -0,0 +1 @@
+export { LangProvider, LangBase, useLangBase } from './react';

package/polyglot/liquid/filters.d.ts

@@ -0,0 +1,3 @@
+import type { Context, ScalarOrVariable, ScalarValue } from './types';
+export type FilterFn = (value: ScalarValue, args: ScalarOrVariable[], context: Context) => ScalarValue;
+export declare const filters: Record<string, FilterFn>;

package/polyglot/liquid/filters.js

@@ -0,0 +1,44 @@
+import { ensureNumber, ensureString, unpackScalarOrValue } from './helpers';
+const universalPluralize = (num, plurals) => num === 1 ? plurals[0] : plurals[1];
+const pluralizers = {
+  en: universalPluralize,
+  ru: (num, plurals) => {
+    if (num % 10 === 1 && num % 100 !== 11) {
+      return plurals[0];
+    }
+    if ([2, 3, 4].includes(num % 10) && ![12, 13, 14].includes(num % 100)) {
+      return plurals[1];
+    }
+    return plurals[2];
+  },
+  fr: universalPluralize,
+  de: universalPluralize,
+  es: universalPluralize
+};
+export const filters = {
+  capitalize: value => typeof value === 'string' ? value.charAt(0).toUpperCase() + value.slice(1) : value,
+  upperCase: value => typeof value === 'string' ? value.toUpperCase() : value,
+  lowerCase: value => typeof value === 'string' ? value.toLowerCase() : value,
+  pluralize: (value, args, context) => {
+    if (typeof value !== 'number') {
+      return value;
+    }
+    const variants = args.map(arg => unpackScalarOrValue(arg, context));
+    const pluralizer = pluralizers[context.language] || universalPluralize;
+    return pluralizer(value, variants);
+  },
+  formatNumber: (value, args, context) => {
+    const [fractionDigits] = args.map(arg => ensureNumber(unpackScalarOrValue(arg, context)));
+    const parts = ensureString(value).split('.');
+    let integerPart = parts[0];
+    let decimalPart = parts.length > 1 ? parts[1] : '';
+    integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+    if (fractionDigits !== undefined) {
+      decimalPart = decimalPart.substring(0, fractionDigits);
+      while (decimalPart.length < fractionDigits) {
+        decimalPart += '0';
+      }
+    }
+    return decimalPart ? `${integerPart},${decimalPart}` : integerPart;
+  }
+};

package/polyglot/liquid/helpers.d.ts

@@ -0,0 +1,9 @@
+import type { Context, ScalarOrVariable, ScalarValue } from './types';
+export declare function smartSplit(str: string, delim: string): string[];
+export declare function smartSplitAtFirstDelimiter(str: string, delim: string): [string, string?];
+export declare function ensureNumber(value: any): number;
+export declare function ensureString(value: any): string;
+export declare function addSpaceAroundOperators(expression: string): string;
+export declare function parseScalarOrVariable(value: string): ScalarOrVariable;
+export declare function stringifyScalarOrVariable(scalarOrVariable: ScalarOrVariable): string;
+export declare function unpackScalarOrValue(scalarOrVariable: ScalarOrVariable, context: Context): ScalarValue;

package/polyglot/liquid/helpers.js

@@ -0,0 +1,111 @@
+export function smartSplit(str, delim) {
+  const result = [];
+  let currentSegment = '';
+  let quoteCharacter;
+  let i = 0;
+  while (i < str.length) {
+    const currentChar = str[i];
+    const nextChar = str[i + 1];
+    if (currentChar === '\\' && quoteCharacter && nextChar === quoteCharacter) {
+      currentSegment += currentChar + nextChar;
+      i += 2;
+      continue;
+    }
+    if (str[i] === '"' || str[i] === '\'') {
+      if (!quoteCharacter) {
+        quoteCharacter = str[i];
+      } else if (str[i] === quoteCharacter) {
+        quoteCharacter = undefined;
+      }
+    }
+    if (!quoteCharacter && str.startsWith(delim, i)) {
+      result.push(currentSegment);
+      currentSegment = '';
+      i += delim.length;
+    } else {
+      currentSegment += str[i];
+      i++;
+    }
+  }
+  if (currentSegment) {
+    result.push(currentSegment);
+  }
+  return result;
+}
+export function smartSplitAtFirstDelimiter(str, delim) {
+  let quoteCharacter;
+  let i = 0;
+  while (i < str.length) {
+    if (str[i] === '\\' && quoteCharacter && str[i + 1] === quoteCharacter) {
+      i += 2;
+      continue;
+    }
+    if (str[i] === '"' || str[i] === '\'') {
+      if (!quoteCharacter) {
+        quoteCharacter = str[i];
+      } else if (str[i] === quoteCharacter) {
+        quoteCharacter = undefined;
+      }
+    }
+    if (!quoteCharacter && str.startsWith(delim, i)) {
+      return [str.slice(0, i), str.slice(i + delim.length)];
+    }
+    i++;
+  }
+  return [str];
+}
+export function ensureNumber(value) {
+  const parsed = parseFloat(value);
+  return Number.isNaN(parsed) ? 0 : parsed;
+}
+export function ensureString(value) {
+  if (value === undefined || value === null) {
+    return '';
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  return `${value}`;
+}
+export function addSpaceAroundOperators(expression) {
+  return expression.replace(/([=<>!]+)/g, match => ` ${match} `);
+}
+function isNumeric(value) {
+  return /^-?\d+(\.\d+)?$/.test(value);
+}
+export function parseScalarOrVariable(value) {
+  if (value.startsWith('"') && value.endsWith('"')) {
+    return {
+      type: 'Scalar',
+      value: value.slice(1, -1).replaceAll('\\"', '"')
+    };
+  }
+  if (value === 'true' || value === 'false') {
+    return {
+      type: 'Scalar',
+      value: value === 'true'
+    };
+  }
+  if (isNumeric(value)) {
+    return {
+      type: 'Scalar',
+      value: parseFloat(value)
+    };
+  }
+  return {
+    type: 'Variable',
+    name: value
+  };
+}
+export function stringifyScalarOrVariable(scalarOrVariable) {
+  if (scalarOrVariable.type === 'Scalar') {
+    return JSON.stringify(scalarOrVariable.value);
+  }
+  return scalarOrVariable.name;
+}
+export function unpackScalarOrValue(scalarOrVariable, context) {
+  if (scalarOrVariable.type === 'Scalar') {
+    return scalarOrVariable.value;
+  }
+  return context.values[scalarOrVariable.name];
+}

package/polyglot/liquid/parser.d.ts

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

package/polyglot/liquid/parser.js

@@ -0,0 +1,344 @@
+import { smartSplit, smartSplitAtFirstDelimiter, ensureString, addSpaceAroundOperators, parseScalarOrVariable } from './helpers';
+const pairedControlTokens = {
+  for: 'endfor',
+  if: 'endif'
+};
+const pairedControlTokensReversed = {
+  endfor: 'for',
+  endif: 'if'
+};
+function tokenizeLiquid(template) {
+  const tokens = [];
+  let cursor = 0;
+  let lineNo = 1;
+  const isEOF = () => cursor >= template.length;
+  const nextChar = () => {
+    if (template[cursor] === '\n') {
+      lineNo++;
+    }
+    return template[cursor++];
+  };
+  // const addToken = (part: Omit<Token, 'lineNo'>) => tokens.push({ ...part, lineNo });
+  const captureText = () => {
+    let value = '';
+    while (!isEOF() && ['{{', '{%', '<'].every(delimiter => !template.startsWith(delimiter, cursor))) {
+      value += nextChar();
+    }
+    if (value) {
+      tokens.push({
+        type: 'Text',
+        value,
+        lineNo
+      });
+    }
+  };
+  const captureUntil = (delimiter, skipChars) => {
+    cursor += skipChars; // Skip the {{ or {% or <
+    let value = '';
+    let inQuotes = false;
+    while (!isEOF()) {
+      if (template[cursor] === '"' || template[cursor] === '\'') {
+        inQuotes = !inQuotes;
+      }
+      if (!inQuotes && template.startsWith(delimiter, cursor)) {
+        break;
+      }
+      value += nextChar();
+    }
+    cursor += skipChars; // Skip the }} or %} or >
+    return value;
+  };
+  const captureFilterArgs = filterPart => {
+    const [filter, argsStr] = smartSplitAtFirstDelimiter(filterPart, ':');
+    const args = argsStr ? smartSplit(argsStr, ',').map(arg => arg.trim()) : [];
+    tokens.push({
+      type: 'Filter',
+      value: filter,
+      lineNo
+    });
+    args.forEach(arg => {
+      tokens.push({
+        type: 'FilterArg',
+        value: arg,
+        lineNo
+      });
+    });
+  };
+  const captureVariable = () => {
+    const value = captureUntil('}}', 2);
+    const [variableName, ...filters] = smartSplit(value.trim(), '|').map(part => part.trim());
+    if (variableName) {
+      tokens.push({
+        type: 'Variable',
+        value: variableName,
+        lineNo
+      });
+    }
+    filters.forEach(captureFilterArgs);
+  };
+  const captureControl = () => {
+    const value = captureUntil('%}', 2);
+    const trimLeft = value.startsWith('-');
+    const trimRight = value.endsWith('-');
+    const trimmedValue = value.replace(/^-|-$/g, '').trim();
+    const [control, arg] = smartSplitAtFirstDelimiter(trimmedValue, ' ');
+    if (pairedControlTokensReversed[control]) {
+      tokens.push({
+        type: 'ControlEnd',
+        value: pairedControlTokensReversed[control],
+        lineNo,
+        trimLeft,
+        trimRight
+      });
+    } else {
+      tokens.push({
+        type: 'Control',
+        value: control,
+        lineNo,
+        trimLeft,
+        trimRight
+      });
+      tokens.push({
+        type: 'ControlArg',
+        value: arg || '',
+        lineNo
+      });
+    }
+  };
+  const captureTag = () => {
+    const value = captureUntil('>', 1);
+    const [tagName, args] = smartSplitAtFirstDelimiter(value, ' ');
+    if (tagName.startsWith('/')) {
+      tokens.push({
+        type: 'TagEnd',
+        value: tagName.slice(1),
+        lineNo
+      });
+    } else {
+      tokens.push({
+        type: 'Tag',
+        value: tagName,
+        lineNo
+      });
+      tokens.push({
+        type: 'TagArg',
+        value: args || '',
+        lineNo
+      });
+    }
+  };
+  while (!isEOF()) {
+    if (template.startsWith('{{', cursor)) {
+      captureVariable();
+    } else if (template.startsWith('{%', cursor)) {
+      captureControl();
+    } else if (template.startsWith('<', cursor)) {
+      captureTag();
+    } else {
+      captureText();
+    }
+  }
+  // Add an EOF token at the end
+  tokens.push({
+    type: 'EOF',
+    value: '',
+    lineNo
+  });
+  return tokens;
+}
+export const ifOperatorFns = {
+  '==': (a, b) => a === b,
+  '!=': (a, b) => a !== b,
+  '>': (a, b) => a > b,
+  '<': (a, b) => a < b,
+  '>=': (a, b) => a >= b,
+  '<=': (a, b) => a <= b,
+  contains: (a, b) => ensureString(a).includes(ensureString(b)),
+  startsWith: (a, b) => ensureString(a).startsWith(ensureString(b)),
+  endsWith: (a, b) => ensureString(a).endsWith(ensureString(b))
+};
+const controlNodeParsers = {
+  if: (args, lineNo, childrens) => {
+    const [left, operator, right] = smartSplit(addSpaceAroundOperators(args), ' ').filter(part => part !== '');
+    if (!ifOperatorFns[operator]) {
+      throw new Error(`Syntax error: unknown operator ${operator} at line ${lineNo}`);
+    }
+    return {
+      type: 'Control',
+      name: 'if',
+      condition: [parseScalarOrVariable(left), operator, parseScalarOrVariable(right)],
+      children: childrens[0],
+      elseChildren: childrens[1],
+      lineNo
+    };
+  },
+  for: (args, lineNo, childrens) => {
+    const [varName,, over] = args.split(' ').filter(part => part !== '');
+    return {
+      type: 'Control',
+      name: 'for',
+      over: parseScalarOrVariable(over),
+      varName,
+      children: childrens[0],
+      lineNo
+    };
+  },
+  else: (_args, lineNo) => ({
+    type: 'Control',
+    name: 'else',
+    lineNo
+  })
+};
+function parseTokens(tokensArg) {
+  const controlStack = [];
+  let currentTokenIndex = 0;
+  function parseUntil(tokens, endType) {
+    const nodes = [];
+    while (currentTokenIndex < tokens.length) {
+      const token = tokens[currentTokenIndex];
+      if (token.type === endType) {
+        currentTokenIndex++;
+        return nodes;
+      }
+      const tokenHandlers = {
+        Text: () => {
+          nodes.push({
+            type: 'Text',
+            content: token.value
+          });
+          currentTokenIndex++;
+        },
+        Variable: () => {
+          const variableNode = {
+            type: 'Variable',
+            value: parseScalarOrVariable(token.value),
+            filters: [],
+            lineNo: token.lineNo
+          };
+          currentTokenIndex++;
+          while (tokens[currentTokenIndex] && tokens[currentTokenIndex].type === 'Filter') {
+            const filterToken = tokens[currentTokenIndex];
+            const filterNode = {
+              type: 'Filter',
+              name: filterToken.value,
+              args: [],
+              lineNo: filterToken.lineNo
+            };
+            currentTokenIndex++;
+            const args = [];
+            while (tokens[currentTokenIndex] && tokens[currentTokenIndex].type === 'FilterArg') {
+              args.push(parseScalarOrVariable(tokens[currentTokenIndex].value));
+              currentTokenIndex++;
+            }
+            filterNode.args = args;
+            variableNode.filters.push(filterNode);
+          }
+          nodes.push(variableNode);
+        },
+        Control: () => {
+          const controlNodeName = token.value;
+          const chidrens = [[], []];
+          let args = '';
+          currentTokenIndex++;
+          if (tokens[currentTokenIndex] && tokens[currentTokenIndex].type === 'ControlArg') {
+            args = tokens[currentTokenIndex].value;
+          } else {
+            throw new Error(`Syntax error: expected argument for ${controlNodeName} at line ${token.lineNo}`);
+          }
+          currentTokenIndex++;
+          if (pairedControlTokens[controlNodeName]) {
+            const controlChildren = parseUntil(tokens, 'ControlEnd');
+            const elseIndex = controlChildren.findIndex(child => child.type === 'Control' && child.name === 'else');
+            if (elseIndex !== -1) {
+              chidrens[0] = controlChildren.slice(0, elseIndex);
+              chidrens[1] = controlChildren.slice(elseIndex + 1);
+            } else {
+              chidrens[0] = controlChildren;
+            }
+          }
+          if (!controlNodeParsers[controlNodeName]) {
+            throw new Error(`Syntax error: unknown control ${controlNodeName} at line ${token.lineNo}`);
+          }
+          const controlNode = controlNodeParsers[controlNodeName](args.trim(), token.lineNo, chidrens);
+          controlStack.unshift(controlNode);
+          nodes.push(controlNode);
+        },
+        ControlEnd: () => {
+          if (controlStack.length === 0 || controlStack[0].type === 'Control' && controlStack[0].name === token.value) {
+            throw new Error(`Syntax error: unmatched ${token.value} at line ${token.lineNo}`);
+          }
+          controlStack.shift();
+          currentTokenIndex++;
+          return nodes;
+        },
+        Tag: () => {
+          const tagName = token.value;
+          let args = '';
+          currentTokenIndex++;
+          if (tokens[currentTokenIndex] && tokens[currentTokenIndex].type === 'TagArg') {
+            args = tokens[currentTokenIndex].value || '';
+            currentTokenIndex++;
+          }
+          const tagChildren = parseUntil(tokens, 'TagEnd');
+          const tagNode = {
+            type: 'Tag',
+            name: tagName,
+            // parse tag params color="red" => { color: "red" }
+            params: Object.fromEntries(smartSplit(args, ' ').filter(arg => arg).map(arg => arg.split('=')).map(([key, value]) => [key, parseScalarOrVariable(value)])),
+            children: tagChildren,
+            lineNo: token.lineNo
+          };
+          controlStack.unshift(tagNode);
+          nodes.push(tagNode);
+        },
+        TagEnd: () => {
+          if (controlStack.length === 0 || controlStack[0].type === 'Tag' && controlStack[0].name === token.value) {
+            throw new Error(`Syntax error: unmatched ${token.value} at line ${token.lineNo}`);
+          }
+          controlStack.shift();
+          currentTokenIndex++;
+          return nodes;
+        },
+        EOF: () => {
+          if (controlStack.length > 0) {
+            throw new Error(`Syntax error: unclosed ${controlStack[controlStack.length - 1].name}`);
+          }
+          return nodes;
+        }
+      };
+      if (tokenHandlers[token.type]) {
+        const checkerRes = tokenHandlers[token.type]();
+        if (checkerRes) {
+          return checkerRes;
+        }
+      } else {
+        throw new Error(`Unknown token type: ${token.type}`);
+      }
+    }
+    if (endType !== 'EOF') {
+      throw new Error(`Syntax error: expected ${endType} before end of file`);
+    }
+    return nodes;
+  }
+  return parseUntil(tokensArg, 'EOF');
+}
+export function stringToAst(template) {
+  const tokens = tokenizeLiquid(template);
+  const trimmedTokens = tokens.map((token, index) => {
+    if (token.type === 'Text') {
+      // eslint-disable-next-line no-nested-ternary
+      const prevControl = tokens[index - 1] && tokens[index - 1].type === 'ControlArg' ? tokens[index - 2] : tokens[index - 1] && tokens[index - 1].type === 'Control' ? tokens[index - 1] : undefined;
+      const leftTrim = prevControl === null || prevControl === void 0 ? void 0 : prevControl.trimRight;
+      const rightTrim = tokens[index + 1] && tokens[index + 1].trimLeft;
+      if (leftTrim || rightTrim) {
+        const newValue = leftTrim ? token.value.trimStart() : token.value;
+        return {
+          ...token,
+          value: rightTrim ? newValue.trimEnd() : newValue
+        };
+      }
+    }
+    return token;
+  });
+  return parseTokens(trimmedTokens);
+}

package/polyglot/liquid/render.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type ASTNodeList, type Context, type ScalarOrVariable } from './types';
+export declare function applyFilter(filterName: string, value: any, args: ScalarOrVariable[], context: Context): any;
+export declare function renderToString(ast: ASTNodeList, context: Context): string;
+export declare function renderToReact(ast: ASTNodeList, context: Context): React.ReactNode[];

package/polyglot/liquid/render.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { Text } from '@pushwoosh/kit-typography';
+import { filters } from './filters';
+import { stringifyScalarOrVariable, unpackScalarOrValue } from './helpers';
+import { ifOperatorFns } 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.
+// @param args The filter arguments to pass to the filter.
+// @param context The context in which the filter is applied.
+export function applyFilter(filterName, value, args, context) {
+  const filterFunction = filters[filterName];
+  if (filterFunction) {
+    return filterFunction(value, args, context);
+  }
+  console.warn(`Unknown filter: ${filterName}`);
+  return value;
+}
+const controlNodeRenderers = {
+  if: (node, context, renderTag) => {
+    const ifNode = node;
+    const [left, operator, right] = ifNode.condition;
+    if (ifOperatorFns[operator](unpackScalarOrValue(left, context), unpackScalarOrValue(right, context))) {
+      return renderNodesToArray(ifNode.children, context, renderTag);
+    }
+    if (ifNode.elseChildren) {
+      return renderNodesToArray(ifNode.elseChildren, context, renderTag);
+    }
+    return [];
+  },
+  for: (node, context, renderTag) => {
+    const forNode = node;
+    const value = unpackScalarOrValue(forNode.over, context);
+    if (Array.isArray(value)) {
+      const output = [];
+      for (let i = 0; i < value.length; i++) {
+        const item = value[i];
+        const newValues = {
+          ...context.values,
+          [forNode.varName]: item
+        };
+        output.push(...renderNodesToArray(forNode.children, {
+          ...context,
+          values: newValues
+        }, renderTag));
+      }
+      return output;
+    }
+    return [];
+  },
+  else: () => []
+};
+function renderNodesToArray(ast, context, renderTag) {
+  const output = [];
+  for (let i = 0; i < ast.length; i++) {
+    const node = ast[i];
+    if (node.type === 'Text') {
+      output.push(node.content);
+    } else if (node.type === 'Variable') {
+      const variableNode = node;
+      const value = variableNode.filters.reduce((acc, filter) => applyFilter(filter.name, acc, filter.args, context), unpackScalarOrValue(variableNode.value, context));
+      if (value !== undefined) {
+        output.push(value);
+      }
+    } else if (node.type === 'Control') {
+      const controlNode = node;
+      output.push(...controlNodeRenderers[controlNode.name](controlNode, context, renderTag));
+    } else if (node.type === 'Tag') {
+      const tagNode = node;
+      output.push(...renderTag(tagNode, renderNodesToArray(tagNode.children, context, renderTag), i));
+    }
+  }
+  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}>`]);
+  return outArr.join('');
+}
+export function renderToReact(ast, context) {
+  return renderNodesToArray(ast, context, (tagNode, children, key) => {
+    const TagName = tagNode.name;
+    const props = Object.fromEntries(Object.entries(tagNode.params).map(([key, value]) => [key, unpackScalarOrValue(value, context)]));
+    if (TagName === 'text') {
+      return [React.createElement(Text, {
+        "$variant": props.variant,
+        "$color": props.color && (Color[props.color] ?? props.color),
+        key: key
+      }, children)];
+    }
+    return [React.createElement(TagName, {
+      ...props,
+      key: key
+    }, children)];
+  });
+}

package/polyglot/liquid/types.d.ts

@@ -0,0 +1,72 @@
+export type TokenType = 'Text' | 'Variable' | 'Filter' | 'FilterArg' | 'Tag' | 'TagArg' | 'TagEnd' | 'Control' | 'ControlEnd' | 'ControlArg' | 'EOF';
+export type TokenTypeControl = 'Control' | 'ControlEnd';
+export type TokenBase = {
+    value: string;
+    lineNo: number;
+};
+export interface TokenUniversal extends TokenBase {
+    type: Exclude<TokenType, TokenTypeControl>;
+}
+export interface TokenControl extends TokenBase {
+    type: TokenTypeControl;
+    trimLeft: boolean;
+    trimRight: boolean;
+}
+export type Token = TokenUniversal | TokenControl;
+export type ScalarValue = string | number | boolean;
+export type ScalarOrVariable = {
+    type: 'Scalar';
+    value: ScalarValue;
+} | {
+    type: 'Variable';
+    name: string;
+};
+export type ControlName = 'if' | 'for' | 'else';
+export interface ASTNode {
+    type: string;
+    lineNo: number;
+}
+export interface TextNode extends ASTNode {
+    content: string;
+}
+export interface VariableNode extends ASTNode {
+    value: ScalarOrVariable;
+    filters: FilterNode[];
+}
+export interface FilterNode extends ASTNode {
+    name: string;
+    args: ScalarOrVariable[];
+}
+export type ASTNodeList = ASTNode[];
+/**
+ * ControlNode is a node that represents a control statement like {% if %} or {% for %}.
+ * It has a name, arguments, and children nodes.
+ * If the control statement has an {% else %} part, the elseChildren property will be set.
+ * The children and elseChildren properties are arrays of ASTNode.
+ */
+export interface ControlNodeIf extends ASTNode {
+    name: 'if';
+    condition: [ScalarOrVariable, string, ScalarOrVariable];
+    children: ASTNodeList;
+    elseChildren?: ASTNodeList;
+}
+export interface ControlNodeFor extends ASTNode {
+    name: 'for';
+    over: ScalarOrVariable;
+    varName: string;
+    children: ASTNodeList;
+}
+export interface ControlNodeElse extends ASTNode {
+    name: 'else';
+}
+export type ControlNode = ControlNodeIf | ControlNodeFor | ControlNodeElse;
+export interface TagNode extends ASTNode {
+    name: string;
+    params: Record<string, ScalarOrVariable>;
+    children: ASTNodeList;
+}
+export type IfOperator = '==' | '!=' | '>' | '<' | '>=' | '<=' | 'contains' | 'startsWith' | 'endsWith';
+export type Context = {
+    values: any;
+    language: string;
+};

package/polyglot/liquid/types.js

@@ -0,0 +1 @@
+export {};

package/polyglot/react.d.ts

@@ -0,0 +1,10 @@
+import { type FC, type PropsWithChildren } from 'react';
+import { type LangMessages } from './types';
+type LangProviderProps = {
+    language: string;
+    languages: Record<string, LangMessages<any>>;
+};
+export declare const LangProvider: FC<PropsWithChildren<LangProviderProps>>;
+export declare const LangBase: FC;
+export declare const useLangBase: () => (allProps: any) => string;
+export {};

package/polyglot/react.js

@@ -0,0 +1,60 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { stringToAst } from './liquid/parser';
+import { renderToReact, renderToString } from './liquid/render';
+const LangContext = createContext(null);
+export const LangProvider = ({
+  language,
+  languages,
+  children
+}) => {
+  const langFnPack = useMemo(() => {
+    const langMessages = languages[language];
+    const asts = Object.fromEntries(Object.entries(langMessages).map(([k, v]) => {
+      try {
+        return [k, stringToAst(v)];
+      } catch (e) {
+        console.error(k, v, e);
+        return [k, []];
+      }
+    }));
+    const getAst = message => {
+      const ast = asts[message];
+      if (!ast) {
+        console.error('no message', message);
+        return [];
+      }
+      return ast;
+    };
+    return {
+      lang: allProps => {
+        const {
+          message,
+          ...values
+        } = allProps;
+        const ast = getAst(message);
+        return renderToString(ast, {
+          values,
+          language
+        });
+      },
+      langReact: allProps => {
+        const {
+          message,
+          ...values
+        } = allProps;
+        const ast = getAst(message);
+        return renderToReact(ast, {
+          values,
+          language
+        });
+      }
+    };
+  }, [languages, language]);
+  return React.createElement(LangContext.Provider, {
+    value: langFnPack
+  }, children);
+};
+export const LangBase = props => {
+  return useContext(LangContext).langReact(props);
+};
+export const useLangBase = () => useContext(LangContext).lang;

package/polyglot/types.d.ts

@@ -0,0 +1,9 @@
+export type LangMessages<T> = {
+    [K in keyof T]: string;
+};
+export type LangProps<M> = {
+    [K in keyof M]: {
+        message: K;
+    } & M[K];
+}[keyof M];
+export type UseLangHook<M> = () => (props: LangProps<M>) => string;

package/polyglot/types.js

@@ -0,0 +1 @@
+export {};