use $set, remove lowercase property handling in favor of attribute conversion

Author: dummdidumm

src/runtime/internal/Component.ts

@@ -238,7 +238,7 @@ if (typeof HTMLElement === 'function') {
 
 			attr = this.$$get_prop_name(attr);
 			this.$$data[attr] = get_custom_element_value(attr, newValue, this.$$props_definition, 'toProp');
-			this.$$component![attr] = this.$$data[attr];
+			this.$$component!.$set({ [attr]: this.$$data[attr] });
 		}
 
 		disconnectedCallback() {
@@ -253,7 +253,10 @@ if (typeof HTMLElement === 'function') {
 		}
 
 		private $$get_prop_name(attribute_name: string): string {
-			return Object.keys(this.$$props_definition).find(key => this.$$props_definition[key].attribute === attribute_name) || attribute_name;
+			return Object.keys(this.$$props_definition).find(
+					key => this.$$props_definition[key].attribute === attribute_name ||
+						(!this.$$props_definition[key].attribute && key.toLowerCase() === attribute_name)
+				) || attribute_name;
 		}
 	};
 }
@@ -316,12 +319,12 @@ export function create_custom_element(
 		}
 
 		static get observedAttributes() {
-			return Object.keys(props_definition).map(key => props_definition[key].attribute || key);
+			return Object.keys(props_definition).map(key => (props_definition[key].attribute || key).toLowerCase());
 		}
 	};
 
-	function createProperty(name: string, prop: string) {
-		Object.defineProperty(Class.prototype, name, {
+	Object.keys(props_definition).forEach((prop) => {
+		Object.defineProperty(Class.prototype, prop, {
 			get() {
 				return this.$$component && prop in this.$$component
 					? this.$$component[prop]
@@ -331,10 +334,7 @@ export function create_custom_element(
 			set(value) {
 				value = get_custom_element_value(prop, value, props_definition);
 				this.$$data[prop] = value;
-
-				if (this.$$component) {
-					this.$$component[prop] = value;
-				}
+				this.$$component?.$set({ [prop]: value });
 
 				if (props_definition[prop].reflect) {
 					this.$$reflecting = true;
@@ -351,15 +351,6 @@ export function create_custom_element(
 				}
 			}
 		});
-	}
-
-	Object.keys(props_definition).forEach((prop) => {
-		createProperty(prop, prop);
-		// <c-e camelCase="foo" /> will be ce.camcelcase = "foo"
-		const lower = prop.toLowerCase();
-		if (lower !== prop) {
-			createProperty(lower, prop);
-		}
 	});
 
 	accessors.forEach(accessor => {

test/custom-elements/samples/action/test.js

@@ -10,6 +10,7 @@ export default async function (target) {
 	assert.deepEqual(events, ['foo']);
 
 	el.name = 'bar';
+	await tick();
 	assert.deepEqual(events, ['foo', 'bar']);
 
 	target.innerHTML = '';

test/custom-elements/samples/camel-case-attribute/main.svelte

@@ -2,16 +2,18 @@
 	tag="custom-element"
 	cePropsDefinition={{
 		camelCase: { attribute: "camel-case" },
+		camelCase2: { reflect: true },
 		anArray: { attribute: "an-array", type: "Array", reflect: true },
 	}}
 />
 
 <script>
 	export let camelCase;
+	export let camelCase2;
 	export let anArray;
 </script>
 
-<h1>Hello {camelCase}!</h1>
+<h1>{camelCase2} {camelCase}!</h1>
 {#each anArray as item}
 	<p>{item}</p>
 {/each}

test/custom-elements/samples/camel-case-attribute/test.js

@@ -3,24 +3,23 @@ import { tick } from 'svelte';
 import './main.svelte';
 
 export default async function (target) {
-	target.innerHTML = '<custom-element camel-case="world" an-array="[1,2]"></custom-element>';
+	target.innerHTML = '<custom-element camelcase2="Hello" camel-case="world" an-array="[1,2]"></custom-element>';
 	await tick();
 	const el = target.querySelector('custom-element');
-
+	
 	assert.equal(el.shadowRoot.innerHTML, '<h1>Hello world!</h1> <p>1</p><p>2</p>');
-
+	
 	el.setAttribute('camel-case', 'universe');
 	el.setAttribute('an-array', '[3,4]');
-	assert.equal(el.shadowRoot.innerHTML, '<h1>Hello universe!</h1> <p>3</p><p>4</p>');
-	assert.equal(target.innerHTML, '<custom-element camel-case="universe" an-array="[3,4]"></custom-element>');
-
+	el.setAttribute('camelcase2', 'Hi');
+	await tick();
+	assert.equal(el.shadowRoot.innerHTML, '<h1>Hi universe!</h1> <p>3</p><p>4</p>');
+	assert.equal(target.innerHTML, '<custom-element camelcase2="Hi" camel-case="universe" an-array="[3,4]"></custom-element>');
+	
 	el.camelCase = 'galaxy';
+	el.camelCase2 = 'Hey';
 	el.anArray = [5, 6];
-	assert.equal(el.shadowRoot.innerHTML, '<h1>Hello galaxy!</h1> <p>5</p><p>6</p>');
-	assert.equal(target.innerHTML, '<custom-element camel-case="universe" an-array="[5,6]"></custom-element>');
-
-	el.camelcase = 'solar system';
-	el.anarray = [7, 8];
-	assert.equal(el.shadowRoot.innerHTML, '<h1>Hello solar system!</h1> <p>7</p><p>8</p>');
-	assert.equal(target.innerHTML, '<custom-element camel-case="universe" an-array="[7,8]"></custom-element>');
+	await tick();
+	assert.equal(el.shadowRoot.innerHTML, '<h1>Hey galaxy!</h1> <p>5</p><p>6</p>');
+	assert.equal(target.innerHTML, '<custom-element camelcase2="Hey" camel-case="universe" an-array="[5,6]"></custom-element>');
 }

test/custom-elements/samples/props/test.js

@@ -13,7 +13,6 @@ export default async function (target) {
 	const widget = el.shadowRoot.querySelector('my-widget');
 
 	const [p1, p2, p3, p4] = widget.shadowRoot.querySelectorAll('p');
-	console.log('goooo', !!p1, !!p2, !!p3, !!p4)
 
 	assert.equal(p1.textContent, '3 items');
 	assert.equal(p2.textContent, 'a, b, c');
@@ -22,6 +21,7 @@ export default async function (target) {
 
 	el.items = ['d', 'e', 'f', 'g', 'h'];
 	el.flagged = true;
+	await tick();
 
 	assert.equal(p1.textContent, '5 items');
 	assert.equal(p2.textContent, 'd, e, f, g, h');