Extracting script tags from the serverResponse, and wait a tick before swapping? #2374

kg-currenxie · 2024-03-04T06:05:41Z

kg-currenxie
Mar 4, 2024

Hi :)

We have a case using HTMX and AlpineJS together. We want to add Alpine.data() per-page in script tags, rather than putting everything in the js-bundle.

the server response can look like this:

<body>
<script th:nonce="${cspNonce}">
    window.Alpine.data('test', () => {
      return {
        stateValue: 'Hello, World!',
      }
    })
</script>
<div x-data="test">
  <div x-text="stateValue"></div>
</div>
</body>

However, alpine doesn't like this, because x-data has already started evaluating, before the script tag is evaluated.

We got a suggestion from someone on the Alpine side to do something like this:

When you swap, you add the script tags first, then the elements. You can probably do this fine with an HTMX plugin. Just strip out the script tags, copy them to make them evaluatable, and then insert them into the head, wait a tick, replace the elements

I've tried something like this:


document.body.addEventListener('htmx:beforeSwap', function (event) {
  // take the serverResponse and convert it from a string to a DOM object,
  const parser = new DOMParser()
  const doc = parser.parseFromString(event.detail.serverResponse, 'text/html')

  // then extract AND remove all scripts from the server response and insert them into the head
  const scripts = doc.querySelectorAll('script')
  scripts.forEach((script) => {
    document.head.appendChild(script)
  })
  // remove all scripts from the doc
  scripts.forEach((script) => {
    script.remove()
  })

  // Somehow wait here, to have the scripts evaluated? 🤔 
})

would this even be possible? or any other ways?

RLC92 · 2024-03-31T07:27:28Z

RLC92
Mar 31, 2024

I also just became interested in this very thing! I haven't got my server returning script tags yet but had a very similar plan in mind.

Did you have any success with this? I'm going to give this a go today.

1 reply

kg-currenxie Apr 10, 2024
Author

Unfortunately, we abandoned the script replacing for now, it was quite tricky with HTMX's request+replacement "pipeline".
For now, we moved everything into our single js-bundle :/

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extracting script tags from the serverResponse, and wait a tick before swapping? #2374

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Extracting script tags from the serverResponse, and wait a tick before swapping? #2374

kg-currenxie Mar 4, 2024

Replies: 1 comment · 1 reply

RLC92 Mar 31, 2024

kg-currenxie Apr 10, 2024 Author

kg-currenxie
Mar 4, 2024

Replies: 1 comment 1 reply

RLC92
Mar 31, 2024

kg-currenxie Apr 10, 2024
Author