Best practice for Alpine component initialization when loading dynamically with HTMX + CSP #4478

axzilla · 2024-12-16T13:47:35Z

axzilla
Dec 16, 2024

The Setup

I have components that combine Alpine.js for interactivity and HTMX for dynamic loading. Each component contains its Alpine.js initialization and markup as a self-contained unit.

The Problem

When loading Alpine.js components dynamically via HTMX, the component initialization breaks:

On initial page load: Alpine components work perfectly with CSP nonces
When loaded via HTMX: CSP blocks the component's Alpine.js initialization
This happens even with valid nonces in the dynamically loaded content

Example component that breaks when loaded via HTMX:

<div>
    <script nonce="valid-nonce">
        Alpine.data('toastComponent', () => ({
            show: true,
            // component lifecycle & state management
        }))
    </script>
    <div 
        x-data="toastComponent"
        x-show="show"
        x-transition
    >
        <!-- component markup -->
    </div>
</div>

Current Workaround

To make it work, I had to break the component into two parts:

Component initialization (loaded once in parent/layout):

<!-- Must be loaded in advance -->
<script nonce="valid-nonce">
    Alpine.data('toastComponent', () => ({
        show: true,
        // component logic
    }))
</script>

Component markup (loaded via HTMX):

<div x-data="toastComponent">
    <!-- just markup, no initialization -->
</div>

This works but feels wrong - it breaks component encapsulation and makes components harder to use.

Questions

What's the Alpine.js best practice for dynamically loaded components?
Is there a way to keep the component logic bundled with its markup when loading dynamically?
Are there patterns for making Alpine components more portable/self-contained when used with dynamic loading?

Would love to hear from the Alpine.js community on this!

Answered by SimoTod

Dec 16, 2024

htmx.config.inlineScriptNonce

View full answer

SimoTod · 2024-12-16T22:09:20Z

SimoTod
Dec 16, 2024
Collaborator

It's not strictly alpine but htmx. There should be an option to tell htmx to add the nonce for you if you look at their documentation (there are security rules in the browser and a script imported via js won't run by default so htmx does some parsing, patching, etc to make it runnable).

2 replies

SimoTod Dec 16, 2024
Collaborator

htmx.config.inlineScriptNonce

Answer selected by axzilla

axzilla Dec 17, 2024
Author

Thank you very much. This works, but now I can't re-initialize Alpine to recognize the handlers again! 🥴

SimoTod · 2024-12-17T09:36:29Z

SimoTod
Dec 17, 2024
Collaborator

Do you have a complete example? You shouldn't need to manually re-init Alpine

…

On Tue, 17 Dec 2024 at 08:53, Axel Adrian ***@***.***> wrote: Thank you very much. This works, but now I can't re-initialize Alpine to recognize the handlers again! 🥴 — Reply to this email directly, view it on GitHub <#4478 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACAJRWKKXJFC7LWBQY5G45T2F7Q67AVCNFSM6AAAAABTWF5WIWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCNJZGA2DKNQ> . You are receiving this because you commented.Message ID: ***@***.***>

8 replies

SimoTod Dec 17, 2024
Collaborator

Do you need the defer attribute?

I think it's something to do with the order of execution. If you defer the script and gets processed after alpine, it will never see the alpine:init event so it will never create the data.

Again, if you remove the event listener and your script gets processed after alpine, it will not make it for the initial init (but it will get picked up the second time).

axzilla Dec 18, 2024
Author

Unfortunately removing the defer doesn't solve the problem. My current solution is to separate script and component to load the script independently. Feels more like a hack and is more error prone to use.

SimoTod Dec 18, 2024
Collaborator

mmh, the issue you described is definitely a timing issue though. I don't have much time to run your code (I think it's written in go lang right) but this is a super simplified example that works in plain HTML

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">

  <meta http-equiv="Content-Security-Policy" content="script-src 'nonce-2726c7f26c'">
  <meta name="htmx-config" content='{"inlineScriptNonce": "2726c7f26c"}'>
</head>
<body>

  <button hx-post="component.html" hx-trigger="click" hx-swap="outerHTML">
      Click Me!
  </button>

  <script src="https://unpkg.com/[email protected]" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous" nonce="2726c7f26c"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js" nonce="2726c7f26c"></script>
</body>
</html>

component.html

<script>
    Alpine.data('myComponent', () => ({
        foo: 'bar',
    }))
</script>
<div x-data="myComponent" x-text="foo"></div>

Note, you don't need the nonce attribute on the injected script, just add it to htmx-config and htmx will take care of it for you.

axzilla Dec 20, 2024
Author

Hey, thanks again! Yes, it's Go code.

I think I've got it figured out now. There are two main points:

Source URL:
I had to change the HTMX source from
```
cdn.jsdelivr.net 
```
to
```
unpkg.com
```

Timing:
The following code works fine with HTMX swaps, but not if the component is needed on the initial page load:

Alpine.data('myComponent', () => ({
    foo: 'bar',
}))

On the initial page load, we need this approach. But after an HTMX swap, it never gets executed again:

document.addEventListener('alpine:init', () => {
    Alpine.data('myComponent', () => ({
        foo: 'bar',
    }))
})

A workaround like this should exist:

<script nonce={ templ.GetNonce(ctx) }>
    (() => {
        const registerToast = () => {
            Alpine.data('example', () => ({
                someState: true,
                someFunc() {
                    // ...
                },
            }));
        };

        typeof Alpine !== 'undefined'
            ? registerToast()
            : document.addEventListener('alpine:init', registerToast);
    })();
</script>

Maybe it's just me, but this workaround doesn't feel entirely right. For now, I'll stick with my current solution where I separate the script from the component and include them both separately:

Load the script on initial page load:
```
@componentScript
```
Load the HTML component either on the initial page load or via HTMX:
```
@component
```

SimoTod Dec 20, 2024
Collaborator

unpkg.com had been a bit unreliable as a CDN in the past but it should be the same.

Just to double check I understand correctly, you want to write a file that could be included at both page load and after a swap.

In that case, your understanding is correct: alpine:init is a browser event that fires once at page load (the script is deferred so all document.addEventListener('alpine:init', ... register their listeners and then the page kicks in).
The event does not fire again when HTMX swaps the page (as there's no page load) so the listener at that point is pointless.

Putting the script in page at load could limit a bit what you can do in the future, the

typeof Alpine !== 'undefined'
            ? registerToast()
            : document.addEventListener('alpine:init', registerToast);

thing doesn't look too bad to me, but whatever works for you will be okay.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Best practice for Alpine component initialization when loading dynamically with HTMX + CSP #4478

{{title}}

Replies: 2 comments 10 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Best practice for Alpine component initialization when loading dynamically with HTMX + CSP #4478

axzilla Dec 16, 2024

The Setup

The Problem

Current Workaround

Questions

Replies: 2 comments · 10 replies

SimoTod Dec 16, 2024 Collaborator

SimoTod Dec 16, 2024 Collaborator

axzilla Dec 17, 2024 Author

SimoTod Dec 17, 2024 Collaborator

SimoTod Dec 17, 2024 Collaborator

axzilla Dec 18, 2024 Author

SimoTod Dec 18, 2024 Collaborator

axzilla Dec 20, 2024 Author

SimoTod Dec 20, 2024 Collaborator

axzilla
Dec 16, 2024

Replies: 2 comments 10 replies

SimoTod
Dec 16, 2024
Collaborator

SimoTod Dec 16, 2024
Collaborator

axzilla Dec 17, 2024
Author

SimoTod
Dec 17, 2024
Collaborator

SimoTod Dec 17, 2024
Collaborator

axzilla Dec 18, 2024
Author

SimoTod Dec 18, 2024
Collaborator

axzilla Dec 20, 2024
Author

SimoTod Dec 20, 2024
Collaborator