fix: make n:context nodes more robbust but document limitations also

josbeir · josbeir · commit ed8524b3d797 · 2025-12-17T13:26:51.000+01:00
diff --git a/docs/extensions/frontend.md b/docs/extensions/frontend.md
@@ -64,6 +64,45 @@ The `{name}` placeholder will be replaced with the component name specified in t
 
 ## Usage
 
+### Limitations
+
+**JavaScript Object Literals in Attributes**
+
+Latte's parser treats `{` as an expression delimiter, making it incompatible with JavaScript object literal syntax in attributes:
+
+```latte
+{* ❌ This does NOT work - Latte parses { as expression start *}
+<div x-data="{ count: {$value}, increment() { ... } }">
+```
+
+**Solutions:**
+
+1. **Use `n:data-alpine` for data passing** (recommended):
+```latte
+{* ✅ Works - serializes PHP to JSON *}
+<div n:data-alpine="['count' => $value]">
+    <button @click="count++">Increment</button>
+</div>
+```
+
+2. **Use wrapper element** when mixing JavaScript and Latte expressions:
+```latte
+{* ✅ Works - x-data on wrapper, n:context on form *}
+<div x-data="{ count: 0, increment() { this.count++ } }">
+    <form n:context="$entity">
+        <button type="button" @click="increment()">Count: <span x-text="count"></span></button>
+    </form>
+</div>
+```
+
+3. **Use standard form syntax** without `n:context`:
+```latte
+{* ✅ Works - manual Form helper call *}
+{Form create $entity, ['x-data' => '{ count: ' . $value . ' }']}
+    <button type="button" @click="count++">Increment</button>
+{/Form create}
+```
+
 ### Basic Data Attributes
 
 #### Generic Data Attribute
diff --git a/src/Latte/Nodes/AttributeParserTrait.php b/src/Latte/Nodes/AttributeParserTrait.php
@@ -17,6 +17,7 @@
 use Latte\Compiler\Nodes\Php\Scalar\StringNode;
 use Latte\Compiler\Nodes\PrintNode;
 use Latte\Compiler\Nodes\TextNode;
+use Latte\Compiler\PrintContext;
 use LatteView\Extension\Frontend\Nodes\DataSerializationNode;
 use LatteView\Extension\Frontend\Serializers\UniversalSerializer;
 
@@ -25,7 +26,7 @@ trait AttributeParserTrait
     /**
      * Get the attributes node.
      */
-    protected function getAttributesNode(?ElementNode $el): ArrayNode
+    protected function getAttributesNode(?ElementNode $el, ?PrintContext $context = null): ArrayNode
     {
         if (!$el instanceof ElementNode) {
             return new ArrayNode([]);
@@ -54,7 +55,7 @@ protected function getAttributesNode(?ElementNode $el): ArrayNode
                 $val = $el->getAttribute($name);
                 $nameNode = new StringNode($name);
 
-                $valueNode = $this->parseAttributeValue($val);
+                $valueNode = $this->parseAttributeValue($val, $context);
                 if ($valueNode !== null) {
                     $items[] = new ArrayItemNode($valueNode, $nameNode);
                 }
@@ -76,8 +77,9 @@ protected function getAttributesNode(?ElementNode $el): ArrayNode
 
     /**
      * Parse an attribute value into an ExpressionNode.
+     * For complex values (FragmentNode with mixed content), returns null to preserve them as-is.
      */
-    protected function parseAttributeValue(mixed $val): ?ExpressionNode
+    protected function parseAttributeValue(mixed $val, ?PrintContext $context = null): ?ExpressionNode
     {
         // Handle PrintNode (expression like {$var})
         if ($val instanceof PrintNode) {
@@ -90,6 +92,13 @@ protected function parseAttributeValue(mixed $val): ?ExpressionNode
             return $val->children[0]->expression;
         }
 
+        // Handle FragmentNode with mixed content (text + expressions)
+        // This is common for attributes like x-data="{ prop: {$value}, ... }"
+        // We return null so these attributes are preserved as-is on the element
+        if ($val instanceof FragmentNode && count($val->children) > 1) {
+            return null;
+        }
+
         // Handle AreaNode that might contain a PrintNode
         if ($val instanceof AreaNode) {
             // Try to find a PrintNode in the tree
@@ -107,6 +116,20 @@ protected function parseAttributeValue(mixed $val): ?ExpressionNode
         return null;
     }
 
+    /**
+     * Check if an attribute should be skipped from CakePHP form argument processing.
+     * These attributes should render as-is in the HTML output.
+     *
+     * @param string $name The attribute name
+     * @return bool True if the attribute should be skipped
+     */
+    protected function shouldSkipAttribute(string $name): bool
+    {
+        // This method is kept for potential future use but currently not used
+        // since we handle all attributes through parseAttributeValue
+        return false;
+    }
+
     /**
      * Find a PrintNode in an AreaNode tree.
      */
diff --git a/src/Latte/Nodes/Form/FormNContextNode.php b/src/Latte/Nodes/Form/FormNContextNode.php
@@ -4,14 +4,25 @@
 namespace LatteView\Latte\Nodes\Form;
 
 use Generator;
+use Latte\Compiler\NodeHelpers;
 use Latte\Compiler\Nodes\AreaNode;
 use Latte\Compiler\Nodes\AuxiliaryNode;
 use Latte\Compiler\Nodes\FragmentNode;
+use Latte\Compiler\Nodes\Html\AttributeNode;
+use Latte\Compiler\Nodes\Html\ElementNode;
+use Latte\Compiler\Nodes\Html\ExpressionAttributeNode;
+use Latte\Compiler\Nodes\Php\ArgumentNode;
+use Latte\Compiler\Nodes\Php\ArrayItemNode;
 use Latte\Compiler\Nodes\Php\Expression\ArrayNode;
+use Latte\Compiler\Nodes\Php\Expression\FunctionCallNode;
 use Latte\Compiler\Nodes\Php\ExpressionNode;
+use Latte\Compiler\Nodes\Php\NameNode;
+use Latte\Compiler\Nodes\Php\Scalar\StringNode;
 use Latte\Compiler\Nodes\StatementNode;
 use Latte\Compiler\PrintContext;
 use Latte\Compiler\Tag;
+use LatteView\Extension\Frontend\Nodes\DataSerializationNode;
+use LatteView\Extension\Frontend\Serializers\UniversalSerializer;
 use LatteView\Latte\Nodes\AttributeParserTrait;
 
 /**
@@ -52,7 +63,66 @@ public static function create(Tag $tag): Generator
     protected function init(Tag $tag): void
     {
         $el = $tag->htmlElement;
-        $attributes = $this->getAttributesNode($el);
+
+        if (!$el instanceof ElementNode) {
+            return;
+        }
+
+        // Create a temporary context for attribute compilation
+        $tempContext = new PrintContext();
+
+        // Process attributes and separate them into:
+        // 1. Attributes that can be passed to Form->create() (parsed successfully)
+        // 2. Attributes that should remain on the element (complex/unparseable)
+        $preservedAttributeNodes = [];
+        $formAttributes = []; // ArrayItemNode[]
+
+        foreach ($el->attributes->children as $child) {
+            // Handle DataSerializationNode (e.g., n:data-alpine="$data")
+            if ($child instanceof DataSerializationNode) {
+                $attrName = $child->getPublicAttributeName();
+                $nameNode = new StringNode($attrName);
+
+                // Create function call: UniversalSerializer::serialize($data)
+                $valueNode = new FunctionCallNode(
+                    new NameNode(UniversalSerializer::class . '::serialize'),
+                    [new ArgumentNode($child->getDataExpression(), false, false, null, $child->position)],
+                );
+
+                $formAttributes[] = new ArrayItemNode($valueNode, $nameNode);
+                continue;
+            }
+
+            // Handle standard AttributeNode (e.g., method="get", hx-post="{$path}")
+            if ($child instanceof AttributeNode) {
+                $nameText = NodeHelpers::toText($child->name);
+                if ($nameText !== null) {
+                    $val = $el->getAttribute($nameText);
+                    $parsed = $this->parseAttributeValue($val, $tempContext);
+
+                    if (!$parsed instanceof ExpressionNode) {
+                        // Complex attribute (e.g., x-data with JavaScript) - preserve on element
+                        $preservedAttributeNodes[] = $child;
+                    } else {
+                        // Simple attribute - add to Form->create() args
+                        $nameNode = new StringNode($nameText);
+                        $formAttributes[] = new ArrayItemNode($parsed, $nameNode);
+                    }
+                }
+
+                continue;
+            }
+
+            // Handle ExpressionAttributeNode (e.g., url="{['_name' => 'display']}")
+            if ($child instanceof ExpressionAttributeNode) {
+                $nameNode = new StringNode($child->name);
+                $formAttributes[] = new ArrayItemNode($child->value, $nameNode);
+                continue;
+            }
+        }
+
+        // Build the attributes array for Form->create()
+        $attributes = new ArrayNode($formAttributes);
 
         $el->dynamicTag = new AuxiliaryNode(fn(PrintContext $context): string => $context->format(
             <<<'XX'
@@ -65,7 +135,8 @@ protected function init(Tag $tag): void
             $this->position,
         ));
 
-        $el->attributes = new FragmentNode();
+        // Preserve complex attributes on the form element
+        $el->attributes = new FragmentNode($preservedAttributeNodes);
 
         // @phpstan-ignore-next-line
         $el->content = new FragmentNode([
diff --git a/tests/TestCase/Extension/Frontend/FrontendIntegrationTest.php b/tests/TestCase/Extension/Frontend/FrontendIntegrationTest.php
@@ -237,7 +237,7 @@ public function testJavaScriptModeFallback(): void
 
     public function testFormWithAlpineIntegration(): void
     {
-        // Test that x-data attributes work correctly with form n:context
+        // Test that x-data attributes work correctly with form n:context using n:data-alpine
         $action = null;
         $isActive = false;
         $items = [1, 2, 3];
diff --git a/tests/TestCase/Latte/Nodes/AttributeParserTraitTest.php b/tests/TestCase/Latte/Nodes/AttributeParserTraitTest.php
@@ -189,16 +189,17 @@ public function testParseAttributeValueWithFragmentContainingSinglePrintNode():
 
     public function testParseAttributeValueWithFragmentContainingMultipleChildren(): void
     {
-        // Fragment with multiple children - should use findPrintNode
+        // Fragment with multiple children - returns null to preserve as-is on element
+        // (e.g., x-data="{ prop: {$value}, func() {...} }")
         $variable = new VariableNode('bar');
         $printNode = $this->createPrintNode($variable);
         $textNode = new TextNode('prefix');
         $fragment = new FragmentNode([$textNode, $printNode]);
 
         $result = $this->parser->parseAttributeValuePublic($fragment);
 
-        $this->assertInstanceOf(VariableNode::class, $result);
-        $this->assertEquals('bar', $result->name);
+        // Should return null for complex fragments (mixed content)
+        $this->assertNull($result);
     }
 
     public function testParseAttributeValueWithString(): void
@@ -284,15 +285,16 @@ public function testFindPrintNodeWithTextNode(): void
 
     public function testParseAttributeValueWithAreaNodeContainingPrintNode(): void
     {
-        // AreaNode (via FragmentNode) with a PrintNode inside
+        // AreaNode (via FragmentNode) with multiple children including a PrintNode
+        // Returns null since it's mixed content that should be preserved on the element
         $variable = new VariableNode('area');
         $printNode = $this->createPrintNode($variable);
         $fragment = new FragmentNode([new TextNode('before'), $printNode, new TextNode('after')]);
 
         $result = $this->parser->parseAttributeValuePublic($fragment);
 
-        $this->assertInstanceOf(VariableNode::class, $result);
-        $this->assertEquals('area', $result->name);
+        // Should return null for mixed content fragments
+        $this->assertNull($result);
     }
 
     public function testParseAttributeValueWithAreaNodeWithoutPrintNode(): void

Original file line number	Diff line number	Diff line change
`@@ -237,7 +237,7 @@ public function testJavaScriptModeFallback(): void`
`237`	`237`
`238`	`238`	`public function testFormWithAlpineIntegration(): void`
`239`	`239`	`{`
`240`		`- // Test that x-data attributes work correctly with form n:context`
	`240`	`+ // Test that x-data attributes work correctly with form n:context using n:data-alpine`
`241`	`241`	`$action = null;`
`242`	`242`	`$isActive = false;`
`243`	`243`	`$items = [1, 2, 3];`