Handle kebab-case attributes in component calls

libxml2 throws away the capitalization of attribute names (we always see
them all-lowercase), so component props must be specified in kebab-case
(e.g. :property-url= rather than :propertyUrl=); for this to work,
php-vuejs-templating needs to map the prop name back to camelCase
somewhere. Do this in handleComponent(). (Alternatively, it could
probably happen in App::renderComponentToDOM() or Component::render(),
but that would suggest that PHP entry points can provide props in either
format, and that feels bad to me.)

Author: lucaswerkmeister

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 );
+	}
+
 }