Skip to content

Commit a31d4a5

Browse files
committed
use $set, remove lowercase property handling in favor of attribute conversion
1 parent 868fb23 commit a31d4a5

File tree

5 files changed

+26
-33
lines changed

5 files changed

+26
-33
lines changed

src/runtime/internal/Component.ts

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ if (typeof HTMLElement === 'function') {
238238

239239
attr = this.$$get_prop_name(attr);
240240
this.$$data[attr] = get_custom_element_value(attr, newValue, this.$$props_definition, 'toProp');
241-
this.$$component![attr] = this.$$data[attr];
241+
this.$$component!.$set({ [attr]: this.$$data[attr] });
242242
}
243243

244244
disconnectedCallback() {
@@ -253,7 +253,10 @@ if (typeof HTMLElement === 'function') {
253253
}
254254

255255
private $$get_prop_name(attribute_name: string): string {
256-
return Object.keys(this.$$props_definition).find(key => this.$$props_definition[key].attribute === attribute_name) || attribute_name;
256+
return Object.keys(this.$$props_definition).find(
257+
key => this.$$props_definition[key].attribute === attribute_name ||
258+
(!this.$$props_definition[key].attribute && key.toLowerCase() === attribute_name)
259+
) || attribute_name;
257260
}
258261
};
259262
}
@@ -316,12 +319,12 @@ export function create_custom_element(
316319
}
317320

318321
static get observedAttributes() {
319-
return Object.keys(props_definition).map(key => props_definition[key].attribute || key);
322+
return Object.keys(props_definition).map(key => (props_definition[key].attribute || key).toLowerCase());
320323
}
321324
};
322325

323-
function createProperty(name: string, prop: string) {
324-
Object.defineProperty(Class.prototype, name, {
326+
Object.keys(props_definition).forEach((prop) => {
327+
Object.defineProperty(Class.prototype, prop, {
325328
get() {
326329
return this.$$component && prop in this.$$component
327330
? this.$$component[prop]
@@ -331,10 +334,7 @@ export function create_custom_element(
331334
set(value) {
332335
value = get_custom_element_value(prop, value, props_definition);
333336
this.$$data[prop] = value;
334-
335-
if (this.$$component) {
336-
this.$$component[prop] = value;
337-
}
337+
this.$$component?.$set({ [prop]: value });
338338

339339
if (props_definition[prop].reflect) {
340340
this.$$reflecting = true;
@@ -351,15 +351,6 @@ export function create_custom_element(
351351
}
352352
}
353353
});
354-
}
355-
356-
Object.keys(props_definition).forEach((prop) => {
357-
createProperty(prop, prop);
358-
// <c-e camelCase="foo" /> will be ce.camcelcase = "foo"
359-
const lower = prop.toLowerCase();
360-
if (lower !== prop) {
361-
createProperty(lower, prop);
362-
}
363354
});
364355

365356
accessors.forEach(accessor => {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export default async function (target) {
1010
assert.deepEqual(events, ['foo']);
1111

1212
el.name = 'bar';
13+
await tick();
1314
assert.deepEqual(events, ['foo', 'bar']);
1415

1516
target.innerHTML = '';

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,18 @@
22
tag="custom-element"
33
cePropsDefinition={{
44
camelCase: { attribute: "camel-case" },
5+
camelCase2: { reflect: true },
56
anArray: { attribute: "an-array", type: "Array", reflect: true },
67
}}
78
/>
89

910
<script>
1011
export let camelCase;
12+
export let camelCase2;
1113
export let anArray;
1214
</script>
1315

14-
<h1>Hello {camelCase}!</h1>
16+
<h1>{camelCase2} {camelCase}!</h1>
1517
{#each anArray as item}
1618
<p>{item}</p>
1719
{/each}

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

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,23 @@ import { tick } from 'svelte';
33
import './main.svelte';
44

55
export default async function (target) {
6-
target.innerHTML = '<custom-element camel-case="world" an-array="[1,2]"></custom-element>';
6+
target.innerHTML = '<custom-element camelcase2="Hello" camel-case="world" an-array="[1,2]"></custom-element>';
77
await tick();
88
const el = target.querySelector('custom-element');
9-
9+
1010
assert.equal(el.shadowRoot.innerHTML, '<h1>Hello world!</h1> <p>1</p><p>2</p>');
11-
11+
1212
el.setAttribute('camel-case', 'universe');
1313
el.setAttribute('an-array', '[3,4]');
14-
assert.equal(el.shadowRoot.innerHTML, '<h1>Hello universe!</h1> <p>3</p><p>4</p>');
15-
assert.equal(target.innerHTML, '<custom-element camel-case="universe" an-array="[3,4]"></custom-element>');
16-
14+
el.setAttribute('camelcase2', 'Hi');
15+
await tick();
16+
assert.equal(el.shadowRoot.innerHTML, '<h1>Hi universe!</h1> <p>3</p><p>4</p>');
17+
assert.equal(target.innerHTML, '<custom-element camelcase2="Hi" camel-case="universe" an-array="[3,4]"></custom-element>');
18+
1719
el.camelCase = 'galaxy';
20+
el.camelCase2 = 'Hey';
1821
el.anArray = [5, 6];
19-
assert.equal(el.shadowRoot.innerHTML, '<h1>Hello galaxy!</h1> <p>5</p><p>6</p>');
20-
assert.equal(target.innerHTML, '<custom-element camel-case="universe" an-array="[5,6]"></custom-element>');
21-
22-
el.camelcase = 'solar system';
23-
el.anarray = [7, 8];
24-
assert.equal(el.shadowRoot.innerHTML, '<h1>Hello solar system!</h1> <p>7</p><p>8</p>');
25-
assert.equal(target.innerHTML, '<custom-element camel-case="universe" an-array="[7,8]"></custom-element>');
22+
await tick();
23+
assert.equal(el.shadowRoot.innerHTML, '<h1>Hey galaxy!</h1> <p>5</p><p>6</p>');
24+
assert.equal(target.innerHTML, '<custom-element camelcase2="Hey" camel-case="universe" an-array="[5,6]"></custom-element>');
2625
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ export default async function (target) {
1313
const widget = el.shadowRoot.querySelector('my-widget');
1414

1515
const [p1, p2, p3, p4] = widget.shadowRoot.querySelectorAll('p');
16-
console.log('goooo', !!p1, !!p2, !!p3, !!p4)
1716

1817
assert.equal(p1.textContent, '3 items');
1918
assert.equal(p2.textContent, 'a, b, c');
@@ -22,6 +21,7 @@ export default async function (target) {
2221

2322
el.items = ['d', 'e', 'f', 'g', 'h'];
2423
el.flagged = true;
24+
await tick();
2525

2626
assert.equal(p1.textContent, '5 items');
2727
assert.equal(p2.textContent, 'd, e, f, g, h');

0 commit comments

Comments
 (0)