CSP build on NPM

[chadanuk]

Discussed in #1929

^{Originally posted by tomb1n0 August 10, 2021}
First of all, thanks for alpine - i'm absolutely loving using it in combination with blade components and inside livewire!

As far as I can see the CSP version of alpine isn't up on NPM, howeve plugins like intersect and persist are.

Is there any reason for this or is it expected that developers should build the CSP version themselves? if this is the case the documentation doesn't make this clear :(

[haarts]

In the meanwhile how DO you build the CSP version yourself?

[mhio]

So this was a discussion, turned into an issue, that was closed and moved into a new discussion??

In any case, I ran into the same issue:

git clone https://github.com/alpinejs/alpine
cd alpine
npm install
npm run build

$ find packages/csp/dist -ls
   524806      4 drwxr--r--   2 root     root         4096 Nov 29 06:18 packages/csp/dist/
   524854     36 -rw-r--r--   1 root     root        36216 Nov 29 06:18 packages/csp/dist/cdn.min.js
   524859     88 -rw-r--r--   1 root     root        88377 Nov 29 06:18 packages/csp/dist/cdn.js
   524856    104 -rw-r--r--   1 root     root       105845 Nov 29 06:18 packages/csp/dist/module.esm.js
   524855    104 -rw-r--r--   1 root     root       106164 Nov 29 06:18 packages/csp/dist/module.cjs.js

[mhio]

I should add, you probably want to checkout a release tag before building

git checkout v3.5.2

[tomb1n0]

Yeah i feel like there has to be something missing here. If it's expected for developers to build this themselves that's fine but it'd be nice if the documentation made this clear..

[thibaudcolas]

I got really confused by this as well so have made a PR updating the docs (#2619). FYI there are also a lot of people asking for this in #237.

[thibaudcolas]

I made a build for myself and thought I’d share in case it helps others. It’s from commit d49a0b0, here is a ZIP:

alpinejs-csp-3.0.0-alpha.0.tgz.zip

Commands I ran to get this

git clone [email protected]:alpinejs/alpine.git
cd alpine
nvm use 16
npm install
npm run build
cd packages/csp
npm pack --loglevel notice 2>&1 >/dev/null | sed -e 's/^npm notice //'

Logs of `npm pack`

📦  @alpinejs/[email protected]
=== Tarball Contents ===
106B    builds/cdn.js
59B     builds/module.js
92.3kB  dist/cdn.js
38.1kB  dist/cdn.min.js
109.8kB dist/module.cjs.js
109.5kB dist/module.esm.js
306B    package.json
1.3kB   src/index.js
=== Tarball Details ===
name:          @alpinejs/csp
version:       3.0.0-alpha.0
filename:      @alpinejs/csp-3.0.0-alpha.0.tgz
package size:  87.7 kB
unpacked size: 351.4 kB
shasum:        8f5f42b27d88eb2f3c96042dedb83c5aa67253e2
integrity:     sha512-U9FlqTxU+OXJK[...]9uYcFNDFMAaGg==
total files:   8

alpinejs-csp-3.0.0-alpha.0.tgz

I’ve also published it to npm as @thibaudcolas/alpinejs-csp-build. Here is a CodePen with it up and running: https://codepen.io/thibaudcolas/pen/qBVdoXp.

[SimoTod]

It's worth pointing out that x-model doesn't work in the csp build at the moment so other stuff may be incomplete as well.

[thibaudcolas]

Adding links to all the relevant threads on this for future reference:

• Content Security Policy #3011
• Need a link update for alpine js csp #2773
• x-for for CSP build #2724
• CSP package on npmjs.com #1867
• Make CSP build available via npm registry #2395
• CSP on npm & suitability for use with components #2650
• Can't find @alpinejs/csp #1529

[ecmanriquejrdev]

Is there any updates regarding the npm Content Security Policy (CSP) related issues of alpinejs