# Customizable Pipes (especially for JS resources)

**URL:** <https://discourse.gohugo.io/t/customizable-pipes-especially-for-js-resources/44266>\
**Category:** feature\
**Created:** [May 8, 2023, 9:11pm UTC](https://discourse.gohugo.io/t/customizable-pipes-especially-for-js-resources/44266 "2023-05-08T21:11:57Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![AlanBreck](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/alanbreck/32/11694_2.png) [@AlanBreck](https://discourse.gohugo.io/u/AlanBreck)\
**Post date:** [May 8, 2023, 9:11pm UTC](https://discourse.gohugo.io/t/customizable-pipes-especially-for-js-resources/44266/1 "2023-05-08T21:11:57Z")

</div>

I’m attempting to build a process whereby I can easily mount hydratable Svelte components (but this could apply to any number of libraries) into my templates. While not directly related to the idea of an `island`, it is largely inspired by the demos in 11ty’s [`is-land` plugin](https://is-land.11ty.dev/).

An example of such a component being loaded into an 11ty template can be found here: [is-land/demo-svelte.html at main · 11ty/is-land · GitHub](https://github.com/11ty/is-land/blob/main/demo/demo-svelte.html#L21). What you can see there is the use of a custom [filter in 11ty](https://www.11ty.dev/docs/filters/) built to compile Svelte components.

I would love to do something similar with Hugo. My first thought was to use the `js.Build`. It’s _so_ powerful, and provides really important features like `shims`, parameters, etc. The only problem is that I can’t customize the actual build process, as well as the results returned by the script.

For example, I imagine calling such a component as such:

```html
{{ $calcComponent := resources.Get "components/Calculator.svelte" | js.Build (dict "params" (dict "strings" (dict "calculator" (i18n "calculator")))) }}

```

The custom build script would be required to return a consistent shape of some variety, one of which could be a generic `details` or `metadata` property which would be a dictionary with whatever non-conventional items the custom build script needed to return.

It would then be used in the template as such:

```html
<script src="{{ $calcComponent.RelPermalink }}"></script>
<style>
  {{ $calcComponent.metadata.css | safeCSS }}
</style>
{{ $calcComponent.metadata.html | safeHTML }}

```

I’m not sure if `js.Build` would be immediately appropriate for this since I’m not sure that ESBuild provides this level of customization to the build output, but `js.Build`’s API is super close to what I’m imagining here, which is why I’ve used it as a starting point.

---

<div class="post-metadata">

**Author:** ![AlanBreck](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/alanbreck/32/11694_2.png) [@AlanBreck](https://discourse.gohugo.io/u/AlanBreck)\
**Post date:** [May 9, 2023, 4:50pm UTC](https://discourse.gohugo.io/t/customizable-pipes-especially-for-js-resources/44266/2 "2023-05-09T16:50:50Z")

</div>

Several topics that seem related:

> [@Hugo integration with js.Build (ESBuild) and multiple output files](https://discourse.gohugo.io/t/hugo-integration-with-js-build-esbuild-and-multiple-output-files/32647):
>
> {{ resources.Get "script.js" | js.Build }} uses the ESBuild api as a single entry point and expects a single output file (to pass through additional pipes). ESBuild, though, sometimes creates multiple output files from a single entry point, e.g. code splitting, external source maps, and “import \*.css” statements in javascript files. This leads to my question: how will/should Hugo handle multiple outputs from ESBuild in Hugo Pipes? Currently, Hugo already added external source maps as a develop…

> [@Compile svelte file via js.Build](https://discourse.gohugo.io/t/compile-svelte-file-via-js-build/29470):
>
> Currently with the esBuild support in Hugo 0.78.2, I was wondering can we use esBuild plugins system in Hugo which can compile svelte files into normal js files like shown [here](https://esbuild.github.io/plugins/#svelte-plugin). Simply I want Hugo to handle svelte files using js.Build.

> [@Is it possible to add plugins to ESBuild for JS in Hugo?](https://discourse.gohugo.io/t/is-it-possible-to-add-plugins-to-esbuild-for-js-in-hugo/32391):
>
> I’m trying to go for an all out Hugo modular theme, without NPM dependencies. Most of the NPM dependencies are done but I’m stuck with dependencies in which index.js imports SCSS styles like [cookieconsent/index.js at dev · osano/cookieconsent · GitHub](https://github.com/osano/cookieconsent/blob/dev/src/index.js#L3). I want Hugo to tell ESBuild to use the [esbuild-plugin-sass](https://github.com/koluch/esbuild-plugin-sass) plugin for this purpose, but I couldn’t find any mention in the Hugo docs. Would it be possible to do so, or is there some other way I can approach this?

---

<div class="post-metadata">

**Author:** ![AlanBreck](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/alanbreck/32/11694_2.png) [@AlanBreck](https://discourse.gohugo.io/u/AlanBreck)\
**Post date:** [May 15, 2023, 4:39pm UTC](https://discourse.gohugo.io/t/customizable-pipes-especially-for-js-resources/44266/3 "2023-05-15T16:39:59Z")

</div>

Here’s a blog post from someone wanting something similar: [Hugo, Tailwind, Svelte - luit.eu](https://luit.eu/post/hugo-tailwind-svelte/)

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [May 15, 2023, 8:57pm UTC](https://discourse.gohugo.io/t/customizable-pipes-especially-for-js-resources/44266/4 "2023-05-15T20:57:45Z")

</div>

So, the current showstopper for this is that Hugo currently cannot execute JavaScript. So, while ESBuild is written with Go, it’s JavaScript plugins runs in … JavaScript (which I assume is the case with any plugin for Svelte, Vue etc.)

---

<div class="post-metadata">

**Author:** ![jswtch](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jswtch/32/8984_2.png) [@jswtch](https://discourse.gohugo.io/u/jswtch)\
**Post date:** [May 17, 2023, 9:04am UTC](https://discourse.gohugo.io/t/customizable-pipes-especially-for-js-resources/44266/5 "2023-05-17T09:04:47Z")

</div>

Off topic, but you might find value with AlpineJS

> [@Using AlpineJS 3 with Hugo](https://discourse.gohugo.io/t/using-alpinejs-3-with-hugo/33895):
>
> AlpineJS 3 have been out for a month or two now. I have been a little too busy to look into it, but it looks fantastic on paper (see [https://alpinejs.dev/](https://alpinejs.dev/)), among other thing it uses Vue’s “reactive engine”. I tested it out today, and I think the fastest way to get up and running is: npm install alpinejs Then in assets/js/index.js: import Alpine from 'alpinejs'; window.Alpine = Alpine; Alpine.start(); Then build that with ESBuild (which is also what AlpineJS is used for their packaging): {…

[https://alpinejs.dev/start-here](https://alpinejs.dev/start-here)