Ayo
ce30b114a2
- this adds a new demo web app with vite HMR for development - all examples are covered with e2e tests
55 lines
1.7 KiB
JavaScript
55 lines
1.7 KiB
JavaScript
import { WebComponent, html } from 'web-component-base'
|
|
|
|
/**
|
|
* v5 `onChanges` payload: the `changes` object cleanly separates the
|
|
* camelCase **property** key from the kebab-case **attribute** name.
|
|
*
|
|
* - `property` → camelCase prop key, matching `this.props` access (`myName`)
|
|
* - `attribute` → kebab-case attribute name that changed (`my-name`)
|
|
* - `previousValue` / `currentValue`
|
|
*
|
|
* Before v5, `property` held the kebab-case attribute name. Code that read
|
|
* `changes.property` for the attribute name must now read `changes.attribute`.
|
|
*/
|
|
export class ChangeLogger extends WebComponent {
|
|
static props = {
|
|
myName: 'World',
|
|
}
|
|
|
|
#last = null
|
|
|
|
onChanges(changes) {
|
|
this.#last = changes
|
|
console.log('>>> onChanges', changes)
|
|
// onChanges fires after render(), so re-render to surface the payload
|
|
this.render()
|
|
}
|
|
|
|
rename = () => {
|
|
this.props.myName = this.props.myName === 'World' ? 'Ayo' : 'World'
|
|
}
|
|
|
|
get template() {
|
|
const c = this.#last
|
|
return html`
|
|
<button id="rename" onclick=${this.rename}>Rename</button>
|
|
<p id="greeting">Hello ${this.props.myName}</p>
|
|
${c
|
|
? html`
|
|
<dl>
|
|
<dt>property (camelCase)</dt>
|
|
<dd id="property">${c.property}</dd>
|
|
<dt>attribute (kebab-case)</dt>
|
|
<dd id="attribute">${c.attribute}</dd>
|
|
<dt>previousValue</dt>
|
|
<dd id="previous">${c.previousValue}</dd>
|
|
<dt>currentValue</dt>
|
|
<dd id="current">${c.currentValue}</dd>
|
|
</dl>
|
|
`
|
|
: html`<p id="no-changes">No changes yet</p>`}
|
|
`
|
|
}
|
|
}
|
|
|
|
customElements.define('change-logger', ChangeLogger)
|