Skip to content

Commit

Permalink
single event multiple blocks (#26)
Browse files Browse the repository at this point in the history 
* render multiple blocks per event. add block to event namespace

* update examples

* update plugin
  • Loading branch information
@adnaan
adnaan authored Dec 29, 2022
1 parent 34e8911 commit 49ec97a
Show file tree
Hide file tree
Showing 16 changed files with 238 additions and 208 deletions.
4 changes: 2 additions & 2 deletions alpinejs-plugin/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion alpinejs-plugin/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@livefir/fir",
"version": "0.1.0",
"version": "0.1.1",
"repository": {
"type": "git",
"url": "https://github.com/livefir/fir"
Expand Down
157 changes: 83 additions & 74 deletions alpinejs-plugin/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,58 +38,38 @@ const Plugin = (Alpine) => {
return {
replace() {
return function (event) {
operations['replaceContent']({
selector: `#${el.id}`,
value: event.detail,
})
console.log('replace')
morphElementContent(el, event.detail)
}
},
replaceEl() {
return function (event) {
operations['replaceElement']({
selector: `#${el.id}`,
value: event.detail,
})
morphElement(el, event.detail)
}
},
appendEl() {
return function (event) {
operations['append']({
selector: `#${el.id}`,
value: event.detail,
})
appendElement(el, event.detail)
}
},
prependEl() {
return function (event) {
operations['prepend']({
selector: `#${el.id}`,
value: event.detail,
})
prependElement(el, event.detail)
}
},
afterEl() {
return function (event) {
operations['after']({
selector: `#${el.id}`,
value: event.detail,
})
afterElement(el, event.detail)
}
},
beforeEl() {
return function (event) {
operations['before']({
selector: `#${el.id}`,
value: event.detail,
})
beforeElement(el, event.detail)
}
},
removeEl() {
return function (event) {
operations['remove']({
selector: `#${el.id}`,
value: event.detail,
})
removeElement(el, event.detail)
}
},
emit(id, params) {
Expand Down Expand Up @@ -248,73 +228,101 @@ const Plugin = (Alpine) => {
return template.content.firstChild
}

const morphElement = (el, value) => {
Alpine.morph(el, value, {
key(el) {
return el.id
},
})
}

const morphElementContent = (el, value) => {
let toHTML = el.cloneNode(false)
toHTML.innerHTML = value
Alpine.morph(el, toHTML.outerHTML, {
updating(el, toEl, childrenOnly, skip) {
// childrenOnly()
//console.log('updating', el, toEl, childrenOnly, skip)
},

updated(el, toEl) {
//console.log('updated', el, toEl)
},

removing(el, skip) {
// console.log('removing', el, skip)
},

removed(el) {
// console.log('removed', el)
},

adding(el, skip) {
//console.log('adding', el, skip)
},

added(el) {
// console.log('added', el)
},

key(el) {
// By default Alpine uses the `key=""` HTML attribute.
// console.log('key', el.id)
return el.id
},

lookahead: false, // Default: false
})
}

const afterElement = (el, value) => {
el.insertBefore(toElement(value), el.nextSibling)
}

const beforeElement = (el, value) => {
el.insertBefore(toElement(value), el)
}

const appendElement = (el, value) => {
el.append(...toElements(value))
}

const prependElement = (el, value) => {
el.prepend(...toElements(value))
}

const removeElement = (el) => {
el.remove()
}

const operations = {
replaceElement: (operation) =>
selectAll(operation, (el, value) => {
Alpine.morph(el, value, {
key(el) {
return el.id
},
})
morphElement(el, value)
}),
replaceContent: (operation) =>
selectAll(operation, (el, value) => {
let toHTML = el.cloneNode(false)
toHTML.innerHTML = value
Alpine.morph(el, toHTML.outerHTML, {
updating(el, toEl, childrenOnly, skip) {
// childrenOnly()
//console.log('updating', el, toEl, childrenOnly, skip)
},

updated(el, toEl) {
//console.log('updated', el, toEl)
},

removing(el, skip) {
// console.log('removing', el, skip)
},

removed(el) {
// console.log('removed', el)
},

adding(el, skip) {
//console.log('adding', el, skip)
},

added(el) {
// console.log('added', el)
},

key(el) {
// By default Alpine uses the `key=""` HTML attribute.
// console.log('key', el.id)
return el.id
},

lookahead: false, // Default: false
})
morphElementContent(el, value)
}),
after: (operation) =>
selectAll(operation, (el, value) => {
el.insertBefore(toElement(value), el.nextSibling)
afterElement(el, value)
}),
before: (operation) =>
selectAll(operation, (el, value) => {
el.insertBefore(toElement(value), el)
beforeElement(el, value)
}),
append: (operation) =>
selectAll(operation, (el, value) => {
el.append(...toElements(value))
appendElement(el, value)
}),
prepend: (operation) =>
selectAll(operation, (el, value) => {
el.prepend(...toElements(value))
prependElement(el, value)
}),
remove: (operation) =>
selectAll(operation, (el, value) => {
el.remove()
removeElement(el)
}),
reload: () => window.location.reload(),
resetForm: (operation) =>
Expand All @@ -335,6 +343,7 @@ const Plugin = (Alpine) => {
})
if (!operation.eid) {
document.dispatchEvent(event)
window.dispatchEvent(event)
return
}

Expand Down
4 changes: 3 additions & 1 deletion examples/autocomplete/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,9 @@
@input="$fir.emit('query',{query: $event.target.value})" />
</div>

<datalist id="cities" @fir:query.window="$fir.replace()">
<datalist
id="cities"
@fir:query:ok:cities.window="$fir.replace()">
{{ block "cities" . }}
{{ range .cities }}
<option value="{{ . }}"></option>
Expand Down
8 changes: 4 additions & 4 deletions examples/counter-ticker-redis/count.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@
<div
x-data
class="column is-one-third-desktop has-text-centered is-narrow">
<div id="count_update" @fir:updated.window="$fir.replace()">
{{ block "count_update" . }}
<div @fir:updated:ok:count-update.window="$fir.replace()">
{{ block "count-update" . }}
<div>Count updated: {{ .updated }} seconds ago</div>
{{ end }}
</div>

<hr />
<div
id="count"
@fir:inc.window="$fir.replace()"
@fir:dec.window="$fir.replace()">
@fir:inc:ok:count.window="$fir.replace()"
@fir:dec:ok:count.window="$fir.replace()">
{{ block "count" . }}
<div>Count: {{ .count }}</div>
{{ end }}
Expand Down
6 changes: 3 additions & 3 deletions examples/counter-ticker-redis/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />
<script defer src="http://localhost:8000/cdn.js"></script>
{{/* <script
{{/* <script defer src="http://localhost:8000/cdn.js"></script> */}}
<script
defer
src="https://unpkg.com/@livefir/fir@latest/dist/fir.min.js"></script>
*/}}

<script
defer
src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
Expand Down
8 changes: 4 additions & 4 deletions examples/counter-ticker/count.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@
<div
x-data
class="column is-one-third-desktop has-text-centered is-narrow">
<div id="count_update" @fir:updated.window="$fir.replace()">
{{ block "count_update" . }}
<div @fir:updated:ok:count-update.window="$fir.replace()">
{{ block "count-update" . }}
<div>Count updated: {{ .updated }} seconds ago</div>
{{ end }}
</div>

<hr />
<div
id="count"
@fir:inc.window="$fir.replace()"
@fir:dec.window="$fir.replace()">
@fir:inc:ok:count.window="$fir.replace()"
@fir:dec:ok:count.window="$fir.replace()">
{{ block "count" . }}
<div>Count: {{ .count }}</div>
{{ end }}
Expand Down
4 changes: 2 additions & 2 deletions examples/counter/count.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
<div x-data>
<div
id="count"
@fir:inc.window="$fir.replace()"
@fir:dec.window="$fir.replace()">
@fir:inc:ok:count.window="$fir.replace()"
@fir:dec:ok:count.window="$fir.replace()">
{{ block "count" . }}
<div>Count: {{ .count }}</div>
{{ end }}
Expand Down
5 changes: 2 additions & 3 deletions examples/ory-counter/count.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,8 @@
<body>
<div x-data>
<div
id="count"
@fir:inc.window="$fir.replace()"
@fir:dec.window="$fir.replace()">
@fir:inc:ok:count.window="$fir.replace()"
@fir:dec:ok:count.window="$fir.replace()">
{{ block "count" . }}
<div>Count: {{ .count }}</div>
{{ end }}
Expand Down
5 changes: 3 additions & 2 deletions examples/range/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,9 @@
x-model="count"
value="0"
@input="$fir.emit('update',{count: $event.target.value})" />
<div id="total" @fir:update.window="$fir.replace()">
{{ block "total" . }}

<div @fir:update:ok:price.window="$fir.replace()">
{{ block "price" . }}
<div>
Price:
{{ .total }}
Expand Down
2 changes: 1 addition & 1 deletion examples/search/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
autocomplete="off"
@input="$fir.emit('query',{query: $event.target.value})" />
</div>
<div id="cities" @fir:query.window="$fir.replace()">
<div @fir:query:ok:cities.window="$fir.replace()">
{{ block "cities" . }}
{{ range .cities }}
<div>{{ . }}</div>
Expand Down
Loading

0 comments on commit 49ec97a

Please sign in to comment.