Building AlpineJS - Notes
It's just amazing how this small framework work out of the box
Using AlpineJS
<html>
<div x-data="{ count: 0 }">
<button @click="count++">+</button>
<button @click="count--">-</button>
<span x-text="count"></span>
</div>
<script defer src="<https://unpkg.com/[email protected]/dist/cdn.min.js>"></script>
</html>
Using Javascript
Walk through DOM
// with data
// <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with>
walkDom(root, el => {
if (el.hasAttribute('x-text')) {
let expression = el.getAttribute('x-text')
el.innerText = eval(`with (data) {(${expression})}`)
}
})
// get first element then go to next
function walkDom(el, callback) {
callback(el)
el = el.firstElementChild
while(el) {
walkDom(el, callback)
el = el.nextElementSibling
}
}
Observe
// <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy>
let rawData = getInitialData()
let data = observe(rawData)
function observe(data) {
return new Proxy(data, {
set(target, key, value) {
target[key] = value
refreshDom()
}
})
}
Register Listener
registerListeners()
function registerListeners() {
walkDom(root, el => {
if (el.hasAttribute('@click')) {
let expression = el.getAttribute('@click')
el.addEventListener('click', () => {
eval(`with (data) {(${expression})}`)
})
}
});
}
Full js
window.Alpine = {
directives: {
'x-text': (el,value) => {
el.innerText = value
},
'x-show': (el,value) => {
el.style.display = value ? 'block' : 'none'
}
},
start() {
this.root = document.querySelector('[x-data]')
this.rawData = this.getInitialData()
this.data = this.observe(this.rawData)
this.registerListeners()
this.refreshDom()
},
registerListeners() {
this.walkDom(this.root, el => {
Array.from(el.attributes).forEach(attribute => {
if (! attribute.name.startsWith('@')) return
let event = attribute.name.replace('@','')
el.addEventListener(event, () => {
eval(`with (this.data) {(${attribute.value})}`)
})
})
});
},
observe(data) {
var self = this
return new Proxy(data, {
set(target, key, value) {
target[key] = value
self.refreshDom()
}
})
},
refreshDom() {
this.walkDom(this.root, el => {
Array.from(el.attributes).forEach(attribute => {
if (!Object.keys(this.directives).includes(attribute.name)) return
this.directives[attribute.name](el, eval(`with (this.data) {(${attribute.value})}`))
})
})
},
walkDom(el, callback) {
callback(el)
el = el.firstElementChild
while(el) {
this.walkDom(el, callback)
el = el.nextElementSibling
}
},
getInitialData() {
let dataString = this.root.getAttribute('x-data')
return eval(`(${dataString})`)
}
},
window.Alpine.start()