Merge branch 'prop-tag' into master

Close GH-131

Improve formatting for props statement, a twig component feature.

Author: zackad

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## unreleased
 
+### Features
+- [GH-131](https://github.com/zackad/prettier-plugin-twig/issues/131) Improve formatting for `props` tags, feature of [twig component anonymous component](https://symfony.com/bundles/ux-twig-component/current/index.html#anonymous-components)
+
 ---
 ## 0.15.3 (2025-02-22)
 

src/melody/melody-extension-core/index.js

@@ -31,6 +31,7 @@ import { SetParser } from "./parser/set.js";
 import { SpacelessParser } from "./parser/spaceless.js";
 import { UseParser } from "./parser/use.js";
 import { MountParser } from "./parser/mount.js";
+import { PropsParser } from "./parser/props.js";
 
 import forVisitor from "./visitors/for.js";
 import testVisitor from "./visitors/tests.js";
@@ -97,7 +98,8 @@ export const extension = {
         SetParser,
         SpacelessParser,
         UseParser,
-        MountParser
+        MountParser,
+        PropsParser
     ],
     unaryOperators,
     binaryOperators,

src/melody/melody-extension-core/parser/props.js

@@ -0,0 +1,37 @@
+import { DoStatement, PropItem, PropsStatement } from "../types.js";
+import {
+    createNode,
+    setEndFromToken,
+    setStartFromToken,
+    Types
+} from "../../melody-parser/index.js";
+import { Identifier } from "../../melody-types/index.js";
+
+export const PropsParser = {
+    name: "props",
+    parse(parser, token) {
+        const tokenStream = parser.tokens;
+        const items = [];
+        let name;
+        let nameNode;
+        let valueNode;
+
+        do {
+            name = tokenStream.expect(Types.SYMBOL);
+            nameNode = createNode(Identifier, name, name.text);
+            if (tokenStream.test(Types.ASSIGNMENT)) {
+                tokenStream.expect(Types.ASSIGNMENT);
+                valueNode = parser.matchExpression();
+            } else {
+                valueNode = undefined;
+            }
+            const item = new PropItem(nameNode, valueNode);
+            items.push(item);
+        } while (tokenStream.nextIf(Types.COMMA));
+
+        const propsStatement = new PropsStatement(items);
+        setStartFromToken(propsStatement, token);
+        setEndFromToken(propsStatement, tokenStream.expect(Types.TAG_END));
+        return propsStatement;
+    }
+};

src/melody/melody-extension-core/types.js

@@ -319,6 +319,36 @@ type(SetStatement, "SetStatement");
 alias(SetStatement, "Statement", "ContextMutation");
 visitor(SetStatement, "assignments");
 
+export class PropsStatement extends Node {
+    /**
+     *
+     * @param {Array<PropItem>} items
+     */
+    constructor(items) {
+        super();
+        this.items = items;
+    }
+}
+type(PropsStatement, "PropsStatement");
+alias(PropsStatement, "Statement");
+visitor(PropsStatement, "items");
+
+export class PropItem extends Node {
+    /**
+     *
+     * @param {Identifier} name
+     * @param {Node|undefined} value
+     */
+    constructor(name, value = undefined) {
+        super();
+        this.name = name;
+        this.value = value;
+    }
+}
+type(PropItem, "PropItem");
+alias(PropItem, "Expression");
+visitor(PropItem, "value");
+
 export class SpacelessBlock extends Node {
     /**
      * @param {Node} [body]

src/print/PropItem.js

@@ -0,0 +1,18 @@
+import { doc } from "prettier";
+import { EXPRESSION_NEEDED, STRING_NEEDS_QUOTES } from "../util/index.js";
+
+const { group, indent, join, line } = doc.builders;
+
+const printPropItem = (node, path, print) => {
+    node[EXPRESSION_NEEDED] = false;
+    node[STRING_NEEDS_QUOTES] = true;
+
+    const docs = [path.call(print, "name")];
+    if (node.value !== undefined) {
+        docs.push([" = ", path.call(print, "value")]);
+    }
+
+    return group(docs);
+};
+
+export { printPropItem };

src/print/PropsStatement.js

@@ -0,0 +1,24 @@
+import { doc } from "prettier";
+
+const { group, indent, join, line, indentIfBreak, ifBreak, softline } =
+    doc.builders;
+
+const printPropsStatement = (node, path, print) => {
+    const itemsGroupId = Symbol("prop-items");
+
+    const mappedItems = path.map(print, "items");
+    const joinedItems = join([",", line], mappedItems);
+
+    return group(
+        [
+            node.trimLeft ? "{%-" : "{%",
+            " props ",
+            indentIfBreak([softline, joinedItems], { groupId: itemsGroupId }),
+            line,
+            node.trimRight ? "-%}" : "%}"
+        ],
+        { id: itemsGroupId }
+    );
+};
+
+export { printPropsStatement };

src/printer.js

@@ -29,6 +29,8 @@ import { printIfStatement } from "./print/IfStatement.js";
 import { printMountStatement } from "./print/MountStatement.js";
 import { printForStatement } from "./print/ForStatement.js";
 import { printSetStatement } from "./print/SetStatement.js";
+import { printPropsStatement } from "./print/PropsStatement.js";
+import { printPropItem } from "./print/PropItem.js";
 import { printDoStatement } from "./print/DoStatement.js";
 import { printExtendsStatement } from "./print/ExtendsStatement.js";
 import { printEmbedStatement } from "./print/EmbedStatement.js";
@@ -221,6 +223,8 @@ printFunctions["MountStatement"] = printMountStatement;
 printFunctions["ForStatement"] = printForStatement;
 printFunctions["BinaryConcatExpression"] = printBinaryExpression;
 printFunctions["SetStatement"] = printSetStatement;
+printFunctions["PropsStatement"] = printPropsStatement;
+printFunctions["PropItem"] = printPropItem;
 printFunctions["VariableDeclarationStatement"] =
     printVariableDeclarationStatement;
 printFunctions["DoStatement"] = printDoStatement;

tests/GenericTags/__snapshots__/props.snap.twig

@@ -0,0 +1,9 @@
+{% props
+    label = 'Label',
+    error = null,
+    id,
+    layout = null,
+    label_hidden = 'false'
+%}
+
+{% props name = 'Some Name', description = 'default is empty' %}

tests/GenericTags/jsfmt.spec.js

@@ -41,6 +41,12 @@ describe("Generic tags", () => {
         });
         await expect(actual).toMatchFileSnapshot(snapshotFile);
     });
+    it("should handle props tag", async () => {
+        const { actual, snapshotFile } = await run_spec(import.meta.url, {
+            source: "props.twig"
+        });
+        await expect(actual).toMatchFileSnapshot(snapshotFile);
+    });
     it("should handle redirect tag", async () => {
         const { actual, snapshotFile } = await run_spec(import.meta.url, {
             source: "redirect.twig"

tests/GenericTags/props.twig

@@ -0,0 +1,3 @@
+{% props label = 'Label', error = null, id, layout = null, label_hidden = 'false' %}
+
+{% props name = 'Some Name', description = 'default is empty' %}