Adding plugins to esbuild for mix assets.deploy

Phoenix Forum Questions / Help
, ,
1

The config.exs looks like:

default: [
	args: ~w(
		js/app.js
		--bundle
		--target=es2017
		--outdir=../priv/static/assets
		--external:/fonts/*
		--external:/images/*
	),
	cd: Path.expand("../assets", __DIR__),
	env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
]

Down the line though, there are a few “Svelte” components. How does one add Svelte plugin here, to the “default” config so that mix assets.deploy can pass w/o telling me that No loader is configured for ".svelte" files ?

2

The elixir esbuild package pulls in precompiled esbuild binaries. For plugins you’d need to compile esbuild with support for said plugin and use its js or go API to use them.

3

I found something here:

https://esbuild.github.io/plugins/#svelte-plugin

AFAIU it seems like there should be no need for compiling custom binaries:

“Here’s the code for the plugin (there is no Go version of this plugin because the Svelte compiler is written in JavaScript)” ?

Now the question how does one pass this to esbuild invocation?

4

I don’t think you can use esbuild plugins with Phoenix out of the box.

That link has a hack to do so, but it was a bit much for me, so I just made my own watcher (for dev) and mix tasks (for deploying to prod).

My use case was using SASS/SCSS, and I ended up using postcss and postcss-cli.

1 Like
5

I think plugins started working at some point of time with the default pipeline How to get DaisyUI and Phoenix to work? - #19 by Sebb

I’m running a custom tailwind-cli with daisyui included at the moment though… but planning on trying to just use default with a single npm install…

6

Yes, after about a third of a nice Sunday lost, I arrived at almost exactly the same results/solution as described there :wink: Damn, it even has the mix cmd I asked about in another thread, although written a tiny tad differently.

So answering myself:

One does it calling node and passing a JS to it rather than using the integrated esbuild lib.

7

For a no-frills SASS compiler there is also DartSass which installs a binary and has a watcher similar to esbuild.

8

Nice, but how do I compile Svelte components with it?

9

I wanted to use that, but the binary doesn’t run on Alpine. It requires a real glibc and not just the compat package. :pensive: