Add kebab<->camel case conversion to component state
This commit is contained in:
parent
451718cb74
commit
f199f64932
1 changed files with 12 additions and 6 deletions
18
state.js
18
state.js
|
@ -1,5 +1,8 @@
|
||||||
export const abortRegistry = new FinalizationRegistry(controller => controller.abort())
|
export const abortRegistry = new FinalizationRegistry(controller => controller.abort())
|
||||||
|
|
||||||
|
const camelToKebab = string => string.replace(/([a-z])([A-Z])/g, (_, a, b) => `${a}-${b.toLowerCase()}`)
|
||||||
|
const kebabToCamel = string => string.replace(/([a-z])-([a-z])/g, (_, a, b) => a+b.toUpperCase())
|
||||||
|
|
||||||
export class ChangeEvent extends Event {
|
export class ChangeEvent extends Event {
|
||||||
#final
|
#final
|
||||||
constructor(...changes) {
|
constructor(...changes) {
|
||||||
|
@ -250,22 +253,25 @@ const attributeObserver = new MutationObserver(mutations => {
|
||||||
for (const {type, target, attributeName: name} of mutations) {
|
for (const {type, target, attributeName: name} of mutations) {
|
||||||
if (type == "attributes") {
|
if (type == "attributes") {
|
||||||
const next = target.getAttribute(name)
|
const next = target.getAttribute(name)
|
||||||
if (String(target.state.proxy[name]) !== next)
|
const camelName = kebabToCamel(name)
|
||||||
target.state.proxy[name] = next
|
console.log(camelName)
|
||||||
|
if (String(target.state.proxy[camelName]) !== next)
|
||||||
|
target.state.proxy[camelName] = next
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
export const component = (generator, name) => {
|
export const component = (generator, name) => {
|
||||||
name = name ?? generator.name.replace(/([a-z])([A-Z])/g, (_, a, b) => `${a}-${b.toLowerCase()}`)
|
name = name ?? camelToKebab(generator.name)
|
||||||
const Element = class extends HTMLElement{
|
const Element = class extends HTMLElement{
|
||||||
constructor() {
|
constructor() {
|
||||||
super()
|
super()
|
||||||
this.state = new State(Object.fromEntries([...this.attributes].map(attribute => [attribute.name, attribute.value])))
|
this.state = new State(Object.fromEntries([...this.attributes].map(attribute => [kebabToCamel(attribute.name), attribute.value])))
|
||||||
this.state.addEventListener("change", event => {
|
this.state.addEventListener("change", event => {
|
||||||
for (const [name, value] of event.changes) {
|
for (const [name, value] of event.changes) {
|
||||||
if (this.getAttribute(name) !== String(value))
|
const kebabName = camelToKebab(name)
|
||||||
this.setAttribute(name, value)
|
if (this.getAttribute(kebabName) !== String(value))
|
||||||
|
this.setAttribute(kebabName, value)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
attributeObserver.observe(this, {attributes: true})
|
attributeObserver.observe(this, {attributes: true})
|
||||||
|
|
Loading…
Reference in a new issue