Javascript pipe processing does not work

Any idea why

{{ $jquery := resources.Get "js/jquery.js" }}
{{ $bootstrap := resources.Get "js/bootstrap.js" }}
{{ $app := resources.Get "js/app.js" }}

<script src="{{ $jquery.Permalink }}"></script>
<script src="{{ $bootstrap.Permalink }}"></script>
<script src="{{ $app.Permalink }}"></script>

works, but

{{ $jquery := resources.Get "js/jquery.js" }}
{{ $bootstrap := resources.Get "js/bootstrap.js" }}
{{ $app := resources.Get "js/app.js" }}

{{ if .Site.IsServer }}
  {{ $main := slice $jquery $bootstrap $app | resources.Concat "main.js" }}
  <script src="{{ $main.Permalink }}"></script>
{{ else }}
  {{ $main := slice $jquery $bootstrap $app | resources.Concat "main.js" | minify | fingerprint }}
  <script src="{{ $main.Permalink }}" integrity="{{ $main.Data.Integrity }}"></script>
{{ end }}

doesn’t?

The later even prevents all inline Javascript in the app from working…
I tried to follow the guidelines in @regis’s article.

Here is the code

You cannot declare the same variable twice even in a conditional context. You should declare your variable with the most common value first.

Then run your condition and overwrite it if test is passed.

Finally drop your script tag with the ‘
$main.Permalink.

I’d quickly post an illustrative code block for your but I’m on mobile and lazy :slight_smile:. If this “text block”is not clear enough, I’ll eventually do it for you once in front of my computer.

Thanks Régis for quick reply, if I understood well, you mean something like:

{{ $jquery := resources.Get "js/jquery.js" }}
{{ $bootstrap := resources.Get "js/bootstrap.js" }}
{{ $app := resources.Get "js/app.js" }}

{{ $main := slice $jquery $bootstrap $app | resources.Concat "main.js" | minify | fingerprint }}

{{ if .Site.IsServer }}
  {{ $main := slice $jquery $bootstrap $app | resources.Concat "main.js" }}
  <script src="{{ $main.Permalink }}"></script>
{{ else }}
  <script src="{{ $main.Permalink }}" integrity="{{ $main.Data.Integrity }}"></script>
{{ end }} 

This still doesn’t work.
I didn’t catch the dropping script tag thing.

I would quite like an illustrative code block, will wait for it, thank you :slight_smile:

Yeah, I didn’t notice your script tags differed (integrity), so your piece of code is almost right. You have to remember that while := is used to assign a value to a new variable, = is used to assign a value to an existing one. By using := twice on the same variable, you are in effect declaring it twice.
You can check this example at the bottom of this section from the referred piece.

Your corrected code blocks (= instead of := on the second assignment) should work fine:

{{ $jquery := resources.Get "js/jquery.js" }}
{{ $bootstrap := resources.Get "js/bootstrap.js" }}
{{ $app := resources.Get "js/app.js" }}

{{ $main := slice $jquery $bootstrap $app | resources.Concat "main.js" | minify | fingerprint }}

{{ if .Site.IsServer }}
  {{ $main = slice $jquery $bootstrap $app | resources.Concat "main.js" }}
  <script src="{{ $main.Permalink }}"></script>
{{ else }}
  <script src="{{ $main.Permalink }}" integrity="{{ $main.Data.Integrity }}"></script>
{{ end }} 

Also, here may be an even slicker approach:

{{ $jquery := resources.Get "js/jquery.js" }}
{{ $bootstrap := resources.Get "js/bootstrap.js" }}
{{ $app := resources.Get "js/app.js" }}

{{ $main := slice $jquery $bootstrap $app | resources.Concat "main.js" }}

{{ if not .Site.IsServer }}
  {{ $main = $main | minify | fingerprint }}
{{ end }} 
<script src="{{ $main.Permalink }}" {{ with $main.Data.Integrity }} integrity="{{ . }}"{{ end }}></script>
1 Like

Thank you, I will be careful about := and =.

However, it still doesn’t work. In fact, all code blocks mentioned here outputs a (in appearance) well processed main.js (concatenated, minfied, etc.) and it’s accessible at (root)/main.js after build,so the piping seems ok, but it seems the result is not “taken into account” so to speak, and another weird side effect is all inline javascript (for example the contact button with “onclick” function, in nav partial) isn’t working any more.

So I guess the problem doesn’t come directly from script piping. Do you have an idea where it could come from? Can you reproduce this behaviour locally?

Yet I don’t have a complicated dependencies bundle, it’s a very simple website, I don’t know what could interfere…

The build message seems ok:

λ hugo server -D -verbose
INFO 2019/01/03 17:45:48 No translation bundle found for default language "fr"
INFO 2019/01/03 17:45:48 Translation func for language fr not found, use default.
INFO 2019/01/03 17:45:48 i18n not initialized; if you need string translations, check that you have a bundle in /i18n that matches the site language or the default language.
INFO 2019/01/03 17:45:48 Using config file:
Building sites … INFO 2019/01/03 17:45:48 syncing static files to (***)\inwardmovement.github.io\
INFO 2019/01/03 17:45:48 No Static directory found
INFO 2019/01/03 17:45:48 found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
INFO 2019/01/03 17:45:48 Alias "/poems/" translated to "poems\index.html"

               | FR
+------------------+-----+
Pages            | 306
Paginator pages  |   0
Non-page files   |   0
Static files     |   0
Processed images |   0
Aliases          |   1
Sitemaps         |   1
Cleaned          |   0

Total in 326 ms
Watching for changes in (***)\inwardmovement.github.io\{assets,content,layouts}
Watching for config changes in (***)\inwardmovement.github.io\config.yml
Environment: "rbose"
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Oh, a fellow frenchman I see.

For me, the only problem is a comment in your app.js which once part of a concatenation throws a js error (Uncaught SyntaxError: Unexpected identifier). I removed this form the top of app.js:

/************************************************************
 TOP BUTTON
************************************************************/

and everything worked fine. On my local at least. I could not test the site with minify etc…

Maaan thank you, it works as expected now!
I should have checked the console, beginner’s mistake, my bad…

Just to clarify things (I think the documentation is not exhaustive on this point): why an .IsServer check is required for <script>s and not for <style>s? What is it useful for, Is it really mandatory?

And yeah, it seems to me a lot of french speaking people are using Hugo out there ^^

Hi folks,

Is it possible to check .Type in a condition, so you can render JS based on a type value set in content frontmatter?

I also followed @regis’s tutorial which was super helpful, but I’m struggling to make it work:

  {{ $cloudinary := resources.Get "js/cloudinary-core-shrinkwrap.min.js" }}
  {{ $lazysizes := resources.Get "js/lazysizes.js" }}
  {{ $likes := resources.Get "js/likes.js" }}

  {{ $defaultJS := slice $cloudinary $lazysizes | resources.Concat "app.js" }}
  {{ $likesJS := slice $cloudinary $lazysizes $likes | resources.Concat "app-likes.js" }}

  {{ $script := $defaultJS }}

  {{if eq .Type "likes" }}
  {{ $script = $likesJS }}
  {{ end }}

  {{ $globalJS := $script | resources.Minify | resources.Fingerprint  }}

  <script src="{{ $globalJS.Permalink }}" integrity="{{ $globalJS.Data.Integrity }}"
    media="screen"></script>

Right now app.js renders regardless of the condition.

Cheers!

Hey there,

What is .Type printing if you add {{ printf "%#v" .Type }} somewhere?

1 Like

Thank you @regis that totally did the trick! It was printing ‘notes’ for every page and I realise that’s because I was trying to render a cached partial, like this:

{{ partialCached "footer.html" . }}

But clearly that prevents the condition from working.

So I switched back to a regular partial, like this:

{{ partial "footer.html" . }}

And we’re back in business. Works just as expected.
:grinning:

It should be safe to use {{ partialCached "footer.html" . .Type }} if the type is the only critical variant.

1 Like

Just check this out and it works great. I’ve learnt something new here, thanks @regis