@relevate/katachi 0.1.0 → 0.2.0

package/README.md

@@ -9,9 +9,10 @@ Today it can emit:
 - static-oriented TSX components
 - Askama Rust wrapper files
 - Askama include partials
+- Shopify Liquid snippets
 
 Katachi is still early, but it is already usable if you need one component
-source that can target both React-style environments and Askama.
+source that can target React-style environments, Askama, or Shopify Liquid.
 
 ## Getting Started
 
@@ -77,6 +78,7 @@ By default, Katachi writes:
 - `dist/jsx-static`
 - `dist/askama`
 - `dist/askama/includes`
+- `dist/liquid/snippets`
 
 If you want custom paths:
 
@@ -124,6 +126,13 @@ pnpm exec katachi build
 
 That generates target-specific files under `dist/`.
 
+If you are working inside the Katachi source repository itself, use the local
+bin entrypoint instead:
+
+```bash
+node ./bin/katachi.mjs build --project ./examples/basic
+```
+
 ## What Katachi Generates
 
 By default, build output goes to:
@@ -132,6 +141,7 @@ By default, build output goes to:
 - `dist/jsx-static/**/*.tsx`
 - `dist/askama/**/*.rs`
 - `dist/askama/includes/**/*.html`
+- `dist/liquid/snippets/**/*.liquid`
 
 Nested templates preserve their relative directory layout.
 
@@ -142,11 +152,11 @@ Nested templates preserve their relative directory layout.
 - dynamic `class` and `className` arrays
 - `If`
 - `For`
-- `safe(...)`
 - nested components
 - React output
 - static-oriented TSX output
 - Askama output
+- Shopify Liquid snippet output
 
 ## Why Katachi Exists
 

package/dist/api/index.d.ts

@@ -11,6 +11,13 @@ export type IfProps = {
     test: unknown;
     children?: TemplateNode;
 };
+export type ElementTagPart = string | number | boolean | null | undefined;
+export type ElementTag = string | readonly [string, ElementTagPart] | readonly [string, ElementTagPart, string];
+export type ElementProps = {
+    tag: ElementTag;
+    children?: TemplateNode;
+    [attrName: string]: unknown;
+};
 export type ForProps<T = unknown> = {
     each: readonly T[] | T[] | null | undefined;
     as: string;
@@ -22,16 +29,15 @@ export type ForProps<T = unknown> = {
  * templates directly and never evaluates this function during normal use.
  */
 export declare function If(_props: IfProps): TemplateNode;
+/**
+ * Placeholder runtime export for dynamic intrinsic tags in template files.
+ */
+export declare function Element(_props: ElementProps): TemplateNode;
 /**
  * Placeholder runtime export for template files. The compiler reads source
  * templates directly and never evaluates this function during normal use.
  */
 export declare function For<T>(_props: ForProps<T>): TemplateNode;
-/**
- * Marks a printed value as safe in Katachi templates. This is a no-op at the
- * API layer because escaping is handled by target emitters.
- */
-export declare function safe<T>(value: T): T;
 /**
  * Portable length helper for Katachi templates.
  */

package/dist/api/index.js

@@ -6,18 +6,17 @@ export function If(_props) {
     return null;
 }
 /**
- * Placeholder runtime export for template files. The compiler reads source
- * templates directly and never evaluates this function during normal use.
+ * Placeholder runtime export for dynamic intrinsic tags in template files.
  */
-export function For(_props) {
+export function Element(_props) {
     return null;
 }
 /**
- * Marks a printed value as safe in Katachi templates. This is a no-op at the
- * API layer because escaping is handled by target emitters.
+ * Placeholder runtime export for template files. The compiler reads source
+ * templates directly and never evaluates this function during normal use.
  */
-export function safe(value) {
-    return value;
+export function For(_props) {
+    return null;
 }
 /**
  * Portable length helper for Katachi templates.

package/dist/cli/index.js

@@ -6,14 +6,16 @@ function printHelp() {
     console.log(`Katachi
 
 Usage:
-  katachi build [--project <dir>] [--templates <dir>] [--dist <dir>]
+  katachi build [--project <dir>] [--templates <dir>] [--dist <dir>] [--target <name>]...
   katachi verify:examples
   katachi help
 
-Defaults:
-  --project   current working directory
-  --templates <project>/src/templates
-  --dist      <project>/dist`);
+Options:
+  --project   Project root directory (default: cwd)
+  --templates Template source directory (default: <project>/src/templates)
+  --dist      Output directory (default: <project>/dist)
+  --target    Emit only the specified target(s). Can be repeated.
+              Available: react, jsx-static, askama, askama-includes, liquid`);
 }
 function parseArgs(argv) {
     const [commandArg, ...rest] = argv;
@@ -40,6 +42,12 @@ function parseArgs(argv) {
             index += 1;
             continue;
         }
+        if (current === "--target" && next) {
+            options.targets ??= [];
+            options.targets.push(next);
+            index += 1;
+            continue;
+        }
         throw new Error(`Unknown or incomplete option: ${current}`);
     }
     return options;
@@ -55,6 +63,7 @@ function run() {
             projectRoot: options.projectRoot,
             templatesDir: options.templatesDir,
             distDir: options.distDir,
+            targets: options.targets,
         });
         return;
     }

package/dist/core/ast.d.ts

@@ -49,6 +49,9 @@ export type ClassItem = {
     kind: "when";
     test: Expr;
     value: string;
+} | {
+    kind: "dynamic";
+    expr: Expr;
 };
 export type AttrValue = {
     kind: "text";
@@ -59,6 +62,16 @@ export type AttrValue = {
 } | {
     kind: "classList";
     items: ClassItem[];
+} | {
+    kind: "concat";
+    parts: Expr[];
+};
+export type TagName = {
+    kind: "static";
+    name: string;
+} | {
+    kind: "dynamic";
+    parts: Expr[];
 };
 export type Node = {
     kind: "text";
@@ -69,7 +82,6 @@ export type Node = {
 } | {
     kind: "print";
     expr: Expr;
-    safe?: boolean;
 } | {
     kind: "if";
     test: Expr;
@@ -83,7 +95,7 @@ export type Node = {
     indexName?: string | null;
 } | {
     kind: "element";
-    tag: string;
+    tag: TagName;
     attrs?: Record<string, AttrValue>;
     children?: Node[];
 } | {
@@ -106,10 +118,11 @@ export declare const not: (expr: Expr) => Expr;
 export declare const textAttr: (value: string) => AttrValue;
 export declare const exprAttr: (expr: Expr) => AttrValue;
 export declare const classList: (...items: ClassItem[]) => AttrValue;
+export declare const concatAttr: (...parts: Expr[]) => AttrValue;
 export declare const textNode: (value: string) => Node;
 export declare const slotNode: (name: string) => Node;
-export declare const printNode: (expr: Expr, safe?: boolean) => Node;
+export declare const printNode: (expr: Expr) => Node;
 export declare const ifNode: (test: Expr, thenNodes: Node[], elseNodes?: Node[]) => Node;
 export declare const forNode: (item: string, each: Expr, children?: Node[], indexName?: string | null) => Node;
-export declare const elementNode: (tag: string, attrs?: Record<string, AttrValue>, children?: Node[]) => Node;
+export declare const elementNode: (tag: string | TagName, attrs?: Record<string, AttrValue>, children?: Node[]) => Node;
 export declare const componentNode: (name: string, props?: Record<string, AttrValue>, children?: Node[]) => Node;

package/dist/core/ast.js

@@ -21,9 +21,10 @@ export const not = (expr) => ({ kind: "not", expr });
 export const textAttr = (value) => ({ kind: "text", value });
 export const exprAttr = (expr) => ({ kind: "expr", expr });
 export const classList = (...items) => ({ kind: "classList", items });
+export const concatAttr = (...parts) => ({ kind: "concat", parts });
 export const textNode = (value) => ({ kind: "text", value });
 export const slotNode = (name) => ({ kind: "slot", name });
-export const printNode = (expr, safe = false) => ({ kind: "print", expr, safe });
+export const printNode = (expr) => ({ kind: "print", expr });
 export const ifNode = (test, thenNodes, elseNodes = []) => ({
     kind: "if",
     test,
@@ -39,7 +40,7 @@ export const forNode = (item, each, children = [], indexName = null) => ({
 });
 export const elementNode = (tag, attrs = {}, children = []) => ({
     kind: "element",
-    tag,
+    tag: typeof tag === "string" ? { kind: "static", name: tag } : tag,
     attrs,
     children,
 });

package/dist/core/build.d.ts

@@ -3,6 +3,8 @@ export interface BuildProjectOptions {
     projectRoot?: string;
     distDir?: string;
     templatesDir?: string;
+    /** Emit only the specified target IDs. When omitted, all targets are emitted. */
+    targets?: string[];
     logger?: Pick<Console, "log">;
 }
 export interface BuildProjectResult {

package/dist/core/build.js

@@ -47,6 +47,15 @@ export function buildProject(options = {}) {
     const templatesDir = options.templatesDir ?? resolve(projectRoot, "src/templates");
     const logger = options.logger ?? console;
     const writtenFiles = [];
+    const allTargetIds = outputTargets.map((t) => t.id);
+    let activeTargets = outputTargets;
+    if (options.targets && options.targets.length > 0) {
+        const unknown = options.targets.filter((t) => !allTargetIds.includes(t));
+        if (unknown.length > 0) {
+            throw new Error(`Unknown target(s): ${unknown.join(", ")}. Available: ${allTargetIds.join(", ")}`);
+        }
+        activeTargets = outputTargets.filter((t) => options.targets.includes(t.id));
+    }
     mkdirSync(distDir, { recursive: true });
     const templateFiles = collectTemplateFiles(templatesDir);
     const parsedTemplates = templateFiles.map((filePath) => {
@@ -79,11 +88,14 @@ export function buildProject(options = {}) {
             componentRegistry[entry.localName] = {
                 reactImport: toRelativeModulePath(template.relativePath, importedTemplate.relativePath.replace(/\.template\.tsx$/, "")),
                 include: toRelativeIncludePath(template.relativePath, importedTemplate.relativePath),
+                liquidSnippet: importedTemplate.relativePath
+                    .replace(/\.template\.tsx$/, "")
+                    .replaceAll("\\", "/"),
             };
         }
         template.componentRegistry = componentRegistry;
         const templateDir = dirname(template.relativePath);
-        for (const target of outputTargets) {
+        for (const target of activeTargets) {
             for (const output of target.emitFiles(template)) {
                 const outputPath = join(distDir, target.outputSubdir, templateDir, output.fileName);
                 mkdirSync(dirname(outputPath), { recursive: true });

package/dist/core/parser.js

@@ -1,4 +1,4 @@
-import { and, classList, componentNode, elementNode, eq, exprAttr, forNode, intrinsic, ifNode, n, neq, not, or, printNode, raw, s, slotNode, textAttr, textNode, v, } from "./ast.js";
+import { and, classList, componentNode, concatAttr, elementNode, eq, exprAttr, forNode, intrinsic, ifNode, n, neq, not, or, printNode, raw, s, slotNode, textAttr, textNode, v, } from "./ast.js";
 /**
  * Handwritten parser for Katachi's current restricted TSX subset.
  *
@@ -188,12 +188,9 @@ function parseExpr(source) {
     if (/^-?\d+(\.\d+)?$/.test(input)) {
         return n(Number(input));
     }
-    if (input.startsWith("!(") && input.endsWith(")")) {
-        return not(parseExpr(input.slice(2, -1)));
-    }
-    if (input.startsWith("!") && !input.startsWith("!=")) {
-        return not(parseExpr(input.slice(1)));
-    }
+    // Binary operators are searched BEFORE unary `!` because they have lower
+    // precedence.  `!isEmpty(x) && y` must split at `&&` first, yielding
+    // `and(not(isEmpty(x)), y)` — not `not(and(isEmpty(x), y))`.
     for (const operator of ["||", "&&", "===", "!==", "==", "!="]) {
         const operatorIndex = findTopLevelOperator(input, operator);
         if (operatorIndex !== -1) {
@@ -208,6 +205,12 @@ function parseExpr(source) {
             return neq(left, right);
         }
     }
+    if (input.startsWith("!(") && input.endsWith(")")) {
+        return not(parseExpr(input.slice(2, -1)));
+    }
+    if (input.startsWith("!") && !input.startsWith("!=")) {
+        return not(parseExpr(input.slice(1)));
+    }
     if ((input.startsWith('"') && input.endsWith('"')) ||
         (input.startsWith("'") && input.endsWith("'"))) {
         return s(unquote(input));
@@ -232,23 +235,90 @@ function parseExpr(source) {
     }
     return raw(input);
 }
+function findLastTopLevelOperator(input, operator) {
+    let depthParen = 0;
+    let depthBracket = 0;
+    let depthBrace = 0;
+    let quote = null;
+    let lastIndex = -1;
+    for (let index = 0; index <= input.length - operator.length; index += 1) {
+        const char = input[index];
+        const next = input[index + 1];
+        if (quote) {
+            if (char === "\\" && next) {
+                index += 1;
+                continue;
+            }
+            if (char === quote) {
+                quote = null;
+            }
+            continue;
+        }
+        if (char === '"' || char === "'") {
+            quote = char;
+            continue;
+        }
+        if (char === "(")
+            depthParen += 1;
+        if (char === ")")
+            depthParen -= 1;
+        if (char === "[")
+            depthBracket += 1;
+        if (char === "]")
+            depthBracket -= 1;
+        if (char === "{")
+            depthBrace += 1;
+        if (char === "}")
+            depthBrace -= 1;
+        if (depthParen === 0 &&
+            depthBracket === 0 &&
+            depthBrace === 0 &&
+            input.slice(index, index + operator.length) === operator) {
+            lastIndex = index;
+        }
+    }
+    return lastIndex;
+}
 function parseClassList(source) {
     const input = source.trim();
     const listBody = input.slice(1, -1);
     const items = splitTopLevel(listBody, ",").map((item) => {
-        if (item.includes("&&")) {
-            const parts = item.split("&&");
-            const test = parts[0] ?? "";
-            const value = parts.slice(1).join("&&");
+        const trimmed = item.trim();
+        // Conditional class: `expr && "class-name"`
+        // Use the LAST top-level && so that chained conditions like
+        // `isSome(x) && !isEmpty(x) && "cls"` correctly split into
+        // test=`isSome(x) && !isEmpty(x)` and value=`"cls"`
+        const andIndex = findLastTopLevelOperator(trimmed, "&&");
+        if (andIndex !== -1) {
+            const test = trimmed.slice(0, andIndex).trim();
+            const value = trimmed.slice(andIndex + 2).trim();
             return {
                 kind: "when",
                 test: parseExpr(test),
                 value: unquote(value),
             };
         }
+        // Bare quoted string: "class-name" or 'class-name'
+        const unquoted = unquote(trimmed);
+        if ((trimmed.startsWith('"') && trimmed.endsWith('"')) ||
+            (trimmed.startsWith("'") && trimmed.endsWith("'"))) {
+            return {
+                kind: "static",
+                value: unquoted,
+            };
+        }
+        // Bare identifier or expression: className, someVar, etc.
+        // These are dynamic class items (variable references)
+        if (/^[A-Za-z_][A-Za-z0-9_.]*$/.test(trimmed)) {
+            return {
+                kind: "dynamic",
+                expr: v(trimmed),
+            };
+        }
+        // Any other expression (function calls, etc.)
         return {
-            kind: "static",
-            value: unquote(item),
+            kind: "dynamic",
+            expr: parseExpr(trimmed),
         };
     });
     return classList(...items);
@@ -262,6 +332,12 @@ function parseAttrValue(name, source) {
             inner.endsWith("]")) {
             return parseClassList(inner);
         }
+        // Non-class array attributes: parse as concat (e.g., href={["#", variant, "-icon"]})
+        if (inner.startsWith("[") && inner.endsWith("]")) {
+            const arrayBody = inner.slice(1, -1);
+            const parts = splitTopLevel(arrayBody, ",").map((part) => parseExpr(part.trim()));
+            return concatAttr(...parts);
+        }
         return exprAttr(parseExpr(inner));
     }
     return textAttr(unquote(input));
@@ -348,6 +424,24 @@ function normalizeElementAttrs(attrs) {
     }
     return normalized;
 }
+function parseDynamicTag(value) {
+    if (!value) {
+        throw new Error("<Element> requires a `tag={...}` prop");
+    }
+    if (value.kind === "text") {
+        return { kind: "dynamic", parts: [s(value.value)] };
+    }
+    if (value.kind === "expr") {
+        return { kind: "dynamic", parts: [value.expr] };
+    }
+    if (value.kind === "concat") {
+        if (value.parts.length === 0) {
+            throw new Error("<Element> requires at least one tag part");
+        }
+        return { kind: "dynamic", parts: value.parts };
+    }
+    throw new Error("<Element> tag must be a string, expression, or string/expression tuple");
+}
 function readOpenTag(source, startIndex) {
     let index = startIndex;
     let quote = null;
@@ -426,6 +520,12 @@ function parseNodes(source, startIndex = 0, untilTagName = null) {
                 nodes.push(forNode(item, each, parsedChildren.nodes, indexName));
                 continue;
             }
+            if (tagName === "Element") {
+                const normalizedAttrs = normalizeElementAttrs(attrs);
+                const { tag: tagAttr, ...restAttrs } = normalizedAttrs;
+                nodes.push(elementNode(parseDynamicTag(tagAttr), restAttrs, parsedChildren.nodes));
+                continue;
+            }
             if (/^[A-Z]/.test(tagName)) {
                 nodes.push(componentNode(tagName, attrs, parsedChildren.nodes));
             }
@@ -453,9 +553,6 @@ function parseNodes(source, startIndex = 0, untilTagName = null) {
                 if (inner === "children") {
                     nodes.push(slotNode(inner));
                 }
-                else if (inner.startsWith("safe(") && inner.endsWith(")")) {
-                    nodes.push(printNode(parseExpr(inner.slice(5, -1)), true));
-                }
                 else {
                     nodes.push(printNode(parseExpr(inner)));
                 }
@@ -484,6 +581,16 @@ function normalizePropType(type) {
         type === "TemplateNode") {
         return "children";
     }
+    if (type === "ReactNode[]" ||
+        type === "React.ReactNode[]" ||
+        type === "TemplateNode[]") {
+        return "children[]";
+    }
+    if (type === "ReactNode[][]" ||
+        type === "React.ReactNode[][]" ||
+        type === "TemplateNode[][]") {
+        return "children[][]";
+    }
     if (type === "ClassValue") {
         return "string";
     }

package/dist/core/types.d.ts

@@ -20,6 +20,7 @@ export interface TemplateProp {
 export interface ComponentRegistration {
     reactImport: string;
     include: string;
+    liquidSnippet?: string;
 }
 export type ComponentRegistry = Record<string, ComponentRegistration>;
 /**

package/dist/targets/askama.d.ts

@@ -1,11 +1,13 @@
 import type { Node } from "../core/ast.js";
 import type { BuildTemplate } from "../core/types.js";
+type ValueTypeMap = Record<string, string>;
 /**
  * Emits portable AST nodes into Askama template source.
  */
-export declare function emitAskama(node: Node, indent?: number, componentRegistry?: BuildTemplate["componentRegistry"]): string;
+export declare function emitAskama(node: Node, indent?: number, componentRegistry?: BuildTemplate["componentRegistry"], valueTypes?: ValueTypeMap): string;
 /**
  * Emits the Rust `Template` wrapper for Askama consumption.
  */
 export declare function emitAskamaComponent(template: BuildTemplate): string;
 export declare function emitAskamaPartial(template: BuildTemplate): string;
+export {};

package/dist/targets/askama.js

@@ -1,4 +1,18 @@
-import { emitAskamaExpr, escapeDoubleQuotes, toCamelCase, toRustType, wrapHtmlAttribute, } from "./shared.js";
+import { emitAskamaExpr, emitInterpolatedTagName, escapeDoubleQuotes, toCamelCase, toRustType, wrapHtmlAttribute, } from "./shared.js";
+function inferEachItemType(type) {
+    if (type === "children[]")
+        return "children";
+    if (type === "children[][]")
+        return "children[]";
+    if (type === "string[]")
+        return "string";
+    if (type === "string[][]")
+        return "string[]";
+    return undefined;
+}
+function shouldPrintSafe(node, valueTypes) {
+    return node.expr.kind === "var" && valueTypes[node.expr.name] === "children";
+}
 /**
  * Emits an HTML attribute for Askama output.
  */
@@ -15,16 +29,29 @@ function emitAskamaAttr(name, value) {
                     parts.push(item.value);
                     continue;
                 }
+                if (item.kind === "dynamic") {
+                    parts.push(`{{ ${emitAskamaExpr(item.expr)} }}`);
+                    continue;
+                }
                 parts.push(`{% if ${emitAskamaExpr(item.test)} %}${item.value}{% endif %}`);
             }
             return `${name}=${wrapHtmlAttribute(parts.join(" ").trim())}`;
         }
+        case "concat": {
+            const segments = value.parts.map((part) => {
+                if (part.kind === "string") {
+                    return part.value;
+                }
+                return `{{ ${emitAskamaExpr(part)} }}`;
+            });
+            return `${name}=${wrapHtmlAttribute(segments.join(""))}`;
+        }
     }
 }
 /**
  * Emits portable AST nodes into Askama template source.
  */
-export function emitAskama(node, indent = 0, componentRegistry = {}) {
+export function emitAskama(node, indent = 0, componentRegistry = {}, valueTypes = {}) {
     const pad = "  ".repeat(indent);
     switch (node.kind) {
         case "text":
@@ -32,13 +59,13 @@ export function emitAskama(node, indent = 0, componentRegistry = {}) {
         case "slot":
             return `${pad}{{ ${node.name}|safe }}`;
         case "print":
-            return `${pad}{{ ${emitAskamaExpr(node.expr)}${node.safe ? "|safe" : ""} }}`;
+            return `${pad}{{ ${emitAskamaExpr(node.expr)}${shouldPrintSafe(node, valueTypes) ? "|safe" : ""} }}`;
         case "if": {
             const thenPart = node.then
-                .map((child) => emitAskama(child, indent + 1, componentRegistry))
+                .map((child) => emitAskama(child, indent + 1, componentRegistry, valueTypes))
                 .join("\n");
             const elsePart = (node.else ?? [])
-                .map((child) => emitAskama(child, indent + 1, componentRegistry))
+                .map((child) => emitAskama(child, indent + 1, componentRegistry, valueTypes))
                 .join("\n");
             if (elsePart) {
                 return `${pad}{% if ${emitAskamaExpr(node.test)} %}\n${thenPart}\n${pad}{% else %}\n${elsePart}\n${pad}{% endif %}`;
@@ -46,8 +73,10 @@ export function emitAskama(node, indent = 0, componentRegistry = {}) {
             return `${pad}{% if ${emitAskamaExpr(node.test)} %}\n${thenPart}\n${pad}{% endif %}`;
         }
         case "for": {
+            const loopValueTypes = { ...valueTypes };
+            loopValueTypes[node.item] = inferEachItemType(node.each.kind === "var" ? valueTypes[node.each.name] : undefined) ?? "string";
             const body = node.children
-                .map((child) => emitAskama(child, indent + 1, componentRegistry))
+                .map((child) => emitAskama(child, indent + 1, componentRegistry, loopValueTypes))
                 .join("\n");
             return `${pad}{% for ${node.item} in ${emitAskamaExpr(node.each)} %}\n${body}\n${pad}{% endfor %}`;
         }
@@ -58,11 +87,12 @@ export function emitAskama(node, indent = 0, componentRegistry = {}) {
                     .map(([name, value]) => `${pad}  ${emitAskamaAttr(name, value)}`)
                     .join("\n")}\n${pad}`
                 : "";
-            const children = (node.children ?? []).map((child) => emitAskama(child, indent + 1, componentRegistry));
+            const children = (node.children ?? []).map((child) => emitAskama(child, indent + 1, componentRegistry, valueTypes));
+            const tagName = emitInterpolatedTagName(node.tag, emitAskamaExpr);
             if (children.length === 0) {
-                return `${pad}<${node.tag}${attrs}/>`;
+                return `${pad}<${tagName}${attrs}/>`;
             }
-            return `${pad}<${node.tag}${attrs}>\n${children.join("\n")}\n${pad}</${node.tag}>`;
+            return `${pad}<${tagName}${attrs}>\n${children.join("\n")}\n${pad}</${tagName}>`;
         }
         case "component": {
             const registration = componentRegistry[node.name];
@@ -83,7 +113,7 @@ export function emitAskama(node, indent = 0, componentRegistry = {}) {
             }
             if ((node.children ?? []).length > 0) {
                 lines.push(`${pad}{% let children %}`);
-                lines.push(...(node.children ?? []).map((child) => emitAskama(child, indent + 1, componentRegistry)));
+                lines.push(...(node.children ?? []).map((child) => emitAskama(child, indent + 1, componentRegistry, valueTypes)));
                 lines.push(`${pad}{% endlet %}`);
             }
             lines.push(`${pad}{% include "${registration.include}" %}`);
@@ -102,7 +132,8 @@ export function emitAskamaComponent(template) {
     const fields = props
         .map((prop) => `    pub ${toCamelCase(prop.name)}: ${toRustType(prop.type)},`)
         .join("\n");
-    const source = emitAskama(template.template, 0, template.componentRegistry ?? {}).replace(/#"/g, '#\\"');
+    const valueTypes = Object.fromEntries(props.map((prop) => [prop.name, prop.type]));
+    const source = emitAskama(template.template, 0, template.componentRegistry ?? {}, valueTypes).replace(/#"/g, '#\\"');
     return `use askama::Template;
 
 #[derive(Template)]
@@ -118,5 +149,6 @@ ${fields}
 `;
 }
 export function emitAskamaPartial(template) {
-    return `${emitAskama(template.template, 0, template.componentRegistry ?? {})}\n`;
+    const valueTypes = Object.fromEntries((template.props ?? []).map((prop) => [prop.name, prop.type]));
+    return `${emitAskama(template.template, 0, template.componentRegistry ?? {}, valueTypes)}\n`;
 }

package/dist/targets/index.js

@@ -1,4 +1,5 @@
 import { emitAskamaComponent, emitAskamaPartial } from "./askama.js";
+import { emitLiquidSnippet } from "./liquid.js";
 import { emitReactComponent } from "./react.js";
 import { emitStaticJsxComponent } from "./static-jsx.js";
 /**
@@ -57,4 +58,17 @@ export const outputTargets = [
             ];
         },
     },
+    {
+        id: "liquid",
+        outputSubdir: "liquid/snippets",
+        extension: ".liquid",
+        emitFiles(template) {
+            return [
+                {
+                    fileName: `${template.fileName}.liquid`,
+                    content: emitLiquidSnippet(template),
+                },
+            ];
+        },
+    },
 ];

package/dist/targets/liquid.d.ts

@@ -0,0 +1,2 @@
+import type { BuildTemplate } from "../core/types.js";
+export declare function emitLiquidSnippet(template: BuildTemplate): string;