Merge pull request #37 from wmde/kebab-case

Handle kebab-case attributes in component calls

Author: yerdua

src/Component.php

@@ -126,6 +126,8 @@ private function handleComponent( DOMElement $node, array $data ): bool {
 				$name = $attribute->name;
 				$value = $attribute->value;
 			}
+			// template kebab-case -> JS camelCase
+			$name = preg_replace_callback( '/-(\w)/', fn ( $m ) => strtoupper( $m[1] ), $name );
 			$componentData[$name] = $value;
 		}
 		$rendered = $this->app->renderComponentToDOM( $componentName, $componentData );

tests/php/AppTest.php

@@ -61,4 +61,17 @@ public function testNestedComponentObjectProp(): void {
 		$this->assertSame( '<div><p>obj = { a: A, b: B }</p></div>', $result );
 	}
 
+	public function testComponentPropKebabCase(): void {
+		$app = new App( [] );
+		$app->registerComponentTemplate(
+			'root',
+			'<div><x-a some-long-prop="A B C"></x-a><x-a :some-long-prop="someLongVar"></x-a></div>'
+		);
+		$app->registerComponentTemplate( 'x-a', '<p>{{ someLongProp }}</p>' );
+
+		$result = $app->renderComponent( 'root', [ 'someLongVar' => 'X Y Z' ] );
+
+		$this->assertSame( '<div><p>A B C</p><p>X Y Z</p></div>', $result );
+	}
+
 }