Is it possible to initialize Alpine.data() in a script tag that is swapped in (via HTMX), for CSP reasons.

[kg-currenxie]

We are converting our app to the CSP build.
Our pages are swapped in with HTMX. To not increase our js-bundle size drastically, we want to initialize a new data directive in the HTML that coming in from the server that is being swapped in with HTMX.

Example:
Alpine part to reproduce, if you can simulate a swap 😅

<script th:nonce="${cspNonce}">
  function initState() {
    if (!window.Alpine) {
      return
    }
    window.Alpine.data('test', () => {
      return {
        stateValue: 'Hello, World!',
      }
    })
  }
  document.addEventListener('alpine:init', initState) // needed for browser refresh
  document.addEventListener('htmx:afterSettle', initState) // needed for htmx navigation/swapping ?

  initState() // testing if i can just call it asap
  window.Alpine && window.Alpine.start() // testing, this makes things work, but not recommended
</script>
<div x-data="test">
  <div x-text="stateValue"></div>
</div>

So the flow is:

1. "global" or "reusable" directives are declared inside our js bundle, before Alpine.start().
2. The first page load is fine, everything works.
3. Navigate to another page. New HTML is being swapped in (example above)
4. The x-data is being processed immediately, because we already did Alpine.start(), but the x-data="test" doesn't exist yet. I'm guessing Alpine's MutationObserver runs before the newly inserted script tag? 🤔
5. We see these warnings (obviously)
   
6. Go to another page, and back to this page, and everything works, as the data directive has been initialized previously.

Is there another way to make sure this works? (without warnings), am I missing something?
or is putting everything in our bundle the only way? if yes, any form of code splitting will never work

Thanks 🙏

[ekwoka]

You need to have the script tags to added to the page, wait a tick and then add the elements.

You also cannot call Alpine.start multiple times.

Just call it once at the end of the normal document.

Basically, add Alpine to the window object in the head.

You component script tags directly do Alpine.data, no event listening, or anything.

The end of the body calls start.

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

[kg-currenxie]

Oh lord 😱 hehe. thanks for the answer :)

[ekwoka]

You could also make the scripts external, and not inlined in the html, might make adding them to a running page easier.