feat(#602): Support multi-word prop names

packages/core/src/api/define-component.ts

@@ -3,6 +3,8 @@ import { compose, required, matchesPattern, shouldThrow, withMessage } from '@ty
 import { standard } from '@tybalt/parser';
 import { derive, reactive } from '@tybalt/reactive';
 
+import { toKebabCase } from 'js-convert-case';
+
 import type { Reactive } from '@tybalt/reactive';
 
 import ContextEvent from './context-event';
@@ -330,7 +332,7 @@ export default ({
          */
         #updateProps() {
             for (const [key, value] of Object.entries(this.#props)) {
-                const attributeValue = this.getAttribute(key);
+                const attributeValue = this.getAttribute(toKebabCase(key));
                 const usingDefault = attributeValue === null && value.value;
                 const areDifferent = attributeValue !== value.value;
                 if (!usingDefault && areDifferent) {

packages/core/tst/integration/component-rendering.test.ts

@@ -86,4 +86,30 @@ describe('component rendering', () => {
 
         expect(actual?.value).toBe(expected);
     });
+
+    it('passes multi-word props to children correctly', async () => {
+        const name = 'pass-multi-word-props-to-children';
+        const childComponentName = 'multi-word-child-component';
+        const expected = 'expected value';
+
+        let actual;
+        defineComponent({
+            name: childComponentName,
+            props: { multiWordProp: {} },
+            setup({ multiWordProp }) {
+                actual = multiWordProp;
+            },
+        });
+        const parentComponent = defineComponent({
+            name,
+            props: { multiWordProp: {} },
+            render({ multiWordProp }) {
+                return html`<${childComponentName} multi-word-prop="${multiWordProp}"></${childComponentName}>`;
+            },
+        });
+
+        await mount(parentComponent, { attributes: { multiWordProp: expected } });
+
+        expect(actual?.value).toBe(expected);
+    });
 });