Astrian/Laterano
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor state management in CustomElement: simplify setState and getState methods, update keyPath parameter naming for consistency

Browse Source
This commit is contained in:
Astrian Zheng 2025-05-14 16:13:52 +10:00
parent 0aee6488d2
commit 9d62c64b0f
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
1 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/main.ts
View File

@ -1,5 +1,6 @@
interface CustomElement extends HTMLElement { interface CustomElement extends HTMLElement {
setState(key_path: string, value: any): void setState(key_path: string, value: any): void
getState(key_path: string): any
} }
interface ComponentOptions { interface ComponentOptions {
@ -25,8 +26,8 @@ export default (options: ComponentOptions) => {
// copy state from options // copy state from options
this._states = new Proxy({ ...(states || {}) }, { this._states = new Proxy({ ...(states || {}) }, {
set: (target: Record<string, any>, prop: string, value: any) => { set: (target: Record<string, any>, keyPath: string, value: any) => {
const valueRoute = prop.split('.') const valueRoute = keyPath.split('.')
let currentTarget = target let currentTarget = target
for (let i in valueRoute) { for (let i in valueRoute) {
const key = valueRoute[i] const key = valueRoute[i]
@ -39,13 +40,25 @@ export default (options: ComponentOptions) => {
currentTarget = currentTarget[key] currentTarget = currentTarget[key]
} }
} }
console.log(`State updated: ${JSON.stringify(this._states)}`)
// TODO: trigger dom updates // TODO: trigger dom updates
// TODO: trigger state update events // TODO: trigger state update events
return true return true
}, },
get: (target: Record<string, any>, prop: string) => { get: (target: Record<string, any>, keyPath: string) => {
return target[prop] const valueRoute = keyPath.split('.')
let currentTarget = target
for (let i in valueRoute) {
const key = valueRoute[i]
if (parseInt(i) === valueRoute.length - 1) {
return currentTarget[key]
} else {
if (!currentTarget[key]) {
currentTarget[key] = {}
}
currentTarget = currentTarget[key]
}
}
return undefined
} }
}) })
@ -95,19 +108,12 @@ export default (options: ComponentOptions) => {
} }
// state manager // state manager
setState(key_path: string, value: any) { setState(keyPath: string, value: any) {
const valueRoute = key_path.split('.') this._states[keyPath] = value
let currentTarget = this._states }
for (let i in valueRoute) {
const key = valueRoute[i] getState(keyPath: string) {
if (parseInt(i) === valueRoute.length - 1) { return this._states[keyPath]
currentTarget[key] = value
} else {
if (!currentTarget[key]) currentTarget[key] = {}
currentTarget = currentTarget[key]
}
}
console.log(`State updated: ${this._states}`)
} }
} }