Inline bundled/post-processed asset resource into HTML

support
1

I want to inject/inline a typescript asset, inside a head → script tag, after being processed using js.Build pipe.

I tried looking into Hugo’s go package docs but found that .resource.Data does not contain any .Content property which can be inlined into HTML as a string.

Not sure if this is even possible yet, because I couldn’t find any resource/example related to this topic.

2

structure

assets/
└── js/
    └── main.js

template

{{ with resources.Get "js/main.js" | js.Build }}
  <script>
    {{ .Content | safeJS }}
  </script>
{{ end }}
1 Like
3

Thanks a lot @jmooring for the quick response. :bowing_man:
This works great. I tried and tested this.

There’s one issue I saw while using this template:


Setup

inline/test.ts

const longNameforFunction = (): string => {
  console.log('Hello World');
  return 'Ended';
}

const variable = `It has ${longNameforFunction()}`;
console.log(variable);

HTML template

{{ $inline := resources.Get "inline/test.ts" | js.Build $esbuild_options }}
{{ with $inline }}
    <script>
      {{ .Content | safeJS }}
    </script>
{{ end }}

Result

The above template, with $esbuild_options generates:

<script>var longNameforFunction = () => (console.log("Hello World"), "Ended"), variable = `It has ${longNameforFunction()}`; console.log(variable)</script>

which works but isn’t uglified/minified, as per the esbuild options I provide to the pipe function.

New Setup

When I try adding one more js.Build pipe to the above HTML template, .Content provides a proper output.

New HTML Template

<!-- There's this `js.Build` extra pipe added to this template, compared to the previous one -->
{{ $inline := resources.Get "inline/test.ts" | js.Build $esbuild_options | js.Build }}
{{ with $inline }}
    <script>
      {{ .Content | safeJS }}
    </script>
{{ end }}

Result:

<script>(() => { var e = () => (console.log("Hello World"), "Ended"), t = `It has ${e()}`; console.log(t) })()</script>

The result now is properly uglified and has less number of characters than before.


My esbuild config looks like this:

{
  "target": "es2019",
  "defines": {},
  "format": "esm",
  "minify": true
}
4

I am unable to reproduce the problem.

assets/inline/test.ts

const longNameforFunction = (): string => {
  console.log('Hello World');
  return 'Ended';
}

const variable = `It has ${longNameforFunction()}`;
console.log(variable);

layouts/_default/baseof.html

{{ $esbuild_options := dict "minify" true }}
{{ $inline := resources.Get "inline/test.ts" | js.Build $esbuild_options }}
{{ with $inline }}
  <script>
    {{ .Content | safeJS }}
  </script>
{{ end }}

result

<script>
  (()=>{var o=()=>(console.log("Hello World"),"Ended"),n=`It has ${o()}`;console.log(n);})();
</script>
5

Apologies @jmooring, I am new to golang

I dug a little deeper and found that the following if block is causing the issue:

{{ $NODE_ENV := (os.Getenv "NODE_ENV") }}
{{ $esbuild_defines := dict "process.env.NODE_ENV" (jsonify $NODE_ENV) }}
{{ $esbuild_options := (dict "target" "es2019" "defines" $esbuild_defines "format" "esm") }}

{{ print (eq $NODE_ENV "production")}} <!-- it's prints `true` -->
{{ if eq $NODE_ENV "production" }}
  {{ $esbuild_options := merge $esbuild_options (dict "minify" true) }}
{{ end }}

I printed the conditional statement, and it returns true, but the if block is not functioning properly.
Am I missing something here?
Running the merge function without the condition works. I feel it’s something related to the variable scope, but not sure.

6

Change this:

{{ $esbuild_options := merge $esbuild_options (dict "minify" true) }}

To this:

{{ $esbuild_options = merge $esbuild_options (dict "minify" true) }}

To initialize a variable, use :=
To change its value, use =

https://pkg.go.dev/text/template#hdr-Variables

A variable’s scope extends to the “end” action of the control structure (“if”, “with”, or “range”) in which it is declared, or to the end of the template if there is no such control structure.

1 Like
7

Thanks a lot, @jmooring :bowing_man:. It worked!! :1st_place_medal:

Will work on my golang skills once I am done setting this website :100:

8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.