From 6363317de700ce38d6d64d54aa6bcef5bc63fb05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Erik=20Pedersen?= Date: Mon, 28 Sep 2020 10:15:00 +0200 Subject: Switch Turbolinks Bridge implementation Fixes #3 --- alpinejs/README.md | 2 + alpinejs/go.mod | 5 +- alpinejs/go.sum | 2 + .../partials/jslibs/alpinejs/script-src.html | 4 +- turbolinks/README.md | 3 - .../turbolinks/alpinejs-turbolinks-bridge.js | 69 ---------------------- .../partials/jslibs/turbolinks/script-src.html | 8 +-- 7 files changed, 15 insertions(+), 78 deletions(-) delete mode 100644 turbolinks/assets/jslibs/turbolinks/alpinejs-turbolinks-bridge.js diff --git a/alpinejs/README.md b/alpinejs/README.md index 0a9ca6a..866ae76 100644 --- a/alpinejs/README.md +++ b/alpinejs/README.md @@ -2,6 +2,8 @@ This module wraps [AlpineJS](https://github.com/alpinejs/alpine). +This module also packages [Alpine Turbolinks Adapter](https://github.com/SimoTod/alpine-turbolinks-adapter) by [@SimoTod](https://github.com/SimoTod). + ## Installation First, add the module import to your site or theme component's configuration's module section: diff --git a/alpinejs/go.mod b/alpinejs/go.mod index ba4d7d7..855e994 100644 --- a/alpinejs/go.mod +++ b/alpinejs/go.mod @@ -2,4 +2,7 @@ module github.com/gohugoio/hugo-mod-jslibs/alpinejs go 1.13 -require github.com/alpinejs/alpine v2.7.0+incompatible // indirect +require ( + github.com/SimoTod/alpine-turbolinks-adapter v0.3.0 // indirect + github.com/alpinejs/alpine v2.7.0+incompatible // indirect +) diff --git a/alpinejs/go.sum b/alpinejs/go.sum index 8ab4ae0..0cb0561 100644 --- a/alpinejs/go.sum +++ b/alpinejs/go.sum @@ -1,3 +1,5 @@ +github.com/SimoTod/alpine-turbolinks-adapter v0.3.0 h1:5Y+s5YjlJc7eTYVBySSUsrOldkyIriXY3mfWQ0lAEic= +github.com/SimoTod/alpine-turbolinks-adapter v0.3.0/go.mod h1:KebmHFXD933AzXtw24J3MbhcN7lrdMvIbmU3H7sex+M= github.com/alpinejs/alpine v2.4.0+incompatible h1:FrbSMJDAYuGEuSN/JxlZ57OkYQNuJHEkDU3RY1c8eFU= github.com/alpinejs/alpine v2.4.0+incompatible/go.mod h1:BKI81egATMnaKqFeX5HEfYMnjZjcjcZmrYAu5Nck+EY= github.com/alpinejs/alpine v2.5.0+incompatible h1:dEOJPy27Kdno2wI51sr8ZkU+7QaLmLYLPD2sZfVe3Fw= diff --git a/alpinejs/layouts/partials/jslibs/alpinejs/script-src.html b/alpinejs/layouts/partials/jslibs/alpinejs/script-src.html index c27c272..85c4f4e 100644 --- a/alpinejs/layouts/partials/jslibs/alpinejs/script-src.html +++ b/alpinejs/layouts/partials/jslibs/alpinejs/script-src.html @@ -1,12 +1,14 @@ {{- $isProd := hugo.IsProduction -}} {{- $js := resources.Get "jslibs/alpinejs/alpine.js" -}} {{- $js11 := resources.Get "jslibs/alpinejs/alpine-ie11.js" -}} -{{- $jsTurbolinksAdapter := resources.Get "alpinejs-turbolinks/alpine-turbolinks-adapter.js" -}} +{{- $jsTurbolinksAdapter := resources.Get "jslibs/alpinejs-turbolinks/alpine-turbolinks-adapter.js" -}} {{- if $isProd }} {{ $js = $js | minify | fingerprint }} {{ end -}} {{- if $isProd }} {{ $js11 = $js11 | minify | fingerprint }} {{ end -}} +{{- $js = slice $jsTurbolinksAdapter $js | resources.Concat "jslibs/alpinejs/alpine.js" -}} +{{- $js11 = slice $jsTurbolinksAdapter $js11 | resources.Concat "jslibs/alpinejs/alpine-ie11.js" -}} \ No newline at end of file diff --git a/turbolinks/README.md b/turbolinks/README.md index 6adea0b..e362d12 100644 --- a/turbolinks/README.md +++ b/turbolinks/README.md @@ -2,9 +2,6 @@ This module wraps [Turbolinks](https://github.com/turbolinks). -Also, if [Alpine](../alpinejs) is present, it adds a set of event listeners that -prepares/cleans the AlpineJS state. Most importantly, it pauses Alpine's mutation observer so Turbolinks can do its work without interuption. - ## Installation First, add the module import to your site or theme component's configuration's module section: diff --git a/turbolinks/assets/jslibs/turbolinks/alpinejs-turbolinks-bridge.js b/turbolinks/assets/jslibs/turbolinks/alpinejs-turbolinks-bridge.js deleted file mode 100644 index 9835070..0000000 --- a/turbolinks/assets/jslibs/turbolinks/alpinejs-turbolinks-bridge.js +++ /dev/null @@ -1,69 +0,0 @@ -/** - * This adds a set of event listeners that, if Alpine is present, - * prepares/cleans the AlpineJS state. - * - * Most importantly, it pauses Alpin's mutation observer so Turbolinks can - * do its work without interuption. - * See https://github.com/alpinejs/alpine/issues/372 - * See https://github.com/alpinejs/alpine/issues/372 - */ -(function() { - document.addEventListener('turbolinks:before-cache', () => { - if (!Alpine) return; - Alpine.pauseMutationObserver = true; - walk(document.body, (el) => { - if (el.hasAttribute('x-for')) { - let nextEl = el.nextElementSibling; - - while (nextEl && nextEl.__x_for_key !== 'undefined') { - const currEl = nextEl; - nextEl = nextEl.nextElementSibling; - currEl.setAttribute('x-generated', true); - } - } else if (el.hasAttribute('x-if')) { - const ifEl = el.nextElementSibling; - - if (ifEl && typeof ifEl.__x_inserted_me !== 'undefined') { - ifEl.setAttribute('x-generated', true); - } - } - - return true; - }); - }); - - document.addEventListener('turbolinks:before-render', (event) => { - if (!Alpine) return; - Alpine.pauseMutationObserver = true; - event.data.newBody.querySelectorAll('[x-generated]').forEach((el) => { - el.removeAttribute('x-generated'); - if (typeof el.__x_for_key === 'undefined' && typeof el.__x_inserted_me === 'undefined') { - el.remove(); - } - }); - }); - - document.addEventListener('turbolinks:load', () => { - if (!Alpine) return; - Alpine.pauseMutationObserver = true; - }); - - document.addEventListener('turbolinks:render', () => { - if (!Alpine) return; - Alpine.pauseMutationObserver = false; - }); - - function walk(el, callback) { - if (callback(el) === false) { - return; - } - - let node = el.firstElementChild; - - while (node) { - walk(node, callback); - - node = node.nextElementSibling; - } - } -})(); diff --git a/turbolinks/layouts/partials/jslibs/turbolinks/script-src.html b/turbolinks/layouts/partials/jslibs/turbolinks/script-src.html index 492aa54..b4aa680 100644 --- a/turbolinks/layouts/partials/jslibs/turbolinks/script-src.html +++ b/turbolinks/layouts/partials/jslibs/turbolinks/script-src.html @@ -1,6 +1,6 @@ {{- $isProd := eq hugo.Environment "production" -}} -{{- $alpineJsBridge := resources.Get "jslibs/turbolinks/alpinejs-turbolinks-bridge.js" -}} -{{- $turbolinks := resources.Get "jslibs/turbolinks/turbolinks.js" -}} -{{- $js := slice $turbolinks $alpineJsBridge | resources.Concat "jslibs/turbolinks/turbolinks.js" }} -{{- if $isProd }}{{ $js = $js | minify | fingerprint }}{{ end -}} +{{- $js := resources.Get "jslibs/turbolinks/turbolinks.js" -}} +{{- if $isProd }} + {{ $js = $js | minify | fingerprint }} +{{ end -}} \ No newline at end of file -- cgit v1.2.3